[UI refactor] Remove .bind() part2 - Remove .bind in counterfactual folder and part of .bind() in other folders

libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortBar.tsx

@@ -4,7 +4,6 @@
 import {
   DetailsList,
   IColumn,
-  Link,
   Panel,
   SelectionMode,
   Stack,
@@ -20,6 +19,7 @@ import { Cohort } from "../Cohort";
 
 import { CohortEditor } from "./CohortEditor";
 import { CohortList } from "./CohortList";
+import { CohortName } from "./CohortName";
 
 export interface ICohortBarProps {
   cohorts: Cohort[];
@@ -187,19 +187,12 @@ export class CohortBar extends React.Component<
       return <span />;
     }
     return (
-      <Stack>
-        <Text>{cohort.name}</Text>
-        <Stack horizontal tokens={{ childrenGap: "s1" }}>
-          {index && (
-            <Link onClick={this.editCohort.bind(this, index)}>
-              {localization.Interpret.CohortBanner.editCohort}
-            </Link>
-          )}
-          <Link onClick={this.cloneAndEditCohort.bind(this, index)}>
-            {localization.Interpret.CohortBanner.duplicateCohort}
-          </Link>
-        </Stack>
-      </Stack>
+      <CohortName
+        cohort={cohort}
+        index={index}
+        cloneAndEditCohort={this.cloneAndEditCohort}
+        editCohort={this.editCohort}
+      />
     );
   };
 

