diff --git a/web-common/src/components/chip/removable-list-chip/RemovableListBody.svelte b/web-common/src/components/chip/removable-list-chip/RemovableListBody.svelte
index 425510be7f8..c8796c18ae2 100644
--- a/web-common/src/components/chip/removable-list-chip/RemovableListBody.svelte
+++ b/web-common/src/components/chip/removable-list-chip/RemovableListBody.svelte
@@ -2,6 +2,7 @@
   export let label: string;
   export let values: string[];
   export let show = 1;
+  export let smallChip = false;
   export let labelMaxWidth = "160px";
   export let valueMaxWidth = "320px";
 
@@ -9,17 +10,26 @@
 </script>
 
 <div class="flex gap-x-2 items-center">
-  <span class="font-bold truncate" style:max-width={labelMaxWidth}>
+  <span
+    class="font-bold truncate"
+    style:max-width={smallChip ? "150px" : labelMaxWidth}
+  >
     {label}
   </span>
 
-  {#each values.slice(0, show) as value (value)}
-    <span class="truncate" style:max-width={valueMaxWidth}>
-      {value}
-    </span>
-  {/each}
+  {#if !smallChip}
+    {#each values.slice(0, show) as value (value)}
+      <span class="truncate" style:max-width={valueMaxWidth}>
+        {value}
+      </span>
+    {/each}
+  {/if}
 
-  {#if values.length > 1}
+  {#if smallChip}
+    <span class="italic">
+      {values.length} selected
+    </span>
+  {:else if values.length > 1}
     <span class="italic">
       +{whatsLeft} other{#if whatsLeft !== 1}s{/if}
     </span>
diff --git a/web-common/src/features/canvas/components/charts/selector.ts b/web-common/src/features/canvas/components/charts/selector.ts
index 9469a56a4b7..e949edc411b 100644
--- a/web-common/src/features/canvas/components/charts/selector.ts
+++ b/web-common/src/features/canvas/components/charts/selector.ts
@@ -11,7 +11,6 @@ import {
   type V1MetricsViewAggregationMeasure,
   type V1MetricsViewAggregationResponse,
   type V1MetricsViewAggregationResponseDataItem,
-  type V1TimeRange,
 } from "@rilldata/web-common/runtime-client";
 import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
 import type { CreateQueryResult } from "@tanstack/svelte-query";
@@ -98,9 +97,15 @@ export function createChartDataQuery(
   limit = "500",
   offset = "0",
 ): CreateQueryResult<V1MetricsViewAggregationResponse, HTTPError> {
-  const {
-    timeControls: { selectedTimeRange },
-  } = ctx.canvasEntity;
+  const { canvasEntity } = ctx;
+
+  const timeAndFilterStore = canvasEntity.createTimeAndFilterStore(
+    config.metrics_view,
+    {
+      componentTimeRange: config.time_range,
+      componentFilter: config.dimension_filters,
+    },
+  );
 
   let measures: V1MetricsViewAggregationMeasure[] = [];
   let dimensions: V1MetricsViewAggregationDimension[] = [];
@@ -110,14 +115,9 @@ export function createChartDataQuery(
   }
 
   return derived(
-    [ctx.runtime, selectedTimeRange],
-    ([runtime, $selectedTimeRange], set) => {
-      let timeRange: V1TimeRange = {
-        start: $selectedTimeRange?.start?.toISOString(),
-        end: $selectedTimeRange?.end?.toISOString(),
-      };
-
-      const timeGrain = $selectedTimeRange?.interval;
+    [ctx.runtime, timeAndFilterStore],
+    ([runtime, $timeAndFilterStore], set) => {
+      const { timeRange, where, timeGrain } = $timeAndFilterStore;
 
       if (config.x?.type === "nominal" && config.x?.field) {
         dimensions = [{ name: config.x?.field }];
@@ -129,24 +129,21 @@ export function createChartDataQuery(
         dimensions = [...dimensions, { name: config.color.field }];
       }
 
-      if (config.time_range) {
-        timeRange = { isoDuration: config.time_range };
-      }
-
       return createQueryServiceMetricsViewAggregation(
         runtime.instanceId,
         config.metrics_view,
         {
           measures,
           dimensions,
-          where: undefined,
+          where,
           timeRange,
           limit,
           offset,
         },
         {
           query: {
-            enabled: !!$selectedTimeRange?.start && !!$selectedTimeRange?.end,
+            enabled:
+              !!config.time_range || (!!timeRange?.start && !!timeRange?.end),
             queryClient: ctx.queryClient,
             keepPreviousData: true,
           },
diff --git a/web-common/src/features/canvas/components/kpi/KPI.svelte b/web-common/src/features/canvas/components/kpi/KPI.svelte
index 5fb06386d6c..a527cad1f65 100644
--- a/web-common/src/features/canvas/components/kpi/KPI.svelte
+++ b/web-common/src/features/canvas/components/kpi/KPI.svelte
@@ -41,6 +41,7 @@
     time_range: timeRange,
     sparkline: showSparkline,
     comparison_range: comparisonTimeRange,
+    dimension_filters: dimensionFilters,
   } = kpiProperties);
 
   $: measure = spec.getMeasureForMetricView(measureName, metricsViewName);
@@ -51,6 +52,7 @@
     metricsViewName,
     measureName,
     timeRange,
+    dimensionFilters,
   );
 
   $: comparisonValue = useKPIComparisonTotal(
@@ -59,6 +61,7 @@
     metricsViewName,
     measureName,
     comparisonTimeRange,
+    dimensionFilters,
   );
 
   $: sparkline = useKPISparkline(
@@ -67,6 +70,7 @@
     metricsViewName,
     measureName,
     timeRange,
+    dimensionFilters,
   );
 
   $: sparkData = $sparkline?.data || [];
diff --git a/web-common/src/features/canvas/components/kpi/selector.ts b/web-common/src/features/canvas/components/kpi/selector.ts
index f0057509330..365983fe5cb 100644
--- a/web-common/src/features/canvas/components/kpi/selector.ts
+++ b/web-common/src/features/canvas/components/kpi/selector.ts
@@ -18,16 +18,16 @@ export function useKPITotals(
   instanceId: string,
   metricsViewName: string,
   measure: string,
-  overrideTimeRange: string | undefined,
+  componentTimeRange: string | undefined,
+  componentFilter: string | undefined,
 ): CreateQueryResult<number | null, HTTPError> {
   const { canvasEntity } = ctx;
-  const { selectedTimeRange } = canvasEntity.timeControls;
 
   const timeAndFilterStore = canvasEntity.createTimeAndFilterStore(
     metricsViewName,
     {
-      timeRangeStore: selectedTimeRange,
-      overrideTimeRange: overrideTimeRange,
+      componentTimeRange,
+      componentFilter,
     },
   );
 
@@ -43,7 +43,7 @@ export function useKPITotals(
       {
         query: {
           enabled:
-            !!overrideTimeRange || (!!timeRange?.start && !!timeRange?.end),
+            !!componentTimeRange || (!!timeRange?.start && !!timeRange?.end),
           select: (data) => {
             return data.data?.[0]?.[measure] ?? null;
           },
@@ -60,6 +60,7 @@ export function useKPIComparisonTotal(
   metricsViewName: string,
   measure: string,
   overrideComparisonRange: string | undefined,
+  componentFilter: string | undefined,
 ): CreateQueryResult<number | null, HTTPError> {
   const { canvasEntity } = ctx;
   const { showTimeComparison, selectedComparisonTimeRange } =
@@ -70,7 +71,8 @@ export function useKPIComparisonTotal(
     metricsViewName,
     {
       timeRangeStore: selectedComparisonTimeRange,
-      overrideTimeRange: overrideComparisonRange,
+      componentTimeRange: overrideComparisonRange,
+      componentFilter,
     },
   );
 
@@ -108,7 +110,8 @@ export function useKPISparkline(
   instanceId: string,
   metricsViewName: string,
   measure: string,
-  overrideTimeRange: string | undefined,
+  componentTimeRange: string | undefined,
+  componentFilter: string | undefined,
 ): CreateQueryResult<Array<Record<string, unknown>>> {
   const allTimeRangeQuery = useMetricsViewTimeRange(
     instanceId,
@@ -121,8 +124,8 @@ export function useKPISparkline(
   const timeAndFilterStore = canvasEntity.createTimeAndFilterStore(
     metricsViewName,
     {
-      timeRangeStore: selectedTimeRange,
-      overrideTimeRange: overrideTimeRange,
+      componentTimeRange: componentTimeRange,
+      componentFilter,
     },
   );
 
@@ -137,9 +140,9 @@ export function useKPISparkline(
 
       let defaultGrain = selectedRange?.interval || V1TimeGrain.TIME_GRAIN_DAY;
 
-      if (overrideTimeRange) {
+      if (componentTimeRange) {
         const overrideRange = isoDurationToTimeRange(
-          overrideTimeRange,
+          componentTimeRange,
           maxTimeDate,
         );
 
diff --git a/web-common/src/features/canvas/components/table/TableTemplate.svelte b/web-common/src/features/canvas/components/table/TableTemplate.svelte
index 92273aac1e9..6f11778ebdd 100644
--- a/web-common/src/features/canvas/components/table/TableTemplate.svelte
+++ b/web-common/src/features/canvas/components/table/TableTemplate.svelte
@@ -66,6 +66,8 @@
   let pivotDataStore: PivotDataStore | undefined = undefined;
   let pivotConfig: Readable<PivotDataStoreConfig> | undefined = undefined;
   $: if (isValidSchema) {
+    // TODO: Rewrite this replace ctx across pivot to
+    // a subset of necessary entities
     const stateManagerContext = createStateManagers({
       queryClient,
       exploreName: "TODO", // Historically, State Managers have only been used for Explore, not Canvas.
diff --git a/web-common/src/features/canvas/components/util.ts b/web-common/src/features/canvas/components/util.ts
index 8c5ea0bac48..d225fcca911 100644
--- a/web-common/src/features/canvas/components/util.ts
+++ b/web-common/src/features/canvas/components/util.ts
@@ -39,7 +39,7 @@ export function getFilterOptions(
       : {}),
     dimension_filters: {
       type: "dimension_filters",
-      label: "Dimension Filters",
+      label: "Filters",
     },
   };
 }
diff --git a/web-common/src/features/canvas/inspector/ComponentsEditor.svelte b/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
index 68ccc68aab3..35091e30211 100644
--- a/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
+++ b/web-common/src/features/canvas/inspector/ComponentsEditor.svelte
@@ -14,7 +14,7 @@
   import SidebarWrapper from "@rilldata/web-common/features/visual-editing/SidebarWrapper.svelte";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import ComponentTabs from "./ComponentTabs.svelte";
-  import FiltersMapper from "./FiltersMapper.svelte";
+  import FiltersMapper from "./filters/FiltersMapper.svelte";
   import ParamMapper from "./ParamMapper.svelte";
 
   export let selectedComponentName: string;
@@ -61,7 +61,7 @@
   </svelte:fragment>
 
   {#if componentType && component && rendererProperties}
-    {#key selectedComponentIndex}
+    {#key selectedComponentName}
       {#if currentTab === "options"}
         <ParamMapper
           {component}
@@ -69,7 +69,11 @@
           paramValues={rendererProperties}
         />
       {:else if currentTab === "filters"}
-        <FiltersMapper {component} paramValues={rendererProperties} />
+        <FiltersMapper
+          {selectedComponentName}
+          {component}
+          paramValues={rendererProperties}
+        />
       {:else if currentTab === "config"}
         <VegaConfigInput {component} paramValues={rendererProperties} />
       {/if}
diff --git a/web-common/src/features/canvas/inspector/filters/DimensionFiltersInput.svelte b/web-common/src/features/canvas/inspector/filters/DimensionFiltersInput.svelte
new file mode 100644
index 00000000000..bb379842087
--- /dev/null
+++ b/web-common/src/features/canvas/inspector/filters/DimensionFiltersInput.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+  import { Button } from "@rilldata/web-common/components/button";
+  import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
+  import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
+  import AdvancedFilter from "@rilldata/web-common/features/dashboards/filters/AdvancedFilter.svelte";
+  import FilterButton from "@rilldata/web-common/features/dashboards/filters/FilterButton.svelte";
+  import DimensionFilter from "@rilldata/web-common/features/dashboards/filters/dimension-filters/DimensionFilter.svelte";
+  import MeasureFilter from "@rilldata/web-common/features/dashboards/filters/measure-filters/MeasureFilter.svelte";
+  import type { MeasureFilterEntry } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
+  import { isExpressionUnsupported } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+  import { getMapFromArray } from "@rilldata/web-common/lib/arrayUtils";
+  import { flip } from "svelte/animate";
+
+  export let metricsView: string;
+  export let selectedComponentName: string;
+  export let label: string;
+  export let id: string;
+  export let filter: string;
+  export let onChange: (filter: string) => void = () => {};
+
+  const {
+    canvasEntity: {
+      useComponent,
+      spec: { getDimensionsForMetricView, getSimpleMeasuresForMetricView },
+    },
+  } = getCanvasStateManagers();
+
+  $: componentStore = useComponent(selectedComponentName);
+
+  $: allDimensions = getDimensionsForMetricView(metricsView);
+  $: allSimpleMeasures = getSimpleMeasuresForMetricView(metricsView);
+
+  $: ({
+    whereFilter,
+    toggleDimensionValueSelection,
+    removeDimensionFilter,
+    toggleDimensionFilterMode,
+    setMeasureFilter,
+    removeMeasureFilter,
+    setTemporaryFilterName,
+    clearAllFilters,
+    filterText,
+    dimensionHasFilter,
+    getDimensionFilterItems,
+    getAllDimensionFilterItems,
+    isFilterExcludeMode,
+    getMeasureFilterItems,
+    getAllMeasureFilterItems,
+    measureHasFilter,
+  } = componentStore.filters);
+
+  $: dimensionIdMap = getMapFromArray(
+    $allDimensions,
+    (dimension) => (dimension.name || dimension.column) as string,
+  );
+
+  $: measureIdMap = getMapFromArray(
+    $allSimpleMeasures,
+    (m) => m.name as string,
+  );
+
+  $: if ((filter ?? "") !== ($filterText ?? "")) {
+    onChange($filterText);
+  }
+
+  $: currentDimensionFilters = $getDimensionFilterItems(dimensionIdMap);
+  $: allDimensionFilters = $getAllDimensionFilterItems(
+    currentDimensionFilters,
+    dimensionIdMap,
+  );
+
+  $: currentMeasureFilters = $getMeasureFilterItems(measureIdMap);
+  $: allMeasureFilters = $getAllMeasureFilterItems(
+    currentMeasureFilters,
+    measureIdMap,
+  );
+
+  // hasFilter only checks for complete filters and excludes temporary ones
+  $: hasFilters =
+    currentDimensionFilters.length > 0 || currentMeasureFilters.length > 0;
+
+  $: isComplexFilter = isExpressionUnsupported($whereFilter);
+
+  function handleMeasureFilterApply(
+    dimension: string,
+    measureName: string,
+    oldDimension: string,
+    filter: MeasureFilterEntry,
+  ) {
+    if (oldDimension && oldDimension !== dimension) {
+      removeMeasureFilter(oldDimension, measureName);
+    }
+    setMeasureFilter(dimension, filter);
+  }
+</script>
+
+<div class="flex flex-col gap-y-2 pt-1">
+  <div class="flex justify-between gap-x-2">
+    <InputLabel small {label} {id} />
+
+    <FilterButton
+      allDimensions={$allDimensions}
+      filteredSimpleMeasures={$allSimpleMeasures}
+      dimensionHasFilter={$dimensionHasFilter}
+      measureHasFilter={$measureHasFilter}
+      {setTemporaryFilterName}
+      addBorder={false}
+    />
+  </div>
+
+  <div class="relative flex flex-col gap-x-2 gap-y-2 items-start">
+    <div class="relative flex flex-row flex-wrap gap-x-2 gap-y-2">
+      {#if isComplexFilter}
+        <AdvancedFilter advancedFilter={$whereFilter} />
+      {:else if allDimensionFilters.length || allMeasureFilters.length}
+        {#each allDimensionFilters as { name, label, selectedValues } (name)}
+          {@const dimension = $allDimensions.find(
+            (d) => d.name === name || d.column === name,
+          )}
+          {@const dimensionName = dimension?.name || dimension?.column}
+          <div animate:flip={{ duration: 200 }}>
+            {#if dimensionName}
+              <DimensionFilter
+                metricsViewNames={[metricsView]}
+                readOnly={false}
+                smallChip
+                {name}
+                {label}
+                {selectedValues}
+                timeStart={new Date(0).toISOString()}
+                timeEnd={new Date().toISOString()}
+                timeControlsReady
+                excludeMode={$isFilterExcludeMode(name)}
+                onRemove={() => removeDimensionFilter(name)}
+                onToggleFilterMode={() => toggleDimensionFilterMode(name)}
+                onSelect={(value) =>
+                  toggleDimensionValueSelection(name, value, true)}
+              />
+            {/if}
+          </div>
+        {/each}
+        {#each allMeasureFilters as { name, label, dimensionName, filter } (name)}
+          <div animate:flip={{ duration: 200 }}>
+            <MeasureFilter
+              allDimensions={$allDimensions}
+              {name}
+              {label}
+              {dimensionName}
+              {filter}
+              onRemove={() => removeMeasureFilter(dimensionName, name)}
+              onApply={({ dimension, oldDimension, filter }) =>
+                handleMeasureFilterApply(dimension, name, oldDimension, filter)}
+            />
+          </div>
+        {/each}
+      {/if}
+    </div>
+    <div class="ml-auto">
+      {#if hasFilters}
+        <Button type="text" on:click={clearAllFilters}>Clear filters</Button>
+      {/if}
+    </div>
+  </div>
+</div>
diff --git a/web-common/src/features/canvas/inspector/FiltersMapper.svelte b/web-common/src/features/canvas/inspector/filters/FiltersMapper.svelte
similarity index 71%
rename from web-common/src/features/canvas/inspector/FiltersMapper.svelte
rename to web-common/src/features/canvas/inspector/filters/FiltersMapper.svelte
index 4747618357e..6deeae92177 100644
--- a/web-common/src/features/canvas/inspector/FiltersMapper.svelte
+++ b/web-common/src/features/canvas/inspector/filters/FiltersMapper.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
   import { type CanvasComponentObj } from "@rilldata/web-common/features/canvas/components/util";
+  import DimensionFiltersInput from "@rilldata/web-common/features/canvas/inspector/filters/DimensionFiltersInput.svelte";
   import { type V1ComponentSpecRendererProperties } from "@rilldata/web-common/runtime-client";
   import { onMount } from "svelte";
 
+  export let selectedComponentName: string;
   export let component: CanvasComponentObj;
   export let paramValues: V1ComponentSpecRendererProperties;
 
@@ -19,8 +21,8 @@
   $: inputParams = component.inputParams().filter;
 
   // Enable this when adding support for dimension filters
-  // $: metricsView =
-  //   "metrics_view" in paramValues ? paramValues.metrics_view : null;
+  $: metricsView =
+    "metrics_view" in paramValues ? paramValues.metrics_view : null;
 
   onMount(() => {
     localParamValues = structuredClone(paramValues) || {};
@@ -30,7 +32,7 @@
 <div>
   {#each Object.entries(inputParams) as [key, config]}
     <div class="component-param">
-      {#if config.type === "time_range" || config.type === "comparison_range" || config.type == "dimension_filters"}
+      {#if config.type === "time_range" || config.type === "comparison_range"}
         <Input
           inputType="text"
           capitalizeLabel={false}
@@ -47,6 +49,18 @@
             component.updateProperty(key, localParamValues[key]);
           }}
         />
+      {:else if config.type == "dimension_filters" && metricsView}
+        <DimensionFiltersInput
+          {metricsView}
+          {selectedComponentName}
+          label={config.label ?? key}
+          id={key}
+          filter={localParamValues[key]}
+          onChange={async (filter) => {
+            localParamValues[key] = filter;
+            component.updateProperty(key, localParamValues[key]);
+          }}
+        />
       {/if}
     </div>
   {/each}
diff --git a/web-common/src/features/canvas/stores/canvas-component.ts b/web-common/src/features/canvas/stores/canvas-component.ts
new file mode 100644
index 00000000000..385f2935f31
--- /dev/null
+++ b/web-common/src/features/canvas/stores/canvas-component.ts
@@ -0,0 +1,27 @@
+import { get } from "svelte/store";
+import { CanvasFilters } from "./canvas-filters";
+import type { CanvasResolvedSpec } from "./canvas-spec";
+
+export class CanvasComponentState {
+  name: string;
+  filters: CanvasFilters;
+  private spec: CanvasResolvedSpec;
+
+  constructor(name: string, spec: CanvasResolvedSpec) {
+    this.name = name;
+    this.filters = new CanvasFilters(spec);
+    this.spec = spec;
+
+    const componentResourceStore = spec.getComponentResource(name);
+    const componentResource = get(componentResourceStore);
+
+    if (
+      componentResource &&
+      componentResource.rendererProperties?.dimension_filters
+    ) {
+      this.filters.setFiltersFromText(
+        componentResource.rendererProperties?.dimension_filters as string,
+      );
+    }
+  }
+}
diff --git a/web-common/src/features/canvas/stores/canvas-entity.ts b/web-common/src/features/canvas/stores/canvas-entity.ts
index 6391211c00f..9c686f7add4 100644
--- a/web-common/src/features/canvas/stores/canvas-entity.ts
+++ b/web-common/src/features/canvas/stores/canvas-entity.ts
@@ -1,14 +1,21 @@
 import { useCanvas } from "@rilldata/web-common/features/canvas/selector";
 import type { CanvasSpecResponseStore } from "@rilldata/web-common/features/canvas/types";
+import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import {
   buildValidMetricsViewFilter,
   createAndExpression,
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
+import { convertFilterParamToExpression } from "@rilldata/web-common/features/dashboards/url-state/filters/converters";
 import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 import type { DashboardTimeControls } from "@rilldata/web-common/lib/time/types";
-import type { V1TimeRange } from "@rilldata/web-common/runtime-client";
+import {
+  V1Operation,
+  type V1Expression,
+  type V1TimeRange,
+} from "@rilldata/web-common/runtime-client";
 import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import { derived, writable, type Writable } from "svelte/store";
+import { CanvasComponentState } from "./canvas-component";
 import { CanvasFilters } from "./canvas-filters";
 import { CanvasResolvedSpec } from "./canvas-spec";
 import { CanvasTimeControls } from "./canvas-time-control";
@@ -16,6 +23,9 @@ import { CanvasTimeControls } from "./canvas-time-control";
 export class CanvasEntity {
   name: string;
 
+  /** Local state store for canvas components */
+  components: Map<string, CanvasComponentState>;
+
   /**
    * Time controls for the canvas entity containing various
    * time related writables
@@ -44,30 +54,43 @@ export class CanvasEntity {
 
     this.name = name;
 
+    this.components = new Map();
     this.selectedComponentIndex = writable(null);
     this.spec = new CanvasResolvedSpec(validSpecStore);
     this.timeControls = new CanvasTimeControls(validSpecStore);
     this.filters = new CanvasFilters(this.spec);
   }
 
-  setSelectedComponentIndex(index: number | null) {
+  setSelectedComponentIndex = (index: number | null) => {
     this.selectedComponentIndex.set(index);
-  }
+  };
+
+  useComponent = (componentName: string) => {
+    let componentEntity = this.components.get(componentName);
+
+    if (!componentEntity) {
+      componentEntity = new CanvasComponentState(componentName, this.spec);
+      this.components.set(componentName, componentEntity);
+    }
+    return componentEntity;
+  };
 
   /**
    * Helper method to get the time range and where clause for a given metrics view
    * with the ability to override the time range and filter
    */
-  createTimeAndFilterStore(
+  createTimeAndFilterStore = (
     metricsViewName: string,
     {
-      timeRangeStore,
-      overrideTimeRange,
+      timeRangeStore = this.timeControls.selectedTimeRange,
+      componentTimeRange,
+      componentFilter,
     }: {
-      timeRangeStore: Writable<DashboardTimeControls | undefined>;
-      overrideTimeRange?: string;
+      timeRangeStore?: Writable<DashboardTimeControls | undefined>;
+      componentTimeRange?: string;
+      componentFilter?: string;
     },
-  ) {
+  ) => {
     const { timeControls, filters, spec } = this;
 
     const dimensionsStore = spec.getDimensionsForMetricView(metricsViewName);
@@ -88,16 +111,31 @@ export class CanvasEntity {
           end: timeRangeVal?.end?.toISOString(),
           timeZone,
         };
-        if (overrideTimeRange) {
-          timeRange = { isoDuration: overrideTimeRange, timeZone };
+        if (componentTimeRange) {
+          timeRange = { isoDuration: componentTimeRange, timeZone };
         }
 
-        const where =
+        const timeGrain = timeRangeVal?.interval;
+
+        const globalWhere =
           buildValidMetricsViewFilter(whereFilter, dtf, dimensions, measures) ??
           createAndExpression([]);
 
-        return { timeRange, where };
+        let where: V1Expression | undefined = globalWhere;
+
+        if (componentFilter) {
+          let expr = convertFilterParamToExpression(componentFilter);
+          if (
+            expr?.cond?.op !== V1Operation.OPERATION_AND &&
+            expr?.cond?.op !== V1Operation.OPERATION_OR
+          ) {
+            expr = createAndExpression([expr]);
+          }
+          where = mergeFilters(globalWhere, expr);
+        }
+
+        return { timeRange, where, timeGrain };
       },
     );
-  }
+  };
 }
diff --git a/web-common/src/features/canvas/stores/canvas-filters.ts b/web-common/src/features/canvas/stores/canvas-filters.ts
index aeb7afb1845..d0945664045 100644
--- a/web-common/src/features/canvas/stores/canvas-filters.ts
+++ b/web-common/src/features/canvas/stores/canvas-filters.ts
@@ -4,7 +4,10 @@ import {
   getMeasureDisplayName,
 } from "@rilldata/web-common/features/dashboards/filters/getDisplayName";
 import type { MeasureFilterEntry } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-entry";
-import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
+import {
+  mergeDimensionAndMeasureFilter,
+  splitWhereFilter,
+} from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import type { DimensionFilterItem } from "@rilldata/web-common/features/dashboards/state-managers/selectors/dimension-filters";
 import { filterItemsSortFunction } from "@rilldata/web-common/features/dashboards/state-managers/selectors/filters";
 import type { MeasureFilterItem } from "@rilldata/web-common/features/dashboards/state-managers/selectors/measure-filters";
@@ -17,8 +20,13 @@ import {
   isExpressionUnsupported,
   matchExpressionByName,
   negateExpression,
+  sanitiseExpression,
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { DimensionThresholdFilter } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
+import {
+  convertExpressionToFilterParam,
+  convertFilterParamToExpression,
+} from "@rilldata/web-common/features/dashboards/url-state/filters/converters";
 import type {
   MetricsViewSpecDimensionV2,
   V1Expression,
@@ -83,6 +91,7 @@ export class CanvasFilters {
   >;
   includedDimensionValues: Readable<(dimensionName: string) => unknown[]>;
   hasAtLeastOneDimensionFilter: Readable<() => boolean>;
+  filterText: Readable<string>;
 
   constructor(spec: CanvasResolvedSpec) {
     // -----------------------------
@@ -297,6 +306,22 @@ export class CanvasFilters {
         };
       },
     );
+
+    this.filterText = derived(
+      [this.whereFilter, this.dimensionThresholdFilters],
+      ([$whereFilter, $dtf]) => {
+        const mergedFilters =
+          sanitiseExpression(
+            mergeDimensionAndMeasureFilter(
+              $whereFilter ?? createAndExpression([]),
+              $dtf,
+            ),
+            undefined,
+          ) ?? createAndExpression([]);
+
+        return convertExpressionToFilterParam(mergedFilters);
+      },
+    );
   }
 
   private getMeasureFilters = (
@@ -533,4 +558,15 @@ export class CanvasFilters {
   setTemporaryFilterName = (name: string) => {
     this.temporaryFilterName.set(name);
   };
+
+  setFiltersFromText = (filterText: string) => {
+    let expr = convertFilterParamToExpression(filterText);
+    if (
+      expr?.cond?.op !== V1Operation.OPERATION_AND &&
+      expr?.cond?.op !== V1Operation.OPERATION_OR
+    ) {
+      expr = createAndExpression([expr]);
+    }
+    this.setFilters(expr);
+  };
 }
diff --git a/web-common/src/features/canvas/stores/canvas-spec.ts b/web-common/src/features/canvas/stores/canvas-spec.ts
index 5f30591ff45..fe9107c2a46 100644
--- a/web-common/src/features/canvas/stores/canvas-spec.ts
+++ b/web-common/src/features/canvas/stores/canvas-spec.ts
@@ -4,6 +4,7 @@ import {
   type MetricsViewSpecDimensionV2,
   type MetricsViewSpecMeasureV2,
   type V1CanvasSpec,
+  type V1ComponentSpec,
 } from "@rilldata/web-common/runtime-client";
 import { derived, get, type Readable } from "svelte/store";
 
@@ -47,6 +48,11 @@ export class CanvasResolvedSpec {
   allDimensions: Readable<MetricsViewSpecDimensionV2[]>;
   metricsViewDimensionsMap: Readable<Record<string, Set<string>>>;
 
+  /** Component Selectors */
+  getComponentResource: (
+    componentName: string,
+  ) => Readable<V1ComponentSpec | undefined>;
+
   constructor(validSpecStore: CanvasSpecResponseStore) {
     this.canvasSpec = derived(validSpecStore, ($validSpecStore) => {
       return $validSpecStore.data?.canvas;
@@ -175,6 +181,13 @@ export class CanvasResolvedSpec {
         return metricsViewDimensionMap;
       },
     );
+
+    this.getComponentResource = (componentName: string) => {
+      return derived(validSpecStore, ($validSpecStore) => {
+        return $validSpecStore?.data?.components?.[componentName]?.component
+          ?.spec;
+      });
+    };
   }
 
   getDimensionsFromMeasure(measureName: string): MetricsViewSpecDimensionV2[] {
diff --git a/web-common/src/features/dashboards/filters/FilterButton.svelte b/web-common/src/features/dashboards/filters/FilterButton.svelte
index a48bb471fc6..8dab3120495 100644
--- a/web-common/src/features/dashboards/filters/FilterButton.svelte
+++ b/web-common/src/features/dashboards/filters/FilterButton.svelte
@@ -17,6 +17,7 @@
   export let dimensionHasFilter: (dimensionName: string) => boolean;
   export let measureHasFilter: (measureName: string) => boolean;
   export let setTemporaryFilterName: (name: string) => void;
+  export let addBorder = true;
 
   let open = false;
 
@@ -47,7 +48,12 @@
 <DropdownMenu.Root bind:open typeahead={false}>
   <DropdownMenu.Trigger asChild let:builder>
     <Tooltip distance={8} suppress={open}>
-      <button class:active={open} use:builder.action {...builder}>
+      <button
+        class:addBorder
+        class:active={open}
+        use:builder.action
+        {...builder}
+      >
         <Add size="17px" />
       </button>
       <TooltipContent slot="tooltip-content">Add filter</TooltipContent>
@@ -68,10 +74,14 @@
   button {
     @apply w-[34px] h-[26px] rounded-2xl;
     @apply flex items-center justify-center;
-    @apply border border-dashed border-slate-300;
+
     @apply bg-white;
   }
 
+  button.addBorder {
+    @apply border border-dashed border-slate-300;
+  }
+
   button:hover {
     @apply bg-slate-100;
   }
diff --git a/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte b/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
index 062c72eaf05..a37d16e69c0 100644
--- a/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
+++ b/web-common/src/features/dashboards/filters/dimension-filters/DimensionFilter.svelte
@@ -21,6 +21,7 @@
   export let timeStart: string | undefined;
   export let timeEnd: string | undefined;
   export let timeControlsReady: boolean | undefined;
+  export let smallChip = false;
   export let onRemove: () => void;
   export let onSelect: (value: string) => void;
   export let onToggleFilterMode: () => void;
@@ -96,6 +97,7 @@
           slot="body"
           label={excludeMode ? `Exclude ${label}` : label}
           show={1}
+          {smallChip}
           values={selectedValues}
         />
       </Chip>