feat: default, pinned and required filters in explore

proto/gen/rill/runtime/v1/runtime.swagger.yaml

@@ -5342,6 +5342,18 @@ definitions:
         items:
           type: string
         description: Temporary to differentiate between "select" and "in list" modes. Expression will be replaced with UI specific state in the future.
+      pinnedFilters:
+        type: array
+        items:
+          type: string
+        title: Array of dimension or measure names
+      requiredFilters:
+        type: array
+        items:
+          type: string
+        description: |-
+          Array of dimension or measure names that must have a value before the explore can render.
+          Required filters are implicitly pinned.
       timeRange:
         type: string
         description: |-

proto/rill/runtime/v1/resources.proto

@@ -540,6 +540,11 @@ message ExplorePreset {
   optional Expression where = 11;
   // Temporary to differentiate between "select" and "in list" modes. Expression will be replaced with UI specific state in the future.
   repeated string dimensions_with_inlist_filter = 29;
+  // Array of dimension or measure names
+  repeated string pinned_filters = 40;
+  // Array of dimension or measure names that must have a value before the explore can render.
+  // Required filters are implicitly pinned.
+  repeated string required_filters = 41;
 
   // Time range for the explore.
   // It corresponds to the `range` property of the explore's `time_ranges`.

runtime/parser/parse_explore.go

@@ -7,13 +7,15 @@
 	"time"
 
 	runtimev1 "github.com/rilldata/rill/proto/gen/rill/runtime/v1"
+	"github.com/rilldata/rill/runtime/metricsview"
+	"github.com/rilldata/rill/runtime/metricsview/metricssql"
 	"github.com/rilldata/rill/runtime/pkg/rilltime"
 	"golang.org/x/exp/maps"
 	"gopkg.in/yaml.v3"
 )
 
 type ExploreYAML struct {
-	commonYAML           `yaml:",inline"`       // Not accessed here, only setting it so we can use KnownFields for YAML parsing
+	commonYAML           `yaml:",inline"` // Not accessed here, only setting it so we can use KnownFields for YAML parsing
 	DisplayName          string                 `yaml:"display_name"`
 	Title                string                 `yaml:"title"` // Deprecated: use display_name
 	Description          string                 `yaml:"description"`
@@ -30,8 +32,12 @@
 		Dimensions          *FieldSelectorYAML `yaml:"dimensions"`
 		Measures            *FieldSelectorYAML `yaml:"measures"`
 		TimeRange           string             `yaml:"time_range"`
+		TimeGrain           string             `yaml:"time_grain"`
 		ComparisonMode      string             `yaml:"comparison_mode"`
 		ComparisonDimension string             `yaml:"comparison_dimension"`
+		Filter              string             `yaml:"filter"`
+		PinnedFilters       []string           `yaml:"pinned_filters"`
+		RequiredFilters     []string           `yaml:"required_filters"`
 	} `yaml:"defaults"`
 	Embeds struct {
 		HidePivot bool `yaml:"hide_pivot"`
@@ -242,18 +248,38 @@
 		if tmp.Defaults.TimeRange != "" {
 			tr = &tmp.Defaults.TimeRange
 		}
+		var tg *string
+		if tmp.Defaults.TimeGrain != "" {
+			tg = &tmp.Defaults.TimeGrain
+		}
+
 		var compareDim *string
 		if tmp.Defaults.ComparisonDimension != "" {
 			compareDim = &tmp.Defaults.ComparisonDimension
 		}
+
+		var filter *runtimev1.Expression
+		if tmp.Defaults.Filter != "" {
+			expr, err := metricssql.ParseFilter(tmp.Defaults.Filter)
+			if err != nil {
+				return fmt.Errorf("invalid filter expression: %q: %w", tmp.Defaults.Filter, err)
+			}
+
+			filter = metricsview.ExpressionToProto(expr)
+		}
+
 		defaultPreset = &runtimev1.ExplorePreset{
 			Dimensions:          presetDimensions,
 			DimensionsSelector:  presetDimensionsSelector,
 			Measures:            presetMeasures,
 			MeasuresSelector:    presetMeasuresSelector,
 			TimeRange:           tr,
+			TimeGrain:           tg,
 			ComparisonMode:      mode,
 			ComparisonDimension: compareDim,
+			Where:               filter,
+			PinnedFilters:       tmp.Defaults.PinnedFilters,
+			RequiredFilters:     tmp.Defaults.RequiredFilters,
 		}
 	}
 

