Add highchart for Dataset Explorer

apps/dashboard-e2e/src/describer/interpret/datasetExplorer/describeAggregatePlot.ts

@@ -22,9 +22,9 @@ export function describeAggregatePlot(dataShape: IInterpretData): void {
         if (columns) {
           for (const [i, column] of columns.entries()) {
             cy.get(
-              `#DatasetExplorerChart svg g.xaxislayer-above g.xtick:nth-child(${
+              `#DatasetExplorerChart g.highcharts-xaxis-labels text:nth-child(${
                 i + 1
-              }) text`
+              })`
             ).should("contain.text", column);
           }
         }

apps/dashboard-e2e/src/describer/interpret/datasetExplorer/describeIndividualDatapoints.ts

@@ -1,22 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ScatterChart } from "../../../util/ScatterChart";
+import { ScatterHighchart } from "../../../util/ScatterHighchart";
 import { IInterpretData } from "../IInterpretData";
 
 import { describeAxisConfigDialog } from "./describeAxisConfigDialog";
 
 export function describeIndividualDatapoints(dataShape: IInterpretData): void {
   describe("Individual datapoints chart", () => {
     const props = {
-      chart: undefined as unknown as ScatterChart,
+      chart: undefined as unknown as ScatterHighchart,
       dataShape
     };
     beforeEach(() => {
       cy.get(
         '#ChartTypeSelection label:contains("Individual datapoints")'
       ).click();
-      props.chart = new ScatterChart("#DatasetExplorerChart");
+      props.chart = new ScatterHighchart("#DatasetExplorerChart");
     });
     describe("Dataset explorer Chart", () => {
       it("should have color label", () => {

apps/widget-e2e/src/describer/modelAssessment/dataExplorer/describeAggregatePlot.ts

@@ -22,9 +22,9 @@ export function describeAggregatePlot(dataShape: IModelAssessmentData): void {
         if (columns) {
           for (const [i, column] of columns.entries()) {
             cy.get(
-              `#DatasetExplorerChart svg g.xaxislayer-above g.xtick:nth-child(${
+              `#DatasetExplorerChart g.highcharts-xaxis-labels text:nth-child(${
                 i + 1
-              }) text`
+              })`
             ).should("contain.text", column);
           }
         }

apps/widget-e2e/src/describer/modelAssessment/dataExplorer/describeIndividualDatapoints.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ScatterChart } from "../../../util/ScatterChart";
+import { ScatterHighchart } from "../../../util/ScatterHighchart";
 import { IModelAssessmentData } from "../IModelAssessmentData";
 
 import { describeAxisConfigDialog } from "./describeAxisConfigDialog";
@@ -11,14 +11,14 @@ export function describeIndividualDatapoints(
 ): void {
   describe("Individual datapoints chart", () => {
     const props = {
-      chart: undefined as unknown as ScatterChart,
+      chart: undefined as unknown as ScatterHighchart,
       dataShape
     };
     beforeEach(() => {
       cy.get(
         '#ChartTypeSelection label:contains("Individual datapoints")'
       ).click();
-      props.chart = new ScatterChart("#DatasetExplorerChart");
+      props.chart = new ScatterHighchart("#DatasetExplorerChart");
     });
     describe("Dataset explorer Chart", () => {
       it("should have color label", () => {

libs/core-ui/src/index.ts

@@ -37,6 +37,7 @@ export * from "./lib/util/Never";
 export * from "./lib/util/PartialRequired";
 export * from "./lib/util/nameof";
 export * from "./lib/util/rowErrorSize";
+export * from "./lib/util/getBoxData";
 export * from "./lib/util/getBasicFilterString";
 export * from "./lib/util/getCausalDisplayFeatureName";
 export * from "./lib/util/getCompositeFilterString";

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

@@ -4,20 +4,23 @@
 import { calculateBoxData } from "./calculateBoxData";
 
 export function getBoxData(x: number[], y: number[]): number[][] {
-  const result = [];
-  let i = 0;
-  while (i < x.length && i < y.length) {
-    let j = i;
-    while (j < x.length && x[i] === x[j]) j++;
-    const temp = calculateBoxData(y.splice(i, j));
+  const dataSet: number[][] = [];
+  x.forEach((value, index) => {
+    if (dataSet[value] === undefined) {
+      dataSet[value] = [];
+    }
+    dataSet[value].push(y[index]);
+  });
+  const result: number[][] = [];
+  const calculatedData = dataSet.map((v) => calculateBoxData(v));
+  calculatedData.forEach((temp) => {
     result.push([
       temp.min,
       temp.lowerPercentile,
       temp.median,
       temp.upperPercentile,
       temp.max
     ]);
-    i = j;
-  }
+  });
   return result;
 }

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

@@ -60,8 +60,7 @@ export function getFeatureImportanceBoxOptions(
       type: "boxplot"
     },
     plotOptions: {
-      series: {
-        cursor: "pointer",
+      boxplot: {
         point: {
           events: {
             click() {

libs/dataset-explorer/src/lib/DatasetExplorerTab.styles.ts

@@ -10,30 +10,32 @@ import {
 } from "office-ui-fabric-react";
 
 export interface IDatasetExplorerTabStyles {
-  page: IStyle;
-  infoIcon: IStyle;
-  helperText: IStyle;
-  infoWithText: IStyle;
-  mainArea: IStyle;
+  boldText: IStyle;
+  callout: IStyle;
+  colorBox: IStyle;
+  chartContainer: IStyle;
+  chartEditorButton: IStyle;
   chartWithAxes: IStyle;
   chartWithVertical: IStyle;
+  cohortDropdown: IStyle;
+  cohortPickerWrapper: IStyle;
+  cohortPickerLabel: IStyle;
   verticalAxis: IStyle;
   rotatedVerticalBox: IStyle;
-  chart: IStyle;
   legendAndText: IStyle;
   horizontalAxisWithPadding: IStyle;
   paddingDiv: IStyle;
   horizontalAxis: IStyle;
-  cohortPickerWrapper: IStyle;
-  cohortPickerLabel: IStyle;
-  boldText: IStyle;
-  colorBox: IStyle;
+  page: IStyle;
+  infoIcon: IStyle;
+  helperText: IStyle;
+  infoWithText: IStyle;
+  individualChartContainer: IStyle;
+  mainArea: IStyle;
   legendLabel: IStyle;
   legendItem: IStyle;
-  legend: IStyle;
-  callout: IStyle;
-  chartEditorButton: IStyle;
   smallItalic: IStyle;
+  sidePanel: IStyle;
 }
 
 export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorerTabStyles> =
@@ -46,14 +48,12 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
       },
       callout: {
         backgroundColor: theme.semanticColors.bodyBackground,
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
         padding: "10px 20px",
         width: "200px"
       },
-      chart: {
-        flexGrow: "1"
+      chartContainer: {
+        height: "100%",
+        width: "90%"
       },
       chartEditorButton: [
         FabricStyles.chartEditorButton,
@@ -64,30 +64,24 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
         }
       ],
       chartWithAxes: {
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: "1",
+        height: "100%",
         paddingRight: "10px",
-        paddingTop: "30px"
+        width: "85%"
       },
       chartWithVertical: {
-        display: "flex",
-        flexDirection: "row",
-        flexGrow: "1",
-        position: "relative"
+        width: "100%"
+      },
+      cohortDropdown: {
+        width: "170px"
       },
       cohortPickerLabel: {
         fontWeight: "600",
         paddingRight: "8px"
       },
       cohortPickerWrapper: {
         alignItems: "center",
-        display: "flex",
-        flexDirection: "row",
         height: "32px",
-        paddingLeft: "63px",
-        paddingTop: "13px"
+        padding: "0 0 0 33px"
       },
       colorBox: {
         borderRadius: "6px",
@@ -102,55 +96,43 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
         paddingRight: "160px"
       },
       horizontalAxis: {
-        flex: 1,
         textAlign: "center"
       },
       horizontalAxisWithPadding: {
-        display: "flex",
-        flexDirection: "row",
-        paddingBottom: "30px"
+        paddingBottom: "20px"
+      },
+      individualChartContainer: {
+        width: "90%"
       },
       infoIcon: {
         fontSize: "23px",
         height: "23px",
         width: "23px"
       },
       infoWithText: {
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "row",
-        paddingLeft: "25px",
+        paddingLeft: "33px",
         width: "100%"
       },
-      legend: {},
       legendAndText: {
         height: "100%",
         width: "195px"
       },
       legendItem: {
         alignItems: "center",
-        display: "flex",
-        flexDirection: "row",
         height: "28px"
       },
       legendLabel: {
-        display: "inline-block",
-        flex: "1"
+        display: "inline-block"
       },
       mainArea: {
-        display: "flex",
-        flexDirection: "row",
-        height: "600px",
+        height: "100%",
         width: "100%"
       },
       paddingDiv: {
         width: "50px"
       },
       page: {
-        boxSizing: "border-box",
         color: theme.semanticColors.bodyText,
-        display: "flex",
-        flexDirection: "column",
         height: "100%",
         padding: "16px 40px 0 14px",
         width: "100%"
@@ -163,12 +145,15 @@ export const datasetExplorerTabStyles: () => IProcessedStyleSet<IDatasetExplorer
         transform: "translateX(-50%) translateY(-50%) rotate(270deg)",
         width: "max-content"
       },
+      sidePanel: {
+        width: "15%"
+      },
       smallItalic: [FabricStyles.placeholderItalic],
       verticalAxis: {
         height: "auto",
         position: "relative",
         top: "0px",
-        width: "64px"
+        width: "65px"
       }
     });
   };