fix: Show Data panel on resize (#12250)

* Show Data panel on resize

* Revert back tableSectionHeight

* FIx lint

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -61,12 +61,11 @@ const MIN_SIZES = [300, 50];
 const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
 
 const Styles = styled.div`
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   align-content: stretch;
-  overflow: hidden;
+  overflow: auto;
 
   & > div:last-of-type {
     flex-basis: 100%;
@@ -116,9 +115,6 @@ const ExploreChartPanel = props => {
     );
   };
 
-  const [chartSectionHeight, setChartSectionHeight] = useState(
-    calcSectionHeight(INITIAL_SIZES[0]) - CHART_PANEL_PADDING,
-  );
   const [tableSectionHeight, setTableSectionHeight] = useState(
     calcSectionHeight(INITIAL_SIZES[1]),
   );
@@ -133,14 +129,11 @@ const ExploreChartPanel = props => {
       );
     }, 100);
     calcHeaderSize();
-    document.addEventListener('resize', calcHeaderSize);
-    return () => document.removeEventListener('resize', calcHeaderSize);
+    window.addEventListener('resize', calcHeaderSize);
+    return () => window.removeEventListener('resize', calcHeaderSize);
   }, [props.standalone]);
 
-  const recalcPanelSizes = ([northPercent, southPercent]) => {
-    setChartSectionHeight(
-      calcSectionHeight(northPercent) - CHART_PANEL_PADDING,
-    );
+  const recalcPanelSizes = ([, southPercent]) => {
     setTableSectionHeight(calcSectionHeight(southPercent));
   };
 
@@ -169,14 +162,14 @@ const ExploreChartPanel = props => {
 
   const renderChart = () => {
     const { chart } = props;
-
+    const newHeight = calcSectionHeight(splitSizes[0]) - CHART_PANEL_PADDING;
     return (
       <ParentSize>
         {({ width }) =>
           width > 0 && (
             <ChartContainer
               width={Math.floor(width)}
-              height={chartSectionHeight}
+              height={newHeight}
               annotationData={chart.annotationData}
               chartAlert={chart.chartAlert}
               chartStackTrace={chart.chartStackTrace}
@@ -237,7 +230,10 @@ const ExploreChartPanel = props => {
   const panelBody = <div className="panel-body">{renderChart()}</div>;
 
   return (
-    <Styles className="panel panel-default chart-container">
+    <Styles
+      className="panel panel-default chart-container"
+      style={{ height: props.height }}
+    >
       <div className="panel-heading" ref={panelHeadingRef}>
         {header}
       </div>