Fix heatmap by removing erroneous color configuration

apps/dashboard/src/model-assessment-vision/App.tsx

@@ -29,6 +29,18 @@ export class App extends React.Component<IAppProps> {
     TestReq: [{ displayText: "TestReq", format: "text" }]
   };
 
+  public async generateRandomObjectDetectionMetrics(
+    selectionIndexes: number[][],
+    className: string
+  ): Promise<any[]> {
+    const returnedValues: any[] = [];
+    selectionIndexes.forEach(() => {
+      returnedValues.push([Math.random(), Math.random(), Math.random()]);
+    });
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return [returnedValues, [className]];
+  }
+
   public render(): React.ReactNode {
     if (this.props.modelExplanationData) {
       for (const exp of this.props.modelExplanationData) {
@@ -39,6 +51,8 @@ export class App extends React.Component<IAppProps> {
       ...this.props,
       locale: this.props.language,
       localUrl: "https://www.bing.com/",
+      requestObjectDetectionMetrics: (selectionIndexes, _, className) =>
+        this.generateRandomObjectDetectionMetrics(selectionIndexes, className),
       stringParams: { contextualHelp: this.messages },
       theme: this.props.theme
     };

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

@@ -114,9 +114,6 @@ export class CohortStatsHeatmap extends React.Component<
                 dataLabels: {
                   enabled: true,
                   nullFormat: "N/A",
-                  style: {
-                    color: theme.semanticColors.bodyText
-                  },
                   ...colorConfig
                 },
                 name: "Metrics",

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

@@ -104,10 +104,7 @@ export class FairnessMetricTable extends React.Component<
                 data: items,
                 dataLabels: {
                   color: theme.semanticColors.bodyText,
-                  enabled: true,
-                  style: {
-                    color: theme.semanticColors.bodyText
-                  }
+                  enabled: true
                 },
                 name: "Metrics",
                 type: "heatmap"

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

@@ -424,7 +424,11 @@ export class ModelOverview extends React.Component<
               labeledStatistics={this.state.datasetCohortLabeledStatistics}
               selectableMetrics={selectableMetrics}
               selectedMetrics={this.state.selectedMetrics}
-              showHeatmapColors={this.state.showHeatmapColors}
+              showHeatmapColors={
+                this.state.showHeatmapColors &&
+                this.context.dataset.task_type !==
+                  DatasetTaskType.ObjectDetection
+              }
             />
           ) : (
             <>
@@ -474,7 +478,11 @@ export class ModelOverview extends React.Component<
                 selectedMetrics={this.state.selectedMetrics}
                 selectedFeatures={this.state.selectedFeatures}
                 featureBasedCohorts={this.state.featureBasedCohorts}
-                showHeatmapColors={this.state.showHeatmapColors}
+                showHeatmapColors={
+                  this.state.showHeatmapColors &&
+                  this.context.dataset.task_type !==
+                    DatasetTaskType.ObjectDetection
+                }
               />
             </>
           )}

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

@@ -141,9 +141,7 @@ export function generateCohortsStatsTable(
             // only 1 unique value in the set, set color to 0
             colorValue = 0;
           }
-          const colorConfig = { color: "transparent" };
           items.push({
-            ...colorConfig,
             colorValue,
             value: Number(labeledStat.stat.toFixed(3)),
             x: metricIndex + 1,