refactor: bookmarks and filter menus

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

@@ -2870,6 +2870,8 @@ definitions:
     title: Selector for a dimension
   MetricsViewSpecDimensionV2:
     type: object
+    required:
+      - name
     properties:
       name:
         type: string
@@ -2897,6 +2899,9 @@ definitions:
     title: Type of measure query to generate
   MetricsViewSpecMeasureV2:
     type: object
+    required:
+      - name
+      - expression
     properties:
       name:
         type: string
@@ -4728,8 +4733,12 @@ definitions:
     title: Response message for QueryService.MetricsViewComparison
   v1MetricsViewComparisonRow:
     type: object
+    required:
+      - dimensionValue
+      - measureValues
     properties:
       dimensionValue:
+        type: string
         title: Not optional, not null
       measureValues:
         type: array
@@ -4870,6 +4879,9 @@ definitions:
         title: Optional, defaults to false
   v1MetricsViewSpec:
     type: object
+    required:
+      - dimensions
+      - measures
     properties:
       connector:
         type: string
@@ -4980,6 +4992,8 @@ definitions:
           Deprecated: Now defined in the Explore resource.
   v1MetricsViewState:
     type: object
+    required:
+      - validSpec
     properties:
       validSpec:
         $ref: '#/definitions/v1MetricsViewSpec'
@@ -5157,6 +5171,9 @@ definitions:
         title: Not optional, not null
   v1MetricsViewV2:
     type: object
+    required:
+      - spec
+      - state
     properties:
       spec:
         $ref: '#/definitions/v1MetricsViewSpec'

web-admin/src/features/bookmarks/BaseBookmarkForm.svelte

@@ -1,40 +1,19 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import type { BookmarkFormValues } from "@rilldata/web-admin/features/bookmarks/form-utils";
-  import { getPrettySelectedTimeRange } from "@rilldata/web-admin/features/bookmarks/selectors";
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
   import Select from "@rilldata/web-common/components/forms/Select.svelte";
   import Label from "@rilldata/web-common/components/forms/Label.svelte";
   import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
-  import FilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/FilterChipsReadOnly.svelte";
-  import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
-  import type { V1TimeRange } from "@rilldata/web-common/runtime-client";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import type { createForm } from "svelte-forms-lib";
   import { InfoIcon } from "lucide-svelte";
-  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import Filters from "@rilldata/web-common/features/dashboards/filters/Filters.svelte";
 
-  export let metricsViewName: string;
   export let formState: ReturnType<typeof createForm<BookmarkFormValues>>;
 
-  $: dashboardStore = useDashboardStore(metricsViewName);
-
-  let timeRange: V1TimeRange;
-  $: timeRange = {
-    isoDuration: $dashboardStore.selectedTimeRange?.name,
-    start: $dashboardStore.selectedTimeRange?.start?.toISOString() ?? "",
-    end: $dashboardStore.selectedTimeRange?.end?.toISOString() ?? "",
-  };
-
-  $: selectedTimeRange = getPrettySelectedTimeRange(
-    queryClient,
-    $runtime?.instanceId,
-    metricsViewName,
-  );
-
   const { form, errors } = formState;
 
   // Adding it here to get a newline in
@@ -49,6 +28,12 @@ Managed bookmarks will be available to all viewers of this dashboard.`;
     /* Switch was triggering this causing clicking on them submitting the form */
   }}
 >
+  <div class="flex flex-col gap-y-2">
+    <Label class="flex flex-col gap-y-1 text-sm">
+      <div class="text-gray-800 font-medium">Filters</div>
+    </Label>
+    <Filters hideRanges hideIcons bookmarks />
+  </div>
   <Input
     bind:value={$form["displayName"]}
     errors={$errors["displayName"]}
@@ -62,18 +47,7 @@ Managed bookmarks will be available to all viewers of this dashboard.`;
     label="Description"
     optional
   />
-  <div class="flex flex-col gap-y-2">
-    <Label class="flex flex-col gap-y-1 text-sm">
-      <div class="text-gray-800 font-medium">Filters</div>
-      <div class="text-gray-500">Inherited from underlying dashboard view.</div>
-    </Label>
-    <FilterChipsReadOnly
-      dimensionThresholdFilters={$dashboardStore.dimensionThresholdFilters}
-      filters={$dashboardStore.whereFilter}
-      {metricsViewName}
-      {timeRange}
-    />
-  </div>
+
   <ProjectAccessControls
     organization={$page.params.organization}
     project={$page.params.project}