web-common/src/features/canvas/CanvasDashboardWrapper.svelte

@@ -2,11 +2,11 @@
   import { dynamicHeight } from "@rilldata/web-common/layout/layout-settings.ts";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import CellInspector from "@rilldata/web-common/components/CellInspector.svelte";
-  import WarningIcon from "@rilldata/web-common/components/icons/WarningIcon.svelte";
   import CanvasFilters from "./filters/CanvasFilters.svelte";
   import { getCanvasStore } from "./state-managers/state-managers";
   import ThemeProvider from "../dashboards/ThemeProvider.svelte";
   import CanvasPdfExportView from "../exports/pdf/CanvasPdfExportView.svelte";
+  import RequiredFiltersMessage from "@rilldata/web-common/features/dashboards/filters/required/RequiredFiltersMessage.svelte";
 
   const client = useRuntimeClient();
 
@@ -87,34 +87,7 @@
       }}
     >
       {#if hasMissingRequired}
-        <div class="w-full flex justify-center px-6 pt-24 pb-12">
-          <div
-            class="flex flex-col items-center text-center gap-y-3 px-8 py-10 rounded-lg border border-gray-200 bg-surface-subtle shadow-sm w-full max-w-lg"
-            role="alert"
-          >
-            <WarningIcon size="32px" className="text-amber-500" />
-            <h2 class="text-lg font-semibold text-fg-primary">
-              Select a value to continue
-            </h2>
-            <p class="text-sm text-fg-secondary">
-              This dashboard requires values for the following filter{missingRequiredFilters.length >
-              1
-                ? "s"
-                : ""}:
-            </p>
-            <ul
-              class="text-sm text-fg-primary flex flex-wrap justify-center gap-x-2 gap-y-1"
-            >
-              {#each missingRequiredFilters as missing (missing.key)}
-                <li
-                  class="px-2 py-0.5 rounded-md bg-red-50 border border-red-200 text-red-700"
-                >
-                  {missing.label}
-                </li>
-              {/each}
-            </ul>
-          </div>
-        </div>
+        <RequiredFiltersMessage {missingRequiredFilters} />
       {:else}
         <div
           class="w-full h-fit flex flex-col items-center row-container relative"

web-common/src/features/canvas/stores/canvas-entity.ts

@@ -37,7 +37,7 @@ import {
   isChartComponentType,
   isTableComponentType,
 } from "../components/util";
-import { FilterManager, flattenExpression } from "./filter-manager";
+import { FilterManager } from "./filter-manager";
 import { getFilterParam } from "./filter-state";
 import { Grid } from "./grid";
 import { TabGroup, type LayoutBlock } from "./tab-group";
@@ -50,6 +50,7 @@ import { DEFAULT_DASHBOARD_WIDTH, namePrefixFromPath } from "../layout-util";
 import { createCustomMapStore } from "@rilldata/web-common/lib/custom-map-store";
 import type { RuntimeClient } from "@rilldata/web-common/runtime-client/v2";
 import { queryServiceConvertExpressionToMetricsSQL } from "@rilldata/web-common/runtime-client";
+import { flattenExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils.ts";
 
 export const lastVisitedState = new Map<string, string>();
 

web-common/src/features/canvas/stores/filter-manager.ts

@@ -9,25 +9,20 @@ import type {
   V1Expression,
   V1MetricsView,
 } from "@rilldata/web-common/runtime-client";
-import {
-  V1Operation,
-  type MetricsViewSpecMeasure,
-} from "@rilldata/web-common/runtime-client";
+import { type MetricsViewSpecMeasure } from "@rilldata/web-common/runtime-client";
 import {
   derived,
   get,
-  writable,
   type Readable,
+  writable,
   type Writable,
 } from "svelte/store";
 import { getDimensionDisplayName } from "../../dashboards/filters/getDisplayName";
-import {
-  createAndExpression,
-  flattenInExpressionValues,
-} from "../../dashboards/stores/filter-utils";
+import { flattenExpression } from "../../dashboards/stores/filter-utils";
 import { ExploreStateURLParams } from "../../dashboards/url-state/url-params";
 import type { ParsedFilters } from "./filter-state";
 import { FilterState } from "./filter-state";
+import type { MissingRequiredFilter } from "@rilldata/web-common/features/dashboards/filters/required/required-filters.ts";
 
 export type UIFilters = {
   dimensionFilters: Map<string, DimensionFilterItem>;
@@ -37,12 +32,6 @@ export type UIFilters = {
   hasClearableFilters: boolean;
 };
 
-export type MissingRequiredFilter = {
-  key: string;
-  name: string;
-  label: string;
-};
-
 export type MetricsViewName = string;
 type DimensionName = string;
 type MeasureName = string;
@@ -952,61 +941,6 @@ function isMeasureItemEmpty(item: MeasureFilterItem): boolean {
   return !item.filter;
 }
 
-// This should be deprecated eventually in favor of better support for variously formatted expressions
-export function flattenExpression(
-  expression: V1Expression | undefined,
-): V1Expression {
-  if (!expression) {
-    return createAndExpression([]);
-  }
-
-  let root: V1Expression;
-
-  // Ensure top level is an OPERATION_AND
-  if (!expression.cond || expression.cond.op !== V1Operation.OPERATION_AND) {
-    root = createAndExpression([expression]);
-  } else {
-    root = expression;
-  }
-
-  const rootCond = root.cond;
-  if (
-    !rootCond ||
-    rootCond.op !== V1Operation.OPERATION_AND ||
-    !Array.isArray(rootCond.exprs)
-  ) {
-    return root;
-  }
-
-  // Recursively flatten all nested ANDs, preserving order
-  rootCond.exprs = flattenAndExprs(rootCond.exprs);
-
-  // Normalize array-valued IN/NIN expressions into individual value expressions
-  rootCond.exprs = rootCond.exprs.map(flattenInExpressionValues);
-
-  return root;
-}
-
-function flattenAndExprs(exprs: V1Expression[]): V1Expression[] {
-  const result: V1Expression[] = [];
-
-  for (const expr of exprs) {
-    const cond = expr.cond;
-    if (
-      cond &&
-      cond.op === V1Operation.OPERATION_AND &&
-      Array.isArray(cond.exprs)
-    ) {
-      // Inline children in order
-      result.push(...flattenAndExprs(cond.exprs));
-    } else {
-      result.push(expr);
-    }
-  }
-
-  return result;
-}
-
 // wip - bgh
 function mergeFilters<T>(
   metricsViewItems: Map<string, Map<string, T>>,

web-common/src/features/dashboards/filters/ExploreFilterChipsReadOnly.svelte

@@ -19,6 +19,7 @@
   // But we need resolved start and end based on current time in dimension filters to get query for accurate results.
   export let queryTimeStart: string | undefined = undefined;
   export let queryTimeEnd: string | undefined = undefined;
+  export let pinnedFilters: Set<string> = new Set();
 
   const runtimeClient = useRuntimeClient();
 
@@ -44,4 +45,5 @@
   {displayTimeRange}
   {queryTimeStart}
   {queryTimeEnd}
+  {pinnedFilters}
 />

web-common/src/features/dashboards/filters/FilterChipsReadOnly.svelte

@@ -32,6 +32,7 @@ The main feature-set component for dashboard filters
   export let queryTimeEnd: string | undefined = undefined;
   export let hasBoldTimeRange: boolean = true;
   export let chipLayout: "wrap" | "scroll" = "wrap";
+  export let pinnedFilters: Set<string> = new Set();
 
   let scrollContainer: HTMLDivElement;
 
@@ -44,6 +45,7 @@ The main feature-set component for dashboard filters
     filters,
     dimensionsWithInlistFilter,
     metricsViewNames[0],
+    pinnedFilters,
   );
 
   $: measureIdMap = getMapFromArray(
@@ -53,6 +55,7 @@ The main feature-set component for dashboard filters
   $: measureFilters = getMeasureFilters(
     measureIdMap,
     dimensionThresholdFilters,
+    pinnedFilters,
   );
 
   function handleWheel(event: WheelEvent) {
@@ -81,7 +84,6 @@ The main feature-set component for dashboard filters
   {#if dimensionFilters.length > 0}
     {#each dimensionFilters as filterData (filterData.name)}
       {@const dimension = filterData.dimensions.get(metricsViewNames[0])}
-      <!-- <div animate:flip={{ duration: 200 }}> -->
       {#if dimension}
         <DimensionFilterReadOnlyChip
           pinned={filterData.pinned}
@@ -99,7 +101,6 @@ The main feature-set component for dashboard filters
           timeEnd={queryTimeEnd}
         />
       {/if}
-      <!-- </div> -->
     {/each}
   {/if}
   {#if measureFilters.length > 0}