Change metrics artifact node icon and hide non-metrics artifact visua…

…lization tab
DaoDaoNoCode · Aug 29, 2024 · db8e7b7 · db8e7b7
1 parent 3174a74
commit db8e7b7
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 9 deletions.
diff --git a/...nes/content/pipelinesDetails/pipelineRun/__tests__/PipelineRunDrawerRightContent.spec.tsx b/...nes/content/pipelinesDetails/pipelineRun/__tests__/PipelineRunDrawerRightContent.spec.tsx
@@ -12,7 +12,7 @@ import { Artifact } from '~/third_party/mlmd';
 const artifactTask: PipelineTask = {
   type: 'artifact',
   name: 'metrics',
-  metadata: new Artifact(),
+  metadata: new Artifact().setType('system.Metrics'),
   inputs: { artifacts: [{ label: 'metrics', type: 'system.Metrics (0.0.1)' }] },
 };
 

diff --git a/...ts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDrawerContent.tsx b/...ts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDrawerContent.tsx
@@ -16,6 +16,7 @@ import {
 } from '@patternfly/react-core';
 
 import PipelineRunDrawerRightContent from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent';
+import { isMetricsArtifactType } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/utils';
 import { ArtifactNodeDetails } from './ArtifactNodeDetails';
 import { ArtifactVisualization } from './ArtifactVisualization';
 
@@ -62,13 +63,15 @@ export const ArtifactNodeDrawerContent: React.FC<ArtifactNodeDrawerContentProps>
             >
               <ArtifactNodeDetails artifact={artifact} upstreamTaskName={upstreamTaskName} />
             </Tab>
-            <Tab
-              eventKey={ArtifactNodeDrawerTab.Visualization}
-              title={<TabTitleText>Visualization</TabTitleText>}
-              aria-label="Visualization"
-            >
-              <ArtifactVisualization artifact={artifact} />
-            </Tab>
+            {isMetricsArtifactType(artifact.getType()) && (
+              <Tab
+                eventKey={ArtifactNodeDrawerTab.Visualization}
+                title={<TabTitleText>Visualization</TabTitleText>}
+                aria-label="Visualization"
+              >
+                <ArtifactVisualization artifact={artifact} />
+              </Tab>
+            )}
           </Tabs>
         ) : (
           <EmptyState variant={EmptyStateVariant.xs}>

diff --git a/...ntent/pipelinesDetails/pipelineRun/artifacts/__tests__/ArtifactNodeDrawerContent.spec.tsx b/...ntent/pipelinesDetails/pipelineRun/artifacts/__tests__/ArtifactNodeDrawerContent.spec.tsx
@@ -183,6 +183,50 @@ describe('ArtifactNodeDrawerContent', () => {
     await user.click(screen.getByRole('tab', { name: 'Visualization' }));
     expect(screen.getByRole('heading', { name: 'Confusion matrix metrics' })).toBeVisible();
   });
+
+  it('should not render "Dataset" visualization drawer tab', async () => {
+    render(
+      <BrowserRouter>
+        <Drawer isExpanded>
+          <ArtifactNodeDrawerContent
+            task={{
+              ...task,
+              metadata: createArtifact('system.Dataset', {
+                key: 'dataset',
+                value: new Value(),
+              }),
+            }}
+            upstreamTaskName="some-upstream-task"
+            onClose={jest.fn()}
+          />
+        </Drawer>
+      </BrowserRouter>,
+    );
+
+    expect(screen.queryByRole('tab', { name: 'Visualization' })).toBeNull();
+  });
+
+  it('should not render "Model" visualization drawer tab', async () => {
+    render(
+      <BrowserRouter>
+        <Drawer isExpanded>
+          <ArtifactNodeDrawerContent
+            task={{
+              ...task,
+              metadata: createArtifact('system.Model', {
+                key: 'model',
+                value: new Value(),
+              }),
+            }}
+            upstreamTaskName="some-upstream-task"
+            onClose={jest.fn()}
+          />
+        </Drawer>
+      </BrowserRouter>,
+    );
+
+    expect(screen.queryByRole('tab', { name: 'Visualization' })).toBeNull();
+  });
 });
 
 function createArtifact(type: string, customProperty?: { key: string; value: Value }) {

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/utils.ts b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/utils.ts
@@ -1,4 +1,5 @@
 import { Artifact } from '~/third_party/mlmd';
+import { ArtifactType } from '~/concepts/pipelines/kfTypes';
 import { ArtifactProperty } from './types';
 
 export const getArtifactProperties = (artifact: Artifact): ArtifactProperty[] =>
@@ -20,3 +21,10 @@ export const getArtifactProperties = (artifact: Artifact): ArtifactProperty[] =>
       },
       [],
     );
+
+export const isMetricsArtifactType = (artifactType?: string): boolean =>
+  artifactType === ArtifactType.METRICS ||
+  artifactType === ArtifactType.CLASSIFICATION_METRICS ||
+  artifactType === ArtifactType.HTML ||
+  artifactType === ArtifactType.MARKDOWN ||
+  artifactType === ArtifactType.SLICED_CLASSIFICATION_METRICS;
diff --git a/frontend/src/concepts/topology/customNodes/ArtifactTaskNode.tsx b/frontend/src/concepts/topology/customNodes/ArtifactTaskNode.tsx
@@ -21,6 +21,7 @@ import { ListIcon, MonitoringIcon } from '@patternfly/react-icons';
 import { TaskNodeProps } from '@patternfly/react-topology/dist/esm/pipelines/components/nodes/TaskNode';
 import { css } from '@patternfly/react-styles';
 import { StandardTaskNodeData } from '~/concepts/topology/types';
+import { isMetricsArtifactType } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/utils';
 
 const ICON_PADDING = 8;
 
@@ -85,7 +86,7 @@ const IconTaskNode: React.FC<IconTaskNodeProps> = observer(({ element, selected,
             : 'var(--pf-v5-global--icon--Color--light)'
         }
       >
-        {data?.artifactType === 'system.Metrics' ? (
+        {isMetricsArtifactType(data?.artifactType) ? (
           <MonitoringIcon width={iconSize} height={iconSize} />
         ) : (
           <ListIcon width={iconSize} height={iconSize} />