From 34491a668e7fd6a48b61d4a5a5d71a1ed4bd6061 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Tue, 12 Sep 2023 16:44:56 -0400 Subject: [PATCH] Single Container in Image Data Explorer for Object Detection (#2330) * ckpt * refactor + unit tests * auto lint fixes --- .../describer/modelAssessment/Constants.ts | 1 + .../describeVisionDataExplorer.ts | 4 +- ...rerViewElementsAfterSelectionArePresent.ts | 46 +++++--- ...iewElementsBeforeSelectionAreNotPresent.ts | 3 + .../Controls/TabsView.tsx | 111 ++++++++++++------ .../VisionExplanationDashboard.styles.ts | 7 ++ .../VisionExplanationDashboard.tsx | 4 +- 7 files changed, 121 insertions(+), 55 deletions(-) diff --git a/libs/e2e/src/lib/describer/modelAssessment/Constants.ts b/libs/e2e/src/lib/describer/modelAssessment/Constants.ts index 488d3c8270..505fb0ba9b 100644 --- a/libs/e2e/src/lib/describer/modelAssessment/Constants.ts +++ b/libs/e2e/src/lib/describer/modelAssessment/Constants.ts @@ -213,6 +213,7 @@ export enum Locators { VisionDataExplorerImageExplorerViewSuccessInstanceCount = "#VisionDataExplorer #successInstances #instanceCount", VisionDataExplorerImageExplorerViewErrorImageContainer = "#VisionDataExplorer #errorImageContainer", VisionDataExplorerImageExplorerViewSuccessImageContainer = "#VisionDataExplorer #successImageContainer", + VisionDataExplorerImageExplorerViewObjectDetectionContainer = "#VisionDataExplorer #objectDetectionImageContainer", VisionDataExplorerTabsViewTableList = "#VisionDataExplorer #tabsViewTableList", VisionDataExplorerTabsViewItemsSelectedStatement = "#VisionDataExplorer #itemsSelectedStatement", VisionDataExplorerTabsViewSaveCohortButton = "#VisionDataExplorer #saveCohortButton", diff --git a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts index e5677c9aa2..49f3e1fa0c 100644 --- a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts +++ b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts @@ -40,7 +40,9 @@ export function describeVisionDataExplorer( }); it("should show Image explorer view components when selected", () => { - ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent(); + ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent( + datasetShape + ); ensureAllVisionDataExplorerTableViewElementsBeforeSelectionAreNotPresent(); ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent(); cy.get(Locators.VisionDataExplorerPageSizeSelector).should("not.exist"); diff --git a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts index 89eb06b0ae..20ad7ccfd7 100644 --- a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts +++ b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts @@ -2,29 +2,43 @@ // Licensed under the MIT License. import { Locators } from "../Constants"; +import { IModelAssessmentData } from "../IModelAssessmentData"; -export function ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent(): void { +export function ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent( + datasetShape: IModelAssessmentData +): void { cy.get(Locators.VisionDataExplorerImageExplorerViewButton).click(); cy.get(Locators.VisionDataExplorerPredictedLabel).should("exist"); cy.get(Locators.VisionDataExplorerLegendFailure).should("exist"); cy.get(Locators.VisionDataExplorerLegendSuccess).should("exist"); - cy.get(Locators.VisionDataExplorerImageExplorerViewErrorInstances).should( - "include.text", - "Error instances" - ); - cy.get(Locators.VisionDataExplorerImageExplorerViewSuccessInstances).should( - "include.text", - "Success instances" - ); - - cy.get( - Locators.VisionDataExplorerImageExplorerViewErrorImageContainer - ).should("exist"); - cy.get( - Locators.VisionDataExplorerImageExplorerViewSuccessImageContainer - ).should("exist"); + if (datasetShape.isObjectDetection) { + cy.get( + Locators.VisionDataExplorerImageExplorerViewObjectDetectionContainer + ).should("exist"); + } else { + cy.get(Locators.VisionDataExplorerImageExplorerViewErrorInstances).should( + "include.text", + "Error instances" + ); + cy.get(Locators.VisionDataExplorerImageExplorerViewSuccessInstances).should( + "include.text", + "Success instances" + ); + cy.get( + Locators.VisionDataExplorerImageExplorerViewErrorInstanceCount + ).should("exist"); + cy.get( + Locators.VisionDataExplorerImageExplorerViewSuccessInstanceCount + ).should("exist"); + cy.get( + Locators.VisionDataExplorerImageExplorerViewErrorImageContainer + ).should("exist"); + cy.get( + Locators.VisionDataExplorerImageExplorerViewSuccessImageContainer + ).should("exist"); + } cy.get(Locators.VisionDataExplorerImageExplorerViewImage).should("exist"); cy.get(Locators.VisionDataExplorerImageExplorerViewImagePredictedY).should( diff --git a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts index eb63939655..3774246554 100644 --- a/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts +++ b/libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts @@ -33,6 +33,9 @@ export function ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelect cy.get( Locators.VisionDataExplorerImageExplorerViewSuccessImageContainer ).should("not.exist"); + cy.get( + Locators.VisionDataExplorerImageExplorerViewObjectDetectionContainer + ).should("not.exist"); cy.get(Locators.VisionDataExplorerImageExplorerViewImagePredictedY).should( "not.exist" diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx index b99d44ebff..2a7fa4ceb9 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx @@ -2,7 +2,11 @@ // Licensed under the MIT License. import { Stack } from "@fluentui/react"; -import { IVisionListItem, ErrorCohort } from "@responsible-ai/core-ui"; +import { + IVisionListItem, + ErrorCohort, + DatasetTaskType +} from "@responsible-ai/core-ui"; import React from "react"; import { visionExplanationDashboardStyles } from "../VisionExplanationDashboard.styles"; @@ -31,6 +35,7 @@ export interface ITabsViewProps { updateSelectedIndices: (indices: number[]) => void; selectedCohort: ErrorCohort; setSelectedCohort: (cohort: ErrorCohort) => void; + taskType: string; } export interface ITabViewState { @@ -104,44 +109,76 @@ export class TabsView extends React.Component { tokens={stackTokens} className={classNames.mainImageContainer} > - - - - - - - - - - - - - + + + + ) : ( + - - - + + + + + + + + + + + + + + + + + + )} ); diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts b/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts index 1d1d2d2876..751e8e1434 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts @@ -20,6 +20,7 @@ export interface IVisionExplanationDashboardStyles { mainContainer: IStyle; mainImageContainer: IStyle; halfContainer: IStyle; + objectDetectionContainer: IStyle; imageListContainer: IStyle; slider: IStyle; tableListContainer: IStyle; @@ -74,6 +75,12 @@ export const visionExplanationDashboardStyles: () => IProcessedStyleSet {this.state.panelOpen && - this.context.dataset.task_type === "object_detection" ? ( + this.context.dataset.task_type === DatasetTaskType.ObjectDetection ? (