matterviz 0.4.0 → 0.4.2

package/dist/plot/scatter-3d/ScatterPlot3DScene.svelte

@@ -2,7 +2,6 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
 >
-  import type { D3ColorSchemeName, D3InterpolateName } from '../../colors'
   import { format_num } from '../../labels'
   import type { Vec2, Vec3 } from '../../math'
   import type {
@@ -13,12 +12,14 @@
     InternalPoint3D,
     RefLine3D,
     RefPlane,
-    ScaleType,
     Scatter3DHandlerEvent,
+    SizeScaleConfig,
     StyleOverrides3D,
     Surface3DConfig,
   } from '../core/types'
-  import { T, useTask, useThrelte } from '@threlte/core'
+  import { SCALE_DEFAULTS } from '../core/types'
+  import { bind_renderer } from '../../scene'
+  import { T, useTask } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { scaleLinear } from 'd3-scale'
   import { type ComponentProps, onDestroy, type Snippet, untrack } from 'svelte'
@@ -31,7 +32,7 @@
   import { normalize_to_scene } from '../core/reference-line'
   import ReferenceLine3D from '../core/components/ReferenceLine3D.svelte'
   import ReferencePlane from '../core/components/ReferencePlane.svelte'
-  import { create_color_scale, create_size_scale } from '../core/scales'
+  import { create_size_scale } from '../core/scales'
   import Surface3D from './Surface3D.svelte'
 
   let {
@@ -45,8 +46,8 @@
     surfaces = [],
     ref_lines = [],
     ref_planes = [],
-    color_scale = { type: `linear`, scheme: `interpolateViridis` },
-    size_scale = { type: `linear`, radius_range: [0.05, 0.2] },
+    color_scale_fn = () => get_series_color(0),
+    size_scale = SCALE_DEFAULTS.size_3d,
     camera_position = [10, 10, 10] as Vec3,
     camera_projection = `perspective` as CameraProjection3D,
     auto_rotate = 0,
@@ -81,16 +82,9 @@
     surfaces?: Surface3DConfig[]
     ref_lines?: RefLine3D[]
     ref_planes?: RefPlane[]
-    color_scale?: {
-      type?: ScaleType
-      scheme?: D3ColorSchemeName | D3InterpolateName
-      value_range?: [number, number]
-    }
-    size_scale?: {
-      type?: ScaleType
-      radius_range?: [number, number]
-      value_range?: [number, number]
-    }
+    // Color scale function for color_values (computed once by the ScatterPlot3D wrapper)
+    color_scale_fn?: (value: number) => string
+    size_scale?: SizeScaleConfig
     camera_position?: Vec3
     camera_projection?: CameraProjection3D
     auto_rotate?: number
@@ -116,10 +110,10 @@
     height?: number
   } = $props()
 
