Refactor imports and remove unused code in ArtifactDetails.spec.tsx a…

…nd ArtifactsTable.spec.tsx Refactor imports and remove unused code in ArtifactDetails.spec.tsx and ArtifactsTable.spec.tsx Add TestArtifacts component to GlobalPipelineExperimentsRoutes Refactor ConfusionMatrix component to improve readability and styling Add ConfusionMatrix component and buildConfusionMatrixConfig function Add ConfusionMatrix and ROCCurve components Remove TestArtifacts component and update related routes Refactor ROC curve table components, update imports, and remove unnecessary code Refactor ConfusionMatrixSelect component and add skeleton loading Refactor ROC curve table components and update imports Refactor ROC curve table components and add related constants Refactor ROC curve table components and add related constants Refactor CompareRunsMetricsSection component, update imports, and remove console.log statements Refactor CompareRunsMetricsSection component, update imports, and add ROC curve tab Refactor Dockerfile to use linux/amd64 platform Refactor CompareRunsMetricsSection component, update imports, and add confusion matrix tab Refactor CompareRunsMetricsSection component, add MetricSectionTabLabels enum, and update related types and imports Refactor CompareRunsMetricsSection component, add MetricSectionTabLabels enum, and update related types and imports Refactor CompareRunsMetricsSection component and add MetricSectionTabLabels enum Refactor and remove unused code in usePipelinesUiRoute.ts and ArtifactUriLink.tsx Refactor MLMD API hooks and remove unused code Refactor components to improve readability and add loading spinners Refactor components to improve readability and add loading spinners clean up Refactor imports and remove unused code in ArtifactDetails.spec.tsx and ArtifactsTable.spec.tsx Refactor ConfusionMatrix component to improve readability and styling
opendatahub-io · May 14, 2024 · 1967ca6 · 1967ca6
1 parent 424378e
commit 1967ca6
Show file tree

Hide file tree

Showing 41 changed files with 1,775 additions and 203 deletions.
diff --git a/frontend/src/concepts/pipelines/apiHooks/mlmd/types.ts b/frontend/src/concepts/pipelines/apiHooks/mlmd/types.ts
@@ -1,4 +1,5 @@
-import { Artifact, Context, ContextType, Event } from '~/third_party/mlmd';
+import { Artifact, Context, ContextType, Event, Execution } from '~/third_party/mlmd';
+import { PipelineRunKFv2 } from '~/concepts/pipelines/kfTypes';
 
 export type MlmdContext = Context;
 
@@ -8,9 +9,20 @@ export enum MlmdContextTypes {
   RUN = 'system.PipelineRun',
 }
 
-// An artifact which has associated event.
-// You can retrieve artifact name from event.path.steps[0].key
-export interface LinkedArtifact {
+// each artifact is linked to an event
+export type LinkedArtifact = {
   event: Event;
   artifact: Artifact;
-}
+};
+
+// each execution can have multiple output artifacts
+export type ExecutionArtifact = {
+  execution: Execution;
+  linkedArtifacts: LinkedArtifact[];
+};
+
+// each run has multiple executions, each execution can have multiple artifacts
+export type RunArtifact = {
+  run: PipelineRunKFv2;
+  executionArtifacts: ExecutionArtifact[];
+};
diff --git a/...periments/artifacts/useGetArtifactById.ts → ...lines/apiHooks/mlmd/useGetArtifactById.ts b/...periments/artifacts/useGetArtifactById.ts → ...lines/apiHooks/mlmd/useGetArtifactById.ts
diff --git a/frontend/src/concepts/pipelines/apiHooks/mlmd/useGetArtifactTypes.ts b/frontend/src/concepts/pipelines/apiHooks/mlmd/useGetArtifactTypes.ts
@@ -1,22 +1,18 @@
 import React from 'react';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { GetArtifactTypesRequest } from '~/third_party/mlmd';
+import { ArtifactType, GetArtifactTypesRequest } from '~/third_party/mlmd';
 import useFetchState, { FetchState, FetchStateCallbackPromise } from '~/utilities/useFetchState';
 
