clean up dataset explorer (#1721)

* clean up dataset explorer Signed-off-by: Ke Xu <xuke@microsoft.com> * add tong and ruby to app code owner Signed-off-by: Ke Xu <xuke@microsoft.com> Signed-off-by: Ke Xu <xuke@microsoft.com>
microsoft · Sep 15, 2022 · 8f1161c · 8f1161c
1 parent 85d8c60
commit 8f1161c
Show file tree

Hide file tree

Showing 25 changed files with 235 additions and 348 deletions.
diff --git a/.eslintrc/.eslintrc.custom.eslintrc b/.eslintrc/.eslintrc.custom.eslintrc
@@ -208,7 +208,14 @@
     "no-octal-escape": "error",
     "no-redeclare": "error",
     "no-regex-spaces": "error",
-    "no-restricted-syntax": ["error", "WithStatement"],
+    "no-restricted-syntax": [
+      "error",
+      "WithStatement",
+      {
+        "message": "Please don't use bind. Prefer use arrow function.",
+        "selector": "MemberExpression > Identifier[name='bind']"
+      }
+    ],
     "no-script-url": "error",
     "no-self-assign": "error",
     "no-self-compare": "error",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -45,6 +45,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "cSpell.words": [
+    "abbridged",
     "automl",
     "bdist",
     "bgcolor",

diff --git a/CODEOWNERS b/CODEOWNERS
@@ -8,7 +8,7 @@
 /responsibleai @gaugup @imatiach-msft @xuke444 @kicha0 @RubyZ10 @vinuthakaranth @tongyu-microsoft
 
 # App
-/apps @xuke444 @vinuthakaranth @romanlutz
+/apps @tongyu-microsoft @romanlutz @vinuthakaranth @xuke444 @RubyZ10
 
 #causal ui
 /libs/causality @tongyu-microsoft @romanlutz @vinuthakaranth @xuke444 @RubyZ10

diff --git a/apps/dashboard/.eslintrc.json b/apps/dashboard/.eslintrc.json
@@ -4,15 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "no-restricted-syntax": [
-          "error",
-          {
-            "message": "Please don't use bind. Prefer use arrow function.",
-            "selector": "MemberExpression > Identifier[name='bind']"
-          }
-        ]
-      }
+      "rules": {}
     },
     {
       "files": ["main.tsx"],

diff --git a/libs/causality/.eslintrc.json b/libs/causality/.eslintrc.json
@@ -4,15 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "no-restricted-syntax": [
-          "error",
-          {
-            "message": "Please don't use bind. Prefer use arrow function.",
-            "selector": "MemberExpression > Identifier[name='bind']"
-          }
-        ]
-      }
+      "rules": {}
     },
     {
       "files": ["*.ts", "*.tsx"],

diff --git a/...lysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualChart.tsx b/...lysisDashboard/Controls/CausalAnalysisView/CausalIndividualView/CausalIndividualChart.tsx
@@ -126,7 +126,6 @@ export class CausalIndividualChart extends React.PureComponent<
                           this.state.chartProps.yAxis.property
                         ].label
                       }
-                      jointDataset={this.context.jointDataset}
                       orderedGroupTitles={[
                         ColumnCategories.Index,
                         ColumnCategories.Dataset,
@@ -139,7 +138,6 @@ export class CausalIndividualChart extends React.PureComponent<
                         this.state.chartProps.chartType === ChartTypes.Scatter
                       }
                       onAccept={this.onYSet}
-                      telemetryHook={this.props.telemetryHook}
                     />
                   </div>
                 </Stack.Item>
@@ -168,7 +166,6 @@ export class CausalIndividualChart extends React.PureComponent<
                       this.state.chartProps.xAxis.property
                     ].label
                   }
