[RHOAIENG-7481] Add metrics columns to pipeline run table and modal p…

…aram selector

frontend/src/concepts/pipelines/apiHooks/mlmd/useGetArtifactsByRuns.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Artifact } from '~/third_party/mlmd';
+import { GetArtifactsByContextRequest } from '~/third_party/mlmd/generated/ml_metadata/proto/metadata_store_service_pb';
+import useFetchState, { FetchState, FetchStateCallbackPromise } from '~/utilities/useFetchState';
+import { usePipelinesAPI } from '~/concepts/pipelines/context';
+import { PipelineRunKFv2 } from '~/concepts/pipelines/kfTypes';
+import { MlmdContextTypes } from './types';
+import { getMlmdContext } from './useMlmdContext';
+
+export const useGetArtifactsByRuns = (
+  runs: PipelineRunKFv2[],
+): FetchState<Record<string, Artifact[]>[]> => {
+  const { metadataStoreServiceClient } = usePipelinesAPI();
+
+  const call = React.useCallback<FetchStateCallbackPromise<Record<string, Artifact[]>[]>>(
+    () =>
+      Promise.all(
+        runs.map((run) =>
+          getMlmdContext(metadataStoreServiceClient, run.run_id, MlmdContextTypes.RUN).then(
+            async (context) => {
+              if (!context) {
+                throw new Error(`No context for run: ${run.run_id}`);
+              }
+
+              const request = new GetArtifactsByContextRequest();
+              request.setContextId(context.getId());
+
+              const response = await metadataStoreServiceClient.getArtifactsByContext(request);
+              const artifacts = response.getArtifactsList();
+
+              return {
+                [run.run_id]: artifacts,
+              };
+            },
+          ),
+        ),
+      ),
+    [metadataStoreServiceClient, runs],
+  );
+
+  return useFetchState(call, []);
+};

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactVisualization.tsx

@@ -23,6 +23,7 @@ import ROCCurve from '~/concepts/pipelines/content/artifacts/charts/ROCCurve';
 import ConfusionMatrix from '~/concepts/pipelines/content/artifacts/charts/confusionMatrix/ConfusionMatrix';
 import { buildConfusionMatrixConfig } from '~/concepts/pipelines/content/artifacts/charts/confusionMatrix/utils';
 import { isConfusionMatrix } from '~/concepts/pipelines/content/compareRuns/metricsSection/confusionMatrix/utils';
