Fix multiple updates of pivot state leading to cancelled requests (#4162

)

* Fix multiple updates of pivot state

* Fix lint

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

@@ -1,9 +1,9 @@
-import { measureFilterResolutionsStore } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
+import { prepareMeasureFilterResolutions } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { useMetricsView } from "@rilldata/web-common/features/dashboards/selectors/index";
 import { memoizeMetricsStore } from "@rilldata/web-common/features/dashboards/state-managers/memoize-metrics-store";
 import type { StateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
-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 type { TimeRangeString } from "@rilldata/web-common/lib/time/types";
 import type {
   V1MetricsViewAggregationResponse,
@@ -51,71 +51,98 @@ import {
  */
 function getPivotConfig(ctx: StateManagers): Readable<PivotDataStoreConfig> {
   return derived(
-    [
-      useMetricsView(ctx),
-      ctx.dashboardStore,
-      useTimeControlStore(ctx),
-      measureFilterResolutionsStore(ctx),
-    ],
-    ([metricsView, dashboardStore, timeControls, measureFilterResolution]) => {
-      const time: PivotTimeConfig = {
-        timeStart: timeControls.timeStart,
-        timeEnd: timeControls.timeEnd,
-        timeZone: dashboardStore?.selectedTimezone || "UTC",
-        timeDimension: metricsView?.data?.timeDimension || "",
-      };
-
+    [useMetricsView(ctx), ctx.timeRangeSummaryStore, ctx.dashboardStore],
+    ([metricsView, timeRangeSummary, dashboardStore], set) => {
       if (
         !metricsView.data?.measures ||
         !metricsView.data?.dimensions ||
-        !timeControls.ready ||
-        !measureFilterResolution.ready
+        timeRangeSummary.isFetching
       ) {
-        return {
+        set({
           measureNames: [],
           rowDimensionNames: [],
           colDimensionNames: [],
           allMeasures: [],
           allDimensions: [],
           whereFilter: dashboardStore.whereFilter,
-          measureFilter: measureFilterResolution,
+          measureFilter: { ready: true, filter: undefined },
           pivot: dashboardStore.pivot,
-          time,
-        };
+          time: {} as PivotTimeConfig,
+        });
+        return;
       }
 
-      const measureNames = dashboardStore.pivot.columns.measure.map(
-        (m) => m.id,
-      );
+      // This indirection makes sure only one update of dashboard store triggers this
+      const timeControl = timeControlStateSelector([
+        metricsView,
+        timeRangeSummary,
+        dashboardStore,
+      ]);
+      const time: PivotTimeConfig = {
+        timeStart: timeControl.timeStart,
+        timeEnd: timeControl.timeEnd,
+        timeZone: dashboardStore?.selectedTimezone || "UTC",
+        timeDimension: metricsView?.data?.timeDimension || "",
+      };
+      derived(
+        [
+          prepareMeasureFilterResolutions(
+            dashboardStore,
+            timeControl,
+            ctx.queryClient,
+          ),
+        ],
+        ([measureFilterResolution]) => {
+          if (!measureFilterResolution.ready) {
+            return {
+              measureNames: [],
+              rowDimensionNames: [],
+              colDimensionNames: [],
+              allMeasures: [],
+              allDimensions: [],
+              whereFilter: dashboardStore.whereFilter,
+              measureFilter: measureFilterResolution,
+              pivot: dashboardStore.pivot,
+              time,
+            };
+          }
 
-      // This is temporary until we have a better way to handle time grains
-      const rowDimensionNames = dashboardStore.pivot.rows.dimension.map((d) => {
-        if (d.type === PivotChipType.Time) {
-          return `${time.timeDimension}_rill_${d.id}`;
-        }
-        return d.id;
-      });
+          const measureNames = dashboardStore.pivot.columns.measure.map(
+            (m) => m.id,
+          );
 
-      const colDimensionNames = dashboardStore.pivot.columns.dimension.map(
-        (d) => {
-          if (d.type === PivotChipType.Time) {
-            return `${time.timeDimension}_rill_${d.id}`;
-          }
-          return d.id;
-        },
-      );
+          // This is temporary until we have a better way to handle time grains
+          const rowDimensionNames = dashboardStore.pivot.rows.dimension.map(
+            (d) => {
+              if (d.type === PivotChipType.Time) {
+                return `${time.timeDimension}_rill_${d.id}`;
+              }
+              return d.id;
+            },
+          );
 
-      return {
-        measureNames,
-        rowDimensionNames,
-        colDimensionNames,
-        allMeasures: metricsView.data?.measures,
-        allDimensions: metricsView.data?.dimensions,
-        whereFilter: dashboardStore.whereFilter,
-        measureFilter: measureFilterResolution,
-        pivot: dashboardStore.pivot,
-        time,
-      };
+          const colDimensionNames = dashboardStore.pivot.columns.dimension.map(
+            (d) => {
+              if (d.type === PivotChipType.Time) {
+                return `${time.timeDimension}_rill_${d.id}`;
+              }
+              return d.id;
+            },
+          );
+
+          return {
+            measureNames,
+            rowDimensionNames,
+            colDimensionNames,
+            allMeasures: metricsView.data?.measures,
+            allDimensions: metricsView.data?.dimensions,
+            whereFilter: dashboardStore.whereFilter,
+            measureFilter: measureFilterResolution,
+            pivot: dashboardStore.pivot,
+            time,
+          };
+        },
+      ).subscribe(set);
     },
   );
 }