feat: Readable metrics view url params

web-common/src/features/dashboards/stores/dashboard-stores.ts

@@ -14,6 +14,7 @@ import {
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
 import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
+import { getMetricsExplorerFromUrl } from "@rilldata/web-common/features/dashboards/url-state/fromUrl";
 import { getMapFromArray } from "@rilldata/web-common/lib/arrayUtils";
 import type {
   DashboardTimeControls,
@@ -208,6 +209,34 @@ const metricViewReducers = {
     });
   },
 
+  syncFromUrlParams(
+    name: string,
+    urlParams: URLSearchParams,
+    metricsView: V1MetricsViewSpec,
+  ) {
+    if (!urlParams || !metricsView) return;
+    // not all data for MetricsExplorerEntity will be filled out here.
+    // Hence, it is a Partial<MetricsExplorerEntity>
+    const { entity } = getMetricsExplorerFromUrl(urlParams, metricsView);
+    if (!entity) return;
+    // TODO: errors
+    console.log(entity);
+
+    updateMetricsExplorerByName(name, (metricsExplorer) => {
+      for (const key in entity) {
+        metricsExplorer[key] = entity[key];
+      }
+      // this hack is needed since what is shown for comparison is not a single source
+      // TODO: use an enum and get rid of this
+      if (!entity.showTimeComparison) {
+        metricsExplorer.showTimeComparison = false;
+      }
+      metricsExplorer.dimensionFilterExcludeMode =
+        includeExcludeModeFromFilters(entity.whereFilter);
+      AdvancedMeasureCorrector.correct(metricsExplorer, metricsView);
+    });
+  },
+
   sync(name: string, metricsView: V1MetricsViewSpec) {
     if (!name || !metricsView || !metricsView.measures) return;
     updateMetricsExplorerByName(name, (metricsExplorer) => {

web-common/src/features/dashboards/url-state/DashboardURLStateSync.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import { useMetricsView } from "@rilldata/web-common/features/dashboards/selectors/index";
+  import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
+  import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
+  import { getUrlFromMetricsExplorer } from "@rilldata/web-common/features/dashboards/url-state/toUrl";
+
+  export let searchParams: URLSearchParams;
+
+  const ctx = getStateManagers();
+  const { metricsViewName, dashboardStore } = ctx;
+  const metricsView = useMetricsView(ctx);
+
+  $: if ($dashboardStore && $metricsView.data) {
+    const u = new URL(
+      `${$page.url.protocol}//${$page.url.host}${$page.url.pathname}`,
+    );
+    getUrlFromMetricsExplorer(
+      $dashboardStore,
+      u.searchParams,
+      $metricsView.data,
+    );
+    void goto(u.toString());
+  }
+
+  $: if (searchParams && $metricsView.data) {
+    metricsExplorerStore.syncFromUrlParams(
+      $metricsViewName,
+      searchParams,
+      $metricsView.data,
+    );
+  }
+</script>
+
+<slot />

web-common/src/features/dashboards/url-state/filters/converters.ts

@@ -1,11 +1,39 @@
+import { BinaryOperationReverseMap } from "@rilldata/web-common/features/dashboards/url-state/filters/post-processors";
+import { V1Expression, V1Operation } from "@rilldata/web-common/runtime-client";
 import grammar from "./expression.cjs";
 import nearley from "nearley";
 
 const compiledGrammar = nearley.Grammar.fromCompiled(grammar);
 export function convertFilterParamToExpression(filter: string) {
   const parser = new nearley.Parser(compiledGrammar);
   parser.feed(filter);
-  return parser.results[0];
+  return parser.results[0] as V1Expression;
+}
+
+export function convertExpressionToFilterParam(expr: V1Expression): string {
+  if (!expr) return "";
+
+  if (expr.val) {
+    if (typeof expr.val === "string") {
+      return `'${expr.val}'`;
+    }
+    return expr.val + "";
+  }
+
+  if (expr.ident) return expr.ident;
+
+  switch (expr.cond?.op) {
+    case V1Operation.OPERATION_AND:
+    case V1Operation.OPERATION_OR:
+      return convertJoinerExpressionToFilterParam(expr);
+
+    case V1Operation.OPERATION_IN:
+    case V1Operation.OPERATION_NIN:
+      return convertInExpressionToFilterParam(expr);
+
+    default:
+      return convertBinaryExpressionToFilterParam(expr);
+  }
 }
 
 export function stripParserError(err: Error) {
@@ -14,3 +42,52 @@ export function stripParserError(err: Error) {
     err.message.indexOf("Instead, I was expecting") - 1,
   );
 }
+
+function convertJoinerExpressionToFilterParam(expr: V1Expression) {
+  const joiner = expr.cond?.op === V1Operation.OPERATION_AND ? "AND" : "OR";
+
+  const parts = expr.cond?.exprs
+    ?.map(convertExpressionToFilterParam)
+    .filter(Boolean);
+  if (!parts?.length) return "";
+
+  return `(${parts.join(joiner)})`;
+}
+
+function convertInExpressionToFilterParam(expr: V1Expression) {
+  if (!expr.cond?.exprs?.length) return "";
+  const joiner = expr.cond?.op === V1Operation.OPERATION_IN ? "IN" : "NIN";
+
+  const column = expr.cond.exprs[0]?.ident;
+  if (!column) return "";
+
+  if (expr.cond.exprs[1]?.subquery?.having) {
+    // TODO: support `NIN <subquery>`
+    const having = convertExpressionToFilterParam(
+      expr.cond.exprs[1]?.subquery?.having,
+    );
+    if (having) return `${column} having (${having})`;
+  }
+
+  if (expr.cond.exprs.length > 1) {
+    const vals = expr.cond.exprs
+      .slice(1)
+      .map(convertExpressionToFilterParam)
+      .filter(Boolean);
+    return `${column} ${joiner} (${vals.join(",")})`;
+  }
+
+  return "";
+}
+
+function convertBinaryExpressionToFilterParam(expr: V1Expression) {
+  if (!expr.cond?.op || !(expr.cond?.op in BinaryOperationReverseMap))
+    return "";
+  const op = BinaryOperationReverseMap[expr.cond.op];
+  if (!expr.cond?.exprs?.length) return "";
+  const left = convertExpressionToFilterParam(expr.cond.exprs[0]);
+  const right = convertExpressionToFilterParam(expr.cond.exprs[1]);
+  if (!left || !right) return "";
+
+  return `${left} ${op} ${right}`;
+}

web-common/src/features/dashboards/url-state/filters/expression.spec.ts

@@ -17,6 +17,10 @@ import nearley from "nearley";
 describe("expression", () => {
   describe("positive cases", () => {
     const Cases = [
+      {
+        expr: "country IN ('US','IN')",
+        expected_expression: createInExpression("country", ["US", "IN"]),
+      },
       {
         expr: "country IN ('US','IN') and state = 'ABC'",
         expected_expression: createAndExpression([

web-common/src/features/dashboards/url-state/filters/post-processors.ts

@@ -6,16 +6,18 @@ import {
   createSubQueryExpression,
   getAllIdentifiers,
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+import { reverseMap } from "@rilldata/web-common/features/dashboards/url-state/mappers";
 import { V1Operation } from "@rilldata/web-common/runtime-client";
 
-const BinaryOperationMap = {
+const BinaryOperationMap: Record<string, V1Operation> = {
   "=": V1Operation.OPERATION_EQ,
   "!=": V1Operation.OPERATION_NEQ,
   ">": V1Operation.OPERATION_GT,
   ">=": V1Operation.OPERATION_GTE,
   "<": V1Operation.OPERATION_LT,
   "<=": V1Operation.OPERATION_LTE,
 };
+export const BinaryOperationReverseMap = reverseMap(BinaryOperationMap);
 
 export const binaryPostprocessor = ([left, _1, op, _2, right]) =>
   createBinaryExpression(left, BinaryOperationMap[op], right);