-export const useGetArtifactTypeMap = (): FetchState<Record<number, string>> => {
+export const useGetArtifactTypes = (): FetchState<ArtifactType[]> => {
   const { metadataStoreServiceClient } = usePipelinesAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<Record<number, string>>>(async () => {
+  const call = React.useCallback<FetchStateCallbackPromise<ArtifactType[]>>(async () => {
     const request = new GetArtifactTypesRequest();
 
     const res = await metadataStoreServiceClient.getArtifactTypes(request);
 
-    const artifactTypeMap: Record<number, string> = {};
-    res.getArtifactTypesList().forEach((artifactType) => {
-      artifactTypeMap[artifactType.getId()] = artifactType.getName();
-    });
-    return artifactTypeMap;
+    return res.getArtifactTypesList();
   }, [metadataStoreServiceClient]);
 
-  return useFetchState(call, {});
+  return useFetchState(call, []);
 };
diff --git a/...eriments/artifacts/useGetArtifactsList.ts → ...ines/apiHooks/mlmd/useGetArtifactsList.ts b/...eriments/artifacts/useGetArtifactsList.ts → ...ines/apiHooks/mlmd/useGetArtifactsList.ts
diff --git a/frontend/src/concepts/pipelines/apiHooks/mlmd/useMlmdContext.ts b/frontend/src/concepts/pipelines/apiHooks/mlmd/useMlmdContext.ts
@@ -1,13 +1,28 @@
 import React from 'react';
 import { MlmdContext, MlmdContextTypes } from '~/concepts/pipelines/apiHooks/mlmd/types';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
-import { GetContextByTypeAndNameRequest } from '~/third_party/mlmd';
+import {
+  GetContextByTypeAndNameRequest,
+  MetadataStoreServicePromiseClient,
+} from '~/third_party/mlmd';
 import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
   NotReadyError,
 } from '~/utilities/useFetchState';
 
+export const getMlmdContext = async (
+  client: MetadataStoreServicePromiseClient,
+  name: string,
+  type: MlmdContextTypes,
+): Promise<MlmdContext | undefined> => {
+  const request = new GetContextByTypeAndNameRequest();
+  request.setTypeName(type);
+  request.setContextName(name);
+  const res = await client.getContextByTypeAndName(request);
+  return res.getContext();
+};
+
 /**
  * A hook used to use the MLMD service and fetch the MLMD context
  * If being used without name/type, this hook will throw an error
@@ -28,11 +43,7 @@ export const useMlmdContext = (
       return Promise.reject(new NotReadyError('No context name'));
     }
 
-    const request = new GetContextByTypeAndNameRequest();
-    request.setTypeName(type);
-    request.setContextName(name);
-    const res = await metadataStoreServiceClient.getContextByTypeAndName(request);
-    const context = res.getContext();
+    const context = await getMlmdContext(metadataStoreServiceClient, name, type);
     if (!context) {
       return Promise.reject(new Error('Cannot find specified context'));
     }

diff --git a/frontend/src/concepts/pipelines/content/artifacts/charts/ROCCurve.tsx b/frontend/src/concepts/pipelines/content/artifacts/charts/ROCCurve.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  Chart,
+  ChartAxis,
+  ChartGroup,
+  ChartLine,
+  ChartVoronoiContainer,
+} from '@patternfly/react-charts';
+import {
+  chart_color_blue_100 as chartColorBlue100,
+  chart_color_blue_200 as chartColorBlue200,
+  chart_color_blue_300 as chartColorBlue300,
+  chart_color_blue_400 as chartColorBlue400,
+  chart_color_blue_500 as chartColorBlue500,
+  chart_color_cyan_100 as chartColorCyan100,
+  chart_color_cyan_200 as chartColorCyan200,
+  chart_color_cyan_300 as chartColorCyan300,
+  chart_color_cyan_400 as chartColorCyan400,
+  chart_color_cyan_500 as chartColorCyan500,
+  chart_color_black_100 as chartColorBlack100,
+} from '@patternfly/react-tokens';
+
+export type ROCCurveConfig = {
+  index: number;
+  data: {
+    name: string;
+    x: number;
+    y: number;
+    index: number;
+  }[];
+};
+
+export const RocCurveChartColorScale = [
+  chartColorBlue100.value,
+  chartColorBlue200.value,
+  chartColorBlue300.value,
+  chartColorBlue400.value,
+  chartColorBlue500.value,
+  chartColorCyan100.value,
+  chartColorCyan200.value,
+  chartColorCyan300.value,
+  chartColorCyan400.value,
+  chartColorCyan500.value,
+];
+
+type ROCCurveProps = {
+  configs: ROCCurveConfig[];
+  maxDimension?: number;
+};
+
+const ROCCurve: React.FC<ROCCurveProps> = ({ configs, maxDimension }) => {
+  const width = maxDimension || 800;
+  const height = width;
+  const baseLineData = Array.from(Array(100).keys()).map((x) => ({ x: x / 100, y: x / 100 }));
+
+  return (
+    <div style={{ height, width }}>
+      <Chart
+        ariaDesc="ROC Curve"
+        ariaTitle="ROC Curve"
+        containerComponent={
+          <ChartVoronoiContainer
+            constrainToVisibleArea
+            voronoiBlacklist={['baseline']}
+            labels={({ datum }) => `threshold (Series #${datum.index + 1}): ${datum.name}`}
+          />
+        }
+        height={height}
+        width={width}
+        padding={{ bottom: 150, left: 100, right: 50, top: 50 }}
+        legendAllowWrap
+        legendPosition="bottom-left"
+        legendData={configs.map((config) => ({
+          name: `Series #${config.index + 1}`,
+          symbol: {
+            fill: RocCurveChartColorScale[config.index % RocCurveChartColorScale.length],
+            type: 'square',
+          },
+        }))}
+      >
+        <ChartAxis
+          showGrid
+          dependentAxis
+          label="True positive rate"
+          tickValues={Array.from(Array(11).keys()).map((x) => x / 10)}
+        />
+        <ChartAxis
+          showGrid
+          label="False positive rate"
+          tickValues={Array.from(Array(21).keys()).map((x) => x / 20)}
+        />
+        <ChartGroup>
+          <ChartLine
+            name="baseline"
+            data={baseLineData}
+            style={{
+              data: {
+                strokeDasharray: '3,3',
+                stroke: chartColorBlack100.value,
+              },
+            }}
+          />
+          {configs.map((config, idx) => (
+            <ChartLine
+              key={idx}
+              data={config.data}
+              interpolation="basis"
+              style={{
+                data: {
+                  stroke: RocCurveChartColorScale[config.index % RocCurveChartColorScale.length],
+                },
+              }}
+            />
+          ))}
+        </ChartGroup>
+      </Chart>
+    </div>
+  );
+};
+
+export default ROCCurve;
diff --git a/...tend/src/concepts/pipelines/content/artifacts/charts/confusionMatrix/ConfusionMatrix.scss b/...tend/src/concepts/pipelines/content/artifacts/charts/confusionMatrix/ConfusionMatrix.scss
@@ -0,0 +1,70 @@
+.confusionMatrix {
+	margin: 20px;
+	margin-right: 75px;
+	display: flex;
+  }
+
+  .confusionMatrix-table {
+	border-collapse: collapse;
+  }
+
+  .confusionMatrix-cell {
+	border: solid 1px white;
+	position: relative;
+	text-align: center;
+	vertical-align: middle;
+  }
+
+  .confusionMatrix-labelCell {
+	text-align: right;
+	white-space: nowrap;
+	padding-right: 10px;
+  }
+
+  .confusionMatrix-gradientLegendOuter {
+	display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .confusionMatrix-gradientLegend {
+	border-right: solid 1px #777;
+	margin-left: 30px;
+	min-width: 10px;
+	position: relative;
+	width: 10px;
+  }
+
+  .confusionMatrix-gradientLegendMaxOuter {
+	top: 0;
+	border-top: solid 1px #777;
+	left: 100%;
+	padding-left: 5px;
+	position: absolute;
+	width: 5px;
+  }
+
+  .confusionMatrix-gradientLegendMaxLabel {
+	left: 15px;
+	position: absolute;
+	top: -7px;
+  }
+
+  .confusionMatrix-verticalMarker {
+	writing-mode: vertical-lr;
+	white-space: nowrap;
+  }
+
+  .confusionMatrix-markerLabel {
+	border-top: solid 1px #777;
+	left: 100%;
+	padding-left: 5px;
+	position: absolute;
+	width: 5px;
+  }
+
+  .confusionMatrix-trueLabel {
+	font-weight: bold;
+	padding-left: 20px;
+  }
+