Use new canvas resolver api

rilldata · Jan 14, 2025 · 88dcce2 · 88dcce2
1 parent 8e6a2af
commit 88dcce2
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 80 deletions.
diff --git a/web-common/src/features/canvas/Canvas.svelte b/web-common/src/features/canvas/Canvas.svelte
@@ -29,7 +29,7 @@
     remoteContent,
   } = fileArtifact);
 
-  $: spec = structuredClone($validSpecStore?.data ?? spec);
+  $: spec = structuredClone($validSpecStore?.data?.canvas ?? spec);
 
   $: ({ items = [] } = spec);
 

diff --git a/web-common/src/features/canvas/CanvasThemeProvider.svelte b/web-common/src/features/canvas/CanvasThemeProvider.svelte
@@ -10,16 +10,18 @@
   $: themeFromUrl = $page.url.searchParams.get("theme");
 
   let theme: ReturnType<typeof useTheme>;
-  $: themeName = themeFromUrl ?? $validSpecStore?.data?.theme;
+  $: themeName = themeFromUrl ?? $validSpecStore?.data?.canvas?.theme;
   $: if (themeName) theme = useTheme($runtime.instanceId, themeName);
 
   $: setTheme(
-    $theme?.data?.theme?.spec ?? $validSpecStore?.data?.embeddedTheme,
+    $theme?.data?.theme?.spec ?? $validSpecStore?.data?.canvas?.embeddedTheme,
   );
 
   onMount(() => {
     // Handle the case where we have data in cache but the dashboard is not mounted yet
-    setTheme($theme?.data?.theme?.spec ?? $validSpecStore?.data?.embeddedTheme);
+    setTheme(
+      $theme?.data?.theme?.spec ?? $validSpecStore?.data?.canvas?.embeddedTheme,
+    );
   });
 </script>
 

diff --git a/web-common/src/features/canvas/filters/CanvasFilters.svelte b/web-common/src/features/canvas/filters/CanvasFilters.svelte
@@ -2,34 +2,30 @@
   import Calendar from "@rilldata/web-common/components/icons/Calendar.svelte";
   import CanvasGrainSelector from "@rilldata/web-common/features/canvas/filters/CanvasGrainSelector.svelte";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
-  import { TimeRangePreset } from "@rilldata/web-common/lib/time/types";
   import CanvasComparisonPill from "./CanvasComparisonPill.svelte";
   import CanvasSuperPill from "./CanvasSuperPill.svelte";
 
-  const { canvasEntity } = getCanvasStateManagers();
-  const { timeControls } = canvasEntity;
+  const ctx = getCanvasStateManagers();
+  const { timeControls } = ctx.canvasEntity;
 
   $: selectedTimeRange = timeControls.selectedTimeRange;
   $: selectedComparisonTimeRange = timeControls?.selectedComparisonTimeRange;
   $: activeTimeZone = timeControls.selectedTimezone;
+  $: allTimeRange = timeControls.timeRangeSummaryStore(ctx);
 
-  const allTimeRange = {
-    name: TimeRangePreset.ALL_TIME,
-    start: new Date(0),
-    end: new Date(),
-  };
+  $: console.log($allTimeRange);
 </script>
 
 <div class="flex flex-col gap-y-2 w-full h-20 justify-center ml-2">
   <div class="flex flex-row flex-wrap gap-x-2 gap-y-1.5 items-center">
     <Calendar size="16px" />
     <CanvasSuperPill
-      {allTimeRange}
+      allTimeRange={$allTimeRange}
       selectedTimeRange={$selectedTimeRange}
       activeTimeZone={$activeTimeZone}
     />
     <CanvasComparisonPill
-      {allTimeRange}
+      allTimeRange={$allTimeRange}
       selectedTimeRange={$selectedTimeRange}
       selectedComparisonTimeRange={$selectedComparisonTimeRange}
     />

diff --git a/web-common/src/features/canvas/filters/CanvasSuperPill.svelte b/web-common/src/features/canvas/filters/CanvasSuperPill.svelte
@@ -28,18 +28,16 @@
   export let activeTimeZone: string;
 
   const ctx = getCanvasStateManagers();
-  const { canvasName, canvasEntity } = ctx;
+  const { validSpecStore, canvasName, canvasEntity } = ctx;
   const { timeControls } = canvasEntity;
 
   $: localUserPreferences = initLocalUserPreferenceStore($canvasName);
 
-  // $: canvasSpec = $validSpecStore.data;
+  $: canvasSpec = $validSpecStore.data?.canvas;
 
   $: selectedRange = selectedTimeRange?.name ?? ALL_TIME_RANGE_ALIAS;
 
