Merge pull request #372 from stone-lyl/main

feat: enhance Table Cell Width and StringList Parsing
ajthinking · Jan 22, 2025 · 796788d · 796788d
2 parents d3bc0c1 + eeec6c3
commit 796788d
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 38 deletions.
diff --git a/packages/core/src/ItemWithParams/StringListParamEvaluator.ts b/packages/core/src/ItemWithParams/StringListParamEvaluator.ts
@@ -7,7 +7,11 @@ export class StringListParamEvaluator implements ParamsValueEvaluator<StringList
 
   evaluate(itemValue: ItemValue, param: StringListParam) {
     const value = param.value as string;
-    const result = value.split(',').map(v => v.trim().toString()).filter(v => v.length > 0);
+    // the value will be a string with comma or newline separated values
+    const result = value.split('\n')
+      .flatMap(line => line.split(','))
+      .map(v => v.trim())
+      .filter(v => v.length > 0);
     return result;
   }
 

diff --git a/packages/ui/src/components/Node/table/MemoizedTableBody.tsx b/packages/ui/src/components/Node/table/MemoizedTableBody.tsx
@@ -1,9 +1,7 @@
 import React, { memo } from 'react';
 import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import { flexRender, RowModel } from '@tanstack/react-table';
-
-export const FIXED_HEIGHT = 18;
-export const FIXED_WIDTH = 75;
+import { calculateColumnWidth, FIXED_HEIGHT } from './TableCell';
 
 export const MemoizedTableBody = memo(({
   virtualRows,
@@ -48,14 +46,15 @@ export const MemoizedTableBody = memo(({
             />
             {virtualColumns.map((virtualColumn) => {
               const cell = row.getVisibleCells()[virtualColumn.index];
+              const columnWidth = calculateColumnWidth(cell);
               return (
                 <td
                   key={cell.id}
                   className="whitespace-nowrap text-left"
                   style={{
                     display: 'flex',
                     position: 'relative',
-                    width: `${FIXED_WIDTH}px`,
+                    width: `${columnWidth}px`,
                     height: `${FIXED_HEIGHT}px`,
                   }}
                 >

diff --git a/packages/ui/src/components/Node/table/MemoizedTableHeader.tsx b/packages/ui/src/components/Node/table/MemoizedTableHeader.tsx
@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { VirtualItem } from '@tanstack/react-virtual';
-import { FIXED_WIDTH } from './MemoizedTableBody';
+import { calculateColumnWidth } from './TableCell';
 
 export const MemoizedTableHeader = memo(({
   headerGroups,
@@ -33,14 +33,16 @@ export const MemoizedTableHeader = memo(({
           {
             virtualColumns.map((virtualColumn) => {
               const headerColumn = headerGroup.headers[virtualColumn.index];
+              const columnWidth = calculateColumnWidth(headerColumn);
+
               return (
                 <th
                   data-cy={'data-story-table-th'}
                   key={headerColumn.id}
                   style={{
                     display: 'flex',
                     position: 'relative',
-                    width: `${FIXED_WIDTH}px`,
+                    width: `${columnWidth}px`,
                   }}
                   className="whitespace-nowrap bg-gray-200 text-left border-r-0.5 last:border-r-0 border-gray-300"
                 >

diff --git a/packages/ui/src/components/Node/table/TableCell.tsx b/packages/ui/src/components/Node/table/TableCell.tsx
@@ -11,12 +11,23 @@ import {
   useInteractions,
   useRole
 } from '@floating-ui/react';
+import { Cell, Header } from '@tanstack/react-table';
 
-const TRUNCATE_CELL_LENGTH = 8;
+export const FIXED_HEIGHT = 18;
+export const FIXED_WIDTH = 75;
+export const MIN_WIDTH = 25;
+export const MAX_WIDTH = 150;
+
+export const calculateColumnWidth = (cell: Header<Record<string, unknown>, unknown>|Cell<Record<string, unknown>, unknown>) => {
+  // @ts-ignore
+  const header = (cell.column.columnDef?.accessorKey ?? '') as unknown as string;
+  if (header.length > 8) return MAX_WIDTH;
+  return FIXED_WIDTH;
+}
 
 const formatCellContent = (content: unknown) => {
   let result = formatTooltipContent(content) as string;
-  return result.length > TRUNCATE_CELL_LENGTH ? result.slice(0, TRUNCATE_CELL_LENGTH) + '..' : result;
+  return result;
 }
 const formatTooltipContent = (content: unknown) => {
   try {
@@ -71,8 +82,9 @@ export function TableCell(props: {tableRef: React.RefObject<HTMLTableElement>, c
   }
 
   return (
-    <div>
+    <div className='w-full'>
       <span
+        className={'whitespace-nowrap overflow-hidden overflow-ellipsis inline-block w-full'}
         ref={refs.setReference} {...getReferenceProps()}
       >
         {formatCellContent(content)}
@@ -84,4 +96,4 @@ export function TableCell(props: {tableRef: React.RefObject<HTMLTableElement>, c
       </FloatingPortal>
     </div>
   );
-}
+}
diff --git a/packages/ui/src/components/Node/table/TableNodeComponent.cy.tsx b/packages/ui/src/components/Node/table/TableNodeComponent.cy.tsx
@@ -1,7 +1,16 @@
 import TableNodeComponent from './TableNodeComponent';
 import { DataStoryContext } from '../../DataStory/store/store';
 import { ReactFlowProvider } from '@xyflow/react';
-import { address, booleanData, createLargeColsFn, createLargeRows, nested, normal, oversize } from './mock';
+import {
+  address,
+  associationData,
+  booleanData,
+  createLargeColsFn,
+  createLargeRows,
+  nested,
+  normal,
+  oversize
+} from './mock';
 import { eventManager } from '../../DataStory/events/eventManager';
 import { DataStoryEvents } from '../../DataStory/events/dataStoryEventType';
 import { ItemValue, multiline, ObserveLinkUpdate } from '@data-story/core';
@@ -113,10 +122,10 @@ describe('test TableNodeComponent for tooltip', () => {
   });
 
   it('render tooltip with formatted data', () => {
-    mountTableNodeComponent([nested]);
+    mountTableNodeComponent([associationData]);
     let jsonString = '[\n  {\n    "id": "123456789",\n    "type": "CONTACT_TO_COMPANY"\n  }\n]';
 
-    cy.get('[data-cy="data-story-table-row"] > :nth-child(8)').click();
+    cy.get('[data-cy="data-story-table-row"] > :nth-child(2)').click();
     cy.dataCy('data-story-table-tooltip').should('have.text', jsonString);
   });
 });
@@ -141,30 +150,30 @@ describe('test TableNodeComponent for table', () => {
     mountTableNodeComponent([nested]);
 
     cy.dataCy('data-story-table-th').eq(0).should('have.text', 'objectId');
-    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'properti..');
+    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'properties.firstname');
     cy.get('[data-cy="data-story-table-row"] > :nth-child(3)').should('have.text', 'John');
   })
 
   it('render component with oversize key or value data', () => {
     mountTableNodeComponent([oversize]);
 
-    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'long_lon..');
-    cy.get('[data-cy="data-story-table-row"] > :nth-child(4)').should('have.text', 'long_lon..');
+    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'long_'.repeat(20));
+    cy.get('[data-cy="data-story-table-row"] > :nth-child(4)').should('have.text', oversize['long_property']);
   });
 
   it('render component with line break data', () => {
     mountTableNodeComponent([address]);
 
-    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'address...');
-    cy.get('[data-cy="data-story-table-row"] > :nth-child(2)').should('have.text', '122\n Mai..');
+    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'address.city');
+    cy.get('[data-cy="data-story-table-row"] > :nth-child(2)').should('have.text', address.address.street);
   });
 
   it('render component with boolean data', () => {
     mountTableNodeComponent([booleanData]);
 
-    cy.dataCy('data-story-table-th').eq(0).should('have.text', 'booleanF..');
+    cy.dataCy('data-story-table-th').eq(0).should('have.text', 'booleanFalse');
     cy.get('[data-cy="data-story-table-row"] > :nth-child(2)').should('have.text', 'false');
-    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'booleanT..');
+    cy.dataCy('data-story-table-th').eq(1).should('have.text', 'booleanTrue');
     cy.get('[data-cy="data-story-table-row"] > :nth-child(3)').should('have.text', 'true');
   });
 
@@ -230,7 +239,8 @@ describe('test TableNodeComponent for table', () => {
 
     const start = performance.now();
     cy.dataCy('data-story-table-scroll')
-      .scrollTo('bottom', { duration: 500 })
+      .scrollTo('bottom', { duration: 200 })
+      .scrollTo('bottom', { duration: 200 })
       .then(() => {
         const end = performance.now();
         const scrollTime = end - start;
@@ -253,7 +263,7 @@ describe('test TableNodeComponent for table', () => {
         const scrollTime = end - start;
         cy.log(`cypress scroll Time: ${scrollTime}ms`);
 
-        cy.get('[data-cy="data-story-table-row"] > :nth-child(3)').should('have.text', 'Value 99..');
+        cy.get('[data-cy="data-story-table-row"] > :nth-child(3)').should('contain.text', 'Value 99');
       });
   });
 })
diff --git a/packages/ui/src/components/Node/table/TableNodeComponent.tsx b/packages/ui/src/components/Node/table/TableNodeComponent.tsx
@@ -9,8 +9,8 @@ import { useObserverTable } from './UseObserverTable';
 import CustomHandle from '../CustomHandle';
 import { ItemValue, ItemWithParams } from '@data-story/core';
 import { LoadingComponent } from './LoadingComponent';
-import { TableCell } from './TableCell';
-import { MemoizedTableBody, FIXED_WIDTH, FIXED_HEIGHT } from './MemoizedTableBody';
+import { FIXED_HEIGHT, FIXED_WIDTH, MAX_WIDTH, MIN_WIDTH, TableCell } from './TableCell';
+import { MemoizedTableBody } from './MemoizedTableBody';
 import { MemoizedTableHeader } from './MemoizedTableHeader';
 
 function getFormatterOnlyAndDropParam(items: ItemValue[], data: DataStoryNodeData): { only: string[], drop: string[] } {
@@ -67,25 +67,23 @@ const TableNodeComponent = ({ id, data }: {
         }
       })), [headers]);
 
-  const tableData = useMemo(
-    () =>
-      rows.map((row) => {
-        const rowData = {};
-        headers.forEach((header, index) => {
-          rowData[header] = row[index];
-        });
-        return rowData;
-      }),
-    [rows, headers]
-  );
+  const tableData = useMemo(() =>
+    rows.map((row) => {
+      const rowData = {};
+      headers.forEach((header, index) => {
+        rowData[header] = row[index];
+      });
+      return rowData;
+    }),
+  [rows, headers]);
 
   const tableInstance = useReactTable({
     data: tableData,
     columns,
     defaultColumn: {
       size: FIXED_WIDTH,
-      minSize: 25,
-      maxSize: 150,
+      minSize: MIN_WIDTH,
+      maxSize: MAX_WIDTH,
     },
     columnResizeMode: 'onChange',
     getCoreRowModel: getCoreRowModel(),

diff --git a/packages/ui/src/components/Node/table/mock.ts b/packages/ui/src/components/Node/table/mock.ts
@@ -45,6 +45,18 @@ export const booleanData = {
   StringTrue: 'true',
 }
 
+export const associationData = {
+  associations: {
+    contacts: [{
+      id: '123456789',
+      type: 'CONTACT_TO_COMPANY',
+    }],
+  },
+  associationsEmpty: {
+    contacts: [],
+  },
+}
+
 export const nested = {
   objectId: '123456789',
   properties: {