add few react lint rule (#529)

"react/no-multi-comp": only one component is allow in one file.
"react/no-this-in-sfc": no "this" keyword is allowed in function component
"react/no-unsafe": no unsafe react lifecycle function.
"react/no-unused-prop-types": no unused props
"react/no-unused-state": no unused stated
"react/self-closing-comp": use self closing tag if no children exist.
"react/sort-prop-types": sort props
"react/state-in-constructor": state can only defined in constructor not private property.
"react/jsx-boolean-value": omit "true" when pass boolean value to react element

.eslintrc.json

@@ -5,305 +5,25 @@
   "globals": {
     "JSX": "readonly"
   },
-  "overrides": [
+  "extends": [
-    {
+    "plugin:@nrwl/nx/typescript",
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+    "plugin:@nrwl/nx/javascript",
-      "extends": [
+    "./.eslintrc/.eslintrc.comments.eslintrc",
-        "plugin:@nrwl/nx/typescript",
+    "./.eslintrc/.eslintrc.filenames.eslintrc",
-        "plugin:@nrwl/nx/javascript",
+    "./.eslintrc/.eslintrc.react.eslintrc",
-        "./.eslintrc.comments.eslintrc",
+    "./.eslintrc/.eslintrc.import.eslintrc",
-        "./.eslintrc.filenames.eslintrc",
+    "./.eslintrc/.eslintrc.typescript.eslintrc",
-        "./.eslintrc.react.eslintrc",
+    "./.eslintrc/.eslintrc.unicorn.eslintrc",
-        "./.eslintrc.import.eslintrc",
+    "./.eslintrc/.eslintrc.custom.eslintrc"
-        "./.eslintrc.typescript.eslintrc",
+  ],
-        "./.eslintrc.unicorn.eslintrc"
+  "env": {
-      ],
+    "browser": true,
-      "env": {
+    "commonjs": true,
-        "browser": true,
+    "es6": true,
-        "commonjs": true,
+    "jest": true,
-        "es6": true,
+    "node": true
-        "jest": true,
+  },
-        "node": true
+  "parserOptions": {
-      },
+    "project": "./tsconfig.*?.json"
-      "parserOptions": {
+  }
-        "project": "./tsconfig.*?.json"
-      },
-      "plugins": ["header", "sort-keys-fix"],
-      "rules": {
-        "sort-keys-fix/sort-keys-fix": [
-          "error",
-          "asc",
-          {
-            "caseSensitive": false,
-            "natural": true
-          }
-        ],
-        "header/header": [
-          "error",
-          "line",
-          [
-            " Copyright (c) Microsoft Corporation.",
-            " Licensed under the MIT License."
-          ],
-          2
-        ],
-        "camelcase": [
-          "error",
-          {
-            "allow": [
-              "accuracy_score",
-              "accuracy_score_difference",
-              "accuracy_score_min",
-              "accuracy_score_ratio",
-              "balanced_accuracy_score",
-              "balanced_accuracy_score_min",
-              "balanced_root_mean_squared_error",
-              "demographic_parity_difference",
-              "demographic_parity_ratio",
-              "equalized_odds_difference",
-              "equalized_odds_ratio",
-              "error_rate_difference",
-              "error_rate_ratio",
-              "error_y",
-              "f1_score",
-              "f1_score_min",
-              "fallout_rate",
-              "false_negative_rate",
-              "false_negative_rate_difference",
-              "false_negative_rate_ratio",
-              "false_positive_rate",
-              "false_positive_rate_difference",
-              "false_positive_rate_ratio",
-              "feature_list",
-              "log_loss",
-              "lower_bounds",
-              "max_error",
-              "mean_absolute_error",
-              "mean_absolute_error_min",
-              "mean_squared_error",
-              "mean_squared_error_min",
-              "mean_squared_log_error",
-              "median_absolute_error",
-              "miss_rate",
-              "plot_bgcolor",
-              "precision_score",
-              "r2_score",
-              "r2_score_min",
-              "recall_score",
-              "recall_score_min",
-              "rms_error",
-              "roc_auc_score_min",
-              "root_mean_squared_error",
-              "scores_range",
-              "selection_rate",
-              "shap_deep",
-              "shap_kernel",
-              "shap_tree",
-              "specificity_score",
-              "true_negative_rate_difference",
-              "true_negative_rate_ratio",
-              "true_positive_rate_difference",
-              "true_positive_rate_ratio",
-              "upper_bounds",
-              "zero_one_loss"
-            ]
-          }
-        ],
-        "complexity": "warn",
-        "curly": ["error", "all"],
-        "max-lines": "warn",
-        "no-else-return": "error",
-        "no-useless-call": "error",
-        "object-shorthand": "error",
-        "no-lonely-if": "error",
-        "no-extra-semi": "error",
-        "quotes": [
-          "error",
-          "double",
-          {
-            "avoidEscape": true
-          }
-        ],
-        "no-duplicate-imports": "error",
-        "array-callback-return": "error",
-        "dot-location": ["error", "property"],
-        "eqeqeq": ["error", "smart"],
-        "new-parens": "error",
-        "no-caller": "error",
-        "no-cond-assign": ["error", "except-parens"],
-        "no-const-assign": "error",
-        "no-control-regex": "error",
-        "no-delete-var": "error",
-        "no-dupe-args": "error",
-        "no-dupe-keys": "error",
-        "no-duplicate-case": "error",
-        "no-empty-character-class": "error",
-        "no-empty-pattern": "error",
-        "no-eval": "error",
-        "no-ex-assign": "error",
-        "no-extend-native": "error",
-        "no-extra-bind": "error",
-        "no-extra-label": "error",
-        "no-fallthrough": "error",
-        "no-func-assign": "error",
-        "no-implied-eval": "error",
-        "no-invalid-regexp": "error",
-        "no-iterator": "error",
-        "no-label-var": "error",
-        "no-labels": [
-          "error",
-          {
-            "allowLoop": true,
-            "allowSwitch": false
-          }
-        ],
-        "no-lone-blocks": "error",
-        "no-loop-func": "error",
-        "no-mixed-operators": [
-          "error",
-          {
-            "groups": [
-              ["&", "|", "^", "~", "<<", ">>", ">>>"],
-              ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
-              ["&&", "||"],
-              ["in", "instanceof"]
-            ],
-            "allowSamePrecedence": false
-          }
-        ],
-        "no-multi-str": "error",
-        "no-native-reassign": "error",
-        "no-negated-in-lhs": "error",
-        "no-new-func": "error",
-        "no-new-object": "error",
-        "no-new-symbol": "error",
-        "no-new-wrappers": "error",
-        "no-obj-calls": "error",
-        "no-octal": "error",
-        "no-octal-escape": "error",
-        "no-redeclare": "error",
-        "no-regex-spaces": "error",
-        "no-restricted-syntax": ["error", "WithStatement"],
-        "no-script-url": "error",
-        "no-self-assign": "error",
-        "no-self-compare": "error",
-        "no-sequences": "error",
-        "no-shadow-restricted-names": "error",
-        "no-sparse-arrays": "error",
-        "no-template-curly-in-string": "error",
-        "no-this-before-super": "error",
-        "no-throw-literal": "error",
-        "no-restricted-globals": [
-          "error",
-          "addEventListener",
-          "blur",
-          "close",
-          "closed",
-          "confirm",
-          "defaultStatus",
-          "defaultstatus",
-          "event",
-          "external",
-          "find",
-          "focus",
-          "frameElement",
-          "frames",
-          "history",
-          "innerHeight",
-          "innerWidth",
-          "length",
-          "location",
-          "locationbar",
-          "menubar",
-          "moveBy",
-          "moveTo",
-          "name",
-          "onblur",
-          "onerror",
-          "onfocus",
-          "onload",
-          "onresize",
-          "onunload",
-          "open",
-          "opener",
-          "opera",
-          "outerHeight",
-          "outerWidth",
-          "pageXOffset",
-          "pageYOffset",
-          "parent",
-          "print",
-          "removeEventListener",
-          "resizeBy",
-          "resizeTo",
-          "screen",
-          "screenLeft",
-          "screenTop",
-          "screenX",
-          "screenY",
-          "scroll",
-          "scrollbars",
-          "scrollBy",
-          "scrollTo",
-          "scrollX",
-          "scrollY",
-          "self",
-          "status",
-          "statusbar",
-          "stop",
-          "toolbar",
-          "top"
-        ],
-        "no-unexpected-multiline": "error",
-        "no-unreachable": "error",
-        "no-unused-expressions": [
-          "error",
-          {
-            "allowShortCircuit": true,
-            "allowTernary": true,
-            "allowTaggedTemplates": true
-          }
-        ],
-        "no-unused-labels": "error",
-        "no-useless-computed-key": "error",
-        "no-useless-concat": "error",
-        "no-useless-escape": "error",
-        "no-useless-rename": [
-          "error",
-          {
-            "ignoreDestructuring": false,
-            "ignoreImport": false,
-            "ignoreExport": false
-          }
-        ],
-        "no-with": "error",
-        "no-whitespace-before-property": "error",
-        "require-yield": "error",
-        "rest-spread-spacing": ["error", "never"],
-        "strict": ["error", "never"],
-        "unicode-bom": ["error", "never"],
-        "use-isnan": "error",
-        "valid-typeof": "error",
-        "no-restricted-properties": [
-          "error",
-          {
-            "object": "require",
-            "property": "ensure",
-            "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
-          },
-          {
-            "object": "System",
-            "property": "import",
-            "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
-          }
-        ],
-        "getter-return": "error",
-        "default-case": "error",
-        "no-undef": "error",
-        "no-array-constructor": "error",
-        "no-unused-vars": "error",
-        "no-useless-constructor": "error"
-      }
-    }
-  ]
 }

.eslintrc/.eslintrc.custom.eslintrc

