feat(extension): Add extension for chart header (#34678)

superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts

@@ -23,8 +23,13 @@ import {
   ComponentType,
 } from 'react';
 import type { Editor } from 'brace';
-import { BaseFormData } from '../query';
-import { JsonResponse } from '../connection';
+import type { QueryData } from '../chart/types/QueryResponse';
+import type {
+  BaseFormData,
+  LatestQueryFormData,
+  QueryFormData,
+} from '../query';
+import type { JsonResponse } from '../connection';
 
 /**
  * A function which returns text (or marked-up text)
@@ -219,6 +224,19 @@ export interface DateFilterControlProps {
   isOverflowingFilterBar?: boolean;
 }
 
+export interface ExploreChartHeaderProps {
+  chartId: number;
+  queriesResponse: QueryData[] | null;
+  sliceFormData: QueryFormData | null;
+  queryFormData: QueryFormData;
+  lastRendered: number;
+  latestQueryFormData: LatestQueryFormData;
+  chartUpdateEndTime: number | null;
+  chartUpdateStartTime: number;
+  queryController: AbortController | null;
+  triggerQuery: boolean;
+}
+
 export type Extensions = Partial<{
   'alertsreports.header.icon': ComponentType;
   'load.drillby.options': LoadDrillByOptions;
@@ -251,4 +269,5 @@ export type Extensions = Partial<{
     ComponentType<SQLTablePreviewExtensionProps>,
   ][];
   'filter.dateFilterControl': ComponentType<DateFilterControlProps>;
+  'explore.chart.header': ComponentType<ExploreChartHeaderProps>;
 }>;

superset-frontend/src/explore/components/ExploreChartPanel/index.tsx

@@ -31,6 +31,7 @@ import {
   useTheme,
   QueryFormData,
   JsonObject,
+  getExtensionsRegistry,
 } from '@superset-ui/core';
 import ChartContainer from 'src/components/Chart/ChartContainer';
 import {
@@ -50,6 +51,9 @@ import { ChartPills } from '../ChartPills';
 import { ExploreAlert } from '../ExploreAlert';
 import useResizeDetectorByObserver from './useResizeDetectorByObserver';
 
+const extensionsRegistry = getExtensionsRegistry();
+const DefaultHeader: React.FC = ({ children }) => <>{children}</>;
+
 export interface ExploreChartPanelProps {
   actions: {
     setForceQuery: (force: boolean) => void;
@@ -149,6 +153,9 @@ const ExploreChartPanel = ({
     width: chartPanelWidth,
     height: chartPanelHeight,
   } = useResizeDetectorByObserver();
+
+  const ChartHeaderExtension =
+    extensionsRegistry.get('explore.chart.header') ?? DefaultHeader;
   const [splitSizes, setSplitSizes] = useState<PanelSizes>(
     isFeatureEnabled(FeatureFlag.DatapanelClosedByDefault)
       ? INITIAL_SIZES
@@ -367,16 +374,29 @@ const ExploreChartPanel = ({
             `}
           />
         )}
-        <ChartPills
+        <ChartHeaderExtension
+          chartId={chart.id}
+          queriesResponse={chart.queriesResponse}
+          sliceFormData={slice?.form_data ?? null}
+          queryFormData={formData}
+          lastRendered={chart.lastRendered}
+          latestQueryFormData={chart.latestQueryFormData}
+          chartUpdateEndTime={chart.chartUpdateEndTime ?? 0}
           chartUpdateStartTime={chart.chartUpdateStartTime}
-          chartUpdateEndTime={chart.chartUpdateEndTime ?? undefined}
-          refreshCachedQuery={refreshCachedQuery}
-          rowLimit={formData?.row_limit ?? undefined}
-          {...(chart.queriesResponse && {
-            queriesResponse: chart.queriesResponse,
-          })}
-          {...(chart.chartStatus && { chartStatus: chart.chartStatus })}
-        />
+          queryController={chart.queryController}
+          triggerQuery={chart.triggerQuery}
+        >
+          <ChartPills
+            chartUpdateStartTime={chart.chartUpdateStartTime}
+            chartUpdateEndTime={chart.chartUpdateEndTime ?? 0}
+            refreshCachedQuery={refreshCachedQuery}
+            rowLimit={formData?.row_limit ?? 0}
+            {...(chart.queriesResponse && {
+              queriesResponse: chart.queriesResponse,
+            })}
+            {...(chart.chartStatus && { chartStatus: chart.chartStatus })}
+          />
+        </ChartHeaderExtension>
         {renderChart()}
       </div>
     ),