feat: add "Go to Explore" for combo charts and custom charts, fix pre-existing bugs

Add "Go to Explore" support for combo_chart and custom_chart canvas components,
and fix three bugs (two pre-existing) that prevented correct navigation to the
Explore pivot page.

Files changed:

- Toolbar.svelte: Add "combo_chart" and "custom_chart" to EXPLORE_SUPPORTED_TYPES
- BaseCanvasComponent.ts: Fix pre-existing bug — add `selectedTimeRange` to
  `timeRangeState` for both global and local time intervals, so "Go to Explore"
  includes the time range in the URL for ALL canvas chart types
- ComboChart.ts: Add override `getExploreTransformerProperties()` that explicitly
  maps x, y1, y2 to pivot chips (skipping synthetic color field)
- custom-chart/index.ts: Add `QueryFieldMeta` interface, `queryFieldsMeta`
  writable store, and `getExploreTransformerProperties()` using server-returned
  meta.fields
- CanvasCustomChart.svelte: Add `handleMetaChange` callback to pipe meta.fields
  from the renderer into the component store
- CustomChartRenderer.svelte: Add `onMetaChange` prop and reactive statement to
  emit meta.fields from the first query
- convertURLToExplorePreset.ts: Fix pre-existing empty-string split bug in
  `fromPivotUrlParams()` for both PivotRows and PivotColumns

Bugs fixed:

1. Missing time range (pre-existing, all chart types): BaseCanvasComponent never
   populated `selectedTimeRange` in the `timeRangeState`, so the explore URL
   never included a `tr=` param
2. Synthetic color field (combo-specific): BaseChart.getExploreTransformerProperties()
   processed the combo chart's synthetic color: {type:"value", field:"measures"}
   as a real dimension
3. Empty string split (pre-existing): "".split(",") returns [""] not [], causing
   crashes when PivotRows or PivotColumns are empty

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: TheRillJon

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

@@ -28,6 +28,8 @@
     "donut_chart",
     "pie_chart",
     "heatmap",
+    "combo_chart",
+    "custom_chart",
   ] as const;
 
   $: showExplore =

web-common/src/features/canvas/components/BaseCanvasComponent.ts

@@ -26,6 +26,7 @@ import type {
   TimeAndFilterStore,
   TimeRangeState,
 } from "../../dashboards/time-controls/time-control-store";
+import { TimeRangePreset } from "@rilldata/web-common/lib/time/types";
 import type {
   CanvasEntity,
   ComponentPath,
@@ -212,6 +213,14 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
         };
 
         let timeRangeState: TimeRangeState | undefined = {
+          selectedTimeRange: globalInterval
+            ? {
+                name: TimeRangePreset.CUSTOM,
+                start: globalInterval.start.toJSDate(),
+                end: globalInterval.end.toJSDate(),
+                interval: globalGrainStore,
+              }
+            : undefined,
           timeStart: globalInterval?.start.toISO(),
           timeEnd: globalInterval?.end.toISO(),
         };
