From 1eae026ab41d20f9dadffee81d26013d1dafd3fb Mon Sep 17 00:00:00 2001
From: Advitya Gemawat <agemawat@microsoft.com>
Date: Wed, 22 Mar 2023 19:18:16 -0400
Subject: [PATCH] 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
---
 libs/localization/src/lib/en.json             |  3 +
 .../ModelOverview/ModelOverview.styles.ts     |  4 +
 .../Controls/ModelOverview/ModelOverview.tsx  |  8 ++
 .../ObjectDetectionModelOverview.tsx          | 87 +++++++++++++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx

diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
index cab83fb51f..ccb17befe7 100644
--- 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/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts
index ff9476ad28..eccea0c414 100644
--- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.styles.ts
+++ b/libs/model-assessment/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/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx
index 4685e4bddb..bab28125a0 100644
--- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx
+++ b/libs/model-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/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ObjectDetectionModelOverview.tsx
new file mode 100644
index 0000000000..74b4a708ad
--- /dev/null
+++ b/libs/model-assessment/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>
+    );
+  }
+}