@@ -0,0 +1,288 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/typescript",
+    "plugin:@nrwl/nx/javascript",
+    "./.eslintrc.comments.eslintrc",
+    "./.eslintrc.filenames.eslintrc",
+    "./.eslintrc.react.eslintrc",
+    "./.eslintrc.import.eslintrc",
+    "./.eslintrc.typescript.eslintrc",
+    "./.eslintrc.unicorn.eslintrc"
+  ],
+  "plugins": ["header", "sort-keys-fix"],
+  "rules": {
+    "sort-keys-fix/sort-keys-fix": [
+      "error",
+      "asc",
+      {
+        "caseSensitive": false,
+        "natural": true
+      }
+    ],
+    "header/header": [
+      "error",
+      "line",
+      [
+        " Copyright (c) Microsoft Corporation.",
+        " Licensed under the MIT License."
+      ],
+      2
+    ],
+    "camelcase": [
+      "error",
+      {
+        "allow": [
+          "accuracy_score",
+          "accuracy_score_difference",
+          "accuracy_score_min",
+          "accuracy_score_ratio",
+          "balanced_accuracy_score",
+          "balanced_accuracy_score_min",
+          "balanced_root_mean_squared_error",
+          "demographic_parity_difference",
+          "demographic_parity_ratio",
+          "equalized_odds_difference",
+          "equalized_odds_ratio",
+          "error_rate_difference",
+          "error_rate_ratio",
+          "error_y",
+          "f1_score",
+          "f1_score_min",
+          "fallout_rate",
+          "false_negative_rate",
+          "false_negative_rate_difference",
+          "false_negative_rate_ratio",
+          "false_positive_rate",
+          "false_positive_rate_difference",
+          "false_positive_rate_ratio",
+          "feature_list",
+          "log_loss",
+          "lower_bounds",
+          "max_error",
+          "mean_absolute_error",
+          "mean_absolute_error_min",
+          "mean_squared_error",
+          "mean_squared_error_min",
+          "mean_squared_log_error",
+          "median_absolute_error",
+          "miss_rate",
+          "plot_bgcolor",
+          "precision_score",
+          "r2_score",
+          "r2_score_min",
+          "recall_score",
+          "recall_score_min",
+          "rms_error",
+          "roc_auc_score_min",
+          "root_mean_squared_error",
+          "scores_range",
+          "selection_rate",
+          "shap_deep",
+          "shap_kernel",
+          "shap_tree",
+          "specificity_score",
+          "true_negative_rate_difference",
+          "true_negative_rate_ratio",
+          "true_positive_rate_difference",
+          "true_positive_rate_ratio",
+          "upper_bounds",
+          "zero_one_loss"
+        ]
+      }
+    ],
+    "complexity": "warn",
+    "curly": ["error", "all"],
+    "max-lines": "warn",
+    "no-else-return": "error",
+    "no-useless-call": "error",
+    "object-shorthand": "error",
+    "no-lonely-if": "error",
+    "no-extra-semi": "error",
+    "quotes": [
+      "error",
+      "double",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "no-duplicate-imports": "error",
+    "array-callback-return": "error",
+    "dot-location": ["error", "property"],
+    "eqeqeq": ["error", "smart"],
+    "new-parens": "error",
+    "no-caller": "error",
+    "no-cond-assign": ["error", "except-parens"],
+    "no-const-assign": "error",
+    "no-control-regex": "error",
+    "no-delete-var": "error",
+    "no-dupe-args": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-empty-character-class": "error",
+    "no-empty-pattern": "error",
+    "no-eval": "error",
+    "no-ex-assign": "error",
+    "no-extend-native": "error",
+    "no-extra-bind": "error",
+    "no-extra-label": "error",
+    "no-fallthrough": "error",
+    "no-func-assign": "error",
+    "no-implied-eval": "error",
+    "no-invalid-regexp": "error",
+    "no-iterator": "error",
+    "no-label-var": "error",
+    "no-labels": [
+      "error",
+      {
+        "allowLoop": true,
+        "allowSwitch": false
+      }
+    ],
+    "no-lone-blocks": "error",
+    "no-loop-func": "error",
+    "no-mixed-operators": [
+      "error",
+      {
+        "groups": [
+          ["&", "|", "^", "~", "<<", ">>", ">>>"],
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+          ["&&", "||"],
+          ["in", "instanceof"]
+        ],
+        "allowSamePrecedence": false
+      }
+    ],
+    "no-multi-str": "error",
+    "no-native-reassign": "error",
+    "no-negated-in-lhs": "error",
+    "no-new-func": "error",
+    "no-new-object": "error",
+    "no-new-symbol": "error",
+    "no-new-wrappers": "error",
+    "no-obj-calls": "error",
+    "no-octal": "error",
+    "no-octal-escape": "error",
+    "no-redeclare": "error",
+    "no-regex-spaces": "error",
+    "no-restricted-syntax": ["error", "WithStatement"],
+    "no-script-url": "error",
+    "no-self-assign": "error",
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-shadow-restricted-names": "error",
+    "no-sparse-arrays": "error",
+    "no-template-curly-in-string": "error",
+    "no-this-before-super": "error",
+    "no-throw-literal": "error",
+    "no-restricted-globals": [
+      "error",
+      "addEventListener",
+      "blur",
+      "close",
+      "closed",
+      "confirm",
+      "defaultStatus",
+      "defaultstatus",
+      "event",
+      "external",
+      "find",
+      "focus",
+      "frameElement",
+      "frames",
+      "history",
+      "innerHeight",
+      "innerWidth",
+      "length",
+      "location",
+      "locationbar",
+      "menubar",
+      "moveBy",
+      "moveTo",
+      "name",
+      "onblur",
+      "onerror",
+      "onfocus",
+      "onload",
+      "onresize",
+      "onunload",
+      "open",
+      "opener",
+      "opera",
+      "outerHeight",
+      "outerWidth",
+      "pageXOffset",
+      "pageYOffset",
+      "parent",
+      "print",
+      "removeEventListener",
+      "resizeBy",
+      "resizeTo",
+      "screen",
+      "screenLeft",
+      "screenTop",
+      "screenX",
+      "screenY",
+      "scroll",
+      "scrollbars",
+      "scrollBy",
+      "scrollTo",
+      "scrollX",
+      "scrollY",
+      "self",
+      "status",
+      "statusbar",
+      "stop",
+      "toolbar",
+      "top"
+    ],
+    "no-unexpected-multiline": "error",
+    "no-unreachable": "error",
+    "no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-unused-labels": "error",
+    "no-useless-computed-key": "error",
+    "no-useless-concat": "error",
+    "no-useless-escape": "error",
+    "no-useless-rename": [
+      "error",
+      {
+        "ignoreDestructuring": false,
+        "ignoreImport": false,
+        "ignoreExport": false
+      }
+    ],
+    "no-with": "error",
+    "no-whitespace-before-property": "error",
+    "require-yield": "error",
+    "rest-spread-spacing": ["error", "never"],
+    "strict": ["error", "never"],
+    "unicode-bom": ["error", "never"],
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "no-restricted-properties": [
+      "error",
+      {
+        "object": "require",
+        "property": "ensure",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      },
+      {
+        "object": "System",
+        "property": "import",
+        "message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+      }
+    ],
+    "getter-return": "error",
+    "default-case": "error",
+    "no-undef": "error",
+    "no-array-constructor": "error",
+    "no-unused-vars": "error",
+    "no-useless-constructor": "error"
+  }
+}

.eslintrc/.eslintrc.react.eslintrc

@@ -11,6 +11,15 @@
     "plugin:react-hooks/recommended"
   ],
   "rules": {
+    "react/no-multi-comp": "error",
+    "react/no-this-in-sfc": "error",
+    "react/no-unsafe": "error",
+    "react/no-unused-prop-types": "error",
+    "react/no-unused-state": "error",
+    "react/self-closing-comp": "error",
+    "react/sort-prop-types": "error",
+    "react/state-in-constructor": "error",
+    "react/jsx-boolean-value": "error",
     "react/forbid-foreign-prop-types": [
       "error",
       {

apps/dashboard/src/app/App.tsx

@@ -140,7 +140,7 @@ export class App extends React.Component<IAppSetting, IAppState> {
             />
           )}
         </div>
-        <Redirect to={generatePath(App.route, this.state)} push={true} />
+        <Redirect to={generatePath(App.route, this.state)} push />
       </>
     );
   }

libs/causality/src/lib/CasualAnalysisDashboard/CausalInsightsTab.tsx

@@ -36,13 +36,13 @@ export class CausalInsightsTab extends React.PureComponent<
 
   public render(): React.ReactNode {
     return (
-      <Stack grow={true} tokens={{ padding: "16px 24px" }}>
+      <Stack grow tokens={{ padding: "16px 24px" }}>
         <Stack horizontal={false} tokens={{ childrenGap: "15px" }}>
           <Text variant={"xLarge"}>
             {localization.CasualAnalysis.MainMenu.header}
           </Text>
         </Stack>
-        <Stack horizontal={true} tokens={{ childrenGap: "10px" }}>
+        <Stack horizontal tokens={{ childrenGap: "10px" }}>
           <Pivot onLinkClick={this.onViewTypeChange}>
             <PivotItem
               itemKey={CasualAnalysisOptions.Aggregate}

libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualAggregateView/CasualAggregateChart.tsx

@@ -31,14 +31,14 @@ export class CasualAggregateChart extends React.PureComponent<
   public render(): React.ReactNode {
     const styles = CasualAggregateStyles();
     return (
-      <Stack horizontal={true} verticalFill={true} className={styles.container}>
+      <Stack horizontal verticalFill className={styles.container}>
-        <Stack.Item grow={true} className={styles.leftPane}>
+        <Stack.Item grow className={styles.leftPane}>
           <AccessibleChart
             plotlyProps={this.generateCasualAggregatePlotlyProps()}
             theme={getTheme()}
           />
         </Stack.Item>
-        <Stack.Item grow={true} className={styles.rightPane}>
+        <Stack.Item grow className={styles.rightPane}>
           <Stack horizontal={false}>
             <Stack.Item className={styles.label}>
               <b>{localization.CasualAnalysis.AggregateView.continuous}</b>

libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualAggregateView/CasualAggregateView.tsx

@@ -31,7 +31,7 @@ export class CasualAggregateView extends React.PureComponent<
   public render(): React.ReactNode {
     const styles = CasualAggregateStyles();
     return (
-      <Stack grow={true} tokens={{ padding: "16px 24px" }}>
+      <Stack grow tokens={{ padding: "16px 24px" }}>
         <Stack horizontal={false} tokens={{ childrenGap: "15px" }}>
           <Text variant={"medium"} className={styles.label}>
             {localization.CasualAnalysis.AggregateView.description}

libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualIndividualView/CasualIndividualChart.tsx

@@ -28,7 +28,6 @@ import {
   getTheme,
   Text,
   DefaultButton,
-  IDropdownOption,
   ComboBox,
   Stack
 } from "office-ui-fabric-react";
@@ -46,13 +45,10 @@ export interface ICasualIndividualChartState {
   chartProps?: IGenericChartProps;
   xDialogOpen: boolean;
   yDialogOpen: boolean;
-  selectedWhatIfRootIndex: number;
   selectedCohortIndex: number;
-  featuresOption: IDropdownOption[];
   selectedPointsIndexes: number[];
   pointIsActive: boolean[];
   customPointIsActive: boolean[];
-  selectedFeatureKey: string;
 }
 
 export class CasualIndividualChart extends React.PureComponent<
@@ -76,43 +72,17 @@ export class CasualIndividualChart extends React.PureComponent<
 
     this.state = {
       customPointIsActive: [],
-      featuresOption: [],
       pointIsActive: [],
       selectedCohortIndex: 0,
-      selectedFeatureKey: JointDataset.DataLabelRoot + "0",
       selectedPointsIndexes: [],
-      selectedWhatIfRootIndex: 0,
       xDialogOpen: false,
       yDialogOpen: false
     };
   }
 
   public componentDidMount(): void {
-    const featuresOption = new Array(
-      this.context.jointDataset.datasetFeatureCount
-    )
-      .fill(0)
-      .map((_, index) => {
-        const key = JointDataset.DataLabelRoot + index.toString();
-        const meta = this.context.jointDataset.metaDict[key];
-        const options = meta.isCategorical
-          ? meta.sortedCategoricalValues?.map((optionText, index) => {
-              return { key: index, text: optionText };
-            })
-          : undefined;
-        return {
-          data: {
-            categoricalOptions: options,
-            fullLabel: meta.label.toLowerCase()
-          },
-          key,
-          text: meta.abbridgedLabel
-        };
-      });
-
     this.setState({
-      chartProps: this.generateDefaultChartAxes(),
+      chartProps: this.generateDefaultChartAxes()
-      featuresOption
     });
   }
 
@@ -264,7 +234,7 @@ export class CasualIndividualChart extends React.PureComponent<
             )}
           </div>
           <div className={classNames.horizontalAxisWithPadding}>
-            <div className={classNames.paddingDiv}></div>
+            <div className={classNames.paddingDiv} />
             <div className={classNames.horizontalAxis}>
               <DefaultButton
                 onClick={this.setXOpen.bind(this, true)}
@@ -324,7 +294,7 @@ export class CasualIndividualChart extends React.PureComponent<
                 }
               ]}
               ariaLabel={"chart type picker"}
