feat(explore): Move timer, row counter and cached pills to chart container (#19458)

* feat(explore): Move timer, row counter and cached pills to chart container

* Hide pills in standalone mode

* Take pills out of chart-container

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

@@ -30,6 +30,7 @@ import {
 } from 'src/utils/localStorageHelpers';
 import { DataTablesPane } from './DataTablesPane';
 import { buildV1ChartDataPayload } from '../exploreUtils';
+import { ChartPills } from './ChartPills';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -116,6 +117,10 @@ const ExploreChartPanel = props => {
     refreshMode: 'debounce',
     refreshRate: 300,
   });
+  const { height: pillsHeight, ref: pillsRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 1000,
+  });
   const [splitSizes, setSplitSizes] = useState(
     getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
   );
@@ -150,10 +155,16 @@ const ExploreChartPanel = props => {
   }, [updateQueryContext]);
 
   const calcSectionHeight = useCallback(
-    percent =>
-      (parseInt(props.height, 10) * percent) / 100 -
-      (gutterHeight / 2 + gutterMargin),
-    [gutterHeight, gutterMargin, props.height, props.standalone],
+    percent => {
+      let containerHeight = parseInt(props.height, 10);
+      if (pillsHeight) {
+        containerHeight -= pillsHeight;
+      }
+      return (
+        (containerHeight * percent) / 100 - (gutterHeight / 2 + gutterMargin)
+      );
+    },
+    [gutterHeight, gutterMargin, pillsHeight, props.height, props.standalone],
   );
 
   const [tableSectionHeight, setTableSectionHeight] = useState(
@@ -179,6 +190,17 @@ const ExploreChartPanel = props => {
     setSplitSizes(sizes);
   };
 
+  const refreshCachedQuery = () => {
+    props.actions.postChartFormData(
+      props.form_data,
+      true,
+      props.timeout,
+      props.chart.id,
+      undefined,
+      props.ownState,
+    );
+  };
+
   const onCollapseChange = openPanelName => {
     let splitSizes;
     if (!openPanelName) {
@@ -229,6 +251,15 @@ const ExploreChartPanel = props => {
   const panelBody = useMemo(
     () => (
       <div className="panel-body" ref={chartPanelRef}>
+        <ChartPills
+          queriesResponse={props.chart.queriesResponse}
+          chartStatus={props.chart.chartStatus}
+          chartUpdateStartTime={props.chart.chartUpdateStartTime}
+          chartUpdateEndTime={props.chart.chartUpdateEndTime}
+          refreshCachedQuery={refreshCachedQuery}
+          rowLimit={props.form_data?.row_limit}
+          ref={pillsRef}
+        />
         {renderChart()}
       </div>
     ),