Merge pull request #371 from stone-lyl/feat-drop

feat: implement 'drop' and 'only' functionality in Table Component
ajthinking · Jan 22, 2025 · d3bc0c1 · d3bc0c1
2 parents 07f89d7 + 9797e41
commit d3bc0c1
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/packages/core/src/InputObserverController.test.ts b/packages/core/src/InputObserverController.test.ts
@@ -344,7 +344,6 @@ describe('InputObserverController', () => {
         linkIds: ['linkId'],
         throttleMs: 200,
         onReceive: (items) => {
-          console.log('onReceive addlinkItemsObserver', items);
           expect(items).toEqual([{ type: RequestObserverType.observeLinkItems, linkId: 'linkId', items: [{value: 1}, {value: 2}]}]);
         }
       } as ObserveLinkItems);

diff --git a/packages/core/src/computers/Table.ts b/packages/core/src/computers/Table.ts
@@ -1,3 +1,4 @@
+import { num, str, strList } from '../Param';
 import { Computer } from '../types/Computer';
 
 export const Table: Computer = {
@@ -8,7 +9,18 @@ export const Table: Computer = {
     schema: {},
   }],
   outputs: [],
-  params: [],
+  params: [
+    strList({
+      name: 'only',
+      help: 'If set, only the specified paths will be shown. Use comma separation',
+      value: '',
+    }),
+    strList({
+      name: 'drop',
+      help: 'If set, the specified paths will be dropped. Use comma separation',
+      value: '',
+    }),
+  ],
 
   async* run({ input, hooks, params: rawParams, node, storage }) {
     while(true) {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -59,4 +59,5 @@ export type { ObserverStorage, GetLinkItemsParams } from './types/ObserverStorag
 export { DiagramObserverStorage } from './storage/diagramObserverStorage'
 export type { LinkItemsParam } from './types/LinkItemsParam'
 export { LinkItemsParamSchema } from './types/LinkItemsParam'
-export type { LinksCountParam } from './types/LinksCountParam'
+export type { LinksCountParam } from './types/LinksCountParam'
+export { ItemWithParams } from './ItemWithParams';
diff --git a/packages/ui/src/components/Node/table/ItemCollection.ts b/packages/ui/src/components/Node/table/ItemCollection.ts
@@ -6,7 +6,7 @@ export class ItemCollection {
   constructor(public items: ItemValue[]) {
   }
 
-  toTable() {
+  toTable(only: string[] = [], drop: string[] = []) {
     const headers: Set<string> = new Set();
     const rows: (string | undefined)[][] = [];
 
@@ -33,6 +33,16 @@ export class ItemCollection {
       }
     });
 
+    // filter headers by only and drop
+    headers.forEach(header => {
+      if (only.length && !only.includes(header)) {
+        headers.delete(header);
+      }
+      if (drop.length && drop.includes(header)) {
+        headers.delete(header);
+      }
+    });
+
     /**
      * @description get value by header's path
      */

diff --git a/packages/ui/src/components/Node/table/TableNodeComponent.tsx b/packages/ui/src/components/Node/table/TableNodeComponent.tsx
@@ -7,12 +7,23 @@ import { ColumnDef, getCoreRowModel, getSortedRowModel, useReactTable } from '@t
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useObserverTable } from './UseObserverTable';
 import CustomHandle from '../CustomHandle';
-import { ItemValue } from '@data-story/core';
+import { ItemValue, ItemWithParams } from '@data-story/core';
 import { LoadingComponent } from './LoadingComponent';
 import { TableCell } from './TableCell';
 import { MemoizedTableBody, FIXED_WIDTH, FIXED_HEIGHT } from './MemoizedTableBody';
 import { MemoizedTableHeader } from './MemoizedTableHeader';
 
+function getFormatterOnlyAndDropParam(items: ItemValue[], data: DataStoryNodeData): { only: string[], drop: string[] } {
+  const paramEvaluator = new ItemWithParams(items, data.params, []);
+  let only: string[] = [], drop: string[] = [];
+  try {
+    only = paramEvaluator.params?.only as string[] ?? [];
+    drop = paramEvaluator.params?.drop as string[] ?? [];
+  } catch(e) {
+  }
+  return { only, drop };
+}
+
 const TableNodeComponent = ({ id, data }: {
   id: string,
   data: DataStoryNodeData,
@@ -36,10 +47,11 @@ const TableNodeComponent = ({ id, data }: {
 
   useObserverTable({ id, setIsDataFetched, setItems, items, parentRef });
 
-  let { headers, rows } = useMemo(() => {
+  const { headers, rows } = useMemo(() => {
+    const { only, drop } = getFormatterOnlyAndDropParam(items, data);
     const itemCollection = new ItemCollection(items);
-    return itemCollection.toTable();
-  }, [items]);
+    return itemCollection.toTable(only, drop);
+  }, [data.params, items]);
 
   const input = data.inputs[0];