matterviz 0.4.1 → 0.4.3

package/dist/heatmap-matrix/HeatmapMatrix.svelte

@@ -6,6 +6,7 @@
   import type { AxisConfig } from '../plot'
   import ColorBar from '../plot/core/components/ColorBar.svelte'
   import { quickselect } from '../plot/box/quantile'
+  import { clamp01 } from '../utils'
   import { type ComponentProps, onDestroy, onMount, type Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
@@ -17,6 +18,7 @@
     HeatmapExportFormat,
     HeatmapTooltipProp,
     LegendPosition,
+    MissingCellStyle,
     NormalizeMode,
     SymmetricMode,
   } from './index'
@@ -38,7 +40,7 @@
     color_scale = $bindable(`interpolateViridis`),
     color_scale_range = [null, null],
     color_overrides = {},
-    missing_color = `transparent`,
+    missing = {},
     log = false,
     value_transform,
     normalize = `linear`,
@@ -113,13 +115,11 @@
   }: Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblclick`> & {
     x_items: AxisItem[]
     y_items: AxisItem[]
-    values?:
-      | CellValue[][]
-      | Record<string, Record<string, CellValue>>
+    values?: CellValue[][] | Record<string, Record<string, CellValue>>
     color_scale?: D3InterpolateName | ((val: number) => string)
     color_scale_range?: [number | null, number | null]
     color_overrides?: Record<string, string>
-    missing_color?: string
+    missing?: MissingCellStyle
     log?: boolean
     value_transform?: (
       value: number,
@@ -145,11 +145,7 @@
     onpin?: (cell: CellPos | null) => void
     oncontextmenu?: (cell: CellContext, event: MouseEvent) => void
     enable_brush?: boolean
-    onbrush?: (payload: {
-      x_range: Vec2
-      y_range: Vec2
-      cells: CellContext[]
-    }) => void
+    onbrush?: (payload: { x_range: Vec2; y_range: Vec2; cells: CellContext[] }) => void
     tile_size?: string
     gap?: string
     // false: show all rows/cols. 'compact': remove all-null rows/cols.
@@ -199,9 +195,7 @@
   } = $props()
 
   // Normalize symmetric prop: true→'lower', otherwise pass through
-  const symmetric = $derived(
-    symmetric_prop === true ? `lower` : symmetric_prop,
-  )
+  const symmetric = $derived(symmetric_prop === true ? `lower` : symmetric_prop)
 
   // Check if a cell should be skipped in symmetric mode
   function is_hidden_cell(x_idx: number, y_idx: number): boolean {
@@ -220,8 +214,7 @@
   let get_value = $derived.by(() => {
     if (Array.isArray(values)) {
       const matrix_values = values as CellValue[][]
-      return (x_idx: number, y_idx: number): CellValue =>
-        matrix_values[y_idx]?.[x_idx] ?? null
+      return (x_idx: number, y_idx: number): CellValue => matrix_values[y_idx]?.[x_idx] ?? null
     }
     // Record<y_key, Record<x_key, value>>
     const record = values as Record<string, Record<string, CellValue>>
@@ -261,25 +254,22 @@
     return sorted
   }
 
+  const filter_by_search = (indices: number[], items: AxisItem[]): number[] =>
+    search_query_norm
+      ? indices.filter((idx) => {
+          const item = items[idx]
+          return (
+            (item.key ?? item.label).toLowerCase().includes(search_query_norm) ||
+            item.label.toLowerCase().includes(search_query_norm)
+          )
+        })
+      : indices
+
   let { vis_x, vis_y } = $derived.by(() => {
     const all_x = Array.from({ length: x_items.length }, (_, idx) => idx)
     const all_y = Array.from({ length: y_items.length }, (_, idx) => idx)
-    const filtered_x = search_query_norm
-      ? all_x.filter((idx) => {
-        const item = x_items[idx]
-        const key = item.key ?? item.label
-        return key.toLowerCase().includes(search_query_norm) ||
-          item.label.toLowerCase().includes(search_query_norm)
-      })
-      : all_x
-    const filtered_y = search_query_norm
-      ? all_y.filter((idx) => {
-        const item = y_items[idx]
-        const key = item.key ?? item.label
-        return key.toLowerCase().includes(search_query_norm) ||
-          item.label.toLowerCase().includes(search_query_norm)
-      })
-      : all_y
+    const filtered_x = filter_by_search(all_x, x_items)
+    const filtered_y = filter_by_search(all_y, y_items)
     if (!hide_empty) {
       return {
         vis_x: sort_indices(filtered_x, x_items, x_order),
@@ -345,7 +335,7 @@
   // Interpolated quantile via quickselect (O(n) avg vs full sort); reorders `scratch_values` in place so callers must pass a copy they own
   function get_quantile(scratch_values: number[], quantile: number): number {
     if (scratch_values.length === 0) return 0
-    const clipped_quantile = Math.max(0, Math.min(1, quantile))
+    const clipped_quantile = clamp01(quantile)
     const float_idx = (scratch_values.length - 1) * clipped_quantile
     const low_idx = Math.floor(float_idx)
     const high_idx = Math.ceil(float_idx)
@@ -390,8 +380,8 @@
     const clipped_min = get_quantile(scratch, q_low)
     const clipped_max = get_quantile(scratch, q_high)
     return clipped_min <= clipped_max
-      ? [clipped_min, clipped_max] as const
-      : [clipped_max, clipped_min] as const
+      ? ([clipped_min, clipped_max] as const)
+      : ([clipped_max, clipped_min] as const)
   })
 
   let [domain_min, domain_max] = $derived.by(() => {
@@ -410,41 +400,44 @@
   let cs_max = $derived(color_scale_range[1] ?? domain_max)
   let use_log_norm = $derived(normalize === `log` || log)
 
+  // fill for cells with no mappable value (default transparent)
+  let missing_fill = $derived(missing.color ?? `transparent`)
+
+  // whether a value lacks a mappable scale color (-> missing fill + label/style decorations)
+  function cell_is_missing(val: CellValue): boolean {
+    if (val === null) return true
+    if (typeof val === `string`) return !is_color(val)
+    return !Number.isFinite(val) || (use_log_norm && val <= 0)
+  }
+
   // Map a single value to a background color
   function value_to_color(val: CellValue): string | null {
-    if (val === null) return missing_color || null
-    if (typeof val === `string`) {
-      if (is_color(val)) return val
-      return missing_color || null
-    }
-    if (!Number.isFinite(val) || !color_scale_fn) return missing_color || null
-    if (use_log_norm && val <= 0) return missing_color || null
+    if (typeof val === `string`) return is_color(val) ? val : missing_fill || null
+    // null/string excluded above -> val narrows to number past this guard
+    if (val === null || !color_scale_fn || cell_is_missing(val)) return missing_fill || null
 
     const span = cs_max - cs_min
     if (!Number.isFinite(span) || span === 0) return color_scale_fn(0.5)
 
-    let normalized = typeof normalize === `function`
-      ? normalize(val, cs_min, cs_max)
-      : (val - cs_min) / span
+    let normalized =
+      typeof normalize === `function` ? normalize(val, cs_min, cs_max) : (val - cs_min) / span
     if (use_log_norm) {
       const is_descending_range = cs_min > cs_max
       const lower_bound = Math.min(cs_min, cs_max)
       const upper_bound = Math.max(cs_min, cs_max)
-      if (upper_bound <= 0) return missing_color || null
+      if (upper_bound <= 0) return missing_fill || null
       const safe_lower_bound = lower_bound > 0 ? lower_bound : (min_pos ?? upper_bound)
       const safe_value = Math.max(val, safe_lower_bound)
       const log_min = Math.log(safe_lower_bound)
       const log_max = Math.log(upper_bound)
-      if (
-        !Number.isFinite(log_min) || !Number.isFinite(log_max) || log_max === log_min
-      ) {
+      if (!Number.isFinite(log_min) || !Number.isFinite(log_max) || log_max === log_min) {
         return color_scale_fn(0.5)
       }
       const log_normalized = (Math.log(safe_value) - log_min) / (log_max - log_min)
       normalized = is_descending_range ? 1 - log_normalized : log_normalized
     }
-    if (!Number.isFinite(normalized)) return missing_color || null
-    return color_scale_fn(Math.max(0, Math.min(1, normalized)))
+    if (!Number.isFinite(normalized)) return missing_fill || null
+    return color_scale_fn(clamp01(normalized))
   }
 
   // Batch compute background colors as a flat array indexed by y_idx * n_x + x_idx.
@@ -462,21 +455,19 @@
         }
         const override_key = make_color_override_key(x_keys[x_idx], y_keys[y_idx])
         const raw_value = get_value(x_idx, y_idx)
-        const transformed_value = typeof raw_value === `number`
-          ? get_transformed_value(x_idx, y_idx)
-          : raw_value
-        colors[row_offset + x_idx] = override_key in color_overrides
-          ? color_overrides[override_key]
-          : value_to_color(transformed_value)
+        const transformed_value =
+          typeof raw_value === `number` ? get_transformed_value(x_idx, y_idx) : raw_value
+        colors[row_offset + x_idx] =
+          override_key in color_overrides
+            ? color_overrides[override_key]
+            : value_to_color(transformed_value)
       }
     }
     return colors
   })
 
   const to_contrast_colors = (bg_values: (string | null)[]): (string | null)[] =>
-    bg_values.map((bg_color) =>
-      bg_color ? pick_contrast_color({ bg_color }) : null
-    )
+    bg_values.map((bg_color) => (bg_color ? pick_contrast_color({ bg_color }) : null))
 
   // Compute text colors when cells render content that needs contrast (cell snippet or show_values)
   let text_flat = $derived.by(() => {
@@ -485,14 +476,10 @@
   })
 
   // Keep selected outlines visible against each cell's background.
-  let selected_outline_flat = $derived.by(() => to_contrast_colors(bg_flat))
+  let selected_outline_flat = $derived(to_contrast_colors(bg_flat))
 
   const get_flat_idx = (x_idx: number, y_idx: number): number => y_idx * n_x + x_idx
 
-  // Look up bg color by indices
-  const get_bg = (x_idx: number, y_idx: number): string | null =>
-    bg_flat[get_flat_idx(x_idx, y_idx)]
-
   // === Cell context builder (only called for clicks, not per-hover) ===
   const build_cell_context = (x_idx: number, y_idx: number): CellContext => ({
     x_item: x_items[x_idx],
@@ -500,16 +487,16 @@
     x_idx,
     y_idx,
     value: get_value(x_idx, y_idx),
-    bg_color: get_bg(x_idx, y_idx),
+    bg_color: bg_flat[get_flat_idx(x_idx, y_idx)],
   })
 
   // === Fully imperative hover management ===
   // ZERO $state writes during mouseover — all DOM updates are direct.
   // This avoids Svelte's reactive flush which would re-evaluate effects.
-  const is_browser = typeof window !== `undefined`
   let tooltip_div: HTMLDivElement | undefined = $state()
   let active_cell_raf = 0 // rAF handle for deferred active_cell update
   let click_timeout_id: ReturnType<typeof setTimeout> | null = null
+  let pending_click_key: string | null = null
   const dblclick_delay_ms = 250
   let last_hover_x = -1
   let last_hover_y = -1
@@ -530,12 +517,10 @@
     symmetric && symmetric_label_position === `diagonal`,
   )
   let use_staggered_x_labels = $derived(
-    stagger_axis_labels === true ||
-      (stagger_axis_labels === `auto` && vis_x.length >= 24),
+    stagger_axis_labels === true || (stagger_axis_labels === `auto` && vis_x.length >= 24),
   )
   let use_staggered_y_labels = $derived(
-    stagger_axis_labels === true ||
-      (stagger_axis_labels === `auto` && vis_y.length >= 24),
+    stagger_axis_labels === true || (stagger_axis_labels === `auto` && vis_y.length >= 24),
   )
   let use_side_split_x_labels = $derived(
     use_staggered_x_labels && !use_diagonal_symmetric_labels,
@@ -560,7 +545,7 @@
   )
 
   function parse_px_size(size: string): number {
-    const parsed = Number.parseFloat(size)
+    const parsed = Number(size.replace(`px`, ``))
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 12
   }
 
@@ -573,8 +558,7 @@
       Math.floor((scroll_left - grid_offset_left) / tile_stride_px) - overscan
     const start_pos = Math.max(0, raw_start_pos)
     const raw_end_pos =
-      Math.ceil((scroll_left - grid_offset_left + viewport_width) / tile_stride_px) +
-      overscan
+      Math.ceil((scroll_left - grid_offset_left + viewport_width) / tile_stride_px) + overscan
     const end_pos = Math.min(vis_x.length, raw_end_pos)
     return vis_x.slice(start_pos, end_pos)
   })
@@ -584,8 +568,7 @@
       Math.floor((scroll_top - grid_offset_top) / tile_stride_px) - overscan
     const start_pos = Math.max(0, raw_start_pos)
     const raw_end_pos =
-      Math.ceil((scroll_top - grid_offset_top + viewport_height) / tile_stride_px) +
-      overscan
+      Math.ceil((scroll_top - grid_offset_top + viewport_height) / tile_stride_px) + overscan
     const end_pos = Math.min(vis_y.length, raw_end_pos)
     return vis_y.slice(start_pos, end_pos)
   })
@@ -610,16 +593,12 @@
   })
   let highlight_x_by_idx = $derived(
     new SvelteSet(
-      vis_x.filter((idx) =>
-        highlight_x_key_set.has(x_items[idx].key ?? x_items[idx].label)
-      ),
+      vis_x.filter((idx) => highlight_x_key_set.has(x_items[idx].key ?? x_items[idx].label)),
     ),
   )
   let highlight_y_by_idx = $derived(
     new SvelteSet(
-      vis_y.filter((idx) =>
-        highlight_y_key_set.has(y_items[idx].key ?? y_items[idx].label)
-      ),
+      vis_y.filter((idx) => highlight_y_key_set.has(y_items[idx].key ?? y_items[idx].label)),
     ),
   )
 
@@ -644,23 +623,6 @@
     return Math.max(1, vis_row + 1)
   }
 
-  function x_label_diag_grid_col(x_idx: number): number | undefined {
-    const vis_col = get_vis_col(x_idx)
-    if (vis_col === null) return undefined
-    return vis_col + 2
-  }
-
-  function y_label_edge_grid_row(y_idx: number): number | undefined {
-    const vis_row = get_vis_row(y_idx)
-    if (vis_row === null) return undefined
-    return vis_row + 2
-  }
-
-  function x_label_grid_col(x_idx: number): number | undefined {
-    if (use_diagonal_symmetric_labels) return x_label_diag_grid_col(x_idx)
-    return cell_grid_col(x_idx)
-  }
-
   function x_label_grid_row(x_idx: number): number | undefined {
     if (use_diagonal_symmetric_labels) return x_label_diag_grid_row(x_idx)
     if (use_side_split_x_labels && x_idx % 2 !== 0) {
@@ -689,37 +651,36 @@
     return vis_row + 2
   }
 
-  function schedule_raf(callback: () => void): number {
-    if (!is_browser) {
-      callback()
-      return 0
-    }
-    return globalThis.requestAnimationFrame(callback)
-  }
-
+  // Called by event handlers, the axis-key-change effect, and onDestroy; the 0-handle
+  // guard prevents invalid cancelAnimationFrame calls.
   function cancel_raf(raf_handle: number): void {
-    if (!is_browser || raf_handle === 0) return
-    globalThis.cancelAnimationFrame(raf_handle)
+    if (raf_handle !== 0) globalThis.cancelAnimationFrame(raf_handle)
   }
 
   function clear_pending_click(): void {
-    if (click_timeout_id === null) return
-    clearTimeout(click_timeout_id)
+    if (click_timeout_id !== null) clearTimeout(click_timeout_id)
     click_timeout_id = null
+    pending_click_key = null
+  }
+
+  function schedule_single_click(cell_context: CellContext): void {
+    if (!onclick) return
+    clear_pending_click()
+    pending_click_key = cell_pos_key(cell_context.x_idx, cell_context.y_idx)
+    click_timeout_id = setTimeout(() => {
+      onclick(cell_context)
+      clear_pending_click()
+    }, dblclick_delay_ms)
   }
 
-  function parse_cell_indices(
-    cell_el: HTMLElement,
-  ): { x_idx: number; y_idx: number } | null {
+  function parse_cell_indices(cell_el: HTMLElement): { x_idx: number; y_idx: number } | null {
     const x_value = Number(cell_el.dataset.x)
     const y_value = Number(cell_el.dataset.y)
     if (!Number.isInteger(x_value) || !Number.isInteger(y_value)) return null
     return { x_idx: x_value, y_idx: y_value }
   }
 
-  function get_cell_context_from_target(
-    event_target: EventTarget | null,
-  ): CellContext | null {
+  function get_cell_context_from_target(event_target: EventTarget | null): CellContext | null {
     const cell_el = get_cell_el_from_target(event_target)
     if (!cell_el) return null
     const indices = parse_cell_indices(cell_el)
@@ -729,44 +690,24 @@
 
   function trigger_click(cell_context: CellContext): void {
     if (!onclick) return
-    if (!ondblclick) {
-      onclick(cell_context)
-      return
-    }
-    clear_pending_click()
-    click_timeout_id = setTimeout(() => {
-      onclick(cell_context)
-      click_timeout_id = null
-    }, dblclick_delay_ms)
+    if (ondblclick) schedule_single_click(cell_context)
+    else onclick(cell_context)
   }
 
-  function get_cell_el_from_target(
-    event_target: EventTarget | null,
-  ): HTMLElement | null {
-    const target_node = event_target
-    if (!(target_node instanceof Element)) return null
-    if (target_node instanceof HTMLElement && target_node.dataset.x !== undefined) {
-      return target_node
-    }
-    const closest_cell = target_node.closest(`[data-x][data-y]`)
-    return closest_cell instanceof HTMLElement ? closest_cell : null
+  function get_cell_el_from_target(event_target: EventTarget | null): HTMLElement | null {
+    if (!(event_target instanceof Element)) return null
+    const cell_el = event_target.closest(`[data-x][data-y]`) // matches self too
+    return cell_el instanceof HTMLElement ? cell_el : null
   }
 
-  function update_selected_cells(
-    event: MouseEvent,
-    clicked_cell: CellPos,
-  ): void {
+  function update_selected_cells(event: MouseEvent, clicked_cell: CellPos): void {
     if (selection_mode === `single`) {
       selected_cells = [clicked_cell]
       last_selected_cell = clicked_cell
       onselect?.(selected_cells)
       return
     }
-    if (
-      selection_mode === `range` &&
-      event.shiftKey &&
-      last_selected_cell
-    ) {
+    if (selection_mode === `range` && event.shiftKey && last_selected_cell) {
       const x_min = Math.min(last_selected_cell.x_idx, clicked_cell.x_idx)
       const x_max = Math.max(last_selected_cell.x_idx, clicked_cell.x_idx)
       const y_min = Math.min(last_selected_cell.y_idx, clicked_cell.y_idx)
@@ -784,12 +725,13 @@
     }
     const clicked_key = cell_pos_key(clicked_cell.x_idx, clicked_cell.y_idx)
     const next_cells = [...selected_cells]
-    const existing_idx = next_cells.findIndex((pos) =>
-      cell_pos_key(pos.x_idx, pos.y_idx) === clicked_key
+    const existing_idx = next_cells.findIndex(
+      (pos) => cell_pos_key(pos.x_idx, pos.y_idx) === clicked_key,
     )
+    // multi mode with Cmd/Ctrl toggles the clicked cell, otherwise replace selection
     const toggle_mode = selection_mode === `multi` && (event.metaKey || event.ctrlKey)
-    if (existing_idx !== -1 && toggle_mode) next_cells.splice(existing_idx, 1)
-    else if (selection_mode === `multi` && toggle_mode) next_cells.push(clicked_cell)
+    if (toggle_mode && existing_idx !== -1) next_cells.splice(existing_idx, 1)
+    else if (toggle_mode) next_cells.push(clicked_cell)
     else next_cells.splice(0, next_cells.length, clicked_cell)
     selected_cells = next_cells
     last_selected_cell = clicked_cell
@@ -801,8 +743,10 @@
     const tw = tooltip_div.offsetWidth
     const th = tooltip_div.offsetHeight
     // Flip to opposite side of cursor when near viewport edges
-    const left = client_x + 10 + tw > globalThis.innerWidth ? client_x - 10 - tw : client_x + 10
-    const top = client_y + 12 + th > globalThis.innerHeight ? client_y - 12 - th : client_y + 12
+    const left =
+      client_x + 10 + tw > globalThis.innerWidth ? client_x - 10 - tw : client_x + 10
+    const top =
+      client_y + 12 + th > globalThis.innerHeight ? client_y - 12 - th : client_y + 12
     tooltip_div.style.left = `${Math.max(0, left)}px`
     tooltip_div.style.top = `${Math.max(0, top)}px`
   }
@@ -813,19 +757,12 @@
   }
 
   // Write default tooltip content imperatively (no reactive state)
-  function update_tooltip_content(
-    td: HTMLElement,
-    x_idx: number,
-    y_idx: number,
-  ): void {
+  function update_tooltip_content(td: HTMLElement, x_idx: number, y_idx: number): void {
     const x_label = x_items[x_idx]?.label ?? ``
     const y_label = y_items[y_idx]?.label ?? ``
     const val = get_value(x_idx, y_idx)
-    const value_str = val == null
-      ? ``
-      : typeof val === `number`
-      ? format_num(val)
-      : String(val)
+    const value_str =
+      val == null ? `` : typeof val === `number` ? format_num(val) : String(val)
     td.textContent = value_str
       ? `${x_label} - ${y_label}: ${value_str}`
       : `${x_label} - ${y_label}`
@@ -848,7 +785,7 @@
 
     // Defer bindable writes out of the hot mouseover path
     cancel_raf(active_cell_raf)
-    active_cell_raf = schedule_raf(() => {
+    active_cell_raf = globalThis.requestAnimationFrame(() => {
       active_cell = { x_idx, y_idx }
     })
 
@@ -873,14 +810,14 @@
     // Clear active state imperatively
     last_hover_x = -1
     last_hover_y = -1
-    const keep_tooltip_visible = tooltip_mode === `pinned` ||
-      (tooltip_mode === `both` && pinned_cell !== null)
+    const keep_tooltip_visible =
+      tooltip_mode === `pinned` || (tooltip_mode === `both` && pinned_cell !== null)
     if (!keep_tooltip_visible) {
       tooltip_div?.classList.remove(`visible`)
     }
     // Defer reactive cleanup to rAF
     cancel_raf(active_cell_raf)
-    active_cell_raf = schedule_raf(() => {
+    active_cell_raf = globalThis.requestAnimationFrame(() => {
       active_cell = null
       if (!keep_tooltip_visible) tooltip_cell = null
     })
@@ -901,7 +838,6 @@
         else update_tooltip_content(tooltip_div, x_idx, y_idx)
       }
     }
-    if (!onclick) return
     trigger_click(cell_context)
   }
 
@@ -909,8 +845,20 @@
     if (disabled || !ondblclick) return
     const cell_context = get_cell_context_from_target(event.target)
     if (!cell_context) return
+    // With onclick, require a matching pending click (FilePicker pattern).
+    // ondblclick-only stays direct so orphaned dblclicks still work.
+    if (!onclick) {
+      clear_pending_click()
+      ondblclick(cell_context)
+      return
+    }
+    const pending = pending_click_key
     clear_pending_click()
-    ondblclick(cell_context)
+    if (pending === cell_pos_key(cell_context.x_idx, cell_context.y_idx)) {
+      ondblclick(cell_context)
+    } else {
+      schedule_single_click(cell_context)
+    }
   }
 
   function handle_contextmenu(event: MouseEvent): void {
@@ -982,10 +930,7 @@
     for (let step_idx = 0; step_idx < max_steps; step_idx++) {
       next_x += x_step
       next_y += y_step
-      if (
-        next_x < 0 || next_y < 0 || next_x >= x_items.length ||
-        next_y >= y_items.length
-      ) {
+      if (next_x < 0 || next_y < 0 || next_x >= x_items.length || next_y >= y_items.length) {
         return
       }
       if (is_hidden_cell(next_x, next_y)) continue
@@ -1075,26 +1020,22 @@
   let legend_orientation = $derived<ColorBarOrientation>(
     legend_position === `right` ? `vertical` : `horizontal`,
   )
-  let legend_wrapper_style = $derived.by(() =>
+  let legend_wrapper_style = $derived(
     legend_position === `right`
       ? `--cbar-height: 120px; --cbar-min-height: 120px; --cbar-max-height: 120px;`
-      : `--cbar-width: 180px;`
+      : `--cbar-width: 180px;`,
   )
 
   let has_interaction_handlers = $derived(
     !disabled &&
-      (
-        Boolean(onclick) ||
+      (Boolean(onclick) ||
         Boolean(ondblclick) ||
         Boolean(oncontextmenu) ||
         selection_mode !== `single` ||
-        tooltip_mode !== `hover`
-      ),
+        tooltip_mode !== `hover`),
   )
   let cell_tag_name = $derived(has_interaction_handlers ? `button` : `div`)
-  let cell_class_name = $derived(
-    has_interaction_handlers ? `cell interactive` : `cell`,
-  )
+  let cell_class_name = $derived(has_interaction_handlers ? `cell interactive` : `cell`)
 
   // Tooltip state: only used for custom tooltip snippets (function tooltips)
   let tooltip_cell: CellContext | null = $state(null)
@@ -1103,7 +1044,8 @@
     keys_a.length === keys_b.length && keys_a.every((key, idx) => key === keys_b[idx])
   let prev_axis_keys: { x: string[]; y: string[] } | null = null
   $effect(() => {
-    const changed = prev_axis_keys !== null &&
+    const changed =
+      prev_axis_keys !== null &&
       !(keys_equal(x_keys, prev_axis_keys.x) && keys_equal(y_keys, prev_axis_keys.y))
     prev_axis_keys = { x: x_keys, y: y_keys }
     if (!changed) return
@@ -1124,11 +1066,8 @@
 
   onMount(() => {
     update_viewport_state()
-    if (!is_browser) return
     globalThis.addEventListener(`mouseup`, handle_mouseup)
-    return () => {
-      globalThis.removeEventListener(`mouseup`, handle_mouseup)
-    }
+    return () => globalThis.removeEventListener(`mouseup`, handle_mouseup)
   })
 
   onDestroy(() => {
@@ -1151,8 +1090,8 @@
       bind:search_query
       {export_formats}
       onexport={onexport
-      ? (fmt: HeatmapExportFormat) => onexport(fmt, build_export_payload(fmt))
-      : undefined}
+        ? (fmt: HeatmapExportFormat) => onexport(fmt, build_export_payload(fmt))
+        : undefined}
       toggle_visible
       children={controls_children}
       {...controls_props}
@@ -1161,12 +1100,14 @@
   <div
     {...rest}
     bind:this={matrix_el}
-    class="grid theme-{theme} {rest.class ?? ``}"
+    class={[`grid`, `theme-${theme}`, rest.class]}
     style:--n-cols={gaps_mode ? x_items.length : grid_col_count}
     style:--n-rows={gaps_mode ? y_items.length : grid_row_count}
-    style:--extra-right-y={(use_side_split_y_labels || symmetric === `upper`) ? 1 : 0}
+    style:--extra-right-y={use_side_split_y_labels || symmetric === `upper` ? 1 : 0}
     style:--extra-bottom-x={use_side_split_x_labels ? 1 : 0}
-    style:--right-y-track={(use_side_split_y_labels || symmetric === `upper`) ? `max-content` : `0`}
+    style:--right-y-track={use_side_split_y_labels || symmetric === `upper`
+      ? `max-content`
+      : `0`}
     style:--bottom-x-track={use_side_split_x_labels ? `max-content` : `0`}
     style:--tile-size={tile_size}
     style:--heatmap-gridline-color={gridline_color}
@@ -1199,7 +1140,7 @@
           class:highlighted={highlight_x_by_idx.has(x_idx)}
           class:sticky={sticky_x_labels}
           style={label_style || undefined}
-          style:grid-column={x_label_grid_col(x_idx)}
+          style:grid-column={cell_grid_col(x_idx)}
           style:grid-row={x_label_grid_row(x_idx)}
           title={x_label_cell ? undefined : item.label}
         >
@@ -1223,7 +1164,7 @@
           class:highlighted={highlight_y_by_idx.has(y_idx)}
           class:sticky={sticky_y_labels}
           style={label_style || undefined}
-          style:grid-row={y_label_edge_grid_row(y_idx)}
+          style:grid-row={cell_grid_row(y_idx)}
           style:grid-column={y_label_grid_col(y_idx)}
           title={y_label_cell ? undefined : y_item.label}
         >
@@ -1241,6 +1182,11 @@
         {@const bg = bg_flat[flat_idx]}
         {@const should_render = !is_hidden_cell(x_idx, y_idx)}
         {#if should_render}
+          {@const raw = get_value(x_idx, y_idx)}
+          <!-- missing-state must match bg_flat, which colors from the transformed value -->
+          {@const cell_missing = cell_is_missing(
+            typeof raw === `number` ? get_transformed_value(x_idx, y_idx) : raw,
+          )}
           <svelte:element
             this={cell_tag_name}
             class={cell_class_name}
@@ -1249,6 +1195,7 @@
             class:animated={animate_updates}
             data-x={x_idx}
             data-y={y_idx}
+            style={cell_missing ? missing.style : undefined}
             style:background-color={bg}
             style:color={text_flat?.[flat_idx]}
             style:--heatmap-selected-outline-color={selected_outline_flat[flat_idx]}
@@ -1257,15 +1204,14 @@
           >
             {#if cell}
               {@render cell(build_cell_context(x_idx, y_idx))}
-            {:else if show_values}
-              {@const raw = get_value(x_idx, y_idx)}
-              {#if raw !== null}
-                <span class="cell-value">{
-                  typeof raw === `number`
+            {:else if cell_missing}
+              {#if missing.label}<span class="cell-value">{missing.label}</span>{/if}
+            {:else if show_values && raw !== null}
+              <span class="cell-value"
+                >{typeof raw === `number`
                   ? format_num(raw, show_values === true ? `.3~g` : show_values)
-                  : raw
-                }</span>
-              {/if}
+                  : raw}</span
+              >
             {/if}
           </svelte:element>
         {:else}
@@ -1273,8 +1219,7 @@
             class="cell empty"
             style:grid-column={cell_grid_col(x_idx)}
             style:grid-row={cell_grid_row(y_idx)}
-          >
-          </div>
+          ></div>
         {/if}
       {/each}
     {/each}
@@ -1379,25 +1324,17 @@
   .grid {
     display: grid;
     grid-template-columns:
-      max-content repeat(
-      var(--n-cols),
-      minmax(var(--tile-size, 6px), 1fr)
-    ) var(--right-y-track, 0);
+      max-content repeat(var(--n-cols), minmax(var(--tile-size, 6px), 1fr))
+      var(--right-y-track, 0);
     grid-template-rows:
-      max-content repeat(
-      var(--n-rows),
-      minmax(var(--tile-size, 6px), 1fr)
-    ) var(--bottom-x-track, 0);
+      max-content repeat(var(--n-rows), minmax(var(--tile-size, 6px), 1fr))
+      var(--bottom-x-track, 0);
     position: relative;
     width: min(100%, var(--heatmap-max-width, 1200px));
     max-width: var(--heatmap-max-width, 1200px);
     aspect-ratio: calc(
-      (
-        var(--n-cols) + 1 + var(--extra-right-y, 0)
-      )
-        / (
-        var(--n-rows) + 1 + var(--extra-bottom-x, 0)
-      )
+      (var(--n-cols) + 1 + var(--extra-right-y, 0)) /
+        (var(--n-rows) + 1 + var(--extra-bottom-x, 0))
     );
     overflow: auto;
     &.theme-publication {
@@ -1527,10 +1464,7 @@
     display: none;
     position: fixed;
     transform: none;
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.85))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.85)));
     color: var(--tooltip-color, light-dark(#222, #eee));
     padding: var(--tooltip-padding, 4px 6px);
     border-radius: var(--tooltip-border-radius, var(--border-radius, 3pt));