From ba57cb410ee482564f302615afe371c9418ea77d Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Wed, 16 Mar 2022 01:01:21 -0400
Subject: [PATCH] fix(dashboard): scrolling table viz overlaps next chart
 (#19121)

(cherry picked from commit 74910f99d8e1fe0c054780848927b4b54554cec9)
---
 .../components/gridComponents/Chart.jsx       | 20 +++++++++++++++----
 .../components/gridComponents/Chart.test.jsx  |  8 ++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index 7e7c8c5222980..239bb508deb06 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -128,6 +128,8 @@ export default class Chart extends React.Component {
     this.resize = this.resize.bind(this);
     this.setDescriptionRef = this.setDescriptionRef.bind(this);
     this.setHeaderRef = this.setHeaderRef.bind(this);
+    this.getChartHeight = this.getChartHeight.bind(this);
+    this.getDescriptionHeight = this.getDescriptionHeight.bind(this);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -178,21 +180,31 @@ export default class Chart extends React.Component {
     return this.props.cacheBusterProp !== nextProps.cacheBusterProp;
   }
 
+  componentDidMount() {
+    if (this.props.isExpanded) {
+      const descriptionHeight = this.getDescriptionHeight();
+      this.setState({ descriptionHeight });
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.resizeTimeout);
   }
 
   componentDidUpdate(prevProps) {
     if (this.props.isExpanded !== prevProps.isExpanded) {
-      const descriptionHeight =
-        this.props.isExpanded && this.descriptionRef
-          ? this.descriptionRef.offsetHeight
-          : 0;
+      const descriptionHeight = this.getDescriptionHeight();
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState({ descriptionHeight });
     }
   }
 
+  getDescriptionHeight() {
+    return this.props.isExpanded && this.descriptionRef
+      ? this.descriptionRef.offsetHeight
+      : 0;
+  }
+
   getChartHeight() {
     const headerHeight = this.getHeaderHeight();
     return this.state.height - headerHeight - this.state.descriptionHeight;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
index 153838271ad2e..59cbce2090354 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx
@@ -93,6 +93,14 @@ describe('Chart', () => {
     expect(wrapper.find('.slice_description')).toExist();
   });
 
+  it('should calculate the description height if it has one and isExpanded=true', () => {
+    const spy = jest.spyOn(Chart.prototype, 'getDescriptionHeight');
+    const wrapper = setup({ isExpanded: true });
+
+    expect(wrapper.find('.slice_description')).toExist();
+    expect(spy).toHaveBeenCalled();
+  });
+
   it('should call refreshChart when SliceHeader calls forceRefresh', () => {
     const refreshChart = sinon.spy();
     const wrapper = setup({ refreshChart });