matterviz 0.4.1 → 0.4.2

package/dist/plot/scatter/ScatterPlot.svelte.d.ts

@@ -2,6 +2,7 @@ import type { D3InterpolateName } from '../../colors';
 import type { Point2D } from '../../math';
 import type { AxisLoadError, BasePlotProps, ColorScaleConfig, ControlsConfig, DataLoaderFn, DataSeries, ErrorBand, FillHandlerEvent, FillRegion, HoverConfig, InternalPoint, LabelPlacementConfig, LegendConfig, PanConfig, PlotConfig, Point, RefLine, RefLineEvent, ScatterHandlerEvent, ScatterHandlerProps, SizeScaleConfig, StyleOverrides, UserContentProps } from '..';
 import { ColorBar } from '..';
+import type { MarginalsProp } from '../core/marginals';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { TweenOptions } from 'svelte/motion';
@@ -63,6 +64,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: DataSeries<Metadata>[]) => void;
         on_error?: (error: AxisLoadError) => void;
         pan?: PanConfig;
+        marginals?: MarginalsProp;
     };
     exports: {};
     bindings: "display" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "wrapper" | "series" | "hovered" | "ref_lines" | "x_axis" | "tooltip_point" | "fill_regions" | "selected_series_idx";

package/dist/plot/scatter/ScatterPlotControls.svelte

@@ -38,9 +38,7 @@
   } = $props()
 
   let non_null_series = $derived(series.filter((srs) => srs != null))
-  let visible_series = $derived(
-    non_null_series.filter((srs) => (srs.visible ?? true)),
-  )
+  let visible_series = $derived(non_null_series.filter((srs) => srs.visible ?? true))
   let has_multiple_series = $derived(non_null_series.length > 1)
 
   // Derive what marker types are present, and whether color/size are data-driven
@@ -55,7 +53,8 @@
     visible_series.some((srs) => srs?.size_values?.some((val) => val != null)),
   )
 
