Update dashboard header layout and tab component (#4063)

* update dashboard header and tab component * remove unused variables * typo
rilldata · Feb 15, 2024 · 062b151 · 062b151 · github-actions · Feb 15, 2024
1 parent c588b51
commit 062b151
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 119 deletions.
diff --git a/web-common/src/components/button/Button.svelte b/web-common/src/components/button/Button.svelte
@@ -199,6 +199,20 @@
     @apply bg-blue-700;
   }
 
+  /* TEXT STYLES */
+
+  .text {
+    @apply px-0 font-medium text-slate-600;
+  }
+
+  .text:hover {
+    @apply text-primary-700;
+  }
+
+  .text:active {
+    @apply text-primary-800;
+  }
+
   /* TWEAKS */
 
   .small {

diff --git a/web-common/src/components/tag/Tag.svelte b/web-common/src/components/tag/Tag.svelte
@@ -11,6 +11,7 @@
     | "purple";
 
   export let color: Color = "gray";
+  export let height = 21;
 
   function getColorClass(color: string) {
     switch (color) {
@@ -39,7 +40,8 @@
 </script>
 
 <div
-  class="px-2 h-[21px] border rounded-[20px] items-center justify-center inline-flex shrink-0 {getColorClass(
+  style:height="{height}px"
+  class="px-2 border rounded-[20px] items-center justify-center inline-flex shrink-0 {getColorClass(
     color,
   )}"
 >

diff --git a/web-common/src/features/dashboards/filters/Filters.svelte b/web-common/src/features/dashboards/filters/Filters.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { Chip } from "@rilldata/web-common/components/chip";
   import Filter from "@rilldata/web-common/components/icons/Filter.svelte";
-  import FilterRemove from "@rilldata/web-common/components/icons/FilterRemove.svelte";
   import MeasureFilter from "@rilldata/web-common/features/dashboards/filters/measure-filters/MeasureFilter.svelte";
   import { getMapFromArray } from "@rilldata/web-common/lib/arrayUtils";
   import type { V1Expression } from "@rilldata/web-common/runtime-client";
@@ -11,6 +9,7 @@
   import { getStateManagers } from "../state-managers/state-managers";
   import FilterButton from "./FilterButton.svelte";
   import DimensionFilter from "./dimension-filters/DimensionFilter.svelte";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
 
   export let readOnly = false;
 
@@ -73,79 +72,68 @@
   }
 </script>
 