libs/core-ui/src/lib/Cohort/ManualCohortManagement/CohortName.tsx

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Link, Stack, Text } from "@fluentui/react";
+import { localization } from "@responsible-ai/localization";
+import React from "react";
+
+import { Cohort } from "../Cohort";
+
+export interface ICohortNameProps {
+  cohort: Cohort;
+  index: number;
+  cloneAndEditCohort(index: number): void;
+  editCohort(index: number): void;
+}
+
+export class CohortName extends React.Component<ICohortNameProps> {
+  public render(): React.ReactNode {
+    return (
+      <Stack>
+        <Text>{this.props.cohort.name}</Text>
+        <Stack horizontal tokens={{ childrenGap: "s1" }}>
+          {this.props.index && (
+            <Link onClick={this.onClickEditCohort}>
+              {localization.Interpret.CohortBanner.editCohort}
+            </Link>
+          )}
+          <Link onClick={this.onClickCloneAndEditCohort}>
+            {localization.Interpret.CohortBanner.duplicateCohort}
+          </Link>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  private onClickEditCohort = (): void => {
+    this.props.editCohort(this.props.index);
+  };
+
+  private onClickCloneAndEditCohort = (): void => {
+    this.props.cloneAndEditCohort(this.props.index);
+  };
+}

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

@@ -1,10 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { IconButton, Text } from "@fluentui/react";
+import { Text } from "@fluentui/react";
 import React from "react";
 
 import { interactiveLegendStyles } from "./InteractiveLegend.styles";
+import { InteractiveLegendClickButton } from "./InteractiveLegendClickButton";
+import { InteractiveLegendEditAndDeleteButton } from "./InteractiveLegendEditAndDeleteButton";
 
 export enum SortingState {
   Ascending = "ascending",
@@ -16,12 +18,13 @@ export interface ILegendItem {
   disabled?: boolean;
   disabledMessage?: string;
   activated: boolean;
+  index: number;
   sortingState?: SortingState;
   color: string;
   name: string;
-  onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
+  onClick?: (index: number) => void;
+  onDelete?: (index: number) => void;
+  onEdit?: (index: number) => void;
 }
 
 export interface IInteractiveLegendProps {
@@ -53,61 +56,30 @@ export class InteractiveLegend extends React.PureComponent<IInteractiveLegendPro
           <Text nowrap variant={"medium"} className={this.classes.label}>
             {item.name}
           </Text>
-          {item.onEdit !== undefined && (
-            <IconButton
-              className={this.classes.editButton}
-              iconProps={{ iconName: "Edit" }}
-              onClick={item.onEdit}
-            />
-          )}
-          {item.onDelete !== undefined && (
-            <IconButton
-              className={this.classes.deleteButton}
-              iconProps={{ iconName: "Clear" }}
-              onClick={item.onDelete}
-            />
-          )}
+          <InteractiveLegendEditAndDeleteButton
+            index={item.index}
+            onDelete={item.onDelete}
+            onEdit={item.onEdit}
+          />
         </div>
       );
     }
     const rootClass =
       item.activated === false ? this.classes.inactiveItem : this.classes.item;
     return (
       <div className={rootClass} key={index}>
-        <div
-          className={this.classes.clickTarget}
+        <InteractiveLegendClickButton
+          activated={item.activated}
+          color={item.color}
+          index={index}
+          name={item.name}
           onClick={item.onClick}
-          onKeyUp={undefined}
-          role="checkbox"
-          aria-checked={item.activated}
-          tabIndex={index}
-        >
-          <div
-            className={
-              item.activated === false
-                ? this.classes.inactiveColorBox
-                : this.classes.colorBox
-            }
-            style={{ backgroundColor: item.color }}
-          />
-          <Text nowrap variant={"medium"} className={this.classes.label}>
-            {item.name}
-          </Text>
-        </div>
-        {item.onEdit !== undefined && (
-          <IconButton
-            className={this.classes.editButton}
-            iconProps={{ iconName: "Edit", style: { fontSize: "10px" } }}
-            onClick={item.onEdit}
-          />
-        )}
-        {item.onDelete !== undefined && (
-          <IconButton
-            className={this.classes.deleteButton}
-            iconProps={{ iconName: "Clear", style: { fontSize: "10px" } }}
-            onClick={item.onDelete}
-          />
-        )}
+        />
+        <InteractiveLegendEditAndDeleteButton
+          index={item.index}
+          onDelete={item.onDelete}
+          onEdit={item.onEdit}
+        />
       </div>
     );
   }

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

@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Text } from "@fluentui/react";
+import React from "react";
+
+import { interactiveLegendStyles } from "./InteractiveLegend.styles";
+
+interface IInteractiveLegendProps {
+  activated: boolean;
+  color: string;
+  index: number;
+  name: string;
+  onClick?: (index: number) => void;
+}
+
+export class InteractiveLegendClickButton extends React.PureComponent<IInteractiveLegendProps> {
+  private readonly classes = interactiveLegendStyles();
+
+  public render(): React.ReactNode {
+    return (
+      <div
+        className={this.classes.clickTarget}
+        onClick={this.onClick}
+        onKeyUp={undefined}
+        role="checkbox"
+        aria-checked={this.props.activated}
+        tabIndex={this.props.index}
+      >
+        <div
+          className={
+            this.props.activated === false
+              ? this.classes.inactiveColorBox
+              : this.classes.colorBox
+          }
+          style={{ backgroundColor: this.props.color }}
+        />
+        <Text nowrap variant={"medium"} className={this.classes.label}>
+          {this.props.name}
+        </Text>
+      </div>
+    );
+  }
+
+  private onClick = (): void => {
+    this.props.onClick?.(this.props.index);
+  };
+}

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

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IconButton } from "@fluentui/react";
+import React from "react";
+
+import { interactiveLegendStyles } from "./InteractiveLegend.styles";
+
+interface IInteractiveLegendProps {
+  index: number;
+  onDelete?: (index: number) => void;
+  onEdit?: (index: number) => void;
+}
+
+export class InteractiveLegendEditAndDeleteButton extends React.PureComponent<IInteractiveLegendProps> {
+  private readonly classes = interactiveLegendStyles();
+
+  public render(): React.ReactNode {
+    return (
+      <div>
+        {this.props.onEdit !== undefined && (
+          <IconButton
+            className={this.classes.editButton}
+            iconProps={{ iconName: "Edit", style: { fontSize: "10px" } }}
+            onClick={this.onEdit}
+          />
+        )}
+        {this.props.onDelete !== undefined && (
+          <IconButton
+            className={this.classes.deleteButton}
+            iconProps={{ iconName: "Clear", style: { fontSize: "10px" } }}
+            onClick={this.onDelete}
+          />
+        )}
+      </div>
+    );
+  }
+
+  private onEdit = (): void => {
+    this.props.onEdit?.(this.props.index);
+  };
+
+  private onDelete = (): void => {
+    this.props.onDelete?.(this.props.index);
+  };
+}