-  $effect(() => { // Initialize show_points/show_lines from defaults
+  $effect(() => {
+    // Initialize show_points/show_lines from defaults
     styles.show_points ??= DEFAULTS.scatter.show_points
     styles.show_lines ??= DEFAULTS.scatter.show_lines
   })
@@ -77,14 +76,14 @@
   {...rest}
 >
   {@render children?.({
-      x_axis,
-      x2_axis,
-      y_axis,
-      y2_axis,
-      display,
-      styles,
-      selected_series_idx,
-    })}
+    x_axis,
+    x2_axis,
+    y_axis,
+    y2_axis,
+    display,
+    styles,
+    selected_series_idx,
+  })}
   {#if has_any_points || has_any_lines}
     <SettingsSection
       title="Markers"
@@ -97,14 +96,18 @@
     >
       {#if has_any_points}
         <label
-          {@attach tooltip({ content: `Toggle visibility of data points in the scatter plot` })}
+          {@attach tooltip({
+            content: `Toggle visibility of data points in the scatter plot`,
+          })}
         >
           <input type="checkbox" bind:checked={styles.show_points} /> Show points
         </label>
       {/if}
       {#if has_any_lines}
         <label
-          {@attach tooltip({ content: `Toggle visibility of connecting lines between data points` })}
+          {@attach tooltip({
+            content: `Toggle visibility of connecting lines between data points`,
+          })}
         >
           <input type="checkbox" bind:checked={styles.show_lines} /> Show lines
         </label>
@@ -164,11 +167,7 @@
           {#if !has_color_data}
             <div class="pane-row" data-key="point.color">
               <label for="{uid}-point-color">Color:</label>
-              <input
-                id="{uid}-point-color"
-                type="color"
-                bind:value={styles.point.color}
-              />
+              <input id="{uid}-point-color" type="color" bind:value={styles.point.color} />
             </div>
           {/if}
           <div class="pane-row" data-key="point.opacity">

package/dist/plot/scatter/ScatterPlotControls.svelte.d.ts

@@ -12,6 +12,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
         } & Required<PlotConfig>
     ]>;
 };
-declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x2_axis" | "y_axis" | "y2_axis" | "x_axis" | "selected_series_idx" | "styles">;
+declare const ScatterPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "x2_axis" | "y_axis" | "y2_axis" | "x_axis" | "styles" | "selected_series_idx">;
 type ScatterPlotControls = ReturnType<typeof ScatterPlotControls>;
 export default ScatterPlotControls;

package/dist/plot/scatter/ScatterPoint.svelte

@@ -3,7 +3,10 @@
   import type { HoverStyle, LabelStyle, Point } from '..'
   import type { Point2D } from '../../math'
   import type { PointStyle } from '../core/types'
-  import { estimate_label_size, label_leader_segment } from '../core/utils/label-placement'
+  import {
+    estimate_label_size,
+    label_leader_segment,
+  } from '../core/utils/label-placement'
   import { DEFAULTS } from '../../settings'
   import * as d3_symbols from 'd3-shape'
   import { symbol } from 'd3-shape'
@@ -103,13 +106,16 @@
     {@const offset_x = label.offset?.x ?? 10}
     {@const offset_y = label.offset?.y ?? 0}
     {@const displacement = Math.hypot(offset_x, offset_y)}
-    {@const leader_line = displacement > leader_line_threshold ? label_leader_segment({
-      point: { x: 0, y: 0 },
-      point_radius: style.radius ?? 3,
-      label_center: { x: offset_x, y: offset_y },
-      label_size: label.size ?? estimate_label_size(label.text, label.font_size),
-      min_length: 6,
-    }) : null}
+    {@const leader_line =
+      displacement > leader_line_threshold
+        ? label_leader_segment({
+            point: { x: 0, y: 0 },
+            point_radius: style.radius ?? 3,
+            label_center: { x: offset_x, y: offset_y },
+            label_size: label.size ?? estimate_label_size(label.text, label.font_size),
+            min_length: 6,
+          })
+        : null}
     {#if leader_line}
       <line
         x1={leader_line.x1}
@@ -164,7 +170,8 @@
     filter: blur(3px);
   }
   @keyframes ring-pulse {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.3;
       transform: scale(1);
     }

package/dist/plot/scatter/binned-scatter-types.d.ts

@@ -1,12 +1,13 @@
 import type { D3InterpolateName } from '../../colors';
 import type { DenseInternalPoint } from './adaptive-density';
 import type ColorBar from '../core/components/ColorBar.svelte';
-import type { ColorScaleConfig, LabelPlacementConfig, ScatterHandlerProps, SizeScaleConfig } from '../core/types';
+import type { ColorScaleConfig, LabelPlacementConfig, RefLine, ScatterHandlerProps, SizeScaleConfig } from '../core/types';
 import type { ComponentProps, Snippet } from 'svelte';
 export type BinnedColorScaleConfig = ColorScaleConfig | D3InterpolateName;
 export type BinnedSizeScaleConfig = SizeScaleConfig & {
     pick_radius?: number | `auto`;
 };
+export declare const DEFAULT_BINNED_SIZE_SCALE: BinnedSizeScaleConfig;
 export type BinnedDensityConfig = {
     bin_px?: number;
     color_scale?: BinnedColorScaleConfig;
@@ -27,7 +28,7 @@ export type BinnedRefLine = {
     width?: number;
 };
 export type BinnedOverlaysConfig = {
-    ref_lines?: BinnedRefLine[];
+    ref_lines?: (BinnedRefLine | RefLine)[];
 };
 export type BinnedPointBasePayload<Metadata extends Record<string, unknown> = Record<string, unknown>> = ScatterHandlerProps<Metadata> & {
     point: DenseInternalPoint<Metadata>;

package/dist/plot/scatter/binned-scatter-types.js

@@ -1 +1,6 @@
-export {};
+import { SCALE_DEFAULTS } from '../core/types';
+export const DEFAULT_BINNED_SIZE_SCALE = {
+    type: `linear`,
+    radius_range: SCALE_DEFAULTS.binned_radius,
+    pick_radius: SCALE_DEFAULTS.binned_radius[1],
+};

package/dist/plot/scatter/scatter-data.d.ts

@@ -1,6 +1,6 @@
 import type { DataSeries, FillRegion, InternalPoint, LegendItem, PointStyle } from '..';
 import { type AxisRanges } from '../core/types';
-export type { AxisRanges };
+export { type AxisRanges } from '../core/types';
 export declare function filter_series_to_ranges<Metadata = Record<string, unknown>>(series: readonly DataSeries<Metadata>[], ranges: AxisRanges): (DataSeries<Metadata> & {
     filtered_data: InternalPoint<Metadata>[];
 })[];

package/dist/plot/scatter/scatter-data.js

@@ -2,7 +2,8 @@ import { symbol_names } from '../../labels';
 import { get_series_color, get_series_symbol, process_prop, } from '../core/data-transform';
 import { is_fill_gradient } from '../core/fill-utils';
 import { DEFAULT_MARKERS } from '../core/types';
-const in_range = (val, lo, hi) => val != null && !isNaN(val) && val >= Math.min(lo, hi) && val <= Math.max(lo, hi);
+export {} from '../core/types';
+const in_range = (val, lo, hi) => val != null && Number.isFinite(val) && val >= Math.min(lo, hi) && val <= Math.max(lo, hi);
 // Filter series data to only include points within bounds and augment with internal data.
 // Full x/y arrays are kept on each returned series (via spread) so connecting lines can
 // continue through off-range points; only filtered_data (rendered markers) is range-limited.
@@ -79,7 +80,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
         const first_point_style = Array.isArray(data_series?.point_style)
             ? data_series.point_style[0]
             : data_series?.point_style;
-        if (series_markers?.includes(`points`)) {
+        if (series_markers.includes(`points`)) {
             if (first_point_style) {
                 if (typeof first_point_style.symbol_type === `string` &&
                     symbol_names.includes(first_point_style.symbol_type)) {
@@ -101,7 +102,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
             display_style.symbol_type = undefined;
             display_style.symbol_color = undefined;
         }
-        if (series_markers?.includes(`line`)) {
+        if (series_markers.includes(`line`)) {
             // Explicit line stroke, then color scale, then point colors, then series default
             let line_color = data_series?.line_style?.stroke;
             if (!line_color) {
@@ -172,7 +173,7 @@ export function build_legend_data(series, computed_fills, color_scale_fn) {
 const is_transparent_or_none = (color) => !color ||
     color === `none` ||
     color === `transparent` ||
-    /rgba\([^)]+[,/]\s*0(\.0*)?\s*\)$/.test(color);
+    /rgba\([^)]+[,/]\s*0(?:\.0*)?\s*\)$/.test(color);
 // Type-guard negation of is_transparent_or_none so usable colors narrow to string
 const is_opaque_color = (color) => !is_transparent_or_none(color);
 // Resolve tooltip background color: point color-scale value, then point fill, then point
@@ -186,12 +187,12 @@ export function pick_tooltip_bg(point, series, color_scale_fn) {
     const fill_color = point_style?.fill;
     if (is_opaque_color(fill_color))
         return fill_color;
-    if (series_markers?.includes(`points`)) {
+    if (series_markers.includes(`points`)) {
         const stroke_color = point_style?.stroke;
         if (is_opaque_color(stroke_color))
             return stroke_color;
     }
-    if (series_markers?.includes(`line`)) {
+    if (series_markers.includes(`line`)) {
         const line_style = series?.line_style ?? {};
         const first_point_style = Array.isArray(series?.point_style)
             ? series?.point_style[0]
@@ -203,7 +204,7 @@ export function pick_tooltip_bg(point, series, color_scale_fn) {
         }
         if (is_transparent_or_none(line_color_candidate) && first_color_value != null)
             line_color_candidate = color_scale_fn(first_color_value);
-        if (is_transparent_or_none(line_color_candidate) && series_markers?.includes(`points`))
+        if (is_transparent_or_none(line_color_candidate) && series_markers.includes(`points`))
             line_color_candidate = first_point_style?.stroke;
         if (is_opaque_color(line_color_candidate))
             return line_color_candidate;

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

@@ -19,12 +19,12 @@
     LegendConfig,
     RefLine3D,
     RefPlane,
-    ScaleType,
     Scatter3DHandlerEvent,
     SizeScaleConfig,
     StyleOverrides3D,
     Surface3DConfig,
   } from '../core/types'
+  import { SCALE_DEFAULTS } from '../core/types'
   import { Canvas } from '@threlte/core'
   import * as extras from '@threlte/extras'
   import { onMount } from 'svelte'
@@ -54,17 +54,9 @@
     },
     styles = {},
     // Color and size scaling
-    color_scale = {
-      type: `linear` as ScaleType,
-      scheme: `interpolateViridis` as D3InterpolateName,
-      value_range: undefined,
-    },
+    color_scale = SCALE_DEFAULTS.color,
     color_bar = {},
-    size_scale = {
-      type: `linear` as ScaleType,
-      radius_range: [0.05, 0.2],
-      value_range: undefined,
-    },
+    size_scale = SCALE_DEFAULTS.size_3d,
     // Legend
     legend = {},
     // Camera settings
@@ -119,7 +111,7 @@
     display?: DisplayConfig3D
     styles?: StyleOverrides3D
     color_scale?: ColorScaleConfig | D3InterpolateName
-    color_bar?: ComponentProps<typeof ColorBar> & { margin?: number | Sides } | null
+    color_bar?: (ComponentProps<typeof ColorBar> & { margin?: number | Sides }) | null
     size_scale?: SizeScaleConfig
     legend?: LegendConfig | null
     camera_position?: Vec3
@@ -150,9 +142,7 @@
     orbit_controls?: ComponentProps<typeof extras.OrbitControls>[`ref`]
     tooltip?: Snippet<[Scatter3DHandlerEvent<Metadata>]>
     children?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
-    header_controls?: Snippet<
-      [{ height: number; width: number; fullscreen: boolean }]
-    >
+    header_controls?: Snippet<[{ height: number; width: number; fullscreen: boolean }]>
     controls_extra?: Snippet
   } = $props()
 
@@ -160,7 +150,7 @@
 
   // Track mounted state to avoid SSR/hydration mismatch with Canvas
   let mounted = $state(false)
-  onMount(() => mounted = true)
+  onMount(() => (mounted = true))
 
   const series_visibility_keys = $derived.by((): string[] => {
     const id_counts = new Map<string | number, number>()
@@ -190,8 +180,9 @@
     }
   })
   let series_visibility = $derived(
-    series.map((srs, idx) =>
-      visibility_overrides.get(series_visibility_keys[idx]) ?? srs?.visible ?? true
+    series.map(
+      (srs, idx) =>
+        visibility_overrides.get(series_visibility_keys[idx]) ?? srs?.visible ?? true,
     ),
   )
 
@@ -219,16 +210,14 @@
 
   // Collect all color values for color bar
   let all_color_values = $derived(
-    series.filter(Boolean).flatMap((srs) =>
-      srs.color_values?.filter((val): val is number => val != null) ?? []
-    ),
+    series
+      .filter(Boolean)
+      .flatMap((srs) => srs.color_values?.filter((val): val is number => val != null) ?? []),
   )
 
   let auto_color_range = $derived(calculate_domain(all_color_values))
 
-  let color_scale_fn = $derived(
-    create_color_scale(normalized_color_scale, auto_color_range),
-  )
+  let color_scale_fn = $derived(create_color_scale(normalized_color_scale, auto_color_range))
 
   // Legend data
   let legend_data = $derived(
@@ -244,10 +233,9 @@
         display_style: {
           symbol_type: `Circle` as const,
           symbol_color: srs?.point_style
-            ? (Array.isArray(srs.point_style)
-              ? srs.point_style[0]?.fill
-              : srs.point_style?.fill) ??
-              series_color
+            ? ((Array.isArray(srs.point_style)
+                ? srs.point_style[0]?.fill
+                : srs.point_style?.fill) ?? series_color)
             : series_color,
         },
         has_explicit_label: Boolean(srs?.label),
@@ -306,7 +294,7 @@
   bind:clientWidth={width}
   bind:clientHeight={height}
   {...rest}
-  class="scatter-3d {rest.class ?? ``}"
+  class={[`scatter-3d`, rest.class]}
   class:fullscreen
 >
   {#if width && height}
@@ -391,9 +379,9 @@
     <!-- Color Bar -->
     {#if color_bar && all_color_values.length > 0}
       {@const color_domain = [
-      normalized_color_scale.value_range?.[0] ?? auto_color_range[0],
-      normalized_color_scale.value_range?.[1] ?? auto_color_range[1],
-    ] as Vec2}
+        normalized_color_scale.value_range?.[0] ?? auto_color_range[0],
+        normalized_color_scale.value_range?.[1] ?? auto_color_range[1],
+      ] as Vec2}
       <ColorBar
         tick_labels={4}
         tick_side="primary"
@@ -401,7 +389,8 @@
         color_scale_domain={color_domain}
         scale_type={normalized_color_scale.type}
         range={color_domain?.every((val) => val != null) ? color_domain : undefined}
-        wrapper_style="position: absolute; bottom: 2em; left: 2em; {color_bar?.wrapper_style ?? ``}"
+        wrapper_style="position: absolute; bottom: 2em; left: 2em; {color_bar?.wrapper_style ??
+          ``}"
         bar_style="width: 200px; height: 16px; {color_bar?.style ?? ``}"
         {...color_bar}
       />
@@ -508,7 +497,9 @@
   div.scatter-3d :global(.pane-toggle),
   div.scatter-3d .header-controls {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   div.scatter-3d:hover :global(.pane-toggle),
   div.scatter-3d:hover .header-controls,

package/dist/plot/scatter-3d/ScatterPlot3D.svelte.d.ts

@@ -64,7 +64,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         controls_extra?: Snippet;
     };
     exports: {};
-    bindings: "fullscreen" | "wrapper" | "hovered" | "scene" | "camera" | "orbit_controls" | "camera_position" | "tooltip_point";
+    bindings: "fullscreen" | "wrapper" | "hovered" | "camera" | "camera_position" | "orbit_controls" | "scene" | "tooltip_point";
     slots: {};
     events: {};
 };
@@ -72,7 +72,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "fullscreen" | "wrapper" | "hovered" | "scene" | "camera" | "orbit_controls" | "camera_position" | "tooltip_point";
+    bindings(): "fullscreen" | "wrapper" | "hovered" | "camera" | "camera_position" | "orbit_controls" | "scene" | "tooltip_point";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -14,6 +14,7 @@
   } from '../core/types'
   import { calculate_domain } from '../core/scales'
   import { unique_id } from '../core/utils'
+  import { parse_num_token } from '../../utils'
   import type { ComponentProps, Snippet } from 'svelte'
 
   // Unique ID prefix to avoid conflicts when multiple instances on same page
@@ -69,8 +70,8 @@
 
   // Helpers to update display properties - avoids verbose inline handlers
   const update_display = (key: keyof DisplayConfig3D) => (event: InputControlEvent) => {
-    const parsed = parseFloat(get_input_value(event))
-    // Guard against NaN when input is cleared - preserve existing value
+    const parsed = parse_num_token(get_input_value(event))
+    // Guard against cleared/invalid input - preserve existing value
     if (!Number.isNaN(parsed)) display = { ...display, [key]: parsed }
   }
   const toggle_display = (key: keyof DisplayConfig3D) => () => {
@@ -356,9 +357,11 @@
   {#if series.length > 0 || surfaces.length > 0}
     <div class="data-summary">
       {#if series.length > 0}
-        <span>{series.length} series · {
-            series.reduce((sum, srs) => sum + srs.x.length, 0).toLocaleString()
-          } points</span>
+        <span
+          >{series.length} series · {series
+            .reduce((sum, srs) => sum + srs.x.length, 0)
+            .toLocaleString()} points</span
+        >
       {/if}
       {#if surfaces.length > 0}
         <span>{surfaces.length} {surfaces.length === 1 ? `surface` : `surfaces`}</span>