Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: remove footer from Playground page and fix missing output issue #379

Merged
merged 3 commits into from
Feb 6, 2025
+9 −9
Merged

feat: remove footer from Playground page and fix missing output issue #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f93d8e
fix: resolve issue of missing output when adding a node to the edge b…
stone-lyl Feb 5, 2025
e922032
feat: remove the footer from the Playground page.
stone-lyl Feb 5, 2025
8b06a27
feat: remove extra height when the table is not scrollable
stone-lyl Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,4 @@ yarn.lock
*.orig
*.swp
*.swo
.aider*
3 changes: 2 additions & 1 deletion packages/docs/pages/_meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,16 @@ export default {
'type': 'page',
'theme': {
'layout': 'raw',
'footer': false,
},
},
'playground-node': {
'title': 'Playground NodeJS',
'display': 'hidden',
'footer': false,
'type': 'page',
'theme': {
'layout': 'raw',
'footer': false,
},
},
// 'Visualize': 'Visualize',
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/Node/table/TableNodeComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,8 +149,9 @@ const TableNodeComponent = ({ id, data }: {
return '40px';
}
if (rows.length <= 9) {
return (rows.length + 1) * FIXED_HEIGHT + 14 + 'px';
return (rows.length + 1) * FIXED_HEIGHT + 'px';
}
// The 14px extra height is determined through testing to ensure that the table scrollbar does not obscure the height of the table body when it appears.
return 11 * FIXED_HEIGHT + 14 + 'px';
}, [showNoData, rows.length]);

Expand Down
11 changes: 4 additions & 7 deletions packages/ui/src/components/Node/table/UseObserverTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { createDataStoryId, ItemValue, ObserveLinkUpdate, RequestObserverType }
import { useLatest } from 'ahooks';
import { shallow } from 'zustand/shallow';
import { MutableRefObject, useEffect, useLayoutEffect, useRef } from 'react';
import { useHandleConnections } from '@xyflow/react';

const initialScreenCount: number = 15;
const tableThrottleMs: number = 100;
Expand All @@ -29,13 +28,12 @@ export function useObserverTable({ id, setIsDataFetched, setItems, items, parent
const itemsRef = useRef(items);
itemsRef.current = items;

const tableInputId = `${id}.input`;
const connections = useHandleConnections({ type: 'target', id: tableInputId });
const linkIds = toDiagram()?.getInputLinkIdsFromNodeIdAndPortName?.(id);
const linkIdsString = JSON.stringify(linkIds);

const loadMore = useLatest(async () => {
if (pendingRequest.current) return;

const linkIds = toDiagram()?.getInputLinkIdsFromNodeIdAndPortName?.(id);
if (!client?.getDataFromStorage || !linkIds) return;

// Clear offsets if re-running the diagram (no items)
Expand Down Expand Up @@ -76,7 +74,6 @@ export function useObserverTable({ id, setIsDataFetched, setItems, items, parent
});

useEffect(() => {
const linkIds = toDiagram()?.getInputLinkIdsFromNodeIdAndPortName?.(id);
if (!client?.observeLinkUpdate || !linkIds) return;

const tableUpdate: ObserveLinkUpdate = {
Expand All @@ -95,8 +92,8 @@ export function useObserverTable({ id, setIsDataFetched, setItems, items, parent
return () => {
subscription?.unsubscribe();
};
// connections.length is 0 means the node is not connected
}, [client, connections.length, id, loadMore, toDiagram]);
// use linkIdsString replace linkIds to prevent infinite loop
}, [client, id, linkIdsString, loadMore, toDiagram]);

useLayoutEffect(() => {
const currentRef = parentRef.current;
Expand Down