fix: ensure all columns have widths (#9136)

(cherry picked from commit 95f87d7)
determined-ai · Apr 11, 2024 · 776c5c3 · 776c5c3
1 parent e8b4fd7
commit 776c5c3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/webui/react/src/pages/F_ExpList/F_ExperimentList.settings.ts b/webui/react/src/pages/F_ExpList/F_ExperimentList.settings.ts
@@ -3,7 +3,6 @@ import * as t from 'io-ts';
 import { INIT_FORMSET } from 'components/FilterForm/components/FilterFormStore';
 import { ioRowHeight, ioTableViewMode, RowHeight, TableViewMode } from 'components/OptionsMenu';
 import { SettingsConfig } from 'hooks/useSettings';
-import { optional } from 'ioTypes';
 
 import { defaultColumnWidths, defaultExperimentColumns } from './expListColumns';
 
@@ -29,7 +28,7 @@ export const ProjectSettings = t.intersection([
   t.type({}),
   t.partial({
     columns: t.array(t.string),
-    columnWidths: t.record(t.string, optional(t.number)),
+    columnWidths: t.record(t.string, t.number),
     compare: t.boolean,
     filterset: t.string, // save FilterFormSet as string
     heatmapOn: t.boolean,

diff --git a/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx b/webui/react/src/pages/F_ExpList/F_ExperimentList.tsx
@@ -603,9 +603,21 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
 
   const handleColumnsOrderChange = useCallback(
     (newColumnsOrder: string[]) => {
-      updateSettings({ columns: newColumnsOrder });
+      const newColumnWidths = newColumnsOrder
+        .filter((c) => !(c in settings.columnWidths))
+        .reduce((acc: Record<string, number>, col) => {
+          acc[col] = DEFAULT_COLUMN_WIDTH;
+          return acc;
+        }, {});
+      updateSettings({
+        columns: newColumnsOrder,
+        columnWidths: {
+          ...settings.columnWidths,
+          ...newColumnWidths,
+        },
+      });
     },
-    [updateSettings],
+    [updateSettings, settings.columnWidths],
   );
 
   const handleRowHeightChange = useCallback(
@@ -678,7 +690,11 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
       // Negative widthDifference: Table pane shrinking/compare pane growing
       const newColumnWidths: Record<string, number> = { ...settings.columnWidths };
       pinnedColumns
-        .filter((col) => widthDifference > 0 || newColumnWidths[col] !== MIN_COLUMN_WIDTH)
+        .filter(
+          (col) =>
+            !STATIC_COLUMNS.includes(col) &&
+            (widthDifference > 0 || newColumnWidths[col] > MIN_COLUMN_WIDTH),
+        )
         .forEach((col, _, arr) => {
           newColumnWidths[col] = Math.max(
             MIN_COLUMN_WIDTH,
@@ -697,7 +713,7 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
       updateSettings({
         columnWidths: {
           ...settings.columnWidths,
-          [columnId]: width,
+          [columnId]: Math.max(MIN_COLUMN_WIDTH, width),
         },
       });
     },