feat(chart): add dynamicQueryObjectCount property to Chart Metadata (#33451)

superset-frontend/packages/superset-ui-core/src/chart/models/ChartMetadata.ts

@@ -49,6 +49,7 @@ export interface ChartMetadataConfig {
   label?: ChartLabel | null;
   labelExplanation?: string | null;
   queryObjectCount?: number;
+  dynamicQueryObjectCount?: boolean;
   parseMethod?: ParseMethod;
   // suppressContextMenu: true hides the default context menu for the chart.
   // This is useful for viz plugins that define their own context menu.
@@ -92,6 +93,8 @@ export default class ChartMetadata {
 
   queryObjectCount: number;
 
+  dynamicQueryObjectCount: boolean;
+
   parseMethod: ParseMethod;
 
   suppressContextMenu?: boolean;
@@ -115,6 +118,7 @@ export default class ChartMetadata {
       label = null,
       labelExplanation = null,
       queryObjectCount = 1,
+      dynamicQueryObjectCount = false,
       parseMethod = 'json-bigint',
       suppressContextMenu = false,
     } = config;
@@ -145,6 +149,7 @@ export default class ChartMetadata {
     this.label = label;
     this.labelExplanation = labelExplanation;
     this.queryObjectCount = queryObjectCount;
+    this.dynamicQueryObjectCount = dynamicQueryObjectCount;
     this.parseMethod = parseMethod;
     this.suppressContextMenu = suppressContextMenu;
   }

superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx

@@ -57,6 +57,7 @@ export const useResultsPane = ({
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [responseError, setResponseError] = useState<string>('');
   const queryCount = metadata?.queryObjectCount ?? 1;
+  const isQueryCountDynamic = metadata?.dynamicQueryObjectCount;
 
   useEffect(() => {
     // it's an invalid formData when gets a errorMessage
@@ -139,19 +140,21 @@ export const useResultsPane = ({
       <EmptyState image="document.svg" title={title} />,
     );
   }
-  return resultResp
-    .slice(0, queryCount)
-    .map((result, idx) => (
-      <SingleQueryResultPane
-        data={result.data}
-        colnames={result.colnames}
-        coltypes={result.coltypes}
-        rowcount={result.rowcount}
-        dataSize={dataSize}
-        datasourceId={queryFormData.datasource}
-        key={idx}
-        isVisible={isVisible}
-        canDownload={canDownload}
-      />
-    ));
+  const resultRespToDisplay = isQueryCountDynamic
+    ? resultResp
+    : resultResp.slice(0, queryCount);
+
+  return resultRespToDisplay.map((result, idx) => (
+    <SingleQueryResultPane
+      data={result.data}
+      colnames={result.colnames}
+      coltypes={result.coltypes}
+      rowcount={result.rowcount}
+      dataSize={dataSize}
+      datasourceId={queryFormData.datasource}
+      key={idx}
+      isVisible={isVisible}
+      canDownload={canDownload}
+    />
+  ));
 };

superset-frontend/src/explore/components/DataTablesPane/test/ResultsPaneOnDashboard.test.tsx

@@ -174,4 +174,33 @@ describe('ResultsPaneOnDashboard', () => {
     expect(await findByText('Results')).toBeVisible();
     expect(await findByText('Results 2')).toBeVisible();
   });
+
+  test('dynamic number of results pane', async () => {
+    const FakeChart = () => <span>test</span>;
+    const metadata = new ChartMetadata({
+      name: 'test-chart',
+      thumbnail: '',
+      dynamicQueryObjectCount: true,
+    });
+
+    const plugin = new ChartPlugin({
+      metadata,
+      Chart: FakeChart,
+    });
+    plugin.configure({ key: VizType.MixedTimeseries }).register();
+
+    const props = createResultsPaneOnDashboardProps({
+      sliceId: 196,
+      vizType: VizType.MixedTimeseries,
+    });
+    const { findByText, queryByText } = render(
+      <ResultsPaneOnDashboard {...props} />,
+      {
+        useRedux: true,
+      },
+    );
+    expect(await findByText('Results')).toBeVisible();
+    expect(await findByText('Results 2')).toBeVisible();
+    expect(queryByText('Results 3')).not.toBeInTheDocument();
+  });
 });