Upgrade plotly.js to version 2 to fix the UI crashing issue (#7359)

yoshiokatsuneo · web-flow · commit 594e2f24efe9 · 2025-03-05T14:30:28.000Z
* Upgrade plotly.js to version 2

* Fix styling error reported by styled
diff --git a/client/cypress/support/visualizations/chart.js b/client/cypress/support/visualizations/chart.js
@@ -3,36 +3,26 @@
  * @param should Passed to should expression after plot points are captured
  */
 export function assertPlotPreview(should = "exist") {
-  cy.getByTestId("VisualizationPreview")
-    .find("g.plot")
-    .should("exist")
-    .find("g.points")
-    .should(should);
+  cy.getByTestId("VisualizationPreview").find("g.overplot").should("exist").find("g.points").should(should);
 }
 
 export function createChartThroughUI(chartName, chartSpecificAssertionFn = () => {}) {
   cy.getByTestId("NewVisualization").click();
   cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.CHART");
-  cy.getByTestId("VisualizationName")
-    .clear()
-    .type(chartName);
+  cy.getByTestId("VisualizationName").clear().type(chartName);
 
   chartSpecificAssertionFn();
 
   cy.server();
   cy.route("POST", "**/api/visualizations").as("SaveVisualization");
 
-  cy.getByTestId("EditVisualizationDialog")
-    .contains("button", "Save")
-    .click();
+  cy.getByTestId("EditVisualizationDialog").contains("button", "Save").click();
 
-  cy.getByTestId("QueryPageVisualizationTabs")
-    .contains("span", chartName)
-    .should("exist");
+  cy.getByTestId("QueryPageVisualizationTabs").contains("span", chartName).should("exist");
 
   cy.wait("@SaveVisualization").should("have.property", "status", 200);
 
-  return cy.get("@SaveVisualization").then(xhr => {
+  return cy.get("@SaveVisualization").then((xhr) => {
     const { id, name, options } = xhr.response.body;
     return cy.wrap({ id, name, options });
   });
@@ -42,19 +32,13 @@ export function assertTabbedEditor(chartSpecificTabbedEditorAssertionFn = () =>
   cy.getByTestId("Chart.GlobalSeriesType").should("exist");
 
   cy.getByTestId("VisualizationEditor.Tabs.Series").click();
-  cy.getByTestId("VisualizationEditor")
-    .find("table")
-    .should("exist");
+  cy.getByTestId("VisualizationEditor").find("table").should("exist");
 
   cy.getByTestId("VisualizationEditor.Tabs.Colors").click();
-  cy.getByTestId("VisualizationEditor")
-    .find("table")
-    .should("exist");
+  cy.getByTestId("VisualizationEditor").find("table").should("exist");
 
   cy.getByTestId("VisualizationEditor.Tabs.DataLabels").click();
-  cy.getByTestId("VisualizationEditor")
-    .getByTestId("Chart.DataLabels.ShowDataLabels")
-    .should("exist");
+  cy.getByTestId("VisualizationEditor").getByTestId("Chart.DataLabels.ShowDataLabels").should("exist");
 
   chartSpecificTabbedEditorAssertionFn();
 
@@ -63,39 +47,29 @@ export function assertTabbedEditor(chartSpecificTabbedEditorAssertionFn = () =>
 
 export function assertAxesAndAddLabels(xaxisLabel, yaxisLabel) {
   cy.getByTestId("VisualizationEditor.Tabs.XAxis").click();
-  cy.getByTestId("Chart.XAxis.Type")
-    .contains(".ant-select-selection-item", "Auto Detect")
-    .should("exist");
+  cy.getByTestId("Chart.XAxis.Type").contains(".ant-select-selection-item", "Auto Detect").should("exist");
 
-  cy.getByTestId("Chart.XAxis.Name")
-    .clear()
-    .type(xaxisLabel);
+  cy.getByTestId("Chart.XAxis.Name").clear().type(xaxisLabel);
 
   cy.getByTestId("VisualizationEditor.Tabs.YAxis").click();
-  cy.getByTestId("Chart.LeftYAxis.Type")
-    .contains(".ant-select-selection-item", "Linear")
-    .should("exist");
+  cy.getByTestId("Chart.LeftYAxis.Type").contains(".ant-select-selection-item", "Linear").should("exist");
 
-  cy.getByTestId("Chart.LeftYAxis.Name")
-    .clear()
-    .type(yaxisLabel);
+  cy.getByTestId("Chart.LeftYAxis.Name").clear().type(yaxisLabel);
 
-  cy.getByTestId("Chart.LeftYAxis.TickFormat")
-    .clear()
-    .type("+");
+  cy.getByTestId("Chart.LeftYAxis.TickFormat").clear().type("+");
 
   cy.getByTestId("VisualizationEditor.Tabs.General").click();
 }
 
 export function createDashboardWithCharts(title, chartGetters, widgetsAssertionFn = () => {}) {
-  cy.createDashboard(title).then(dashboard => {
+  cy.createDashboard(title).then((dashboard) => {
     const dashboardUrl = `/dashboards/${dashboard.id}`;
-    const widgetGetters = chartGetters.map(chartGetter => `${chartGetter}Widget`);
+    const widgetGetters = chartGetters.map((chartGetter) => `${chartGetter}Widget`);
 
     chartGetters.forEach((chartGetter, i) => {
       const position = { autoHeight: false, sizeY: 8, sizeX: 3, col: (i % 2) * 3 };
       cy.get(`@${chartGetter}`)
-        .then(chart => cy.addWidget(dashboard.id, chart.id, { position }))
+        .then((chart) => cy.addWidget(dashboard.id, chart.id, { position }))
         .as(widgetGetters[i]);
     });
 
diff --git a/viz-lib/package.json b/viz-lib/package.json
@@ -46,7 +46,7 @@
     "@types/jest": "^26.0.18",
     "@types/leaflet": "^1.5.19",
     "@types/numeral": "0.0.28",
-    "@types/plotly.js": "^1.54.22",
+    "@types/plotly.js": "^2.35.2",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/tinycolor2": "^1.4.2",
@@ -91,7 +91,7 @@
     "leaflet.markercluster": "^1.1.0",
     "lodash": "^4.17.10",
     "numeral": "^2.0.6",
-    "plotly.js": "1.58.5",
+    "plotly.js": "2.35.3",
     "react-pivottable": "^0.9.0",
     "react-sortable-hoc": "^1.10.1",
     "tinycolor2": "^1.4.1",
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-single-axis.json
@@ -27,15 +27,17 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
       }
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/box-with-second-axis.json
@@ -30,24 +30,27 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
       },
       "yaxis2": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null,
         "overlaying": "y",
         "side": "right"
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
       }
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-single-axis.json
@@ -25,18 +25,21 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
-      }
+      },
+      "hovermode": "x"
     }
   }
 }
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-second-axis.json
@@ -28,27 +28,31 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
       },
       "yaxis2": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null,
         "overlaying": "y",
         "side": "right"
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
-      }
+      },
+      "hovermode": "x"
     }
   }
 }
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-with-stacking.json
@@ -24,18 +24,21 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
-      }
+      },
+      "hovermode": "x"
     }
   }
 }
diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareLayout/default-without-legend.json
@@ -23,18 +23,21 @@
         "automargin": true,
         "showticklabels": true,
         "title": null,
+        "tickformat": null,
         "type": "-"
       },
       "yaxis": {
         "automargin": true,
         "title": null,
+        "tickformat": null,
         "type": "linear",
         "autorange": true,
         "range": null
-      },    
+      },
       "hoverlabel": {
         "namelength": -1
-      }
+      },
+      "hovermode": "x"
     }
   }
 }
diff --git a/viz-lib/src/visualizations/chart/plotly/index.ts b/viz-lib/src/visualizations/chart/plotly/index.ts
@@ -10,6 +10,7 @@ import { prepareCustomChartData, createCustomChartRenderer } from "./customChart
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'setPlotConfig' does not exist on type 't... Remove this comment to see the full error message
 Plotly.setPlotConfig({
   modeBarButtonsToRemove: ["sendDataToCloud"],
+  modeBarButtonsToAdd: ["togglespikelines", "v1hovermode"],
 });
 
 export {
diff --git a/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts b/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts
@@ -21,7 +21,7 @@ function prepareXAxis(axisOptions: any, additionalOptions: any) {
     title: getAxisTitle(axisOptions),
     type: getAxisScaleType(axisOptions),
     automargin: true,
-    tickformat: axisOptions.tickFormat,
+    tickformat: axisOptions.tickFormat ?? null,
   };
 
   if (additionalOptions.sortX && axis.type === "category") {
@@ -49,7 +49,7 @@ function prepareYAxis(axisOptions: any) {
     automargin: true,
     autorange: true,
     range: null,
-    tickformat: axisOptions.tickFormat,
+    tickformat: axisOptions.tickFormat ?? null,
   };
 }
 
@@ -109,7 +109,7 @@ function prepareBoxLayout(layout: any, options: any, data: any) {
 }
 
 export default function prepareLayout(element: any, options: any, data: any) {
-  const layout = {
+  const layout: any = {
     margin: { l: 10, r: 10, b: 5, t: 20, pad: 4 },
     // plot size should be at least 5x5px
     width: Math.max(5, Math.floor(element.offsetWidth)),
@@ -124,6 +124,10 @@ export default function prepareLayout(element: any, options: any, data: any) {
     },
   };
 
+  if (["line", "area", "column"].includes(options.globalSeriesType)) {
+    layout.hovermode = options.swappedAxes ? 'y' : 'x';
+  }
+
   switch (options.globalSeriesType) {
     case "pie":
       return preparePieLayout(layout, options, data);
diff --git a/viz-lib/yarn.lock b/viz-lib/yarn.lock
diff --git a/yarn.lock b/yarn.lock
