upgrade plotly to latest version 2.27.1

microsoft · Jan 5, 2024 · f864dd9 · f864dd9
1 parent 464c9f0
commit f864dd9
Show file tree

Hide file tree

Showing 14 changed files with 657 additions and 1,740 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -15,5 +15,6 @@ module.exports = {
     "<rootDir>/libs/error-analysis",
     "<rootDir>/libs/forecasting",
     "<rootDir>/apps/widget"
-  ]
+  ],
+  transformIgnorePatterns: ["<rootDir>/node_modules/(?!d3-(interpolate|color))"]
 };
diff --git a/libs/fairness/src/lib/Controls/ModelComparisonChartPlotlyProps.ts b/libs/fairness/src/lib/Controls/ModelComparisonChartPlotlyProps.ts
@@ -165,7 +165,7 @@ export function getPlotlyProps(
           y
         );
 
-        series.customdata.push({
+        (series.customdata as Datum[]).push({
           modelId,
           x: x?.toFixed(digitsOfPrecision),
           xBounds,

diff --git a/libs/fairness/src/lib/Controls/OutcomePlot.tsx b/libs/fairness/src/lib/Controls/OutcomePlot.tsx
@@ -170,7 +170,7 @@ export class OutcomePlot extends React.PureComponent<IOutcomePlotProps> {
               ).toFixed(digitsOfPrecision)}%]`
             : "";
 
-        barPlotlyProps.data[0].customdata.push({
+        (barPlotlyProps.data[0].customdata as Datum[]).push({
           outcomeMetric: outcomeMetric.title,
           x: x !== undefined ? (100 * x).toFixed(digitsOfPrecision) : undefined,
           xBounds,

diff --git a/libs/fairness/src/lib/Controls/PerformancePlotHelper.ts b/libs/fairness/src/lib/Controls/PerformancePlotHelper.ts
@@ -93,7 +93,7 @@ export function buildCustomTooltips(
             : "";
         const customdata = barPlotlyProps?.data?.[j]?.customdata;
         if (customdata && _.isArray(customdata)) {
-          customdata.push({
+          (customdata as Datum[]).push({
             outcomeMetric,
             x:
               x !== undefined

diff --git a/libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Beehive.tsx b/libs/interpret/src/lib/MLIDashboard/Controls/FeatureImportance/Beehive.tsx
@@ -27,7 +27,7 @@ import {
 } from "@responsible-ai/mlchartlib";
 import _ from "lodash";
 import memoize from "memoize-one";
-import Plotly from "plotly.js";
+import Plotly, { PlotMarker } from "plotly.js";
 import React from "react";
 
 import { LoadingSpinner } from "../../SharedComponents/LoadingSpinner";
@@ -253,7 +253,7 @@ export class Beehive extends React.PureComponent<
           selectedOption.text
         );
         if (selectedOption.data.isNormalized && plotlyProps.data[0].marker) {
-          plotlyProps.data[0].marker.colorscale = [
+          (plotlyProps.data[0].marker as Partial<PlotMarker>).colorscale = [
             [0, "rgba(0,0,255,0.5)"],
             [1, "rgba(255,0,0,0.5)"]
           ];

diff --git a/libs/interpret/src/lib/MLIDashboard/Controls/ICEPlot.tsx b/libs/interpret/src/lib/MLIDashboard/Controls/ICEPlot.tsx
@@ -18,14 +18,14 @@ import { localization } from "@responsible-ai/localization";
 import {
   AccessibleChart,
   ICategoricalRange,
+  IData,
   INumericRange,
   IPlotlyProperty,
   PlotlyMode,
   RangeTypes
 } from "@responsible-ai/mlchartlib";
 import _, { toNumber } from "lodash";
 import memoize from "memoize-one";
-import { Data } from "plotly.js";
 import React from "react";
 
 import { HelpMessageDict } from "../Interfaces/IStringsParam";
@@ -87,7 +87,7 @@ export class ICEPlot extends React.Component<IIcePlotProps, IIcePlotState> {
       const transposedY: number[][] = Array.isArray(yData[0])
         ? ModelExplanationUtils.transpose2DArray(yData as number[][])
         : [yData as number[]];
-      const data: Data[] = transposedY.map((singleClassValue, classIndex) => {
+      const data: IData[] = transposedY.map((singleClassValue, classIndex) => {
         return {
           hoverinfo: "text",
           mode:

diff --git a/libs/interpret/src/lib/MLIDashboard/utils/getIceChartOption.ts b/libs/interpret/src/lib/MLIDashboard/utils/getIceChartOption.ts
@@ -9,9 +9,8 @@ import {
   ModelTypes
 } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
-import { RangeTypes } from "@responsible-ai/mlchartlib";
+import { RangeTypes, IData } from "@responsible-ai/mlchartlib";
 import { map } from "lodash";
-import { Data } from "plotly.js";
 
 import { buildYAxis } from "./buildYAxis";
 import { mergeXYData } from "./mergeXYData";
@@ -39,7 +38,7 @@ export function getIceChartOption(
   ) {
     return undefined;
   }
-  const data: Data[] = map<number[] | number[][]>(
+  const data: IData[] = map<number[] | number[][]>(
     yData,
     (singleRow: number[] | number[][], rowIndex: number) => {
       const transposedY: number[][] = isTwoDimArray(singleRow)

diff --git a/libs/mlchartlib/src/lib/components/AccessibleChart.tsx b/libs/mlchartlib/src/lib/components/AccessibleChart.tsx
@@ -10,6 +10,7 @@ import { v4 } from "uuid";
 
 import { accessibleChartStyles } from "./AccessibleChart.styles";
 import { formatValue } from "./DisplayFormatters";
+import { IData } from "./IData";
 import { IPlotlyProperty } from "./IPlotlyProperty";
 import { PlotlyThemes, IPlotlyTheme } from "./PlotlyThemes";
 
@@ -97,7 +98,7 @@ export class AccessibleChart extends React.Component<IAccessibleChartProps> {
     );
   }
 
-  private createTableWithPlotlyData(data: Plotly.Data[]): React.ReactNode {
+  private createTableWithPlotlyData(data: IData[]): React.ReactNode {
     return (
       <table className={accessibleChartStyles.plotlyTable}>
         <tbody>

diff --git a/libs/mlchartlib/src/lib/components/ChartBuilder.ts b/libs/mlchartlib/src/lib/components/ChartBuilder.ts
@@ -15,10 +15,7 @@ interface IRow {
   size: any;
 }
 export class ChartBuilder {
-  public static buildPlotlySeries<T>(
-    datum: IData,
-    rows: T[]
-  ): Array<Partial<Data>> {
+  public static buildPlotlySeries<T>(datum: IData, rows: T[]): IData[] {
     const groupingDictionary: { [key: string]: Partial<Data> } = {};
     let defaultSeries: Partial<Data> | undefined;
     const datumLevelPaths: string = datum.datapointLevelAccessors
@@ -43,7 +40,7 @@ export class ChartBuilder {
     // the preferred solution of size ref
     const maxBubbleValue = 10;
     projectedRows.forEach((row) => {
-      let series: Partial<Data>;
+      let series: IData;
 
       // Handle mutiple group by in the future
       if (datum.groupBy && datum.groupBy.length > 0) {
@@ -52,20 +49,20 @@ export class ChartBuilder {
           if (defaultSeries === undefined) {
             defaultSeries = ChartBuilder.buildDefaultSeries(datum);
           }
-          series = defaultSeries;
+          series = defaultSeries as IData;
         } else {
           if (groupingDictionary[key] === undefined) {
             const temp = ChartBuilder.buildDefaultSeries(datum);
             temp.name = key;
             groupingDictionary[key] = temp;
           }
-          series = groupingDictionary[key];
+          series = groupingDictionary[key] as IData;
         }
       } else {
         if (defaultSeries === undefined) {
           defaultSeries = ChartBuilder.buildDefaultSeries(datum);
         }
-        series = defaultSeries;
+        series = defaultSeries as IData;
       }
 
       // Due to logging supporting heterogeneous metric types, a metric can be a scalar on one run and a vector on another
@@ -146,7 +143,7 @@ export class ChartBuilder {
     Object.keys(groupingDictionary).forEach((key) => {
       result.push(groupingDictionary[key]);
     });
-    return result;
+    return result as IData[];
   }
 
   private static getHasVectors(row: IRow): {

diff --git a/libs/mlchartlib/src/lib/components/IData.ts b/libs/mlchartlib/src/lib/components/IData.ts
@@ -1,11 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { Data } from "plotly.js";
+import { BoxPlotData, PlotData } from "plotly.js";
 
 import { IAccessor } from "./IAccessor";
 
-export interface IData extends Data {
+export type IData = (Partial<PlotData> | Partial<BoxPlotData>) & {
   xAccessor?: string;
   xAccessorLowerBound?: string;
   xAccessorUpperBound?: string;
@@ -20,4 +20,4 @@ export interface IData extends Data {
   maxMarkerSize?: number;
   seriesLevelAccessors?: { [key: string]: IAccessor };
   datapointLevelAccessors?: { [key: string]: IAccessor };
-}
+};
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "format:check": "nx format:check",
     "format:write": "nx format:write",
     "help": "nx help",
-    "postinstall": "node ./scripts/postInstall.js",
     "kill": "taskkill /IM:node.exe /F",
     "lint": "cross-env NODE_OPTIONS=--max_old_space_size=4096 nx lint",
     "lintall": "nx workspace-lint && cross-env NODE_OPTIONS=--max_old_space_size=4096 nx run-many --target=lint --all && yarn prettier . --check",
@@ -41,6 +40,11 @@
     "update": "nx migrate latest",
     "workspace-generator": "nx workspace-generator"
   },
+  "jest": {
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/(?!d3)/"
+    ]
+  },
   "dependencies": {
     "@fluentui/react": "8.58.0",
     "canvas": "^2.11.2",
@@ -63,11 +67,11 @@
     "memoize-one": "^5.1.1",
     "minimist": "^1.2.6",
     "moment": "^2.29.4",
-    "plotly.js": "^1.48.0",
+    "plotly.js": "^2.27.1",
     "pyodide": "^0.21.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-plotly.js": "^2.5.0",
+    "react-plotly.js": "^2.6.0",
     "react-router-dom": "^5.0.1",
     "regenerator-runtime": "0.13.7",
     "socket.io-client": "^4.7.2",
@@ -108,10 +112,10 @@
     "@types/memoize-one": "^5.1.1",
     "@types/node": "14.14.33",
     "@types/node-fetch": "2.6.5",
-    "@types/plotly.js": "^1.48.0",
+    "@types/plotly.js": "^2.12.32",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
-    "@types/react-plotly.js": "^2.5.0",
+    "@types/react-plotly.js": "^2.6.3",
     "@types/react-router-dom": "5.1.7",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "4.28.4",

diff --git a/scripts/fixPlotly.js b/scripts/fixPlotly.js
diff --git a/scripts/postInstall.js b/scripts/postInstall.js