growable

ajthinking · Jan 22, 2025 · 6f3765b · 6f3765b
1 parent f424a5e
commit 6f3765b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/packages/ui/src/components/Node/table/MemoizedTableBody.tsx b/packages/ui/src/components/Node/table/MemoizedTableBody.tsx
@@ -38,16 +38,17 @@ export const MemoizedTableBody = memo(({
             }}
           >
             {/**fake empty column to the left for virtualization scroll padding **/}
-            <td
+            {/* <td
               style={{
                 display: 'var(--virtual-padding-left-display)',
                 width: 'calc(var(--virtual-padding-left) * 1px)',
               }}
-            />
+            /> */}
             {virtualColumns.map((virtualColumn) => {
               const cell = row.getVisibleCells()[virtualColumn.index];
+              // @ts-ignore
               const maxChars = cell.column.columnDef.meta?.maxChars ?? 0;
-              const width = maxChars * 8 + 24; // 8px per character + 24px padding
+              const width = Math.min(320, maxChars * 8 + 24); // Cap maximum width, 8px per character + 24px padding
               return (
                 <td
                   key={cell.id}

diff --git a/packages/ui/src/components/Node/table/MemoizedTableHeader.tsx b/packages/ui/src/components/Node/table/MemoizedTableHeader.tsx
@@ -32,6 +32,7 @@ export const MemoizedTableHeader = memo(({
           {
             virtualColumns.map((virtualColumn) => {
               const headerColumn = headerGroup.headers[virtualColumn.index];
+              // @ts-ignore
               const maxChars = headerColumn.column.columnDef.meta?.maxChars ?? 0;
               const width = maxChars * 8 + 24; // 8px per character + 24px padding
 

diff --git a/packages/ui/src/components/Node/table/TableCell.tsx b/packages/ui/src/components/Node/table/TableCell.tsx
@@ -85,7 +85,7 @@ export function TableCell(props: {tableRef: React.RefObject<HTMLTableElement>, c
         ref={refs.setFloating}
         style={floatingStyles}
         {...getFloatingProps()}
-        className="select-text overflow-visible z-50 bg-white shadow-lg rounded-md"
+        className="select-text overflow-auto max-h-[400px] max-w-[600px] whitespace-pre-wrap break-words z-50 bg-white shadow-lg rounded-md p-2 text-xs"
       >
         {formatTooltipContent(content) as string}
       </pre>

diff --git a/packages/ui/src/components/Node/table/TableNodeComponent.tsx b/packages/ui/src/components/Node/table/TableNodeComponent.tsx
@@ -79,7 +79,7 @@ const TableNodeComponent = ({ id, data }: {
       });
 
       metadata[header] = {
-        maxChars: Math.max(header.length, ...lengths)
+        maxChars: Math.min(40, Math.max(header.length, ...lengths)) // Cap maximum width
       };
     });
 
@@ -196,7 +196,7 @@ const TableNodeComponent = ({ id, data }: {
             data-cy={'data-story-table-scroll'}
             className="max-h-64 max-w-256 min-w-6 nowheel overflow-auto scrollbar rounded-sm"
           >
-            <table className="table-fixed grid">
+            <table className="table-fixed w-max">
               <MemoizedTableHeader
                 headerGroups={getHeaderGroups()}
                 virtualColumns={virtualColumns}

diff --git a/packages/ui/src/components/Node/table/UseObserverTable.tsx b/packages/ui/src/components/Node/table/UseObserverTable.tsx
@@ -7,7 +7,7 @@ import { MutableRefObject, useEffect, useLayoutEffect, useRef } from 'react';
 import { useHandleConnections } from '@xyflow/react';
 
 const initialScreenCount: number = 15;
-const tableThrottleMs: number = 300;
+const tableThrottleMs: number = 100;
 
 export function useObserverTable({ id, setIsDataFetched, setItems, items, parentRef }: {
   id: string,

diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
@@ -4,27 +4,29 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer utilities {
-  .scrollbar::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-    margin-right: -4px;
-  }
+/* Webkit (Chrome, Safari, Edge) scrollbar styles */
+.scrollbar::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
 
-  .scrollbar::-webkit-scrollbar-track {
-    border-radius: 100vh;
-    background: rgba(255, 255, 255, 0);
-  }
+.scrollbar::-webkit-scrollbar-track {
+  background: transparent !important;
+}
 
-  .scrollbar::-webkit-scrollbar-thumb {
-    background: rgb(229 231 235);
-    border-radius: 100vh;
-    border: 3px solid rgb(229 231 235);
-  }
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: #e5e7eb !important;
+  border-radius: 3px !important;
+}
 
-  .scrollbar::-webkit-scrollbar-thumb:hover {
-    background: #adabab;
-  }
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d5db !important;
+}
+
+/* Firefox scrollbar styles */
+.scrollbar {
+  scrollbar-width: thin !important;
+  scrollbar-color: #e5e7eb transparent !important;
 }
 
 @layer components {