feat: unified actions selectors

web-admin/package.json

@@ -17,7 +17,8 @@
  "@playwright/test": "^1.25.0",
  "@sveltejs/adapter-static": "^1.0.0",
  "@sveltejs/kit": "^1.5.0",
- "@tanstack/svelte-query": "^4.27.0",
+ "@skokenes/svelte-query": "^4.29.19-fork",
+ "@tanstack/svelte-query": "npm:@skokenes/[email protected]",
  "@types/cookie": "^0.5.1",
  "@typescript-eslint/eslint-plugin": "^5.27.0",
  "@typescript-eslint/parser": "^5.27.0",

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 BusinessModelProvider from "@rilldata/web-common/features/dashboards/business-model/BusinessModelProvider.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>
+ <BusinessModelProvider metricsViewName={dashboardName}>
+ <DashboardStateProvider metricViewName={dashboardName}>
+ <Dashboard
+ leftMargin={"48px"}
+ hasTitle={false}
+ metricViewName={dashboardName}
+ />
+ </DashboardStateProvider>
+ </BusinessModelProvider>
 {/if}

web-common/package.json

@@ -20,7 +20,8 @@
  "@storybook/svelte": "^7.0.18",
  "@storybook/svelte-vite": "^7.0.18",
  "@storybook/testing-library": "^0.0.14-next.2",
- "@tanstack/svelte-query": "^4.27.0",
+ "@skokenes/svelte-query": "^4.29.19-fork",
+ "@tanstack/svelte-query": "npm:@skokenes/[email protected]",
  "@testing-library/svelte": "^3.2.2",
  "@typescript-eslint/eslint-plugin": "^5.27.0",
  "@typescript-eslint/parser": "^5.27.0",

web-common/src/features/dashboards/actions/index.ts

@@ -0,0 +1,41 @@
+import { get } from "svelte/store";
+import type { BusinessModel } from "../business-model/business-model";
+import { cancelDashboardQueries } from "../dashboard-queries";
+import { metricsExplorerStore } from "../dashboard-stores";
+
+export function clearFilterForDimension(
+ ctx: BusinessModel,
+ dimensionId,
+ include: boolean
+) {
+ const metricViewName = get(ctx.metricsViewName);
+ cancelDashboardQueries(ctx.queryClient, metricViewName);
+ metricsExplorerStore.clearFilterForDimension(
+ metricViewName,
+ dimensionId,
+ include
+ );
+}
+
+export function clearAllFilters(ctx: BusinessModel) {
+ const filters = get(ctx.dashboardStore).filters;
+ const hasFilters =
+ (filters && filters.include.length > 0) || filters.exclude.length > 0;
+ const metricViewName = get(ctx.metricsViewName);
+ if (hasFilters) {
+ cancelDashboardQueries(ctx.queryClient, metricViewName);
+ metricsExplorerStore.clearFilters(metricViewName);
+ }
+}
+
+export function toggleDimensionValue(ctx: BusinessModel, event, item) {
+ const metricViewName = get(ctx.metricsViewName);
+ cancelDashboardQueries(ctx.queryClient, metricViewName);
+ metricsExplorerStore.toggleFilter(metricViewName, item.name, event.detail);
+}
+
+export function toggleFilterMode(ctx: BusinessModel, dimensionName) {
+ const metricViewName = get(ctx.metricsViewName);
+ cancelDashboardQueries(ctx.queryClient, metricViewName);
+ metricsExplorerStore.toggleFilterMode(metricViewName, dimensionName);
+}

web-common/src/features/dashboards/business-model/BusinessModelProvider.svelte

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

web-common/src/features/dashboards/business-model/README.md

@@ -0,0 +1,17 @@
+# Using the Business Model Provider
+The BusinessModelProvider 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 { getBusinessModel } from "./business-model";
+
+ const businessModel = getBusinessModel();
+ const { dashboardStore, metricsViewName } = businessModel;
+</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/business-model/business-model.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";
+
+export type BusinessModel = {
+ runtime: Writable<Runtime>;
+ metricsViewName: Writable<string>;
+ metricsStore: Readable<MetricsExplorerStoreType>;
+ dashboardStore: Readable<MetricsExplorerEntity>;
+ queryClient: QueryClient;
+ setMetricsViewName: (s: string) => void;
+};
+
+export const DEFAULT_STORE_KEY = Symbol("business-model");
+
+export function getBusinessModel(): BusinessModel {
+ return getContext(DEFAULT_STORE_KEY);
+}
+
+export function createBusinessModel({
+ queryClient,
+ metricsViewName,
+}: {
+ queryClient: QueryClient;
+ metricsViewName: string;
+}): BusinessModel {
+ 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 BusinessModel;
+}