@@ -273,6 +282,14 @@ export abstract class BaseCanvasComponent<T = ComponentSpec> {
             timeGrain = localGrainStore ?? globalGrainStore;
 
             const localTimeRangeState: TimeRangeState = {
+              selectedTimeRange: localInterval
+                ? {
+                    name: TimeRangePreset.CUSTOM,
+                    start: localInterval.start.toJSDate(),
+                    end: localInterval.end.toJSDate(),
+                    interval: localGrainStore ?? globalGrainStore,
+                  }
+                : undefined,
               timeStart: localInterval?.start.toISO(),
               timeEnd: localInterval?.end.toISO(),
             };

web-common/src/features/canvas/components/charts/custom-chart/CanvasCustomChart.svelte

@@ -3,7 +3,7 @@
   import { onDestroy } from "svelte";
   import AgenticChartPrompt from "./AgenticChartPrompt.svelte";
   import { clearComponentConversation } from "./chart-ai-agent";
-  import type { CustomChartComponent } from "./index";
+  import type { CustomChartComponent, QueryFieldMeta } from "./index";
 
   export let component: CustomChartComponent;
   export let editable: boolean = false;
@@ -16,6 +16,14 @@
 
   $: hasValidSpec = component.isValid($specStore);
   $: hasContent = component.hasContent($specStore);
+
+  function handleMetaChange(meta: Record<string, unknown> | undefined) {
+    if (!meta?.fields || !Array.isArray(meta.fields)) {
+      component.queryFieldsMeta.set([]);
+      return;
+    }
+    component.queryFieldsMeta.set(meta.fields as QueryFieldMeta[]);
+  }
 </script>
 
 {#if hasValidSpec || hasContent}
@@ -26,6 +34,7 @@
     timeRange={$timeAndFilterStore?.timeRange}
     metricsSQL={$specStore.metrics_sql}
     showDataTable={editable}
+    onMetaChange={handleMetaChange}
   />
 {:else}
   <AgenticChartPrompt {component} />

web-common/src/features/canvas/components/charts/custom-chart/index.ts

@@ -10,8 +10,16 @@ import type {
   CanvasEntity,
   ComponentPath,
 } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+import {
+  PivotChipType,
+  type PivotChipData,
+  type PivotState,
+} from "@rilldata/web-common/features/dashboards/pivot/types";
+import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
+import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
+import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import type { V1Resource } from "@rilldata/web-common/runtime-client";
-import { get } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 import CanvasCustomChart from "./CanvasCustomChart.svelte";
 
 export interface CustomChart
@@ -23,12 +31,19 @@ export interface CustomChart
   vega_spec: string;
 }
 
+export interface QueryFieldMeta {
+  type: "dimension" | "measure";
+  name: string;
+  display_name?: string;
+}
+
 export class CustomChartComponent extends BaseCanvasComponent<CustomChart> {
   minSize = { width: 4, height: 4 };
   defaultSize = { width: 6, height: 4 };
   resetParams = [];
   type: CanvasComponentType = "custom_chart";
   component = CanvasCustomChart;
+  queryFieldsMeta: Writable<QueryFieldMeta[]> = writable([]);
 
   constructor(resource: V1Resource, parent: CanvasEntity, path: ComponentPath) {
     const defaultSpec: CustomChart = {
@@ -93,6 +108,54 @@ export class CustomChartComponent extends BaseCanvasComponent<CustomChart> {
     );
   }
 
+  getExploreTransformerProperties(): Partial<ExploreState> {
+    const fields = get(this.queryFieldsMeta);
+    const timeAndFilter = get(this.timeAndFilterStore);
+
+    const { dimensionFilters, dimensionThresholdFilters } = splitWhereFilter(
+      timeAndFilter?.where,
+    );
+
+    const columns: PivotChipData[] = [];
+    const rows: PivotChipData[] = [];
+
+    for (const field of fields) {
+      if (field.type === "measure") {
+        columns.push({
+          id: field.name,
+          title: field.display_name ?? field.name,
+          type: PivotChipType.Measure,
+        });
+      } else {
+        rows.push({
+          id: field.name,
+          title: field.display_name ?? field.name,
+          type: PivotChipType.Dimension,
+        });
+      }
+    }
+
+    const pivot: PivotState = {
+      columns,
+      rows,
+      expanded: {},
+      sorting: [],
+      columnPage: 0,
+      rowPage: 0,
+      enableComparison: false,
+      tableMode: "nest",
+      activeCell: null,
+    };
+
+    return {
+      whereFilter: dimensionFilters,
+      dimensionThresholdFilters,
+      showTimeComparison: false,
+      activePage: DashboardState_ActivePage.PIVOT,
+      pivot,
+    };
+  }
+
   inputParams(): InputParams<CustomChart> {
     return {
       options: {

web-common/src/features/canvas/components/charts/variants/ComboChart.ts

@@ -9,12 +9,21 @@ import {
   type ChartFieldsMap,
   type FieldConfig,
 } from "@rilldata/web-common/features/components/charts/types";
+import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
+import {
+  PivotChipType,
+  type PivotChipData,
+  type PivotState,
+} from "@rilldata/web-common/features/dashboards/pivot/types";
+import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
 import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import {
   MetricsViewSpecDimensionType,
   type V1MetricsViewSpec,
   type V1Resource,
 } from "@rilldata/web-common/runtime-client";
+import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
 import { get, type Readable } from "svelte/store";
 import type { ChartDataQuery } from "../../../../components/charts/types";
 import type {
@@ -263,4 +272,67 @@ export class ComboChartComponent extends BaseChart<ComboCanvasChartSpec> {
     const measures = get(measuresStore);
     return this.provider.getChartDomainValues(measures);
   }
+
+  override getExploreTransformerProperties(): Partial<ExploreState> {
+    const spec = get(this.specStore);
+    const { dimensionFilters, dimensionThresholdFilters } = splitWhereFilter(
+      this.componentFilters,
+    );
+    const timeGrain = get(this.timeAndFilterStore)?.timeGrain;
+
+    const columns: PivotChipData[] = [];
+    const rows: PivotChipData[] = [];
+
+    if (spec.x?.field) {
+      if (spec.x.type === "temporal") {
+        columns.push({
+          id: timeGrain || V1TimeGrain.TIME_GRAIN_DAY,
+          title: spec.x.field,
+          type: PivotChipType.Time,
+        });
+      } else {
+        columns.push({
+          id: spec.x.field,
+          title: spec.x.field,
+          type: PivotChipType.Dimension,
+        });
+      }
+    }
+
+    if (spec.y1?.field && spec.y1.type === "quantitative") {
+      columns.push({
+        id: spec.y1.field,
+        title: spec.y1.field,
+        type: PivotChipType.Measure,
+      });
+    }
+
+    if (spec.y2?.field && spec.y2.type === "quantitative") {
+      columns.push({
+        id: spec.y2.field,
+        title: spec.y2.field,
+        type: PivotChipType.Measure,
+      });
+    }
+
+    const pivot: PivotState = {
+      columns,
+      rows,
+      expanded: {},
+      sorting: [],
+      columnPage: 0,
+      rowPage: 0,
+      enableComparison: false,
+      tableMode: "nest",
+      activeCell: null,
+    };
+
+    return {
+      whereFilter: dimensionFilters,
+      dimensionThresholdFilters,
+      showTimeComparison: false,
+      activePage: DashboardState_ActivePage.PIVOT,
+      pivot,
+    };
+  }
 }

web-common/src/features/components/charts/custom/CustomChartRenderer.svelte

@@ -14,7 +14,7 @@
   } from "@rilldata/web-common/runtime-client";
   import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
   import type { View, VisualizationSpec } from "svelte-vega";
-  import { derived } from "svelte/store";
+  import { derived, get } from "svelte/store";
   import { convertV1ExpressionToMapstructure } from "./expression-utils";
 
   export let spec: string | undefined = undefined;
@@ -24,6 +24,9 @@
   export let timeRange: V1TimeRange | undefined = undefined;
   export let showDataTable = false;
   export let name: string = "Custom Chart";
+  export let onMetaChange:
+    | ((meta: Record<string, unknown> | undefined) => void)
+    | undefined = undefined;
 
   const viewOptions = ["Chart", "Data"];
 
@@ -81,6 +84,13 @@
     })),
   );
 
+  $: if (onMetaChange && $combinedResults[0]?.isSuccess) {
+    const firstMeta = get(dataQueries[0])?.data?.meta;
+    if (firstMeta) {
+      onMetaChange(firstMeta as Record<string, unknown>);
+    }
+  }
+
   $: vegaData = $combinedResults.reduce<Record<string, unknown>>(
     (acc, result, idx) => {
       acc[`query${idx + 1}`] = result.data;

web-common/src/features/dashboards/url-state/convertURLToExplorePreset.ts

@@ -588,9 +588,10 @@ function fromPivotUrlParams(
   const errors: Error[] = [];
 
   if (searchParams.has(ExploreStateURLParams.PivotRows)) {
-    const rows = (
-      searchParams.get(ExploreStateURLParams.PivotRows) as string
-    ).split(",");
+    const rowsParam = searchParams.get(
+      ExploreStateURLParams.PivotRows,
+    ) as string;
+    const rows = rowsParam === "" ? [] : rowsParam.split(",");
     const validRows = rows.filter(
       (r) => dimensions.has(r) || r in FromURLParamTimeDimensionMap,
     );
@@ -602,9 +603,10 @@ function fromPivotUrlParams(
   }
 
   if (searchParams.has(ExploreStateURLParams.PivotColumns)) {
-    const cols = (
-      searchParams.get(ExploreStateURLParams.PivotColumns) as string
-    ).split(",");
+    const colsParam = searchParams.get(
+      ExploreStateURLParams.PivotColumns,
+    ) as string;
+    const cols = colsParam === "" ? [] : colsParam.split(",");
     const validCols = cols.filter(
       (c) =>
         dimensions.has(c) ||