libs/counterfactuals/src/lib/CounterfactualChart.tsx

@@ -101,7 +101,7 @@ export class CounterfactualChart extends React.PureComponent<
     this.createCopyOfFirstRow();
     this.buildRowOptions(0);
 
-    this.fetchData = _.debounce(this.fetchData.bind(this), 400);
+    this.fetchData = _.debounce(this.fetchData, 400);
 
     this.setState({
       chartProps: this.generateDefaultChartAxes()
@@ -347,9 +347,10 @@ export class CounterfactualChart extends React.PureComponent<
                         FabricStyles.fabricColorPalette[
                           rowIndex + WhatIfConstants.MAX_SELECTION + 1
                         ],
+                      index: rowIndex,
                       name: row[WhatIfConstants.namePath],
-                      onClick: this.toggleCustomActivation.bind(this, rowIndex),
-                      onDelete: this.removeCustomPoint.bind(this, rowIndex)
+                      onClick: this.toggleCustomActivation,
+                      onDelete: this.removeCustomPoint
                     };
                   })}
                 />
@@ -808,21 +809,21 @@ export class CounterfactualChart extends React.PureComponent<
     }
   };
 
-  private toggleCustomActivation(index: number): void {
+  private toggleCustomActivation = (index: number): void => {
     const customPointIsActive = [...this.state.customPointIsActive];
     customPointIsActive[index] = !customPointIsActive[index];
     this.setState({ customPointIsActive });
-  }
+  };
 
-  private removeCustomPoint(index: number): void {
+  private removeCustomPoint = (index: number): void => {
     this.setState((prevState) => {
       const customPoints = [...prevState.customPoints];
       customPoints.splice(index, 1);
       const customPointIsActive = [...prevState.customPointIsActive];
       customPointIsActive.splice(index, 1);
       return { customPointIsActive, customPoints };
     });
-  }
+  };
 
   private saveAsPoint = (): void => {
     const customPoints = [...this.state.customPoints];

libs/counterfactuals/src/lib/CounterfactualList.tsx

@@ -16,7 +16,6 @@ import {
   IDetailsRowFieldsProps,
   IDetailsRowProps,
   IRenderFunction,
-  Link,
   SelectionMode,
   Stack,
   Text,
@@ -37,6 +36,7 @@ import { getCategoricalOption } from "../util/getCategoricalOption";
 import { getFilterFeatures } from "../util/getFilterFeatures";
 
 import { counterfactualListStyle } from "./CounterfactualList.styles";
+import { CounterfactualListSetValue } from "./CounterfactualListSetValue";
 import { counterfactualPanelStyles } from "./CounterfactualPanel.styles";
 import { CustomPredictionLabels } from "./CustomPredictionLabels";
 
@@ -166,7 +166,7 @@ export class CounterfactualList extends React.Component<
     return items;
   }
 
-  private onSelect(idx: number): void {
+  private onSelect = (idx: number): void => {
     const items = this.getItems();
     const data = _.cloneDeep(items[idx]);
     Object.keys(data).forEach((k) => {
@@ -191,7 +191,7 @@ export class CounterfactualList extends React.Component<
       this.props.selectedIndex
     );
     this.setState({ data });
-  }
+  };
 
   private renderName = (
     item?: Record<string, string | number>,
@@ -247,9 +247,7 @@ export class CounterfactualList extends React.Component<
       <Stack>
         <Text>{item.row}</Text>
         {this.context.requestPredictions && (
-          <Link onClick={this.onSelect.bind(this, index)}>
-            {localization.Counterfactuals.WhatIf.setValue}
-          </Link>
+          <CounterfactualListSetValue index={index} onSelect={this.onSelect} />
         )}
       </Stack>
     );