tweak: disable comparisons when viewing max range

web-common/src/components/date-picker/DateInput.svelte

@@ -57,7 +57,6 @@
     const dateString = e.currentTarget.value;
 
     let date: DateTime = DateTime.invalid("invalid");
-
     let format: string | null = null;
 
     for (const potentialFormat of formats) {

web-common/src/features/dashboards/stores/dashboard-stores.ts

@@ -14,10 +14,11 @@ import {
 } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
 import { TDDChart } from "@rilldata/web-common/features/dashboards/time-dimension-details/types";
-import type {
-  DashboardTimeControls,
-  ScrubRange,
-  TimeRange,
+import {
+  TimeRangePreset,
+  type DashboardTimeControls,
+  type ScrubRange,
+  type TimeRange,
 } from "@rilldata/web-common/lib/time/types";
 import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import type {
@@ -531,6 +532,10 @@ const metricsViewReducers = {
       // Reset scrub when range changes
       setSelectedScrubRange(metricsExplorer, undefined);
 
+      if (timeRange.name === TimeRangePreset.ALL_TIME) {
+        metricsExplorer.showTimeComparison = false;
+      }
+
       metricsExplorer.selectedTimeRange = {
         ...timeRange,
         interval: timeGrain,

web-common/src/features/dashboards/time-controls/comparison-pill/ComparisonPill.svelte

@@ -4,6 +4,7 @@
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import {
     TimeComparisonOption,
+    TimeRangePreset,
     type DashboardTimeControls,
     type TimeRange,
   } from "@rilldata/web-common/lib/time/types";
@@ -69,10 +70,17 @@
       metricsViewSpec,
     );
   }
+
+  $: disabled =
+    selectedTimeRange?.name === TimeRangePreset.ALL_TIME || undefined;
 </script>
 
-<div class="wrapper">
+<div
+  class="wrapper"
+  title={disabled && "Comparison not available when viewing all time range"}
+>
   <button
+    {disabled}
     class="flex gap-x-1.5 cursor-pointer"
     on:click={() => {
       metricsExplorerStore.displayTimeComparison(
@@ -91,10 +99,15 @@
     }}
   >
     <div class="pointer-events-none flex items-center gap-x-1.5">
-      <Switch checked={showTimeComparison} id="comparing" small />
+      <Switch
+        checked={showTimeComparison}
+        id="comparing"
+        small
+        disabled={disabled ?? false}
+      />
 
       <Label class="font-normal text-xs cursor-pointer" for="comparing">
-        <span>Comparing</span>
+        <span class:opacity-50={disabled}>Comparing</span>
       </Label>
     </div>
   </button>
@@ -109,6 +122,7 @@
       grain={activeTimeGrain}
       zone={activeTimeZone}
       {onSelectComparisonRange}
+      disabled={disabled ?? false}
     />
   {/if}
 </div>
@@ -117,7 +131,7 @@
   .wrapper {
     @apply flex w-fit;
     @apply h-7 rounded-full;
-    @apply overflow-hidden;
+    @apply overflow-hidden select-none;
   }
 
   :global(.wrapper > button) {

web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte

@@ -23,6 +23,7 @@
   export let showComparison: boolean | undefined;
   export let selectedComparison: DashboardTimeControls | undefined;
   export let zone: string;
+  export let disabled: boolean;
   export let grain: string;
   export let minDate: DateTime | undefined = undefined;
   export let maxDate: DateTime | undefined = undefined;
@@ -97,6 +98,7 @@
 >
   <DropdownMenu.Trigger asChild let:builder>
     <button
+      {disabled}
       use:builder.action
       {...builder}
       aria-label="Select time comparison option"

web-local/tests/explores/leaderboard-and-dim-table-sort.spec.ts

@@ -53,12 +53,12 @@ test.describe("leaderboard and dimension table sorting", () => {
       page.getByRole("row", { name: "null 32.9k" }),
     );
 
-    // add time comparison and select Pct change
-    await page.getByRole("button", { name: "Comparing" }).click();
-
     await openTimeRangeMenu();
     await page.getByRole("menuitem", { name: "Last 24 Hours" }).click();
 
+    // add time comparison and select Pct change
+    await page.getByRole("button", { name: "Comparing" }).click();
+
     // need a slight delay for the time range to update
     // and the "Pct change" option to be available
     // in the context column dropdown

web-local/tests/explores/leaderboard-context-column.spec.ts

@@ -126,7 +126,6 @@ test.describe("leaderboard context column", () => {
     await interactWithTimeRangeMenu(page, async () => {
       await page.getByRole("menuitem", { name: "All Time" }).click();
     });
-    await page.getByRole("button", { name: "Comparing" }).click();
 
     // Check that time comparison context column is hidden
     await expect(page.getByText(comparisonColumnRegex)).not.toBeVisible();