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

* Upgrade plotly.js to version 2 * Fix styling error reported by styled
2025-12-19 17:37:19 -05:00 · 2025-03-05 23:30:28 +09:00
parent 3275a9e459
commit 594e2f24ef
12 changed files with 1172 additions and 2814 deletions
--- 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]);
    });

--- 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",
--- 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
      }
--- 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,11 +30,13 @@
        "automargin": true,
        "showticklabels": true,
        "title": null,
+        "tickformat": null,
        "type": "-"
      },
      "yaxis": {
        "automargin": true,
        "title": null,
+        "tickformat": null,
        "type": "linear",
        "autorange": true,
        "range": null
@@ -42,12 +44,13 @@
      "yaxis2": {
        "automargin": true,
        "title": null,
+        "tickformat": null,
        "type": "linear",
        "autorange": true,
        "range": null,
        "overlaying": "y",
        "side": "right"
-      },    
+      },
      "hoverlabel": {
        "namelength": -1
      }
--- 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"
    }
  }
 }
--- 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,11 +28,13 @@
        "automargin": true,
        "showticklabels": true,
        "title": null,
+        "tickformat": null,
        "type": "-"
      },
      "yaxis": {
        "automargin": true,
        "title": null,
+        "tickformat": null,
        "type": "linear",
        "autorange": true,
        "range": null
@@ -40,15 +42,17 @@
      "yaxis2": {
        "automargin": true,
        "title": null,
+        "tickformat": null,
        "type": "linear",
        "autorange": true,
        "range": null,
        "overlaying": "y",
        "side": "right"
-      },    
+      },
      "hoverlabel": {
        "namelength": -1
-      }
+      },
+      "hovermode": "x"
    }
  }
 }
--- 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"
    }
  }
 }
--- 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"
    }
  }
 }
--- 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 {
--- 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);
--- a/viz-lib/yarn.lock
+++ b/viz-lib/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock