Vision dashboard cohorts (#1686)

* model assessment vision

* fixups

* fixups

apps/dashboard/src/app/App.tsx

@@ -12,9 +12,9 @@ import { Redirect, generatePath } from "react-router-dom";
 import { App as ErrorAnalysis } from "../error-analysis/App";
 import { App as Fairness } from "../fairness/App";
 import { App as InterpretText } from "../interpret-text/App";
-import { App as InterpretVision } from "../interpret-vision/App";
 import { App as Interpret } from "../interpret/App";
 import { App as ModelAssessmentText } from "../model-assessment-text/App";
+import { App as ModelAssessmentVision } from "../model-assessment-vision/App";
 import { App as ModelAssessment } from "../model-assessment/App";
 
 import { AppHeader } from "./AppHeader";
@@ -91,22 +91,6 @@ export class App extends React.Component<IAppSetting, IAppState> {
               }
             />
           )}
-          {this.state.application === "interpretVision" && (
-            <InterpretVision
-              dataset={
-                applications[this.state.application].datasets[
-                  this.state.dataset
-                ].data
-              }
-              theme={themes[this.state.theme]}
-              language={Language[this.state.language]}
-              version={
-                applications[this.state.application].versions[
-                  this.state.version
-                ]
-              }
-            />
-          )}
           {this.state.application === "fairness" && (
             <Fairness
               dataset={
@@ -183,6 +167,25 @@ export class App extends React.Component<IAppSetting, IAppState> {
               }
             />
           )}
+          {this.state.application === "modelAssessmentVision" && (
+            <ModelAssessmentVision
+              {...applications[this.state.application].datasets[
+                this.state.dataset
+              ]}
+              theme={themes[this.state.theme]}
+              language={Language[this.state.language]}
+              version={
+                applications[this.state.application].versions[
+                  this.state.version
+                ]
+              }
+              featureFlights={
+                this.state.featureFlights === noFlights
+                  ? []
+                  : parseFeatureFlights(this.state.featureFlights)
+              }
+            />
+          )}
         </div>
         <Redirect to={generatePath(App.route, this.state)} push />
       </>

apps/dashboard/src/app/applications.ts

@@ -13,7 +13,6 @@ import { regression } from "../fairness/__mock_data__/regression";
 import { regressionWithError } from "../fairness/__mock_data__/regressionWithError";
 import { emotionLongDoc } from "../interpret-text/__mock_data__/emotionLongDoc";
 import { newsgroupBinaryData } from "../interpret-text/__mock_data__/newsgroupBinaryData";
-import { visionData } from "../interpret-vision/__mock_data__/visionData";
 import { automlMimicAdult } from "../interpret/__mock_data__/automlMimicAdult";
 import { bostonData } from "../interpret/__mock_data__/bostonData";
 import { bostonDataGlobal } from "../interpret/__mock_data__/bostonDataGlobal";
@@ -36,6 +35,7 @@ import {
   emotion,
   emotionModelExplanationData
 } from "../model-assessment-text/__mock_data__/emotion";
+import { visionData } from "../model-assessment-vision/__mock_data__/visionData";
 import {
   adultCensusWithFairnessDataset,
   adultCensusWithFairnessModelExplanationData,
@@ -80,8 +80,6 @@ import {
   IInterpretDataSet,
   IInterpretTextSetting,
   IInterpretTextDataSet,
-  IInterpretVisionSetting,
-  IInterpretVisionDataSet,
   IErrorAnalysisSetting,
   IErrorAnalysisDataSet,
   IModelAssessmentSetting,
@@ -91,11 +89,11 @@ import {
 export const applicationKeys = <const>[
   "interpret",
   "interpretText",
-  "interpretVision",
   "fairness",
   "errorAnalysis",
   "modelAssessment",
-  "modelAssessmentText"
+  "modelAssessmentText",
+  "modelAssessmentVision"
 ];
 
 export type IApplications = {
@@ -104,11 +102,12 @@ export type IApplications = {
   fairness: IFairnessSetting & IDataSet<IFairnessDataSet>;
   interpret: IInterpretSetting & IDataSet<IInterpretDataSet>;
   interpretText: IInterpretTextSetting & IDataSet<IInterpretTextDataSet>;
-  interpretVision: IInterpretVisionSetting & IDataSet<IInterpretVisionDataSet>;
   errorAnalysis: IErrorAnalysisSetting & IDataSet<IErrorAnalysisDataSet>;
   modelAssessment: IModelAssessmentSetting & IDataSet<IModelAssessmentDataSet>;
   modelAssessmentText: IModelAssessmentSetting &
     IDataSet<IModelAssessmentDataSet>;
+  modelAssessmentVision: IModelAssessmentSetting &
+    IDataSet<IModelAssessmentDataSet>;
 };
 
 export const applications: IApplications = <const>{
@@ -183,12 +182,6 @@ export const applications: IApplications = <const>{
     },
     versions: { "Version-1": 1 }
   },
-  interpretVision: {
-    datasets: {
-      visionData: { data: visionData }
-    },
-    versions: { "Version-1": 1 }
-  },
   modelAssessment: {
     datasets: {
       adultCensusIncomeData: {
@@ -265,5 +258,22 @@ export const applications: IApplications = <const>{
       } as IModelAssessmentDataSet
     },
     versions: { "1": 1, "2:Static-View": 2 }
+  },
+  modelAssessmentVision: {
+    datasets: {
+      visionModelExplanationData: {
+        classDimension: 3,
+        dataset: {
+          categorical_features: visionData.categorical_features,
+          class_names: visionData.class_names!,
+          feature_names: visionData.feature_names,
+          features: visionData.features!,
+          images: visionData.images!,
+          predicted_y: visionData.predicted_y!,
+          true_y: visionData.true_y
+        }
+      } as IModelAssessmentDataSet
+    },
+    versions: { "1": 1, "2:Static-View": 2 }
   }
 };

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

@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ITheme } from "@fluentui/react";
+import { HelpMessageDict } from "@responsible-ai/error-analysis";
+import { Language } from "@responsible-ai/localization";
+import {
+  ModelAssessmentDashboard,
+  IModelAssessmentDashboardProps,
+  IModelAssessmentData
+} from "@responsible-ai/model-assessment";
+import React from "react";
+
+interface IAppProps extends IModelAssessmentData {
+  theme: ITheme;
+  language: Language;
+  version: 1 | 2;
+  classDimension?: 1 | 2 | 3;
+  featureFlights?: string[];
+}
+
+export class App extends React.Component<IAppProps> {
+  private messages: HelpMessageDict = {
+    LocalExpAndTestReq: [{ displayText: "LocalExpAndTestReq", format: "text" }],
+    LocalOrGlobalAndTestReq: [
+      { displayText: "LocalOrGlobalAndTestReq", format: "text" }
+    ],
+    PredictorReq: [{ displayText: "PredictorReq", format: "text" }],
+    TestReq: [{ displayText: "TestReq", format: "text" }]
+  };
+
+  public render(): React.ReactNode {
+    if (this.props.modelExplanationData) {
+      for (const exp of this.props.modelExplanationData) {
+        exp.modelClass = "blackbox";
+      }
+    }
+    const modelAssessmentDashboardProps: IModelAssessmentDashboardProps = {
+      ...this.props,
+      locale: this.props.language,
+      localUrl: "https://www.bing.com/",
+      stringParams: { contextualHelp: this.messages },
+      theme: this.props.theme
+    };
+
+    return <ModelAssessmentDashboard {...modelAssessmentDashboardProps} />;
+  }
+}