[+] persist visible column settings, fixes #581 (#635)

* [+] add useGridColumnVisibility hook to manage column visibility state for data grids
* [+] integrate useGridColumnVisibility hook in grid components

Author: ay-bh

internal/webui/src/hooks/useGridColumnVisibility.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+import { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
+
+export const useGridColumnVisibility = (
+  storageKey: string,
+  columns: GridColDef[]
+) => {
+  const [columnVisibility, setColumnVisibility] = useState<GridColumnVisibilityModel>(() => {
+    const defaultVisibility = columns?.reduce((acc, col) => ({
+      ...acc,
+      [col.field]: col.hide !== true
+    }), {});
+
+    const saved = localStorage.getItem(storageKey);
+    const savedVisibility = saved ? JSON.parse(saved) : {};
+
+    return {
+      ...defaultVisibility,
+      ...savedVisibility
+    };
+  });
+
+  const handleColumnVisibilityChange = useCallback((newModel: GridColumnVisibilityModel) => {
+    setColumnVisibility(newModel);
+    localStorage.setItem(storageKey, JSON.stringify(newModel));
+  }, [storageKey]);
+
+  return {
+    columnVisibility,
+    onColumnVisibilityChange: handleColumnVisibilityChange
+  };
+};

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

@@ -4,6 +4,7 @@ import { Error } from "components/Error/Error";
 import { Loading } from "components/Loading/Loading";
 import { MetricFormDialog } from "containers/MetricFormDialog/MetricFormDialog";
 import { MetricFormProvider } from "contexts/MetricForm/MetricForm.provider";
+import { useGridColumnVisibility } from 'hooks/useGridColumnVisibility';
 import { usePageStyles } from "styles/page";
 import { useMetrics } from "queries/Metric";
 import { useMetricsGridColumns } from "./MetricsGrid.consts";
@@ -15,6 +16,9 @@ export const MetricsGrid = () => {
 
   const { classes } = usePageStyles();
 
+  const columns = useMetricsGridColumns();
+  const { columnVisibility, onColumnVisibilityChange } = useGridColumnVisibility('METRICS_GRID', columns);
+
   const rows: MetricGridRow[] | [] = useMemo(() => {
     if (data) {
       return Object.keys(data).map((key) => {
@@ -28,8 +32,6 @@ export const MetricsGrid = () => {
     return [];
   }, [data]);
 
-  const columns = useMetricsGridColumns();
-
   if (isLoading) {
     return (
       <Loading />
@@ -53,6 +55,8 @@ export const MetricsGrid = () => {
           rowsPerPageOptions={[]}
           components={{ Toolbar: () => <MetricsGridToolbar /> }}
           disableColumnMenu
+          columnVisibilityModel={columnVisibility}
+          onColumnVisibilityModelChange={onColumnVisibilityChange}
         />
         <MetricFormDialog />
       </MetricFormProvider>

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

@@ -4,6 +4,7 @@ import { Error } from "components/Error/Error";
 import { Loading } from "components/Loading/Loading";
 import { PresetFormDialog } from "containers/PresetFormDialog/PresetFormDialog";
 import { PresetFormProvider } from "contexts/PresetForm/PresetForm.provider";
+import { useGridColumnVisibility } from 'hooks/useGridColumnVisibility';
 import { usePageStyles } from "styles/page";
 import { usePresets } from "queries/Preset";
 import { usePresetsGridColumns } from "./PresetsGrid.consts";
@@ -15,6 +16,9 @@ export const PresetsGrid = () => {
 
   const { data, isLoading, isError, error } = usePresets();
 
+  const columns = usePresetsGridColumns();
+  const { columnVisibility, onColumnVisibilityChange } = useGridColumnVisibility('PRESETS_GRID', columns);
+
   const rows: PresetGridRow[] | [] = useMemo(() => {
     if (data) {
       return Object.keys(data).map((key) => {
@@ -28,8 +32,6 @@ export const PresetsGrid = () => {
     return [];
   }, [data]);
 
-  const columns = usePresetsGridColumns();
-
   if (isLoading) {
     return (
       <Loading />
@@ -53,6 +55,8 @@ export const PresetsGrid = () => {
           rowsPerPageOptions={[]}
           components={{ Toolbar: () => <PresetsGridToolbar /> }}
           disableColumnMenu
+          columnVisibilityModel={columnVisibility}
+          onColumnVisibilityModelChange={onColumnVisibilityChange}
         />
         <PresetFormDialog />
       </PresetFormProvider>

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

@@ -3,6 +3,7 @@ import { Error } from "components/Error/Error";
 import { Loading } from "components/Loading/Loading";
 import { SourceFormDialog } from "containers/SourceFormDialog/SourceFormDialog";
 import { SourceFormProvider } from "contexts/SourceForm/SourceForm.provider";
+import { useGridColumnVisibility } from 'hooks/useGridColumnVisibility';
 import { usePageStyles } from "styles/page";
 import { useSources } from "queries/Source";
 import { useSourcesGridColumns } from "./SourcesGrid.consts";
@@ -14,6 +15,7 @@ export const SourcesGrid = () => {
   const { data, isLoading, isError, error } = useSources();
 
   const columns = useSourcesGridColumns();
+  const { columnVisibility, onColumnVisibilityChange } = useGridColumnVisibility('SOURCES_GRID', columns);
 
   if (isLoading) {
     return (
@@ -38,6 +40,8 @@ export const SourcesGrid = () => {
           rowsPerPageOptions={[]}
           components={{ Toolbar: () => <SourcesGridToolbar /> }}
           disableColumnMenu
+          columnVisibilityModel={columnVisibility}
+          onColumnVisibilityModelChange={onColumnVisibilityChange}
         />
         <SourceFormDialog />
       </SourceFormProvider>