upgrade plotly to latest version 2.27.1 (#2484)

apps/dashboard/jest.config.js

@@ -13,5 +13,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

apps/widget/jest.config.js

@@ -13,5 +13,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

jest.config.js

@@ -15,5 +15,8 @@ module.exports = {
     "<rootDir>/libs/error-analysis",
     "<rootDir>/libs/forecasting",
     "<rootDir>/apps/widget"
+  ],
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
   ]
 };

libs/causality/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/core-ui/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/counterfactuals/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/dataset-explorer/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/e2e/jest.config.js

@@ -8,5 +8,8 @@ module.exports = {
   preset: "../../jest.preset.js",
   transform: {
     "^.+\\.[tj]sx?$": "babel-jest"
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/error-analysis/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewNode.tsx

@@ -3,10 +3,10 @@
 
 import { getTheme } from "@fluentui/react";
 import { getRandomId, SVGToolTip } from "@responsible-ai/core-ui";
-import { HierarchyPointNode } from "d3-hierarchy";
 import React from "react";
 
 import { ColorPalette } from "../../ColorPalette";
+import { IHierarchyPointNode as HierarchyPointNode } from "../../Interfaces/IHierarchyPointNode";
 import { FilterTooltip } from "../FilterTooltip/FilterTooltip";
 
 import { treeViewRendererStyles } from "./TreeViewRenderer.styles";

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewRenderer.tsx

@@ -27,11 +27,7 @@ import {
 import { localization } from "@responsible-ai/localization";
 import { Property } from "csstype";
 import { max as d3max } from "d3-array";
-import {
-  stratify as d3stratify,
-  tree as d3tree,
-  HierarchyPointNode
-} from "d3-hierarchy";
+import { stratify as d3stratify, tree as d3tree } from "d3-hierarchy";
 import { interpolateHcl as d3interpolateHcl } from "d3-interpolate";
 import { scaleLinear as d3scaleLinear } from "d3-scale";
 import { select } from "d3-selection";
@@ -41,6 +37,7 @@ import React from "react";
 
 import { ColorPalette } from "../../ColorPalette";
 import { FilterProps } from "../../FilterProps";
+import { IHierarchyPointNode as HierarchyPointNode } from "../../Interfaces/IHierarchyPointNode";
 import { TreeLegend } from "../TreeLegend/TreeLegend";
 
 import { TreeViewNode } from "./TreeViewNode";

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewState.ts

@@ -7,9 +7,9 @@ import {
   Metrics
 } from "@responsible-ai/core-ui";
 import { Property } from "csstype";
-import { HierarchyPointNode } from "d3-hierarchy";
 
 import { FilterProps } from "../../FilterProps";
+import { IHierarchyPointNode as HierarchyPointNode } from "../../Interfaces/IHierarchyPointNode";
 
 export interface IErrorColorStyle {
   fill: string | undefined;

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Controls/TreeViewRenderer/TreeViewUtils.ts

@@ -3,9 +3,9 @@
 
 import { Metrics } from "@responsible-ai/core-ui";
 import { localization } from "@responsible-ai/localization";
-import { HierarchyPointNode } from "d3-hierarchy";
 
 import { FilterProps } from "../../FilterProps";
+import { IHierarchyPointNode as HierarchyPointNode } from "../../Interfaces/IHierarchyPointNode";
 import { MetricLocalizationType, MetricUtils } from "../../MetricUtils";
 
 import { ITreeNode } from "./TreeViewState";

libs/error-analysis/src/lib/ErrorAnalysisDashboard/Interfaces/IHierarchyPointNode.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as d3hierarchy from "d3-hierarchy";
+
+// This is to get around a typescript import issue with d3-hierarchy
+export type IHierarchyPointNode<TDatum> =
+  d3hierarchy.HierarchyPointNode<TDatum>;

libs/fairness/jest.config.js

@@ -19,5 +19,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

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,

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,

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

libs/forecasting/jest.config.js

@@ -11,5 +11,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/interpret-text/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/interpret-vision/jest.config.js

@@ -11,5 +11,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/interpret/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

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)"]
           ];

libs/interpret/src/lib/MLIDashboard/Controls/ICEPlot.tsx

@@ -18,6 +18,7 @@ import { localization } from "@responsible-ai/localization";
 import {
   AccessibleChart,
   ICategoricalRange,
+  IData,
   INumericRange,
   IPlotlyProperty,
   PlotlyMode,
@@ -25,7 +26,6 @@ import {
 } 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:

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)

libs/localization/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

libs/mlchartlib/jest.config.js

@@ -12,5 +12,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

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>

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): {

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 };
-}
+};