-  // TODO: Add default timeRange to resource
-  // $: defaultTimeRange = $validSpecStore?.data?.defaultPreset?.timeRange;
-  let defaultTimeRange = "PT24H";
+  $: defaultTimeRange = canvasSpec?.defaultPreset?.timeRange || "PT24H";
 
   $: interval = selectedTimeRange
     ? Interval.fromDateTimes(
@@ -48,14 +46,7 @@
       )
     : Interval.fromDateTimes(allTimeRange.start, allTimeRange.end);
 
-  // TODO: Add timezone key to resource
-  // $: availableTimeZones = canvasSpec?.timeZones ?? [];
-  let availableTimeZones = [
-    "America/Los_Angeles",
-    "America/New_York",
-    "Europe/London",
-    "Asia/Kolkata",
-  ];
+  $: availableTimeZones = canvasSpec?.timeZones ?? [];
 
   $: ({
     latestWindowTimeRanges,

diff --git a/web-common/src/features/canvas/inspector/PageEditor.svelte b/web-common/src/features/canvas/inspector/PageEditor.svelte
@@ -43,7 +43,7 @@
     : typeof rawTheme === "string"
       ? rawTheme
       : rawTheme instanceof YAMLMap
-        ? $validSpecStore?.data?.embeddedTheme
+        ? $validSpecStore?.data?.canvas?.embeddedTheme
         : undefined;
 
   function stringGuard(value: unknown | undefined): string {

diff --git a/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte b/web-common/src/features/canvas/inspector/VisualCanvasEditing.svelte
@@ -24,7 +24,8 @@
 
   $: selectedComponentName =
     $selectedComponentIndex !== null
-      ? $validSpecStore?.data?.items?.[$selectedComponentIndex]?.component
+      ? $validSpecStore?.data?.canvas?.items?.[$selectedComponentIndex]
+          ?.component
       : null;
 
   async function updateProperties(

diff --git a/web-common/src/features/canvas/selector.ts b/web-common/src/features/canvas/selector.ts
@@ -1,14 +1,19 @@
-import type { CreateQueryOptions } from "@rilldata/svelte-query";
+import type {
+  CreateQueryOptions,
+  CreateQueryResult,
+} from "@rilldata/svelte-query";
 import {
   ResourceKind,
   useFilteredResources,
 } from "@rilldata/web-common/features/entity-management/resource-selectors";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 import {
-  createRuntimeServiceGetResource,
+  createQueryServiceResolveCanvas,
   type RpcStatus,
   type V1CanvasSpec,
-  type V1GetResourceResponse,
+  type V1MetricsViewV2,
+  type V1ResolveCanvasResponse,
+  type V1ResolveCanvasResponseResolvedComponents,
 } from "@rilldata/web-common/runtime-client";
 import type { ErrorType } from "@rilldata/web-common/runtime-client/http-client";
 
@@ -38,30 +43,48 @@ export function useDefaultMetrics(instanceId: string) {
   });
 }
 
+export interface CanvasValidResponse {
+  canvas: V1CanvasSpec | undefined;
+  components: V1ResolveCanvasResponseResolvedComponents | undefined;
+  metricsViews: Record<string, V1MetricsViewV2 | undefined>;
+}
+
 export function useCanvasValidSpec(
   instanceId: string,
   canvasName: string,
   queryOptions?: CreateQueryOptions<
-    V1GetResourceResponse,
+    V1ResolveCanvasResponse,
     ErrorType<RpcStatus>,
-    V1CanvasSpec | undefined
+    CanvasValidResponse
   >,
-) {
+): CreateQueryResult<CanvasValidResponse, ErrorType<RpcStatus>> {
   const defaultQueryOptions: CreateQueryOptions<
-    V1GetResourceResponse,
+    V1ResolveCanvasResponse,
     ErrorType<RpcStatus>,
-    V1CanvasSpec | undefined
+    CanvasValidResponse
   > = {
-    select: (data) => data?.resource?.canvas?.state?.validSpec,
+    select: (data) => {
+      const metricsViews: Record<string, V1MetricsViewV2 | undefined> = {};
+      const refMetricsViews = data?.referencedMetricsViews;
+      if (refMetricsViews) {
+        Object.keys(refMetricsViews).forEach((key) => {
+          metricsViews[key] = refMetricsViews?.[key]?.metricsView;
+        });
+      }
+
+      return {
+        canvas: data.canvas?.canvas?.state?.validSpec,
+        components: data.resolvedComponents,
+        metricsViews,
+      };
+    },
     queryClient,
     enabled: !!canvasName,
   };
-  return createRuntimeServiceGetResource(
+  return createQueryServiceResolveCanvas(
     instanceId,
-    {
-      "name.kind": ResourceKind.Canvas,
-      "name.name": canvasName,
-    },
+    canvasName,
+    {},
     {
       query: {
         ...defaultQueryOptions,

diff --git a/web-common/src/features/canvas/state-managers/state-managers.ts b/web-common/src/features/canvas/state-managers/state-managers.ts
@@ -1,8 +1,8 @@
-import { useCanvasValidSpec } from "@rilldata/web-common/features/canvas/selector";
 import {
-  type RpcStatus,
-  type V1CanvasSpec,
-} from "@rilldata/web-common/runtime-client";
+  useCanvasValidSpec,
+  type CanvasValidResponse,
+} from "@rilldata/web-common/features/canvas/selector";
+import { type RpcStatus } from "@rilldata/web-common/runtime-client";
 import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import type { QueryClient, QueryObserverResult } from "@tanstack/svelte-query";
@@ -16,7 +16,7 @@ export type StateManagers = {
   canvasName: Writable<string>;
   canvasEntity: CanvasEntity;
   validSpecStore: Readable<
-    QueryObserverResult<V1CanvasSpec | undefined, RpcStatus>
+    QueryObserverResult<CanvasValidResponse | undefined, RpcStatus>
   >;
   queryClient: QueryClient;
 };
@@ -39,7 +39,7 @@ export function createStateManagers({
   const canvasEntity = useCanvasEntity(canvasName);
 
   const validSpecStore: Readable<
-    QueryObserverResult<V1CanvasSpec | undefined, RpcStatus>
+    QueryObserverResult<CanvasValidResponse, RpcStatus>
   > = derived([runtime, canvasNameStore], ([r, canvasName], set) =>
     useCanvasValidSpec(r.instanceId, canvasName, { queryClient }).subscribe(
       set,

diff --git a/web-common/src/features/canvas/stores/canvas-time-control.ts b/web-common/src/features/canvas/stores/canvas-time-control.ts
@@ -15,7 +15,9 @@ export class CanvasTimeControls {
   selectedComparisonTimeRange: Writable<DashboardTimeControls | undefined>;
   showTimeComparison: Writable<boolean>;
   selectedTimezone: Writable<string>;
-  allTimeRange: Readable<TimeRange>;
+  isReady: Writable<boolean>;
+
+  timeRangeSummaryStore: (ctx: StateManagers) => Readable<TimeRange>;
 
   constructor() {
     this.selectedTimeRange = writable({
@@ -27,34 +29,20 @@ export class CanvasTimeControls {
     this.selectedComparisonTimeRange = writable(undefined);
     this.showTimeComparison = writable(false);
     this.selectedTimezone = writable("UTC");
-  }
 
-  combineAllTimeRange(ctx: StateManagers) {
-    const timeRangeSummaryStore: Readable<TimeRange> = derived(
-      [ctx.runtime, ctx.validSpecStore],
-      ([r, validSpec], set) => {
-        const metricsReferred = new Set<string>();
-        if (validSpec?.data?.items?.length) {
-          validSpec.data.items.forEach((component) => {
-            // TODO: Spec should contain individual component spec
-            const metricsView = component["metrics_view"] as string | undefined;
-            if (metricsView) {
-              metricsReferred.add(metricsView);
-            }
-          });
-        } else {
-          return set({
-            start: new Date(0),
-            end: new Date(),
-          });
-        }
-        console.log(metricsReferred);
-        if (metricsReferred.size === 0) {
+    this.timeRangeSummaryStore = (ctx) =>
+      derived([ctx.runtime, ctx.validSpecStore], ([r, validSpec], set) => {
+        const metricsReferred = Object.keys(
+          validSpec?.data?.metricsViews || {},
+        );
+        if (!metricsReferred.length) {
           return set({
             start: new Date(0),
             end: new Date(),
           });
         }
+
+        console.log("metricsReferred", metricsReferred);
         const timeRangeQueries = [...metricsReferred].map((metricView) => {
           return createQueryServiceMetricsViewTimeRange(
             r.instanceId,
@@ -71,10 +59,9 @@ export class CanvasTimeControls {
         });
 
         return derived(timeRangeQueries, (timeRanges, querySet) => {
-          let start = new Date(0);
-          let end = new Date();
+          let start = new Date();
+          let end = new Date(0);
           timeRanges.forEach((timeRange) => {
-            console.log(timeRange);
             const metricsStart = timeRange.data?.timeRangeSummary?.min;
             const metricsEnd = timeRange.data?.timeRangeSummary?.max;
             if (metricsStart) {
@@ -90,11 +77,7 @@ export class CanvasTimeControls {
           });
           querySet({ start, end });
         }).subscribe(set);
-      },
-    );
-
-    this.allTimeRange = timeRangeSummaryStore;
-    return timeRangeSummaryStore;
+      });
   }
 
   setTimeZone(timezone: string) {