matterviz 0.3.6 → 0.4.0

package/dist/src/lib/plot/BinnedScatterPlot.svelte

@@ -1,1114 +0,0 @@
-<script module lang="ts">
-  let next_clip_id = 0
-</script>
-
-<script
-  lang="ts"
-  generics="Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>"
->
-  import Icon from '$lib/Icon.svelte'
-  import { format_value } from '$lib/labels'
-  import { FullscreenToggle, set_fullscreen_bg } from '$lib/layout'
-  import type { Point2D, Vec2 } from '$lib/math'
-  import { create_pulse_animation } from '$lib/effects.svelte'
-  import ColorBar from '$lib/plot/ColorBar.svelte'
-  import PlotAxis from '$lib/plot/PlotAxis.svelte'
-  import PlotTooltip from '$lib/plot/PlotTooltip.svelte'
-  import ZoomRect from '$lib/plot/ZoomRect.svelte'
-  import { compute_element_placement, filter_padding } from '$lib/plot/layout'
-  import type { Sides } from '$lib/plot/layout'
-  import {
-    build_pick_index,
-    bin_points,
-    density_bin_at_point,
-    first_point_in_bin,
-    get_metadata_at,
-    pick_from_index,
-    range_bounds,
-    series_extents,
-    should_render_points,
-    type DensityBin,
-    type DenseInternalPoint,
-    type DensePointSeries,
-  } from '$lib/plot/adaptive-density'
-  import { create_color_scale, create_scale, create_size_scale, generate_ticks } from '$lib/plot/scales'
-  import type { AxisConfig, DataSeries, InternalPoint, ScatterHandlerProps } from '$lib/plot/types'
-  import {
-    compute_label_positions,
-    estimate_label_size,
-    label_leader_segment,
-    type LabelSize,
-  } from '$lib/plot/utils/label-placement'
-  import type { ComponentProps, Snippet } from 'svelte'
-  import { onMount, tick } from 'svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
-  import type {
-    BinnedColorScaleConfig,
-    BinnedDensityConfig,
-    BinnedOverlaysConfig,
-    BinnedPointDataFn,
-    BinnedPointLabelsConfig,
-    BinnedPointPayload,
-    BinnedPointTooltipPayload,
-    BinnedSizeScaleConfig,
-  } from './binned-scatter-types'
-
-  type RenderMode = `density` | `points`
-  type DensePointEvent = {
-    point: DenseInternalPoint<Metadata>
-    event: MouseEvent
-    color?: string
-    point_data?: PointData
-  }
-  type DensityZoomEvent = {
-    bin: DensityBin
-    event: MouseEvent
-  }
-  type OverlayContext = { height: number; width: number; fullscreen: boolean }
-  const default_color_bar_size = { width: 220, height: 10 }
-  const default_density_auto_point_mode = { max_points: 25_000, max_points_per_px: 0.12 }
-  const default_density_color_bar: ComponentProps<typeof ColorBar> = { title: `Density` }
-  const default_density_color_scale = {
-    type: `linear`,
-    scheme: `interpolateViridis`,
-  } satisfies Exclude<BinnedColorScaleConfig, string>
-  const default_pad = { l: 64, r: 24, t: 24, b: 56 }
-  const default_point_radius_range: [number, number] = [4, 12]
-  const default_pick_radius = default_point_radius_range[1]
-  const default_size_scale = {
-    type: `linear`,
-    radius_range: default_point_radius_range,
-    pick_radius: default_pick_radius,
-  } satisfies BinnedSizeScaleConfig
-  const max_placement_bins = 500
-  const default_point_color = `#4dabf7`
-
-  let {
-    series,
-    x_axis = {},
-    y_axis = {},
-    size_scale = default_size_scale,
-    density: density_config = {},
-    overlays: overlays_config = {},
-    padding: padding_config = {},
-    tooltip,
-    point_data,
-    point_labels = {},
-    selected_point_id = null,
-    on_point_click,
-    on_density_zoom,
-    render_mode = $bindable<RenderMode>(`density`),
-    wrapper = $bindable(),
-    fullscreen = $bindable(false),
-    fullscreen_toggle = true,
-    children,
-    header_controls,
-    ...rest
-  }: Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
-    series: DensePointSeries<Metadata>[]
-    x_axis?: AxisConfig
-    y_axis?: AxisConfig
-    size_scale?: BinnedSizeScaleConfig
-    density?: BinnedDensityConfig
-    overlays?: BinnedOverlaysConfig
-    padding?: Sides
-    tooltip?: Snippet<[BinnedPointTooltipPayload<Metadata, PointData>]>
-    point_data?: BinnedPointDataFn<Metadata, PointData>
-    point_labels?: BinnedPointLabelsConfig<Metadata, PointData>
-    selected_point_id?: string | number | null
-    on_point_click?: (payload: ScatterHandlerProps<Metadata> & DensePointEvent) => void
-    on_density_zoom?: (payload: DensityZoomEvent) => void
-    render_mode?: RenderMode
-    wrapper?: HTMLDivElement
-    fullscreen?: boolean
-    fullscreen_toggle?: boolean
-    children?: Snippet<[OverlayContext]>
-    header_controls?: Snippet<[OverlayContext]>
-  } = $props()
-
-  let canvas = $state<HTMLCanvasElement>()
-  let width = $state(0)
-  let height = $state(0)
-  let x_range = $state<Vec2>([0, 1])
-  let y_range = $state<Vec2>([0, 1])
-  let has_user_range = $state(false)
-  let drag_start = $state<Point2D | null>(null)
-  let drag_current = $state<Point2D | null>(null)
-  let suppress_next_click = false
-  let hovered_bin = $state<DensityBin | null>(null)
-  let hovered_point = $state<DenseInternalPoint<Metadata> | null>(null)
-  let tooltip_pos = $state<Point2D>({ x: 0, y: 0 })
-  let colorbar_element = $state<HTMLDivElement>()
-  let label_measure_root = $state<HTMLDivElement>()
-  let label_sizes = new SvelteMap<string, LabelSize>()
-  const clip_path_id = `binned-scatter-plot-area-${next_clip_id++}`
-
-  let pad = $derived(filter_padding(padding_config, default_pad))
-  let density_settings = $derived({
-    bin_px: density_config.bin_px ?? 2.8,
-    color_scale: density_config.color_scale ?? default_density_color_scale,
-    color_bar: density_config.color_bar === undefined ? default_density_color_bar : density_config.color_bar,
-    auto_point_mode: density_config.auto_point_mode === undefined
-      ? default_density_auto_point_mode
-      : density_config.auto_point_mode,
-    bin_click: density_config.bin_click ?? `zoom`,
-  })
-  let ref_lines = $derived(overlays_config.ref_lines ?? [])
-  let point_labels_settings = $derived({
-    font_size: point_labels.font_size ?? `11px`,
-    max_count: point_labels.max_count ?? 50,
-    gap_px: point_labels.gap_px ?? 3,
-    placement: point_labels.placement ?? {},
-    leaders: {
-      min_length_px: point_labels.leaders?.min_length_px ?? 6,
-    },
-    render: point_labels.render,
-    measure_text: point_labels.measure_text,
-  })
-
-  $effect(() => {
-    set_fullscreen_bg(wrapper, fullscreen, `--binned-scatter-fullscreen-bg`)
-  })
-
-  const selected_pulse = create_pulse_animation(
-    () => selected_point_id != null && render_mode === `points`,
-    { step: 0.035 },
-  )
-
-  const needs_data_range = (range: AxisConfig[`range`] | undefined): boolean =>
-    range?.[0] == null || range?.[1] == null
-
-  let needs_auto_range = $derived(
-    needs_data_range(x_axis.range) || needs_data_range(y_axis.range),
-  )
-  let auto_ranges = $derived(
-    needs_auto_range ? series_extents(series) : { x: [0, 1] as Vec2, y: [0, 1] as Vec2 },
-  )
-  let x_scale_type = $derived(x_axis.scale_type ?? `linear`)
-  let y_scale_type = $derived(y_axis.scale_type ?? `linear`)
-  let has_plot_size = $derived(width > 0 && height > 0)
-
-  const axis_range = (axis: AxisConfig, fallback: Vec2): Vec2 => [
-    axis.range?.[0] ?? fallback[0],
-    axis.range?.[1] ?? fallback[1],
-  ]
-  const same_range = (a: Vec2, b: Vec2): boolean => a[0] === b[0] && a[1] === b[1]
-
-  function set_auto_range() {
-    const next_x_range = axis_range(x_axis, auto_ranges.x)
-    const next_y_range = axis_range(y_axis, auto_ranges.y)
-    if (!same_range(x_range, next_x_range)) x_range = next_x_range
-    if (!same_range(y_range, next_y_range)) y_range = next_y_range
-  }
-
-  $effect(() => {
-    if (has_user_range) return
-    set_auto_range()
-  })
-
-  let plot_width = $derived(Math.max(1, width - pad.l - pad.r))
-  let plot_height = $derived(Math.max(1, height - pad.t - pad.b))
-  let plot_rect = $derived({
-    x: pad.l,
-    y: pad.t,
-    width: plot_width,
-    height: plot_height,
-  })
-  let x_scale_fn = $derived(create_scale(x_scale_type, x_range, [
-    pad.l,
-    width - pad.r,
-  ]))
-  let y_scale_fn = $derived(create_scale(y_scale_type, y_range, [
-    height - pad.b,
-    pad.t,
-  ]))
-  let x_ticks = $derived(
-    generate_ticks(x_range, x_scale_type, x_axis.ticks, x_scale_fn, {
-      default_count: 7,
-    }),
-  )
-  let y_ticks = $derived(
-    generate_ticks(y_range, y_scale_type, y_axis.ticks, y_scale_fn, {
-      default_count: 6,
-    }),
-  )
-  let density_bins = $derived({
-    x: Math.max(8, Math.ceil(plot_width / density_settings.bin_px)),
-    y: Math.max(8, Math.ceil(plot_height / density_settings.bin_px)),
-  })
-  let density_result = $derived(
-    bin_points(has_plot_size ? series : [], x_range, y_range, density_bins.x, density_bins.y),
-  )
-  let auto_color_range = $derived<Vec2>([1, Math.max(1, density_result.max_count)])
-  let color_scale_fn = $derived(create_color_scale(density_settings.color_scale, auto_color_range))
-  let hovered_bin_color = $derived(hovered_bin ? color_scale_fn(hovered_bin.count) : undefined)
-  let color_scale_type = $derived(
-    typeof density_settings.color_scale === `string` ? undefined : density_settings.color_scale.type,
-  )
-  let color_bar_props = $derived.by((): ComponentProps<typeof ColorBar> | null => {
-    const color_bar = density_settings.color_bar
-    if (!color_bar) return null
-    return {
-      ...color_bar,
-      scale_type: color_bar.scale_type ?? color_scale_type,
-      title: `${color_bar.title ?? `Density`} (${density_result.visible_count.toLocaleString()} points)`,
-      tick_format: color_bar.tick_format ?? `.2~s`,
-      tick_labels: color_bar.tick_labels ?? 4,
-      tick_side: color_bar.tick_side ?? `primary`,
-      bar_style: color_bar.bar_style ??
-        `width: ${default_color_bar_size.width}px; height: ${default_color_bar_size.height}px; ${color_bar.style ?? ``}`,
-    }
-  })
-  let density_placement_points = $derived.by(() => {
-    const points: Point2D[] = []
-    const bin_w = plot_width / density_result.x_bins
-    const bin_h = plot_height / density_result.y_bins
-    let occupied_count = 0
-    for (let idx = 0; idx < density_result.counts.length; idx++) {
-      if (density_result.counts[idx]) occupied_count++
-    }
-    const stride = Math.max(1, Math.ceil(occupied_count / max_placement_bins))
-    let occupied_idx = 0
-    for (let idx = 0; idx < density_result.counts.length; idx++) {
-      if (!density_result.counts[idx]) continue
-      if (occupied_idx++ % stride) continue
-      const x_bin = idx % density_result.x_bins
-      const y_bin = Math.floor(idx / density_result.x_bins)
-      points.push({
-        x: pad.l + (x_bin + 0.5) * bin_w,
-        y: pad.t + (density_result.y_bins - y_bin - 0.5) * bin_h,
-      })
-    }
-    return points
-  })
-  let color_bar_placement = $derived.by(() => {
-    if (
-      !color_bar_props ||
-      render_mode !== `density` ||
-      density_result.max_count <= 0 ||
-      !width ||
-      !height
-    ) {
-      return null
-    }
-
-    const is_vertical = color_bar_props?.orientation === `vertical`
-    // Fallback sizes (incl. room for tick labels) used before the colorbar first
-    // renders; compute_element_placement measures the real footprint once laid out
-    const fallback_size = is_vertical
-      ? { width: 56, height: 120 }
-      : { width: default_color_bar_size.width, height: 50 }
-
-    return compute_element_placement({
-      plot_bounds: plot_rect,
-      element: colorbar_element,
-      element_size: fallback_size,
-      // Small gap from the corner; the full-footprint measurement reserves the tick
-      // labels, so this alone keeps the colorbar off the axes
-      axis_clearance: 12,
-      points: density_placement_points,
-      grid_resolution: 12,
-    })
-  })
-
-  let auto_render_mode = $derived.by((): RenderMode => {
-    const auto_point_mode = density_settings.auto_point_mode
-    if (auto_point_mode === false) return render_mode
-    return should_render_points(
-        density_result.visible_count,
-        plot_width * plot_height,
-        auto_point_mode.max_points ?? default_density_auto_point_mode.max_points,
-        auto_point_mode.max_points_per_px ?? default_density_auto_point_mode.max_points_per_px,
-      )
-      ? `points`
-      : `density`
-  })
-  let all_size_values = $derived.by(() => {
-    const values: number[] = []
-    for (const srs of series) {
-      if (!srs.size_values) continue
-      for (let idx = 0; idx < srs.size_values.length; idx++) {
-        const size_value = srs.size_values[idx]
-        if (size_value == null || !Number.isFinite(size_value)) continue
-        values.push(size_value)
-      }
-    }
-    return values
-  })
-  let size_scale_fn = $derived(create_size_scale(size_scale, all_size_values))
-  let min_point_radius = $derived(size_scale.radius_range?.[0] ?? default_point_radius_range[0])
-  let max_point_radius = $derived(size_scale.radius_range?.[1] ?? default_point_radius_range[1])
-  let pick_radius_px = $derived(
-    size_scale.pick_radius === `auto`
-      ? max_point_radius
-      : size_scale.pick_radius ?? default_pick_radius,
-  )
-
-  $effect(() => {
-    if (!has_plot_size) return
-    if (density_settings.auto_point_mode !== false) render_mode = auto_render_mode
-  })
-  let pick_index = $derived(
-    render_mode === `points`
-      ? build_pick_index(series, {
-          x_range,
-          y_range,
-          x_scale: x_scale_fn,
-          y_scale: y_scale_fn,
-          radius_px: pick_radius_px,
-        })
-      : null,
-  )
-  let actual_label_placement_config = $derived({
-    sa_iterations: 2000,
-    max_labels: 300,
-    leader_line_threshold: 15,
-    candidate_gap: 0,
-    ...point_labels_settings.placement,
-  })
-
-  const reset_view = () => {
-    has_user_range = false
-    set_auto_range()
-  }
-
-  function point_radius_for_value(size_value: number | null | undefined): number {
-    if (size_value == null || !Number.isFinite(size_value)) {
-      return min_point_radius
-    }
-    return size_scale_fn(size_value)
-  }
-
-  function resize_canvas() {
-    if (!canvas) return
-    const dpr = globalThis.devicePixelRatio || 1
-    canvas.width = Math.max(1, Math.round(width * dpr))
-    canvas.height = Math.max(1, Math.round(height * dpr))
-    canvas.style.width = `${width}px`
-    canvas.style.height = `${height}px`
-  }
-
-  function draw_density(ctx: CanvasRenderingContext2D) {
-    const bin_w = plot_width / density_result.x_bins
-    const bin_h = plot_height / density_result.y_bins
-    const style_cache = new Map<number, { fill: string; alpha: number }>()
-    for (let y_bin = 0; y_bin < density_result.y_bins; y_bin++) {
-      for (let x_bin = 0; x_bin < density_result.x_bins; x_bin++) {
-        const count = density_result.counts[y_bin * density_result.x_bins + x_bin]
-        if (!count) continue
-        let style = style_cache.get(count)
-        if (!style) {
-          style = {
-            fill: color_scale_fn(count),
-            alpha: Math.min(0.95, 0.2 + Math.log1p(count) / Math.log1p(density_result.max_count)),
-          }
-          style_cache.set(count, style)
-        }
-        ctx.fillStyle = style.fill
-        ctx.globalAlpha = style.alpha
-        ctx.fillRect(
-          pad.l + x_bin * bin_w,
-          pad.t + (density_result.y_bins - y_bin - 1) * bin_h,
-          Math.ceil(bin_w) + 0.5,
-          Math.ceil(bin_h) + 0.5,
-        )
-      }
-    }
-    ctx.globalAlpha = 1
-  }
-
-  function draw_points(ctx: CanvasRenderingContext2D) {
-    const [x_min, x_max] = range_bounds(x_range)
-    const [y_min, y_max] = range_bounds(y_range)
-    const pulse = selected_pulse.unit
-    for (const [series_idx, srs] of series.entries()) {
-      ctx.fillStyle = srs.color ?? default_point_color
-      const n_points = Math.min(srs.x.length, srs.y.length)
-      for (let point_idx = 0; point_idx < n_points; point_idx++) {
-        const x = srs.x[point_idx]
-        const y = srs.y[point_idx]
-        if (!Number.isFinite(x) || !Number.isFinite(y)) continue
-        if (x < x_min || x > x_max || y < y_min || y > y_max) continue
-        const cx = x_scale_fn(x)
-        const cy = y_scale_fn(y)
-        const point_id = srs.point_ids?.[point_idx]
-        const is_selected = selected_point_id != null && point_id === selected_point_id
-        const radius = point_radius_for_value(srs.size_values?.[point_idx])
-        const is_hovered =
-          hovered_point?.series_idx === series_idx && hovered_point?.point_idx === point_idx
-        ctx.globalAlpha = is_selected || is_hovered ? 1 : 0.65
-        ctx.beginPath()
-        ctx.arc(cx, cy, radius * (is_selected ? 1.08 + 0.08 * pulse : 1), 0, 2 * Math.PI)
-        ctx.fill()
-        if (is_selected) {
-          ctx.globalAlpha = 0.35 + 0.25 * pulse
-          ctx.strokeStyle = srs.color ?? default_point_color
-          ctx.lineWidth = 1.5 + pulse
-          ctx.beginPath()
-          ctx.arc(cx, cy, radius * (1.45 + 0.25 * pulse), 0, 2 * Math.PI)
-          ctx.stroke()
-        }
-      }
-    }
-    ctx.globalAlpha = 1
-  }
-
-  $effect(() => {
-    if (!canvas || width <= 0 || height <= 0) return
-    resize_canvas()
-    const ctx = canvas.getContext(`2d`)
-    if (!ctx) return
-    const dpr = globalThis.devicePixelRatio || 1
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-    ctx.clearRect(0, 0, width, height)
-    ctx.save()
-    ctx.beginPath()
-    ctx.rect(pad.l, pad.t, plot_width, plot_height)
-    ctx.clip()
-    if (render_mode === `points`) draw_points(ctx)
-    else draw_density(ctx)
-    ctx.restore()
-  })
-
-  function pointer_coords(event: PointerEvent | MouseEvent): Point2D | null {
-    if (!wrapper) return null
-    const rect = wrapper.getBoundingClientRect()
-    return { x: event.clientX - rect.left, y: event.clientY - rect.top }
-  }
-
-  function pick_at(coords: Point2D | null): DenseInternalPoint<Metadata> | null {
-    if (!coords || !pick_index) return null
-    return pick_from_index(pick_index, coords)
-  }
-
-  function clear_hover() {
-    hovered_bin = null
-    hovered_point = null
-  }
-
-  function handler_props(
-    point: DenseInternalPoint<Metadata>,
-  ): ScatterHandlerProps<Metadata> {
-    return {
-      x: point.x,
-      y: point.y,
-      cx: point.cx,
-      cy: point.cy,
-      metadata: point.metadata,
-      label: series[point.series_idx]?.label ?? null,
-      series_idx: point.series_idx,
-      x_axis,
-      y_axis,
-      x_formatted: format_value(point.x, x_axis.format ?? `.3~g`),
-      y_formatted: format_value(point.y, y_axis.format ?? `.3~g`),
-    }
-  }
-
-  function point_color(point: DenseInternalPoint<Metadata>): string {
-    return series[point.series_idx]?.color ?? default_point_color
-  }
-
-  function point_label_key(point: DenseInternalPoint<Metadata>): string {
-    return `${point.series_idx}-${point.point_idx}`
-  }
-
-  function make_point(series_idx: number, point_idx: number): DenseInternalPoint<Metadata> {
-    const srs = series[series_idx]
-    const x = srs.x[point_idx]
-    const y = srs.y[point_idx]
-    return {
-      x,
-      y,
-      cx: x_scale_fn(x),
-      cy: y_scale_fn(y),
-      series_idx,
-      point_idx,
-      metadata: get_metadata_at(srs.metadata, point_idx),
-      point_id: srs.point_ids?.[point_idx],
-      size_value: srs.size_values?.[point_idx],
-    }
-  }
-
-  function fallback_label_text(point: DenseInternalPoint<Metadata>): string {
-    return String(point.point_id ?? point_label_key(point))
-  }
-
-  function point_payload(
-    point: DenseInternalPoint<Metadata>,
-    color = point_color(point),
-  ): BinnedPointPayload<Metadata, PointData> {
-    const base_payload = { ...handler_props(point), point, color }
-    return { ...base_payload, point_data: point_data?.(base_payload) ?? undefined }
-  }
-
-  function label_measure_text(payload: BinnedPointPayload<Metadata, PointData>): string {
-    return point_labels_settings.measure_text?.(payload) ?? fallback_label_text(payload.point)
-  }
-
-  function label_size_for_payload(
-    payload: BinnedPointPayload<Metadata, PointData>,
-  ): LabelSize {
-    return label_sizes.get(point_label_key(payload.point)) ??
-      estimate_label_size(label_measure_text(payload), point_labels_settings.font_size)
-  }
-
-  let point_label_payloads = $derived.by(() => {
-    if (!point_labels_settings.render || render_mode !== `points`) return []
-
-    const [x_min, x_max] = range_bounds(x_range)
-    const [y_min, y_max] = range_bounds(y_range)
-    const payloads: BinnedPointPayload<Metadata, PointData>[] = []
-    for (let series_idx = 0; series_idx < series.length; series_idx++) {
-      const srs = series[series_idx]
-      const n_points = Math.min(srs.x.length, srs.y.length)
-      for (let point_idx = 0; point_idx < n_points; point_idx++) {
-        const x = srs.x[point_idx]
-        const y = srs.y[point_idx]
-        if (
-          !Number.isFinite(x) ||
-          !Number.isFinite(y) ||
-          x < x_min ||
-          x > x_max ||
-          y < y_min ||
-          y > y_max
-        ) continue
-        payloads.push(point_payload(make_point(series_idx, point_idx)))
-        if (payloads.length > point_labels_settings.max_count) return []
-      }
-    }
-    return payloads
-  })
-
-  let point_label_positions = $derived.by(() => {
-    if (!point_label_payloads.length) return {}
-
-    const filtered_data: InternalPoint<Metadata>[] = point_label_payloads.map(
-      (payload) => ({
-        ...payload.point,
-        point_label: {
-          text: label_measure_text(payload),
-          auto_placement: true,
-          font_size: point_labels_settings.font_size,
-          size: label_sizes.get(point_label_key(payload.point)),
-        },
-        point_style: {
-          radius: point_radius_for_value(payload.point.size_value) + point_labels_settings.gap_px,
-        },
-      }),
-    )
-    const label_series: DataSeries<Metadata>[] = [{ x: [], y: [], filtered_data }]
-
-    return compute_label_positions(
-      label_series,
-      actual_label_placement_config,
-      { x_scale_fn, y_scale_fn, y2_scale_fn: y_scale_fn, x_axis },
-      { width, height, pad },
-    )
-  })
-
-  async function measure_point_labels() {
-    await tick()
-    if (!label_measure_root) return
-
-    const active_keys = new SvelteSet<string>()
-    const measured_elements = label_measure_root.querySelectorAll<HTMLElement>(`[data-label-key]`)
-    for (const element of measured_elements) {
-      const label_key = element.dataset.labelKey
-      if (!label_key) continue
-      const { width: label_width, height: label_height } = element.getBoundingClientRect()
-      if (label_width <= 0 || label_height <= 0) continue
-      active_keys.add(label_key)
-      const current_size = label_sizes.get(label_key)
-      if (current_size?.width === label_width && current_size.height === label_height) continue
-      label_sizes.set(label_key, { width: label_width, height: label_height })
-    }
-
-    for (const label_key of label_sizes.keys()) {
-      if (!active_keys.has(label_key)) label_sizes.delete(label_key)
-    }
-  }
-
-  $effect(() => {
-    if (!label_measure_root || !point_label_payloads.length) return
-    void measure_point_labels()
-  })
-
-  function label_leader_line(
-    payload: BinnedPointPayload<Metadata, PointData>,
-    label_position: Point2D,
-  ): { x1: number; y1: number; x2: number; y2: number } | null {
-    const displacement = Math.hypot(label_position.x - payload.cx, label_position.y - payload.cy)
-    if (displacement <= (actual_label_placement_config.leader_line_threshold ?? 15)) {
-      return null
-    }
-    return label_leader_segment({
-      point: { x: payload.cx, y: payload.cy },
-      point_radius: point_radius_for_value(payload.point.size_value),
-      label_center: label_position,
-      label_size: label_size_for_payload(payload),
-      min_length: point_labels_settings.leaders.min_length_px,
-    })
-  }
-
-  function point_tooltip_props(
-    point: DenseInternalPoint<Metadata>,
-  ): BinnedPointTooltipPayload<Metadata, PointData> {
-    return point_payload(point)
-  }
-
-  function on_pointer_move(event: PointerEvent) {
-    const coords = pointer_coords(event)
-    if (coords) tooltip_pos = { x: coords.x + 12, y: coords.y + 8 }
-
-    if (!coords) {
-      clear_hover()
-      return
-    }
-
-    if (render_mode === `density`) {
-      hovered_point = null
-      const bin = density_bin_at_point(density_result, coords, plot_rect, x_range, y_range)
-      if (
-        hovered_bin?.x_bin !== bin?.x_bin ||
-        hovered_bin?.y_bin !== bin?.y_bin ||
-        hovered_bin?.count !== bin?.count
-      ) hovered_bin = bin
-      return
-    }
-
-    hovered_bin = null
-    const point = pick_at(coords)
-    if (
-      hovered_point?.series_idx !== point?.series_idx ||
-      hovered_point?.point_idx !== point?.point_idx
-    ) hovered_point = point
-  }
-
-  function emit_point_click(
-    point: DenseInternalPoint<Metadata>,
-    event: MouseEvent,
-    color = series[point.series_idx]?.color,
-  ) {
-    on_point_click?.({
-      ...point_payload(point, color),
-      event,
-    })
-  }
-
-  function zoom_to_bin(bin: DensityBin, event: MouseEvent) {
-    x_range = bin.x_range
-    y_range = bin.y_range
-    has_user_range = true
-    hovered_bin = null
-    on_density_zoom?.({ bin, event })
-  }
-
-  function on_click(event: MouseEvent) {
-    if (suppress_next_click) {
-      suppress_next_click = false
-      return
-    }
-
-    const coords = pointer_coords(event)
-    if (!coords) return
-
-    if (render_mode === `density`) {
-      const bin = density_bin_at_point(density_result, coords, plot_rect, x_range, y_range)
-      if (!bin) return
-      if (density_settings.bin_click === `none`) return
-      if (bin.count > 1 && density_settings.bin_click === `zoom`) {
-        zoom_to_bin(bin, event)
-        return
-      }
-      if (bin.count > 1 && density_settings.bin_click !== `point`) return
-
-      const point = first_point_in_bin(
-        series,
-        density_result,
-        bin,
-        x_scale_fn,
-        y_scale_fn,
-      )
-      if (point) emit_point_click(point, event, color_scale_fn(bin.count))
-      return
-    }
-
-    const point = pick_at(coords)
-    if (!point) return
-    emit_point_click(point, event)
-  }
-
-  function on_pointer_down(event: PointerEvent) {
-    if (event.button !== 0) return
-    const coords = pointer_coords(event)
-    if (!coords) return
-    drag_start = coords
-    drag_current = coords
-    if (event.currentTarget instanceof HTMLElement) {
-      event.currentTarget.setPointerCapture?.(event.pointerId)
-    }
-  }
-
-  function on_pointer_drag(event: PointerEvent) {
-    if (!drag_start) {
-      on_pointer_move(event)
-      return
-    }
-    const coords = pointer_coords(event)
-    if (coords) drag_current = coords
-  }
-
-  function on_pointer_up(event: PointerEvent) {
-    const start = drag_start
-    const end = drag_current
-    drag_start = null
-    drag_current = null
-
-    if (start && end && Math.abs(end.x - start.x) > 5 && Math.abs(end.y - start.y) > 5) {
-      const x0 = x_scale_fn.invert(start.x)
-      const x1 = x_scale_fn.invert(end.x)
-      const y0 = y_scale_fn.invert(start.y)
-      const y1 = y_scale_fn.invert(end.y)
-      x_range = [Math.min(x0, x1), Math.max(x0, x1)]
-      y_range = [Math.min(y0, y1), Math.max(y0, y1)]
-      has_user_range = true
-      suppress_next_click = true
-    }
-
-    if (event.currentTarget instanceof HTMLElement) {
-      event.currentTarget.releasePointerCapture?.(event.pointerId)
-    }
-  }
-
-  onMount(() => {
-    if (!wrapper) return
-    const observer = new ResizeObserver(([entry]) => {
-      width = Math.round(entry.contentRect.width)
-      height = Math.round(entry.contentRect.height)
-    })
-    observer.observe(wrapper)
-    return () => observer.disconnect()
-  })
-</script>
-
-<svelte:window
-  onkeydown={(event) => {
-    if (event.key === `Escape` && fullscreen) {
-      event.preventDefault()
-      fullscreen = false
-    }
-  }}
-/>
-
-<div
-  {...rest}
-  bind:this={wrapper}
-  class="binned-scatter {rest.class ?? ``}"
-  class:fullscreen
-  data-render-mode={render_mode}
-  style:--binned-scatter-label-font-size={point_labels_settings.font_size}
-  onpointermove={on_pointer_drag}
-  onpointerdown={on_pointer_down}
-  onpointerup={on_pointer_up}
-  onmouseleave={clear_hover}
-  onclick={on_click}
-  ondblclick={reset_view}
->
-  {#if width && height}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="header-controls"
-      onpointerdown={(event) => event.stopPropagation()}
-      onclick={(event) => event.stopPropagation()}
-      ondblclick={(event) => event.stopPropagation()}
-    >
-      {@render header_controls?.({ height, width, fullscreen })}
-      {#if has_user_range}
-        <button
-          type="button"
-          class="reset-view"
-          aria-label="Reset view"
-          title="Reset view"
-          onclick={reset_view}
-        >
-          <Icon icon="Reset" width="18" height="18" />
-        </button>
-      {/if}
-      {#if fullscreen_toggle}
-        <FullscreenToggle bind:fullscreen />
-      {/if}
-    </div>
-  {/if}
-
-  <canvas bind:this={canvas}></canvas>
-
-  <svg width={width} height={height} aria-hidden="true">
-    <defs>
-      <clipPath id={clip_path_id}>
-        <rect x={pad.l} y={pad.t} width={plot_width} height={plot_height} />
-      </clipPath>
-    </defs>
-
-    <g class="reference-lines" clip-path="url(#{clip_path_id})">
-      {#each ref_lines as line}
-        <line
-          x1={x_scale_fn(line.x1)}
-          x2={x_scale_fn(line.x2)}
-          y1={y_scale_fn(line.y1)}
-          y2={y_scale_fn(line.y2)}
-          stroke={line.color ?? `currentColor`}
-          stroke-width={line.width ?? 1.5}
-          stroke-dasharray={line.dash ?? `5 4`}
-        />
-      {/each}
-    </g>
-    <PlotAxis
-      side="x"
-      ticks={x_ticks}
-      place={(tick) => x_scale_fn(tick)}
-      axis={x_axis}
-      {pad}
-      {width}
-      {height}
-      show_grid
-      tick_label={(tick) => format_value(tick, x_axis.format ?? `.2~g`)}
-      label_x={pad.l + plot_width / 2}
-      label_y={height - 12}
-    />
-    <PlotAxis
-      side="y"
-      ticks={y_ticks}
-      place={(tick) => y_scale_fn(tick)}
-      axis={y_axis}
-      {pad}
-      {width}
-      {height}
-      show_grid
-      tick_label={(tick) => format_value(tick, y_axis.format ?? `.2~g`)}
-      label_x={22}
-      label_y={pad.t + plot_height / 2}
-    />
-
-    <ZoomRect start={drag_start} current={drag_current} />
-
-    {#if point_label_payloads.length}
-      <g class="point-label-leaders" clip-path="url(#{clip_path_id})">
-        {#each point_label_payloads as payload (point_label_key(payload.point))}
-          {@const label_position = point_label_positions[point_label_key(payload.point)]}
-          {@const leader_line = label_position ? label_leader_line(payload, label_position) : null}
-          {#if leader_line}
-            <line
-              x1={leader_line.x1}
-              y1={leader_line.y1}
-              x2={leader_line.x2}
-              y2={leader_line.y2}
-            />
-          {/if}
-        {/each}
-      </g>
-    {/if}
-  </svg>
-
-  {#if point_labels_settings.render && point_label_payloads.length}
-    <div bind:this={label_measure_root} class="point-label-measurements" aria-hidden="true">
-      {#each point_label_payloads as payload (point_label_key(payload.point))}
-        <div
-          class="point-label point-label-measure"
-          data-label-key={point_label_key(payload.point)}
-        >
-          {@render point_labels_settings.render(payload)}
-        </div>
-      {/each}
-    </div>
-  {/if}
-
-  {#if point_labels_settings.render && point_label_payloads.length}
-    <div class="point-labels">
-      {#each point_label_payloads as payload (point_label_key(payload.point))}
-        {@const label_position = point_label_positions[point_label_key(payload.point)]}
-        {#if label_position}
-          <div
-            class="point-label"
-            style:left={`${label_position.x}px`}
-            style:top={`${label_position.y}px`}
-          >
-            {@render point_labels_settings.render(payload)}
-          </div>
-        {/if}
-      {/each}
-    </div>
-  {/if}
-
-  {#if color_bar_props && render_mode === `density` && density_result.max_count > 0 && color_bar_placement}
-    <div
-      bind:this={colorbar_element}
-      class="color-bar"
-      style:left={`${color_bar_placement.x}px`}
-      style:top={`${color_bar_placement.y}px`}
-    >
-      <ColorBar
-        {...color_bar_props}
-        color_scale_fn={color_scale_fn}
-        color_scale_domain={auto_color_range}
-        range={auto_color_range}
-      />
-    </div>
-  {/if}
-
-  {#if hovered_bin}
-    <PlotTooltip
-      x={tooltip_pos.x}
-      y={tooltip_pos.y}
-      offset={{ x: 0, y: 0 }}
-      bg_color={hovered_bin_color}
-    >
-      {hovered_bin.count.toLocaleString()} samples<br>
-      x: {format_value(hovered_bin.x_range[0], x_axis.format ?? `.3~g`)}
-      - {format_value(hovered_bin.x_range[1], x_axis.format ?? `.3~g`)}<br>
-      y: {format_value(hovered_bin.y_range[0], y_axis.format ?? `.3~g`)}
-      - {format_value(hovered_bin.y_range[1], y_axis.format ?? `.3~g`)}
-    </PlotTooltip>
-  {:else if hovered_point}
-    {@const props = point_tooltip_props(hovered_point)}
-    <PlotTooltip x={tooltip_pos.x} y={tooltip_pos.y} offset={{ x: 0, y: 0 }}>
-      {#if tooltip}
-        {@render tooltip(props)}
-      {:else}
-        {x_axis.label ?? `x`}: {props.x_formatted}<br>
-        {y_axis.label ?? `y`}: {props.y_formatted}
-      {/if}
-    </PlotTooltip>
-  {/if}
-
-  {@render children?.({ height, width, fullscreen })}
-</div>
-
-<style>
-  .binned-scatter {
-    position: relative;
-    min-height: 300px;
-    color: var(--text-color, CanvasText);
-    touch-action: none;
-    user-select: none;
-  }
-  .binned-scatter :global(.axis-label) {
-    color: currentColor;
-    font-size: 13px;
-    font-weight: 600;
-    height: 100%;
-    line-height: 24px;
-    text-align: center;
-    white-space: nowrap;
-    width: 100%;
-  }
-  .binned-scatter.fullscreen {
-    background: var(
-      --binned-scatter-fullscreen-bg,
-      var(--binned-scatter-bg, var(--plot-bg, Canvas))
-    );
-    border-radius: 0;
-    box-sizing: border-box;
-    height: 100vh !important;
-    left: 0;
-    margin: 0;
-    max-height: none !important;
-    overflow: hidden;
-    padding-top: var(--plot-fullscreen-padding-top, 2em);
-    position: fixed;
-    top: 0;
-    width: 100vw !important;
-    z-index: var(--scatter-fullscreen-z-index, var(--z-index-overlay-nav, 100000001));
-  }
-  .header-controls {
-    align-items: center;
-    display: flex;
-    gap: 8px;
-    opacity: 0;
-    position: absolute;
-    right: var(--fullscreen-btn-right, 4px);
-    top: var(--ctrl-btn-top, 5pt);
-    transition: opacity 0.2s, background-color 0.2s;
-    z-index: var(--fullscreen-btn-z-index, 10);
-  }
-  .header-controls :global(.fullscreen-toggle) {
-    opacity: 1;
-    position: static;
-  }
-  .reset-view {
-    align-items: center;
-    background-color: transparent;
-    border-radius: var(--fullscreen-btn-border-radius, var(--border-radius, 3pt));
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    padding: var(--fullscreen-btn-padding, 2pt);
-  }
-  .reset-view:hover,
-  .reset-view:focus {
-    background-color: color-mix(in srgb, currentColor 8%, transparent);
-  }
-  .binned-scatter:hover .header-controls,
-  .binned-scatter .header-controls:focus-within {
-    opacity: 1;
-  }
-  canvas,
-  svg {
-    inset: 0;
-    position: absolute;
-  }
-  canvas {
-    background: transparent;
-  }
-  svg {
-    overflow: visible;
-    pointer-events: none;
-  }
-  .reference-lines line {
-    opacity: 0.75;
-  }
-  .point-label-leaders line {
-    stroke: var(--binned-scatter-label-leader-color, color-mix(in srgb, currentColor 60%, transparent));
-    stroke-dasharray: var(--binned-scatter-label-leader-dash, 2 2);
-    stroke-width: var(--binned-scatter-label-leader-width, 0.8);
-  }
-  .point-labels {
-    inset: 0;
-    pointer-events: none;
-    position: absolute;
-    z-index: 1;
-  }
-  .point-label-measurements {
-    contain: layout style;
-    inset: 0;
-    pointer-events: none;
-    position: absolute;
-    visibility: hidden;
-    z-index: -1;
-  }
-  .point-label {
-    background: var(--binned-scatter-label-bg, color-mix(in srgb, Canvas 84%, transparent));
-    border: 0 !important;
-    border-radius: var(--binned-scatter-label-radius, 3px);
-    box-shadow: none;
-    color: var(--binned-scatter-label-color, currentColor);
-    font-size: var(--binned-scatter-label-font-size, 11px);
-    line-height: 1.2;
-    outline: 0;
-    padding: var(--binned-scatter-label-padding, 1px 3px);
-    position: absolute;
-    text-align: center;
-    transform: translate(-50%, -50%);
-    white-space: nowrap;
-  }
-  .point-label-measure {
-    left: 0;
-    top: 0;
-    transform: none;
-  }
-  .color-bar {
-    pointer-events: auto;
-    position: absolute;
-  }
-</style>