Vision Data Explorer Image Explorer Tests

libs/e2e/src/lib/describer/modelAssessment/Constants.ts

@@ -185,12 +185,24 @@ export enum Locators {
   VisionDataExplorerImageExplorerViewButton = "#VisionDataExplorer button[name='Image explorer view']",
   VisionDataExplorerTableViewButton = "#VisionDataExplorer button[name='Table view']",
   VisionDataExplorerClassViewButton = "#VisionDataExplorer button[name='Class view']",
+  VisionDataExplorerPredictedLabel = "#VisionDataExplorer #predictedLabel",
+  VisionDataExplorerLegendFailure = "#VisionDataExplorer #legendFailure",
+  VisionDataExplorerLegendSuccess = "#VisionDataExplorer #legendSuccess",
+  VisionDataExplorerImageExplorerViewErrorInstances = "#VisionDataExplorer #errorInstances",
+  VisionDataExplorerImageExplorerViewErrorInstanceCount = "#VisionDataExplorer #errorInstances #instanceCount",
+  VisionDataExplorerImageExplorerViewSuccessInstances = "#VisionDataExplorer #successInstances",
+  VisionDataExplorerImageExplorerViewSuccessInstanceCount = "#VisionDataExplorer #successInstances #instanceCount",
+  VisionDataExplorerImageExplorerViewErrorImageContainer = "#VisionDataExplorer #errorImageContainer",
+  VisionDataExplorerImageExplorerViewSuccessImageContainer = "#VisionDataExplorer #successImageContainer",
   VisionDataExplorerTabsViewTableList = "#VisionDataExplorer #tabsViewTableList",
   VisionDataExplorerTabsViewItemsSelectedStatement = "#VisionDataExplorer #itemsSelectedStatement",
   VisionDataExplorerTabsViewSaveCohortButton = "#VisionDataExplorer #saveCohortButton",
   VisionDataExplorerPageSizeSelector = "#VisionDataExplorer #pageSizeSelector",
   VisionDataExplorerClassViewLabelTypeDropdown = "#VisionDataExplorer #labelTypeDropdown",
   VisionDataExplorerClassViewLabelDisplayDropdown = "#VisionDataExplorer #labelVisibilitySelectorsDropdown",
   VisionDataExplorerClassViewDataCharacteristicsLegend = "#VisionDataExplorer #dataCharacteristicsLegend",
-  VisionDataExplorerClassViewContainer = "#VisionDataExplorer #classViewContainer"
+  VisionDataExplorerClassViewContainer = "#VisionDataExplorer #classViewContainer",
+  VisionDataExplorerImageExplorerViewImage = "#VisionDataExplorer #visionImage_0",
+  VisionDataExplorerImageExplorerViewImagePredictedY = "#VisionDataExplorer #predictedY_0",
+  VisionDataExplorerImageExplorerViewImageTrueY = "#VisionDataExplorer #trueY_0"
 }

libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/describeVisionDataExplorer.ts

@@ -8,7 +8,13 @@ import { IModelAssessmentData } from "../IModelAssessmentData";
 
 import { ensureAllVisionDataExplorerBasicElementsArePresent } from "./ensureAllVisionDataExplorerBasicElementsArePresent";
 import { ensureAllVisionDataExplorerClassViewElementsAfterSelectionArePresent } from "./ensureAllVisionDataExplorerClassViewElementsAfterSelectionArePresent";
+import { ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent } from "./ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent";
 import { ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePresent } from "./ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePresent";
+import {
+  ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent,
+  ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelectionAreNotPresent,
+  ensureAllVisionDataExplorerTableViewElementsBeforeSelectionAreNotPresent
+} from "./ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent";
 
 const testName = "Vision Data Explorer";
 
@@ -33,12 +39,23 @@ export function describeVisionDataExplorer(
         ensureAllVisionDataExplorerBasicElementsArePresent();
       });
 
