From 61935e7580a1c8c7781b2f20f2b1a35aafcfb043 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Fri, 19 Jan 2024 10:28:16 -0500 Subject: [PATCH 1/9] added bb legend --- .../Controls/FlyoutObjectDetection.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index d32c30cdc6..da8701754a 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -13,7 +13,8 @@ import { Separator, Spinner, Stack, - Text + Text, + getTheme } from "@fluentui/react"; import { FluentUIStyles } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; @@ -99,6 +100,7 @@ export class FlyoutObjectDetection extends React.Component< odIncorrect, item.index ); + const theme = getTheme(); return ( + + +
+ Ground Truth + + +
+ Predicted + + From f68a58c446801b5551ac46aa039acda8458baad7 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Fri, 19 Jan 2024 10:42:02 -0500 Subject: [PATCH 2/9] added tokens variables --- .../Controls/FlyoutObjectDetection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index da8701754a..d2e86b84fe 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -182,12 +182,12 @@ export class FlyoutObjectDetection extends React.Component< /> - - + +
Ground Truth - +
Predicted From c14b1c5fbb7983ec7e3fbdec47c611dd62a9175b Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Fri, 19 Jan 2024 11:47:04 -0500 Subject: [PATCH 3/9] localization & accessibility fixes --- .../Controls/FlyoutObjectDetection.tsx | 32 ++++++++++++------- libs/localization/src/lib/en.json | 1 + 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index d2e86b84fe..ac3178d2ec 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -7,6 +7,7 @@ import { IComboBox, IComboBoxOption, Image, + Label, List, Panel, PanelType, @@ -175,7 +176,7 @@ export class FlyoutObjectDetection extends React.Component< {localization.InterpretVision.Dashboard.panelInformation} - + + {localization.InterpretVision.Dashboard.trueY}
- Ground Truth + {localization.InterpretVision.Dashboard.predictedY}
- Predicted @@ -213,15 +214,22 @@ export class FlyoutObjectDetection extends React.Component< { - + <> + + + } {!this.props.loadingExplanation[item.index][ diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json index c9d6c44baa..4f98babeb2 100644 --- a/libs/localization/src/lib/en.json +++ b/libs/localization/src/lib/en.json @@ -1477,6 +1477,7 @@ "multiselect": "Multiselect", "notdefined": "object scenario not defined", "objectSelect": "Object Selection", + "objectSelectionLabel": "objectSelectLabel", "pageSize": "Page size: ", "panelTitle": "Selected instance", "panelExplanation": "Explanation", From a158ea9cd19aec6d5eb4965456c47626fa975256 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Fri, 19 Jan 2024 17:11:22 -0500 Subject: [PATCH 4/9] simplified stack --- .../Controls/FlyoutObjectDetection.tsx | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index ac3178d2ec..7a2b07b726 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -186,11 +186,11 @@ export class FlyoutObjectDetection extends React.Component< {localization.InterpretVision.Dashboard.trueY} -
+
{localization.InterpretVision.Dashboard.predictedY} -
+
@@ -213,24 +213,20 @@ export class FlyoutObjectDetection extends React.Component< - { - <> - - - - } + + {!this.props.loadingExplanation[item.index][ +this.state.odSelectedKey.slice( From 00a0801b72d9d63ee1cedc0bd0bff297e70a4b72 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Tue, 23 Jan 2024 09:39:16 -0500 Subject: [PATCH 5/9] refactor --- .../Controls/FlyoutObjectDetection.tsx | 69 +++++-------------- .../Controls/FlyoutObjectDetectionUtils.tsx | 50 +++++++++++++- 2 files changed, 68 insertions(+), 51 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index 7a2b07b726..ad353fc8c3 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -125,42 +125,11 @@ export class FlyoutObjectDetection extends React.Component< verticalAlign="center" > - - - - - {localization.InterpretVision.Dashboard.indexLabel} - {item?.index} - - - - - { - localization.InterpretVision.Dashboard - .correctDetections - } - {correctDetections} - - - - - { - localization.InterpretVision.Dashboard - .incorrectDetections - } - {incorrectDetections} - - - + @@ -213,20 +182,20 @@ export class FlyoutObjectDetection extends React.Component< - - + + {!this.props.loadingExplanation[item.index][ +this.state.odSelectedKey.slice( diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx index 192a05e0aa..9dbec1f5a1 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx @@ -1,7 +1,8 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { IComboBoxOption, getTheme } from "@fluentui/react"; +import React from 'react'; +import { IComboBoxOption, getTheme, Stack, Text } from "@fluentui/react"; import { IDataset, IVisionListItem } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; import { CanvasTools } from "vott-ct"; @@ -27,6 +28,53 @@ export interface IFlyoutState { editorCallback?: HTMLDivElement; } +interface DetectionDetailsProps { + item: IVisionListItem; // replace with actual type + correctDetections: string; + incorrectDetections: string; +} + +export const DetectionDetails: React.FC = ({ item, correctDetections, incorrectDetections }) => { + return ( + + + + + {localization.InterpretVision.Dashboard.indexLabel} + {item?.index} + + + + + { + localization.InterpretVision.Dashboard + .correctDetections + } + {correctDetections} + + + + + { + localization.InterpretVision.Dashboard + .incorrectDetections + } + {incorrectDetections} + + + + ); +}; + export const stackTokens = { large: { childrenGap: "l2" }, medium: { childrenGap: "l1" } From b712aac918b40a428a99e9234d9ce702ab25fab1 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Tue, 23 Jan 2024 11:39:20 -0500 Subject: [PATCH 6/9] refactor --- .../Controls/FlyoutObjectDetection.tsx | 52 +++++++++--- .../Controls/FlyoutObjectDetectionUtils.tsx | 83 +++++++++---------- 2 files changed, 79 insertions(+), 56 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index ad353fc8c3..ec56c0bb15 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -125,11 +125,11 @@ export class FlyoutObjectDetection extends React.Component< verticalAlign="center" > - + @@ -145,7 +145,10 @@ export class FlyoutObjectDetection extends React.Component< {localization.InterpretVision.Dashboard.panelInformation} - + - {localization.InterpretVision.Dashboard.trueY} -
+ + {localization.InterpretVision.Dashboard.trueY} + +
- {localization.InterpretVision.Dashboard.predictedY} -
+ + {localization.InterpretVision.Dashboard.predictedY} + +
@@ -183,7 +202,10 @@ export class FlyoutObjectDetection extends React.Component< {!this.props.loadingExplanation[item.index][ diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx index 9dbec1f5a1..e8e0ee60de 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx @@ -1,10 +1,10 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import React from 'react'; import { IComboBoxOption, getTheme, Stack, Text } from "@fluentui/react"; import { IDataset, IVisionListItem } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; +import React from "react"; import { CanvasTools } from "vott-ct"; import { Editor } from "vott-ct/lib/js/CanvasTools/CanvasTools.Editor"; import { RegionData } from "vott-ct/lib/js/CanvasTools/Core/RegionData"; @@ -28,57 +28,54 @@ export interface IFlyoutState { editorCallback?: HTMLDivElement; } -interface DetectionDetailsProps { +interface IDetectionDetailsProps { item: IVisionListItem; // replace with actual type correctDetections: string; incorrectDetections: string; } -export const DetectionDetails: React.FC = ({ item, correctDetections, incorrectDetections }) => { - return ( - - - - - {localization.InterpretVision.Dashboard.indexLabel} - {item?.index} - - - - - { - localization.InterpretVision.Dashboard - .correctDetections - } - {correctDetections} - - - - - { - localization.InterpretVision.Dashboard - .incorrectDetections - } - {incorrectDetections} - - - - ); -}; - export const stackTokens = { large: { childrenGap: "l2" }, medium: { childrenGap: "l1" } }; + +export class DetectionDetails extends React.Component { + public render(): React.ReactNode { + return ( + + + + + {localization.InterpretVision.Dashboard.indexLabel} + {this.props.item?.index} + + + + + {localization.InterpretVision.Dashboard.correctDetections} + {this.props.correctDetections} + + + + + {localization.InterpretVision.Dashboard.incorrectDetections} + {this.props.incorrectDetections} + + + + ); + } +} + export const ExcessLabelLen = localization.InterpretVision.Dashboard.prefix.length; From cd5a501fb27bd29507356b7205baf61ed87dead5 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Tue, 23 Jan 2024 12:23:52 -0500 Subject: [PATCH 7/9] refactor --- .../Controls/FlyoutObjectDetection.tsx | 31 +--------------- .../Controls/FlyoutObjectDetectionUtils.tsx | 37 ++++++++++++++++++- 2 files changed, 37 insertions(+), 31 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index ec56c0bb15..35a950b7e2 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -14,8 +14,7 @@ import { Separator, Spinner, Stack, - Text, - getTheme + Text } from "@fluentui/react"; import { FluentUIStyles } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; @@ -101,7 +100,6 @@ export class FlyoutObjectDetection extends React.Component< odIncorrect, item.index ); - const theme = getTheme(); return ( - - - - {localization.InterpretVision.Dashboard.trueY} - -
- - - - {localization.InterpretVision.Dashboard.predictedY} - -
- - + diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx index e8e0ee60de..8598334ecb 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetectionUtils.tsx @@ -39,6 +39,8 @@ export const stackTokens = { medium: { childrenGap: "l1" } }; +const theme = getTheme(); + export class DetectionDetails extends React.Component { public render(): React.ReactNode { return ( @@ -76,6 +78,39 @@ export class DetectionDetails extends React.Component { } } +export class ColorLegend extends React.Component { + public render(): React.ReactNode { + return ( + + + + {localization.InterpretVision.Dashboard.trueY} + +
+ + + + {localization.InterpretVision.Dashboard.predictedY} + +
+ + + ); + } +} + export const ExcessLabelLen = localization.InterpretVision.Dashboard.prefix.length; @@ -154,8 +189,6 @@ export function drawBoundingBoxes( return; } - const theme = getTheme(); - // Ensuring object detection labels are populated if ( !dataset.object_detection_predicted_y || From 85d845215f0f057e7334e9573161e3fb054f5e7a Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Wed, 24 Jan 2024 09:56:34 -0500 Subject: [PATCH 8/9] new file component refactor --- .../Controls/DetectionDetails.tsx | 51 +++++++++++++++++++ .../Controls/FlyoutObjectDetection.tsx | 3 +- .../Controls/FlyoutObjectDetectionUtils.tsx | 43 ---------------- 3 files changed, 53 insertions(+), 44 deletions(-) create mode 100644 libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx new file mode 100644 index 0000000000..13e095c479 --- /dev/null +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx @@ -0,0 +1,51 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { Stack, Text } from "@fluentui/react"; +import { IVisionListItem } from "@responsible-ai/core-ui"; +import { localization } from "@responsible-ai/localization"; +import React from "react"; + +import { stackTokens } from "./FlyoutObjectDetectionUtils"; + +interface IDetectionDetailsProps { + item: IVisionListItem; // replace with actual type + correctDetections: string; + incorrectDetections: string; + } + export class DetectionDetails extends React.Component { + public render(): React.ReactNode { + return ( + + + + + {localization.InterpretVision.Dashboard.indexLabel} + {this.props.item?.index} + + + + + {localization.InterpretVision.Dashboard.correctDetections} + {this.props.correctDetections} + + + + + {localization.InterpretVision.Dashboard.incorrectDetections} + {this.props.incorrectDetections} + + + + ); + } + } \ No newline at end of file diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index 35a950b7e2..4ac826c0ed 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -20,6 +20,7 @@ import { FluentUIStyles } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; import * as React from "react"; import { CanvasTools } from "vott-ct"; +import { DetectionDetails } from "./DetectionDetails"; import * as FlyoutStyles from "../utils/FlyoutUtils"; import { getObjectDetectionImageAltText } from "../utils/getAltTextUtils"; @@ -123,7 +124,7 @@ export class FlyoutObjectDetection extends React.Component< verticalAlign="center" > - { - public render(): React.ReactNode { - return ( - - - - - {localization.InterpretVision.Dashboard.indexLabel} - {this.props.item?.index} - - - - - {localization.InterpretVision.Dashboard.correctDetections} - {this.props.correctDetections} - - - - - {localization.InterpretVision.Dashboard.incorrectDetections} - {this.props.incorrectDetections} - - - - ); - } -} - export class ColorLegend extends React.Component { public render(): React.ReactNode { return ( From 459db11729851f4923da6977fcc42c8716555484 Mon Sep 17 00:00:00 2001 From: Advitya Gemawat Date: Wed, 24 Jan 2024 10:43:15 -0500 Subject: [PATCH 9/9] auto lint fixes --- .../Controls/DetectionDetails.tsx | 78 +++++++++---------- .../Controls/FlyoutObjectDetection.tsx | 2 +- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx index 13e095c479..2daf59ebcb 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/DetectionDetails.tsx @@ -9,43 +9,43 @@ import React from "react"; import { stackTokens } from "./FlyoutObjectDetectionUtils"; interface IDetectionDetailsProps { - item: IVisionListItem; // replace with actual type - correctDetections: string; - incorrectDetections: string; - } - export class DetectionDetails extends React.Component { - public render(): React.ReactNode { - return ( + item: IVisionListItem; // replace with actual type + correctDetections: string; + incorrectDetections: string; +} +export class DetectionDetails extends React.Component { + public render(): React.ReactNode { + return ( + - - - - {localization.InterpretVision.Dashboard.indexLabel} - {this.props.item?.index} - - - - - {localization.InterpretVision.Dashboard.correctDetections} - {this.props.correctDetections} - - - - - {localization.InterpretVision.Dashboard.incorrectDetections} - {this.props.incorrectDetections} - - - - ); - } - } \ No newline at end of file + horizontal + tokens={stackTokens.medium} + horizontalAlign="center" + verticalAlign="center" + /> + + + {localization.InterpretVision.Dashboard.indexLabel} + {this.props.item?.index} + + + + + {localization.InterpretVision.Dashboard.correctDetections} + {this.props.correctDetections} + + + + + {localization.InterpretVision.Dashboard.incorrectDetections} + {this.props.incorrectDetections} + + + + ); + } +} diff --git a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx index 4ac826c0ed..87eec60108 100644 --- a/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx +++ b/libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx @@ -20,12 +20,12 @@ import { FluentUIStyles } from "@responsible-ai/core-ui"; import { localization } from "@responsible-ai/localization"; import * as React from "react"; import { CanvasTools } from "vott-ct"; -import { DetectionDetails } from "./DetectionDetails"; import * as FlyoutStyles from "../utils/FlyoutUtils"; import { getObjectDetectionImageAltText } from "../utils/getAltTextUtils"; import { getJoinedLabelString } from "../utils/labelUtils"; +import { DetectionDetails } from "./DetectionDetails"; import { flyoutStyles, explanationImage,