fix: comparison time ranges resetting when switching time ranges (#6270)

* Fix comparison being disabled while switching time ranges * Fix disabled comparison not disabling comparison options in alert criteria * Remove console.log
rilldata · Dec 16, 2024 · 2705c48 · 2705c48 · github-actions · Dec 16, 2024
1 parent 78f8df0
commit 2705c48
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/web-common/src/components/forms/Select.svelte b/web-common/src/components/forms/Select.svelte
@@ -12,7 +12,13 @@
   export let id: string;
   export let label: string = "";
   export let lockTooltip: string = "";
-  export let options: { value: string; label: string; type?: string }[];
+  export let options: {
+    value: string;
+    label: string;
+    type?: string;
+    disabled?: boolean;
+    tooltip?: string;
+  }[];
   export let placeholder: string = "";
   export let optional: boolean = false;
   export let tooltip: string = "";
@@ -101,12 +107,31 @@
           <Search bind:value={searchText} showBorderOnFocus={false} />
         </div>
       {/if}
-      {#each filteredOptions as { type, value, label } (value)}
-        <Select.Item {value} {label} class="text-[{fontSize}px] gap-x-2">
-          {#if type}
-            <DataTypeIcon {type} />
+      {#each filteredOptions as { type, value, label, disabled, tooltip } (value)}
+        <Select.Item
+          {value}
+          {label}
+          {disabled}
+          class="text-[{fontSize}px] gap-x-2"
+        >
+          {#if tooltip}
+            <Tooltip.Root portal="body">
+              <Tooltip.Trigger class="select-tooltip cursor-default">
+                {#if type}
+                  <DataTypeIcon {type} />
+                {/if}
+                {label ?? value}
+              </Tooltip.Trigger>
+              <Tooltip.Content side="right" sideOffset={8}>
+                {tooltip}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {:else}
+            {#if type}
+              <DataTypeIcon {type} />
+            {/if}
+            {label ?? value}
           {/if}
-          {label ?? value}
         </Select.Item>
       {:else}
         <div class="px-2.5 py-1.5 text-gray-600">No results found</div>

diff --git a/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts b/web-common/src/features/dashboards/url-state/convertPresetToExploreState.ts
@@ -151,17 +151,27 @@ function fromTimeRangesParams(
       preset.compareTimeRange,
     );
     partialExploreState.showTimeComparison = true;
-    // unset compare dimension
-    partialExploreState.selectedComparisonDimension = "";
+    if (
+      preset.comparisonMode ===
+      V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_TIME
+    ) {
+      // unset compare dimension
+      partialExploreState.selectedComparisonDimension = "";
+    }
   }
 
   if (preset.comparisonDimension) {
     if (dimensions.has(preset.comparisonDimension)) {
       partialExploreState.selectedComparisonDimension =
         preset.comparisonDimension;
-      // unset compare time ranges
-      partialExploreState.selectedComparisonTimeRange = undefined;
-      partialExploreState.showTimeComparison = false;
+      if (
+        preset.comparisonMode ===
+        V1ExploreComparisonMode.EXPLORE_COMPARISON_MODE_DIMENSION
+      ) {
+        // unset compare time ranges
+        partialExploreState.selectedComparisonTimeRange = undefined;
+        partialExploreState.showTimeComparison = false;
+      }
     } else {
       errors.push(
         getSingleFieldError("compare dimension", preset.comparisonDimension),