+      it("should show Image explorer view components when selected", () => {
+        ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent();
+        ensureAllVisionDataExplorerTableViewElementsBeforeSelectionAreNotPresent();
+        ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent();
+        cy.get(Locators.VisionDataExplorerPageSizeSelector).should("not.exist");
+      });
+
       it("should show Table view components when selected", () => {
         ensureAllVisionDataExplorerTableViewElementsAfterSelectionArePresent();
+        ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelectionAreNotPresent();
+        ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent();
       });
 
       it("should show Class view components when selected", () => {
         ensureAllVisionDataExplorerClassViewElementsAfterSelectionArePresent();
+        ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelectionAreNotPresent();
+        ensureAllVisionDataExplorerTableViewElementsBeforeSelectionAreNotPresent();
       });
     } else {
       it("should not have 'VisionDataExplorer' component", () => {

libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Locators } from "../Constants";
+
+export function ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent(): 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");
+
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImage).should("exist");
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImagePredictedY).should(
+    "exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImageTrueY).should(
+    "exist"
+  );
+
+  cy.get(Locators.VisionDataExplorerPageSizeSelector).should("not.exist");
+}

libs/e2e/src/lib/describer/modelAssessment/visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts

@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Locators } from "../Constants";
+
+export function ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelectionAreNotPresent(): void {
+  cy.get(Locators.VisionDataExplorerPredictedLabel).should("not.exist");
+  cy.get(Locators.VisionDataExplorerLegendFailure).should("not.exist");
+  cy.get(Locators.VisionDataExplorerLegendSuccess).should("not.exist");
+
+  cy.get(Locators.VisionDataExplorerImageExplorerViewErrorInstances).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewErrorInstances).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewErrorInstanceCount).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewSuccessInstances).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewSuccessInstances).should(
+    "not.exist"
+  );
+  cy.get(
+    Locators.VisionDataExplorerImageExplorerViewSuccessInstanceCount
+  ).should("not.exist");
+
+  cy.get(
+    Locators.VisionDataExplorerImageExplorerViewErrorImageContainer
+  ).should("not.exist");
+  cy.get(
+    Locators.VisionDataExplorerImageExplorerViewSuccessImageContainer
+  ).should("not.exist");
+
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImagePredictedY).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImageTrueY).should(
+    "not.exist"
+  );
+}
+
+export function ensureAllVisionDataExplorerTableViewElementsBeforeSelectionAreNotPresent(): void {
+  cy.get(Locators.VisionDataExplorerTabsViewTableList).should("not.exist");
+
+  cy.get(Locators.VisionDataExplorerTabsViewItemsSelectedStatement).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerTabsViewSaveCohortButton).should(
+    "not.exist"
+  );
+}
+
+export function ensureAllVisionDataExplorerClassViewElementsBeforeSelectionAreNotPresent(): void {
+  cy.get(Locators.VisionDataExplorerClassViewLabelTypeDropdown).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerClassViewLabelDisplayDropdown).should(
+    "not.exist"
+  );
+
+  cy.get(Locators.VisionDataExplorerClassViewDataCharacteristicsLegend).should(
+    "not.exist"
+  );
+
+  cy.get(Locators.VisionDataExplorerClassViewDataCharacteristicsLegend).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerClassViewContainer).should("not.exist");
+}

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/Flyout.tsx

@@ -149,7 +149,7 @@ export class Flyout extends React.Component<IFlyoutProps, IFlyoutState> {
                           }
                         />
                       </Stack.Item>