@@ -107,24 +81,4 @@ Managed bookmarks will be available to all viewers of this dashboard.`;
       </Tooltip>
     </Label>
   </div>
-  <div class="flex items-center space-x-2">
-    <Switch bind:checked={$form["absoluteTimeRange"]} id="absoluteTimeRange" />
-    <Label class="flex flex-col font-normal" for="absoluteTimeRange">
-      <div class="text-left text-sm flex gap-x-1 items-center">
-        <span>Absolute time range</span>
-        <Tooltip distance={8}>
-          <InfoIcon class="text-gray-500" size="14px" strokeWidth={2} />
-          <TooltipContent
-            class="whitespace-pre-line"
-            maxWidth="600px"
-            slot="tooltip-content"
-          >
-            The bookmark will use the dashboard's relative time if this toggle
-            is off.
-          </TooltipContent>
-        </Tooltip>
-      </div>
-      <div class="text-gray-500 text-sm">{$selectedTimeRange}</div>
-    </Label>
-  </div>
 </form>

web-admin/src/features/bookmarks/BookmarkDialog.svelte

@@ -105,15 +105,16 @@
   onOpenChange={(o) => {
     if (!o) onClose();
   }}
+  closeOnOutsideClick={false}
 >
-  <Dialog.Content>
+  <Dialog.Content class="w-full max-w-[620px]">
     <Dialog.Header>
       <Dialog.Title>
         {bookmark ? "Edit bookmark" : "Bookmark current view"}
       </Dialog.Title>
     </Dialog.Header>
 
-    <BaseBookmarkForm {formState} {metricsViewName} />
+    <BaseBookmarkForm {formState} />
 
     <div class="flex flex-row mt-4 gap-2">
       <div class="grow" />

web-admin/src/features/bookmarks/Bookmarks.svelte

@@ -22,10 +22,10 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import { BookmarkIcon } from "lucide-svelte";
   import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { suppressFilterMenus } from "@rilldata/web-common/features/dashboards/filters/Filters.svelte";
 
   export let metricsViewName: string;
 
-  let showDialog = false;
   let bookmark: BookmarkEntry | null = null;
 
   $: bookmarkApplier = createBookmarkApplier(
@@ -82,31 +82,31 @@
   <DropdownMenuTrigger asChild let:builder>
     <Button builders={[builder]} compact type="secondary">
       <BookmarkIcon
-        class="inline-flex"
-        fill={open ? "black" : "none"}
+        class="inline-flex {open && 'fill-primary-600'}"
         size="16px"
       />
     </Button>
   </DropdownMenuTrigger>
   <BookmarksContent
-    on:create={() => (showDialog = true)}
+    on:create={() => suppressFilterMenus.set(true)}
     on:create-home={() => createHomeBookmark()}
     on:delete={({ detail }) => deleteBookmark(detail)}
     on:edit={({ detail }) => {
-      showDialog = true;
+      suppressFilterMenus.set(true);
       bookmark = detail;
+      selectBookmark(detail);
     }}
     on:select={({ detail }) => selectBookmark(detail)}
     {metricsViewName}
   />
 </DropdownMenu>
 
-{#if showDialog}
+{#if $suppressFilterMenus}
   <BookmarkDialog
     {bookmark}
     {metricsViewName}
     onClose={() => {
-      showDialog = false;
+      suppressFilterMenus.set(false);
       bookmark = null;
     }}
   />

web-admin/src/features/bookmarks/BookmarksDropdownMenuItem.svelte

@@ -13,18 +13,15 @@
 
   const dispatch = createEventDispatcher();
 
-  function selectBookmark(e) {
-    if (e.skipSelection) return;
+  function selectBookmark() {
     dispatch("select", bookmark);
   }
 
-  function editBookmark(e) {
-    e.skipSelection = true;
+  function editBookmark() {
     dispatch("edit", bookmark);
   }
 
-  function deleteBookmark(e) {
-    e.skipSelection = true;
+  function deleteBookmark() {
     dispatch("delete", bookmark);
   }
 
@@ -33,23 +30,23 @@
 
 <DropdownMenuItem class="py-2">
   <div
-    class="flex justify-between gap-x-2 w-full"
+    class="flex justify-between gap-x-2 w-full h-7 items-center"
     on:click={selectBookmark}
     on:keydown={(e) => e.key === "Enter" && e.currentTarget.click()}
     on:mouseenter={() => (hovered = true)}
     on:mouseleave={() => (hovered = false)}
     role="menuitem"
     tabindex="-1"
   >
-    <div class="flex flex-row gap-x-2">
+    <div class="flex flex-row gap-x-2 items-center">
       {#if bookmark.resource.default}
         <HomeBookmark size="16px" />
       {:else if bookmark.filtersOnly}
         <Filter size="16px" />
       {:else}
         <BookmarkIcon size="16px" />
       {/if}
-      <div class="flex flex-col gap-y-0.5">
+      <div class="flex flex-col">
         <div
           class="text-xs font-medium text-gray-700 h-4 text-ellipsis overflow-hidden"
         >

web-admin/src/features/public-urls/CreatePublicURLForm.svelte

@@ -7,7 +7,6 @@
   import { Button } from "@rilldata/web-common/components/button";
   import Label from "@rilldata/web-common/components/forms/Label.svelte";
   import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
-  import FilterChipsReadOnly from "@rilldata/web-common/features/dashboards/filters/FilterChipsReadOnly.svelte";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
   import type { HTTPError } from "@rilldata/web-common/runtime-client/fetchWrapper";
@@ -21,6 +20,7 @@
     getSanitizedDashboardStateParam,
     hasDashboardWhereFilter,
   } from "./form-utils";
+  import Filters from "@rilldata/web-common/features/dashboards/filters/Filters.svelte";
 
   const queryClient = useQueryClient();
   const {
@@ -144,15 +144,7 @@
 
       <!-- Filters -->
       {#if hasWhereFilter}
-        <div>
-          <FilterChipsReadOnly
-            metricsViewName={$metricsViewName}
-            filters={$dashboardStore.whereFilter}
-            dimensionThresholdFilters={[]}
-            timeRange={undefined}
-            comparisonTimeRange={undefined}
-          />
-        </div>
+        <Filters readOnly timePills={false} />
       {/if}
     </div>
 

web-common/src/components/chip/index.ts

@@ -1,3 +1 @@
 export { default as Chip } from "./core/Chip.svelte";
-/** reusable components used in the application */
-export { default as RemovableListChip } from "./removable-list-chip/RemovableListChip.svelte";