matterviz 0.3.7 → 0.4.1

package/dist/plot/{BinnedScatterPlot.svelte → scatter/BinnedScatterPlot.svelte}

@@ -6,17 +6,17 @@
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>, PointData extends Record<string, unknown> = Record<string, unknown>"
 >
-  import Icon from '../Icon.svelte'
-  import { format_value } from '../labels'
-  import { FullscreenToggle, set_fullscreen_bg } from '../layout'
-  import type { Point2D, Vec2 } from '../math'
-  import { create_pulse_animation } from '../effects.svelte'
-  import ColorBar from './ColorBar.svelte'
-  import PlotAxis from './PlotAxis.svelte'
-  import PlotTooltip from './PlotTooltip.svelte'
-  import ZoomRect from './ZoomRect.svelte'
-  import { compute_element_placement, filter_padding } from './layout'
-  import type { Sides } from './layout'
+  import Icon from '../../Icon.svelte'
+  import { format_value } from '../../labels'
+  import { FullscreenToggle, set_fullscreen_bg } from '../../layout'
+  import type { Point2D, Vec2 } from '../../math'
+  import { create_pulse_animation } from '../../effects.svelte'
+  import ColorBar from '../core/components/ColorBar.svelte'
+  import PlotAxis from '../core/components/PlotAxis.svelte'
+  import PlotTooltip from '../core/components/PlotTooltip.svelte'
+  import ZoomRect from '../core/components/ZoomRect.svelte'
+  import { compute_element_placement, filter_padding } from '../core/layout'
+  import type { Sides } from '../core/layout'
   import {
     build_pick_index,
     bin_points,
@@ -25,20 +25,19 @@
     get_metadata_at,
     pick_from_index,
     range_bounds,
+    scale_bin_transform,
     series_extents,
     should_render_points,
-    type DensityBin,
-    type DenseInternalPoint,
-    type DensePointSeries,
   } from './adaptive-density'
-  import { create_color_scale, create_scale, create_size_scale, generate_ticks } from './scales'
-  import type { AxisConfig, DataSeries, InternalPoint, ScatterHandlerProps } from './types'
+  import type { DensityBin, DenseInternalPoint, DensePointSeries } from './adaptive-density'
+  import { create_color_scale, create_scale, create_size_scale, generate_ticks } from '../core/scales'
+  import type { AxisConfig, DataSeries, InternalPoint, ScatterHandlerProps } from '../core/types'
   import {
     compute_label_positions,
     estimate_label_size,
     label_leader_segment,
-    type LabelSize,
-  } from './utils/label-placement'
+  } from '../core/utils/label-placement'
+  import type { LabelSize } from '../core/utils/label-placement'
   import type { ComponentProps, Snippet } from 'svelte'
   import { onMount, tick } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
@@ -74,7 +73,7 @@
     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_point_radius_range: Vec2 = [4, 12]
   const default_pick_radius = default_point_radius_range[1]
   const default_size_scale = {
     type: `linear`,
@@ -198,6 +197,9 @@
   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)
+    // Skip non-finite ranges (e.g. a NaN bound in an axis range prop): NaN !== NaN
+    // means same_range never settles, looping until effect_update_depth_exceeded
+    if (![...next_x_range, ...next_y_range].every(Number.isFinite)) return
     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
   }
@@ -237,9 +239,17 @@
     x: Math.max(8, Math.ceil(plot_width / density_settings.bin_px)),
     y: Math.max(8, Math.ceil(plot_height / density_settings.bin_px)),
   })
+  // Bin in scale space so the heatmap, hover, and zoom stay aligned with log/arcsinh axes
+  let bin_transforms = $derived({
+    x: scale_bin_transform(x_scale_type),
+    y: scale_bin_transform(y_scale_type),
+  })
+  let bin_series = $derived(has_plot_size ? series : [])
   let density_result = $derived(
-    bin_points(has_plot_size ? series : [], x_range, y_range, density_bins.x, density_bins.y),
+    bin_points(bin_series, x_range, y_range, density_bins.x, density_bins.y, bin_transforms),
   )
+  const bin_at = (coords: Point2D) =>
+    density_bin_at_point(density_result, coords, plot_rect, x_range, y_range, bin_transforms)
   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)
@@ -487,31 +497,27 @@
     hovered_point = null
   }
 
