fix: cancelled queries in leaderboard while changing filters

web-common/src/features/dashboards/aggregation-api-utils.ts

@@ -0,0 +1,34 @@
+import type { QueryObserverResult } from "@rilldata/svelte-query";
+import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import { timeControlStateSelector } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import type {
+  V1ExploreSpec,
+  V1MetricsViewSpec,
+  V1MetricsViewTimeRangeResponse,
+} from "@rilldata/web-common/runtime-client";
+
+export function getAggregationAPIRequestForExplore(
+  metricsViewSpec: V1MetricsViewSpec,
+  exploreSpec: V1ExploreSpec,
+  timeRangeQuery: QueryObserverResult<V1MetricsViewTimeRangeResponse, unknown>,
+  exploreState: MetricsExplorerEntity,
+) {
+  const timeControls = timeControlStateSelector([
+    metricsViewSpec,
+    exploreSpec,
+    timeRangeQuery,
+    exploreState,
+  ]);
+
+  const timeRange = {
+    start: timeControls.timeStart,
+    end: timeControls.timeEnd,
+  };
+
+  const comparisonTimeRange = timeControls.showTimeComparison
+    ? {
+        start: timeControls.comparisonTimeStart,
+        end: timeControls.comparisonTimeEnd,
+      }
+    : undefined;
+}

web-common/src/features/dashboards/time-series/timeseries-data-store.ts

