Lint + user column fix

wandb · Dec 17, 2024 · e8ca66e · e8ca66e
1 parent 134d22a
commit e8ca66e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 41 deletions.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/StyledDataGrid.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/StyledDataGrid.tsx
@@ -38,11 +38,7 @@ type StyledDataGridProps = DataGridProProps & {
 
 // Update the styled component to accept pinnedColumnsWidth
 export const StyledDataGrid = styled(
-  ({
-    keepBorders,
-    pinnedColumnsWidth,
-    ...otherProps
-  }: StyledDataGridProps) => {
+  ({keepBorders, pinnedColumnsWidth, ...otherProps}: StyledDataGridProps) => {
     const slots = otherProps.slots ?? {};
     if (!slots.loadingOverlay) {
       slots.loadingOverlay = LoadingOverlay;

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx
@@ -686,60 +686,77 @@ export const CallsTable: FC<{
 
   const [pinnedColumnsWidth, setPinnedColumnsWidth] = useState(0);
 
-  const calculatePinnedColumnsWidth = useCallback((pinnedFields: string[]) => {
-    // If columns aren't fully loaded yet, return 0
-    if (apiRef.current.getAllColumns().length < muiColumns.length) {
-      return 0;
-    }
-    let totalWidth = 0;
-    pinnedFields.forEach(field => {
-      const width = apiRef.current.getColumn(field)?.computedWidth || 100;
-      // console.log('calculatePinnedColumnsWidth(pinnedWidth)', field, width);
-      totalWidth += width;
-    });
-    return totalWidth;
-  }, [apiRef, muiColumns.length]);
+  const calculatePinnedColumnsWidth = useCallback(
+    (pinnedFields: string[]) => {
+      // If columns aren't fully loaded yet, return 0
+      if (apiRef.current.getAllColumns().length < muiColumns.length) {
+        return 0;
+      }
+      let totalWidth = 0;
+      pinnedFields.forEach(field => {
+        const width = apiRef.current.getColumn(field)?.computedWidth || 100;
+        // console.log('calculatePinnedColumnsWidth(pinnedWidth)', field, width);
+        totalWidth += width;
+      });
+      return totalWidth;
+    },
+    [apiRef, muiColumns.length]
+  );
 
   // Add this effect to recalculate width when columns are ready
   useEffect(() => {
     const handleColumnsChange = () => {
       if (apiRef.current.getAllColumns().length === muiColumns.length) {
-        const newWidth = calculatePinnedColumnsWidth(pinModelResolved.left || []);
+        const newWidth = calculatePinnedColumnsWidth(
+          pinModelResolved.left || []
+        );
         setPinnedColumnsWidth(newWidth);
       }
     };
 
-    const unsubscribe = apiRef.current.subscribeEvent('columnsChange', handleColumnsChange);
+    const unsubscribe = apiRef.current.subscribeEvent(
+      'columnsChange',
+      handleColumnsChange
+    );
     return () => {
       unsubscribe();
     };
-  }, [apiRef, calculatePinnedColumnsWidth, muiColumns.length, pinModelResolved.left]);
-
-  const handleColumnWidthChange = useCallback((newCol: any) => {
-    setUserDefinedColumnWidths(curr => {
-      const newWidths = {
-        ...curr,
-        [newCol.colDef.field]: newCol.colDef.computedWidth,
-      };
-      // console.log('setUserDefinedColumnWidths(widthChange)', newWidths);
-      return newWidths;
-    });
-
-    // Recalculate pinned columns width if the changed column is pinned
-    if (pinModelResolved.left?.includes(newCol.colDef.field)) {
-      const newWidth = calculatePinnedColumnsWidth(pinModelResolved.left);
-      // console.log('setPinnedColumnsWidth(widthChange)', newWidth);
-      setPinnedColumnsWidth(newWidth);
-    }
-  }, [calculatePinnedColumnsWidth, pinModelResolved.left]);
+  }, [
+    apiRef,
+    calculatePinnedColumnsWidth,
+    muiColumns.length,
+    pinModelResolved.left,
+  ]);
+
+  const handleColumnWidthChange = useCallback(
+    (newCol: any) => {
+      setUserDefinedColumnWidths(curr => {
+        const newWidths = {
+          ...curr,
+          [newCol.colDef.field]: newCol.colDef.computedWidth,
+        };
+        return newWidths;
+      });
+      // Recalculate pinned columns width if the changed column is pinned
+      if (pinModelResolved.left?.includes(newCol.colDef.field)) {
+        const newWidth = calculatePinnedColumnsWidth(pinModelResolved.left);
+        setPinnedColumnsWidth(newWidth);
+      }
+    },
+    [
+      calculatePinnedColumnsWidth,
+      pinModelResolved.left,
+      setUserDefinedColumnWidths,
+    ]
+  );
 
   const onPinnedColumnsChange = useCallback(
     (newModel: GridPinnedColumnFields) => {
       if (!setPinModel || callsLoading) {
         return;
       }
       setPinModel(newModel);
-      
+
       // Use requestAnimationFrame to ensure the DOM has updated
       requestAnimationFrame(() => {
         const newWidth = calculatePinnedColumnsWidth(newModel.left || []);
@@ -752,7 +769,9 @@ export const CallsTable: FC<{
 
   // Update the initial pinned columns width when the component mounts
   useEffect(() => {
-    const initialWidth = calculatePinnedColumnsWidth(pinModelResolved.left || []);
+    const initialWidth = calculatePinnedColumnsWidth(
+      pinModelResolved.left || []
+    );
     setPinnedColumnsWidth(initialWidth);
   }, [calculatePinnedColumnsWidth, pinModelResolved.left]);