Replace dependence plot with highchart lib

apps/dashboard-e2e/src/describer/interpret/aggregateFeatureImportance/describeGlobalExplanationChart.ts

@@ -5,7 +5,7 @@ import { toNumber } from "lodash";
 
 import { Chart, IChartElement } from "../../../util/Chart";
 import { getComboBoxValue, selectComboBox } from "../../../util/comboBox";
-import { ScatterChart } from "../../../util/ScatterChart";
+import { ScatterHighchart } from "../../../util/ScatterHighchart";
 import { IInterpretData } from "../IInterpretData";
 
 const topKLabelReg = /^Top (\d+) features by their importance$/;
@@ -60,10 +60,10 @@ export function describeGlobalExplanationChart<
       });
 
       if (!props.dataShape.noDataset) {
-        const dependencePlotChart = new ScatterChart("#DependencePlot");
+        const dependencePlotChart = new ScatterHighchart("#DependencePlot");
         describe("DependencePlot", () => {
-          beforeEach(() => {
-            selectComboBox("#DependencePlotFeatureSelection", 0);
+          before(() => {
+            selectComboBox("#DependencePlotFeatureSelection", 1);
           });
           it("should render", () => {
             expect(dependencePlotChart.Elements.length).greaterThan(0);

apps/dashboard-e2e/src/util/Chart.ts

@@ -27,6 +27,13 @@ export abstract class Chart<TElement extends IChartElement> {
       )
       .get();
   }
+  protected getHighChartHtmlElements(selector: string): HTMLElement[] {
+    return cy
+      .$$(
+        `${this.container} svg g.highcharts-series-group > g[class*='highcharts-tracker'] > ${selector}`
+      )
+      .get();
+  }
   private getSvgWidth(): number | undefined {
     return cy.$$(`${this.container} svg`).width();
   }

apps/dashboard-e2e/src/util/ScatterHighchart.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Chart, IChartElement } from "./Chart";
+
+// const dReg = /^M([\d.]+),0A(\1),(\1) 0 1,1 0,-(\1)A(\1),(\1) 0 0,1 (\1),0Z$/;
+// const transformReg = /^translate\(([\d.]+),([\d.]+)\)$/;
+
+export interface IHighScatter extends IChartElement {
+  readonly radius: number;
+}
+export class ScatterHighchart extends Chart<IHighScatter> {
+  public get Elements(): any[] {
+    return this.getHighChartHtmlElements("path");
+  }
+
+  public sortByH(): IHighScatter[] {
+    return this.Elements.sort((a, b) => a.top - b.top);
+  }
+  public clickNthPoint(idx: number): void {
+    const offset = this.getNthPointOffset(idx);
+    if (!offset) {
+      return;
+    }
+    cy.get(`${this.container} .nsewdrag.drag`).trigger("mousedown", {
+      clientX: offset.left,
+      clientY: offset.top,
+      eventConstructor: "MouseEvent",
+      force: true
+    });
+    cy.document().then((doc) => {
+      const event = new MouseEvent("mouseup", {
+        bubbles: true,
+        clientX: offset.left,
+        clientY: offset.top
+      });
+      doc.dispatchEvent(event);
+    });
+  }
+
+  private getNthPointOffset(idx: number): JQuery.Coordinates | undefined {
+    return cy.$$(`.trace.scatter:eq(0) .points path:eq(${idx})`).offset();
+  }
+
+  // private readonly getCoordinate = (
+  //   element: HTMLElement,
+  //   idx: number
+  // ): IHighScatter => {
+  //   const d = element.getAttribute("d");
+  //   if (!d) {
+  //     throw new Error(
+  //       `${idx}th path element in svg does not have "d" attribute`
+  //     );
+  //   }
+  //   const exec = dReg.exec(d);
+  //   if (!exec) {
+  //     throw new Error(
+  //       `${idx}th path element in svg have invalid "d" attribute`
+  //     );
+  //   }
+  //   const [, ...strCords] = exec;
+  //   const [radius] = strCords.map((s) => Number(s));
+  //   const transform = element.getAttribute("transform");
+  //   if (!transform) {
+  //     throw new Error(
+  //       `${idx}th path element in svg does not have "transform" attribute`
+  //     );
+  //   }
+  //   const transformExec = transformReg.exec(transform);
+  //   if (!transformExec) {
+  //     throw new Error(
+  //       `${idx}th path element in svg have invalid "transform" attribute ${transform}`
+  //     );
+  //   }
+  //   const [, ...strTransforms] = transformExec;
+  //   const [x, y] = strTransforms.map((s) => Number(s));
+  //   return {
+  //     bottom: y + radius,
+  //     left: x - radius,
+  //     radius,
+  //     right: x + radius,
+  //     top: y - radius
+  //   };
+  // };
+}

apps/widget-e2e/src/describer/modelAssessment/featureImportances/aggregateFeatureImportance/describeGlobalExplanationChart.ts

@@ -5,7 +5,7 @@ import { toNumber } from "lodash";
 
 import { Chart, IChartElement } from "../../../../util/Chart";
 import { getComboBoxValue, selectComboBox } from "../../../../util/comboBox";
-import { ScatterChart } from "../../../../util/ScatterChart";
+import { ScatterHighchart } from "../../../../util/ScatterHighchart";
 import { IModelAssessmentData } from "../../IModelAssessmentData";
 
 const topKLabelReg = /^Top (\d+) features by their importance$/;
@@ -69,7 +69,7 @@ export function describeGlobalExplanationChart<
       });
 
       if (!props.dataShape.featureImportanceData?.noDataset) {
-        const dependencePlotChart = new ScatterChart("#DependencePlot");
+        const dependencePlotChart = new ScatterHighchart("#DependencePlot");
         describe("DependencePlot", () => {
           beforeEach(() => {
             selectComboBox("#DependencePlotFeatureSelection", 0);

apps/widget-e2e/src/util/ScatterHighchart.ts

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { Chart, IChartElement } from "./Chart";
+
+// const dReg = /^M([\d.]+),0A(\1),(\1) 0 1,1 0,-(\1)A(\1),(\1) 0 0,1 (\1),0Z$/;
+// const transformReg = /^translate\(([\d.]+),([\d.]+)\)$/;
+
+export interface IHighScatter extends IChartElement {
+  readonly radius: number;
+}
+export class ScatterHighchart extends Chart<IHighScatter> {
+  public get Elements(): any[] {
+    return this.getHighChartHtmlElements("path");
+  }
+
+  public sortByH(): IHighScatter[] {
+    return this.Elements.sort((a, b) => a.top - b.top);
+  }
+  public clickNthPoint(idx: number): void {
+    const offset = this.getNthPointOffset(idx);
+    if (!offset) {
+      return;
+    }
+    cy.get(`${this.container} .nsewdrag.drag`).trigger("mousedown", {
+      clientX: offset.left,
+      clientY: offset.top,
+      eventConstructor: "MouseEvent",
+      force: true
+    });
+    cy.document().then((doc) => {
+      const event = new MouseEvent("mouseup", {
+        bubbles: true,
+        clientX: offset.left,
+        clientY: offset.top
+      });
+      doc.dispatchEvent(event);
+    });
+  }
+
+  private getNthPointOffset(idx: number): JQuery.Coordinates | undefined {
+    return cy.$$(`.trace.scatter:eq(0) .points path:eq(${idx})`).offset();
+  }
+
+  // private readonly getCoordinate = (
+  //   element: HTMLElement,
+  //   idx: number
+  // ): IHighScatter => {
+  //   const d = element.getAttribute("d");
+  //   if (!d) {
+  //     throw new Error(
+  //       `${idx}th path element in svg does not have "d" attribute`
+  //     );
+  //   }
+  //   const exec = dReg.exec(d);
+  //   if (!exec) {
+  //     throw new Error(
+  //       `${idx}th path element in svg have invalid "d" attribute`
+  //     );
+  //   }
+  //   const [, ...strCords] = exec;
+  //   const [radius] = strCords.map((s) => Number(s));
+  //   const transform = element.getAttribute("transform");
+  //   if (!transform) {
+  //     throw new Error(
+  //       `${idx}th path element in svg does not have "transform" attribute`
+  //     );
+  //   }
+  //   const transformExec = transformReg.exec(transform);
+  //   if (!transformExec) {
+  //     throw new Error(
+  //       `${idx}th path element in svg have invalid "transform" attribute ${transform}`
+  //     );
+  //   }
+  //   const [, ...strTransforms] = transformExec;
+  //   const [x, y] = strTransforms.map((s) => Number(s));
+  //   return {
+  //     bottom: y + radius,
+  //     left: x - radius,
+  //     radius,
+  //     right: x + radius,
+  //     top: y - radius
+  //   };
+  // };
+}

libs/core-ui/src/index.ts

@@ -29,6 +29,7 @@ export * from "./lib/util/generateRoute";
 export * from "./lib/util/getRandomId";
 export * from "./lib/util/getCohortFilterCount";
 export * from "./lib/util/getTreatmentBarChartOptions";
+export * from "./lib/util/getDependencyChartOptions";
 export * from "./lib/util/IGenericChartProps";
 export * from "./lib/util/initializeOfficeFabric";
 export * from "./lib/util/ModelExplanationUtils";

libs/core-ui/src/lib/util/getDependencyChartOptions.ts

@@ -0,0 +1,82 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ITheme } from "@fluentui/react";
+
+import { IHighchartsConfig } from "../Highchart/HighchartTypes";
+
+export interface IDependenceData {
+  x: number;
+  y: number;
+  customData: any[];
+}
+
+export function getDependencyChartOptions(
+  data: IDependenceData[],
+  xLabels: string[] | undefined,
+  theme?: ITheme
+): IHighchartsConfig {
+  const colorTheme = {
+    axisColor: theme?.palette.neutralPrimary,
+    axisGridColor: theme?.palette.neutralLight,
+    backgroundColor: theme?.palette.white,
+    fontColor: theme?.semanticColors.bodyText
+  };
+  return {
+    chart: {
+      animation: false,
+      backgroundColor: colorTheme.backgroundColor,
+      type: "scatter",
+      zoomType: "xy"
+    },
+    legend: {},
+    plotOptions: {
+      scatter: {
+        marker: {
+          radius: 2,
+          states: {
+            hover: {
+              enabled: true,
+              lineColor: colorTheme.axisColor
+            }
+          }
+        },
+        tooltip: {
+          headerFormat: "",
+          pointFormat: `{point.customData.template}`
+        }
+      }
+    },
+    series: [
+      {
+        color: colorTheme.fontColor,
+        data,
+        name: "",
+        type: "scatter"
+      }
+    ],
+    subtitle: {},
+    title: { text: "" },
+    xAxis: {
+      categories: xLabels,
+      labels: {
+        style: {
+          color: colorTheme.fontColor
+        }
+      },
+      title: {
+        text: ""
+      }
+    },
+    yAxis: {
+      labels: {
+        style: {
+          color: colorTheme.fontColor
+        }
+      },
+      title: {
+        text: ""
+      }
+    }
+  };
+}

libs/core-ui/src/lib/util/getErrorBarChartOptions.ts

@@ -21,6 +21,7 @@ export function getErrorBarChartOptions(
   };
   return {
     chart: {
+      animation: false,
       type: "lowmedhigh",
       zoomType: "xy"
     },

libs/core-ui/src/lib/util/getTreatmentBarChartOptions.ts

@@ -34,6 +34,7 @@ export function getTreatmentBarChartOptions(
     : [localization.Counterfactuals.recommendedPolicy];
   return {
     chart: {
+      animation: false,
       backgroundColor: colorTheme.backgroundColor,
       type: "bar"
     },