Heatmap Support for Object Detection (#2303)

* heatmap support ckpt

* auto lint fixes

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/DatasetCohortStatsTable.tsx

@@ -19,6 +19,7 @@ interface IDatasetCohortStatsTableProps {
   selectableMetrics: IDropdownOption[];
   selectedMetrics: string[];
   showHeatmapColors: boolean;
+  modelType: string;
 }
 
 class IDatasetCohortStatsTableState {}
@@ -37,7 +38,8 @@ export class DatasetCohortStatsTable extends React.Component<
       this.props.selectableMetrics,
       this.props.labeledStatistics,
       this.props.selectedMetrics,
-      this.props.showHeatmapColors
+      this.props.showHeatmapColors,
+      this.props.modelType
     ).items;
 
     const showColors =

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/DisaggregatedAnalysisTable.tsx

@@ -21,6 +21,7 @@ interface IDisaggregatedAnalysisTableProps {
   selectedFeatures: number[];
   featureBasedCohorts: ErrorCohort[];
   showHeatmapColors: boolean;
+  modelType: string;
 }
 
 class IDisaggregatedAnalysisTableState {}
@@ -39,7 +40,8 @@ export class DisaggregatedAnalysisTable extends React.Component<
       this.props.selectableMetrics,
       this.props.labeledStatistics,
       this.props.selectedMetrics,
-      this.props.showHeatmapColors
+      this.props.showHeatmapColors,
+      this.props.modelType
     );
     if (this.props.selectedFeatures.length === 0) {
       return React.Fragment;

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/ModelOverview.tsx

@@ -424,11 +424,8 @@ export class ModelOverview extends React.Component<
               labeledStatistics={this.state.datasetCohortLabeledStatistics}
               selectableMetrics={selectableMetrics}
               selectedMetrics={this.state.selectedMetrics}
-              showHeatmapColors={
-                this.state.showHeatmapColors &&
-                this.context.dataset.task_type !==
-                  DatasetTaskType.ObjectDetection
-              }
+              showHeatmapColors={this.state.showHeatmapColors}
+              modelType={this.context.modelMetadata.modelType}
             />
           ) : (
             <>
@@ -478,11 +475,8 @@ export class ModelOverview extends React.Component<
                 selectedMetrics={this.state.selectedMetrics}
                 selectedFeatures={this.state.selectedFeatures}
                 featureBasedCohorts={this.state.featureBasedCohorts}
-                showHeatmapColors={
-                  this.state.showHeatmapColors &&
-                  this.context.dataset.task_type !==
-                    DatasetTaskType.ObjectDetection
-                }
+                showHeatmapColors={this.state.showHeatmapColors}
+                modelType={this.context.modelMetadata.modelType}
               />
             </>
           )}
@@ -553,10 +547,8 @@ export class ModelOverview extends React.Component<
       this.state.featureBasedCohorts.length > 1;
 
     return (
-      (showHeatmapToggleInDatasetCohortView ||
-        showHeatmapToggleInFeatureCohortView) &&
-      // excluding object detection scenario
-      this.context.dataset.task_type !== DatasetTaskType.ObjectDetection
+      showHeatmapToggleInDatasetCohortView ||
+      showHeatmapToggleInFeatureCohortView
     );
   }
 

libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/ModelOverview/StatsTableUtils.ts

@@ -8,6 +8,7 @@ import {
   ErrorCohort,
   HighchartsNull,
   ILabeledStatistic,
+  ModelTypes,
   MulticlassClassificationMetrics,
   MultilabelMetrics,
   ObjectDetectionMetrics,
@@ -32,7 +33,8 @@ export function generateCohortsStatsTable(
   selectableMetrics: IDropdownOption[],
   labeledStatistics: ILabeledStatistic[][],
   selectedMetrics: string[],
-  useTexturedBackgroundForNaN: boolean
+  useTexturedBackgroundForNaN: boolean,
+  modelType: string
 ): {
   fairnessStats: IFairnessStats[];
   items: PointOptionsObject[];
@@ -149,26 +151,29 @@ export function generateCohortsStatsTable(
         } else {
           const theme = getTheme();
           // not a numeric value (NaN), so just put null and use textured color
-          const colorConfig = useTexturedBackgroundForNaN
-            ? {
-                color: {
-                  pattern: {
-                    aspectRatio: 1,
-                    backgroundColor: theme.semanticColors.bodyBackground,
-                    color: theme.palette.magentaLight,
-                    height: 10,
-                    image: "",
-                    opacity: 0.5,
-                    path: {
-                      d: "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",
-                      strokeWidth: 3
-                    },
-                    patternTransform: "",
-                    width: 10
+          const colorConfig =
+            useTexturedBackgroundForNaN &&
+            modelType !== ModelTypes.ObjectDetection &&
+            modelType !== ModelTypes.QuestionAnswering
+              ? {
+                  color: {
+                    pattern: {
+                      aspectRatio: 1,
+                      backgroundColor: theme.semanticColors.bodyBackground,
+                      color: theme.palette.magentaLight,
+                      height: 10,
+                      image: "",
+                      opacity: 0.5,
+                      path: {
+                        d: "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",
+                        strokeWidth: 3
+                      },
+                      patternTransform: "",
+                      width: 10
+                    }
                   }
                 }
-              }
-            : { color: "transparent" };
+              : { color: "transparent" };
           items.push({
             ...colorConfig,
             // null is treated as a special value by highcharts