From ff09c7a9726a86483f4e0a1dc5be2a350407712d Mon Sep 17 00:00:00 2001
From: Brian Holmes <120223836+briangregoryholmes@users.noreply.github.com>
Date: Mon, 18 Dec 2023 01:20:42 -0500
Subject: [PATCH] support for Add Filter button (#3671)

* rework of footer to match new design and improve readability

* adding filter button functionality, plus design tweaks to relevant menus

* new icon

* chip should not be removed when deselecting the only selected value

* removing limit from filter list query

* changed searchedValues to allValues, simplified display logic

* updated tests to meet updated requirements

* prettier unused vars build fix

* remove keep-alive event

* update let directive for named slot, add timeout to dashboard.spec

* remove unused function

* change to active logic when mounting chip component

* resolve name collision

* update page wait from timeout to selector

* added specific method for adding a dimension name without a value

* only unselected dimension names are shown in the add filter dropdown

* add back limit

* toggleDimensionNameSelection is now actually a toggling function

* dispatch remove event rather than handle remove directly, plus bind to active property

* use state manager action and prop cleanup

* add back limit
---
 .../chip/removable-list-chip/Footer.svelte    |  21 +++-
 .../RemovableListChip.svelte                  |  45 +++++---
 .../RemovableListMenu.spec.ts                 |  53 ++++-----
 .../RemovableListMenu.svelte                  |  78 ++++++-------
 .../src/components/icons/ChevronRight.svelte  |  19 ++++
 .../src/components/search/Search.svelte       |  11 +-
 .../SearchableFilterDropdown.svelte           |   5 +-
 .../src/features/dashboards/actions/index.ts  |   6 -
 .../dashboards/filters/FilterButton.svelte    |  84 ++++++++++++++
 .../dashboards/filters/Filters.svelte         | 107 ++++++++++--------
 .../features/dashboards/selectors/index.ts    |   2 +-
 .../actions/dimension-filters.ts              |  29 +++++
 web-local/test/ui/dashboards.spec.ts          |   2 +
 13 files changed, 309 insertions(+), 153 deletions(-)
 create mode 100644 web-common/src/components/icons/ChevronRight.svelte
 create mode 100644 web-common/src/features/dashboards/filters/FilterButton.svelte

diff --git a/web-common/src/components/chip/removable-list-chip/Footer.svelte b/web-common/src/components/chip/removable-list-chip/Footer.svelte
index 1ba6c126b93..0eebe05a980 100644
--- a/web-common/src/components/chip/removable-list-chip/Footer.svelte
+++ b/web-common/src/components/chip/removable-list-chip/Footer.svelte
@@ -1,5 +1,18 @@
-<div
-  class="flex flex-row mt-auto items-center justify-between gap-x-2 px-2 py-1 sticky bottom-0 border-t bg-gray-50 dark:bg-gray-600 border-gray-200 dark:border-gray-500"
->
+<footer>
   <slot />
-</div>
+</footer>
+
+<style lang="postcss">
+  footer {
+    @apply flex flex-row mt-auto items-center justify-end;
+    @apply bg-slate-100;
+    @apply border-t border-slate-300;
+    @apply bottom-0 sticky;
+    @apply gap-x-2 p-2 px-3.5;
+  }
+
+  footer:is(.dark) {
+    @apply bg-gray-800;
+    @apply border-gray-700;
+  }
+</style>
diff --git a/web-common/src/components/chip/removable-list-chip/RemovableListChip.svelte b/web-common/src/components/chip/removable-list-chip/RemovableListChip.svelte
index c34207ef3d0..dfbbb9499a5 100644
--- a/web-common/src/components/chip/removable-list-chip/RemovableListChip.svelte
+++ b/web-common/src/components/chip/removable-list-chip/RemovableListChip.svelte
@@ -11,9 +11,9 @@ the name and then move the cursor to the right to cancel it.
 existing elements in the lib as well as changing the type (include, exclude) and enabling list search. The implementation of these parts
 are details left to the consumer of the component; this component should remain pure-ish (only internal state) if possible.
 -->
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { Writable, writable } from "svelte/store";
+
+<script context="module" lang="ts">
+  import { createEventDispatcher, onMount } from "svelte";
   import { fly } from "svelte/transition";
   import WithTogglableFloatingElement from "../../floating-element/WithTogglableFloatingElement.svelte";
   import Tooltip from "../../tooltip/Tooltip.svelte";
@@ -23,26 +23,39 @@ are details left to the consumer of the component; this component should remain
   import { Chip } from "../index";
   import RemovableListBody from "./RemovableListBody.svelte";
   import RemovableListMenu from "./RemovableListMenu.svelte";
+</script>
 
+<script lang="ts">
   export let name: string;
   export let selectedValues: string[];
-  export let searchedValues: string[] | null;
+  export let allValues: string[] | null;
 
   /** an optional type label that will appear in the tooltip */
   export let typeLabel: string;
-  export let excludeMode;
+  export let excludeMode: boolean;
   export let colors: ChipColors = defaultChipColors;
   export let label: string | undefined = undefined;
 
+  let active = !selectedValues.length;
+
   const dispatch = createEventDispatcher();
 
-  const excludeStore: Writable<boolean> = writable(excludeMode);
-  $: excludeStore.set(excludeMode);
+  onMount(() => {
+    dispatch("mount");
+  });
+
+  function handleDismiss() {
+    if (!selectedValues.length) {
+      dispatch("remove");
+    } else {
+      active = false;
+    }
+  }
 </script>
 
 <WithTogglableFloatingElement
+  bind:active
   let:toggleFloatingElement
-  let:active
   distance={8}
   alignment="start"
 >
@@ -55,7 +68,10 @@ are details left to the consumer of the component; this component should remain
   >
     <Chip
       removable
-      on:click={toggleFloatingElement}
+      on:click={() => {
+        toggleFloatingElement();
+        dispatch("click");
+      }}
       on:remove={() => dispatch("remove")}
       {active}
       {...colors}
@@ -91,15 +107,14 @@ are details left to the consumer of the component; this component should remain
     </div>
   </Tooltip>
   <RemovableListMenu
-    {excludeStore}
     slot="floating-element"
-    let:toggleFloatingElement
-    on:escape={toggleFloatingElement}
-    on:click-outside={toggleFloatingElement}
+    {excludeMode}
+    {allValues}
+    {selectedValues}
+    on:escape={handleDismiss}
+    on:click-outside={handleDismiss}
     on:apply
     on:search
     on:toggle
-    {selectedValues}
-    {searchedValues}
   />
 </WithTogglableFloatingElement>
diff --git a/web-common/src/components/chip/removable-list-chip/RemovableListMenu.spec.ts b/web-common/src/components/chip/removable-list-chip/RemovableListMenu.spec.ts
index 8f3f50f1310..35ee88a02e4 100644
--- a/web-common/src/components/chip/removable-list-chip/RemovableListMenu.spec.ts
+++ b/web-common/src/components/chip/removable-list-chip/RemovableListMenu.spec.ts
@@ -1,28 +1,31 @@
 import RemovableListMenu from "./RemovableListMenu.svelte";
 import { describe, it, expect, vi } from "vitest";
 import { render, waitFor, fireEvent, screen } from "@testing-library/svelte";
-import { writable } from "svelte/store";
 
 describe("RemovableListMenu", () => {
-  it("renders selected values by default", async () => {
+  it("does not render selected values if not in all values", async () => {
     const { unmount } = render(RemovableListMenu, {
-      excludeStore: writable(false),
-      selectedValues: ["foo", "bar"],
-      searchedValues: null,
+      excludeMode: false,
+      selectedValues: ["x"],
+      allValues: ["foo", "bar"],
     });
 
     const foo = screen.getByText("foo");
     const bar = screen.getByText("bar");
     expect(foo).toBeDefined();
     expect(bar).toBeDefined();
+
+    const x = screen.queryByText("x");
+    expect(x).toBeNull();
+
     unmount();
   });
 
-  it("renders selected values if search text is empty", async () => {
+  it("renders all values if search text is empty", async () => {
     const { unmount } = render(RemovableListMenu, {
-      excludeStore: writable(false),
-      selectedValues: ["foo", "bar"],
-      searchedValues: ["x"],
+      excludeMode: false,
+      selectedValues: [],
+      allValues: ["foo", "bar"],
     });
 
     const foo = screen.getByText("foo");
@@ -34,9 +37,9 @@ describe("RemovableListMenu", () => {
 
   it("renders search values if search text is populated", async () => {
     const { unmount } = render(RemovableListMenu, {
-      excludeStore: writable(false),
+      excludeMode: false,
       selectedValues: ["foo", "bar"],
-      searchedValues: ["x"],
+      allValues: ["x"],
     });
 
     const searchInput = screen.getByRole("textbox", { name: "Search list" });
@@ -51,35 +54,33 @@ describe("RemovableListMenu", () => {
   });
 
   it("should render switch based on exclude store", async () => {
-    const excludeStore = writable(false);
-    const { unmount } = render(RemovableListMenu, {
-      excludeStore,
+    const { unmount, component } = render(RemovableListMenu, {
+      excludeMode: false,
       selectedValues: ["foo", "bar"],
-      searchedValues: ["x"],
+      allValues: ["x"],
     });
 
-    const switchInput = screen.getByRole<HTMLInputElement>("switch");
-    expect(switchInput.checked).toBe(false);
+    const switchInput = screen.getByText("Exclude");
+    expect(switchInput).toBeDefined();
 
-    excludeStore.set(true);
-    await waitFor(() => {
-      expect(switchInput.checked).toBe(true);
-    });
+    await component.$set({ excludeMode: true });
+
+    const includeButton = screen.getByText("Include");
+    expect(includeButton).toBeDefined();
 
     unmount();
   });
 
   it("should dispatch toggle, apply, and search events", async () => {
-    const excludeStore = writable(false);
     const { unmount, component } = render(RemovableListMenu, {
-      excludeStore,
-      selectedValues: ["foo", "bar"],
-      searchedValues: ["x"],
+      excludeMode: false,
+      selectedValues: [],
+      allValues: ["foo", "bar"],
     });
 
     const toggleSpy = vi.fn();
     component.$on("toggle", toggleSpy);
-    const switchInput = screen.getByRole<HTMLInputElement>("switch");
+    const switchInput = screen.getByText("Exclude");
     await fireEvent.click(switchInput);
     expect(toggleSpy).toHaveBeenCalledOnce();
 
diff --git a/web-common/src/components/chip/removable-list-chip/RemovableListMenu.svelte b/web-common/src/components/chip/removable-list-chip/RemovableListMenu.svelte
index 006e5a2a951..245e49f389c 100644
--- a/web-common/src/components/chip/removable-list-chip/RemovableListMenu.svelte
+++ b/web-common/src/components/chip/removable-list-chip/RemovableListMenu.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import type { Writable } from "svelte/store";
-  import { Switch } from "../../button";
   import Cancel from "../../icons/Cancel.svelte";
   import Check from "../../icons/Check.svelte";
   import Spacer from "../../icons/Spacer.svelte";
   import { Menu, MenuItem } from "../../menu";
   import { Search } from "../../search";
   import Footer from "./Footer.svelte";
+  import Button from "../../button/Button.svelte";
 
-  export let excludeStore: Writable<boolean>;
+  export let excludeMode: boolean;
   export let selectedValues: string[];
-  export let searchedValues: string[] | null = [];
+  export let allValues: string[] | null = [];
 
   let searchText = "";
 
@@ -21,33 +20,20 @@
     dispatch("search", searchText);
   }
 
-  function onToggleHandler() {
-    dispatch("toggle");
+  function toggleValue(value: string) {
+    dispatch("apply", value);
   }
 
-  /** On instantiation, only take the exact current selectedValues, so that
-   * when the user unchecks a menu item, it still persists in the FilterMenu
-   * until the user closes.
-   */
-  let candidateValues = [...selectedValues];
-  let valuesToDisplay = [...candidateValues];
-
-  // If searchedValues === null, search has not finished yet. So continue rendering the previous list
-  $: if (searchText && searchedValues !== null) {
-    valuesToDisplay = [...searchedValues];
-  } else if (!searchText) valuesToDisplay = [...candidateValues];
-
-  $: numSelectedNotInSearch = selectedValues.filter(
-    (v) => !valuesToDisplay.includes(v)
-  ).length;
-
-  function toggleValue(value) {
-    dispatch("apply", value);
+  function toggleSelectAll() {
+    allValues?.forEach((value) => {
+      if (!allSelected && selectedValues.includes(value)) return;
 
-    if (!candidateValues.includes(value)) {
-      candidateValues = [...candidateValues, value];
-    }
+      toggleValue(value);
+    });
   }
+
+  $: allSelected =
+    selectedValues?.length && allValues?.length === selectedValues.length;
 </script>
 
 <Menu
@@ -62,8 +48,7 @@
   on:click-outside
 >
   <!-- the min-height is set to have about 3 entries in it -->
-
-  <div class="px-1 pb-1">
+  <div class="px-3 py-2">
     <Search
       bind:value={searchText}
       on:input={onSearch}
@@ -74,8 +59,8 @@
 
   <!-- apply a wrapped flex element to ensure proper bottom spacing between body and footer -->
   <div class="flex flex-col flex-1 overflow-auto w-full pb-1">
-    {#if valuesToDisplay.length}
-      {#each valuesToDisplay as value}
+    {#if allValues?.length}
+      {#each allValues.sort() as value}
         <MenuItem
           icon
           animateSelect={false}
@@ -85,9 +70,9 @@
           }}
         >
           <svelte:fragment slot="icon">
-            {#if selectedValues.includes(value) && !$excludeStore}
+            {#if selectedValues.includes(value) && !excludeMode}
               <Check size="20px" color="#15141A" />
-            {:else if selectedValues.includes(value) && $excludeStore}
+            {:else if selectedValues.includes(value) && excludeMode}
               <Cancel size="20px" color="#15141A" />
             {:else}
               <Spacer size="20px" />
@@ -95,7 +80,7 @@
           </svelte:fragment>
           <span
             class:ui-copy-disabled={selectedValues.includes(value) &&
-              $excludeStore}
+              excludeMode}
           >
             {#if value?.length > 240}
               {value.slice(0, 240)}...
@@ -110,17 +95,20 @@
     {/if}
   </div>
   <Footer>
-    <span class="ui-copy">
-      <Switch on:click={() => onToggleHandler()} checked={$excludeStore}>
+    <Button type="text" on:click={toggleSelectAll}>
+      {#if allSelected}
+        Deselect all
+      {:else}
+        Select all
+      {/if}
+    </Button>
+
+    <Button type="secondary" on:click={() => dispatch("toggle")}>
+      {#if excludeMode}
+        Include
+      {:else}
         Exclude
-      </Switch>
-    </span>
-    {#if numSelectedNotInSearch}
-      <div class="ui-label">
-        {numSelectedNotInSearch} other value{numSelectedNotInSearch > 1
-          ? "s"
-          : ""} selected
-      </div>
-    {/if}
+      {/if}
+    </Button>
   </Footer>
 </Menu>
diff --git a/web-common/src/components/icons/ChevronRight.svelte b/web-common/src/components/icons/ChevronRight.svelte
new file mode 100644
index 00000000000..2ea1015102b
--- /dev/null
+++ b/web-common/src/components/icons/ChevronRight.svelte
@@ -0,0 +1,19 @@
+<script>
+  export let size = "1em";
+  export let color = "currentColor";
+</script>
+
+<svg
+  width={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M9 18L15 12L9 6"
+    stroke={color}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/web-common/src/components/search/Search.svelte b/web-common/src/components/search/Search.svelte
index 1dc6de3b200..76637c22832 100644
--- a/web-common/src/components/search/Search.svelte
+++ b/web-common/src/components/search/Search.svelte
@@ -38,9 +38,8 @@
     bind:this={ref}
     type="text"
     autocomplete="off"
-    class="bg-white border border-gray-200 {showBorderOnFocus
-      ? 'focus:border-blue-400'
-      : ''} outline-none rounded-sm block w-full pl-8 p-1"
+    class:focus={showBorderOnFocus}
+    class="bg-slate-50 border border-gray-200 outline-none rounded-sm block w-full pl-8 p-1"
     {placeholder}
     bind:value
     on:input
@@ -48,3 +47,9 @@
     aria-label={label}
   />
 </form>
+
+<style lang="postcss">
+  .focus:focus {
+    @apply border-blue-400;
+  }
+</style>
diff --git a/web-common/src/components/searchable-filter-menu/SearchableFilterDropdown.svelte b/web-common/src/components/searchable-filter-menu/SearchableFilterDropdown.svelte
index fd1aabba432..9b27a5cced4 100644
--- a/web-common/src/components/searchable-filter-menu/SearchableFilterDropdown.svelte
+++ b/web-common/src/components/searchable-filter-menu/SearchableFilterDropdown.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { SearchableFilterSelectableItem } from "@rilldata/web-common/components/searchable-filter-menu/SearchableFilterSelectableItem";
   import Check from "../icons/Check.svelte";
-  import Spacer from "../icons/Spacer.svelte";
   import { Menu, MenuItem } from "../menu";
   import { Search } from "../search";
   import Footer from "./Footer.svelte";
@@ -76,7 +75,7 @@
   rounded={false}
 >
   <!-- the min-height is set to have about 3 entries in it -->
-  <div class="px-1 pb-1">
+  <div class="px-3 py-2">
     <Search bind:value={searchText} showBorderOnFocus={false} />
   </div>
   <!-- apply a wrapped flex element to ensure proper bottom spacing between body and footer -->
@@ -99,8 +98,6 @@
                 ? "#9CA3AF"
                 : "#15141A"}
             />
-          {:else}
-            <Spacer size="20px" />
           {/if}
         </svelte:fragment>
         <span class:ui-copy-disabled={!selected && allowMultiSelect}>
diff --git a/web-common/src/features/dashboards/actions/index.ts b/web-common/src/features/dashboards/actions/index.ts
index 8957e315bff..4bc590add09 100644
--- a/web-common/src/features/dashboards/actions/index.ts
+++ b/web-common/src/features/dashboards/actions/index.ts
@@ -71,12 +71,6 @@ export function toggleDimensionValue(
           index,
           1
         );
-        if (
-          dashboard.filters[relevantFilterKey][dimensionEntryIndex].in
-            .length === 0
-        ) {
-          dashboard.filters[relevantFilterKey].splice(dimensionEntryIndex, 1);
-        }
 
         // Only decrement pinIndex if the removed value was before the pinned value
         if (dashboard.pinIndex >= index) {
diff --git a/web-common/src/features/dashboards/filters/FilterButton.svelte b/web-common/src/features/dashboards/filters/FilterButton.svelte
new file mode 100644
index 00000000000..43ef4d67456
--- /dev/null
+++ b/web-common/src/features/dashboards/filters/FilterButton.svelte
@@ -0,0 +1,84 @@
+<script context="module" lang="ts">
+  import { getStateManagers } from "../state-managers/state-managers";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import Add from "@rilldata/web-common/components/icons/Add.svelte";
+  import SearchableFilterDropdown from "@rilldata/web-common/components/searchable-filter-menu/SearchableFilterDropdown.svelte";
+  import WithTogglableFloatingElement from "@rilldata/web-common/components/floating-element/WithTogglableFloatingElement.svelte";
+</script>
+
+<script lang="ts">
+  const {
+    selectors: {
+      dimensions: { allDimensions },
+      dimensionFilters: { getAllFilters, isFilterExcludeMode },
+    },
+    actions: {
+      dimensionsFilter: { toggleDimensionNameSelection },
+    },
+  } = getStateManagers();
+
+  function filterExists(name: string, exclude: boolean): boolean {
+    const selected = exclude
+      ? $getAllFilters?.exclude
+      : $getAllFilters?.include;
+
+    return selected?.find((f) => f.name === name) !== undefined;
+  }
+
+  $: selectableItems =
+    $allDimensions
+      ?.map((d) => ({
+        name: d.name as string,
+        label: d.label as string,
+      }))
+      .filter((d) => {
+        const exclude = $isFilterExcludeMode(d.name);
+        return !filterExists(d.name, exclude);
+      }) ?? [];
+</script>
+
+<WithTogglableFloatingElement
+  distance={8}
+  alignment="start"
+  let:toggleFloatingElement
+  let:active
+>
+  <Tooltip distance={8} suppress={active}>
+    <button class:active on:click={toggleFloatingElement}>
+      <Add size="17px" />
+    </button>
+    <TooltipContent slot="tooltip-content">Add filter</TooltipContent>
+  </Tooltip>
+
+  <SearchableFilterDropdown
+    let:toggleFloatingElement
+    slot="floating-element"
+    selectedItems={[]}
+    allowMultiSelect={false}
+    {selectableItems}
+    on:escape={toggleFloatingElement}
+    on:click-outside={toggleFloatingElement}
+    on:item-clicked={(e) => {
+      toggleFloatingElement();
+      toggleDimensionNameSelection(e.detail.name);
+    }}
+  />
+</WithTogglableFloatingElement>
+
+<style lang="postcss">
+  button {
+    @apply w-[34px] h-[26px] rounded-2xl;
+    @apply px-[8px] py-[4px];
+    @apply border border-dashed border-slate-300;
+  }
+
+  button:hover {
+    @apply bg-slate-100;
+  }
+
+  button:active,
+  .active {
+    @apply bg-slate-200;
+  }
+</style>
diff --git a/web-common/src/features/dashboards/filters/Filters.svelte b/web-common/src/features/dashboards/filters/Filters.svelte
index a159fa90fdb..505edb3e07a 100644
--- a/web-common/src/features/dashboards/filters/Filters.svelte
+++ b/web-common/src/features/dashboards/filters/Filters.svelte
@@ -25,13 +25,18 @@ The main feature-set component for dashboard filters
   import { getStateManagers } from "../state-managers/state-managers";
   import {
     clearAllFilters,
-    clearFilterForDimension,
     toggleDimensionValue,
     toggleFilterMode,
   } from "../actions";
+  import FilterButton from "./FilterButton.svelte";
 
   const StateManagers = getStateManagers();
-  const { dashboardStore } = StateManagers;
+  const {
+    dashboardStore,
+    actions: {
+      dimensionsFilter: { toggleDimensionNameSelection },
+    },
+  } = StateManagers;
 
   /** the height of a row of chips */
   const ROW_HEIGHT = "26px";
@@ -47,23 +52,25 @@ The main feature-set component for dashboard filters
   }
 
   let searchText = "";
-  let searchedValues: string[] | null = null;
-  let activeDimensionName;
+  let allValues: string[] | null = null;
+  let activeDimensionName: string;
+
   $: activeColumn =
     dimensions.find((d) => d.name === activeDimensionName)?.column ??
     activeDimensionName;
 
   let topListQuery: ReturnType<typeof getFilterSearchList> | undefined;
-  $: if (activeDimensionName)
+  $: if (activeDimensionName) {
     topListQuery = getFilterSearchList(StateManagers, {
       dimension: activeDimensionName,
       searchText,
       addNull: "null".includes(searchText),
     });
+  }
 
-  $: if (!$topListQuery?.isFetching && searchText != "") {
+  $: if (!$topListQuery?.isFetching) {
     const topListData = $topListQuery?.data?.data ?? [];
-    searchedValues = topListData.map((datum) => datum[activeColumn]) ?? [];
+    allValues = topListData.map((datum) => datum[activeColumn]) ?? [];
   }
 
   $: hasFilters = isFiltered($dashboardStore.filters);
@@ -120,7 +127,7 @@ The main feature-set component for dashboard filters
     currentDimensionFilters.sort((a, b) => (a.name > b.name ? 1 : -1));
   }
 
-  function setActiveDimension(name, value) {
+  function setActiveDimension(name, value = "") {
     activeDimensionName = name;
     searchText = value;
   }
@@ -144,31 +151,42 @@ The main feature-set component for dashboard filters
   >
     <Filter size="16px" />
   </div>
-  {#if currentDimensionFilters.length > 0}
-    <ChipContainer>
+
+  <ChipContainer>
+    {#if !currentDimensionFilters.length}
+      <div
+        in:fly|local={{ duration: 200, x: 8 }}
+        class="ui-copy-disabled grid items-center"
+        style:min-height={ROW_HEIGHT}
+      >
+        No filters selected
+      </div>
+    {:else}
       {#each currentDimensionFilters as { name, label, selectedValues, filterType } (name)}
         {@const isInclude = filterType === "include"}
         <div animate:flip={{ duration: 200 }}>
           <RemovableListChip
             on:toggle={() => toggleFilterMode(StateManagers, name)}
-            on:remove={() =>
-              clearFilterForDimension(
-                StateManagers,
-                name,
-                isInclude ? true : false
-              )}
-            on:apply={(event) =>
-              toggleDimensionValue(StateManagers, name, event.detail)}
+            on:remove={() => toggleDimensionNameSelection(name)}
+            on:apply={(event) => {
+              toggleDimensionValue(StateManagers, name, event.detail);
+            }}
             on:search={(event) => {
               setActiveDimension(name, event.detail);
             }}
+            on:click={() => {
+              setActiveDimension(name, "");
+            }}
+            on:mount={() => {
+              setActiveDimension(name);
+            }}
             typeLabel="dimension"
             name={isInclude ? label : `Exclude ${label}`}
             excludeMode={isInclude ? false : true}
             colors={getColorForChip(isInclude)}
             label="View filter"
             {selectedValues}
-            {searchedValues}
+            {allValues}
           >
             <svelte:fragment slot="body-tooltip-content">
               Click to edit the the filters in this dimension
@@ -176,35 +194,26 @@ The main feature-set component for dashboard filters
           </RemovableListChip>
         </div>
       {/each}
-      <!-- if filters are present, place a chip at the end of the flex container 
+    {/if}
+    <FilterButton />
+    <!-- if filters are present, place a chip at the end of the flex container 
       that enables clearing all filters -->
-      {#if hasFilters}
-        <div class="ml-auto">
-          <Chip
-            bgBaseClass="surface"
-            bgHoverClass="hover:bg-gray-100 hover:dark:bg-gray-700"
-            textClass="ui-copy-disabled-faint hover:text-gray-500 dark:text-gray-500"
-            bgActiveClass="bg-gray-200 dark:bg-gray-600"
-            outlineClass="outline-gray-400"
-            on:click={() => clearAllFilters(StateManagers)}
-          >
-            <span slot="icon" class="ui-copy-disabled-faint">
-              <FilterRemove size="16px" />
-            </span>
-            <svelte:fragment slot="body">Clear filters</svelte:fragment>
-          </Chip>
-        </div>
-      {/if}
-    </ChipContainer>
-  {:else if currentDimensionFilters.length === 0}
-    <div
-      in:fly={{ duration: 200, x: 8 }}
-      class="ui-copy-disabled grid items-center"
-      style:min-height={ROW_HEIGHT}
-    >
-      No filters selected
-    </div>
-  {:else}
-    &nbsp;
-  {/if}
+    {#if hasFilters}
+      <div class="ml-auto">
+        <Chip
+          bgBaseClass="surface"
+          bgHoverClass="hover:bg-gray-100 hover:dark:bg-gray-700"
+          textClass="ui-copy-disabled-faint hover:text-gray-500 dark:text-gray-500"
+          bgActiveClass="bg-gray-200 dark:bg-gray-600"
+          outlineClass="outline-gray-400"
+          on:click={() => clearAllFilters(StateManagers)}
+        >
+          <span slot="icon" class="ui-copy-disabled-faint">
+            <FilterRemove size="16px" />
+          </span>
+          <svelte:fragment slot="body">Clear filters</svelte:fragment>
+        </Chip>
+      </div>
+    {/if}
+  </ChipContainer>
 </section>
diff --git a/web-common/src/features/dashboards/selectors/index.ts b/web-common/src/features/dashboards/selectors/index.ts
index dd9f11f8bd5..f448754a770 100644
--- a/web-common/src/features/dashboards/selectors/index.ts
+++ b/web-common/src/features/dashboards/selectors/index.ts
@@ -73,7 +73,7 @@ export const getFilterSearchList = (
           measureNames: [metricsExplorer.leaderboardMeasureName],
           timeStart: timeControls.timeStart,
           timeEnd: timeControls.timeEnd,
-          limit: "15",
+          limit: "100",
           offset: "0",
           sort: [],
           filter: {
diff --git a/web-common/src/features/dashboards/state-managers/actions/dimension-filters.ts b/web-common/src/features/dashboards/state-managers/actions/dimension-filters.ts
index f163d81720f..2c56935608b 100644
--- a/web-common/src/features/dashboards/state-managers/actions/dimension-filters.ts
+++ b/web-common/src/features/dashboards/state-managers/actions/dimension-filters.ts
@@ -38,6 +38,34 @@ export function toggleDimensionValueSelection(
   }
 }
 
+export function toggleDimensionNameSelection(
+  { dashboard, cancelQueries }: DashboardMutables,
+  dimensionName: string
+) {
+  const filters = filtersForCurrentExcludeMode({ dashboard })(dimensionName);
+  // if there are no filters at this point we cannot update anything.
+  if (filters === undefined) {
+    return;
+  }
+
+  // if we are able to update the filters, we must cancel any queries
+  // that are currently running.
+  cancelQueries();
+
+  const filterIndex = filters.findIndex(
+    (filter) => filter.name === dimensionName
+  );
+
+  if (filterIndex === -1) {
+    filters.push({
+      name: dimensionName,
+      in: [],
+    });
+  } else {
+    filters.splice(filterIndex, 1);
+  }
+}
+
 export const dimensionFilterActions = {
   /**
    * Toggles whether the given dimension value is selected in the
@@ -48,4 +76,5 @@ export const dimensionFilterActions = {
    * the include/exclude mode is a toggle for the entire dimension.
    */
   toggleDimensionValueSelection,
+  toggleDimensionNameSelection,
 };
diff --git a/web-local/test/ui/dashboards.spec.ts b/web-local/test/ui/dashboards.spec.ts
index 3d10daf997b..79cd8bee52c 100644
--- a/web-local/test/ui/dashboards.spec.ts
+++ b/web-local/test/ui/dashboards.spec.ts
@@ -245,6 +245,8 @@ test.describe("dashboard", () => {
     // Filter to Facebook via leaderboard
     await page.getByRole("button", { name: "Facebook 19.3k" }).click();
 
+    await page.waitForSelector("text=Publisher Facebook");
+
     // Change filter to excluded
     await page.getByText("Publisher Facebook").click();
     await page.getByRole("button", { name: "Exclude" }).click();