Fix what if counterfactual header and description text misaligned (#1316

) * align * e2e
microsoft · Apr 7, 2022 · 398535f · 398535f
1 parent 3f04978
commit 398535f
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 162 deletions.
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts b/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsights.styles.ts
@@ -17,7 +17,8 @@ export const causalInsightsStyles: () => IProcessedStyleSet<ICausalInsightsStyle
     const theme = getTheme();
     return mergeStyleSets<ICausalInsightsStyles>({
       container: {
-        color: theme.semanticColors.bodyText
+        color: theme.semanticColors.bodyText,
+        padding: "0 40px 10px 20px"
       }
     });
   };
diff --git a/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsightsTab.tsx b/libs/causality/src/lib/CausalAnalysisDashboard/CausalInsightsTab.tsx
@@ -7,13 +7,7 @@ import {
   ModelAssessmentContext
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
-import {
-  Text,
-  Pivot,
-  PivotItem,
-  Stack,
-  MessageBar
-} from "office-ui-fabric-react";
+import { Pivot, PivotItem, Stack, MessageBar } from "office-ui-fabric-react";
 import React from "react";
 
 import { CausalAnalysisOptions } from "./CausalAnalysisEnums";
@@ -45,15 +39,10 @@ export class CausalInsightsTab extends React.PureComponent<
     return (
       <Stack
         grow
-        className={classNames.container}
         id="causalInsightsTab"
         tokens={{ padding: "l1" }}
+        className={classNames.container}
       >
-        <Stack.Item>
-          <Text variant={"xxLarge"} id="causalAnalysisHeader">
-            {localization.ModelAssessment.ComponentNames.CausalAnalysis}
-          </Text>
-        </Stack.Item>
         <Stack.Item>
           <MessageBar>
             {localization.CausalAnalysis.MainMenu.cohortInfo}

diff --git a/libs/counterfactuals/src/lib/CounterfactualsTab.styles.ts b/libs/counterfactuals/src/lib/CounterfactualsTab.styles.ts
@@ -17,7 +17,8 @@ export const counterfactualsTabStyles: () => IProcessedStyleSet<ICounterfactuals
     const theme = getTheme();
     return mergeStyleSets<ICounterfactualsTabStyles>({
       container: {
-        color: theme.semanticColors.bodyText
+        color: theme.semanticColors.bodyText,
+        padding: "0 40px 10px 40px"
       }
     });
   };
diff --git a/libs/counterfactuals/src/lib/CounterfactualsTab.tsx b/libs/counterfactuals/src/lib/CounterfactualsTab.tsx
@@ -2,41 +2,74 @@
 // Licensed under the MIT License.
 
 import {
+  Cohort,
   defaultModelAssessmentContext,
   ICounterfactualData,
-  ModelAssessmentContext
+  ModelAssessmentContext,
+  ModelTypes,
+  WeightVectorOption
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
-import { Text, Stack } from "office-ui-fabric-react";
+import { Dictionary } from "lodash";
+import { Stack, Text } from "office-ui-fabric-react";
 import React from "react";
 
+import { buildCounterfactualState } from "./buildCounterfactualState";
+import { CounterfactualChart } from "./CounterfactualChart";
 import { counterfactualsTabStyles } from "./CounterfactualsTab.styles";
-import { CounterfactualsView } from "./CounterfactualsView";
 
 export interface ICounterfactualsTabProps {
   data: ICounterfactualData;
 }
+export interface ICounterfactualsTabState {
+  cohorts: Cohort[];
+  weightVectorOptions: WeightVectorOption[];
+  weightVectorLabels: Dictionary<string>;
+  selectedWeightVector: WeightVectorOption;
+}
 
-export class CounterfactualsTab extends React.PureComponent<ICounterfactualsTabProps> {
+export class CounterfactualsTab extends React.PureComponent<
+  ICounterfactualsTabProps,
+  ICounterfactualsTabState
+> {
   public static contextType = ModelAssessmentContext;
   public context: React.ContextType<typeof ModelAssessmentContext> =
     defaultModelAssessmentContext;
+  public constructor(props: ICounterfactualsTabProps) {
+    super(props);
+    this.state = buildCounterfactualState(
+      this.context.dataset,
+      this.context.jointDataset,
+      ModelTypes.Multiclass
+    );
+  }
 
   public render(): React.ReactNode {
     const classNames = counterfactualsTabStyles();
     return (
-      <Stack
-        className={classNames.container}
-        horizontal={false}
-        tokens={{ childrenGap: "l1" }}
-      >
+      <Stack grow tokens={{ padding: "l1" }} className={classNames.container}>
         <Stack.Item>
-          <Text variant={"xxLarge"}>{localization.Counterfactuals.header}</Text>
+          <Text variant={"medium"}>
+            {localization.Counterfactuals.whatifDescription}
+          </Text>
         </Stack.Item>
         <Stack.Item>
-          <CounterfactualsView data={this.props.data} />
+          <CounterfactualChart
+            invokeModel={this.context.requestPredictions}
+            data={this.props.data}
+            selectedWeightVector={this.state.selectedWeightVector}
+            weightOptions={this.state.weightVectorOptions}
+            weightLabels={this.state.weightVectorLabels}
+            onWeightChange={this.onWeightVectorChange}
+          />
         </Stack.Item>
       </Stack>
     );
   }
+
+  private onWeightVectorChange = (weightOption: WeightVectorOption): void => {
+    this.context.jointDataset.buildLocalFlattenMatrix(weightOption);
+    this.state.cohorts.forEach((cohort) => cohort.clearCachedImportances());
+    this.setState({ selectedWeightVector: weightOption });
+  };
 }
diff --git a/libs/counterfactuals/src/lib/CounterfactualsView.tsx b/libs/counterfactuals/src/lib/CounterfactualsView.tsx
diff --git a/libs/counterfactuals/src/lib/buildCounterfactualState.ts b/libs/counterfactuals/src/lib/buildCounterfactualState.ts
@@ -10,13 +10,13 @@ import {
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
 
-import { ICounterfactualsViewState } from "./CounterfactualsView";
+import { ICounterfactualsTabState } from "./CounterfactualsTab";
 
 export function buildCounterfactualState(
   dataset: IDataset,
   jointDataset: JointDataset,
   modelType: ModelTypes
-): ICounterfactualsViewState {
+): ICounterfactualsTabState {
   const cohorts = [
     new Cohort(localization.Interpret.Cohort.defaultLabel, jointDataset, [])
   ];

diff --git a/...alysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx b/...alysis/src/lib/ErrorAnalysisDashboard/Controls/ErrorAnalysisView/ErrorAnalysisViewTab.tsx
@@ -10,7 +10,6 @@ import { localization } from "@responsible-ai/localization";
 import {
   CommandBarButton,
   IIconProps,
-  Text,
   Pivot,
   PivotItem,
   Stack,
@@ -72,9 +71,6 @@ export class ErrorAnalysisViewTab extends React.Component<
           tokens={{ padding: "l1" }}
           className={classNames.errorAnalysis}
         >
-          <Text variant={"xxLarge"} id="errorAnalysisHeader">
-            {localization.ErrorAnalysis.MainMenu.errorAnalysisLabel}
-          </Text>
           <Stack horizontal>
             <Stack.Item>
               <Pivot

diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/FeatureImportances.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/Controls/FeatureImportances.tsx
@@ -12,13 +12,7 @@ import {
 import { GlobalExplanationTab } from "@responsible-ai/interpret";
 import { localization } from "@responsible-ai/localization";
 import { Dictionary } from "lodash";
-import {
-  Pivot,
-  PivotItem,
-  PivotLinkSize,
-  Stack,
-  Text
-} from "office-ui-fabric-react";
+import { Pivot, PivotItem, PivotLinkSize, Stack } from "office-ui-fabric-react";
 import * as React from "react";
 
 import { featureImportanceTabStyles } from "./FeatureImportances.styles";
@@ -76,11 +70,6 @@ export class FeatureImportancesTab extends React.PureComponent<
 
     return (
       <Stack className={classNames.container}>
-        <Stack.Item className={classNames.header}>
-          <Text variant={"xxLarge"} id="featureImportanceHeader">
-            {localization.ModelAssessment.ComponentNames.FeatureImportances}
-          </Text>
-        </Stack.Item>
         <Stack.Item>
           <Pivot
             selectedKey={this.state.activeFeatureImportancesOption}