Model Overview: Object Detection Widgets for Aggregate Methods, Class…

… selection, & IoU Threshold (#1997) * agg method & iou thresh widgets ckpt * class selection widget * widget option format fix * comment fixes * widget size & lint fixes * semiclon lint fix * od widget options refactor * lint complexity fixes * lint complexity fixes * comment fixes * refactor to reduce complexity * complexity refactor * lint fixes * autolint fixes
microsoft · Mar 23, 2023 · 1eae026 · 1eae026
1 parent c1cc6f5
commit 1eae026
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 0 deletions.
diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -1761,6 +1761,8 @@
         "macro": "Macro",
         "micro": "Micro"
       },
+      "classSelectionDropdown": "Select class(es)",
+      "iouthresholdDropdown": "IoU Threshold",
       "notAvailable": "N/A",
       "countColumnHeader": "Sample size",
       "dataCohortsHeatmapHeader": "Cohorts",
@@ -1773,6 +1775,7 @@
       "probabilityForClassSelectionHeader": "Probability for class",
       "targetSelectionHeader": "Target",
       "metricSelectionDropdownPlaceholder": "Select metrics to compare your cohorts.",
+      "classSelectionDropdownPlaceholder": "Select class name for class-based analysis.",
       "featureSelectionDropdownPlaceholder": "Select features to use for a feature-based analysis.",
       "probabilityDistributionPivotItem": "Probability distribution",
       "regressionDistributionPivotItem": "Target distribution",

diff --git a/...ssessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts b/...ssessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts
@@ -23,6 +23,7 @@ export interface IModelOverviewStyles {
   generalText: IStyle;
   generalSemiBoldText: IStyle;
   selections: IStyle;
+  slider: IStyle;
   smallDropdown: IStyle;
   tabs: IStyle;
 }
@@ -53,6 +54,9 @@ export const modelOverviewStyles: () => IProcessedStyleSet<IModelOverviewStyles>
         padding: "0 40px 32px 40px"
       },
       selections: flexLgDown,
+      slider: {
+        width: "250px"
+      },
       smallDropdown: {
         width: "150px"
       },

diff --git a/...odel-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx b/...odel-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx
@@ -47,6 +47,7 @@ import { FeatureConfigurationFlyout } from "./FeatureConfigurationFlyout";
 import { MetricConfigurationFlyout } from "./MetricConfigurationFlyout";
 import { modelOverviewStyles } from "./ModelOverview.styles";
 import { ModelOverviewChartPivot } from "./ModelOverviewChartPivot";
+import { ObjectDetectionWidgets } from "./ObjectDetectionModelOverview";
 import { getSelectableMetrics } from "./StatsTableUtils";
 
 interface IModelOverviewProps {
@@ -327,6 +328,13 @@ export class ModelOverview extends React.Component<
                   .helpMeChooseMetricsButton
               }
             </ActionButton>
+            {this.context.dataset.task_type ===
+              DatasetTaskType.ObjectDetection && (
+              <ObjectDetectionWidgets
+                classNames={classNames}
+                dataset={this.context.dataset}
+              />
+            )}
           </Stack>
           {!this.state.datasetCohortViewIsVisible && (
             <Stack

diff --git a/.../src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx b/.../src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx
@@ -0,0 +1,87 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  ComboBox,
+  IComboBoxOption,
+  IProcessedStyleSet,
+  Slider,
+  Stack
+} from "@fluentui/react";
+import { FluentUIStyles, IDataset } from "@responsible-ai/core-ui";
+import { localization } from "@responsible-ai/localization";
+import React from "react";
+
+import { IModelOverviewStyles } from "./ModelOverview.styles";
+
+export function getSelectableAggregateMethod(): IComboBoxOption[] {
+  const selectableAggregateMethods: IComboBoxOption[] = [
+    {
+      key: "macro",
+      text: localization.ModelAssessment.ModelOverview.metricTypes.macro
+    },
+    {
+      key: "micro",
+      text: localization.ModelAssessment.ModelOverview.metricTypes.micro
+    }
+  ];
+  return selectableAggregateMethods;
+}
+
+export function getSelectableClassNames(dataset: IDataset): IComboBoxOption[] {
+  const selectableClassNames: IComboBoxOption[] = [];
+  if (dataset.class_names) {
+    for (const className of dataset.class_names) {
+      selectableClassNames.push({
+        key: className,
+        text: className
+      });
+    }
+  }
+  return selectableClassNames;
+}
+
+export interface IObjectDetectionWidgetsProps {
+  classNames: IProcessedStyleSet<IModelOverviewStyles>;
+  dataset: IDataset;
+}
+
+export class ObjectDetectionWidgets extends React.PureComponent<IObjectDetectionWidgetsProps> {
+  public render(): React.ReactNode {
+    return (
+      <Stack.Item>
+        <ComboBox
+          id="modelOverviewAggregateMethod"
+          label={localization.ModelAssessment.ModelOverview.metricsTypeDropdown}
+          selectedKey={"macro"}
+          options={getSelectableAggregateMethod()}
+          className={this.props.classNames.dropdown}
+          styles={FluentUIStyles.smallDropdownStyle}
+        />
+        <ComboBox
+          id="modelOverviewClassSelection"
+          placeholder={
+            localization.ModelAssessment.ModelOverview
+              .classSelectionDropdownPlaceholder
+          }
+          label={
+            localization.ModelAssessment.ModelOverview.classSelectionDropdown
+          }
+          options={getSelectableClassNames(this.props.dataset)}
+          className={this.props.classNames.dropdown}
+          styles={FluentUIStyles.smallDropdownStyle}
+        />
+        <Slider
+          id="iouThreshold"
+          label={
+            localization.ModelAssessment.ModelOverview.iouthresholdDropdown
+          }
+          max={100}
+          className={this.props.classNames.slider}
+          valueFormat={(value: number): string => `IoU=${value}%`}
+          showValue
+        />
+      </Stack.Item>
+    );
+  }
+}