fix: avoid using global runtime in loader funciton

web-admin/src/routes/+layout.ts

@@ -14,9 +14,7 @@ import { redirectToLoginOrRequestAccess } from "@rilldata/web-admin/features/aut
 import { fetchOrganizationPermissions } from "@rilldata/web-admin/features/organizations/selectors";
 import { fetchProjectDeploymentDetails } from "@rilldata/web-admin/features/projects/selectors";
 import { initPosthog } from "@rilldata/web-common/lib/analytics/posthog";
-import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.js";
 import { fixLocalhostRuntimePort } from "@rilldata/web-common/runtime-client/fix-localhost-runtime-port";
-import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import { error, redirect, type Page } from "@sveltejs/kit";
 
 export const load = async ({ params, url, route }) => {
@@ -84,13 +82,7 @@ export const load = async ({ params, url, route }) => {
       runtime: runtimeData,
     } = await fetchProjectDeploymentDetails(organization, project, token);
 
-    await runtime.setRuntime(
-      queryClient,
-      fixLocalhostRuntimePort(runtimeData.host ?? ""),
-      runtimeData.instanceId,
-      runtimeData.jwt?.token,
-      runtimeData.jwt?.authContext,
-    );
+    runtimeData.host = fixLocalhostRuntimePort(runtimeData.host ?? "");
 
     return {
       organizationPermissions,

web-admin/src/routes/[organization]/[project]/-/share/[token]/+layout.ts

@@ -13,10 +13,7 @@ export const load = async ({ params: { token }, parent }) => {
     }
 
     const { explore, metricsView, defaultExplorePreset } =
-      await fetchExploreSpec(
-        runtime.instanceId as string,
-        tokenData.token.resourceName,
-      );
+      await fetchExploreSpec(runtime, tokenData.token.resourceName);
 
     return {
       explore,

web-admin/src/routes/[organization]/[project]/explore/[dashboard]/+layout.ts

@@ -17,7 +17,7 @@ export const load = async ({ params, depends, parent }) => {
 
   try {
     const { explore, metricsView, defaultExplorePreset } =
-      await fetchExploreSpec(runtime?.instanceId, exploreName);
+      await fetchExploreSpec(runtime, exploreName);
 
     // used to merge home bookmark to url state
     const bookmarks = await fetchBookmarks(project.id, exploreName);

web-common/src/features/explores/selectors.ts

@@ -14,7 +14,6 @@ import {
   createRuntimeServiceGetExplore,
   getQueryServiceMetricsViewTimeRangeQueryKey,
   getRuntimeServiceGetExploreQueryKey,
-  queryServiceMetricsViewTimeRange,
   runtimeServiceGetExplore,
   type RpcStatus,
   type V1ExploreSpec,
@@ -24,7 +23,11 @@ import {
   type V1ExplorePreset,
   V1ExploreWebView,
 } from "@rilldata/web-common/runtime-client";
-import type { ErrorType } from "@rilldata/web-common/runtime-client/http-client";
+import {
+  type ErrorType,
+  httpClient,
+} from "@rilldata/web-common/runtime-client/http-client";
+import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import { error, redirect } from "@sveltejs/kit";
 
 export function useExplore(
@@ -83,17 +86,26 @@ export function useExploreValidSpec(
   );
 }
 
-export async function fetchExploreSpec(
-  instanceId: string,
-  exploreName: string,
-) {
-  const queryParams = {
+export async function fetchExploreSpec(runtime: Runtime, exploreName: string) {
+  const params = {
     name: exploreName,
   };
-  const queryKey = getRuntimeServiceGetExploreQueryKey(instanceId, queryParams);
+  const queryKey = getRuntimeServiceGetExploreQueryKey(
+    runtime.instanceId,
+    params,
+  );
   const queryFunction: QueryFunction<
     Awaited<ReturnType<typeof runtimeServiceGetExplore>>
-  > = ({ signal }) => runtimeServiceGetExplore(instanceId, queryParams, signal);
+  > = ({ signal }) =>
+    httpClient<V1GetExploreResponse>(
+      {
+        url: `/v1/instances/${runtime.instanceId}/resources/explore`,
+        method: "get",
+        params,
+        signal,
+      },
+      runtime,
+    );
 
   const response = await queryClient.fetchQuery({
     queryFn: queryFunction,
@@ -118,10 +130,19 @@ export async function fetchExploreSpec(
     metricsViewName
   ) {
     fullTimeRange = await queryClient.fetchQuery({
-      queryFn: () =>
-        queryServiceMetricsViewTimeRange(instanceId, metricsViewName, {}),
+      queryFn: ({ signal }) =>
+        httpClient<V1MetricsViewTimeRangeResponse>(
+          {
+            url: `/v1/instances/${runtime.instanceId}/queries/metrics-views/${metricsViewName}/time-range-summary`,
+            method: "post",
+            headers: { "Content-Type": "application/json" },
+            data: {},
+            signal,
+          },
+          runtime,
+        ),
       queryKey: getQueryServiceMetricsViewTimeRangeQueryKey(
-        instanceId,
+        runtime.instanceId,
         metricsViewName,
         {},
       ),

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

@@ -20,15 +20,18 @@ export const httpRequestQueue = new HttpRequestQueue();
 
 export const httpClient = async <T>(
   config: FetchWrapperOptions,
+  // used to override the global runtime in cases where it is either not initialised or is stale
+  // this could happen when switching projects with different runtimes
+  runtimeData = get(runtime),
 ): Promise<T> => {
   // Naive request interceptors
 
   // Set host
-  const host = get(runtime).host;
+  const host = runtimeData.host;
   const interceptedConfig = { ...config, baseUrl: host };
 
   // Set JWT
-  let jwt = get(runtime).jwt;
+  let jwt = runtimeData.jwt;
   if (jwt && jwt.token) {
     jwt = await maybeWaitForFreshJWT(jwt);
     interceptedConfig.headers = {

web-local/src/routes/(viz)/explore/[name]/+layout.ts

@@ -4,15 +4,13 @@ import { error } from "@sveltejs/kit";
 import { get } from "svelte/store";
 
 export const load = async ({ params, depends }) => {
-  const { instanceId } = get(runtime);
-
   const exploreName = params.name;
 
   depends(exploreName, "explore");
 
   try {
     const { explore, metricsView, defaultExplorePreset } =
-      await fetchExploreSpec(instanceId, exploreName);
+      await fetchExploreSpec(get(runtime), exploreName);
 
     return {
       explore,