fix: support multi-type in flat run table

determined-ai · Oct 16, 2024 · f779c48 · f779c48
1 parent 6c46a46
commit f779c48
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
diff --git a/webui/react/package.json b/webui/react/package.json
@@ -42,7 +42,7 @@
     "fp-ts": "^2.16.5",
     "fuse.js": "^7.0.0",
     "hermes-parallel-coordinates": "^0.6.17",
-    "hew": "npm:@hpe.com/hew@^0.6.50",
+    "hew": "npm:@hpe.com/hew@^0.6.51",
     "humanize-duration": "^3.28.0",
     "immutable": "^4.3.0",
     "io-ts": "^2.2.21",

diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx
@@ -84,6 +84,7 @@ import {
   SelectionType as SelectionState,
 } from 'types';
 import handleError from 'utils/error';
+import { COLUMN_SEPARATOR } from 'utils/flatRun';
 import { eagerSubscribe } from 'utils/observable';
 import { pluralizer } from 'utils/string';
 
@@ -320,7 +321,14 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
     const projectColumnsMap: Loadable<Record<string, ProjectColumn>> = Loadable.map(
       projectColumns,
       (columns) => {
-        return columns.reduce((acc, col) => ({ ...acc, [col.column]: col }), {});
+        return columns.reduce(
+          (acc, col) => ({
+            ...acc,
+            [`${col.type}${COLUMN_SEPARATOR}${col.column}`]: col,
+            [col.column]: col,
+          }),
+          {},
+        );
       },
     );
     const columnDefs = getColumnDefs({
@@ -388,6 +396,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
           default:
             break;
         }
+
+        const columnKey = `${currentColumn.type}${COLUMN_SEPARATOR}${currentColumn.column}`;
         switch (currentColumn.type) {
           case V1ColumnType.NUMBER: {
             const heatmap = projectHeatmap
@@ -398,7 +408,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
               settings.heatmapOn &&
               !settings.heatmapSkipped.includes(currentColumn.column)
             ) {
-              columnDefs[currentColumn.column] = defaultNumberColumn(
+              columnDefs[columnKey] = defaultNumberColumn(
                 currentColumn.column,
                 currentColumn.displayName || currentColumn.column,
                 settings.columnWidths[currentColumn.column] ??
@@ -411,7 +421,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
                 },
               );
             } else {
-              columnDefs[currentColumn.column] = defaultNumberColumn(
+              columnDefs[columnKey] = defaultNumberColumn(
                 currentColumn.column,
                 currentColumn.displayName || currentColumn.column,
                 settings.columnWidths[currentColumn.column] ??
@@ -423,7 +433,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
             break;
           }
           case V1ColumnType.DATE:
-            columnDefs[currentColumn.column] = defaultDateColumn(
+            columnDefs[columnKey] = defaultDateColumn(
               currentColumn.column,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[currentColumn.column] ??
@@ -433,7 +443,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
             );
             break;
           case V1ColumnType.ARRAY:
-            columnDefs[currentColumn.column] = defaultArrayColumn(
+            columnDefs[columnKey] = defaultArrayColumn(
               currentColumn.column,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[currentColumn.column] ??
@@ -445,7 +455,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
           case V1ColumnType.TEXT:
           case V1ColumnType.UNSPECIFIED:
           default:
-            columnDefs[currentColumn.column] = defaultTextColumn(
+            columnDefs[columnKey] = defaultTextColumn(
               currentColumn.column,
               currentColumn.displayName || currentColumn.column,
               settings.columnWidths[currentColumn.column] ??
@@ -459,7 +469,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
             .getOrElse([])
             .find((h) => h.metricsName === currentColumn.column);
 
-          columnDefs[currentColumn.column] = searcherMetricsValColumn(
+          columnDefs[columnKey] = searcherMetricsValColumn(
             settings.columnWidths[currentColumn.column],
             heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column)
               ? {
@@ -469,7 +479,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
               : undefined,
           );
         }
-        return columnDefs[currentColumn.column];
+        return columnDefs[columnKey];
       })
       .flatMap((col) => (col ? [col] : []));
     return gridColumns;

diff --git a/webui/react/src/utils/flatRun.ts b/webui/react/src/utils/flatRun.ts
@@ -6,6 +6,7 @@ import {
   terminalRunStates,
 } from 'constants/states';
 import { PermissionsHook } from 'hooks/usePermissions';
+import { V1ColumnType } from 'services/api-ts-sdk';
 import { FlatRun, FlatRunAction, RunState, SelectionType } from 'types';
 
 import { combine } from './filterFormSet';
@@ -116,3 +117,10 @@ export const getIdsFilter = (
     filterGroup,
   };
 };
+
+export const removeColumnTypePrefix = (columnName: V1ColumnType): string => {
+  return columnName.replace('COLUMN_TYPE_', '');
+};
+
+/// wanna know why this separator is used? see https://hpe-aiatscale.atlassian.net/browse/ET-785
+export const COLUMN_SEPARATOR = '␟';