From 309c064cc808e7402cf1ec8370652045bab8fb43 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Thu, 1 Dec 2022 21:38:23 +0800
Subject: [PATCH] fix(dashboard): chart doesn't resize when tab switch (#22009)

---
 .../integration/dashboard/tabs.test.ts        | 28 +++++++++++++++++++
 .../components/gridComponents/Chart.jsx       |  4 ++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts
index 6c8c559df1..323a8e7f4d 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/tabs.test.ts
@@ -22,6 +22,7 @@ import {
   getChartAliasBySpec,
 } from 'cypress/utils';
 import { TABBED_DASHBOARD } from 'cypress/utils/urls';
+import { expandFilterOnLeftPanel } from './utils';
 
 const TREEMAP = { name: 'Treemap', viz: 'treemap' };
 const FILTER_BOX = { name: 'Region Filter', viz: 'filter_box' };
@@ -91,6 +92,7 @@ describe('Dashboard tabs', () => {
     cy.get('@row-level-tabs').last().click();
     waitForChartLoad(LINE_CHART);
     cy.getBySel('grid-container').find('.line').should('be.visible');
+    cy.get('@row-level-tabs').first().click();
   });
 
   it.skip('should send new queries when tab becomes visible', () => {
@@ -166,4 +168,30 @@ describe('Dashboard tabs', () => {
       });
     });
   });
+
+  it('should update size when switch tab', () => {
+    cy.get('@top-level-tabs')
+      .last()
+      .click()
+      .should('have.class', 'ant-tabs-tab-active');
+
+    expandFilterOnLeftPanel();
+
+    cy.wait(1000);
+
+    cy.get('@top-level-tabs')
+      .first()
+      .click()
+      .should('have.class', 'ant-tabs-tab-active');
+
+    cy.wait(1000);
+
+    cy.get("[data-test-viz-type='treemap'] .chart-container").then(
+      $chartContainer => {
+        expect($chartContainer.get(0).scrollWidth).eq(
+          $chartContainer.get(0).offsetWidth,
+        );
+      },
+    );
+  });
 });
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index da01f493be..f5fa7fa4b3 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -190,7 +190,9 @@ class Chart extends React.Component {
 
       if (
         nextProps.width !== this.props.width ||
-        nextProps.height !== this.props.height
+        nextProps.height !== this.props.height ||
+        nextProps.width !== this.state.width ||
+        nextProps.height !== this.state.height
       ) {
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = setTimeout(this.resize, RESIZE_TIMEOUT);