-                      <Stack.Item>
+                      <Stack.Item id="predictionTitle">
                         {predictedY !== trueY ? (
                           <Text
                             variant="large"
@@ -179,13 +179,13 @@ export class Flyout extends React.Component<IFlyoutProps, IFlyoutState> {
                         {item?.index}
                       </Text>
                     </Stack.Item>
-                    <Stack.Item>
+                    <Stack.Item id="predLabel">
                       <Text variant="large">
                         {localization.InterpretVision.Dashboard.predictedY}
                         {predictedY}
                       </Text>
                     </Stack.Item>
-                    <Stack.Item>
+                    <Stack.Item id="gtLabel">
                       <Text variant="large">
                         {localization.InterpretVision.Dashboard.trueY}
                         {trueY}
@@ -195,6 +195,7 @@ export class Flyout extends React.Component<IFlyoutProps, IFlyoutState> {
                 </Stack.Item>
                 <Stack.Item className={classNames.imageContainer}>
                   <Image
+                    id={`flyoutImage_${item?.index}`}
                     src={`data:image/jpg;base64,${item?.image}`}
                     className={classNames.image}
                     imageFit={ImageFit.contain}

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.tsx

@@ -129,6 +129,7 @@ export class ImageList extends React.Component<
             <Image
               {...imageProps}
               alt={alt}
+              id={`visionImage_${item?.index}`}
               src={`data:image/jpg;base64,${item?.image}`}
               onClick={this.callbackWrapper(item)}
               width={this.props.imageDim}
@@ -144,6 +145,7 @@ export class ImageList extends React.Component<
             style={{
               left: ImagePadding
             }}
+            id={`predictedY_${item?.index}`}
           >
             <Text className={classNames.labelPredicted}>{predictedY}</Text>
           </Stack.Item>
@@ -156,6 +158,7 @@ export class ImageList extends React.Component<
                   ? this.props.imageDim
                   : this.props.imageDim - 1.35 * ImagePadding
             }}
+            id={`trueY_${item?.index}`}
           >
             <Text
               className={classNames.label}

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TabsView.tsx

@@ -105,13 +105,16 @@ export class TabsView extends React.Component<ITabsViewProps, ITabViewState> {
               className={classNames.mainImageContainer}
             >
               <Stack className={classNames.halfContainer} tokens={stackTokens}>
-                <Stack.Item>
+                <Stack.Item id="errorInstances">
                   <TitleBar
                     count={this.props.errorInstances.length}
                     type={TitleBarOptions.Error}
                   />
                 </Stack.Item>
-                <Stack.Item className={classNames.imageListContainer}>
+                <Stack.Item
+                  className={classNames.imageListContainer}
+                  id="errorImageContainer"
+                >
                   <ImageList
                     items={this.props.errorInstances}
                     imageDim={this.props.imageDim}
@@ -121,13 +124,16 @@ export class TabsView extends React.Component<ITabsViewProps, ITabViewState> {
                 </Stack.Item>
               </Stack>
               <Stack className={classNames.halfContainer} tokens={stackTokens}>
-                <Stack.Item>
+                <Stack.Item id="successInstances">
                   <TitleBar
                     count={this.props.successInstances.length}
                     type={TitleBarOptions.Success}
                   />
                 </Stack.Item>
-                <Stack.Item className={classNames.imageListContainer}>
+                <Stack.Item
+                  className={classNames.imageListContainer}
+                  id="successImageContainer"
+                >
                   <ImageList
                     items={this.props.successInstances}
                     imageDim={this.props.imageDim}

libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/TitleBar.tsx

@@ -53,7 +53,7 @@ export class TitleBar extends React.Component<ITitleBarProps, ITitleBarState> {
               : localization.InterpretVision.Dashboard.titleBarSuccess}
           </Text>
         </Stack.Item>
-        <Stack.Item>
+        <Stack.Item id="instanceCount">
           <Text variant="large" className={classNames.titleBarNumber}>
             {this.props.count}
           </Text>

libs/interpret-vision/src/lib/VisionExplanationDashboard/VisionExplanationDashboardCommon.tsx

@@ -95,12 +95,13 @@ export class VisionExplanationDashboardCommon extends React.Component<
                 tokens={{ childrenGap: "l1" }}
                 verticalAlign="center"
               >
-                <Stack.Item>
+                <Stack.Item id="predictedLabel">
                   <Text>
                     {localization.InterpretVision.Dashboard.predictedLabel}
                   </Text>
                 </Stack.Item>
                 <Stack.Item
+                  id="legendFailure"
                   className={mergeStyles(
                     this.props.imageStyles.errorIndicator,
                     this.props.classNames.legendIndicator
@@ -111,6 +112,7 @@ export class VisionExplanationDashboardCommon extends React.Component<
                   </Text>
                 </Stack.Item>
                 <Stack.Item
+                  id="legendSuccess"
                   className={mergeStyles(
                     this.props.imageStyles.successIndicator,
                     this.props.classNames.legendIndicator

notebooks/test_notebooks.py

@@ -261,8 +261,10 @@ def test_responsibleaidashboard_multiclass_dnn_model_debugging():
 @pytest.mark.vision_notebooks
 def test_responsibleaidashboard_fridge_image_classification_model_debugging():
     nb_path = RESPONSIBLEAIDASHBOARD
-    nb_name = \
-        "responsibleaidashboard-fridge-image-classification-model-debugging"
+    nb_name = (
+        "responsibleaidashboard-fridge-"
+        "image-classification-model-debugging"
+    )
 
     test_values = {}
     assay_one_notebook(nb_path, nb_name, test_values)