libs/model-assessment/jest.config.js

@@ -27,5 +27,8 @@ module.exports = {
       "babel-jest",
       { configFile: "./babel-jest.config.json", cwd: __dirname }
     ]
-  }
+  },
+  transformIgnorePatterns: [
+    "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+  ]
 };

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",
@@ -45,14 +44,14 @@
     "@fluentui/react": "8.58.0",
     "canvas": "^2.11.2",
     "core-js": "^3.6.5",
-    "d3-array": "^2.8.0",
-    "d3-color": "^2.0.0",
-    "d3-hierarchy": "^2.0.0",
-    "d3-interpolate": "^2.0.1",
-    "d3-scale": "^3.2.3",
-    "d3-selection": "^2.0.0",
-    "d3-shape": "^2.0.0",
-    "d3-zoom": "^2.0.0",
+    "d3-array": "^3.2.4",
+    "d3-color": "^3.1.0",
+    "d3-hierarchy": "^3.1.2",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
     "document-register-element": "1.13.1",
     "eslint-plugin-sort-keys-fix": "^1.1.1",
     "highcharts": "^10.1.0",
@@ -63,16 +62,16 @@
     "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",
     "tslib": "^2.5.0",
-    "uuid": "^8.3.0",
+    "uuid": "^9.0.1",
     "vott-ct": "^2.4.2-rc.0"
   },
   "devDependencies": {
@@ -91,14 +90,14 @@
     "@rollup/plugin-json": "4.1.0",
     "@svgr/rollup": "5.4.0",
     "@testing-library/react": "11.2.5",
-    "@types/d3-array": "^2.5.0",
-    "@types/d3-color": "^2.0.0",
-    "@types/d3-hierarchy": "^2.0.0",
-    "@types/d3-interpolate": "^2.0.0",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-color": "^3.1.3",
+    "@types/d3-hierarchy": "^3.1.6",
+    "@types/d3-interpolate": "^3.0.1",
     "@types/d3-scale": "^3.2.0",
-    "@types/d3-selection": "^2.0.0",
-    "@types/d3-shape": "^2.0.0",
-    "@types/d3-zoom": "^2.0.0",
+    "@types/d3-selection": "^3.0.10",
+    "@types/d3-shape": "^3.1.6",
+    "@types/d3-zoom": "^3.0.8",
     "@types/enzyme": "3.10.5",
     "@types/enzyme-to-json": "1.5.3",
     "@types/jest": "26.0.8",
@@ -108,10 +107,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",
@@ -149,5 +148,10 @@
     "ts-node": "9.1.1",
     "typescript": "4.3.5",
     "worker-loader": "^3.0.8"
+  },
+  "overrides": {
+    "plotly.js": {
+      "d3-hierarchy": "$d3-hierarchy"
+    }
   }
 }

scripts/fixPlotly.js

@@ -1,23 +0,0 @@
-const plotlyFolder = "./node_modules/plotly.js/";
-const jsPath = plotlyFolder + "dist/plotly.js";
-const packagePath = plotlyFolder + "package.json";
-const jsReg = /(define\(d3\).*)\n(\}\.apply\(self\)|\}\(\));/;
-const packageReg = /\"main\":\s\"(.\/lib\/index\.js|\.\/dist\/plotly.js)",/;
-const fs = require("fs");
-
-function replaceFile(path, reg, to) {
-  if (!fs.existsSync(path)) {
-    throw new Error(`${path} does not exist.`);
-  }
-  let content = fs.readFileSync(path, { encoding: "utf-8" });
-  if (!reg.test(content)) {
-    throw new Error(`${path} has wrong content`);
-  }
-  content = content.replace(reg, to);
-  fs.writeFileSync(path, content, { encoding: "utf-8" });
-}
-
-module.exports = function () {
-  replaceFile(jsPath, jsReg, "$1\n}.apply(self);");
-  replaceFile(packagePath, packageReg, '"main": "./dist/plotly.js",');
-};

scripts/postInstall.js

@@ -1,2 +0,0 @@
-const fixPlotly = require("./fixPlotly");
-fixPlotly();