[-] improve resizing of grid columns in webui, fixes #1242 (#1321)

Removed `columnsWithSizing` so `DataGrid` manages its own column widths
internally. Renamed handler to `onColumnWidthChange` (fires once on drag
end)

Author: pashagolub

internal/webui/src/hooks/useGridState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
 
 export interface GridColumnSizingModel {
@@ -49,52 +49,52 @@ export const useGridState = (
   }, [storageKey]);
 
   const handleColumnVisibilityChange = useCallback((newModel: GridColumnVisibilityModel) => {
-    const newState = {
-      ...gridState,
-      columnVisibility: newModel
-    };
-    setGridState(newState);
-    saveToStorage(newState);
-  }, [gridState, saveToStorage]);
+    setGridState(prev => {
+      const newState = { ...prev, columnVisibility: newModel };
+      saveToStorage(newState);
+      return newState;
+    });
+  }, [saveToStorage]);
 
-  const handleColumnResize = useCallback((params: any) => {
-    const newState = {
-      ...gridState,
-      columnSizing: {
-        ...gridState.columnSizing,
-        [params.field || params.colDef?.field]: params.width
-      }
-    };
-    setGridState(newState);
-    saveToStorage(newState);
-  }, [gridState, saveToStorage]);
+  const handleColumnWidthChange = useCallback((params: any) => {
+    setGridState(prev => {
+      const newState = {
+        ...prev,
+        columnSizing: {
+          ...prev.columnSizing,
+          [params.field || params.colDef?.field]: params.width
+        }
+      };
+      saveToStorage(newState);
+      return newState;
+    });
+  }, [saveToStorage]);
 
   const resetColumnSizes = useCallback(() => {
     const defaultSizing = columns?.reduce((acc, col) => ({
       ...acc,
       [col.field]: col.width || 150
     }), {});
 
-    const newState = {
-      ...gridState,
-      columnSizing: defaultSizing
-    };
-    setGridState(newState);
-    saveToStorage(newState);
-  }, [columns, gridState, saveToStorage]);
+    setGridState(prev => {
+      const newState = { ...prev, columnSizing: defaultSizing };
+      saveToStorage(newState);
+      return newState;
+    });
+  }, [columns, saveToStorage]);
 
-  // Generate columns with applied widths
-  const columnsWithSizing = columns?.map(col => ({
+  // Memoize columns with applied widths so objects are stable between renders
+  const columnsWithSizing = useMemo(() => columns?.map(col => ({
     ...col,
     width: gridState.columnSizing[col.field] || col.width || 150
-  }));
+  })), [columns, gridState.columnSizing]);
 
   return {
     columnVisibility: gridState.columnVisibility,
     columnSizing: gridState.columnSizing,
     columnsWithSizing,
     onColumnVisibilityChange: handleColumnVisibilityChange,
-    onColumnResize: handleColumnResize,
+    onColumnWidthChange: handleColumnWidthChange,
     resetColumnSizes
   };
 };

internal/webui/src/pages/MetricsPage/components/MetricsGrid/MetricsGrid.tsx

@@ -21,7 +21,7 @@ export const MetricsGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnResize
+    onColumnWidthChange
   } = useGridState('METRICS_GRID', columns);
 
   const rows: MetricGridRow[] | [] = useMemo(() => {
@@ -63,7 +63,7 @@ export const MetricsGrid = () => {
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
-          onColumnResize={onColumnResize}
+          onColumnWidthChange={onColumnWidthChange}
           initialState={{
             sorting: {
               sortModel: [{ field: 'Key', sort: 'asc' }],

internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx

@@ -21,7 +21,7 @@ export const PresetsGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnResize
+    onColumnWidthChange
   } = useGridState('PRESETS_GRID', columns);
 
   const rows: PresetGridRow[] | [] = useMemo(() => {
@@ -63,7 +63,7 @@ export const PresetsGrid = () => {
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
-          onColumnResize={onColumnResize}
+          onColumnWidthChange={onColumnWidthChange}
         />
         <PresetFormDialog />
       </PresetFormProvider>

internal/webui/src/pages/SourcesPage/components/SourcesGrid/SourcesGrid.tsx

@@ -19,7 +19,7 @@ export const SourcesGrid = () => {
     columnVisibility, 
     columnsWithSizing, 
     onColumnVisibilityChange, 
-    onColumnResize
+    onColumnWidthChange
   } = useGridState('SOURCES_GRID', columns, {
     Kind: false,
     IncludePattern: false,
@@ -56,7 +56,7 @@ export const SourcesGrid = () => {
           }}
           columnVisibilityModel={columnVisibility}
           onColumnVisibilityModelChange={onColumnVisibilityChange}
-          onColumnResize={onColumnResize}
+          onColumnWidthChange={onColumnWidthChange}
         />
         <SourceFormDialog />
       </SourceFormProvider>