-  const threlte = useThrelte()
-  $effect(() => {
-    scene = threlte.scene
-    camera = threlte.camera.current
+  // Mirrors scene/camera into bindable props and tags the canvas so export_canvas_as_png can re-render at export DPI
+  bind_renderer((threlte_scene, threlte_camera) => {
+    scene = threlte_scene
+    camera = threlte_camera
   })
 
   extras.interactivity()
@@ -157,49 +151,47 @@
 
   // Flatten all points from series
   let all_points = $derived(
-    series
-      .filter(Boolean)
-      .flatMap((srs, series_idx) =>
-        srs.x.map((x_val, point_idx) => ({
-          x: x_val,
-          y: srs.y[point_idx],
-          z: srs.z[point_idx],
-          series_idx,
-          point_idx,
-          color_value: srs.color_values?.[point_idx] ?? null,
-          size_value: srs.size_values?.[point_idx] ?? null,
-          metadata: Array.isArray(srs.metadata)
-            ? srs.metadata[point_idx]
-            : srs.metadata,
-          point_style: Array.isArray(srs.point_style)
-            ? srs.point_style[point_idx]
-            : srs.point_style,
-        }))
-      ),
+    series.filter(Boolean).flatMap((srs, series_idx) =>
+      srs.x.map((x_val, point_idx) => ({
+        x: x_val,
+        y: srs.y[point_idx],
+        z: srs.z[point_idx],
+        series_idx,
+        point_idx,
+        color_value: srs.color_values?.[point_idx] ?? null,
+        size_value: srs.size_values?.[point_idx] ?? null,
+        metadata: Array.isArray(srs.metadata) ? srs.metadata[point_idx] : srs.metadata,
+        point_style: Array.isArray(srs.point_style)
+          ? srs.point_style[point_idx]
+          : srs.point_style,
+      })),
+    ),
   )
 
   // Sample surface points for range calculation (10x10 grid)
-  function sample_surface(
-    surface: Surface3DConfig,
-  ): { x: number; y: number; z: number }[] {
-    const n = 10
+  function sample_surface(surface: Surface3DConfig): { x: number; y: number; z: number }[] {
+    const grid_steps = 10
     const pts: { x: number; y: number; z: number }[] = []
     if (surface.type === `grid` && surface.z_fn) {
       const [x0, x1] = surface.x_range ?? [-1, 1]
       const [y0, y1] = surface.y_range ?? [-1, 1]
-      for (let i = 0; i <= n; i++) {
-        for (let j = 0; j <= n; j++) {
-          const x = x0 + (i / n) * (x1 - x0), y = y0 + (j / n) * (y1 - y0)
+      for (let idx_x = 0; idx_x <= grid_steps; idx_x++) {
+        for (let idx_y = 0; idx_y <= grid_steps; idx_y++) {
+          const x = x0 + (idx_x / grid_steps) * (x1 - x0),
+            y = y0 + (idx_y / grid_steps) * (y1 - y0)
           pts.push({ x, y, z: surface.z_fn(x, y) })
         }
       }
     } else if (surface.type === `parametric` && surface.parametric_fn) {
       const [u0, u1] = surface.u_range ?? [0, 1]
       const [v0, v1] = surface.v_range ?? [0, 1]
-      for (let i = 0; i <= n; i++) {
-        for (let j = 0; j <= n; j++) {
+      for (let idx_u = 0; idx_u <= grid_steps; idx_u++) {
+        for (let idx_v = 0; idx_v <= grid_steps; idx_v++) {
           pts.push(
-            surface.parametric_fn(u0 + (i / n) * (u1 - u0), v0 + (j / n) * (v1 - v0)),
+            surface.parametric_fn(
+              u0 + (idx_u / grid_steps) * (u1 - u0),
+              v0 + (idx_v / grid_steps) * (v1 - v0),
+            ),
           )
         }
       }
@@ -209,78 +201,69 @@
     return pts.filter((pt) => isFinite(pt.x) && isFinite(pt.y) && isFinite(pt.z))
   }
 
-  // Compute axis range with D3's nice() for clean boundaries
+  // Compute axis range with D3's nice(); data_min/data_max are the finite extent (Infinity/-Infinity when empty)
   function compute_range(
-    values: number[],
+    [data_min, data_max]: Vec2,
     range?: [number | null, number | null],
   ): Vec2 {
     if (range?.[0] != null && range?.[1] != null) return range as Vec2
-    const valid = values.filter(isFinite)
-    if (valid.length === 0) return [0, 1]
-    let [min, max] = [Math.min(...valid), Math.max(...valid)]
-    const pad = min === max
-      ? (min === 0 ? 1 : Math.abs(min * 0.1))
-      : (max - min) * 0.05
+    if (data_min > data_max) return [0, 1] // no finite values
+    let [min, max] = [data_min, data_max]
+    const pad = min === max ? (min === 0 ? 1 : Math.abs(min * 0.1)) : (max - min) * 0.05
     if (range?.[0] == null) min -= pad
     if (range?.[1] == null) max += pad
-    return scaleLinear().domain([range?.[0] ?? min, range?.[1] ?? max]).nice()
+    return scaleLinear()
+      .domain([range?.[0] ?? min, range?.[1] ?? max])
+      .nice()
       .domain() as Vec2
   }
 
-  // Collect xyz values from points and surfaces
+  // Collect xyz extents from points and surfaces in one pass (no intermediate arrays)
   let surface_samples = $derived(surfaces.flatMap(sample_surface))
-  let x_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.x),
-      ...surface_samples.map((point) => point.x),
-    ], x_axis.range),
-  )
-  let y_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.y),
-      ...surface_samples.map((point) => point.y),
-    ], y_axis.range),
-  )
-  let z_range = $derived(
-    compute_range([
-      ...all_points.map((point) => point.z),
-      ...surface_samples.map((point) => point.z),
-    ], z_axis.range),
-  )
+  let data_extents = $derived.by(() => {
+    const extents = {
+      x: [Infinity, -Infinity] as Vec2,
+      y: [Infinity, -Infinity] as Vec2,
+      z: [Infinity, -Infinity] as Vec2,
+    }
+    for (const points of [all_points, surface_samples]) {
+      for (const pt of points) {
+        for (const axis of [`x`, `y`, `z`] as const) {
+          const val = pt[axis]
+          if (!isFinite(val)) continue
+          const extent = extents[axis]
+          if (val < extent[0]) extent[0] = val
+          if (val > extent[1]) extent[1] = val
+        }
+      }
+    }
+    return extents
+  })
+  let x_range = $derived(compute_range(data_extents.x, x_axis.range))
+  let y_range = $derived(compute_range(data_extents.y, y_axis.range))
+  let z_range = $derived(compute_range(data_extents.z, z_axis.range))
 
   const normalize_x = (value: number) => normalize_to_scene(value, x_range, scene_x)
   const normalize_y = (value: number) => normalize_to_scene(value, y_range, scene_y)
   const normalize_z = (value: number) => normalize_to_scene(value, z_range, scene_z)
 