@@ -5,7 +5,7 @@ import {
 } from "@rilldata/web-common/features/dashboards/state-managers/selectors/measures";
 import type { StateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
 import { sanitiseExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import { timeControlStateSelector } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   createTotalsForMeasure,
   createUnfilteredTotalsForMeasure,
@@ -20,7 +20,10 @@ import {
   createQueryServiceMetricsViewTimeSeries,
 } from "@rilldata/web-common/runtime-client";
 import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
-import type { CreateQueryResult } from "@tanstack/svelte-query";
+import type {
+  CreateQueryResult,
+  QueryObserverResult,
+} from "@tanstack/svelte-query";
 import { type Writable, derived, writable, type Readable } from "svelte/store";
 import { memoizeMetricsStore } from "../state-managers/memoize-metrics-store";
 import {
@@ -60,10 +63,36 @@ export function createMetricsViewTimeSeries(
     [
       ctx.runtime,
       ctx.metricsViewName,
+      ctx.validSpecStore,
+      ctx.timeRangeSummaryStore,
       ctx.dashboardStore,
-      useTimeControlStore(ctx),
     ],
-    ([runtime, metricsViewName, dashboardStore, timeControls], set) =>
+    (
+      [runtime, metricsViewName, validSpec, timeRangeSummary, dashboardStore],
+      set,
+    ) => {
+      if (
+        !validSpec?.data?.metricsView ||
+        !validSpec?.data?.explore ||
+        timeRangeSummary.isFetching ||
+        !dashboardStore
+      ) {
+        set({
+          isFetching: true,
+          isError: false,
+        } as QueryObserverResult<V1MetricsViewTimeSeriesResponse, HTTPError>);
+        return;
+      }
+
+      const { metricsView, explore } = validSpec.data;
+      // This indirection makes sure only one update of dashboard store triggers this
+      const timeControls = timeControlStateSelector([
+        metricsView,
+        explore,
+        timeRangeSummary,
+        dashboardStore,
+      ]);
+
       createQueryServiceMetricsViewTimeSeries(
         runtime.instanceId,
         metricsViewName,
@@ -87,25 +116,25 @@ export function createMetricsViewTimeSeries(
         {
           query: {
             enabled:
-              !!timeControls.ready &&
               !!ctx.dashboardStore &&
               // in case of comparison, we need to wait for the comparison start time to be available
               (!isComparison || !!timeControls.comparisonAdjustedStart),
             queryClient: ctx.queryClient,
             keepPreviousData: true,
           },
         },
-      ).subscribe(set),
+      ).subscribe(set);
+    },
   );
 }
 
 export function createTimeSeriesDataStore(
   ctx: StateManagers,
 ): TimeSeriesDataStore {
   return derived(
-    [ctx.validSpecStore, useTimeControlStore(ctx), ctx.dashboardStore],
-    ([validSpec, timeControls, dashboardStore], set) => {
-      if (!validSpec.data || !timeControls.ready || timeControls.isFetching) {
+    [ctx.validSpecStore, ctx.timeRangeSummaryStore, ctx.dashboardStore],
+    ([validSpec, timeRangeSummary, dashboardStore], set) => {
+      if (!validSpec.data || timeRangeSummary.isFetching || !dashboardStore) {
         set({
           isFetching: true,
           isError: false,
@@ -114,12 +143,19 @@ export function createTimeSeriesDataStore(
         return;
       }
 
+      const { metricsView, explore } = validSpec.data;
+      // This indirection makes sure only one update of dashboard store triggers this
+      const timeControls = timeControlStateSelector([
+        metricsView,
+        explore,
+        timeRangeSummary,
+        dashboardStore,
+      ]);
+
       const showComparison = timeControls.showTimeComparison;
       const interval =
         timeControls.selectedTimeRange?.interval ?? timeControls.minTimeGrain;
 
-      const { metricsView, explore } = validSpec.data;
-
       const allMeasures = explore?.measures ?? [];
       let measures = allMeasures;
       const expandedMeasuerName = dashboardStore?.tdd?.expandedMeasureName;

web-common/src/features/dashboards/time-series/totals-data-store.ts

@@ -1,3 +1,4 @@
+import type { QueryObserverResult } from "@rilldata/svelte-query";
 import { mergeMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import type { StateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
 import {
@@ -6,7 +7,7 @@ import {
   matchExpressionByName,
   sanitiseExpression,
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
-import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import { timeControlStateSelector } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
 import {
   createQueryServiceMetricsViewAggregation,
   type V1MetricsViewAggregationResponse,
@@ -24,10 +25,36 @@ export function createTotalsForMeasure(
     [
       ctx.runtime,
       ctx.metricsViewName,
-      useTimeControlStore(ctx),
+      ctx.validSpecStore,
+      ctx.timeRangeSummaryStore,
       ctx.dashboardStore,
     ],
-    ([runtime, metricsViewName, timeControls, dashboard], set) =>
+    (
+      [runtime, metricsViewName, validSpec, timeRangeSummary, dashboard],
+      set,
+    ) => {
+      if (
+        !validSpec?.data?.metricsView ||
+        !validSpec?.data?.explore ||
+        timeRangeSummary.isFetching ||
+        !dashboard
+      ) {
+        set({
+          isFetching: true,
+          isError: false,
+        } as QueryObserverResult<V1MetricsViewAggregationResponse, HTTPError>);
+        return;
+      }
+
+      const { metricsView, explore } = validSpec.data;
+      // This indirection makes sure only one update of dashboard store triggers this
+      const timeControls = timeControlStateSelector([
+        metricsView,
+        explore,
+        timeRangeSummary,
+        dashboard,
+      ]);
+
       createQueryServiceMetricsViewAggregation(
         runtime.instanceId,
         metricsViewName,
@@ -49,7 +76,8 @@ export function createTotalsForMeasure(
             queryClient: ctx.queryClient,
           },
         },
-      ).subscribe(set),
+      ).subscribe(set);
+    },
   );
 }
 
@@ -62,10 +90,36 @@ export function createUnfilteredTotalsForMeasure(
     [
       ctx.runtime,
       ctx.metricsViewName,
-      useTimeControlStore(ctx),
+      ctx.validSpecStore,
+      ctx.timeRangeSummaryStore,
       ctx.dashboardStore,
     ],
-    ([runtime, metricsViewName, timeControls, dashboard], set) => {
+    (
+      [runtime, metricsViewName, validSpec, timeRangeSummary, dashboard],
+      set,
+    ) => {
+      if (
+        !validSpec?.data?.metricsView ||
+        !validSpec?.data?.explore ||
+        timeRangeSummary.isFetching ||
+        !dashboard
+      ) {
+        set({
+          isFetching: true,
+          isError: false,
+        } as QueryObserverResult<V1MetricsViewAggregationResponse, HTTPError>);
+        return;
+      }
+
+      const { metricsView, explore } = validSpec.data;
+      // This indirection makes sure only one update of dashboard store triggers this
+      const timeControls = timeControlStateSelector([
+        metricsView,
+        explore,
+        timeRangeSummary,
+        dashboard,
+      ]);
+
       const filter = sanitiseExpression(
         mergeMeasureFilters(dashboard),
         undefined,

web-common/src/features/dashboards/workspace/Dashboard.svelte

@@ -16,7 +16,10 @@
   import LeaderboardDisplay from "../leaderboard/LeaderboardDisplay.svelte";
   import RowsViewerAccordion from "../rows-viewer/RowsViewerAccordion.svelte";
   import { getStateManagers } from "../state-managers/state-managers";
-  import { useTimeControlStore } from "../time-controls/time-control-store";
+  import {
+    timeControlStateSelector,
+    useTimeControlStore,
+  } from "../time-controls/time-control-store";
   import TimeDimensionDisplay from "../time-dimension-details/TimeDimensionDisplay.svelte";
   import MetricsTimeSeriesCharts from "../time-series/MetricsTimeSeriesCharts.svelte";
 
@@ -35,10 +38,9 @@
 
     dashboardStore,
     validSpecStore,
+    timeRangeSummaryStore,
   } = StateManagers;
 
-  const timeControlsStore = useTimeControlStore(StateManagers);
-
   const { cloudDataViewer, readOnly } = featureFlags;
 
   let exploreContainerWidth: number;
@@ -69,7 +71,12 @@
 
   $: hidePivot = isEmbedded && $explore.data?.explore?.embedsHidePivot;
 
-  $: timeControls = $timeControlsStore;
+  $: timeControls = timeControlStateSelector([
+    metricsView,
+    $explore.data?.explore,
+    $timeRangeSummaryStore,
+    $dashboardStore,
+  ]);
 
   $: timeRange = {
     start: timeControls.timeStart,