Cell inspector data display

web-common/src/components/CellInspector.svelte

@@ -21,7 +21,8 @@
   // Subscribe to the cellInspectorStore to keep the component in sync
   const unsubscribe = cellInspectorStore.subscribe((state) => {
     isOpen = state.isOpen;
-    if (state.value && state.isOpen && !isLocked) {
+    // Update value when open and not locked, and a value has been set via hover
+    if (state.isOpen && !isLocked && state.hasValue) {
       value = state.value;
     }
   });
@@ -175,7 +176,9 @@
         class:items-center={!isJson}
       >
         {#if value === null}
-          <span class="text-sm text-gray-500 italic">No value</span>
+          <span class="text-sm text-gray-500 italic">null</span>
+        {:else if value === ""}
+          <span class="text-sm text-gray-500 italic">(empty string)</span>
         {:else}
           <span
             class="whitespace-pre-wrap break-words text-sm text-gray-800 w-full"

web-common/src/components/virtualized-table/VirtualTableCell.svelte

@@ -16,17 +16,11 @@
     | undefined;
 
   function handleMouseOver() {
-    if (value !== undefined && value !== null) {
-      // Always update the value in the store, but don't change visibility
-      cellInspectorStore.updateValue(value.toString());
-    }
+    cellInspectorStore.updateValue(value);
   }
 
   function handleFocus() {
-    if (value !== undefined && value !== null) {
-      // Always update the value in the store, but don't change visibility
-      cellInspectorStore.updateValue(value.toString());
-    }
+    cellInspectorStore.updateValue(value);
   }
 </script>
 

web-common/src/components/virtualized-table/core/Cell.svelte

@@ -48,10 +48,7 @@
   function onFocus() {
     onInspect(row.index);
     cellActive = true;
-    // Update the cell inspector store with the cell value
-    if (value !== undefined && value !== null) {
-      cellInspectorStore.updateValue(value.toString());
-    }
+    cellInspectorStore.updateValue(value);
   }
 
   function onSelect(e: MouseEvent) {

web-common/src/features/canvas/components/kpi/KPI.svelte

@@ -89,29 +89,21 @@
   function handleBigNumberMouseOver() {
     const displayValue =
       hoveredPoints?.[0]?.value != null ? currentValue : primaryTotal;
-    if (displayValue !== undefined && displayValue !== null) {
-      cellInspectorStore.updateValue(displayValue.toString());
-    }
+    cellInspectorStore.updateValue(displayValue);
   }
 
   function handleBigNumberFocus() {
     const displayValue =
       hoveredPoints?.[0]?.value != null ? currentValue : primaryTotal;
-    if (displayValue !== undefined && displayValue !== null) {
-      cellInspectorStore.updateValue(displayValue.toString());
-    }
+    cellInspectorStore.updateValue(displayValue);
   }
 
   function handleComparisonMouseOver() {
-    if (comparisonVal !== undefined && comparisonVal !== null) {
-      cellInspectorStore.updateValue(comparisonVal.toString());
-    }
+    cellInspectorStore.updateValue(comparisonVal);
   }
 
   function handleComparisonFocus() {
-    if (comparisonVal !== undefined && comparisonVal !== null) {
-      cellInspectorStore.updateValue(comparisonVal.toString());
-    }
+    cellInspectorStore.updateValue(comparisonVal);
   }
 </script>
 

web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte

@@ -94,17 +94,11 @@
   $: useDiv = isMeasureExpanded || !withTimeseries;
 
   function handleMouseOver() {
-    if (value !== undefined && value !== null) {
-      // Always update the value in the store, but don't change visibility
-      cellInspectorStore.updateValue(value.toString());
-    }
+    cellInspectorStore.updateValue(value);
   }
 
   function handleFocus() {
-    if (value !== undefined && value !== null) {
-      // Always update the value in the store, but don't change visibility
-      cellInspectorStore.updateValue(value.toString());
-    }
+    cellInspectorStore.updateValue(value);
   }
 </script>
 

web-common/src/features/dashboards/leaderboard/LeaderboardCell.svelte

@@ -77,18 +77,8 @@
       on:click={modified({
         shift: () => shiftClickHandler(value),
       })}
-      on:pointerover={() => {
-        if (value?.toString) {
-          // Always update the value in the store, but don't change visibility
-          cellInspectorStore.updateValue(value.toString());
-        }
-      }}
-      on:focus={() => {
-        if (value?.toString) {
-          // Always update the value in the store, but don't change visibility
-          cellInspectorStore.updateValue(value.toString());
-        }
-      }}
+      on:pointerover={() => cellInspectorStore.updateValue(value)}
+      on:focus={() => cellInspectorStore.updateValue(value)}
       on:mouseleave={() => (tooltipActive = false)}
       style:background
       class="{cellType}-cell {className}"

web-common/src/features/dashboards/pivot/FlatTable.svelte

@@ -202,20 +202,8 @@
             data-value={cell.getValue()}
             data-rowid={cell.row.id}
             data-columnid={cell.column.id}
-            on:mouseover={() => {
-              const value = cell.getValue();
-              if (value !== undefined && value !== null) {
-                // Always update the value in the store, but don't change visibility
-                cellInspectorStore.updateValue(String(value));
-              }
-            }}
-            on:focus={() => {
-              const value = cell.getValue();
-              if (value !== undefined && value !== null) {
-                // Always update the value in the store, but don't change visibility
-                cellInspectorStore.updateValue(String(value));
-              }
-            }}
+            on:mouseover={() => cellInspectorStore.updateValue(cell.getValue())}
+            on:focus={() => cellInspectorStore.updateValue(cell.getValue())}
           >
             {#if result?.component && result?.props}
               <svelte:component

web-common/src/features/dashboards/pivot/NestedTable.svelte

@@ -346,20 +346,8 @@
             data-columnid={cell.column.id}
             data-rowheader={i === 0 || undefined}
             class:totals-column={i > 0 && i <= measureCount}
-            on:mouseover={() => {
-              const value = cell.getValue();
-              if (value !== undefined && value !== null) {
-                // Always update the value in the store, but don't change visibility
-                cellInspectorStore.updateValue(String(value));
-              }
-            }}
-            on:focus={() => {
-              const value = cell.getValue();
-              if (value !== undefined && value !== null) {
-                // Always update the value in the store, but don't change visibility
-                cellInspectorStore.updateValue(String(value));
-              }
-            }}
+            on:mouseover={() => cellInspectorStore.updateValue(cell.getValue())}
+            on:focus={() => cellInspectorStore.updateValue(cell.getValue())}
           >
             {#if result?.component && result?.props}
               <svelte:component

web-common/src/features/dashboards/pivot/RegularTable.svelte

@@ -113,21 +113,8 @@
       th.setAttribute("title", value.value);
     }
 
-    // Add mouseover event to update the value in the store without changing visibility
-    th.onmouseover = () => {
-      if (value?.value !== undefined && value?.value !== null) {
-        // Always update the value in the store, but don't change visibility
-        cellInspectorStore.updateValue(String(value.value));
-      }
-    };
-
-    // Add focus event to update the value in the store without changing visibility
-    th.onfocus = () => {
-      if (value?.value !== undefined && value?.value !== null) {
-        // Always update the value in the store, but don't change visibility
-        cellInspectorStore.updateValue(String(value.value));
-      }
-    };
+    th.onmouseover = () => cellInspectorStore.updateValue(value?.value);
+    th.onfocus = () => cellInspectorStore.updateValue(value?.value);
     const maybeWidth = getRowHeaderWidth(x);
     if (maybeWidth) {
       th.style.width = `${maybeWidth}px`;
@@ -161,20 +148,8 @@
     td.setAttribute("__col", String(x));
     td.setAttribute("__row", String(y));
 
-    // Add mouseover event to update the value in the store without changing visibility
-    td.onmouseover = () => {
-      if (value !== undefined && value !== null) {
-        // Always update the value in the store, but don't change visibility
-        cellInspectorStore.updateValue(String(value));
-      }
-    };
-
-    td.onfocus = () => {
-      if (value !== undefined && value !== null) {
-        // Always update the value in the store, but don't change visibility
-        cellInspectorStore.updateValue(String(value));
-      }
-    };
+    td.onmouseover = () => cellInspectorStore.updateValue(value);
+    td.onfocus = () => cellInspectorStore.updateValue(value);
 
     const maybeWidth = getColumnWidth(x);
     if (maybeWidth) {

web-common/src/features/dashboards/stores/cell-inspector-store.ts

@@ -2,39 +2,64 @@ import { writable } from "svelte/store";
 
 interface CellInspectorState {
   isOpen: boolean;
-  value: string;
+  hasValue: boolean;
+  value: string | null;
+}
+
+/**
+ * Converts a raw cell value to the format expected by the store.
+ * Returns null for null/undefined values, string for everything else.
+ */
+function normalizeValue(value: unknown): string | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  return String(value);
 }
 
 function createCellInspectorStore() {
   const { subscribe, update } = writable<CellInspectorState>({
     isOpen: false,
-    value: "",
+    hasValue: false,
+    value: null,
   });
 
   return {
     subscribe,
-    open: (value: string) =>
+    open: (value: string | null) =>
       update((state) => ({
         ...state,
         isOpen: true,
+        hasValue: true,
         value,
       })),
     close: () =>
       update((state) => ({
         ...state,
         isOpen: false,
       })),
-    // Update the value without changing visibility
-    updateValue: (value: string) =>
+    /**
+     * Update the value without changing visibility.
+     * Accepts any value type and normalizes it internally.
+     */
+    updateValue: (value: unknown) =>
       update((state) => ({
         ...state,
-        value,
+        hasValue: true,
+        value: normalizeValue(value),
       })),
-    toggle: (value: string) =>
+    toggle: (value: string | null) =>
       update((state) => ({
         ...state,
         isOpen: !state.isOpen,
-        value: state.isOpen ? state.value : value,
+        // When opening: prefer store's existing value (from hover) if set, fall back to passed value
+        // When closing: keep the current value
+        ...(state.isOpen
+          ? {}
+          : {
+              hasValue: true,
+              value: state.hasValue ? state.value : value,
+            }),
       })),
   };
 }