Single Container in Image Data Explorer for Object Detection (microso…

…ft#2330) * ckpt * refactor + unit tests * auto lint fixes
imatiach-msft · Sep 12, 2023 · 34491a6 · 34491a6
1 parent eae21b7
commit 34491a6
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 55 deletions.
diff --git 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
@@ -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/...aExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts b/...aExplorer/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/...visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts b/...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
@@ -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<ITabsViewProps, ITabViewState> {
               tokens={stackTokens}
               className={classNames.mainImageContainer}
             >
-              <Stack className={classNames.halfContainer} tokens={stackTokens}>
-                <Stack.Item id="errorInstances">
-                  <TitleBar
-                    count={this.props.errorInstances.length}
-                    type={TitleBarOptions.Error}
-                  />
-                </Stack.Item>
-                <Stack.Item
-                  className={classNames.imageListContainer}
-                  id="errorImageContainer"
+              {this.props.taskType === DatasetTaskType.ObjectDetection ? (
+                <Stack
+                  id="objectDetectionImageContainer"
+                  className={classNames.mainContainer}
+                  tokens={stackTokens}
                 >
-                  <ImageList
-                    items={this.props.errorInstances}
-                    imageDim={this.props.imageDim}
-                    searchValue={this.props.searchValue}
-                    selectItem={this.props.onItemSelect}
-                  />
-                </Stack.Item>
-              </Stack>
-              <Stack className={classNames.halfContainer} tokens={stackTokens}>
-                <Stack.Item id="successInstances">
-                  <TitleBar
-                    count={this.props.successInstances.length}
-                    type={TitleBarOptions.Success}
-                  />
-                </Stack.Item>
-                <Stack.Item
-                  className={classNames.imageListContainer}
-                  id="successImageContainer"
+                  <Stack
+                    className={classNames.objectDetectionContainer}
+                    tokens={stackTokens}
+                  >
+                    <ImageList
+                      items={this.state.items}
+                      imageDim={this.props.imageDim}
+                      searchValue={this.props.searchValue}
+                      selectItem={this.props.onItemSelect}
+                    />
+                  </Stack>
+                </Stack>
+              ) : (
+                <Stack
+                  horizontal
+                  className={classNames.mainContainer}
+                  tokens={stackTokens}
                 >
-                  <ImageList
-                    items={this.props.successInstances}
-                    imageDim={this.props.imageDim}
-                    searchValue={this.props.searchValue}
-                    selectItem={this.props.onItemSelect}
-                  />
-                </Stack.Item>
-              </Stack>
+                  <Stack
+                    className={classNames.halfContainer}
+                    tokens={stackTokens}
+                  >
+                    <Stack.Item id="errorInstances">
+                      <TitleBar
+                        count={this.props.errorInstances.length}
+                        type={TitleBarOptions.Error}
+                      />
+                    </Stack.Item>
+                    <Stack.Item
+                      className={classNames.imageListContainer}
+                      id="errorImageContainer"
+                    >
+                      <ImageList
+                        items={this.props.errorInstances}
+                        imageDim={this.props.imageDim}
+                        searchValue={this.props.searchValue}
+                        selectItem={this.props.onItemSelect}
+                      />
+                    </Stack.Item>
+                  </Stack>
+                  <Stack
+                    className={classNames.halfContainer}
+                    tokens={stackTokens}
+                  >
+                    <Stack.Item id="successInstances">
+                      <TitleBar
+                        count={this.props.successInstances.length}
+                        type={TitleBarOptions.Success}
+                      />
+                    </Stack.Item>
+                    <Stack.Item
+                      className={classNames.imageListContainer}
+                      id="successImageContainer"
+                    >
+                      <ImageList
+                        items={this.props.successInstances}
+                        imageDim={this.props.imageDim}
+                        searchValue={this.props.searchValue}
+                        selectItem={this.props.onItemSelect}
+                      />
+                    </Stack.Item>
+                  </Stack>
+                </Stack>
+              )}
             </Stack>
           </Stack>
         );

diff --git a/.../interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.styles.ts b/.../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<IVisionE
       mainImageContainer: {
         height: "650px"
       },
+      objectDetectionContainer: {
+        border: `1px solid ${theme.semanticColors.disabledBorder}`,
+        height: "100%",
+        overflow: "auto",
+        width: "100%"
+      },
       searchBox: {
         width: "300px"
       },

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboard.tsx
@@ -3,6 +3,7 @@
 
 import { IDropdownOption, Stack, PivotItem } from "@fluentui/react";
 import {
+  DatasetTaskType,
   defaultModelAssessmentContext,
   IVisionListItem,
   ModelAssessmentContext
@@ -89,10 +90,11 @@ export class VisionExplanationDashboard extends React.Component<
             updateSelectedIndices={this.updateSelectedIndices}
             selectedCohort={this.props.selectedCohort}
             setSelectedCohort={this.props.setSelectedCohort}
+            taskType={this.context.dataset.task_type}
           />
         </Stack.Item>
         {this.state.panelOpen &&
-        this.context.dataset.task_type === "object_detection" ? (
+        this.context.dataset.task_type === DatasetTaskType.ObjectDetection ? (
           <FlyoutObjectDetection
             dataset={this.context.dataset}
             explanations={this.state.computedExplanations}