thumbnail agg label fix

microsoft · Nov 27, 2023 · a6d2d3b · a6d2d3b
1 parent 96b3574
commit a6d2d3b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/libs/e2e/src/lib/describer/modelAssessment/Constants.ts b/libs/e2e/src/lib/describer/modelAssessment/Constants.ts
@@ -225,5 +225,6 @@ export enum Locators {
   VisionDataExplorerImageExplorerViewImage = "#VisionDataExplorer #visionImage_0",
   VisionDataExplorerImageExplorerViewImagePredictedY = "#VisionDataExplorer #predictedY_0",
   VisionDataExplorerImageExplorerViewImageTrueY = "#VisionDataExplorer #trueY_0",
-  VisionDataExplorerImageExplorerViewImageODAggLabel = "#VisionDataExplorer #odAggregateLabel_0"
+  VisionDataExplorerImageExplorerViewImageODAggLabelCorrect = "#VisionDataExplorer #odAggregateLabel_correct_0",
+  VisionDataExplorerImageExplorerViewImageODAggLabelIncorrect = "#VisionDataExplorer #odAggregateLabel_incorrect_0",
 }
diff --git a/...aExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts b/...aExplorer/ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelectionArePresent.ts
@@ -14,7 +14,10 @@ export function ensureAllVisionDataExplorerImageExplorerViewElementsAfterSelecti
       Locators.VisionDataExplorerImageExplorerViewObjectDetectionContainer
     ).should("exist");
 
-    cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabel).should(
+    cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabelCorrect).should(
+      "exist"
+    );
+    cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabelIncorrect).should(
       "exist"
     );
   } else {

diff --git a/...visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts b/...visionDataExplorer/ensureAllVisionDataExplorerViewElementsBeforeSelectionAreNotPresent.ts
@@ -43,7 +43,10 @@ export function ensureAllVisionDataExplorerImageExplorerViewElementsBeforeSelect
   cy.get(Locators.VisionDataExplorerImageExplorerViewImageTrueY).should(
     "not.exist"
   );
-  cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabel).should(
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabelCorrect).should(
+    "not.exist"
+  );
+  cy.get(Locators.VisionDataExplorerImageExplorerViewImageODAggLabelIncorrect).should(
     "not.exist"
   );
 }

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.styles.ts b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.styles.ts
@@ -72,7 +72,8 @@ export const imageListStyles: () => IProcessedStyleSet<IDatasetExplorerTabStyles
       },
       labelPredicted: {
         color: "black",
-        fontSize: FontSizes.small
+        fontSize: FontSizes.small,
+        fontWeight: "600"
       },
       list: {
         fontSize: 0,

diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/ImageList.tsx
@@ -110,7 +110,7 @@ export class ImageList extends React.Component<
     const itemTrueY = item?.trueY;
     const trueY = getJoinedLabelString(itemTrueY);
     const alt = predictedY;
-    const odAggregate = getJoinedLabelString(item?.odAggregate);
+    const odAggregate = getJoinedLabelString(item?.odAggregate)?.split(", ");
 
     return (
       <Stack
@@ -144,12 +144,24 @@ export class ImageList extends React.Component<
             />
           </Stack.Item>
           {this.props.taskType === DatasetTaskType.ObjectDetection ? (
-            <Stack>
+            <Stack
+              horizontal
+              tokens={{ childrenGap: "10px" }}
+            >
               <Stack.Item
-                className={classNames.labelContainer}
-                id={`odAggregateLabel_${item?.index}`}
+                className={classNames.successIndicator}
+                style={{
+                  left: ImagePadding
+                }}
+                id={`odAggregateLabel_correct_${item?.index}`}
+              >
+                <Text className={classNames.labelPredicted}>{`✅ Correct: ${odAggregate[0].split(' ')[0]}`}</Text>
+              </Stack.Item>
+              <Stack.Item
+                className={classNames.errorIndicator}
+                id={`odAggregateLabel_incorrect_${item?.index}`}
               >
-                <Text className={classNames.label}>{odAggregate}</Text>
+                <Text className={classNames.labelPredicted}>{`❌ Wrong: ${odAggregate[1].split(' ')[0]}`}</Text>
               </Stack.Item>
             </Stack>
           ) : (