From 326deb366db0f4cffa7b225f735e8917f483d06b Mon Sep 17 00:00:00 2001
From: Brian Holmes <120223836+briangregoryholmes@users.noreply.github.com>
Date: Thu, 19 Sep 2024 21:01:38 -0400
Subject: [PATCH] refactor: measure menu (#5741)

* init commit

* test fix

* test fix
---
 web-common/src/components/menu/README.md      |  13 --
 .../menu/compositions/SelectMenu.svelte       |  61 -------
 .../components/menu/core/MenuHeader.svelte    |  13 --
 web-common/src/components/menu/index.ts       |   7 +-
 .../components/menu/shadcn/SelectMenu.svelte  |  42 -----
 .../menu/shadcn/SelectMenuContent.svelte      |  47 ------
 .../menu/triggers/SelectButton.svelte         |  66 --------
 web-common/src/components/menu/types.ts       |  14 --
 .../menu/wrappers/SimpleActionMenu.svelte     |  66 --------
 .../menu/wrappers/WithSelectMenu.svelte       | 153 ------------------
 .../src/components/select/select-item.svelte  |   2 +-
 .../leaderboard/LeaderboardControls.svelte    | 126 +++++++--------
 .../state-managers/selectors/measures.ts      |   5 +
 web-local/tests/dashboards/dashboards.spec.ts |   2 +-
 .../leaderboard-context-column.spec.ts        |   2 +-
 .../dashboards/number-formatting.spec.ts      |   8 +-
 web-local/tests/utils/commonHelpers.ts        |   8 +-
 17 files changed, 74 insertions(+), 561 deletions(-)
 delete mode 100644 web-common/src/components/menu/README.md
 delete mode 100644 web-common/src/components/menu/compositions/SelectMenu.svelte
 delete mode 100644 web-common/src/components/menu/core/MenuHeader.svelte
 delete mode 100644 web-common/src/components/menu/shadcn/SelectMenu.svelte
 delete mode 100644 web-common/src/components/menu/shadcn/SelectMenuContent.svelte
 delete mode 100644 web-common/src/components/menu/triggers/SelectButton.svelte
 delete mode 100644 web-common/src/components/menu/types.ts
 delete mode 100644 web-common/src/components/menu/wrappers/SimpleActionMenu.svelte
 delete mode 100644 web-common/src/components/menu/wrappers/WithSelectMenu.svelte

diff --git a/web-common/src/components/menu/README.md b/web-common/src/components/menu/README.md
deleted file mode 100644
index c4f3e925dd8..00000000000
--- a/web-common/src/components/menu/README.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Menu components
-
-This directory contains our menu components. There are three types of components here:
-
-- `core` – Basic container and logical components for usage. These items do _not_ float on their own; we are mostly using them with `WithTogglableFloatingElement.svelte` component, defined in `src/components/floating-element`.
-  - `Menu.svelte` – the parent element. This basic component handles keyboard interactions.
-  - `MenuItem.svelte` – the main child element. Handles selection and rendering of slots.
-- `wrappers` – The `With<thing>.svelte` collection. Lke a tooltip, these components wrap a DOM element and provide a floating menu component in some way.
-  - `WithSelectMenu.svelte` – this utilizes `WithFloatingMenu.svelte` and makes it so that you provide the trigger, but the menu attached to the trigger functions like a selector menu.
-- `triggers` – Trigger components used in compositions
-  - `SelectButton.svelte` – a composed trigger button for use in `SimpleSelectMenu.svelte`.
-- `compositions` – Convenience components comprised of all of the above, ready-made for usage.
-  - `SelectMenu.svelte` – this is a full component, combining `SelectButton` and `WithSelectMenu` to create a simple drop-in replacement for `select`. It has other features as well; see the props.
diff --git a/web-common/src/components/menu/compositions/SelectMenu.svelte b/web-common/src/components/menu/compositions/SelectMenu.svelte
deleted file mode 100644
index e25c709607c..00000000000
--- a/web-common/src/components/menu/compositions/SelectMenu.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<!-- @component
-A simple menu of actions. When one is clicked, the callback fires,
-and the menu closes.
-
-This component is a fully-opinionated way of using selects.
-A slot is provided to change the text within the button.
-
--->
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import type { Alignment, Location } from "../../floating-element/types";
-  import { SelectButton, WithSelectMenu } from "../index";
-  import type { SelectMenuItem } from "../types";
-
-  export let options: SelectMenuItem[];
-  export let selection: SelectMenuItem;
-  // this is fixed text that will always be displayed in the button
-  export let fixedText = "";
-
-  /* For multiSelect maintain array of keys in the consumer */
-  export let multiSelect = false;
-  export let location: Location = "bottom";
-  export let alignment: Alignment = "start";
-  export let distance = 16;
-  export let active = false;
-
-  export let paddingTop = 1;
-  export let paddingBottom = 1;
-
-  export let ariaLabel: undefined | string = undefined;
-
-  const dispatch = createEventDispatcher();
-</script>
-
-<!-- wrap a WithSelectMenu with a SelectButton -->
-<WithSelectMenu
-  {paddingTop}
-  {paddingBottom}
-  {location}
-  {alignment}
-  {distance}
-  {multiSelect}
-  on:select={(event) => {
-    if (!multiSelect) selection = event.detail;
-    dispatch("select", selection);
-  }}
-  bind:selection
-  bind:options
-  bind:active
-  let:toggleMenu
-  let:active
->
-  <SelectButton
-    on:click={toggleMenu}
-    tailwindClasses="overflow-hidden"
-    {active}
-    label={ariaLabel}
-  >
-    {fixedText} <span class="font-bold truncate">{selection?.main}</span>
-  </SelectButton>
-</WithSelectMenu>
diff --git a/web-common/src/components/menu/core/MenuHeader.svelte b/web-common/src/components/menu/core/MenuHeader.svelte
deleted file mode 100644
index 13b4e2ec050..00000000000
--- a/web-common/src/components/menu/core/MenuHeader.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<header>
-  <div
-    class="grid justify-between pl-3 pr-1 items-center"
-    style:grid-template-columns="max-content max-content"
-  >
-    <div class="font-bold">
-      <slot name="title" />
-    </div>
-    <div>
-      <slot name="right" />
-    </div>
-  </div>
-</header>
diff --git a/web-common/src/components/menu/index.ts b/web-common/src/components/menu/index.ts
index 4194ec7882d..ba39a9954d4 100644
--- a/web-common/src/components/menu/index.ts
+++ b/web-common/src/components/menu/index.ts
@@ -1,11 +1,6 @@
 /** See README.md for more information. */
-/** ready-made components */
-export { default as SelectMenu } from "./compositions/SelectMenu.svelte";
+
 /** core components */
 export { default as Divider } from "./core/Divider.svelte";
 export { default as Menu } from "./core/Menu.svelte";
 export { default as MenuItem } from "./core/MenuItem.svelte";
-/** trigger components */
-export { default as SelectButton } from "./triggers/SelectButton.svelte";
-/** wrapper components */
-export { default as WithSelectMenu } from "./wrappers/WithSelectMenu.svelte";
diff --git a/web-common/src/components/menu/shadcn/SelectMenu.svelte b/web-common/src/components/menu/shadcn/SelectMenu.svelte
deleted file mode 100644
index 22731302c53..00000000000
--- a/web-common/src/components/menu/shadcn/SelectMenu.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts">
-  import type { SelectMenuItem } from "../types";
-  import Button from "../../button/Button.svelte";
-  import CaretDownIcon from "../../icons/CaretDownIcon.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import SelectMenuContent from "./SelectMenuContent.svelte";
-
-  export let options: SelectMenuItem[];
-  export let selections: Array<string | number>;
-  // this is fixed text that will always be displayed in the button
-  export let fixedText = "";
-  export let disabled = false;
-  export let active = false;
-  export let ariaLabel: string;
-
-  $: firstSelectedKey = selections?.[0] ?? null;
-
-  $: firstSelection = firstSelectedKey
-    ? options.find((option) => option.key === firstSelectedKey)
-    : null;
-</script>
-
-<DropdownMenu.Root bind:open={active}>
-  <DropdownMenu.Trigger asChild let:builder>
-    <Button builders={[builder]} type="text" label={ariaLabel} on:click>
-      <div
-        class="flex items-center gap-x-0.5 px-1.5 text-gray-700 hover:text-inherit"
-      >
-        <p class="truncate">{fixedText} <b>{firstSelection?.main}</b></p>
-        <span
-          class="transition-transform"
-          class:hidden={disabled}
-          class:-rotate-180={active}
-        >
-          <CaretDownIcon />
-        </span>
-      </div>
-    </Button>
-  </DropdownMenu.Trigger>
-
-  <SelectMenuContent {options} {selections} on:select />
-</DropdownMenu.Root>
diff --git a/web-common/src/components/menu/shadcn/SelectMenuContent.svelte b/web-common/src/components/menu/shadcn/SelectMenuContent.svelte
deleted file mode 100644
index 53ee3fa27f4..00000000000
--- a/web-common/src/components/menu/shadcn/SelectMenuContent.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import type { SelectMenuItem } from "../types";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-
-  export let options: SelectMenuItem[];
-  export let selections: Array<string | number>;
-
-  const dispatch = createEventDispatcher();
-
-  function handleClick(index: number) {
-    // if (!multiSelect) selection = event.detail;
-    const selection = options?.[index];
-
-    if (!options) return;
-
-    dispatch("select", selection);
-  }
-</script>
-
-<DropdownMenu.Content class="min-w-44 max-h-96 overflow-y-auto" align="start">
-  {#each options as option, i (option.key)}
-    {@const selected = selections.includes(option.key)}
-    <DropdownMenu.CheckboxItem
-      role="menuitem"
-      disabled={option.disabled}
-      class="text-xs cursor-pointer rounded-none"
-      checked={selected}
-      on:click={() => handleClick(i)}
-    >
-      <div class="flex flex-col">
-        <div class:text-gray-400={option.disabled} class:font-bold={selected}>
-          {option.main}
-        </div>
-        {#if option.description}
-          <p class="ui-copy-muted" style:font-size="11px">
-            {option.description}
-          </p>
-        {/if}
-      </div>
-      {option.right || ""}
-    </DropdownMenu.CheckboxItem>
-    {#if option.divider}
-      <DropdownMenu.Separator />
-    {/if}
-  {/each}
-</DropdownMenu.Content>
diff --git a/web-common/src/components/menu/triggers/SelectButton.svelte b/web-common/src/components/menu/triggers/SelectButton.svelte
deleted file mode 100644
index d89f97a6a7f..00000000000
--- a/web-common/src/components/menu/triggers/SelectButton.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { getContext, hasContext } from "svelte";
-  import type { Writable } from "svelte/store";
-  import CaretDownIcon from "../../icons/CaretDownIcon.svelte";
-
-  export let block = false;
-  // FIXME: 99% sure that `disabled` is only ever
-  // false and can be simplified out of the codebase
-  export let disabled = false;
-  export let tailwindClasses = "";
-  export let activeTailwindClasses = "";
-  export let active = false;
-  export let level: undefined | "error" = undefined;
-  // used as aria-label
-  export let label: undefined | string = undefined;
-
-  let childRequestedTooltipSuppression;
-  let parentHasTooltipSomewhere = hasContext(
-    "rill:app:childRequestedTooltipSuppression",
-  );
-  //
-  if (parentHasTooltipSomewhere) {
-    childRequestedTooltipSuppression = getContext(
-      "rill:app:childRequestedTooltipSuppression",
-    ) as Writable<boolean>;
-  }
-
-  $: if (parentHasTooltipSomewhere && active) {
-    childRequestedTooltipSuppression?.set(true);
-  } else {
-    childRequestedTooltipSuppression?.set(false);
-  }
-
-  $: classes = {
-    error: `text-red-600 hover:bg-red-200 ${
-      active ? "bg-red-200" : "bg-red-100"
-    }`,
-    undefined: `bg-transparent ${active ? "bg-gray-200" : "bg-transparent"} ${
-      disabled
-        ? "ui-copy-disabled-faint italic"
-        : "hover:bg-gray-200 hover:dark:bg-gray-600"
-    }`,
-  };
-</script>
-
-<button
-  aria-label={label}
-  class="
-{block ? 'flex w-full h-full px-2' : 'inline-flex w-max rounded px-1'} 
-  items-center gap-x-1 justify-between
-  {level ? classes[level] : ''}
-  {tailwindClasses}
-  {active && !disabled ? activeTailwindClasses : ''}
-
-  "
-  on:click
-  {disabled}
->
-  <slot />
-  <span
-    class:hidden={disabled}
-    class="{active ? '-rotate-180' : ''} transition-transform"
-  >
-    <CaretDownIcon />
-  </span>
-</button>
diff --git a/web-common/src/components/menu/types.ts b/web-common/src/components/menu/types.ts
deleted file mode 100644
index 9ea200414e4..00000000000
--- a/web-common/src/components/menu/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type SelectMenuItem = {
-  // the key of that identifies the item in call
-  key: string | number;
-  // the main text
-  main: string;
-  // the secondary text below the main text
-  description?: string;
-  // text to display to the right of "main"
-  right?: string;
-  // will this item be used as a divider?
-  divider?: boolean;
-  // will this item be disabled?
-  disabled?: boolean;
-};
diff --git a/web-common/src/components/menu/wrappers/SimpleActionMenu.svelte b/web-common/src/components/menu/wrappers/SimpleActionMenu.svelte
deleted file mode 100644
index 7e0a4685f02..00000000000
--- a/web-common/src/components/menu/wrappers/SimpleActionMenu.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- @component
-A simple menu of actions. When one is clicked, the callback fires,
-and the menu closes.
-
--->
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { Menu, MenuItem } from "..";
-  import { WithTogglableFloatingElement } from "../../floating-element";
-  import type { Alignment, Location } from "../../floating-element/types";
-
-  export let options = [];
-  export let dark: boolean | undefined = undefined;
-  export let location: Location = "bottom";
-  export let alignment: Alignment = "start";
-  export let distance = 16;
-  export let minWidth = "300px";
-
-  export let active = false;
-
-  if (dark) {
-    setContext("rill:menu:dark", dark);
-  }
-
-  function createOnClickHandler(callback, closeEventHandler) {
-    return () => {
-      callback();
-      closeEventHandler();
-    };
-  }
-</script>
-
-<WithTogglableFloatingElement
-  bind:active
-  {location}
-  {alignment}
-  {distance}
-  let:handleClose
-  let:toggleFloatingElement
->
-  <slot {handleClose} toggleMenu={toggleFloatingElement} {active} />
-  <Menu
-    slot="floating-element"
-    let:handleClose
-    {dark}
-    {minWidth}
-    focusOnMount={false}
-    on:select-item={handleClose}
-    on:click-outside={() => {
-      if (active) handleClose();
-    }}
-    on:escape={handleClose}
-  >
-    {#each options as { main, right, callback }}
-      <MenuItem
-        on:select={createOnClickHandler(callback, handleClose)}
-        focusOnMount={false}
-      >
-        {main}
-        <svelte:fragment slot="right">
-          {right || ""}
-        </svelte:fragment>
-      </MenuItem>
-    {/each}
-  </Menu>
-</WithTogglableFloatingElement>
diff --git a/web-common/src/components/menu/wrappers/WithSelectMenu.svelte b/web-common/src/components/menu/wrappers/WithSelectMenu.svelte
deleted file mode 100644
index b58215e7cbc..00000000000
--- a/web-common/src/components/menu/wrappers/WithSelectMenu.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<!-- @component
-A simple menu of actions. When one is clicked, the callback fires,
-and the menu closes.
-
--->
-<script lang="ts">
-  import { createEventDispatcher, setContext } from "svelte";
-  import { WithTogglableFloatingElement } from "../../floating-element";
-  import type { Alignment, Location } from "../../floating-element/types";
-  import Check from "../../icons/Check.svelte";
-  import Spacer from "../../icons/Spacer.svelte";
-  import { Divider, Menu, MenuItem } from "../index";
-  import type { SelectMenuItem } from "../types";
-
-  export let options;
-  export let selection: (SelectMenuItem & { index?: number }) | undefined =
-    undefined;
-
-  export let dark: boolean | undefined = undefined;
-  export let multiSelect: boolean | undefined = undefined;
-  export let location: Location = "bottom";
-  export let alignment: Alignment = "start";
-  export let distance = 16;
-  export let paddingTop: number | undefined = undefined;
-  export let paddingBottom: number | undefined = undefined;
-  export let minWidth: string | undefined = undefined;
-  export let overflowFlipY = false;
-
-  export let active = false;
-
-  if (dark) {
-    setContext("rill:menu:dark", dark);
-  }
-
-  const dispatch = createEventDispatcher();
-
-  let temporarilySelectedKey;
-  function createOnClickHandler(
-    main: string,
-    right: string,
-    description: string,
-    key: string,
-    disabled = false,
-    index: number,
-    closeEventHandler: () => void,
-  ) {
-    return async () => {
-      if (!multiSelect && isSelected(selection, key)) {
-        return;
-      }
-      selection = { main, right, description, key, disabled, index };
-      dispatch("select", selection);
-
-      if (!multiSelect) closeEventHandler();
-
-      temporarilySelectedKey = undefined;
-    };
-  }
-
-  function isSelected(selection, key) {
-    if (multiSelect) {
-      return selection?.length && selection?.includes(key);
-    }
-    return selection === key || selection.key === key;
-  }
-
-  /** this function will make the circle check appear briefly before the menu closes */
-  $: showCheckJustAfterClick = (key: string) =>
-    temporarilySelectedKey !== undefined && temporarilySelectedKey === key;
-  /** this function will otherwise render the check if selected, but only
-   * if this is not part of the animation ticks
-   */
-  $: isAlreadySelectedButNotBeingAnimated = (
-    key: string,
-    isSelected: boolean,
-  ) => {
-    if (multiSelect) return isSelected;
-    else return temporarilySelectedKey === undefined && isSelected;
-  };
-</script>
-
-<WithTogglableFloatingElement
-  bind:active
-  {location}
-  {alignment}
-  {distance}
-  {overflowFlipY}
-  let:handleClose
-  let:toggleFloatingElement
->
-  <slot {active} {handleClose} toggleMenu={toggleFloatingElement} />
-
-  <Menu
-    {minWidth}
-    {paddingTop}
-    {paddingBottom}
-    slot="floating-element"
-    let:handleClose
-    {dark}
-    on:click-outside={() => {
-      if (active) handleClose();
-    }}
-    on:escape={handleClose}
-  >
-    {#each options as { key, main, description, right, divider = false, disabled = false }, i}
-      {@const selected = isSelected(selection, key)}
-      <MenuItem
-        icon
-        animateSelect
-        {disabled}
-        on:before-select={() => {
-          temporarilySelectedKey = key;
-        }}
-        on:select={createOnClickHandler(
-          main,
-          right,
-          description,
-          key,
-          disabled,
-          i,
-          handleClose,
-        )}
-        {selected}
-      >
-        <svelte:fragment slot="icon">
-          {#if showCheckJustAfterClick(key) || isAlreadySelectedButNotBeingAnimated(key, selected)}
-            <Check />
-          {:else}
-            <Spacer />
-          {/if}
-        </svelte:fragment>
-        <div
-          class:text-gray-400={disabled}
-          class:font-bold={showCheckJustAfterClick(key) ||
-            isAlreadySelectedButNotBeingAnimated(key, selected)}
-        >
-          {main}
-        </div>
-        <svelte:fragment slot="description">
-          {#if description}
-            {description}
-          {/if}
-        </svelte:fragment>
-        <svelte:fragment slot="right">
-          {right || ""}
-        </svelte:fragment>
-      </MenuItem>
-      {#if divider}
-        <Divider marginTop={1} marginBottom={1} />
-      {/if}
-    {/each}
-  </Menu>
-</WithTogglableFloatingElement>
diff --git a/web-common/src/components/select/select-item.svelte b/web-common/src/components/select/select-item.svelte
index 1b7fe10ae15..30a7cc79f27 100644
--- a/web-common/src/components/select/select-item.svelte
+++ b/web-common/src/components/select/select-item.svelte
@@ -19,7 +19,7 @@
   {disabled}
   {label}
   class={cn(
-    "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
+    "relative flex w-full cursor-pointer select-none items-center justify-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
     className,
   )}
   {...$$restProps}
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
index 1632c391e0c..4099ccc7612 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardControls.svelte
@@ -1,21 +1,23 @@
 <script lang="ts">
-  import SelectMenu from "@rilldata/web-common/components/menu/shadcn/SelectMenu.svelte";
   import SearchableFilterButton from "@rilldata/web-common/components/searchable-filter-menu/SearchableFilterButton.svelte";
   import { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import { createShowHideDimensionsStore } from "@rilldata/web-common/features/dashboards/show-hide-selectors";
-  import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
-  import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
-  import { crossfade, fly } from "svelte/transition";
   import { runtime } from "../../../runtime-client/runtime-store";
   import { metricsExplorerStore } from "web-common/src/features/dashboards/stores/dashboard-stores";
   import { useMetricsView } from "../selectors";
   import { getStateManagers } from "../state-managers/state-managers";
+  import * as Select from "@rilldata/web-common/components/select";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
 
   export let metricViewName: string;
 
   const {
     selectors: {
-      measures: { filteredSimpleMeasures },
+      measures: {
+        filteredSimpleMeasures,
+        leaderboardMeasureName,
+        getMeasureByName,
+      },
     },
     actions: {
       contextCol: { setContextColumn },
@@ -23,69 +25,15 @@
     },
   } = getStateManagers();
 
+  let active = false;
+
   $: metricsView = useMetricsView($runtime.instanceId, metricViewName);
 
   $: measures = $filteredSimpleMeasures();
 
-  let metricsExplorer: MetricsExplorerEntity;
   $: metricsExplorer = $metricsExplorerStore.entities[metricViewName];
 
-  function handleMeasureUpdate(event: CustomEvent) {
-    setLeaderboardMeasureName(event.detail.key);
-  }
-
-  function measureKeyAndMain(measure: MetricsViewSpecMeasureV2) {
-    // CAST SAFETY: measure expression must exist!
-    const main = (
-      measure.label?.length ? measure.label : measure.expression
-    ) as string;
-    return {
-      main,
-      // CAST SAFETY: measure expression must exist!
-      key: measure.name ?? (measure.expression as string),
-    };
-  }
-
-  function formatForSelector(
-    measure: MetricsViewSpecMeasureV2,
-  ): (MetricsViewSpecMeasureV2 & { key: string; main: string }) | undefined {
-    if (!measure) return undefined;
-    return {
-      ...measure,
-      ...measureKeyAndMain(measure),
-    };
-  }
-
-  let [send] = crossfade({
-    fallback: (node, _params, _intro) => fly(node),
-  });
-
-  /** this should be a single element */
-  // reset selections based on the active leaderboard measure
-  let activeLeaderboardMeasure: ReturnType<typeof formatForSelector>;
-
-  $: unformattedMeasure =
-    measures?.length && metricsExplorer?.leaderboardMeasureName
-      ? measures.find(
-          (measure) => measure.name === metricsExplorer?.leaderboardMeasureName,
-        )
-      : undefined;
-
-  $: activeLeaderboardMeasure =
-    unformattedMeasure && formatForSelector(unformattedMeasure);
-
-  /** this controls the animation direction */
-
-  $: options =
-    measures?.map((measure) => {
-      return {
-        ...measure,
-        ...measureKeyAndMain(measure),
-      };
-    }) || [];
-
-  /** set the selection only if measures is not undefined */
-  $: selection = unformattedMeasure && measureKeyAndMain(unformattedMeasure);
+  $: activeLeaderboardMeasure = $getMeasureByName($leaderboardMeasureName);
 
   $: validPercentOfTotal =
     activeLeaderboardMeasure?.validPercentOfTotal || false;
@@ -117,10 +65,9 @@
 </script>
 
 <div>
-  {#if measures && options.length && selection}
+  {#if measures.length && activeLeaderboardMeasure}
     <div
       class="flex flex-row items-center ui-copy-muted gap-x-0.5"
-      in:send|global={{ key: "leaderboard-metric" }}
       style:max-width="450px"
     >
       <SearchableFilterButton
@@ -133,13 +80,50 @@
         tooltipText="Choose dimensions to display"
       />
 
-      <SelectMenu
-        fixedText="Showing"
-        {options}
-        selections={[selection.key]}
-        on:select={handleMeasureUpdate}
-        ariaLabel="Select a measure to filter by"
-      />
+      <Select.Root
+        bind:open={active}
+        items={measures.map((measure) => ({
+          value: measure.name ?? "",
+          label: measure.label ?? measure.name,
+        }))}
+        onSelectedChange={(newSelection) => {
+          if (!newSelection) return;
+          setLeaderboardMeasureName(newSelection.value);
+        }}
+      >
+        <Select.Trigger class="outline-none border-none w-fit  px-0 gap-x-0.5">
+          <Button type="text" label="Select a measure to filter by">
+            <span class="truncate text-gray-700 hover:text-inherit">
+              Showing <b>
+                {activeLeaderboardMeasure?.label ??
+                  activeLeaderboardMeasure.name}
+              </b>
+            </span>
+          </Button>
+        </Select.Trigger>
+
+        <Select.Content
+          sameWidth={false}
+          align="start"
+          class="max-h-80 overflow-y-auto"
+        >
+          {#each measures as measure (measure.name)}
+            <Select.Item
+              value={measure.name}
+              label={measure.label ?? measure.name}
+              class="text-[12px] flex flex-col items-start"
+            >
+              <div class:font-bold={$leaderboardMeasureName === measure.name}>
+                {measure.label ?? measure.name}
+              </div>
+
+              <p class="ui-copy-muted" style:font-size="11px">
+                {measure.description}
+              </p>
+            </Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
     </div>
   {/if}
 </div>
diff --git a/web-common/src/features/dashboards/state-managers/selectors/measures.ts b/web-common/src/features/dashboards/state-managers/selectors/measures.ts
index 778643fa690..25fcbdb01ac 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/measures.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/measures.ts
@@ -14,6 +14,10 @@ export const allMeasures = ({
   return measures === undefined ? [] : measures;
 };
 
+export const leaderboardMeasureName = ({ dashboard }: DashboardDataSources) => {
+  return dashboard.leaderboardMeasureName;
+};
+
 export const visibleMeasures = ({
   metricsSpecQueryResult,
   dashboard,
@@ -188,4 +192,5 @@ export const measureSelectors = {
   filteredSimpleMeasures,
 
   getFilteredMeasuresAndDimensions,
+  leaderboardMeasureName,
 };
diff --git a/web-local/tests/dashboards/dashboards.spec.ts b/web-local/tests/dashboards/dashboards.spec.ts
index 1d450eefe3a..2b90918100c 100644
--- a/web-local/tests/dashboards/dashboards.spec.ts
+++ b/web-local/tests/dashboards/dashboards.spec.ts
@@ -394,7 +394,7 @@ dimensions:
     await page
       .getByRole("button", { name: "Select a measure to filter by" })
       .click();
-    await page.getByRole("menuitem", { name: "Avg Bid Price" }).click();
+    await page.getByRole("option", { name: "Avg Bid Price" }).click();
 
     // Check domain and sample value in leaderboard
     await expect(page.getByText("Domain Name")).toBeVisible();
diff --git a/web-local/tests/dashboards/leaderboard-context-column.spec.ts b/web-local/tests/dashboards/leaderboard-context-column.spec.ts
index 302a46e56be..af3aeedfe9b 100644
--- a/web-local/tests/dashboards/leaderboard-context-column.spec.ts
+++ b/web-local/tests/dashboards/leaderboard-context-column.spec.ts
@@ -43,7 +43,7 @@ test.describe("leaderboard context column", () => {
     await watcher.updateAndWaitForDashboard(metricsWithValidPercentOfTotal);
 
     async function clickMenuItem(itemName: string, wait = true) {
-      await clickMenuButton(page, itemName);
+      await clickMenuButton(page, itemName, "option");
       if (wait) {
         await page.getByRole("menu").waitFor({ state: "hidden" });
       }
diff --git a/web-local/tests/dashboards/number-formatting.spec.ts b/web-local/tests/dashboards/number-formatting.spec.ts
index 0ee7e490caf..9151411cc19 100644
--- a/web-local/tests/dashboards/number-formatting.spec.ts
+++ b/web-local/tests/dashboards/number-formatting.spec.ts
@@ -109,7 +109,7 @@ dimensions:
       name: "Select a measure to filter by",
     });
     await measuresButton.click();
-    await page.getByRole("menuitem", { name: "USD" }).click();
+    await page.getByRole("option", { name: "USD" }).click();
     await page
       .getByRole("menu", { name: "Showing USD" })
       .waitFor({ state: "hidden" });
@@ -119,7 +119,7 @@ dimensions:
       page.getByRole("row", { name: "null $98.8k 33%" }),
     ).toBeVisible();
     await measuresButton.click();
-    await page.getByRole("menuitem", { name: "percentage" }).click();
+    await page.getByRole("option", { name: "percentage" }).click();
     await expect(measuresButton).toHaveText("Showing percentage");
     await expect(
       page.getByRole("row", { name: "null 9.9M% 33%" }),
@@ -127,7 +127,7 @@ dimensions:
 
     // try interval_ms...
     await measuresButton.click();
-    await page.getByRole("menuitem", { name: "interval_ms" }).click();
+    await page.getByRole("option", { name: "interval_ms" }).click();
     await expect(measuresButton).toHaveText("Showing interval_ms");
     // ...and add a time comparison to check deltas
     await interactWithTimeRangeMenu(page, async () => {
@@ -141,7 +141,7 @@ dimensions:
 
     // try No Format...
     await measuresButton.click();
-    await page.getByRole("menuitem", { name: "No Format" }).click();
+    await page.getByRole("option", { name: "No Format" }).click();
     await expect(measuresButton).toHaveText("Showing No Format");
 
     await expect(
diff --git a/web-local/tests/utils/commonHelpers.ts b/web-local/tests/utils/commonHelpers.ts
index 90827f80e98..51cb7dce59a 100644
--- a/web-local/tests/utils/commonHelpers.ts
+++ b/web-local/tests/utils/commonHelpers.ts
@@ -24,8 +24,12 @@ export async function clickModalButton(page: Page, text: string) {
   return page.getByText(text).click();
 }
 
-export async function clickMenuButton(page: Page, text: string) {
-  await page.getByRole("menuitem", { name: text }).click();
+export async function clickMenuButton(
+  page: Page,
+  text: string,
+  role: "menuitem" | "option" = "menuitem",
+) {
+  await page.getByRole(role, { name: text }).click();
 }
 
 export async function waitForProfiling(