Update selectors to use chips

rilldata · Dec 27, 2024 · 9540afe · 9540afe
1 parent 927a3cf
commit 9540afe
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 39 deletions.
diff --git a/web-common/src/components/chip/core/Chip.svelte b/web-common/src/components/chip/core/Chip.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { builderActions, getAttrs, type Builder } from "bits-ui";
   import { createEventDispatcher, getContext } from "svelte";
-  import { slideRight } from "../../../lib/transitions";
   import type { Writable } from "svelte/store";
-  import Tooltip from "../../tooltip/Tooltip.svelte";
+  import { slideRight } from "../../../lib/transitions";
   import CancelCircle from "../../icons/CancelCircle.svelte";
-  import TooltipContent from "../../tooltip/TooltipContent.svelte";
   import CaretDownIcon from "../../icons/CaretDownIcon.svelte";
+  import Tooltip from "../../tooltip/Tooltip.svelte";
+  import TooltipContent from "../../tooltip/TooltipContent.svelte";
 
   export let removable = false;
   export let active = false;
@@ -15,6 +15,7 @@
   export let exclude = false;
   export let grab = false;
   export let compact = false;
+  export let fullWidth = false;
   export let builders: Builder[] = [];
   export let caret = builders.length > 0;
   export let slideDuration = 150;
@@ -44,6 +45,7 @@
     class:grab
     class:exclude
     class:compact
+    class:fullWidth
     class:pointer-events-none={readOnly && !allowPointerEvents}
     aria-label={label}
     {...getAttrs(builders)}
@@ -78,7 +80,7 @@
         on:click
         on:mousedown
         aria-label={label}
-        class="text-inherit w-full select-none flex items-center gap-x-1 px-0.5"
+        class="text-inherit w-full select-none flex items-center justify-between gap-x-1 px-0.5"
       >
         <slot name="body" />
 
@@ -169,4 +171,8 @@
   .compact {
     @apply py-0;
   }
+
+  .fullWidth {
+    @apply w-full;
+  }
 </style>
diff --git a/web-common/src/features/canvas/inspector/FieldSelectorDropdown.svelte b/web-common/src/features/canvas/inspector/FieldSelectorDropdown.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
+  import { Chip } from "@rilldata/web-common/components/chip";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import InputLabel from "@rilldata/web-common/components/forms/InputLabel.svelte";
-  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
   import Search from "@rilldata/web-common/components/search/Search.svelte";
   import {
     getDimensionDisplayName,
     getMeasureDisplayName,
   } from "@rilldata/web-common/features/dashboards/filters/getDisplayName";
-  import PivotChip from "@rilldata/web-common/features/dashboards/pivot/PivotChip.svelte";
-  import { PivotChipType } from "@rilldata/web-common/features/dashboards/pivot/types";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { MinusIcon, PlusIcon } from "lucide-svelte";
   import {
@@ -148,23 +146,15 @@
       }}
     >
       <DropdownMenu.Trigger asChild let:builder>
-        <button
-          use:builder.action
-          {...builder}
-          class:open
-          class="flex px-3 gap-x-2 h-6 max-w-full items-center text-xs
-                 border border-gray-300 rounded-[2px] break-all overflow-hidden"
-        >
-          {#if selectedItem}
-            {displayMap[selectedItem] || selectedItem}
-          {:else}
-            Select a {type} field
-          {/if}
-          <CaretDownIcon
-            size="12px"
-            className="!fill-gray-600 ml-auto flex-none"
-          />
-        </button>
+        <Chip fullWidth caret {type} builders={[builder]}>
+          <span class="font-bold truncate" slot="body">
+            {#if selectedItem}
+              {displayMap[selectedItem] || selectedItem}
+            {:else}
+              Select a {type} field
+            {/if}
+          </span>
+        </Chip>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content sameWidth class="p-0">
@@ -199,18 +189,14 @@
   {#if multi && selectedItems && selectedItems.length > 0}
     <div class="flex flex-col gap-1">
       {#each selectedItems as item}
-        <div class="flex items-center justify-between">
-          <PivotChip
-            removable
-            item={{
-              id: item,
-              title: displayMap[item] || item,
-              type:
-                type === "measure"
-                  ? PivotChipType.Measure
-                  : PivotChipType.Dimension,
-            }}
-          />
+        <div class="flex items-center justify-between gap-x-2">
+          <div class="flex-1">
+            <Chip fullWidth {type}>
+              <span class="font-bold truncate" slot="body">
+                {displayMap[item] || item}
+              </span>
+            </Chip>
+          </div>
           <button
             class=" px-2 py-1 text-xs"
             on:click={() => {

diff --git a/web-common/src/features/canvas/inspector/MarkSelector.svelte b/web-common/src/features/canvas/inspector/MarkSelector.svelte
@@ -30,13 +30,13 @@
 
   <FieldSwitcher
     small
-    fields={["static", "split_by"]}
+    fields={["value", "Split by"]}
     {selected}
     onClick={(_, field) => {
-      if (field === "static") {
+      if (field === "value") {
         selected = 0;
         onChange(color);
-      } else if (field === "split_by") {
+      } else if (field === "Split by") {
         selected = 1;
       }
     }}