-  // Color/size scales
-  let all_color_values = $derived(
-    all_points.map((pt) => pt.color_value).filter((val): val is number => val != null),
-  )
-  let auto_color_range: [number, number] = $derived.by(() => {
-    if (all_color_values.length === 0) return [0, 1]
-    let min = all_color_values[0]
-    let max = all_color_values[0]
-    for (const val of all_color_values) {
-      if (val < min) min = val
-      else if (val > max) max = val
-    }
-    return [min, max]
-  })
+  // Size scale (the color scale is computed by the wrapper and passed as a prop)
   let all_size_values = $derived(
     all_points.map((pt) => pt.size_value).filter((val): val is number => val != null),
   )
-  let color_scale_fn = $derived(create_color_scale(color_scale, auto_color_range))
   let size_scale_fn = $derived(create_size_scale(size_scale, all_size_values))
 
   // Process points with normalized positions
   // Swap Y/Z for Three.js: user Z → Three.js Y (vertical), user Y → Three.js Z (depth)
   let processed_points = $derived(
-    all_points.map((pt): InternalPoint3D<Metadata> => ({
-      ...pt,
-      x: normalize_x(pt.x), // user X → Three.js X
-      y: normalize_z(pt.z), // user Z → Three.js Y (vertical)
-      z: normalize_y(pt.y), // user Y → Three.js Z (depth)
-    })),
+    all_points.map(
+      (pt): InternalPoint3D<Metadata> => ({
+        ...pt,
+        x: normalize_x(pt.x), // user X → Three.js X
+        y: normalize_z(pt.z), // user Z → Three.js Y (vertical)
+        z: normalize_y(pt.y), // user Y → Three.js Z (depth)
+      }),
+    ),
   )
 
   // Group points by radius, with per-instance colors
