feat: defer canvas pivot/table queries until component is visible

web-common/src/features/canvas/components/pivot/index.ts

@@ -99,6 +99,7 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
       this.parent,
       derived(this.specStore, ($specStore) => $specStore.metrics_view),
       this.config,
+      this.visible,
     );
   }
 

web-common/src/features/canvas/components/pivot/util.ts

@@ -266,12 +266,13 @@ export const usePivotForCanvas = (
   canvas: CanvasEntity,
   metricsViewStore: Readable<string>,
   pivotConfig: Readable<PivotDataStoreConfig>,
+  visible: Readable<boolean>,
 ) => {
   const pivotDashboardContext: PivotDashboardContext = {
     runtimeClient: canvas.client,
     metricsViewName: metricsViewStore,
     queryClient: queryClient,
-    enabled: !!canvas,
+    enabled: visible,
   };
 
   const pivotDataStore = createPivotDataStore(

web-common/src/features/dashboards/pivot/pivot-data-store.ts

@@ -729,7 +729,7 @@ export const usePivotForExplore = memoizeMetricsStore<PivotDataStore>(
       runtimeClient: ctx.runtimeClient,
       metricsViewName: ctx.metricsViewName,
       queryClient: ctx.queryClient,
-      enabled: !!ctx.dashboardStore,
+      enabled: readable(!!ctx.dashboardStore),
     };
     return createPivotDataStore(pivotDashboardContext, pivotConfig);
   },

web-common/src/features/dashboards/pivot/pivot-queries.ts

@@ -1,3 +1,4 @@
+import type { ConnectError } from "@connectrpc/connect";
 import {
   createAndExpression,
   createInExpression,
@@ -11,9 +12,8 @@ import {
   type V1MetricsViewAggregationResponse,
   type V1MetricsViewAggregationResponseDataItem,
   type V1MetricsViewAggregationSort,
+  createQueryServiceMetricsViewAggregation,
 } from "@rilldata/web-common/runtime-client";
-import type { ConnectError } from "@connectrpc/connect";
-import { createQueryServiceMetricsViewAggregation } from "@rilldata/web-common/runtime-client";
 import {
   type CreateQueryResult,
   keepPreviousData,
@@ -71,39 +71,41 @@ export function createPivotAggregationRowQuery(
     hasComparison = true;
   }
 
-  return derived([ctx.metricsViewName], ([metricsViewName], set) =>
-    createQueryServiceMetricsViewAggregation(
-      ctx.runtimeClient,
-      {
-        metricsView: metricsViewName,
-        measures: prepareMeasureForComparison(measures),
-        dimensions,
-        where: sanitiseExpression(whereFilter, undefined),
-        timeRange: {
-          start: timeRange?.start ? timeRange.start : config.time.timeStart,
-          end: timeRange?.end ? timeRange.end : config.time.timeEnd,
-          timeDimension: config.time.timeDimension,
+  return derived(
+    [ctx.metricsViewName, ctx.enabled],
+    ([metricsViewName, enabled], set) =>
+      createQueryServiceMetricsViewAggregation(
+        ctx.runtimeClient,
+        {
+          metricsView: metricsViewName,
+          measures: prepareMeasureForComparison(measures),
+          dimensions,
+          where: sanitiseExpression(whereFilter, undefined),
+          timeRange: {
+            start: timeRange?.start ? timeRange.start : config.time.timeStart,
+            end: timeRange?.end ? timeRange.end : config.time.timeEnd,
+            timeDimension: config.time.timeDimension,
+          },
+          comparisonTimeRange:
+            hasComparison && comparisonTime
+              ? {
+                  start: comparisonTime.start,
+                  end: comparisonTime.end,
+                  timeDimension: config.time.timeDimension,
+                }
+              : undefined,
+          sort,
+          limit,
+          offset,
         },
-        comparisonTimeRange:
-          hasComparison && comparisonTime
-            ? {
-                start: comparisonTime.start,
-                end: comparisonTime.end,
-                timeDimension: config.time.timeDimension,
-              }
-            : undefined,
-        sort,
-        limit,
-        offset,
-      },
-      {
-        query: {
-          enabled: ctx.enabled,
-          placeholderData: keepPreviousData,
+        {
+          query: {
+            enabled,
+            placeholderData: keepPreviousData,
+          },
         },
-      },
-      ctx.queryClient,
-    ).subscribe(set),
+        ctx.queryClient,
+      ).subscribe(set),
   );
 }
 

web-common/src/features/dashboards/pivot/types.ts

@@ -44,7 +44,7 @@ export interface PivotDashboardContext {
   runtimeClient: RuntimeClient;
   metricsViewName: Readable<string>;
   queryClient: QueryClient;
-  enabled: boolean;
+  enabled: Readable<boolean>;
 }
 
 export interface PivotState {