Rename output column name in the counterfactual flyout (#1353)

Signed-off-by: Gaurav Gupta <gaugup@microsoft.com>
microsoft · Apr 16, 2022 · af01ef4 · af01ef4
1 parent 8f1afb0
commit af01ef4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/libs/counterfactuals/src/lib/CounterfactualList.tsx b/libs/counterfactuals/src/lib/CounterfactualList.tsx
@@ -87,6 +87,7 @@ export class CounterfactualList extends React.Component<
   public render(): React.ReactNode {
     const items = this.getItems();
     const columns = this.getColumns();
+
     if (columns.length === 0) {
       return (
         <MissingParametersPlaceholder>
@@ -109,6 +110,18 @@ export class CounterfactualList extends React.Component<
     );
   }
 
+  private getTargetFeatureName(): string | undefined {
+    return this.props.data?.feature_names_including_target[
+      this.props.data?.feature_names_including_target.length - 1
+    ];
+  }
+  private getTargetPrefix(): string {
+    if (this.props.data?.desired_range !== undefined) {
+      return localization.Counterfactuals.WhatIf.predictedValue;
+    }
+    return localization.Counterfactuals.WhatIf.predictedClass;
+  }
+
   private renderRow: IRenderFunction<IDetailsRowProps> = (
     props?: IDetailsRowProps
   ): JSX.Element | null => {
@@ -231,10 +244,7 @@ export class CounterfactualList extends React.Component<
   };
   private getColumns(): IColumn[] {
     const columns: IColumn[] = [];
-    const targetFeature =
-      this.props.data?.feature_names_including_target[
-        this.props.data?.feature_names_including_target.length - 1
-      ];
+    const targetFeature = this.getTargetFeatureName();
     const featureNames = getFilterFeatures(
       this.props.data,
       this.props.selectedIndex,
@@ -272,6 +282,11 @@ export class CounterfactualList extends React.Component<
           name: f
         })
       );
+    for (const column of columns) {
+      if (targetFeature !== undefined && column.fieldName === targetFeature) {
+        column.name = `${this.getTargetPrefix()} (${column.fieldName})`;
+      }
+    }
     return columns;
   }
 
@@ -378,7 +393,7 @@ export class CounterfactualList extends React.Component<
           <Stack.Item>
             <TextField
               value={this.state.data[column.key]?.toString()}
-              label={column.key}
+              label={column.name || column.key}
               id={column.key}
               onChange={this.updateColValue}
             />

diff --git a/libs/localization/src/lib/en.json b/libs/localization/src/lib/en.json
@@ -105,7 +105,9 @@
       "sortFeatures": "Sort feature columns by counterfactual feature importance",
       "percentCounterfactualLocalImportance": "Percentage of counterfactuals that varied the feature",
       "toggleToolTipBody": "Counterfactual examples generate local feature importances which indicate which top features were perturbed the most to achieve the desired class classification scenarios or desired range for regression scenarios.",
-      "toggleToolTipHeader": "Ranked counterfactual features"
+      "toggleToolTipHeader": "Ranked counterfactual features",
+      "predictedClass": "Predicted class",
+      "predictedValue": "Predicted value"
     },
     "counterfactualEx": "Counterfactual Ex {0}",
     "counterfactualName": "What-if counterfactual name",