Canvas: add local filters icon and tooltip

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

@@ -1,7 +1,10 @@
 <script lang="ts" context="module">
   import ComponentHeader from "@rilldata/web-common/features/canvas/ComponentHeader.svelte";
   import ComponentRenderer from "@rilldata/web-common/features/canvas/components/ComponentRenderer.svelte";
-  import { isChartComponentType } from "@rilldata/web-common/features/canvas/components/util";
+  import {
+    getComponentFilterProperties,
+    isChartComponentType,
+  } from "@rilldata/web-common/features/canvas/components/util";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import { builderActions, getAttrs, type Builder } from "bits-ui";
 </script>
@@ -28,6 +31,7 @@
 
   $: title = rendererProperties?.title;
   $: description = rendererProperties?.description;
+  $: componentFilters = getComponentFilterProperties(rendererProperties);
 
   function handleMouseEnter() {
     if (embed) return;
@@ -58,9 +62,11 @@
 >
   <div class="size-full relative">
     <div class="size-full overflow-hidden flex flex-col flex-none">
-      <div class="size-full overflow-hidden flex flex-col gap-y-1 flex-none">
+      <div
+        class="size-full overflow-hidden flex flex-col gap-y-1 flex-none relative"
+      >
         {#if !isChartType}
-          <ComponentHeader {title} {description} />
+          <ComponentHeader {title} {description} filters={componentFilters} />
         {/if}
         {#if renderer && rendererProperties}
           <ComponentRenderer {renderer} {componentName} />

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

@@ -1,19 +1,40 @@
 <script lang="ts">
+  import type { ComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/types";
+  import LocalFiltersHeader from "@rilldata/web-common/features/canvas/LocalFiltersHeader.svelte";
+
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
-
+  export let filters: ComponentFilterProperties;
   export let faint: boolean = false;
+
+  $: atleastOneFilter = Boolean(
+    filters?.comparison_range ||
+      filters?.dimension_filters ||
+      filters?.time_range,
+  );
 </script>
 
 {#if title || description}
-  <div class="w-full h-fit flex flex-col bg-white p-2">
+  <div class="w-full h-fit flex flex-col bg-white p-2 items-start">
     {#if title}
-      <h1 class:faint class="title">{title}</h1>
+      <div class="flex items-center gap-x-2">
+        <h1 class:faint class="title">{title}</h1>
+        <LocalFiltersHeader {atleastOneFilter} {filters} />
+      </div>
     {/if}
     {#if description}
-      <h2 class="description">{description}</h2>
+      <div class="flex items-center gap-x-2">
+        <h2 class="description">{description}</h2>
+        {#if !title}
+          <LocalFiltersHeader {atleastOneFilter} {filters} />
+        {/if}
+      </div>
     {/if}
   </div>
+{:else if atleastOneFilter}
+  <div class="absolute top-0 left-0 z-50 px-2 py-1">
+    <LocalFiltersHeader {atleastOneFilter} {filters} />
+  </div>
 {/if}
 
 <style lang="postcss">

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Filter from "@rilldata/web-common/components/icons/Filter.svelte";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import type { ComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/types";
+
+  export let filters: ComponentFilterProperties;
+  export let atleastOneFilter: boolean;
+</script>
+
+{#if atleastOneFilter}
+  <Tooltip distance={8} location="top">
+    <Filter size="16px" className="text-gray-400" />
+    <TooltipContent slot="tooltip-content">
+      <div class="p-2">
+        <div class="font-semibold mb-2">Local Filters Applied</div>
+        {#if filters.time_range}
+          <div>
+            <span class="font-medium">Time Range:</span>
+            {filters.time_range}
+          </div>
+        {/if}
+        {#if filters.comparison_range}
+          <div>
+            <span class="font-medium">Comparison Range:</span>
+            {filters.comparison_range}
+          </div>
+        {/if}
+        {#if filters.dimension_filters}
+          <div>
+            <span class="font-medium">Dimension Filters:</span>
+            {filters.dimension_filters}
+          </div>
+        {/if}
+      </div>
+    </TooltipContent>
+  </Tooltip>
+{/if}

web-common/src/features/canvas/components/charts/Chart.svelte

@@ -2,6 +2,7 @@
   import VegaLiteRenderer from "@rilldata/web-common/components/vega/VegaLiteRenderer.svelte";
   import ComponentHeader from "@rilldata/web-common/features/canvas/ComponentHeader.svelte";
   import type { ChartSpec } from "@rilldata/web-common/features/canvas/components/charts";
+  import { getComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/util";
   import { getCanvasStateManagers } from "@rilldata/web-common/features/canvas/state-managers/state-managers";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
@@ -37,6 +38,8 @@
 
   $: spec = generateSpec(chartType, chartConfig, $data);
 
+  $: componentFilters = getComponentFilterProperties(rendererProperties);
+
   $: measure = getMeasureForMetricView(
     chartConfig.y?.field,
     chartConfig.metrics_view,
@@ -64,7 +67,12 @@
   {:else if $data.error}
     <div class="text-red-500">{$data.error.message}</div>
   {:else}
-    <ComponentHeader faint={!chartConfig?.title} {title} {description} />
+    <ComponentHeader
+      faint={!chartConfig?.title}
+      {title}
+      {description}
+      filters={componentFilters}
+    />
     {#if hasNoData}
       <div
         class="flex w-full h-full p-2 text-xl ui-copy-disabled items-center justify-center"

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

@@ -4,12 +4,17 @@ import type {
   FilterInputTypes,
 } from "@rilldata/web-common/features/canvas/inspector/types";
 import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+import type { V1ComponentSpecRendererProperties } from "@rilldata/web-common/runtime-client";
 import { ChartComponent } from "./charts";
 import { ImageComponent } from "./image";
 import { KPIComponent } from "./kpi";
 import { MarkdownCanvasComponent } from "./markdown";
 import { TableCanvasComponent } from "./table";
-import type { CanvasComponentType, ComponentCommonProperties } from "./types";
+import type {
+  CanvasComponentType,
+  ComponentCommonProperties,
+  ComponentFilterProperties,
+} from "./types";
 
 export const commonOptions: Record<
   keyof ComponentCommonProperties,
@@ -92,6 +97,20 @@ export function isChartComponentType(
   );
 }
 
+export function getComponentFilterProperties(
+  rendererProperties: V1ComponentSpecRendererProperties | undefined,
+): ComponentFilterProperties {
+  return {
+    dimension_filters: rendererProperties?.dimension_filters as
+      | string
+      | undefined,
+    time_range: rendererProperties?.time_range as string | undefined,
+    comparison_range: rendererProperties?.comparison_range as
+      | string
+      | undefined,
+  };
+}
+
 export function getComponentRegistry(): Record<
   CanvasComponentType,
   CanvasComponentObj