-              useComboBoxAsMenuWidth={true}
+              useComboBoxAsMenuWidth
               styles={FabricStyles.smallDropdownStyle}
             />
           </div>
@@ -347,9 +317,6 @@ export class CasualIndividualChart extends React.PureComponent<
       this.stringifiedValues[key] = this.temporaryPoint?.[key].toString();
       this.validationErrors[key] = undefined;
     });
-    this.setState({
-      selectedWhatIfRootIndex: index
-    });
   }
 
   private onXSet = (value: ISelectorConfig): void => {

libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/CasualIndividualView/CasualIndividualView.tsx

@@ -44,7 +44,7 @@ export class CasualIndividualView extends React.PureComponent<
   public render(): React.ReactNode {
     const styles = CasualIndividualStyles();
     return (
-      <Stack grow={true} tokens={{ padding: "16px 24px" }}>
+      <Stack grow tokens={{ padding: "16px 24px" }}>
         <Stack.Item>
           <Text variant={"medium"} className={styles.label}>
             {localization.CasualAnalysis.IndividualView.description}

libs/causality/src/lib/CasualAnalysisDashboard/Controls/CasualAnalysisView/TreatmentView/TreatmentView.tsx

@@ -31,6 +31,10 @@ export class TreatmentView extends React.PureComponent<
   }
 
   public render(): React.ReactNode {
-    return <div>Treatment View</div>;
+    return this.state.showModalHelp ? (
+      <div>Treatment View</div>
+    ) : (
+      <div>Treatment View</div>
+    );
   }
 }

libs/core-ui/src/lib/Cohort/CohortBaseAndFilters/CohortBaseAndFilters.tsx

@@ -32,7 +32,7 @@ export class CohortBaseAndFilters extends React.Component<
     const filters = this.props.cohort.filtersToString().join(", ");
     return (
       <div>
-        <div className={classNames.section}></div>
+        <div className={classNames.section} />
         <div className={classNames.subsection}>
           <div className={classNames.header}>Base cohort and filters</div>
           <Stack horizontal>

libs/core-ui/src/lib/Cohort/CohortBasedComponent.ts

@@ -26,7 +26,10 @@ export abstract class CohortBasedComponent<
   TProps extends ICohortBasedComponentProps,
   TState extends ICohortBasedComponentState
 > extends React.PureComponent<TProps, TState> {
-  public updateSelectedCohort = (
+  protected getSelectedCohort = (): ErrorCohort => {
+    return this.state.selectedCohort;
+  };
+  protected updateSelectedCohort = (
     filters: IFilter[],
     compositeFilters: ICompositeFilter[],
     source: CohortSource = CohortSource.None,

libs/core-ui/src/lib/Cohort/CohortFilters/CohortFilters.tsx

@@ -29,7 +29,7 @@ export class CohortFilters extends React.Component<ICohortFiltersProps> {
     const filters = this.props.cohort.filtersToString().join(", ");
     return (
       <div>
-        <div className={classNames.section}></div>
+        <div className={classNames.section} />
         <div className={classNames.subsection}>
           <div className={classNames.header}>Filters</div>
           <Stack>

libs/core-ui/src/lib/Cohort/CohortInfo/CohortInfo.tsx

@@ -57,7 +57,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
         onDismiss={this.props.onDismiss}
         styles={panelStyles}
       >
-        <div className={classNames.divider}></div>
+        <div className={classNames.divider} />
         <div className={classNames.section}>
           <div className={classNames.subsection}>
             <DefaultButton
@@ -65,7 +65,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
               onClick={(): any => this.props.onSaveCohortClick()}
             />
           </div>
-          <div className={classNames.section}></div>
+          <div className={classNames.section} />
           <div className={classNames.subsection}>
             <div className={classNames.header}>Basic Information</div>
             {this.props.currentCohort.cohort.name !== "All data" && (
@@ -77,7 +77,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
             </div>
           </div>
         </div>
-        <div className={classNames.divider}></div>
+        <div className={classNames.divider} />
         <div className={classNames.section}>
           <div className={classNames.subsection}>
             <div>Instances in base cohort</div>
@@ -128,7 +128,7 @@ export class CohortInfo extends React.PureComponent<ICohortInfoProps> {
             </Stack>
           </div>
         </div>
-        <div className={classNames.divider}></div>
+        <div className={classNames.divider} />
         <div className={classNames.section}>
           <div className={classNames.subsection}>
             <div className={classNames.header}>Prediction path (filters)</div>

libs/core-ui/src/lib/Cohort/CohortList/CohortList.tsx

@@ -108,7 +108,7 @@ export class CohortList extends React.Component<
         onDismiss={this.props.onDismiss}
         styles={panelStyles}
       >
-        <div className={classNames.divider}></div>
+        <div className={classNames.divider} />
         <div className={classNames.section}>
           <div className={classNames.subsection}>
             <div className={classNames.header}>Cohort List</div>
@@ -117,7 +117,7 @@ export class CohortList extends React.Component<
               columns={this.columns}
               setKey="set"
               layoutMode={DetailsListLayoutMode.justified}
-              selectionPreservedOnEmptyClick={true}
+              selectionPreservedOnEmptyClick
               checkboxVisibility={CheckboxVisibility.hidden}
               onRenderItemColumn={this.renderItemColumn.bind(this)}
             />

libs/core-ui/src/lib/Cohort/CohortStats/CohortStats.tsx

@@ -23,7 +23,7 @@ export class CohortStats extends React.Component<ISaveCohortProps> {
     const classNames = cohortStatsStyles();
     return (
       <div>
-        <div className={classNames.section}></div>
+        <div className={classNames.section} />
         <div className={classNames.subsection}>
           <div className={classNames.header}>
             {localization.ErrorAnalysis.cohortInfo}

libs/core-ui/src/lib/Cohort/EditCohort/EditCohort.tsx

@@ -95,8 +95,8 @@ export class EditCohort extends React.Component<
           defaultValue={this.state.cohortName}
           styles={textFieldStyles}
         />
-        <CohortStats temporaryCohort={this.props.errorCohort}></CohortStats>
+        <CohortStats temporaryCohort={this.props.errorCohort} />
-        <CohortFilters cohort={this.props.errorCohort}></CohortFilters>
+        <CohortFilters cohort={this.props.errorCohort} />
         <DialogFooter>
           <Stack
             horizontal

libs/core-ui/src/lib/Cohort/PredictionPath/PredictionPath.tsx

@@ -28,14 +28,14 @@ export class PredictionPath extends React.Component<IPredictionPathProps> {
           <div key={index}>
             <Stack horizontal tokens={alignmentStackTokens}>
               <Stack verticalAlign="center">
-                <i className={classNames.filterCircle}></i>
+                <i className={classNames.filterCircle} />
               </Stack>
               <Stack verticalAlign="center">
                 <div>{filter}</div>
               </Stack>
             </Stack>
             {index !== filters.length - 1 && (
-              <div className={classNames.stepBar}></div>
+              <div className={classNames.stepBar} />
             )}
           </div>
         ))}

libs/core-ui/src/lib/Cohort/SaveCohort/SaveCohort.tsx

@@ -90,11 +90,11 @@ export class SaveCohort extends React.Component<
           defaultValue={allDataCopy}
           styles={textFieldStyles}
         />
-        <CohortStats temporaryCohort={this.props.temporaryCohort}></CohortStats>
+        <CohortStats temporaryCohort={this.props.temporaryCohort} />
         <CohortBaseAndFilters
           cohort={this.props.temporaryCohort}
           baseCohort={this.props.baseCohort}
-        ></CohortBaseAndFilters>
+        />
         <DialogFooter>
           <PrimaryButton
             onClick={(): void => {

libs/core-ui/src/lib/Cohort/ShiftCohort/ShiftCohort.tsx

@@ -108,7 +108,7 @@ export class ShiftCohort extends React.Component<
         />
         <CohortStats
           temporaryCohort={this.state.savedCohorts[this.state.selectedCohort]}
-        ></CohortStats>
+        />
         <DialogFooter>
           <PrimaryButton onClick={this.onApplyClick.bind(this)} text="Apply" />
           <DefaultButton onClick={this.props.onDismiss} text="Cancel" />

libs/core-ui/src/lib/components/AxisConfigDialog.tsx

@@ -150,7 +150,7 @@ export class AxisConfigDialog extends React.PureComponent<
       <Panel
         id="AxisConfigPanel"
         onDismiss={this.props.onCancel}
-        isOpen={true}
+        isOpen
         onRenderFooter={this.renderFooter}
         isFooterAtBottom={false}
         isLightDismiss

libs/core-ui/src/lib/components/SVGToolTip.tsx

@@ -55,7 +55,7 @@ export class SVGToolTip extends React.Component<
           width="80"
           y="0"
           x="0"
-        ></rect>
+        />
         {this.props.children}
       </g>,
       this.state.svgElement

libs/dataset-explorer/src/lib/DatasetExplorerTab.tsx

@@ -41,7 +41,6 @@ export interface IDatasetExplorerTabState {
   yDialogOpen: boolean;
   colorDialogOpen: boolean;
   selectedCohortIndex: number;
-  calloutVisible: boolean;
   chartProps?: IGenericChartProps;
 }
 
@@ -60,7 +59,6 @@ export class DatasetExplorerTab extends React.PureComponent<
     super(props);
 
     this.state = {
-      calloutVisible: false,
       colorDialogOpen: false,
       selectedCohortIndex: 0,
       xDialogOpen: false,
@@ -206,7 +204,7 @@ export class DatasetExplorerTab extends React.PureComponent<
                   ColumnCategories.Outcome
                 ]}
                 selectedColumn={this.state.chartProps.colorAxis}
-                canBin={true}
+                canBin
                 mustBin={false}
                 canDither={false}
                 onAccept={this.onColorSet}
@@ -242,7 +240,7 @@ export class DatasetExplorerTab extends React.PureComponent<
               )}
             </div>
             <div className={classNames.horizontalAxisWithPadding}>
-              <div className={classNames.paddingDiv}></div>
+              <div className={classNames.paddingDiv} />
               <div className={classNames.horizontalAxis}>
                 <div>
                   <DefaultButton

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx

@@ -66,11 +66,11 @@ export class ErrorAnalysisViewTab extends React.PureComponent<
 
   public render(): React.ReactNode {
     return (
-      <Stack grow={true} tokens={{ padding: "16px 24px" }}>
+      <Stack grow tokens={{ padding: "16px 24px" }}>
         <Text variant={"xLarge"}>
           {localization.ErrorAnalysis.MainMenu.errorAnalysisLabel}
         </Text>
-        <Stack horizontal={true} tokens={{ childrenGap: "10px" }}>
+        <Stack horizontal tokens={{ childrenGap: "10px" }}>
           <Pivot onLinkClick={this.props.handleErrorDetectorChanged}>
             <PivotItem
               itemKey={ErrorAnalysisOptions.TreeMap}
@@ -98,7 +98,7 @@ export class ErrorAnalysisViewTab extends React.PureComponent<
           saveFeatures={this.saveFeatures.bind(this)}
           features={this.props.features}
           importances={this.props.importances}
-          isEnabled={true}
+          isEnabled
           selectedFeatures={this.props.features}
         />
       </Stack>

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/FeatureList/FeatureList.tsx

@@ -69,8 +69,6 @@ const checkboxStackTokens: IStackTokens = {
 export interface IFeatureListState {
   searchedFeatures: string[];
   selectedFeatures: string[];
-  percents: number[];
-  sortedFeatures: string[];
   enableApplyButton: boolean;
   lastAppliedFeatures: Set<string>;
   tableState: ITableState;
@@ -103,10 +101,8 @@ export class FeatureList extends React.Component<
     this.state = {
       enableApplyButton: false,
       lastAppliedFeatures: new Set<string>(this.props.features),
-      percents: sortedPercents,
       searchedFeatures,
       selectedFeatures: this.props.selectedFeatures,
-      sortedFeatures,
       tableState
     };
     this.layerHostId = getId("featuresListHost");
@@ -145,9 +141,7 @@ export class FeatureList extends React.Component<
         this.props.isEnabled
       );
       this.setState({
-        percents: sortedPercents,
         searchedFeatures,
-        sortedFeatures,
         tableState
       });
       this.updateSelection();
@@ -211,7 +205,7 @@ export class FeatureList extends React.Component<
                         this,
                         theme
                       )}
-                      selectionPreservedOnEmptyClick={true}
+                      selectionPreservedOnEmptyClick
                       ariaLabelForSelectionColumn="Toggle selection"
                       ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                       checkButtonAriaLabel="Row checkbox"
@@ -254,7 +248,7 @@ export class FeatureList extends React.Component<
     props?: IDetailsRowProps
   ): JSX.Element | null => {
     if (!props) {
-      return <div></div>;
+      return <div />;
     }
     return (
       <DetailsRow rowFieldsAs={this.renderRowFields.bind(this)} {...props} />
@@ -266,7 +260,7 @@ export class FeatureList extends React.Component<
       return <DetailsRowFields {...props} />;
     }
     return (
-      <span data-selection-disabled={true}>
+      <span data-selection-disabled>
         <DetailsRowFields {...props} />
       </span>
     );
@@ -284,7 +278,7 @@ export class FeatureList extends React.Component<
       switch (column.key) {
         case "checkbox":
           if (this.state.selectedFeatures.includes(fieldContent)) {
-            return <Checkbox checked={true} disabled />;
+            return <Checkbox checked disabled />;
           }
           return <Checkbox checked={false} disabled />;
         case "importances":
@@ -296,13 +290,13 @@ export class FeatureList extends React.Component<
                   width="100%"
                   height="4"
                   rx="5"
-                ></rect>
+                />
                 <rect
                   fill={theme.palette.neutralSecondary}
                   width={`${fieldContent}%`}
                   height="4"
                   rx="5"
-                ></rect>
+                />
               </g>
             </svg>
           );
@@ -311,7 +305,7 @@ export class FeatureList extends React.Component<
           return <span>{fieldContent}</span>;
       }
     }
-    return <span></span>;
+    return <span />;
   }
 
   private updateSelection(): void {

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/FilterTooltip/FilterTooltip.tsx

@@ -39,7 +39,7 @@ export class FilterTooltip extends React.Component<IFilterTooltipProps> {
         </g>
         <g>
           <g className={classNames.errorCoverageCell}>
-            <rect className={classNames.metricBarBlack}></rect>
+            <rect className={classNames.metricBarBlack} />
             <g>
               <text className={classNames.smallHeader}>
                 {localization.ErrorAnalysis.errorCoverage}
@@ -50,7 +50,7 @@ export class FilterTooltip extends React.Component<IFilterTooltipProps> {
             </g>
           </g>
           <g className={classNames.errorRateCell}>
-            <rect className={classNames.metricBarRed}></rect>
+            <rect className={classNames.metricBarRed} />
             <g>
               <text className={classNames.smallHeader}>
                 {localization.ErrorAnalysis.errorRate}

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InfoCallout/InfoCallout.tsx

@@ -47,7 +47,7 @@ export class InfoCallout extends React.Component<
         {this.state.isCalloutVisible && (
           <Callout
             target={"#" + this.props.iconId}
-            setInitialFocus={true}
+            setInitialFocus
             onDismiss={this.onDismiss}
             role="alertdialog"
           >

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/InspectionView/InspectionView.tsx

@@ -186,7 +186,7 @@ export class InspectionView extends React.PureComponent<
                     setKey="set"
                     layoutMode={DetailsListLayoutMode.justified}
                     onRenderItemColumn={this.renderItemColumn.bind(this)}
-                    selectionPreservedOnEmptyClick={true}
+                    selectionPreservedOnEmptyClick
                     ariaLabelForSelectionColumn="Toggle selection"
                     ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                     checkButtonAriaLabel="Row checkbox"
@@ -245,14 +245,14 @@ export class InspectionView extends React.PureComponent<
                 height: "100%",
                 width: "20px"
               })}
-            ></div>
+            />
           );
 
         default:
           return <span>{fieldContent}</span>;
       }
     }
-    return <span></span>;
+    return <span />;
   }
 
   private updateViewedFeatureImportances(

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixArea/MatrixArea.tsx

@@ -99,7 +99,7 @@ export class MatrixArea extends React.PureComponent<
       this.state.matrixFeature1 !== this.props.selectedFeature1 ||
       this.state.matrixFeature2 !== this.props.selectedFeature2
     ) {
-      return <div></div>;
+      return <div />;
     }
     const sameFeatureSelected =
       this.props.selectedFeature1 === this.props.selectedFeature2;
@@ -143,13 +143,13 @@ export class MatrixArea extends React.PureComponent<
           <div>
             {this.props.selectedFeature2 !== noFeature && !sameFeatureSelected && (
               <div className={classNames.matrixLabelBottom}>
-                <div className={classNames.matrixLabelTab}></div>
+                <div className={classNames.matrixLabelTab} />
                 <div>{this.props.selectedFeature2}</div>
               </div>
             )}
             {(this.props.selectedFeature2 === noFeature ||
               sameFeatureSelected) && (
-              <div className={classNames.emptyLabelPadding}></div>
+              <div className={classNames.emptyLabelPadding} />
             )}
             <MatrixCells
               jsonMatrix={this.state.jsonMatrix}

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixCells/MatrixCells.tsx

@@ -153,7 +153,7 @@ export class MatrixCells extends React.PureComponent<IMatrixCellsProps> {
                 <div
                   key={`${i}_${j}category1`}
                   className={classNames.matrixCellPivot1Categories}
-                ></div>,
+                />,
                 cellData
               ];
             }

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixFooter/MatrixFooter.tsx

@@ -33,7 +33,7 @@ export class MatrixFooter extends React.PureComponent<IMatrixFooterProps> {
               <div
                 key={`${this.props.matrixLength}_${0}category1`}
                 className={classNames.matrixCellPivot1Categories}
-              ></div>
+              />
               {this.props.category1Values.map((category: any, i: number) => {
                 return (
                   <div
@@ -57,7 +57,7 @@ export class MatrixFooter extends React.PureComponent<IMatrixFooterProps> {
               <div
                 key={`${this.props.matrixLength}_${0}category1`}
                 className={classNames.matrixCellPivot1Categories}
-              ></div>
+              />
               {this.props.category2Values.map((category: any, i: number) => {
                 return (
                   <div

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/MatrixLegend/MatrixLegend.tsx

@@ -54,7 +54,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
           </Text>
           <Stack horizontal>
             <Stack horizontal>
-              <div className={classNames.metricBarBlack}></div>
+              <div className={classNames.metricBarBlack} />
               <Stack tokens={cellTokens}>
                 <div className={classNames.smallHeader}>
                   {localization.ErrorAnalysis.cells}
@@ -62,7 +62,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
                     iconId={this._cellsIconId}
                     infoText={localization.ErrorAnalysis.cellsInfo}
                     title={localization.ErrorAnalysis.cellsTitle}
-                  ></InfoCallout>
+                  />
                 </div>
                 <div className={classNames.valueBlack}>
                   {this.props.selectedCohort.cells === 0
@@ -72,7 +72,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
               </Stack>
             </Stack>
             <Stack horizontal>
-              <div className={classNames.metricBarBlack}></div>
+              <div className={classNames.metricBarBlack} />
               <Stack tokens={cellTokens}>
                 <div className={classNames.smallHeader}>
                   {localization.ErrorAnalysis.errorCoverage}
@@ -80,7 +80,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
                     iconId={this._errorCoverageIconId}
                     infoText={localization.ErrorAnalysis.errorCoverageInfo}
                     title={localization.ErrorAnalysis.errorCoverageTitle}
-                  ></InfoCallout>
+                  />
                 </div>
                 <div className={classNames.valueBlack}>
                   {this.props.selectedCohort.errorCoverage.toFixed(2)}%
@@ -89,7 +89,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
             </Stack>
             <Stack>
               <Stack horizontal>
-                <div className={classNames.metricBarRed}></div>
+                <div className={classNames.metricBarRed} />
                 <Stack tokens={cellTokens}>
                   <div className={classNames.smallHeader}>
                     {localization.ErrorAnalysis.errorRate}
@@ -97,7 +97,7 @@ export class MatrixLegend extends React.Component<IMatrixLegendProps> {
                       iconId={this._errorRateIconId}
                       infoText={localization.ErrorAnalysis.errorRateInfo}
                       title={localization.ErrorAnalysis.errorRateTitle}
-                    ></InfoCallout>
+                    />
                   </div>
                   <div className={classNames.valueBlack}>
                     {this.props.selectedCohort.errorRate.toFixed(2)}%

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/Navigation/Navigation.tsx

@@ -122,7 +122,7 @@ export class Navigation extends React.Component<INavigationProps> {
     item?: IBreadcrumbItem
   ): JSX.Element | null => {
     if (!item) {
-      return <div></div>;
+      return <div />;
     }
     if (item.onClick) {
       return (

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TabularDataView/TabularDataView.tsx

@@ -60,7 +60,7 @@ const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (
   defaultRender
 ) => {
   if (!props) {
-    return <div></div>;
+    return <div />;
   }
   const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = (
     tooltipHostProps
@@ -122,7 +122,7 @@ export class TabularDataView extends React.Component<
                 layoutMode={DetailsListLayoutMode.fixedColumns}
                 constrainMode={ConstrainMode.unconstrained}
                 onRenderDetailsHeader={onRenderDetailsHeader}
-                selectionPreservedOnEmptyClick={true}
+                selectionPreservedOnEmptyClick
                 ariaLabelForSelectionColumn="Toggle selection"
                 ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                 checkButtonAriaLabel="Row checkbox"

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeLegend/TreeLegend.tsx

@@ -37,7 +37,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
           </Text>
           <Stack>
             <Stack horizontal>
-              <div className={classNames.metricBarBlack}></div>
+              <div className={classNames.metricBarBlack} />
               <Stack tokens={cellTokens}>
                 <div className={classNames.smallHeader}>
                   {localization.ErrorAnalysis.errorCoverage}
@@ -45,7 +45,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
                     iconId={this._errorCoverageIconId}
                     infoText={localization.ErrorAnalysis.errorCoverageInfo}
                     title={localization.ErrorAnalysis.errorCoverageTitle}
-                  ></InfoCallout>
+                  />
                 </div>
                 <div className={classNames.valueBlack}>
                   {this.props.selectedCohort.errorCoverage.toFixed(2)}%
@@ -84,7 +84,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
           </Stack>
           <Stack>
             <Stack horizontal>
-              <div className={classNames.metricBarRed}></div>
+              <div className={classNames.metricBarRed} />
               <Stack tokens={cellTokens}>
                 <div className={classNames.smallHeader}>
                   {localization.ErrorAnalysis.errorRate}
@@ -92,7 +92,7 @@ export class TreeLegend extends React.Component<ITreeLegendProps> {
                     iconId={this._errorRateIconId}
                     infoText={localization.ErrorAnalysis.errorRateInfo}
                     title={localization.ErrorAnalysis.errorRateTitle}
-                  ></InfoCallout>
+                  />
                 </div>
                 <div className={classNames.valueBlack}>
                   {this.props.selectedCohort.errorRate.toFixed(2)}%

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewNode.tsx

@@ -24,9 +24,6 @@ export class TreeViewNode extends React.Component<ITreeViewNodeProps> {
   private ref: React.RefObject<SVGGElement>;
   public constructor(props: ITreeViewNodeProps) {
     super(props);
-    this.state = {
-      isMouseOver: false
-    };
     this.ref = React.createRef<SVGGElement>();
   }
   public render(): React.ReactNode {

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/WhatIf/WhatIf.tsx

@@ -117,7 +117,7 @@ export class WhatIf extends React.Component<IWhatIfProps, IWhatIfState> {
         isBlocking={false}
         onDismiss={this.props.onDismiss}
       >
-        <div className={classNames.divider}></div>
+        <div className={classNames.divider} />
         <div className={classNames.section}>
           <div className={classNames.subsection}>
             <WhatIfPanel
@@ -125,7 +125,7 @@ export class WhatIf extends React.Component<IWhatIfProps, IWhatIfState> {
               filterFeatures={this.filterFeatures}
               filteredFeatureList={this.state.filteredFeatureList}
               isPanelOpen={this.props.isOpen}
-              isInPanel={true}
+              isInPanel
               jointDataset={this.context.jointDataset}
               metadata={this.context.modelMetadata}
               openPanel={(): void => {

libs/error-analysis/src/lib/ErrorAnalysisDashboard/ErrorAnalysisDashboard.tsx

@@ -70,7 +70,6 @@ import {
   IMatrixAreaState,
   IMatrixFilterState
 } from "./MatrixFilterState";
-import { ModelExplanationUtils } from "./ModelExplanationUtils";
 import {
   ITreeViewRendererState,
   createInitialTreeViewState
@@ -91,7 +90,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
 
   public constructor(props: IErrorAnalysisDashboardProps) {
     super(props);
-    this.setSortVector = this.setSortVector.bind(this);
     if (this.props.locale) {
       localization.setLanguage(this.props.locale);
     }
@@ -301,7 +299,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
           ? WeightVectors.AbsAvg
           : 0,
       selectedWhatIfIndex: undefined,
-      sortVector: undefined,
       treeViewState: createInitialTreeViewState(),
       viewType: ViewTypeKeys.ErrorAnalysisView,
       weightVectorLabels,
@@ -516,7 +513,7 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
                       selectedKey={this.state.activeGlobalTab}
                       onLinkClick={this.handleGlobalTabClick}
                       linkSize={PivotLinkSize.normal}
-                      headersOnly={true}
+                      headersOnly
                       styles={{ root: classNames.pivotLabelWrapper }}
                     >
                       {this.pivotItems.map((props) => (
@@ -725,14 +722,6 @@ export class ErrorAnalysisDashboard extends React.PureComponent<
     }
   };
 
-  private setSortVector(): void {
-    this.setState({
-      sortVector: ModelExplanationUtils.getSortIndices(
-        this.state.cohorts[0].cohort.calculateAverageImportance()
-      ).reverse()
-    });
-  }
-
   private viewExplanation(): void {
     this.setState({
       openFeatureList: false,

libs/fairness/src/lib/Controls/EmptyHeader.tsx

@@ -12,7 +12,7 @@ export class EmptyHeader extends React.Component {
         horizontalAlign="space-between"
         verticalAlign="center"
         style={{ height: "36px" }}
-      ></Stack>
+      />
     );
   }
 }

libs/fairness/src/lib/Controls/FairnessPicker.tsx

@@ -57,13 +57,13 @@ export class FairnessPicker extends React.PureComponent<
             onChange={this.onFairnessChange}
             options={options}
             ariaLabel={"Fairness selector"}
-            useComboBoxAsMenuWidth={true}
+            useComboBoxAsMenuWidth
           />
         </div>
         {this.state.showCallout && (
           <Callout
             target={"#" + this._fairnessDropdownHelpId}
-            setInitialFocus={true}
+            setInitialFocus
             onDismiss={this.onDismiss}
             role="alertdialog"
           >

libs/fairness/src/lib/Controls/FairnessTab.tsx

@@ -43,7 +43,7 @@ export class FairnessTab extends React.PureComponent<IFairnessTabProps> {
           />
         </Stack>
         <SelectionList
-          grouped={true}
+          grouped
           defaultSelectedKey={
             this.props.fairnessPickerProps.selectedFairnessKey
           }

libs/fairness/src/lib/Controls/FeatureTab.tsx

@@ -35,7 +35,6 @@ export interface IFeatureTabProps extends IWizardTabProps {
 }
 
 interface IState {
-  expandedBins: Set<number>;
   editingFeatureIndex: number | undefined;
 }
 
@@ -56,8 +55,7 @@ export class FeatureTab extends React.PureComponent<IFeatureTabProps, IState> {
       }
     });
     this.state = {
-      editingFeatureIndex: undefined,
+      editingFeatureIndex: undefined
-      expandedBins: new Set<number>()
     };
     this.columns = [
       {
@@ -136,7 +134,7 @@ export class FeatureTab extends React.PureComponent<IFeatureTabProps, IState> {
             columns={this.columns}
             selectionMode={SelectionMode.single}
             selection={this.selection}
-            selectionPreservedOnEmptyClick={true}
+            selectionPreservedOnEmptyClick
             getKey={this.getKey}
             setKey="set"
             layoutMode={DetailsListLayoutMode.justified}

libs/fairness/src/lib/Controls/ModalHelp.tsx

@@ -52,7 +52,7 @@ export class ModalHelp extends React.PureComponent<IModalHelpProps, IState> {
           titleAriaId="intro modal"
           isOpen={this.state?.showModalHelp}
           onDismiss={this.handleCloseModalHelp}
-          isModeless={true}
+          isModeless
           containerClassName={sharedStyles.modalContentHelp}
         >
           <div style={{ display: "flex" }}>

libs/fairness/src/lib/Controls/ModelComparisonChart.tsx

@@ -53,7 +53,6 @@ export interface IModelComparisonProps {
 }
 
 export interface IState {
-  showModalIntro?: boolean;
   showModalHelp?: boolean;
   featureKey?: string;
   performanceKey?: string;
@@ -140,8 +139,7 @@ export class ModelComparisonChart extends React.Component<
     super(props);
     this.state = {
       fairnessKey: this.props.fairnessPickerProps.selectedFairnessKey,
-      performanceKey: this.props.performancePickerProps.selectedPerformanceKey,
+      performanceKey: this.props.performancePickerProps.selectedPerformanceKey
-      showModalIntro: this.props.showIntro
     };
   }
 
@@ -249,7 +247,7 @@ export class ModelComparisonChart extends React.Component<
                 titleAriaId="help modal"
                 isOpen={this.state.showModalHelp}
                 onDismiss={this.handleCloseModalHelp}
-                isModeless={true}
+                isModeless
                 containerClassName={styles.modalContentHelp}
               >
                 <IconButton

libs/fairness/src/lib/Controls/OutcomePlot.tsx

@@ -141,7 +141,7 @@ export class OutcomePlot extends React.PureComponent<IOutcomePlotProps> {
         >
           <div className={sharedStyles.chartWrapper}>
             <Stack horizontal horizontalAlign={"space-between"}>
-              <div className={sharedStyles.chartSubHeader}></div>
+              <div className={sharedStyles.chartSubHeader} />
               <ModalHelp theme={theme} strings={outcomeChartModalHelpStrings} />
             </Stack>
             <div className={sharedStyles.chartBody}>

libs/fairness/src/lib/Controls/PerformancePicker.tsx

@@ -56,13 +56,13 @@ export class PerformancePicker extends React.PureComponent<
             onChange={this.onPerformanceChange}
             options={options}
             ariaLabel={"Performance selector"}
-            useComboBoxAsMenuWidth={true}
+            useComboBoxAsMenuWidth
           />
         </div>
         {this.state.showCallout && (
           <Callout
             target={"#" + this._performanceDropdownHelpId}
-            setInitialFocus={true}
+            setInitialFocus
             onDismiss={this.onDismiss}
             role="alertdialog"
           >

libs/fairness/src/lib/Controls/PerformancePlot.tsx

@@ -18,7 +18,7 @@ import { SharedStyles } from "../Shared.styles";
 import { FormatMetrics } from "./../util/FormatMetrics";
 import { IFairnessContext } from "./../util/IFairnessContext";
 import { ModalHelp } from "./ModalHelp";
-import { PerformancePlotStyles } from "./PerformancePlot.styles";
+import { PerformancePlotLegend } from "./PerformancePlotLegend";
 
 interface IPerformancePlotProps {
   dashboardContext: IFairnessContext;
@@ -231,7 +231,7 @@ export class PerformancePlot extends React.PureComponent<
         >
           <div className={sharedStyles.chartWrapper}>
             <Stack horizontal horizontalAlign={"space-between"}>
-              <div className={sharedStyles.chartSubHeader}></div>
+              <div className={sharedStyles.chartSubHeader} />
               <ModalHelp
                 theme={theme}
                 strings={performanceChartModalHelpStrings}
@@ -266,57 +266,7 @@ export class PerformancePlot extends React.PureComponent<
   }
 }
 
-interface IPerformancePlotLegendProps {
+export interface IPerformancePlotLegendProps {
   showSubtitle: boolean;
   useOverUnderPrediction: boolean;
 }
-
-export class PerformancePlotLegend extends React.PureComponent<
-  IPerformancePlotLegendProps
-> {
-  public render(): React.ReactNode {
-    const styles = PerformancePlotStyles();
-    const sharedStyles = SharedStyles();
-
-    return (
-      <Stack horizontal tokens={{ childrenGap: "l1", padding: "0 0 0 0" }}>
-        <div className={sharedStyles.textRow}>
-          <div
-            className={sharedStyles.colorBlock}
-            style={{ backgroundColor: chartColors[1] }}
-          />
-          <div>
-            <div className={styles.legendTitle}>
-              {this.props.useOverUnderPrediction
-                ? localization.Fairness.Report.underestimationError
-                : localization.Fairness.Report.falseNegativeRate}
-            </div>
-            {this.props.showSubtitle && (
-              <div className={styles.legendSubtitle}>
-                {localization.Fairness.Report.underpredictionExplanation}
-              </div>
-            )}
-          </div>
-        </div>
-        <div className={sharedStyles.textRow}>
-          <div
-            className={sharedStyles.colorBlock}
-            style={{ backgroundColor: chartColors[0] }}
-          />
-          <div>
-            <div className={styles.legendTitle}>
-              {this.props.useOverUnderPrediction
-                ? localization.Fairness.Report.overestimationError
-                : localization.Fairness.Report.falsePositiveRate}
-            </div>
-            {this.props.showSubtitle && (
-              <div className={styles.legendSubtitle}>
-                {localization.Fairness.Report.overpredictionExplanation}
-              </div>
-            )}
-          </div>
-        </div>
-      </Stack>
-    );
-  }
-}

libs/fairness/src/lib/Controls/PerformancePlotLegend.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { localization } from "@responsible-ai/localization";
+import { chartColors } from "@responsible-ai/mlchartlib";
+import { Stack } from "office-ui-fabric-react";
+import React from "react";
+
+import { SharedStyles } from "../Shared.styles";
+
+import { IPerformancePlotLegendProps } from "./PerformancePlot";
+import { PerformancePlotStyles } from "./PerformancePlot.styles";
+
+export class PerformancePlotLegend extends React.PureComponent<
+  IPerformancePlotLegendProps
+> {
+  public render(): React.ReactNode {
+    const styles = PerformancePlotStyles();
+    const sharedStyles = SharedStyles();
+
+    return (
+      <Stack horizontal tokens={{ childrenGap: "l1", padding: "0 0 0 0" }}>
+        <div className={sharedStyles.textRow}>
+          <div
+            className={sharedStyles.colorBlock}
+            style={{ backgroundColor: chartColors[1] }}
+          />
+          <div>
+            <div className={styles.legendTitle}>
+              {this.props.useOverUnderPrediction
+                ? localization.Fairness.Report.underestimationError
+                : localization.Fairness.Report.falseNegativeRate}
+            </div>
+            {this.props.showSubtitle && (
+              <div className={styles.legendSubtitle}>
+                {localization.Fairness.Report.underpredictionExplanation}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className={sharedStyles.textRow}>
+          <div
+            className={sharedStyles.colorBlock}
+            style={{ backgroundColor: chartColors[0] }}
+          />
+          <div>
+            <div className={styles.legendTitle}>
+              {this.props.useOverUnderPrediction
+                ? localization.Fairness.Report.overestimationError
+                : localization.Fairness.Report.falsePositiveRate}
+            </div>
+            {this.props.showSubtitle && (
+              <div className={styles.legendSubtitle}>
+                {localization.Fairness.Report.overpredictionExplanation}
+              </div>
+            )}
+          </div>
+        </div>
+      </Stack>
+    );
+  }
+}

libs/interpret/src/lib/MLIDashboard/Controls/Callout/LabelWithCallout.tsx

@@ -61,9 +61,9 @@ export class LabelWithCallout extends React.Component<
         )}
         {this.state.showCallout && (
           <FabricCallout
-            doNotLayer={true}
+            doNotLayer
             target={`#${id}`}
-            setInitialFocus={true}
+            setInitialFocus
             onDismiss={this.toggleCallout}
             role="alertdialog"
             styles={{ container: FabricStyles.calloutContainer }}

libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortBar.tsx

@@ -104,7 +104,7 @@ export class CohortBar extends React.Component<
               deleteIsDisabled={this.props.cohorts.length === 1}
             />
           ) : (
-            <Panel isOpen={true} onDismiss={this.hideEditList} isLightDismiss>
+            <Panel isOpen onDismiss={this.hideEditList} isLightDismiss>
               <DetailsList
                 items={this.props.cohorts}
                 selectionMode={SelectionMode.none}
@@ -189,7 +189,7 @@ export class CohortBar extends React.Component<
     return (
       <Stack>
         <Text>{cohort.name}</Text>
-        <Stack horizontal={true} tokens={{ childrenGap: "s1" }}>
+        <Stack horizontal tokens={{ childrenGap: "s1" }}>
           {index && (
             <Link onClick={this.editCohort.bind(this, index)}>
               {localization.Interpret.CohortBanner.editCohort}

libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortEditor.tsx

@@ -102,7 +102,7 @@ export class CohortEditor extends React.PureComponent<
             return 0;
           }} // https://github.com/microsoft/fluentui/issues/6476
           id="cohortEditPanel"
-          isOpen={true}
+          isOpen
           onDismiss={this.props.closeCohortEditorPanel}
           onRenderFooter={this.renderFooter}
           isFooterAtBottom

libs/interpret/src/lib/MLIDashboard/Controls/Cohort/CohortEditorFilter.tsx

@@ -155,7 +155,7 @@ export class CohortEditorFilter extends React.Component<
               selectedKey={this.props.openedFilter.arg}
               onChange={this.props.setCategoricalValues}
               options={categoricalOptions}
-              useComboBoxAsMenuWidth={true}
+              useComboBoxAsMenuWidth
               calloutProps={FabricStyles.calloutProps}
               styles={FabricStyles.limitedSizeMenuDropdown}
             />
@@ -176,7 +176,7 @@ export class CohortEditorFilter extends React.Component<
               selectedKey={this.props.openedFilter.method}
               onChange={this.props.setComparison}
               options={this.comparisonOptions}
-              useComboBoxAsMenuWidth={true}
+              useComboBoxAsMenuWidth
               calloutProps={FabricStyles.calloutProps}
             />
             {selectedMeta.featureRange &&

libs/interpret/src/lib/MLIDashboard/Controls/DependencePlot/DependencePlot.tsx

@@ -115,7 +115,7 @@ export class DependencePlot extends React.PureComponent<IDependecePlotProps> {
             </div>
           </div>
           <div className={classNames.horizontalAxisWithPadding}>
-            <div className={classNames.paddingDiv}></div>
+            <div className={classNames.paddingDiv} />
             <div className={classNames.horizontalAxis}>
               <Text variant={"medium"}>
                 {

libs/interpret/src/lib/MLIDashboard/Controls/EbmExplanation.tsx

@@ -228,7 +228,7 @@ export class EbmExplanation extends React.PureComponent<IEbmProps, IEbmState> {
             onChange={this.onFeatureSelect}
             options={this.featureOptions}
             ariaLabel={"feature picker"}
-            useComboBoxAsMenuWidth={true}
+            useComboBoxAsMenuWidth
             styles={FabricStyles.smallDropdownStyle}
           />
         </div>

libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Beehive.tsx

@@ -474,7 +474,7 @@ export class Beehive extends React.PureComponent<
               onChange={this.setChart}
               options={this.props.chartTypeOptions}
               ariaLabel={"chart type picker"}
-              useComboBoxAsMenuWidth={true}
+              useComboBoxAsMenuWidth
               styles={FabricStyles.smallDropdownStyle}
             />
             {this.colorOptions.length > 1 && (
@@ -485,7 +485,7 @@ export class Beehive extends React.PureComponent<
                 onChange={this.setColor}
                 options={this.colorOptions}
                 ariaLabel={"color picker"}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.smallDropdownStyle}
               />
             )}
@@ -521,7 +521,7 @@ export class Beehive extends React.PureComponent<
                 step={1}
                 value={this.props.config.topK}
                 onChange={(value: number): void => this.setK(value)}
-                showValue={true}
+                showValue
               />
             </div>
             {this.props.dashboardContext.explanationContext.modelMetadata
@@ -545,7 +545,7 @@ export class Beehive extends React.PureComponent<
                   onChange={weightContext.onSelection}
                   options={weightContext.options}
                   ariaLabel={"Cross-class weighting selector"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.smallDropdownStyle}
                 />
               </div>
@@ -554,7 +554,7 @@ export class Beehive extends React.PureComponent<
           {this.state.calloutContent && (
             <Callout
               target={"#" + this.state.calloutId}
-              setInitialFocus={true}
+              setInitialFocus
               onDismiss={this.onDismiss}
               role="alertdialog"
             >

libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/FeatureImportanceBar.tsx

@@ -80,7 +80,7 @@ export class FeatureImportanceBar extends React.PureComponent<
                   onChange={this.setChart}
                   options={this.props.chartTypeOptions}
                   ariaLabel={"chart type picker"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.smallDropdownStyle}
                 />
               )}
@@ -106,7 +106,7 @@ export class FeatureImportanceBar extends React.PureComponent<
                 step={1}
                 value={this.props.config.topK}
                 onChange={this.setTopK}
-                showValue={true}
+                showValue
                 ariaLabel={
                   localization.Interpret.AggregateImportance.topKFeatures
                 }
@@ -119,7 +119,7 @@ export class FeatureImportanceBar extends React.PureComponent<
                 onChange={this.onSortSelect}
                 options={this.sortOptions}
                 ariaLabel={"sort selector"}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.smallDropdownStyle}
               />
             )}
@@ -127,7 +127,7 @@ export class FeatureImportanceBar extends React.PureComponent<
           {this.state.isCalloutVisible && (
             <Callout
               target={"#" + this._iconId}
-              setInitialFocus={true}
+              setInitialFocus
               onDismiss={this.onDismiss}
               role="alertdialog"
             >

libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Violin.tsx

@@ -346,7 +346,7 @@ export class Violin extends React.PureComponent<
               onChange={this.setChart}
               options={this.props.chartTypeOptions}
               ariaLabel={"chart type picker"}
-              useComboBoxAsMenuWidth={true}
+              useComboBoxAsMenuWidth
               styles={FabricStyles.smallDropdownStyle}
             />
             {this.props.dashboardContext.explanationContext.modelMetadata
@@ -359,7 +359,7 @@ export class Violin extends React.PureComponent<
                   onChange={this.onGroupSelect}
                   options={this.groupByOptions}
                   ariaLabel={"chart type picker"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.smallDropdownStyle}
                 />
               )}
@@ -390,7 +390,7 @@ export class Violin extends React.PureComponent<
                 step={1}
                 value={this.props.config.topK}
                 onChange={this.setTopK}
-                showValue={true}
+                showValue
               />
             </div>
             {this.props.dashboardContext.explanationContext.modelMetadata
@@ -417,7 +417,7 @@ export class Violin extends React.PureComponent<
                   onChange={weightContext.onSelection}
                   options={weightContext.options}
                   ariaLabel={"Cross-class weighting selector"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.smallDropdownStyle}
                 />
               </div>
@@ -426,7 +426,7 @@ export class Violin extends React.PureComponent<
           {this.state.calloutContent && (
             <Callout
               target={"#" + this.state.calloutId}
-              setInitialFocus={true}
+              setInitialFocus
               onDismiss={this.onDismiss}
               role="alertdialog"
             >

libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/GlobalExplanationTab.tsx

@@ -57,14 +57,11 @@ export interface IGlobalExplanationTabProps {
 
 interface IGlobalExplanationTabState {
   topK: number;
-  minK: number;
-  maxK: number;
   sortingSeriesIndex: number;
   sortArray: number[];
   seriesIsActive: boolean[];
   selectedCohortIndex: number;
   selectedFeatureIndex?: number;
-  crossClassInfoVisible: boolean;
   chartType: ChartTypes;
   globalBarSettings?: IGlobalBarSettings;
   dependenceProps?: IGenericChartProps;
@@ -86,7 +83,6 @@ export class GlobalExplanationTab extends React.PureComponent<
     : undefined;
 
   private defaultMinK = 4;
-  private defaultMaxK = 30;
 
   public constructor(props: IGlobalExplanationTabProps) {
     super(props);
@@ -99,9 +95,6 @@ export class GlobalExplanationTab extends React.PureComponent<
       activeSeries: [],
       chartType: ChartTypes.Bar,
       cohortSeries: [],
-      crossClassInfoVisible: false,
-      maxK: this.defaultMaxK,
-      minK: this.defaultMinK,
       selectedCohortIndex: initialCohortIndex,
       seriesIsActive: this.props.cohorts.map(() => true),
       sortArray: [],
@@ -115,16 +108,6 @@ export class GlobalExplanationTab extends React.PureComponent<
       return;
     }
 
-    const minK = Math.min(
-      4,
-      this.context.jointDataset.localExplanationFeatureCount
-    );
-
-    const maxK = Math.min(
-      this.defaultMaxK,
-      this.context.jointDataset.localExplanationFeatureCount
-    );
-
     const sortArray = ModelExplanationUtils.getSortIndices(
       this.props.cohorts[
         this.state.selectedCohortIndex
@@ -139,8 +122,6 @@ export class GlobalExplanationTab extends React.PureComponent<
       ),
       cohortSeries,
       globalBarSettings: this.getDefaultSettings(),
-      maxK,
-      minK,
       sortArray
     });
   }

libs/interpret/src/lib/MLIDashboard/Controls/GlobalExplanationTab/SidePanel.tsx

@@ -44,7 +44,6 @@ export interface ISidePanelProps {
   onChartTypeChange(chartType: ChartTypes): void;
 }
 interface ISidePanelState {
-  crossClassInfoVisible: boolean;
   weightOptions: IDropdownOption[] | undefined;
 }
 export class SidePanel extends React.Component<
@@ -64,7 +63,6 @@ export class SidePanel extends React.Component<
   public constructor(props: ISidePanelProps) {
     super(props);
     this.state = {
-      crossClassInfoVisible: false,
       weightOptions: this.getWeightOptions()
     };
   }

libs/interpret/src/lib/MLIDashboard/Controls/GlobalOnlyChart/GlobalOnlyChart.tsx

@@ -14,14 +14,12 @@ import { localization } from "@responsible-ai/localization";
 import { Icon, Slider, Text } from "office-ui-fabric-react";
 import React from "react";
 
-import { FeatureKeys } from "../../SharedComponents/IBarChartConfig";
 import { FeatureImportanceBar } from "../FeatureImportanceBar/FeatureImportanceBar";
 import { globalTabStyles } from "../GlobalExplanationTab/GlobalExplanationTab.styles";
 import { IGlobalSeries } from "../GlobalExplanationTab/IGlobalSeries";
 
 export interface IGlobalOnlyChartState {
   topK: number;
-  sortingSeriesKey: number | string;
   sortArray: number[];
   globalSeries: IGlobalSeries[];
   featureNames: string[];
@@ -72,7 +70,6 @@ export class GlobalOnlyChart extends React.PureComponent<
       sortArray: ModelExplanationUtils.buildSortedVector(
         globalImportance
       ).reverse(),
-      sortingSeriesKey: FeatureKeys.AbsoluteGlobal,
       topK: Math.min(
         4,
         this.context.precomputedExplanations?.globalFeatureImportance?.scores

libs/interpret/src/lib/MLIDashboard/Controls/ICEPlot.tsx

@@ -299,7 +299,7 @@ export class ICEPlot extends React.Component<IIcePlotProps, IIcePlotState> {
                     ? this.state.rangeView.featureIndex
                     : undefined
                 }
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -311,7 +311,7 @@ export class ICEPlot extends React.Component<IIcePlotProps, IIcePlotState> {
                     selectedKey={
                       this.state.rangeView.selectedOptionKeys as string[]
                     }
-                    allowFreeform={true}
+                    allowFreeform
                     autoComplete="on"
                     options={this.state.rangeView.categoricalOptions}
                     onChange={this.onCategoricalRangeChanged}

libs/interpret/src/lib/MLIDashboard/Controls/ModelPerformanceTab/ModelPerformanceTab.tsx

@@ -212,7 +212,7 @@ export class ModelPerformanceTab extends React.PureComponent<
             </div>
           </div>
           <div className={classNames.horizontalAxisWithPadding}>
-            <div className={classNames.paddingDiv}></div>
+            <div className={classNames.paddingDiv} />
             <div className={classNames.horizontalAxis}>
               <div>
                 <DefaultButton

libs/interpret/src/lib/MLIDashboard/Controls/MultiICEPlot/MultiICEPlot.tsx

@@ -226,7 +226,7 @@ export class MultiICEPlot extends React.PureComponent<
                 selectedKey={
                   this.state.rangeView.selectedOptionKeys as string[]
                 }
-                allowFreeform={true}
+                allowFreeform
                 autoComplete="on"
                 options={this.state.rangeView.categoricalOptions}
                 onChange={this.onCategoricalRangeChanged}

libs/interpret/src/lib/MLIDashboard/Controls/Scatter/DataExploration.tsx

@@ -19,7 +19,6 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
   private plotlyProps: IPlotlyProperty;
   public constructor(props: IScatterProps) {
     super(props);
-    this.state = { isCalloutVisible: false };
     this.plotlyProps =
       this.props.plotlyProps !== undefined
         ? _.cloneDeep(this.props.plotlyProps)
@@ -73,7 +72,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
                 label={localization.Interpret.ExplanationScatter.xValue}
                 ariaLabel="x picker"
                 selectedKey={this.plotlyProps.data[0].xAccessor}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -84,7 +83,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
                 label={localization.Interpret.ExplanationScatter.colorValue}
                 ariaLabel="color picker"
                 selectedKey={initialColorOption}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -97,7 +96,7 @@ export class DataExploration extends React.PureComponent<IScatterProps> {
                 label={localization.Interpret.ExplanationScatter.yValue}
                 ariaLabel="y picker"
                 selectedKey={this.plotlyProps.data[0].yAccessor}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>

libs/interpret/src/lib/MLIDashboard/Controls/Scatter/ExplanationExploration.tsx

@@ -96,7 +96,7 @@ export class ExplanationExploration extends React.PureComponent<
                 label={localization.Interpret.ExplanationScatter.xValue}
                 ariaLabel="x picker"
                 selectedKey={this.plotlyProps.data[0].xAccessor}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -107,7 +107,7 @@ export class ExplanationExploration extends React.PureComponent<
                 label={localization.Interpret.ExplanationScatter.colorValue}
                 ariaLabel="color picker"
                 selectedKey={initialColorOption}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -120,7 +120,7 @@ export class ExplanationExploration extends React.PureComponent<
                 label={localization.Interpret.ExplanationScatter.yValue}
                 ariaLabel="y picker"
                 selectedKey={this.plotlyProps.data[0].yAccessor}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 styles={FabricStyles.defaultDropdownStyle}
               />
             </div>
@@ -146,7 +146,7 @@ export class ExplanationExploration extends React.PureComponent<
                   onChange={weightContext.onSelection}
                   options={weightContext.options}
                   ariaLabel={"Cross-class weighting selector"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.defaultDropdownStyle}
                 />
               </div>
@@ -155,7 +155,7 @@ export class ExplanationExploration extends React.PureComponent<
           {this.state.isCalloutVisible && (
             <Callout
               target={"#" + this.iconId}
-              setInitialFocus={true}
+              setInitialFocus
               onDismiss={this.onDismiss}
               role="alertdialog"
             >

libs/interpret/src/lib/MLIDashboard/Controls/SinglePointFeatureImportance.tsx

@@ -119,7 +119,7 @@ export class SinglePointFeatureImportance extends React.PureComponent<
                 step={1}
                 value={this.props.config.topK}
                 onChange={this.setTopK}
-                showValue={true}
+                showValue
               />
               {this.sortOptions.length > 1 && (
                 <ComboBox
@@ -128,7 +128,7 @@ export class SinglePointFeatureImportance extends React.PureComponent<
                   onChange={this.onSortSelect}
                   options={this.sortOptions}
                   ariaLabel={"sort selector"}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   styles={FabricStyles.smallDropdownStyle}
                 />
               )}

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/CustomPredictionLabels.tsx

@@ -154,7 +154,7 @@ export class CustomPredictionLabels extends React.Component<
               <IconButton
                 className={classNames.tooltipHost}
                 iconProps={{ iconName: "More" }}
-              ></IconButton>
+              />
             </TooltipHost>
             <div>
               <div>
@@ -184,8 +184,8 @@ export class CustomPredictionLabels extends React.Component<
             <IconButton
               className={classNames.tooltipHost}
               iconProps={{ iconName: "More" }}
-              disabled={true}
+              disabled
-            ></IconButton>
+            />
           </div>
           <div>
             <div>

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/ExistingPredictionLabels.tsx

@@ -134,7 +134,7 @@ export class ExistingPredictionLabels extends React.Component<
               <IconButton
                 className={classNames.tooltipHost}
                 iconProps={{ iconName: "More" }}
-              ></IconButton>
+              />
             </TooltipHost>
             <div>
               {trueClass !== undefined && (

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/LocalImportancePlots.tsx

@@ -222,9 +222,9 @@ export class LocalImportancePlots extends React.Component<
                     )}
                     {this.state.crossClassInfoVisible && (
                       <Callout
-                        doNotLayer={true}
+                        doNotLayer
                         target={"#cross-class-weight-info"}
-                        setInitialFocus={true}
+                        setInitialFocus
                         onDismiss={this.toggleCrossClassInfo}
                         directionalHint={DirectionalHint.leftCenter}
                         role="alertdialog"
@@ -297,9 +297,9 @@ export class LocalImportancePlots extends React.Component<
             />
             {this.state.iceTooltipVisible && (
               <Callout
-                doNotLayer={true}
+                doNotLayer
                 target={"#explanation-info"}
-                setInitialFocus={true}
+                setInitialFocus
                 onDismiss={this.toggleICETooltip}
                 role="alertdialog"
                 styles={{ container: FabricStyles.calloutContainer }}
@@ -350,7 +350,7 @@ export class LocalImportancePlots extends React.Component<
                 label={localization.Interpret.IcePlot.featurePickerLabel}
                 ariaLabel="feature picker"
                 selectedKey={this.state.selectedFeatureKey}
-                useComboBoxAsMenuWidth={true}
+                useComboBoxAsMenuWidth
                 calloutProps={FabricStyles.calloutProps}
                 styles={FabricStyles.limitedSizeMenuDropdown}
               />
@@ -363,7 +363,7 @@ export class LocalImportancePlots extends React.Component<
                   label={localization.Interpret.WhatIfTab.classPickerLabel}
                   ariaLabel="class picker"
                   selectedKey={this.state.selectedICEClass}
-                  useComboBoxAsMenuWidth={true}
+                  useComboBoxAsMenuWidth
                   calloutProps={FabricStyles.calloutProps}
                   styles={FabricStyles.limitedSizeMenuDropdown}
                 />

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfPanel.tsx

@@ -170,7 +170,7 @@ export class WhatIfPanel extends React.Component<IWhatIfPanelProps> {
                         key={item.key}
                         label={metaInfo.abbridgedLabel}
                         autoComplete={"on"}
-                        allowFreeform={true}
+                        allowFreeform
                         selectedKey={this.props.temporaryPoint?.[item.key]}
                         options={item.data.categoricalOptions}
                         onChange={this.setCustomRowPropertyDropdown.bind(

libs/interpret/src/lib/MLIDashboard/Controls/WhatIfTab/WhatIfTab.tsx

@@ -68,14 +68,8 @@ export interface IWhatIfTabState {
   selectedPointsIndexes: number[];
   pointIsActive: boolean[];
   customPointIsActive: boolean[];
-  topK: number;
   sortArray: number[];
   sortingSeriesIndex: number | undefined;
-  secondaryChartChoice: string;
-  selectedFeatureKey: string;
-  selectedICEClass: number;
-  crossClassInfoVisible: boolean;
-  iceTooltipVisible: boolean;
 }
 
 export class WhatIfTab extends React.PureComponent<
@@ -105,26 +99,20 @@ export class WhatIfTab extends React.PureComponent<
     super(props);
 
     this.state = {
-      crossClassInfoVisible: false,
       customPointIsActive: [],
       customPoints: [],
       editingDataCustomIndex: undefined,
       featuresOption: [],
       filteredFeatureList: [],
-      iceTooltipVisible: false,
       isPanelOpen: this.props.invokeModel !== undefined,
       pointIsActive: [],
       request: undefined,
-      secondaryChartChoice: WhatIfConstants.featureImportanceKey,
       selectedCohortIndex: 0,
-      selectedFeatureKey: JointDataset.DataLabelRoot + "0",
-      selectedICEClass: 0,
       selectedPointsIndexes: [],
       selectedWhatIfRootIndex: 0,
       showSelectionWarning: false,
       sortArray: [],
       sortingSeriesIndex: undefined,
-      topK: 4,
       xDialogOpen: false,
       yDialogOpen: false
     };
@@ -457,7 +445,7 @@ export class WhatIfTab extends React.PureComponent<
                   )}
                 </div>
                 <div className={classNames.horizontalAxisWithPadding}>
-                  <div className={classNames.paddingDiv}></div>
+                  <div className={classNames.paddingDiv} />
                   <div className={classNames.horizontalAxis}>
                     <div>
                       <DefaultButton

libs/interpret/src/lib/MLIDashboard/ExplanationDashboard.tsx

@@ -748,7 +748,7 @@ export class ExplanationDashboard extends React.Component<
               onLinkClick={this.handleGlobalTabClick}
               linkFormat={PivotLinkFormat.tabs}
               linkSize={PivotLinkSize.normal}
-              headersOnly={true}
+              headersOnly
               styles={FabricStyles.verticalTabsStyle}
             >
               {this.pivotItems.map((props) => (
@@ -860,7 +860,7 @@ export class ExplanationDashboard extends React.Component<
                     onLinkClick={this.handleLocalTabClick}
                     linkFormat={PivotLinkFormat.tabs}
                     linkSize={PivotLinkSize.normal}
-                    headersOnly={true}
+                    headersOnly
                     styles={FabricStyles.verticalTabsStyle}
                   >
                     <PivotItem

libs/interpret/src/lib/MLIDashboard/NewExplanationDashboard.tsx

@@ -144,7 +144,7 @@ export class NewExplanationDashboard extends React.PureComponent<
           {this.props.dashboardType === "ModelPerformance" ? (
             <ModelPerformanceTab />
           ) : (
-            <Stack horizontal={true}>
+            <Stack horizontal>
               <Stack.Item>
                 <CohortBar
                   cohorts={this.state.cohorts}
@@ -159,7 +159,7 @@ export class NewExplanationDashboard extends React.PureComponent<
                     selectedKey={this.state.activeGlobalTab}
                     onLinkClick={this.handleGlobalTabClick}
                     linkSize={PivotLinkSize.normal}
-                    headersOnly={true}
+                    headersOnly
                     id="DashboardPivot"
                   >
                     {this.pivotItems.map((props) => (
@@ -170,7 +170,7 @@ export class NewExplanationDashboard extends React.PureComponent<
                     GlobalTabKeys.ModelPerformance && <ModelPerformanceTab />}
                   {this.state.activeGlobalTab ===
                     GlobalTabKeys.DataExploration && (
-                    <DatasetExplorerTab showCohortSelection={true} />
+                    <DatasetExplorerTab showCohortSelection />
                   )}
                   {this.state.activeGlobalTab ===
                     GlobalTabKeys.ExplanationTab && (

libs/interpret/src/lib/MLIDashboard/SharedComponents/BinningControl.tsx

@@ -75,7 +75,7 @@ export class BinningControl extends React.PureComponent<
             label={localization.Interpret.IcePlot.featurePickerLabel}
             ariaLabel="feature picker"
             selectedKey={this.state ? this.state.featureIndex : undefined}
-            useComboBoxAsMenuWidth={true}
+            useComboBoxAsMenuWidth
             styles={FabricStyles.defaultDropdownStyle}
           />
         </div>
@@ -85,7 +85,7 @@ export class BinningControl extends React.PureComponent<
               <ComboBox
                 multiSelect
                 selectedKey={this.state.selectedOptionKeys}
-                allowFreeform={true}
+                allowFreeform
                 autoComplete="on"
                 options={this.state.categoricalOptions}
                 onChange={this.onCategoricalRangeChanged}

libs/interpret/src/lib/MLIDashboard/SharedComponents/FeatureEditingTile.tsx

@@ -85,7 +85,7 @@ export class FeatureEditingTile extends React.Component<
         {this.props.enumeratedValues !== undefined && (
           <ComboBox
             text={this.state.value}
-            allowFreeform={true}
+            allowFreeform
             ariaLabel={this.props.featureName}
             autoComplete="on"
             options={this.options}