diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx index 7e7c8c522298..239bb508deb0 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 153838271ad2..59cbce209035 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 });