-                  jointDataset={this.context.jointDataset}
                   orderedGroupTitles={[
                     ColumnCategories.Index,
                     ColumnCategories.Dataset,
@@ -187,7 +184,6 @@ export class CausalIndividualChart extends React.PureComponent<
                     this.state.chartProps.chartType === ChartTypes.Scatter
                   }
                   onAccept={this.onXSet}
-                  telemetryHook={this.props.telemetryHook}
                 />
               </div>
             </Stack>

diff --git a/libs/core-ui/.eslintrc.json b/libs/core-ui/.eslintrc.json
@@ -4,15 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "no-restricted-syntax": [
-          "error",
-          {
-            "message": "Please don't use bind. Prefer use arrow function.",
-            "selector": "MemberExpression > Identifier[name='bind']"
-          }
-        ]
-      }
+      "rules": {}
     },
     {
       "files": ["*.ts", "*.tsx"],

diff --git a/libs/core-ui/src/lib/components/AxisConfig.tsx b/libs/core-ui/src/lib/components/AxisConfig.tsx
@@ -5,23 +5,19 @@ import { DefaultButton } from "@fluentui/react";
 import React from "react";
 
 import { ISelectorConfig } from "../util/IGenericChartProps";
-import { ITelemetryEvent } from "../util/ITelemetryEvent";
-import { JointDataset } from "../util/JointDataset";
 import { ColumnCategories } from "../util/JointDatasetUtils";
 
 import { AxisConfigDialog } from "./AxisConfigDialog";
 
 export interface IAxisConfigProps {
   buttonText: string;
   buttonTitle: string;
-  jointDataset: JointDataset;
   orderedGroupTitles: ColumnCategories[];
   selectedColumn: ISelectorConfig;
   canBin: boolean;
   mustBin: boolean;
   canDither: boolean;
   onAccept: (newConfig: ISelectorConfig) => void;
-  telemetryHook?: (message: ITelemetryEvent) => void;
 }
 
 export interface IAxisConfigState {
@@ -49,14 +45,12 @@ export class AxisConfig extends React.PureComponent<
         {this.state.dialogOpen && (
           <AxisConfigDialog
             onCancel={this.setClose}
-            jointDataset={this.props.jointDataset}
             orderedGroupTitles={this.props.orderedGroupTitles}
             selectedColumn={this.props.selectedColumn}
             canBin={this.props.canBin}
             mustBin={this.props.mustBin}
             canDither={this.props.canDither}
             onAccept={this.onAccept}
-            telemetryHook={this.props.telemetryHook}
           />
         )}
       </>

diff --git a/libs/core-ui/src/lib/components/AxisConfigDialog.tsx b/libs/core-ui/src/lib/components/AxisConfigDialog.tsx
@@ -18,8 +18,12 @@ import _ from "lodash";
 import React from "react";
 
 import { cohortKey } from "../cohortKey";
+import {
+  ModelAssessmentContext,
+  defaultModelAssessmentContext
+} from "../Context/ModelAssessmentContext";
 import { ISelectorConfig } from "../util/IGenericChartProps";
-import { ITelemetryEvent, TelemetryLevels } from "../util/ITelemetryEvent";
+import { TelemetryLevels } from "../util/ITelemetryEvent";
 import { JointDataset } from "../util/JointDataset";
 import { ColumnCategories } from "../util/JointDatasetUtils";
 import { TelemetryEventName } from "../util/TelemetryEventName";
@@ -33,71 +37,73 @@ import {
 } from "./AxisConfigDialogUtils";
 
 export interface IAxisConfigDialogProps {
-  jointDataset: JointDataset;
   orderedGroupTitles: ColumnCategories[];
   selectedColumn: ISelectorConfig;
   canBin: boolean;
   mustBin: boolean;
   canDither: boolean;
   onAccept: (newConfig: ISelectorConfig) => void;
   onCancel: () => void;
-  telemetryHook?: (message: ITelemetryEvent) => void;
 }
 
 export interface IAxisConfigDialogState {
   selectedColumn: ISelectorConfig;
   binCount?: number;
   selectedFilterGroup?: string;
+  dataArray: IComboBoxOption[];
+  classArray: IComboBoxOption[];
 }
 
 export class AxisConfigDialog extends React.PureComponent<
   IAxisConfigDialogProps,
   IAxisConfigDialogState
 > {
+  public static contextType = ModelAssessmentContext;
   private static readonly MIN_HIST_COLS = 2;
   private static readonly MAX_HIST_COLS = 40;
   private static readonly DEFAULT_BIN_COUNT = 5;
 
-  private readonly dataArray: IComboBoxOption[] = new Array(
-    this.props.jointDataset.datasetFeatureCount
-  )
-    .fill(0)
-    .map((_, index) => {
-      const key = JointDataset.DataLabelRoot + index.toString();
-      return {
-        key,
-        text: this.props.jointDataset.metaDict[key].abbridgedLabel
-      };
-    });
-  private readonly classArray: IComboBoxOption[] = new Array(
-    this.props.jointDataset.predictionClassCount
-  )
-    .fill(0)
-    .map((_, index) => {
-      const key = JointDataset.ProbabilityYRoot + index.toString();
-      return {
-        key,
-        text: this.props.jointDataset.metaDict[key].abbridgedLabel
-      };
-    });
-  public constructor(props: IAxisConfigDialogProps) {
-    super(props);
-    this.state = {
+  public context: React.ContextType<typeof ModelAssessmentContext> =
+    defaultModelAssessmentContext;
+
+  public componentDidMount(): void {
+    this.setState({
       binCount: getBinCountForProperty(
-        this.props.jointDataset.metaDict[this.props.selectedColumn.property],
+        this.context.jointDataset.metaDict[this.props.selectedColumn.property],
         this.props.canBin,
         AxisConfigDialog.DEFAULT_BIN_COUNT
       ),
+      classArray: new Array(this.context.jointDataset.predictionClassCount)
+        .fill(0)
+        .map((_, index) => {
+          const key = JointDataset.ProbabilityYRoot + index.toString();
+          return {
+            key,
+            text: this.context.jointDataset.metaDict[key].abbridgedLabel
+          };
+        }),
+      dataArray: new Array(this.context.jointDataset.datasetFeatureCount)
+        .fill(0)
+        .map((_, index) => {
+          const key = JointDataset.DataLabelRoot + index.toString();
+          return {
+            key,
+            text: this.context.jointDataset.metaDict[key].abbridgedLabel
+          };
+        }),
       selectedColumn: _.cloneDeep(this.props.selectedColumn),
       selectedFilterGroup: extractSelectionKey(
         this.props.selectedColumn.property
       )
-    };
+    });
   }
 
   public render(): React.ReactNode {
+    if (!this.state) {
+      return React.Fragment;
+    }
     const selectedMeta =
-      this.props.jointDataset.metaDict[this.state.selectedColumn.property];
+      this.context.jointDataset.metaDict[this.state.selectedColumn.property];
     const isDataColumn = this.state.selectedColumn.property.includes(
       JointDataset.DataLabelRoot
     );
@@ -119,6 +125,7 @@ export class AxisConfigDialog extends React.PureComponent<
           <Stack.Item>
             <AxisConfigChoiceGroup
               {...this.props}
+              jointDataset={this.context.jointDataset}
               defaultBinCount={AxisConfigDialog.DEFAULT_BIN_COUNT}
               selectedFilterGroup={this.state.selectedFilterGroup}
               onBinCountUpdated={this.onBinCountUpdated}
@@ -145,7 +152,7 @@ export class AxisConfigDialog extends React.PureComponent<
               <Stack>
                 {isDataColumn && (
                   <ComboBox
-                    options={this.dataArray}
+                    options={this.state.dataArray}
                     onChange={this.setSelectedProperty}
                     label={
                       localization.Interpret.AxisConfigDialog.selectFeature
@@ -155,7 +162,7 @@ export class AxisConfigDialog extends React.PureComponent<
                 )}
                 {isProbabilityColumn && (
                   <ComboBox
-                    options={this.classArray}
+                    options={this.state.classArray}
                     onChange={this.setSelectedProperty}
                     label={localization.Interpret.AxisConfigDialog.selectClass}
                     selectedKey={this.state.selectedColumn.property}
@@ -175,6 +182,7 @@ export class AxisConfigDialog extends React.PureComponent<
                   )}
                 <AxisConfigBinOptions
                   {...this.props}
+                  jointDataset={this.context.jointDataset}
                   defaultBinCount={AxisConfigDialog.DEFAULT_BIN_COUNT}
                   maxHistCols={AxisConfigDialog.MAX_HIST_COLS}
                   minHistCols={AxisConfigDialog.MIN_HIST_COLS}
@@ -224,7 +232,7 @@ export class AxisConfigDialog extends React.PureComponent<
     if (checked === undefined) {
       return;
     }
-    this.props.jointDataset.setTreatAsCategorical(
+    this.context.jointDataset.setTreatAsCategorical(
       this.state.selectedColumn.property,
       checked
     );
@@ -236,13 +244,13 @@ export class AxisConfigDialog extends React.PureComponent<
 
   private readonly saveState = (): void => {
     if (this.state.binCount) {
-      this.props.jointDataset.addBin(
+      this.context.jointDataset.addBin(
         this.state.selectedColumn.property,
         this.state.binCount
       );
     }
     this.props.onAccept(this.state.selectedColumn);
-    this.props.telemetryHook?.({
+    this.context.telemetryHook?.({
       level: TelemetryLevels.ButtonClick,
       type: TelemetryEventName.NewAxisConfigSelected
     });
@@ -251,9 +259,9 @@ export class AxisConfigDialog extends React.PureComponent<
   private setDefaultStateForKey(property: string): void {
     const dither =
       this.props.canDither &&
-      this.props.jointDataset.metaDict[property]?.treatAsCategorical;
+      this.context.jointDataset.metaDict[property]?.treatAsCategorical;
     const binCount = getBinCountForProperty(
-      this.props.jointDataset.metaDict[property],
+      this.context.jointDataset.metaDict[property],
       this.props.canBin,
       AxisConfigDialog.DEFAULT_BIN_COUNT
     );

diff --git a/libs/core-ui/src/lib/components/OverallMetricChart.tsx b/libs/core-ui/src/lib/components/OverallMetricChart.tsx
@@ -121,7 +121,6 @@ export class OverallMetricChart extends React.PureComponent<
         <div className={classNames.chartWithAxes} id={this.chartAndConfigsId}>
           {this.state.yDialogOpen && (
             <AxisConfigDialog
-              jointDataset={this.context.jointDataset}
               orderedGroupTitles={[
                 ColumnCategories.Cohort,
                 ColumnCategories.Dataset
@@ -138,20 +137,17 @@ export class OverallMetricChart extends React.PureComponent<
               canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
               onAccept={this.onYSet}
               onCancel={this.setYClose}
-              telemetryHook={this.props.telemetryHook}
             />
           )}
           {this.state.xDialogOpen && (
             <AxisConfigDialog
-              jointDataset={this.context.jointDataset}
               orderedGroupTitles={[ColumnCategories.Outcome]}
               selectedColumn={this.state.chartProps.xAxis}
               canBin={false}
               mustBin={false}
               canDither={this.state.chartProps.chartType === ChartTypes.Scatter}
               onAccept={this.onXSet}
               onCancel={this.setXClose}
-              telemetryHook={this.props.telemetryHook}
             />
           )}
           <div className={classNames.chartWithVertical}>

diff --git a/libs/counterfactuals/.eslintrc.json b/libs/counterfactuals/.eslintrc.json
@@ -4,15 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {
-        "no-restricted-syntax": [
-          "error",
-          {
-            "message": "Please don't use bind. Prefer use arrow function.",
-            "selector": "MemberExpression > Identifier[name='bind']"
-          }
-        ]
-      }
+      "rules": {}
     },
     {
       "files": ["*.ts", "*.tsx"],