@@ -295,12 +278,14 @@
     for (const pt of processed_points) {
       const srs = series[pt.series_idx]
       if (!(series_visibility[pt.series_idx] ?? srs?.visible ?? true)) continue
-      const color = pt.color_value != null
-        ? color_scale_fn(pt.color_value)
-        : pt.point_style?.fill ?? get_series_color(pt.series_idx)
-      const radius = pt.size_value != null
-        ? size_scale_fn(pt.size_value)
-        : (pt.point_style?.radius ?? styles.point?.size ?? 2) * 0.05
+      const color =
+        pt.color_value != null
+          ? color_scale_fn(pt.color_value)
+          : (pt.point_style?.fill ?? get_series_color(pt.series_idx))
+      const radius =
+        pt.size_value != null
+          ? size_scale_fn(pt.size_value)
+          : (pt.point_style?.radius ?? styles.point?.size ?? 2) * 0.05
       const key = radius.toFixed(4)
       ;(groups[key] ??= { radius, points: [], colors: [] }).points.push(pt)
       groups[key].colors.push(color)
@@ -320,94 +305,113 @@
   let projection_configs = $derived(
     ([`xy`, `xz`, `yz`] as const)
       .filter((key) => display.projections?.[key])
-      .map((key): ProjectionConfig => ({
-        key,
-        get_pos: key === `xy`
-          ? (pt) => [pt.x, pos.y, pt.z]
-          : key === `xz`
-          ? (pt) => [pt.x, pt.y, pos.z]
-          : (pt) => [pos.x, pt.y, pt.z],
-      })),
+      .map(
+        (key): ProjectionConfig => ({
+          key,
+          get_pos:
+            key === `xy`
+              ? (pt) => [pt.x, pos.y, pt.z]
+              : key === `xz`
+                ? (pt) => [pt.x, pt.y, pos.z]
+                : (pt) => [pos.x, pt.y, pt.z],
+        }),
+      ),
   )
 
   // Series line data for connecting points
-  type SeriesLineData = {
+  type SeriesLineInput = {
     series_idx: number
+    positions: number[]
     color: string
     width: number
     dashed: boolean
+  }
+  type SeriesLineData = SeriesLineInput & {
     line2: Line2
     geometry: LineGeometry
     material: LineMaterial
   }
 
-  // Track previous lines for cleanup
-  let series_lines: SeriesLineData[] = $state([])
-
-  $effect(() => {
-    // Dispose old lines before creating new ones
-    for (const line_data of untrack(() => series_lines)) {
-      line_data.geometry.dispose()
-      line_data.material.dispose()
-    }
-
-    const lines: SeriesLineData[] = []
+  // Per-series fat-line inputs (ordered positions + resolved stroke style) as a derived so
+  // the effect below can diff against previous lines and only rebuild what changed
+  let line_inputs = $derived.by((): SeriesLineInput[] => {
+    const eligible: SeriesLineInput[] = []
+    const positions_by_series = new Map<number, number[]>()
     for (let series_idx = 0; series_idx < series.length; series_idx++) {
       const srs = series[series_idx]
-      if (!srs?.line_style) continue
+      const line_style = srs?.line_style
+      if (!line_style) continue
       if (!(series_visibility[series_idx] ?? srs.visible ?? true)) continue
-
-      // Get points for this series in order
-      const series_points = processed_points
-        .filter((pt) => pt.series_idx === series_idx)
-        .sort((a, b) => a.point_idx - b.point_idx)
-
-      if (series_points.length < 2) continue
-
-      // Create fat line geometry (LineGeometry for Line2)
       const positions: number[] = []
-      for (const pt of series_points) {
-        positions.push(pt.x, pt.y, pt.z)
-      }
-      const geometry = new LineGeometry()
-      geometry.setPositions(positions)
-
-      // Determine line style
-      const line_style = srs.line_style
-      const color = line_style.stroke ??
-        (Array.isArray(srs.point_style)
-          ? srs.point_style[0]?.fill
-          : srs.point_style?.fill) ??
+      positions_by_series.set(series_idx, positions)
+      const color =
+        line_style.stroke ??
+        (Array.isArray(srs.point_style) ? srs.point_style[0]?.fill : srs.point_style?.fill) ??
         get_series_color(series_idx)
-      const line_width = line_style.stroke_width ?? 2
-      const dashed = Boolean(line_style.line_dash)
-
-      // Create LineMaterial for fat lines (linewidth is in pixels when resolution is set)
-      // Use placeholder resolution; the separate resolution effect updates it
-      const material = new LineMaterial({
-        color: new THREE.Color(color).getHex(),
-        linewidth: line_width, // Width in pixels
-        dashed,
-        dashScale: dashed ? 2 : 1,
-        dashSize: 0.1,
-        gapSize: 0.05,
-        resolution: new THREE.Vector2(1, 1),
-      })
-
-      const line2 = new Line2(geometry, material)
-      line2.computeLineDistances()
-
-      lines.push({
+      eligible.push({
         series_idx,
+        positions,
         color,
-        width: line_width,
-        dashed,
-        line2,
-        geometry,
-        material,
+        width: line_style.stroke_width ?? 2,
+        dashed: Boolean(line_style.line_dash),
       })
     }
-    series_lines = lines
+    // processed_points are emitted in (series_idx, point_idx) order, so one ordered pass replaces the old per-series filter + sort
+    for (const pt of processed_points) {
+      positions_by_series.get(pt.series_idx)?.push(pt.x, pt.y, pt.z)
+    }
+    return eligible.filter((input) => input.positions.length >= 6) // >= 2 points
+  })
+
+  const same_line_input = (prev: SeriesLineData, next: SeriesLineInput): boolean =>
+    prev.color === next.color &&
+    prev.width === next.width &&
+    prev.dashed === next.dashed &&
+    prev.positions.length === next.positions.length &&
+    prev.positions.every((coord, idx) => coord === next.positions[idx])
+
+  // Track previous lines for reuse/cleanup
+  let series_lines: SeriesLineData[] = $state([])
+
+  $effect(() => {
+    const inputs = line_inputs
+    untrack(() => {
+      const prev_by_idx = new Map(series_lines.map((line) => [line.series_idx, line]))
+      const next_lines = inputs.map((input): SeriesLineData => {
+        const prev = prev_by_idx.get(input.series_idx)
+        if (prev && same_line_input(prev, input)) {
+          prev_by_idx.delete(input.series_idx) // reused - don't dispose below
+          return prev
+        }
+        // Create fat line geometry (LineGeometry for Line2)
+        const geometry = new LineGeometry()
+        geometry.setPositions(input.positions)
+        // Create LineMaterial for fat lines (linewidth is in pixels when resolution
+        // is set). Use placeholder resolution; the separate resolution effect updates it
+        const material = new LineMaterial({
+          color: new THREE.Color(input.color).getHex(),
+          linewidth: input.width, // Width in pixels
+          dashed: input.dashed,
+          dashScale: input.dashed ? 2 : 1,
+          dashSize: 0.1,
+          gapSize: 0.05,
+          resolution: new THREE.Vector2(1, 1),
+        })
+        const line2 = new Line2(geometry, material)
+        line2.computeLineDistances()
+        return { ...input, line2, geometry, material }
+      })
+      // Dispose lines that were replaced or removed
+      for (const stale of prev_by_idx.values()) {
+        stale.geometry.dispose()
+        stale.material.dispose()
+      }
+      // Skip reassignment when every line was reused to avoid invalidating consumers
+      const unchanged =
+        next_lines.length === series_lines.length &&
+        next_lines.every((line, idx) => line === series_lines[idx])
+      if (!unchanged) series_lines = next_lines
+    })
   })
 
   // Update LineMaterial resolution when canvas size changes
@@ -433,10 +437,7 @@
   })
 
   // Generate axis ticks using D3's smart tick generation
-  function gen_ticks(
-    range: [number, number],
-    ticks?: AxisConfig3D[`ticks`],
-  ): number[] {
+  function gen_ticks(range: Vec2, ticks?: AxisConfig3D[`ticks`]): number[] {
     if (Array.isArray(ticks)) return ticks
     const [min, max] = range
     if (!isFinite(min) || !isFinite(max) || min === max) return [min]
@@ -501,8 +502,8 @@
     gizmo === false
       ? null
       : gizmo === true
-      ? { background: { enabled: false }, offset: { left: 5, bottom: 5 } }
-      : gizmo,
+        ? { background: { enabled: false }, offset: { left: 5, bottom: 5 } }
+        : gizmo,
   )
 
   // Orbit controls - snappy with minimal inertia
@@ -557,19 +558,25 @@
       ticks: x_ticks,
       range: x_range,
       get_tick_pos: (val: number): Vec3 => [normalize_x(val), pos.y, pos.z],
-      get_tick_end: (
-        val: number,
-      ): Vec3 => [normalize_x(val), pos.y + sign_y * tick_length, pos.z],
+      get_tick_end: (val: number): Vec3 => [
+        normalize_x(val),
+        pos.y + sign_y * tick_length,
+        pos.z,
+      ],
       get_grid_lines: (val: number): [Vec3, Vec3][] => {
         const px = normalize_x(val)
         return [
-          [[px, -half_z, pos.z], [px, half_z, pos.z]],
-          [[px, pos.y, -half_y], [px, pos.y, half_y]],
+          [
+            [px, -half_z, pos.z],
+            [px, half_z, pos.z],
+          ],
+          [
+            [px, pos.y, -half_y],
+            [px, pos.y, half_y],
+          ],
         ]
       },
-      tick_label_pos: (
-        val: number,
-      ): Vec3 => [normalize_x(val), pos.y + sign_y * 0.4, pos.z],
+      tick_label_pos: (val: number): Vec3 => [normalize_x(val), pos.y + sign_y * 0.4, pos.z],
       axis_label_pos: [0, pos.y + sign_y * 0.9, pos.z] as Vec3,
     },
     {
@@ -579,19 +586,29 @@
       ticks: y_ticks,
       range: y_range,
       get_tick_pos: (val: number): Vec3 => [pos.x, pos.y, normalize_y(val)],
-      get_tick_end: (
-        val: number,
-      ): Vec3 => [pos.x, pos.y + sign_y * tick_length, normalize_y(val)],
+      get_tick_end: (val: number): Vec3 => [
+        pos.x,
+        pos.y + sign_y * tick_length,
+        normalize_y(val),
+      ],
       get_grid_lines: (val: number): [Vec3, Vec3][] => {
         const py = normalize_y(val)
         return [
-          [[-half_x, pos.y, py], [half_x, pos.y, py]],
-          [[pos.x, -half_z, py], [pos.x, half_z, py]],
+          [
+            [-half_x, pos.y, py],
+            [half_x, pos.y, py],
+          ],
+          [
+            [pos.x, -half_z, py],
+            [pos.x, half_z, py],
+          ],
         ]
       },
-      tick_label_pos: (
-        val: number,
-      ): Vec3 => [pos.x + sign_x * 0.5, pos.y + sign_y * 0.4, normalize_y(val)],
+      tick_label_pos: (val: number): Vec3 => [
+        pos.x + sign_x * 0.5,
+        pos.y + sign_y * 0.4,
+        normalize_y(val),
+      ],
       axis_label_pos: [
         pos.x,
         pos.y + sign_y * 0.9,
@@ -605,19 +622,25 @@
       ticks: z_ticks,
       range: z_range,
       get_tick_pos: (val: number): Vec3 => [pos.x, normalize_z(val), pos.z],
-      get_tick_end: (
-        val: number,
-      ): Vec3 => [pos.x + sign_x * tick_length, normalize_z(val), pos.z],
+      get_tick_end: (val: number): Vec3 => [
+        pos.x + sign_x * tick_length,
+        normalize_z(val),
+        pos.z,
+      ],
       get_grid_lines: (val: number): [Vec3, Vec3][] => {
         const pz = normalize_z(val)
         return [
-          [[-half_x, pz, pos.z], [half_x, pz, pos.z]],
-          [[pos.x, pz, -half_y], [pos.x, pz, half_y]],
+          [
+            [-half_x, pz, pos.z],
+            [half_x, pz, pos.z],
+          ],
+          [
+            [pos.x, pz, -half_y],
+            [pos.x, pz, half_y],
+          ],
         ]
       },
-      tick_label_pos: (
-        val: number,
-      ): Vec3 => [pos.x + sign_x * 0.5, normalize_z(val), pos.z],
+      tick_label_pos: (val: number): Vec3 => [pos.x + sign_x * 0.5, normalize_z(val), pos.z],
       axis_label_pos: [pos.x + sign_x, 0, pos.z] as Vec3,
     },
   ])
@@ -647,10 +670,10 @@
     for (const { key, ticks, get_tick_pos, get_tick_end, get_grid_lines } of config) {
       axis_geom_data[key] = {
         tick_geoms: ticks.map((val) =>
-          create_line_geometry(get_tick_pos(val), get_tick_end(val))
+          create_line_geometry(get_tick_pos(val), get_tick_end(val)),
         ),
         grid_geoms: ticks.map((val) =>
-          get_grid_lines(val).map(([start, end]) => create_line_geometry(start, end))
+          get_grid_lines(val).map(([start, end]) => create_line_geometry(start, end)),
         ),
       }
     }
@@ -722,11 +745,7 @@
         </T.Line>
       {/if}
       {#if display.show_grid !== false}
-        {#each axis_geom_data[key].grid_geoms[tick_idx] ?? [] as
-          grid_geom,
-          grid_idx
-          (grid_idx)
-        }
+        {#each axis_geom_data[key].grid_geoms[tick_idx] ?? [] as grid_geom, grid_idx (grid_idx)}
           <T.Line>
             <T is={grid_geom} />
             <T.LineBasicMaterial color="#888" opacity={0.4} transparent />
@@ -745,27 +764,12 @@
 {/if}
 
 <!-- Surfaces -->
-{#each surfaces.filter((srf) => srf.visible !== false) as
-  surface
-  (surface.id ?? surfaces.indexOf(surface))
-}
-  <Surface3D
-    config={surface}
-    {x_range}
-    {y_range}
-    {z_range}
-    {scene_x}
-    {scene_y}
-    {scene_z}
-  />
+{#each surfaces.filter((srf) => srf.visible !== false) as surface (surface.id ?? surfaces.indexOf(surface))}
+  <Surface3D config={surface} {x_range} {y_range} {z_range} {scene_x} {scene_y} {scene_z} />
 {/each}
 
 <!-- Reference Planes -->
-{#each (ref_planes ?? []).filter((plane) => plane.visible !== false) as
-  ref_plane,
-  plane_idx
-  (ref_plane.id ?? plane_idx)
-}
+{#each (ref_planes ?? []).filter((plane) => plane.visible !== false) as ref_plane, plane_idx (ref_plane.id ?? plane_idx)}
   <ReferencePlane
     {ref_plane}
     scene_size={[scene_x, scene_y, scene_z]}
@@ -774,11 +778,7 @@
 {/each}
 
 <!-- Reference Lines -->
-{#each (ref_lines ?? []).filter((line) => line.visible !== false) as
-  ref_line,
-  line_idx
-  (ref_line.id ?? line_idx)
-}
+{#each (ref_lines ?? []).filter((line) => line.visible !== false) as ref_line, line_idx (ref_line.id ?? line_idx)}
   <ReferenceLine3D
     {ref_line}
     scene_size={[scene_x, scene_y, scene_z]}
@@ -841,9 +841,7 @@
 {#if hovered_point}
   {@const hp = hovered_point}
   {@const group = radius_groups.find((grp) =>
-    grp.points.some((pt) =>
-      pt.series_idx === hp.series_idx && pt.point_idx === hp.point_idx
-    )
+    grp.points.some((pt) => pt.series_idx === hp.series_idx && pt.point_idx === hp.point_idx),
   )}
   <T.Mesh position={[hp.x, hp.y, hp.z]} scale={(group?.radius ?? 0.1) * 1.5}>
     <T.SphereGeometry args={[1, 16, 16]} />