+import { getScalarMetrics } from './utils';
 
 interface ArtifactVisualizationProps {
   artifact: Artifact;
@@ -69,24 +70,7 @@ export const ArtifactVisualization: React.FC<ArtifactVisualizationProps> = ({ ar
   }
 
   if (artifactType === ArtifactType.METRICS) {
-    const scalarMetrics = artifact
-      .toObject()
-      .customPropertiesMap.reduce(
-        (
-          acc: { name: string; value: string }[],
-          [customPropKey, { stringValue, intValue, doubleValue, boolValue }],
-        ) => {
-          if (customPropKey !== 'display_name') {
-            acc.push({
-              name: customPropKey,
-              value: stringValue || (intValue || doubleValue || boolValue).toString(),
-            });
-          }
-
-          return acc;
-        },
-        [],
-      );
+    const scalarMetrics = getScalarMetrics(artifact);
 
     return (
       <Stack className="pf-v5-u-pt-lg pf-v5-u-pb-lg">

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/utils.ts

@@ -0,0 +1,26 @@
+import { Artifact } from '~/third_party/mlmd';
+
+export interface ScalarMetrics {
+  name: string;
+  value: string;
+}
+
+export const getScalarMetrics = (artifact: Artifact): ScalarMetrics[] =>
+  artifact
+    .toObject()
+    .customPropertiesMap.reduce(
+      (
+        acc: { name: string; value: string }[],
+        [customPropKey, { stringValue, intValue, doubleValue, boolValue }],
+      ) => {
+        if (customPropKey !== 'display_name') {
+          acc.push({
+            name: customPropKey,
+            value: stringValue || (intValue || doubleValue || boolValue).toString(),
+          });
+        }
+
+        return acc;
+      },
+      [],
+    );

frontend/src/concepts/pipelines/content/tables/pipelineRun/CustomMetricsColumnsModal.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import {
+  Button,
+  Checkbox,
+  DataListDragButton,
+  DragDrop,
+  Draggable,
+  DraggableItemPosition,
+  Droppable,
+  Flex,
+  FlexItem,
+  Label,
+  Modal,
+  ModalBoxBody,
+  ModalVariant,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { getMetricsColumnsLocalStorageKey } from './utils';
+
+interface MetricsColumn {
+  id: string;
+  checked: boolean;
+}
+
+interface CustomMetricsColumnsModalProps {
+  columns: MetricsColumn[];
+  experimentId: string | undefined;
+  onClose: () => void;
+}
+
+export const CustomMetricsColumnsModal: React.FC<CustomMetricsColumnsModalProps> = ({
+  onClose,
+  experimentId,
+  ...props
+}) => {
+  const [columns, setColumns] = React.useState(props.columns);
+  const [dragDropText, setDragDropText] = React.useState('');
+  const metricsColumnsLocalStorageKey = getMetricsColumnsLocalStorageKey(experimentId ?? '');
+  const selectedColumns = Object.values(columns).reduce((acc: string[], column) => {
+    if (column.checked) {
+      acc.push(column.id);
+    }
+    return acc;
+  }, []);
+
+  const onDrag = React.useCallback(
+    (source: DraggableItemPosition) => {
+      setDragDropText(`Started dragging ${columns[source.index].id}`);
+
+      return true;
+    },
+    [columns],
+  );
+
+  const onDragMove = React.useCallback(
+    (source: DraggableItemPosition, dest?: DraggableItemPosition | undefined) => {
+      const newDragDropText = dest
+        ? `Move ${columns[source.index].id} to ${columns[dest.index].id}`
+        : 'Invalid drop zone';
+
+      if (newDragDropText !== dragDropText) {
+        setDragDropText(newDragDropText);
+      }
+    },
+    [columns, dragDropText],
+  );
+
+  const onDrop = React.useCallback(
+    (source: DraggableItemPosition, dest?: DraggableItemPosition | undefined) => {
+      if (dest) {
+        const reorderedColumns = columns;
+        const [removedColumns] = reorderedColumns.splice(source.index, 1);
+        reorderedColumns.splice(dest.index, 0, removedColumns);
+
+        setColumns(reorderedColumns);
+        setDragDropText('Dragging finished.');
+
+        return true;
+      }
+
+      return false;
+    },
+    [columns],
+  );
+
+  const onUpdate = React.useCallback(() => {
+    localStorage.removeItem(metricsColumnsLocalStorageKey);
+    localStorage.setItem(metricsColumnsLocalStorageKey, JSON.stringify(selectedColumns));
+
+    onClose();
+  }, [metricsColumnsLocalStorageKey, onClose, selectedColumns]);
+
+  return (
+    <Modal
+      bodyAriaLabel="Metrics column names"
+      tabIndex={0}
+      hasNoBodyWrapper
+      aria-label="Custom metrics columns modal"
+      variant={ModalVariant.small}
+      height="fit-content"
+      title="Customize metrics columns"
+      description={
+        <Stack hasGutter className="pf-v5-u-pb-md">
+          <StackItem className="pf-v5-u-mt-sm">
+            Select up to 10 metrics that will display as columns in the table. Drag and drop column
+            names to reorder them.
+          </StackItem>
+          <StackItem>
+            <Label>
+              {selectedColumns.length} / total {columns.length} selected
+            </Label>
+          </StackItem>
+        </Stack>
+      }
+      isOpen
+      onClose={onClose}
+      actions={[
+        <Button key="update" variant="primary" onClick={onUpdate}>
+          Update
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onClose}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <ModalBoxBody className="pf-v5-u-pt-0">
+        <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
+          <Droppable className="pf-v5-u-pt-sm pf-v5-u-pb-sm">
+            {columns.map(({ id, checked }) => {
+              const columnCheckbox = (
+                <Checkbox
+                  id={id}
+                  isChecked={checked}
+                  isDisabled={selectedColumns.length === 10 && !checked}
+                  onChange={(_, isChecked) =>
+                    setColumns((prevColumns) =>
+                      prevColumns.map((prevColumn) => {
+                        if (prevColumn.id === id) {
+                          return { id, checked: isChecked };
+                        }
+
+                        return prevColumn;
+                      }),
+                    )
+                  }
+                />
+              );
+
+              return (
+                <Draggable key={id} className="pf-v5-u-p-sm">
+                  <Flex
+                    alignItems={{ default: 'alignItemsCenter' }}
+                    flexWrap={{ default: 'nowrap' }}
+                  >
+                    <DataListDragButton
+                      aria-label="Reorder"
+                      aria-labelledby={`draggable-${id}`}
+                      aria-describedby={`description-${id}`}
+                      aria-pressed="false"
+                    />
+                    <FlexItem spacer={{ default: 'spacerSm' }}>
+                      {selectedColumns.length === 10 && !checked ? (
+                        <Tooltip content="Maximum metrics selected. To view values of all metrics, go to the Compare runs page.">
+                          {columnCheckbox}
+                        </Tooltip>
+                      ) : (
+                        columnCheckbox
+                      )}
+                    </FlexItem>
+                    <FlexItem>{id}</FlexItem>
+                  </Flex>
+                </Draggable>
+              );
+            })}
+          </Droppable>
+        </DragDrop>
+      </ModalBoxBody>
+    </Modal>
+  );
+};