-  function handler_props(
+  const 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`),
-    }
-  }
+  ): ScatterHandlerProps<Metadata> => ({
+    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
-  }
+  const point_color = (point: DenseInternalPoint<Metadata>): string =>
+    series[point.series_idx]?.color ?? default_point_color
 
-  function point_label_key(point: DenseInternalPoint<Metadata>): string {
-    return `${point.series_idx}-${point.point_idx}`
-  }
+  const point_label_key = (point: DenseInternalPoint<Metadata>): string =>
+    `${point.series_idx}-${point.point_idx}`
 
   function make_point(series_idx: number, point_idx: number): DenseInternalPoint<Metadata> {
     const srs = series[series_idx]
@@ -530,9 +536,8 @@
     }
   }
 
-  function fallback_label_text(point: DenseInternalPoint<Metadata>): string {
-    return String(point.point_id ?? point_label_key(point))
-  }
+  const fallback_label_text = (point: DenseInternalPoint<Metadata>): string =>
+    String(point.point_id ?? point_label_key(point))
 
   function point_payload(
     point: DenseInternalPoint<Metadata>,
@@ -542,16 +547,14 @@
     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)
-  }
+  const label_measure_text = (payload: BinnedPointPayload<Metadata, PointData>): string =>
+    point_labels_settings.measure_text?.(payload) ?? fallback_label_text(payload.point)
 
-  function label_size_for_payload(
+  const label_size_for_payload = (
     payload: BinnedPointPayload<Metadata, PointData>,
-  ): LabelSize {
-    return label_sizes.get(point_label_key(payload.point)) ??
+  ): LabelSize =>
+    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 []
@@ -581,7 +584,7 @@
   })
 
   let point_label_positions = $derived.by(() => {
-    if (!point_label_payloads.length) return {}
+    if (point_label_payloads.length === 0) return {}
 
     const filtered_data: InternalPoint<Metadata>[] = point_label_payloads.map(
       (payload) => ({
@@ -630,7 +633,7 @@
   }
 
   $effect(() => {
-    if (!label_measure_root || !point_label_payloads.length) return
+    if (!label_measure_root || point_label_payloads.length === 0) return
     void measure_point_labels()
   })
 
@@ -651,12 +654,6 @@
     })
   }
 
-  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 }
@@ -668,7 +665,7 @@
 
     if (render_mode === `density`) {
       hovered_point = null
-      const bin = density_bin_at_point(density_result, coords, plot_rect, x_range, y_range)
+      const bin = bin_at(coords)
       if (
         hovered_bin?.x_bin !== bin?.x_bin ||
         hovered_bin?.y_bin !== bin?.y_bin ||
@@ -714,7 +711,7 @@
     if (!coords) return
 
     if (render_mode === `density`) {
-      const bin = density_bin_at_point(density_result, coords, plot_rect, x_range, y_range)
+      const bin = bin_at(coords)
       if (!bin) return
       if (density_settings.bin_click === `none`) return
       if (bin.count > 1 && density_settings.bin_click === `zoom`) {
@@ -971,7 +968,7 @@
       - {format_value(hovered_bin.y_range[1], y_axis.format ?? `.3~g`)}
     </PlotTooltip>
   {:else if hovered_point}
-    {@const props = point_tooltip_props(hovered_point)}
+    {@const props = point_payload(hovered_point)}
     <PlotTooltip x={tooltip_pos.x} y={tooltip_pos.y} offset={{ x: 0, y: 0 }}>
       {#if tooltip}
         {@render tooltip(props)}
@@ -1015,7 +1012,10 @@
     margin: 0;
     max-height: none !important;
     overflow: hidden;
-    padding-top: var(--plot-fullscreen-padding-top, 2em);
+    /* border-top (not padding-top): bind:clientHeight includes padding but excludes
+    borders - padding made the chart overflow + clip its bottom 2em (x-axis title) */
+    border-top: var(--plot-fullscreen-padding-top, 2em) solid
+      var(--binned-scatter-fullscreen-bg, var(--binned-scatter-bg, var(--plot-bg, Canvas)));
     position: fixed;
     top: 0;
     width: 100vw !important;

package/dist/plot/{BinnedScatterPlot.svelte.d.ts → scatter/BinnedScatterPlot.svelte.d.ts}

@@ -1,6 +1,6 @@
-import type { Sides } from './layout';
-import { type DensityBin, type DenseInternalPoint, type DensePointSeries } from './adaptive-density';
-import type { AxisConfig, ScatterHandlerProps } from './types';
+import type { Sides } from '../core/layout';
+import type { DensityBin, DenseInternalPoint, DensePointSeries } from './adaptive-density';
+import type { AxisConfig, ScatterHandlerProps } from '../core/types';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { BinnedDensityConfig, BinnedOverlaysConfig, BinnedPointDataFn, BinnedPointLabelsConfig, BinnedPointTooltipPayload, BinnedSizeScaleConfig } from './binned-scatter-types';
@@ -27,7 +27,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
             bin: DensityBin;
             event: MouseEvent;
         }) => void;
-        render_mode?: "density" | "points";
+        render_mode?: "points" | "density";
         wrapper?: HTMLDivElement;
         fullscreen?: boolean;
         fullscreen_toggle?: boolean;
@@ -43,7 +43,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         }]>;
     };
     exports: {};
-    bindings: "render_mode" | "fullscreen" | "wrapper";
+    bindings: "fullscreen" | "wrapper" | "render_mode";
     slots: {};
     events: {};
 };
@@ -51,7 +51,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata, PointData>>['props'];
     events(): ReturnType<typeof $$render<Metadata, PointData>>['events'];
     slots(): ReturnType<typeof $$render<Metadata, PointData>>['slots'];
-    bindings(): "render_mode" | "fullscreen" | "wrapper";
+    bindings(): "fullscreen" | "wrapper" | "render_mode";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/{ElementScatter.svelte → scatter/ElementScatter.svelte}

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { element_data } from '../element'
-  import { format_num } from '../labels'
-  import { sanitize_html } from '../sanitize'
-  import type { AxisConfig, InternalPoint } from './'
-  import { ScatterPlot } from './'
-  import { selected } from '../state.svelte'
+  import { element_data } from '../../element'
+  import { format_num } from '../../labels'
+  import { sanitize_html } from '../../sanitize'
+  import type { AxisConfig, InternalPoint } from '..'
+  import { ScatterPlot } from '..'
+  import { selected } from '../../state.svelte'
   import type { ComponentProps } from 'svelte'
 
   let {

package/dist/plot/{ElementScatter.svelte.d.ts → scatter/ElementScatter.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { AxisConfig, InternalPoint } from './';
-import { ScatterPlot } from './';
+import type { AxisConfig, InternalPoint } from '..';
+import { ScatterPlot } from '..';
 import type { ComponentProps } from 'svelte';
 type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
     y: number[];