Add svelte-query hook for chart data (#4551)

web-common/src/features/charts/ChartDisplay.svelte

@@ -3,8 +3,9 @@
   import VegaLiteRenderer from "@rilldata/web-common/features/charts/render/VegaLiteRenderer.svelte";
   import { fileArtifacts } from "@rilldata/web-common/features/entity-management/file-artifacts";
   import { extractFileName } from "@rilldata/web-common/features/sources/extract-file-name";
+  import { createRuntimeServiceGetChartData } from "@rilldata/web-common/runtime-client/manual-clients";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+  import { useQueryClient } from "@tanstack/svelte-query";
 
   export let filePath: string;
 
@@ -19,21 +20,12 @@
   $: vegaSpec = $chart?.data?.chart?.spec?.vegaLiteSpec;
   $: data = {};
 
-  async function fetchChartData(chartName: string) {
-    // TODO: replace with prod API call
-    const api_url = `http://localhost:9009/v1/instances/default/charts/${chartName}/data`;
-    const response = await fetch(api_url);
-    if (!response.ok) {
-      error = `HTTP error! status: ${response.status}`;
-      console.warn(response);
-    }
-    return response.json();
-  }
-
-  $: chartDataQuery = createQuery({
-    queryKey: [`chart-data`, chartName, metricsQuery],
-    queryFn: () => fetchChartData(chartName),
-  });
+  $: chartDataQuery = createRuntimeServiceGetChartData(
+    queryClient,
+    $runtime.instanceId,
+    chartName,
+    metricsQuery,
+  );
 
   $: if (!$chartDataQuery.isFetching && $chartDataQuery?.data) {
     data = { table: $chartDataQuery?.data };

web-common/src/features/entity-management/resource-invalidations.ts

@@ -9,6 +9,7 @@ import {
   getRuntimeServiceListResourcesQueryKey,
 } from "@rilldata/web-common/runtime-client";
 import {
+  invalidateChartData,
   invalidateMetricsViewData,
   invalidateProfilingQueries,
   invalidationForMetricsViewData,
@@ -25,6 +26,7 @@ export const MainResourceKinds: {
   [ResourceKind.Model]: true,
   [ResourceKind.MetricsView]: true,
   [ResourceKind.Chart]: true,
+  [ResourceKind.Dashboard]: true,
 };
 const UsedResourceKinds: {
   [kind in ResourceKind]?: true;
@@ -125,6 +127,12 @@ async function invalidateResource(
 
     case ResourceKind.MetricsView:
       return invalidateMetricsViewData(queryClient, name, failed);
+
+    case ResourceKind.Chart:
+      return invalidateChartData(queryClient, name, failed);
+
+    case ResourceKind.Dashboard:
+    // TODO
   }
 }
 

web-common/src/runtime-client/invalidation.ts

@@ -114,3 +114,23 @@ export async function invalidateProfilingQueries(
     type: "active",
   });
 }
+
+export async function invalidateChartData(
+  queryClient: QueryClient,
+  name: string,
+  failed: boolean,
+) {
+  const chartAPIRegex = new RegExp(
+    `/v1/instances/[a-zA-Z0-9-]+/charts/${name}`,
+  );
+  queryClient.removeQueries({
+    predicate: (query) => chartAPIRegex.test(query.queryHash),
+    type: "inactive",
+  });
+  if (failed) return;
+
+  return queryClient.resetQueries({
+    predicate: (query) => chartAPIRegex.test(query.queryHash),
+    type: "active",
+  });
+}

web-common/src/runtime-client/manual-clients.ts

@@ -1,6 +1,9 @@
 // This files contains clients that are not written through GRPC
 
+import { V1ChartSpecResolverProperties } from "@rilldata/web-common/runtime-client/gen/index.schemas";
 import httpClient from "@rilldata/web-common/runtime-client/http-client";
+import { QueryClient } from "@tanstack/query-core";
+import { createQuery } from "@tanstack/svelte-query";
 
 export type V1RuntimeGetConfig = {
   instance_id: string;
@@ -34,3 +37,34 @@ export const runtimeServiceFileUpload = async (
     headers: {},
   });
 };
+
+export function runtimeServiceGetChartData(
+  instanceId: string,
+  chartName: string,
+  signal?: AbortSignal,
+) {
+  return httpClient({
+    url: `/v1/instances/${instanceId}/charts/${chartName}/data`,
+    method: "GET",
+    headers: {},
+    signal,
+  });
+}
+
+export function createRuntimeServiceGetChartData(
+  queryClient: QueryClient,
+  instanceId: string,
+  chartName: string,
+  // we need this till we figure out why last updated is not changing on charts
+  props: V1ChartSpecResolverProperties | undefined,
+) {
+  return createQuery(
+    [`/v1/instances/${instanceId}/charts/${chartName}/data`, props],
+    {
+      queryFn: ({ signal }) =>
+        runtimeServiceGetChartData(instanceId, chartName, signal),
+      enabled: !!instanceId && !!chartName,
+      queryClient,
+    },
+  );
+}