Update queries.latest_query_data on save (#7560)

* Update queries.latest_query_data on save * Add wait on test as loading query and query results may re-render DOM and that makes test fraky * Fix styling report by prettier
2025-12-25 01:03:20 -05:00 · 2025-10-14 22:59:36 +09:00
parent 9503cc9fb8
commit c5aa5da6a2
15 changed files with 126 additions and 173 deletions
--- a/client/cypress/integration/dashboard/filters_spec.js
+++ b/client/cypress/integration/dashboard/filters_spec.js
@@ -23,7 +23,7 @@ describe("Dashboard Filters", () => {
      name: "Query Filters",
      query: `SELECT stage1 AS "stage1::filter", stage2, value FROM (${SQL}) q`,
    };
-    cy.createDashboard("Dashboard Filters").then(dashboard => {
+    cy.createDashboard("Dashboard Filters").then((dashboard) => {
      createQueryAndAddWidget(dashboard.id, queryData)
        .as("widget1TestId")
        .then(() => createQueryAndAddWidget(dashboard.id, queryData, { position: { col: 4 } }))
@@ -32,26 +32,23 @@ describe("Dashboard Filters", () => {
    });
  });

-  it("filters rows in a Table Visualization", function() {
+  it("filters rows in a Table Visualization", function () {
    editDashboard();
    cy.getByTestId("DashboardFilters").should("not.exist");
    cy.getByTestId("DashboardFiltersCheckbox").click();

    cy.getByTestId("DashboardFilters").within(() => {
-      cy.getByTestId("FilterName-stage1::filter")
-        .find(".ant-select-selection-item")
-        .should("have.text", "a");
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select-selection-item").should("have.text", "a");
    });

    cy.getByTestId(this.widget1TestId).within(() => {
      expectTableToHaveLength(4);
      expectFirstColumnToHaveMembers(["a", "a", "a", "a"]);

-      cy.getByTestId("FilterName-stage1::filter")
-        .find(".ant-select")
-        .click();
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select").click();
    });

+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.contains(".ant-select-item-option-content:visible", "b").click();

    cy.getByTestId(this.widget1TestId).within(() => {
@@ -69,14 +66,13 @@ describe("Dashboard Filters", () => {
    // assert that changing a global filter affects all widgets

    cy.getByTestId("DashboardFilters").within(() => {
-      cy.getByTestId("FilterName-stage1::filter")
-        .find(".ant-select")
-        .click();
+      cy.getByTestId("FilterName-stage1::filter").find(".ant-select").click();
    });

+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.contains(".ant-select-item-option-content:visible", "c").click();

-    [this.widget1TestId, this.widget2TestId].forEach(widgetTestId =>
+    [this.widget1TestId, this.widget2TestId].forEach((widgetTestId) =>
      cy.getByTestId(widgetTestId).within(() => {
        expectTableToHaveLength(4);
        expectFirstColumnToHaveMembers(["c", "c", "c", "c"]);
--- a/client/cypress/integration/embed/share_embed_spec.js
+++ b/client/cypress/integration/embed/share_embed_spec.js
@@ -5,8 +5,9 @@ describe("Embedded Queries", () => {
  });

  it("is unavailable when public urls feature is disabled", () => {
-    cy.createQuery({ query: "select name from users order by name" }).then(query => {
+    cy.createQuery({ query: "select name from users order by name" }).then((query) => {
      cy.visit(`/queries/${query.id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
      cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
      cy.clickThrough(`
@@ -15,7 +16,7 @@ describe("Embedded Queries", () => {
        `);
      cy.getByTestId("EmbedIframe")
        .invoke("text")
-        .then(embedUrl => {
+        .then((embedUrl) => {
          // disable the feature
          cy.updateOrgSettings({ disable_public_urls: true });

@@ -23,9 +24,7 @@ describe("Embedded Queries", () => {
          cy.visit(`/queries/${query.id}/source`);
          cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
          cy.getByTestId("QueryPageHeaderMoreButton").click();
-          cy.get(".ant-dropdown-menu-item")
-            .should("exist")
-            .should("not.contain", "Show API Key");
+          cy.get(".ant-dropdown-menu-item").should("exist").should("not.contain", "Show API Key");
          cy.getByTestId("QueryControlDropdownButton").click();
          cy.get(".ant-dropdown-menu-item").should("exist");
          cy.getByTestId("ShowEmbedDialogButton").should("not.exist");
@@ -42,8 +41,9 @@ describe("Embedded Queries", () => {
  });

  it("can be shared without parameters", () => {
-    cy.createQuery({ query: "select name from users order by name" }).then(query => {
+    cy.createQuery({ query: "select name from users order by name" }).then((query) => {
      cy.visit(`/queries/${query.id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
      cy.getByTestId("QueryPageVisualizationTabs", { timeout: 10000 }).should("exist");
      cy.clickThrough(`
@@ -52,7 +52,7 @@ describe("Embedded Queries", () => {
        `);
      cy.getByTestId("EmbedIframe")
        .invoke("text")
-        .then(embedUrl => {
+        .then((embedUrl) => {
          cy.logout();
          cy.visit(embedUrl);
          cy.getByTestId("VisualizationEmbed", { timeout: 10000 }).should("exist");
@@ -90,7 +90,7 @@ describe("Embedded Queries", () => {

    cy.getByTestId("EmbedIframe")
      .invoke("text")
-      .then(embedUrl => {
+      .then((embedUrl) => {
        cy.logout();
        cy.visit(embedUrl);
        cy.getByTestId("VisualizationEmbed", { timeout: 10000 }).should("exist");
--- a/client/cypress/integration/visualizations/box_plot_spec.js
+++ b/client/cypress/integration/visualizations/box_plot_spec.js
@@ -44,6 +44,7 @@ describe("Box Plot", () => {
      .then(({ id }) => cy.createVisualization(id, "BOXPLOT", "Boxplot (Deprecated)", {}))
      .then(({ id: visualizationId, query_id: queryId }) => {
        cy.visit(`queries/${queryId}/source#${visualizationId}`);
+        cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
        cy.getByTestId("ExecuteButton").click();
      });
  });
@@ -61,9 +62,7 @@ describe("Box Plot", () => {
    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting

-    cy.getByTestId("VisualizationPreview")
-      .find("svg")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find("svg").should("exist");

    cy.percySnapshot("Visualizations - Box Plot", { widths: [viewportWidth] });
  });
--- a/client/cypress/integration/visualizations/chart_spec.js
+++ b/client/cypress/integration/visualizations/chart_spec.js
@@ -31,6 +31,7 @@ describe("Chart", () => {

  it("creates Bar charts", function () {
    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();

    const getBarChartAssertionFunction =
@@ -109,6 +110,7 @@ describe("Chart", () => {
  });
  it("colors Bar charts", function () {
    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();
    cy.getByTestId("NewVisualization").click();
    cy.getByTestId("Chart.ColumnMapping.x").selectAntdOption("Chart.ColumnMapping.x.stage");
@@ -123,6 +125,7 @@ describe("Chart", () => {
  });
  it("colors Pie charts", function () {
    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();
    cy.getByTestId("NewVisualization").click();
    cy.getByTestId("Chart.GlobalSeriesType").click();
--- a/client/cypress/integration/visualizations/choropleth_spec.js
+++ b/client/cypress/integration/visualizations/choropleth_spec.js
@@ -34,6 +34,7 @@ describe("Choropleth", () => {
    cy.login();
    cy.createQuery({ query: SQL }).then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
    cy.getByTestId("NewVisualization").click();
@@ -76,9 +77,7 @@ describe("Choropleth", () => {

    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
-      .find(".map-visualization-container.leaflet-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".map-visualization-container.leaflet-container").should("exist");

    cy.percySnapshot("Visualizations - Choropleth", { widths: [viewportWidth] });
  });
--- a/client/cypress/integration/visualizations/cohort_spec.js
+++ b/client/cypress/integration/visualizations/cohort_spec.js
@@ -24,6 +24,7 @@ describe("Cohort", () => {
    cy.login();
    cy.createQuery({ query: SQL }).then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
    cy.getByTestId("NewVisualization").click();
@@ -51,9 +52,7 @@ describe("Cohort", () => {

    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
-      .find("table")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
    cy.percySnapshot("Visualizations - Cohort (simple)", { widths: [viewportWidth] });

    cy.clickThrough(`
@@ -64,9 +63,7 @@ describe("Cohort", () => {

    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
-      .find("table")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
    cy.percySnapshot("Visualizations - Cohort (diagonal)", { widths: [viewportWidth] });
  });
 });
--- a/client/cypress/integration/visualizations/counter_spec.js
+++ b/client/cypress/integration/visualizations/counter_spec.js
@@ -12,6 +12,7 @@ describe("Counter", () => {
    cy.login();
    cy.createQuery({ query: SQL }).then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
    cy.getByTestId("NewVisualization").click();
@@ -24,9 +25,7 @@ describe("Counter", () => {
      Counter.General.ValueColumn.a
    `);

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -43,9 +42,7 @@ describe("Counter", () => {
      "Counter.General.Label": "Custom Label",
    });

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -65,9 +62,7 @@ describe("Counter", () => {
      "Counter.General.TargetValueRowNumber": "2",
    });

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -83,9 +78,7 @@ describe("Counter", () => {
      Counter.General.TargetValueColumn.b
    `);

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -106,9 +99,7 @@ describe("Counter", () => {
      "Counter.General.TargetValueRowNumber": "2",
    });

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -123,9 +114,7 @@ describe("Counter", () => {
      Counter.General.CountRows
    `);

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -151,9 +140,7 @@ describe("Counter", () => {
      "Counter.Formatting.StringSuffix": "%",
    });

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -180,9 +167,7 @@ describe("Counter", () => {
      "Counter.Formatting.StringSuffix": "%",
    });

-    cy.getByTestId("VisualizationPreview")
-      .find(".counter-visualization-container")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find(".counter-visualization-container").should("exist");

    // wait a bit before taking snapshot
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
--- a/client/cypress/integration/visualizations/edit_visualization_dialog_spec.js
+++ b/client/cypress/integration/visualizations/edit_visualization_dialog_spec.js
@@ -5,34 +5,25 @@ describe("Edit visualization dialog", () => {
    cy.login();
    cy.createQuery().then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
  });

  it("opens New Visualization dialog", () => {
-    cy.getByTestId("NewVisualization")
-      .should("exist")
-      .click();
+    cy.getByTestId("NewVisualization").should("exist").click();
    cy.getByTestId("EditVisualizationDialog").should("exist");
    // Default visualization should be selected
-    cy.getByTestId("VisualizationType")
-      .should("exist")
-      .should("contain", "Chart");
-    cy.getByTestId("VisualizationName")
-      .should("exist")
-      .should("have.value", "Chart");
+    cy.getByTestId("VisualizationType").should("exist").should("contain", "Chart");
+    cy.getByTestId("VisualizationName").should("exist").should("have.value", "Chart");
  });

  it("opens Edit Visualization dialog", () => {
    cy.getByTestId("EditVisualization").click();
    cy.getByTestId("EditVisualizationDialog").should("exist");
    // Default `Table` visualization should be selected
-    cy.getByTestId("VisualizationType")
-      .should("exist")
-      .should("contain", "Table");
-    cy.getByTestId("VisualizationName")
-      .should("exist")
-      .should("have.value", "Table");
+    cy.getByTestId("VisualizationType").should("exist").should("contain", "Table");
+    cy.getByTestId("VisualizationName").should("exist").should("have.value", "Table");
  });

  it("creates visualization with custom name", () => {
@@ -44,15 +35,9 @@ describe("Edit visualization dialog", () => {
      VisualizationType.TABLE
    `);

-    cy.getByTestId("VisualizationName")
-      .clear()
-      .type(visualizationName);
+    cy.getByTestId("VisualizationName").clear().type(visualizationName);

-    cy.getByTestId("EditVisualizationDialog")
-      .contains("button", "Save")
-      .click();
-    cy.getByTestId("QueryPageVisualizationTabs")
-      .contains("span", visualizationName)
-      .should("exist");
+    cy.getByTestId("EditVisualizationDialog").contains("button", "Save").click();
+    cy.getByTestId("QueryPageVisualizationTabs").contains("span", visualizationName).should("exist");
  });
 });
--- a/client/cypress/integration/visualizations/funnel_spec.js
+++ b/client/cypress/integration/visualizations/funnel_spec.js
@@ -25,6 +25,7 @@ describe("Funnel", () => {
    cy.login();
    cy.createQuery({ query: SQL }).then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
  });
@@ -59,9 +60,7 @@ describe("Funnel", () => {

    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
-      .find("table")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
    cy.percySnapshot("Visualizations - Funnel (basic)", { widths: [viewportWidth] });

    cy.clickThrough(`
@@ -81,9 +80,7 @@ describe("Funnel", () => {

    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting
-    cy.getByTestId("VisualizationPreview")
-      .find("table")
-      .should("exist");
+    cy.getByTestId("VisualizationPreview").find("table").should("exist");
    cy.percySnapshot("Visualizations - Funnel (extra options)", { widths: [viewportWidth] });
  });
 });
--- a/client/cypress/integration/visualizations/map_spec.js
+++ b/client/cypress/integration/visualizations/map_spec.js
@@ -24,6 +24,7 @@ describe("Map (Markers)", () => {
      .then(({ id }) => cy.createVisualization(id, "MAP", "Map (Markers)", { mapTileUrl }))
      .then(({ id: visualizationId, query_id: queryId }) => {
        cy.visit(`queries/${queryId}/source#${visualizationId}`);
+        cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
        cy.getByTestId("ExecuteButton").click();
      });
  });
@@ -51,9 +52,7 @@ describe("Map (Markers)", () => {
    cy.fillInputs({ "ColorPicker.CustomColor": "blue{enter}" });
    cy.getByTestId("ColorPicker.CustomColor").should("not.be.visible");

-    cy.getByTestId("VisualizationPreview")
-      .find(".leaflet-control-zoom-in")
-      .click();
+    cy.getByTestId("VisualizationPreview").find(".leaflet-control-zoom-in").click();

    // Wait for proper initialization of visualization
    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
@@ -85,9 +84,7 @@ describe("Map (Markers)", () => {
    cy.fillInputs({ "ColorPicker.CustomColor": "maroon{enter}" });
    cy.getByTestId("ColorPicker.CustomColor").should("not.be.visible");

-    cy.getByTestId("VisualizationPreview")
-      .find(".leaflet-control-zoom-in")
-      .click();
+    cy.getByTestId("VisualizationPreview").find(".leaflet-control-zoom-in").click();

    // Wait for proper initialization of visualization
    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
--- a/client/cypress/integration/visualizations/pivot_spec.js
+++ b/client/cypress/integration/visualizations/pivot_spec.js
@@ -19,9 +19,7 @@ const SQL = `
 function createPivotThroughUI(visualizationName, options = {}) {
  cy.getByTestId("NewVisualization").click();
  cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.PIVOT");
-  cy.getByTestId("VisualizationName")
-    .clear()
-    .type(visualizationName);
+  cy.getByTestId("VisualizationName").clear().type(visualizationName);
  if (options.hideControls) {
    cy.getByTestId("PivotEditor.HideControls").click();
    cy.getByTestId("VisualizationPreview")
@@ -29,36 +27,30 @@ function createPivotThroughUI(visualizationName, options = {}) {
      .find(".pvtAxisContainer, .pvtRenderer, .pvtVals")
      .should("be.not.visible");
  }
-  cy.getByTestId("VisualizationPreview")
-    .find("table")
-    .should("exist");
-  cy.getByTestId("EditVisualizationDialog")
-    .contains("button", "Save")
-    .click();
+  cy.getByTestId("VisualizationPreview").find("table").should("exist");
+  cy.getByTestId("EditVisualizationDialog").contains("button", "Save").click();
 }

 describe("Pivot", () => {
  beforeEach(() => {
    cy.login();
-    cy.createQuery({ name: "Pivot Visualization", query: SQL })
-      .its("id")
-      .as("queryId");
+    cy.createQuery({ name: "Pivot Visualization", query: SQL }).its("id").as("queryId");
  });

-  it("creates Pivot with controls", function() {
+  it("creates Pivot with controls", function () {
    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();

    const visualizationName = "Pivot";
    createPivotThroughUI(visualizationName);

-    cy.getByTestId("QueryPageVisualizationTabs")
-      .contains("span", visualizationName)
-      .should("exist");
+    cy.getByTestId("QueryPageVisualizationTabs").contains("span", visualizationName).should("exist");
  });

-  it("creates Pivot without controls", function() {
+  it("creates Pivot without controls", function () {
    cy.visit(`queries/${this.queryId}/source`);
+    cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
    cy.getByTestId("ExecuteButton").click();

    const visualizationName = "Pivot";
@@ -76,7 +68,7 @@ describe("Pivot", () => {
      .should("be.not.visible");
  });

-  it("updates the visualization when results change", function() {
+  it("updates the visualization when results change", function () {
    const options = {
      aggregatorName: "Count",
      data: [], // force it to have a data object, although it shouldn't
@@ -86,8 +78,9 @@ describe("Pivot", () => {
      vals: ["value"],
    };

-    cy.createVisualization(this.queryId, "PIVOT", "Pivot", options).then(visualization => {
+    cy.createVisualization(this.queryId, "PIVOT", "Pivot", options).then((visualization) => {
      cy.visit(`queries/${this.queryId}/source#${visualization.id}`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();

      // assert number of rows is 11
@@ -104,16 +97,14 @@ describe("Pivot", () => {
      cy.wait(200);

      cy.getByTestId("SaveButton").click();
-      cy.getByTestId("ExecuteButton")
-        .should("be.enabled")
-        .click();
+      cy.getByTestId("ExecuteButton").should("be.enabled").click();

      // assert number of rows is 12
      cy.getByTestId("PivotTableVisualization").contains(".pvtGrandTotal", "12");
    });
  });

-  it("takes a snapshot with different configured Pivots", function() {
+  it("takes a snapshot with different configured Pivots", function () {
    const options = {
      aggregatorName: "Sum",
      controls: { enabled: true },
@@ -142,19 +133,20 @@ describe("Pivot", () => {
    ];

    cy.createDashboard("Pivot Visualization")
-      .then(dashboard => {
+      .then((dashboard) => {
        this.dashboardUrl = `/dashboards/${dashboard.id}`;
        return cy.all(
-          pivotTables.map(pivot => () =>
-            cy
-              .createVisualization(this.queryId, "PIVOT", pivot.name, pivot.options)
-              .then(visualization => cy.addWidget(dashboard.id, visualization.id, { position: pivot.position }))
+          pivotTables.map(
+            (pivot) => () =>
+              cy
+                .createVisualization(this.queryId, "PIVOT", pivot.name, pivot.options)
+                .then((visualization) => cy.addWidget(dashboard.id, visualization.id, { position: pivot.position }))
          )
        );
      })
-      .then(widgets => {
+      .then((widgets) => {
        cy.visit(this.dashboardUrl);
-        widgets.forEach(widget => {
+        widgets.forEach((widget) => {
          cy.getByTestId(getWidgetTestId(widget)).within(() =>
            cy.getByTestId("PivotTableVisualization").should("exist")
          );
--- a/client/cypress/integration/visualizations/sankey_sunburst_spec.js
+++ b/client/cypress/integration/visualizations/sankey_sunburst_spec.js
@@ -25,6 +25,7 @@ describe("Sankey and Sunburst", () => {
    beforeEach(() => {
      cy.createQuery({ query: SQL }).then(({ id }) => {
        cy.visit(`queries/${id}/source`);
+        cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
        cy.getByTestId("ExecuteButton").click();
        cy.getByTestId("NewVisualization").click();
        cy.getByTestId("VisualizationType").selectAntdOption("VisualizationType.SUNBURST_SEQUENCE");
@@ -34,37 +35,21 @@ describe("Sankey and Sunburst", () => {
    it("creates Sunburst", () => {
      const visualizationName = "Sunburst";

-      cy.getByTestId("VisualizationName")
-        .clear()
-        .type(visualizationName);
-      cy.getByTestId("VisualizationPreview")
-        .find("svg")
-        .should("exist");
+      cy.getByTestId("VisualizationName").clear().type(visualizationName);
+      cy.getByTestId("VisualizationPreview").find("svg").should("exist");

-      cy.getByTestId("EditVisualizationDialog")
-        .contains("button", "Save")
-        .click();
-      cy.getByTestId("QueryPageVisualizationTabs")
-        .contains("span", visualizationName)
-        .should("exist");
+      cy.getByTestId("EditVisualizationDialog").contains("button", "Save").click();
+      cy.getByTestId("QueryPageVisualizationTabs").contains("span", visualizationName).should("exist");
    });

    it("creates Sankey", () => {
      const visualizationName = "Sankey";

-      cy.getByTestId("VisualizationName")
-        .clear()
-        .type(visualizationName);
-      cy.getByTestId("VisualizationPreview")
-        .find("svg")
-        .should("exist");
+      cy.getByTestId("VisualizationName").clear().type(visualizationName);
+      cy.getByTestId("VisualizationPreview").find("svg").should("exist");

-      cy.getByTestId("EditVisualizationDialog")
-        .contains("button", "Save")
-        .click();
-      cy.getByTestId("QueryPageVisualizationTabs")
-        .contains("span", visualizationName)
-        .should("exist");
+      cy.getByTestId("EditVisualizationDialog").contains("button", "Save").click();
+      cy.getByTestId("QueryPageVisualizationTabs").contains("span", visualizationName).should("exist");
    });
  });

@@ -92,21 +77,22 @@ describe("Sankey and Sunburst", () => {
    },
  ];

-  it("takes a snapshot with Sunburst (1 - 5 stages)", function() {
-    cy.createDashboard("Sunburst Visualization").then(dashboard => {
+  it("takes a snapshot with Sunburst (1 - 5 stages)", function () {
+    cy.createDashboard("Sunburst Visualization").then((dashboard) => {
      this.dashboardUrl = `/dashboards/${dashboard.id}`;
      return cy
        .all(
-          STAGES_WIDGETS.map(sunburst => () =>
-            cy
-              .createQuery({ name: `Sunburst with ${sunburst.name}`, query: sunburst.query })
-              .then(queryData => cy.createVisualization(queryData.id, "SUNBURST_SEQUENCE", "Sunburst", {}))
-              .then(visualization => cy.addWidget(dashboard.id, visualization.id, { position: sunburst.position }))
+          STAGES_WIDGETS.map(
+            (sunburst) => () =>
+              cy
+                .createQuery({ name: `Sunburst with ${sunburst.name}`, query: sunburst.query })
+                .then((queryData) => cy.createVisualization(queryData.id, "SUNBURST_SEQUENCE", "Sunburst", {}))
+                .then((visualization) => cy.addWidget(dashboard.id, visualization.id, { position: sunburst.position }))
          )
        )
-        .then(widgets => {
+        .then((widgets) => {
          cy.visit(this.dashboardUrl);
-          widgets.forEach(widget => {
+          widgets.forEach((widget) => {
            cy.getByTestId(getWidgetTestId(widget)).within(() => cy.get("svg").should("exist"));
          });

@@ -117,21 +103,22 @@ describe("Sankey and Sunburst", () => {
    });
  });

-  it("takes a snapshot with Sankey (1 - 5 stages)", function() {
-    cy.createDashboard("Sankey Visualization").then(dashboard => {
+  it("takes a snapshot with Sankey (1 - 5 stages)", function () {
+    cy.createDashboard("Sankey Visualization").then((dashboard) => {
      this.dashboardUrl = `/dashboards/${dashboard.id}`;
      return cy
        .all(
-          STAGES_WIDGETS.map(sankey => () =>
-            cy
-              .createQuery({ name: `Sankey with ${sankey.name}`, query: sankey.query })
-              .then(queryData => cy.createVisualization(queryData.id, "SANKEY", "Sankey", {}))
-              .then(visualization => cy.addWidget(dashboard.id, visualization.id, { position: sankey.position }))
+          STAGES_WIDGETS.map(
+            (sankey) => () =>
+              cy
+                .createQuery({ name: `Sankey with ${sankey.name}`, query: sankey.query })
+                .then((queryData) => cy.createVisualization(queryData.id, "SANKEY", "Sankey", {}))
+                .then((visualization) => cy.addWidget(dashboard.id, visualization.id, { position: sankey.position }))
          )
        )
-        .then(widgets => {
+        .then((widgets) => {
          cy.visit(this.dashboardUrl);
-          widgets.forEach(widget => {
+          widgets.forEach((widget) => {
            cy.getByTestId(getWidgetTestId(widget)).within(() => cy.get("svg").should("exist"));
          });

--- a/client/cypress/integration/visualizations/word_cloud_spec.js
+++ b/client/cypress/integration/visualizations/word_cloud_spec.js
@@ -64,6 +64,7 @@ describe("Word Cloud", () => {
    cy.login();
    cy.createQuery({ query: SQL }).then(({ id }) => {
      cy.visit(`queries/${id}/source`);
+      cy.wait(1500); // eslint-disable-line cypress/no-unnecessary-waiting
      cy.getByTestId("ExecuteButton").click();
    });
    cy.document().then(injectFont);
@@ -80,9 +81,7 @@ describe("Word Cloud", () => {
    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting

-    cy.getByTestId("VisualizationPreview")
-      .find("svg text")
-      .should("have.length", 11);
+    cy.getByTestId("VisualizationPreview").find("svg text").should("have.length", 11);

    cy.percySnapshot("Visualizations - Word Cloud (Automatic word frequencies)", { widths: [viewportWidth] });
  });
@@ -99,9 +98,7 @@ describe("Word Cloud", () => {
    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting

-    cy.getByTestId("VisualizationPreview")
-      .find("svg text")
-      .should("have.length", 5);
+    cy.getByTestId("VisualizationPreview").find("svg text").should("have.length", 5);

    cy.percySnapshot("Visualizations - Word Cloud (Frequencies from another column)", { widths: [viewportWidth] });
  });
@@ -125,9 +122,7 @@ describe("Word Cloud", () => {
    // Wait for proper initialization of visualization
    cy.wait(500); // eslint-disable-line cypress/no-unnecessary-waiting

-    cy.getByTestId("VisualizationPreview")
-      .find("svg text")
-      .should("have.length", 2);
+    cy.getByTestId("VisualizationPreview").find("svg text").should("have.length", 2);

    cy.percySnapshot("Visualizations - Word Cloud (With filters)", { widths: [viewportWidth] });
  });
--- a/redash/handlers/queries.py
+++ b/redash/handlers/queries.py
@@ -241,6 +241,8 @@ class QueryListResource(BaseQueryListResource):
        query = models.Query.create(**query_def)
        models.db.session.add(query)
        models.db.session.commit()
+        query.update_latest_result_by_query_hash()
+        models.db.session.commit()

        self.record_event({"action": "create", "object_id": query.id, "object_type": "query"})

@@ -364,6 +366,8 @@ class QueryResource(BaseResource):
        try:
            self.update_model(query, query_def)
            models.db.session.commit()
+            query.update_latest_result_by_query_hash()
+            models.db.session.commit()
        except StaleDataError:
            abort(409)

--- a/redash/models/init.py
+++ b/redash/models/init.py
@@ -726,6 +726,23 @@ class Query(ChangeTrackingMixin, TimestampMixin, BelongsToOrgMixin, db.Model):

        return db.session.execute(query, {"ids": tuple(query_ids)}).fetchall()

+    def update_latest_result_by_query_hash(self):
+        query_hash = self.query_hash
+        data_source_id = self.data_source_id
+        query_result = (
+            QueryResult.query.options(load_only("id"))
+            .filter(
+                QueryResult.query_hash == query_hash,
+                QueryResult.data_source_id == data_source_id,
+            )
+            .order_by(QueryResult.retrieved_at.desc())
+            .first()
+        )
+        if query_result:
+            latest_query_data_id = query_result.id
+            self.latest_query_data_id = latest_query_data_id
+            db.session.add(self)
+
    @classmethod
    def update_latest_result(cls, query_result):
        # TODO: Investigate how big an impact this select-before-update makes.