-{#if !readOnly}
-  <div
-    class:ui-copy-icon={true}
-    class:ui-copy-icon-inactive={false}
-    class="grid items-center place-items-center"
-    style:height={ROW_HEIGHT}
-    style:width={ROW_HEIGHT}
-  >
-    <Filter size="16px" />
-  </div>
-{/if}
-<div class="relative flex flex-row flex-wrap gap-x-2 gap-y-2 items-center">
-  {#if !allDimensionFilters.length && !allMeasureFilters.length}
+<div class="flex gap-x-1 pb-2 px-2 flex-grow-0">
+  {#if !readOnly}
     <div
-      in:fly|local={{ duration: 200, x: 8 }}
-      class="ui-copy-disabled grid items-center"
-      style:min-height={ROW_HEIGHT}
+      class:ui-copy-icon={true}
+      class:ui-copy-icon-inactive={false}
+      class="flex items-center text-center justify-center flex-shrink-0"
+      style:height={ROW_HEIGHT}
+      style:width={ROW_HEIGHT}
     >
-      No filters selected
+      <Filter size="16px" />
     </div>
-  {:else}
-    {#each allDimensionFilters as { name, label, selectedValues } (name)}
-      {@const dimension = dimensions.find((d) => d.name === name)}
-      <div animate:flip={{ duration: 200 }}>
-        {#if dimension?.column}
-          <DimensionFilter
+  {/if}
+
+  <div class="relative flex flex-row flex-wrap gap-x-2 gap-y-2 items-center">
+    {#if !allDimensionFilters.length && !allMeasureFilters.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 allDimensionFilters as { name, label, selectedValues } (name)}
+        {@const dimension = dimensions.find((d) => d.name === name)}
+        <div animate:flip={{ duration: 200 }}>
+          {#if dimension?.column}
+            <DimensionFilter
+              {name}
+              {label}
+              {selectedValues}
+              column={dimension.column}
+              {readOnly}
+              on:remove={() => removeDimensionFilter(name)}
+              on:apply={(event) =>
+                toggleDimensionValueSelection(name, event.detail, true)}
+            />
+          {/if}
+        </div>
+      {/each}
+      {#each allMeasureFilters as { name, label, dimensionName, expr } (name)}
+        <div animate:flip={{ duration: 200 }}>
+          <MeasureFilter
             {name}
             {label}
-            {selectedValues}
-            column={dimension.column}
+            {dimensionName}
+            {expr}
             {readOnly}
-            on:remove={() => removeDimensionFilter(name)}
-            on:apply={(event) =>
-              toggleDimensionValueSelection(name, event.detail, true)}
+            on:remove={() => removeMeasureFilter(dimensionName, name)}
+            on:apply={({ detail: { dimension, oldDimension, expr } }) =>
+              handleMeasureFilterApply(dimension, name, oldDimension, expr)}
           />
-        {/if}
-      </div>
-    {/each}
-    {#each allMeasureFilters as { name, label, dimensionName, expr } (name)}
-      <div animate:flip={{ duration: 200 }}>
-        <MeasureFilter
-          {name}
-          {label}
-          {dimensionName}
-          {expr}
-          {readOnly}
-          on:remove={() => removeMeasureFilter(dimensionName, name)}
-          on:apply={({ detail: { dimension, oldDimension, expr } }) =>
-            handleMeasureFilterApply(dimension, name, oldDimension, expr)}
-        />
-      </div>
-    {/each}
-  {/if}
-  {#if !readOnly}
-    <FilterButton />
-    <!-- if filters are present, place a chip at the end of the flex container 
+        </div>
+      {/each}
+    {/if}
+    {#if !readOnly}
+      <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"
-          outlineBaseClass="outline-gray-400"
-          on:click={clearAllFilters}
-        >
-          <span slot="icon" class="ui-copy-disabled-faint">
-            <FilterRemove size="16px" />
-          </span>
-          <svelte:fragment slot="body">Clear filters</svelte:fragment>
-        </Chip>
-      </div>
+      {#if hasFilters}
+        <Button type="text" on:click={clearAllFilters}>Clear filters</Button>
+      {/if}
     {/if}
-  {/if}
+  </div>
 </div>
diff --git a/web-common/src/features/dashboards/tab-bar/Tab.svelte b/web-common/src/features/dashboards/tab-bar/Tab.svelte
@@ -1,17 +1,30 @@
 <script lang="ts">
-  import { Tab } from "@rgossiaux/svelte-headlessui";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
 
-  const baseClasses = "font-semibold py-2 px-1 items-center";
   export let disabled = false;
+  export let selected = false;
 </script>
 
-<Tab
-  {disabled}
-  class={({ selected }) => {
-    return `${baseClasses} ${
-      selected ? "text-blue-600 border-b-2 border-blue-500" : "text-gray-500"
-    }`;
-  }}
->
+<button class="relative group" class:selected {disabled} on:click>
   <slot />
-</Tab>
+  {#if disabled}
+    <div
+      class="absolute top-full translate-y-2 z-10 w-fit -translate-x-1/2 left-1/2 group-hover:block hidden"
+    >
+      <TooltipContent>Coming Soon</TooltipContent>
+    </div>
+  {/if}
+</button>
+
+<style lang="postcss">
+  button {
+    @apply border-b-2 border-transparent;
+    @apply flex items-center relative;
+    @apply p-1 gap-x-2;
+    @apply font-medium text-xs text-gray-500;
+  }
+
+  .selected {
+    @apply border-b-2 border-primary-600 text-primary-600;
+  }
+</style>
diff --git a/web-common/src/features/dashboards/tab-bar/TabBar.svelte b/web-common/src/features/dashboards/tab-bar/TabBar.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { TabGroup, TabList } from "@rgossiaux/svelte-headlessui";
   import Chart from "@rilldata/web-common/components/icons/Chart.svelte";
   import Pivot from "@rilldata/web-common/components/icons/Pivot.svelte";
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import Tab from "./Tab.svelte";
-  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
-  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { featureFlags } from "../../feature-flags";
+  import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
 
   const { pivot: pivotAllowed } = featureFlags;
 
@@ -20,21 +18,22 @@
     },
   } = StateManagers;
 
-  $: currentTabIndex = $showPivot ? 1 : 0;
-
   const tabs = [
     {
       label: "Explore",
-      icon: Chart,
+      Icon: Chart,
     },
     {
       label: "Pivot",
-      icon: Pivot,
+      Icon: Pivot,
+      beta: true,
     },
   ];
 
-  function handleTabChange(event: CustomEvent) {
-    const selectedTab = tabs[event.detail];
+  $: currentTabIndex = $showPivot ? 1 : 0;
+
+  function handleTabChange(index: number) {
+    const selectedTab = tabs[index];
 
     if (selectedTab.label === "Pivot" && !$pivotAllowed) return;
 
@@ -46,20 +45,19 @@
 </script>
 
 <div class="mr-4">
-  <TabGroup defaultIndex={currentTabIndex} on:change={handleTabChange}>
-    <TabList class="flex gap-x-4">
-      {#each tabs as tab}
-        {@const disabled = tab.label === "Pivot" && !$pivotAllowed}
-        <Tooltip suppress={!disabled}>
-          <Tab {disabled}>
-            <div class="flex gap-2 items-center">
-              <svelte:component this={tab.icon} />
-              {tab.label}
-            </div>
-          </Tab>
-          <TooltipContent slot="tooltip-content">Coming Soon</TooltipContent>
-        </Tooltip>
-      {/each}
-    </TabList>
-  </TabGroup>
+  <div class="flex gap-x-2">
+    {#each tabs as { label, Icon, beta }, i (label)}
+      {@const selected = currentTabIndex === i}
+      {@const disabled = beta && !$pivotAllowed}
+      <Tab {disabled} {selected} on:click={() => handleTabChange(i)}>
+        <Icon />
+        <div class="flex gap-x-1 items-center group">
+          {label}
+          {#if beta}
+            <Tag height={18} color={selected ? "blue" : "gray"}>BETA</Tag>
+          {/if}
+        </div>
+      </Tab>
+    {/each}
+  </div>
 </div>
diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -68,8 +68,6 @@
   $: dashboard = useDashboard($runtime.instanceId, metricViewName);
   $: mockUserHasNoAccess =
     $selectedMockUserStore && $dashboard.error?.response?.status === 404;
-
-  const FILTERS_MIN_CONTAINER_HEIGHT = "34px";
 </script>
 
 <section
@@ -99,18 +97,15 @@
     {:else}
       <div class="-ml-3 px-1 pt-2 space-y-2">
         <TimeControls {metricViewName} />
-        <div class="flex justify-between">
-          {#key metricViewName}
-            <section
-              class="pl-2 grid gap-x-2 items-start"
-              style:grid-template-columns="max-content auto"
-              style:min-height={FILTERS_MIN_CONTAINER_HEIGHT}
-            >
-              <Filters />
-            </section>
-            <TabBar />
-          {/key}
-        </div>
+
+        {#key metricViewName}
+          <section class="flex justify-between gap-x-4">
+            <Filters />
+            <div class="flex flex-col justify-end">
+              <TabBar />
+            </div>
+          </section>
+        {/key}
       </div>
     {/if}
   </div>