feat: app business model context

web-admin/src/routes/[organization]/[project]/[dashboard]/+page.svelte

@@ -22,6 +22,7 @@
   import ProjectBuilding from "../../../../components/projects/ProjectBuilding.svelte";
   import ProjectErrored from "../../../../components/projects/ProjectErrored.svelte";
   import DashboardStateProvider from "@rilldata/web-common/features/dashboards/proto-state/DashboardStateProvider.svelte";
+  import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
 
   const queryClient = useQueryClient();
 
@@ -105,11 +106,13 @@
 {:else if currentDashboard && !currentDashboard.isValid}
   <ProjectErrored organization={orgName} project={projectName} />
 {:else}
-  <DashboardStateProvider metricViewName={dashboardName}>
-    <Dashboard
-      leftMargin={"48px"}
-      hasTitle={false}
-      metricViewName={dashboardName}
-    />
-  </DashboardStateProvider>
+  <StateManagersProvider metricsViewName={dashboardName}>
+    <DashboardStateProvider metricViewName={dashboardName}>
+      <Dashboard
+        leftMargin={"48px"}
+        hasTitle={false}
+        metricViewName={dashboardName}
+      />
+    </DashboardStateProvider>
+  </StateManagersProvider>
 {/if}

web-common/src/features/dashboards/state-managers/README.md

@@ -0,0 +1,17 @@
+# Using the State Managers Provider
+The StateManagersProvider provides an object with all dependent services for the Rill UI's business model logic.
+Here is an example of using it:
+```svelte
+<script lang="ts">
+  import { getStateManagers } from "./state-managers";
+
+  const stateManagers = getStateManagers();
+  const { dashboardStore, metricsViewName } = stateManagers;
+</script>
+
+<div>The dashboard is: {$metricsViewName}</div>
+<div>
+  The filters are: <pre>{JSON.stringify($dashboardStore.filters, null, 2)}</pre>
+</div>
+
+```

web-common/src/features/dashboards/state-managers/StateManagersProvider.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { useQueryClient } from "@tanstack/svelte-query";
+  import { createStateManagers, DEFAULT_STORE_KEY } from "./state-managers";
+
+  export let metricsViewName: string;
+
+  const queryClient = useQueryClient();
+  const stateManagers = createStateManagers({ queryClient, metricsViewName });
+  setContext(DEFAULT_STORE_KEY, stateManagers);
+
+  $: {
+    // update metrics view name
+    stateManagers.setMetricsViewName(metricsViewName);
+  }
+</script>
+
+<slot />

web-common/src/features/dashboards/state-managers/state-managers.ts

@@ -0,0 +1,50 @@
+import { writable, Writable, Readable, derived } from "svelte/store";
+import { getContext } from "svelte";
+import type { QueryClient } from "@tanstack/svelte-query";
+import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+import {
+  MetricsExplorerEntity,
+  MetricsExplorerStoreType,
+  metricsExplorerStore,
+  useDashboardStore,
+} from "../dashboard-stores";
+import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+type StateManagers = {
+  runtime: Writable<Runtime>;
+  metricsViewName: Writable<string>;
+  metricsStore: Readable<MetricsExplorerStoreType>;
+  dashboardStore: Readable<MetricsExplorerEntity>;
+  queryClient: QueryClient;
+  setMetricsViewName: (s: string) => void;
+};
+
+export const DEFAULT_STORE_KEY = Symbol("state-managers");
+
+export function getStateManagers(): StateManagers {
+  return getContext(DEFAULT_STORE_KEY);
+}
+
+export function createStateManagers({
+  queryClient,
+  metricsViewName,
+}: {
+  queryClient: QueryClient;
+  metricsViewName: string;
+}): StateManagers {
+  const metricsViewNameStore = writable(metricsViewName);
+  const dashboardStore = derived([metricsViewNameStore], ([name], set) => {
+    const store = useDashboardStore(name);
+    return store.subscribe(set);
+  });
+  return {
+    runtime: runtime,
+    metricsViewName: metricsViewNameStore,
+    metricsStore: metricsExplorerStore,
+    queryClient,
+    dashboardStore,
+    setMetricsViewName: (name) => {
+      metricsViewNameStore.set(name);
+    },
+  } as StateManagers;
+}

web-local/src/routes/(application)/dashboard/[name]/+page.svelte

@@ -15,6 +15,7 @@
   import { error } from "@sveltejs/kit";
   import { CATALOG_ENTRY_NOT_FOUND } from "../../../../lib/errors/messages";
   import DashboardStateProvider from "@rilldata/web-common/features/dashboards/proto-state/DashboardStateProvider.svelte";
+  import StateManagersProvider from "@rilldata/web-common/features/dashboards/state-managers/StateManagersProvider.svelte";
 
   $: metricViewName = $page.params.name;
   $: metricsExplorer = useDashboardStore(metricViewName);
@@ -66,8 +67,10 @@
     bgClass="bg-white"
     inspector={false}
   >
-    <DashboardStateProvider {metricViewName} slot="body">
-      <Dashboard {metricViewName} hasTitle />
-    </DashboardStateProvider>
+    <StateManagersProvider metricsViewName={metricViewName} slot="body">
+      <DashboardStateProvider {metricViewName}>
+        <Dashboard {metricViewName} hasTitle />
+      </DashboardStateProvider>
+    </StateManagersProvider>
   </WorkspaceContainer>
 {/if}