Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flyout Bounding Box legend & accessibility fixes #2497

Merged
merged 10 commits into from
Jan 24, 2024
Merged

Flyout Bounding Box legend & accessibility fixes #2497

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
61935e7
added bb legend
Advitya17 Jan 19, 2024
f68a58c
added tokens variables
Advitya17 Jan 19, 2024
c14b1c5
localization & accessibility fixes
Advitya17 Jan 19, 2024
a158ea9
simplified stack
Advitya17 Jan 19, 2024
00a0801
refactor
Advitya17 Jan 23, 2024
b8bf644
Merge branch 'main' of https://github.com/microsoft/responsible-ai-to…
Advitya17 Jan 23, 2024
b712aac
refactor
Advitya17 Jan 23, 2024
cd5a501
refactor
Advitya17 Jan 23, 2024
85d8452
new file component refactor
Advitya17 Jan 24, 2024
459db11
auto lint fixes
Advitya17 Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
IComboBox,
IComboBoxOption,
Image,
Label,
List,
Panel,
PanelType,
Separator,
Spinner,
Stack,
Text
Text,
getTheme
} from "@fluentui/react";
import { FluentUIStyles } from "@responsible-ai/core-ui";
import { localization } from "@responsible-ai/localization";
Expand Down Expand Up @@ -99,6 +101,7 @@
odIncorrect,
item.index
);
const theme = getTheme();
return (
<FocusZone>
<Panel
Expand Down Expand Up @@ -173,13 +176,23 @@
{localization.InterpretVision.Dashboard.panelInformation}
</Text>
</Stack.Item>
<Stack.Item className={classNames.featureListContainer}>
<Stack.Item className={classNames.featureListContainer} tabIndex={0}>
<List
items={this.state.metadata}
onRenderCell={FlyoutStyles.onRenderCell}
/>
</Stack.Item>
</Stack>
<Stack horizontal tokens={FlyoutODUtils.stackTokens.large}>
<Stack horizontal tokens={FlyoutODUtils.stackTokens.medium}>
<Text variant="medium">{localization.InterpretVision.Dashboard.trueY}</Text>
<div style={{ backgroundColor: theme.palette.green, height: 20, width: 20 }} />
</Stack>
<Stack horizontal tokens={FlyoutODUtils.stackTokens.medium}>
<Text variant="medium">{localization.InterpretVision.Dashboard.predictedY}</Text>
<div style={{ backgroundColor: theme.palette.magenta, height: 20, width: 20 }} />
</Stack>
</Stack>
<Stack>
<Stack.Item className={classNames.imageContainer}>
<Stack.Item id="canvasToolsDiv">
Expand All @@ -200,17 +213,20 @@
</Text>
</Stack.Item>
<Stack>
{
<Label
id={localization.InterpretVision.Dashboard.objectSelectionLabel}>
{localization.InterpretVision.Dashboard.chooseObject}
</Label>
<ComboBox
id={localization.InterpretVision.Dashboard.objectSelect}
label={localization.InterpretVision.Dashboard.chooseObject}
onChange={this.selectODChoiceFromDropdown}
selectedKey={this.state.odSelectedKey}
options={this.state.selectableObjectIndexes}
className={"classNames.dropdown"}
className="classNames.dropdown"
styles={FluentUIStyles.smallDropdownStyle}
ariaLabel={localization.InterpretVision.Dashboard.chooseObject}
aria-labelledby={localization.InterpretVision.Dashboard.objectSelectionLabel}
/>
}
<Stack>
{!this.props.loadingExplanation[item.index][
+this.state.odSelectedKey.slice(
Expand Down Expand Up @@ -282,7 +298,7 @@
const altText = getObjectDetectionImageAltText(
item.odCorrect,
item.odIncorrect,
item.index

Check failure on line 301 in libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx

View workflow job for this annotation

GitHub Actions / ci-typescript (16.x) 

File has too many lines (315). Maximum allowed is 300

Check failure on line 301 in libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx

View workflow job for this annotation

GitHub Actions / ci-typescript (12.x) 

File has too many lines (315). Maximum allowed is 300

Check failure on line 301 in libs/interpret-vision/src/lib/VisionExplanationDashboard/Controls/FlyoutObjectDetection.tsx

View workflow job for this annotation

GitHub Actions / ci-typescript (14.x) 

File has too many lines (315). Maximum allowed is 300
);
// this.state.item.image is base64 encoded string
await FlyoutODUtils.loadImageFromBase64(item.image, editor, altText);
Expand Down
1 change: 1 addition & 0 deletions libs/localization/src/lib/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1477,6 +1477,7 @@
"multiselect": "Multiselect",
"notdefined": "object scenario not defined",
"objectSelect": "Object Selection",
"objectSelectionLabel": "objectSelectLabel",
"pageSize": "Page size: ",
"panelTitle": "Selected instance",
"panelExplanation": "Explanation",
Expand Down
Loading