Merge branch 'main' into fix/url-history-issues

rilldata · Dec 9, 2024 · 010a89f · 010a89f
2 parents ddb1aa1 + 9c87e6b
commit 010a89f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 64 deletions.
diff --git a/web-common/src/features/dashboards/tab-bar/TabBar.svelte b/web-common/src/features/dashboards/tab-bar/TabBar.svelte
@@ -1,90 +1,75 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import Chart from "@rilldata/web-common/components/icons/Chart.svelte";
   import Pivot from "@rilldata/web-common/components/icons/Pivot.svelte";
   import Tag from "@rilldata/web-common/components/tag/Tag.svelte";
-  import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
-  import { getUrlForWebView } from "@rilldata/web-common/features/dashboards/url-state/explore-web-view-store";
   import { behaviourEvent } from "@rilldata/web-common/metrics/initMetrics";
   import { BehaviourEventMedium } from "@rilldata/web-common/metrics/service/BehaviourEventTypes";
   import {
     MetricsEventScreenName,
     MetricsEventSpace,
   } from "@rilldata/web-common/metrics/service/MetricsTypes";
-  import { V1ExploreWebView } from "@rilldata/web-common/runtime-client";
   import Tab from "./Tab.svelte";
+  import type { ComponentType } from "svelte";
 
-  export let hidePivot: boolean = false;
-
-  const StateManagers = getStateManagers();
+  type TabName = MetricsEventScreenName.Pivot | MetricsEventScreenName.Explore;
+  type TabData = { label: string; Icon: ComponentType; beta?: true };
 
-  const {
-    exploreName,
-    selectors: {
-      pivot: { showPivot },
-    },
-    defaultExploreState,
-  } = StateManagers;
+  const tabs = new Map<TabName, TabData>([
+    [
+      MetricsEventScreenName.Explore,
+      {
+        label: "Explore",
+        Icon: Chart,
+      },
+    ],
+    [
+      MetricsEventScreenName.Pivot,
+      {
+        label: "Pivot",
+        Icon: Pivot,
+      },
+    ],
+  ]);
 
-  $: tabs = [
-    {
-      label: "Explore",
-      Icon: Chart,
-      beta: false,
-      href: getUrlForWebView(
-        $page.url,
-        V1ExploreWebView.EXPLORE_WEB_VIEW_EXPLORE,
-        $defaultExploreState,
-      ),
-    },
-    ...(hidePivot
-      ? []
-      : [
-          {
-            label: "Pivot",
-            Icon: Pivot,
-            beta: false,
-            href: getUrlForWebView(
-              $page.url,
-              V1ExploreWebView.EXPLORE_WEB_VIEW_PIVOT,
-              $defaultExploreState,
-            ),
-          },
-        ]),
-  ];
-
-  $: currentTabIndex = $showPivot ? 1 : 0;
+  export let hidePivot: boolean = false;
+  export let exploreName: string;
+  export let onPivot = false;
 
-  function handleTabChange(index: number) {
-    if (currentTabIndex === index) return;
-    const selectedTab = tabs[index];
+  $: currentTab = onPivot
+    ? MetricsEventScreenName.Pivot
+    : MetricsEventScreenName.Explore;
 
+  async function handleTabChange(tab: MetricsEventScreenName) {
     // We do not have behaviour events in cloud
-    behaviourEvent?.fireNavigationEvent(
-      $exploreName,
+    await behaviourEvent?.fireNavigationEvent(
+      exploreName,
       BehaviourEventMedium.Tab,
       MetricsEventSpace.Workspace,
       MetricsEventScreenName.Dashboard,
-      selectedTab.label === "Pivot"
-        ? MetricsEventScreenName.Pivot
-        : MetricsEventScreenName.Explore,
+      tab,
     );
   }
 </script>
 
 <div class="mr-4">
   <div class="flex gap-x-2">
-    {#each tabs as { label, Icon, beta, href }, i (label)}
-      {@const selected = currentTabIndex === i}
-      <Tab {selected} {href} 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 tabs as [tab, { label, Icon, beta }] (tab)}
+      {#if !hidePivot || tab === MetricsEventScreenName.Explore}
+        {@const selected = tab === currentTab}
+        <Tab
+          {selected}
+          href="?view={tab}"
+          on:click={() => handleTabChange(tab)}
+        >
+          <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>
+      {/if}
     {/each}
   </div>
 </div>
diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -29,7 +29,9 @@
       measures: { visibleMeasures },
       activeMeasure: { activeMeasureName },
       dimensions: { getDimensionByName },
+      pivot: { showPivot },
     },
+
     dashboardStore,
     validSpecStore,
   } = StateManagers;
@@ -50,7 +52,6 @@
   $: selectedDimension =
     selectedDimensionName && $getDimensionByName(selectedDimensionName);
   $: expandedMeasureName = $exploreState?.tdd?.expandedMeasureName;
-  $: showPivot = $exploreState?.pivot?.active;
   $: metricTimeSeries = useModelHasTimeSeries(
     $runtime.instanceId,
     metricsViewName,
@@ -100,7 +101,7 @@
         <section class="flex relative justify-between gap-x-4 py-4 pb-6 px-4">
           <Filters />
           <div class="absolute bottom-0 flex flex-col right-0">
-            <TabBar {hidePivot} />
+            <TabBar {hidePivot} {exploreName} onPivot={$showPivot} />
           </div>
         </section>
       {/key}
@@ -114,7 +115,7 @@
       header="This user can't access this dashboard"
       body="The security policy for this dashboard may make contents invisible to you. If you deploy this dashboard, {$selectedMockUserStore?.email} will see a 404."
     />
-  {:else if showPivot}
+  {:else if $showPivot}
     <PivotDisplay />
   {:else}
     <div