feat: checkpoint view for flat runs [ET-658] (#9769)

Co-authored-by: Ashton Galloway <[email protected]>
determined-ai · Jul 31, 2024 · 068b959 · 068b959
1 parent dab6978
commit 068b959
Show file tree

Hide file tree

Showing 6 changed files with 524 additions and 45 deletions.
diff --git a/webui/react/src/pages/ExperimentDetails/ExperimentCheckpoints.settings.ts b/webui/react/src/pages/ExperimentDetails/ExperimentCheckpoints.settings.ts
@@ -1,10 +1,11 @@
-import { array, boolean, literal, number, string, undefined as undefinedType, union } from 'io-ts';
+import { array, boolean, keyof, number, string, undefined as undefinedType, union } from 'io-ts';
 
 import { InteractiveTableSettings } from 'components/Table/InteractiveTable';
 import { MINIMUM_PAGE_SIZE } from 'components/Table/Table';
 import { SettingsConfig } from 'hooks/useSettings';
 import { Checkpointv1SortBy } from 'services/api-ts-sdk';
 import { CheckpointState } from 'types';
+import valueof from 'utils/valueof';
 
 export type CheckpointColumnName =
   | 'action'
@@ -48,14 +49,14 @@ export const configForExperiment = (id: number): SettingsConfig<Settings> => ({
       skipUrlEncoding: true,
       storageKey: 'columns',
       type: array(
-        union([
-          literal('action'),
-          literal('uuid'),
-          literal('state'),
-          literal('searcherMetric'),
-          literal('totalBatches'),
-          literal('checkpoint'),
-        ]),
+        keyof({
+          action: null,
+          checkpoint: null,
+          searcherMetric: null,
+          state: null,
+          totalBatches: null,
+          uuid: null,
+        }),
       ),
     },
     columnWidths: {
@@ -78,32 +79,12 @@ export const configForExperiment = (id: number): SettingsConfig<Settings> => ({
     sortKey: {
       defaultValue: Checkpointv1SortBy.UUID,
       storageKey: 'sortKey',
-      type: union([
-        literal(Checkpointv1SortBy.BATCHNUMBER),
-        literal(Checkpointv1SortBy.ENDTIME),
-        literal(Checkpointv1SortBy.SEARCHERMETRIC),
-        literal(Checkpointv1SortBy.STATE),
-        literal(Checkpointv1SortBy.TRIALID),
-        literal(Checkpointv1SortBy.UNSPECIFIED),
-        literal(Checkpointv1SortBy.UUID),
-      ]),
+      type: valueof(Checkpointv1SortBy),
     },
     state: {
       defaultValue: undefined,
       storageKey: 'state',
-      type: union([
-        undefinedType,
-        array(
-          union([
-            literal(CheckpointState.Active),
-            literal(CheckpointState.Completed),
-            literal(CheckpointState.Deleted),
-            literal(CheckpointState.PartiallyDeleted),
-            literal(CheckpointState.Error),
-            literal(CheckpointState.Unspecified),
-          ]),
-        ),
-      ]),
+      type: union([undefinedType, array(valueof(CheckpointState))]),
     },
     tableLimit: {
       defaultValue: MINIMUM_PAGE_SIZE,
@@ -118,3 +99,61 @@ export const configForExperiment = (id: number): SettingsConfig<Settings> => ({
   },
   storagePath: `${id}-checkpoints`,
 });
+
+export const configForTrial = (id: number): SettingsConfig<Settings> => ({
+  settings: {
+    columns: {
+      defaultValue: DEFAULT_COLUMNS,
+      skipUrlEncoding: true,
+      storageKey: 'columns',
+      type: array(
+        keyof({
+          action: null,
+          checkpoint: null,
+          searcherMetric: null,
+          state: null,
+          totalBatches: null,
+          uuid: null,
+        }),
+      ),
+    },
+    columnWidths: {
+      defaultValue: DEFAULT_COLUMNS.map((col: CheckpointColumnName) => DEFAULT_COLUMN_WIDTHS[col]),
+      skipUrlEncoding: true,
+      storageKey: 'columnWidths',
+      type: array(number),
+    },
+    row: {
+      defaultValue: undefined,
+      skipUrlEncoding: true,
+      storageKey: 'row',
+      type: union([undefinedType, array(string)]),
+    },
+    sortDesc: {
+      defaultValue: true,
+      storageKey: 'sortDesc',
+      type: boolean,
+    },
+    sortKey: {
+      defaultValue: Checkpointv1SortBy.UUID,
+      storageKey: 'sortKey',
+      type: valueof(Checkpointv1SortBy),
+    },
+    state: {
+      defaultValue: undefined,
+      storageKey: 'state',
+      type: union([undefinedType, array(valueof(CheckpointState))]),
+    },
+    tableLimit: {
+      defaultValue: MINIMUM_PAGE_SIZE,
+      storageKey: 'tableLimit',
+      type: number,
+    },
+    tableOffset: {
+      defaultValue: 0,
+      storageKey: 'tableOffset',
+      type: number,
+    },
+  },
+  storagePath: `trial-${id}-checkpoints`,
+});
diff --git a/webui/react/src/pages/ExperimentDetails/ExperimentCheckpoints.tsx b/webui/react/src/pages/ExperimentDetails/ExperimentCheckpoints.tsx
@@ -283,9 +283,9 @@ const ExperimentCheckpoints: React.FC<Props> = ({ experiment, pageRef }: Props)
         { signal: canceler.signal },
       );
       setTotal(response.pagination.total ?? 0);
-      if (!isEqual(response.checkpoints, checkpoints)) {
-        setCheckpoints(response.checkpoints);
-      }
+      setCheckpoints((cps) => {
+        return isEqual(response.checkpoints, cps) ? cps : response.checkpoints;
+      });
     } catch (e) {
       handleError(e, {
         publicSubject: `Unable to fetch ${f_flat_runs ? 'search' : 'experiment'} ${experiment.id} checkpoints.`,
@@ -295,7 +295,7 @@ const ExperimentCheckpoints: React.FC<Props> = ({ experiment, pageRef }: Props)
     } finally {
       setIsLoading(false);
     }
-  }, [f_flat_runs, settings, experiment.id, canceler.signal, checkpoints]);
+  }, [f_flat_runs, settings, experiment.id, canceler.signal]);
 
   const submitBatchAction = useCallback(
     async (action: CheckpointAction) => {
@@ -319,21 +319,13 @@ const ExperimentCheckpoints: React.FC<Props> = ({ experiment, pageRef }: Props)
     [dropDownOnTrigger, fetchExperimentCheckpoints, settings.row],
   );
 
-  const { stopPolling } = usePolling(fetchExperimentCheckpoints, { rerunOnNewFn: true });
-
-  // Get new trials based on changes to the pagination, sorter and filters.
-  useEffect(() => {
-    setIsLoading(true);
-    fetchExperimentCheckpoints();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  usePolling(fetchExperimentCheckpoints, { rerunOnNewFn: true });
 
   useEffect(() => {
     return () => {
       canceler.abort();
-      stopPolling();
     };
-  }, [canceler, stopPolling]);
+  }, [canceler]);
 
   const handleTableRowSelect = useCallback(
     (rowKeys?: Key[]) => {