matterviz 0.4.2 → 0.4.3

package/dist/phase-diagram/svg-to-diagram.js

@@ -232,13 +232,9 @@ function extract_boundaries(doc, format, x_scale, y_scale) {
             const dy = Math.abs(coords.y2 - coords.y1);
             if (dx < 15 && dy < 15)
                 continue;
-            // Check stroke-width to distinguish boundaries from axis lines
+            // Check stroke-width to distinguish boundaries from axis lines;
+            // only include lines with meaningful stroke
             const stroke_width = parse_stroke_width(path_el) || 1;
-            // Axis patches (id="patch_*") are axis borders, not phase boundaries
-            const parent_id = group.getAttribute(`id`) ?? ``;
-            if (parent_id.startsWith(`patch_`))
-                continue;
-            // Only include lines with meaningful stroke
             if (stroke_width < 1)
                 continue;
             add_boundary(boundaries, coords, x_scale, y_scale, epsilon);
@@ -407,7 +403,13 @@ function extract_matplotlib_labels(doc, labels) {
         if (!comment.includes(`+`))
             continue; // skip axis labels (no "+")
         // Clean LaTeX: "La$_2$NiO$_4$ + NiO" -> "La2NiO4 + NiO"
-        const text = clean_latex(comment.trim());
+        const text = comment
+            .trim()
+            .replaceAll(/\$_\{(?<digits>[^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
+            .replaceAll(/\$_(?<digit>\d)\$/g, `$1`) // $_2$ -> 2
+            .replaceAll(`$`, ``) // remove any remaining $
+            .replaceAll(/\s+/g, ` `)
+            .trim();
         // Get position from transform="translate(x, y)"
         const pos = parse_translate(group.querySelector(`g[transform]`)) ?? parse_translate(group);
         if (!pos)
@@ -725,13 +727,6 @@ function find_comment_text(group) {
     }
     return null;
 }
-// Clean LaTeX subscript notation: "La$_2$NiO$_4$" -> "La2NiO4"
-const clean_latex = (text) => text
-    .replaceAll(/\$_\{(?<digits>[^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
-    .replaceAll(/\$_(?<digit>\d)\$/g, `$1`) // $_2$ -> 2
-    .replaceAll(`$`, ``) // remove any remaining $
-    .replaceAll(/\s+/g, ` `)
-    .trim();
 // Parse SVG path data into absolute line segments [x1,y1,x2,y2]
 // Handles all SVG path commands (M/L/H/V/C/S/Q/T/A/Z, both absolute and relative)
 // Curves (C/S/Q/T/A) are approximated as straight lines from start to endpoint

package/dist/plot/bar/BarPlot.svelte

@@ -251,9 +251,9 @@
   let ref_lines_by_z = $derived(group_ref_lines_by_z(index_ref_lines(ref_lines)))
 
   // === Categorical Normalization (string x values -> integer indices, see ./data) ===
-  let cat_norm = $derived(normalize_categorical(series, x_axis.categories))
-  let category_list = $derived(cat_norm.category_list)
-  let internal_series = $derived(cat_norm.internal_series)
+  let { category_list, internal_series } = $derived(
+    normalize_categorical(series, x_axis.categories),
+  )
 
   let category_indices = $derived(
     category_list.length > 0 ? category_list.map((_, idx) => idx) : null,
@@ -378,10 +378,13 @@
   })
 
   let legend_element = $state<HTMLDivElement | undefined>()
-  const legend_footprint = $derived(
-    measured_footprint(legend_element, { width: 120, height: 60 }),
-  )
+  let legend_size_revision = $state(0)
+  const legend_footprint = $derived.by(() => {
+    void legend_size_revision
+    return measured_footprint(legend_element, { width: 120, height: 60 })
+  })
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
+  const should_show_legend = $derived(show_legend ?? series.length > 1)
 
   // Obstacle field in normalized [0,1] plot coords (y=0 at top). Each bar is modeled as a segment
   // from baseline to its tip so the legend can't hide inside a tall bar. Built from internal_series
@@ -428,7 +431,7 @@
   })
 
   // Move the legend to the bottom margin when no interior spot avoids the bars
-  const decor = $derived.by(() =>
+  const decor = $derived(
     place_decorations({
       base_pad,
       width,
@@ -437,7 +440,7 @@
       // gate on legend_element (the render signal) not legend_data, whose entries can read pad
       legend:
         legend != null &&
-        (show_legend !== undefined ? show_legend : series.length > 1) &&
+        should_show_legend &&
         legend_element != null &&
         !legend_has_explicit_pos
           ? { footprint: legend_footprint, clearance: legend?.axis_clearance }
@@ -472,9 +475,6 @@
     })),
   )
   const marginal_has_axis = $derived(marginal_axis_presence(show_x2, show_y2))
-  const legend_auto_outside = $derived(decor.legend_outside)
-  const legend_outside_x = $derived(decor.legend_pos.x)
-  const legend_outside_y = $derived(decor.legend_pos.y)
   const chart_width = $derived(Math.max(1, width - pad.l - pad.r))
   const chart_height = $derived(Math.max(1, height - pad.t - pad.b))
 
@@ -569,7 +569,6 @@
   let tick_label_widths = $derived({
     y_max: measure_max_tick_width(ticks.y, y_axis.format ?? ``),
     y2_max: measure_max_tick_width(ticks.y2, y2_axis.format ?? ``),
-    x2_max: measure_max_tick_width(ticks.x2, x2_axis.format ?? ``),
   })
 
   // Shared pan/zoom/touch/drag-rect interaction controller
@@ -577,7 +576,12 @@
     ranges: () => ranges.current,
     scale_type: (axis) =>
       ({ x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis })[axis].scale_type,
-    plot_dims: () => ({ width: chart_width, height: chart_height }),
+    plot_bounds: () => ({
+      x: pad.l,
+      y: pad.t,
+      width: chart_width,
+      height: chart_height,
+    }),
     pan: () => pan,
     set_range: (axis, range) => (ranges.current[axis] = range),
     svg: () => svg_element,
@@ -703,11 +707,10 @@
   let hovered_legend_series_idx = $state<number | null>(null)
 
   // Calculate best legend placement using continuous grid sampling
-  let legend_placement = $derived.by(() => {
-    const should_show = show_legend !== undefined ? show_legend : series.length > 1
-    if (!should_show || !width || !height) return null
+  const get_legend_placement = () => {
+    if (!should_show_legend || !width || !height) return null
 
-    const result = compute_element_placement({
+    return compute_element_placement({
       plot_bounds: { x: pad.l, y: pad.t, width: chart_width, height: chart_height },
       element: legend_element,
       element_size: { width: 120, height: 60 }, // fallback before first render
@@ -715,17 +718,16 @@
       exclude_rects: [],
       points: bar_points_for_placement,
     })
-
-    return result
-  })
+  }
 
   // Tweened legend coordinates with shared placement stability gating
   const legend_tween = create_placed_tween({
-    placement: () => legend_placement,
+    placement: get_legend_placement,
     dims: () => ({ width, height }),
     responsive: () => legend?.responsive ?? false,
     element: () => legend_element,
     tween: () => legend?.tween,
+    on_element_resize: () => (legend_size_revision += 1),
   })
 
   // Tooltip state
@@ -804,6 +806,12 @@
       on_bar_hover?.({ ...hover_info, event })
     }
 
+  const clear_hover = () => {
+    hover_info = null
+    change(null)
+    on_bar_hover?.(null)
+  }
+
   // Stack offsets (only for bar series in stacked mode, grouped by y-axis)
   let stacked_offsets = $derived(compute_stacked_offsets(internal_series, mode))
 
@@ -913,9 +921,7 @@
       onkeydown={pan_zoom.on_key_down}
       onmouseleave={() => {
         hovered = false
-        hover_info = null
-        change(null)
-        on_bar_hover?.(null)
+        clear_hover()
       }}
       onwheel={pan_zoom.on_wheel}
       ontouchstart={pan_zoom.on_touch_start}
@@ -964,8 +970,7 @@
         on_axis_change={(key) => handle_axis_change(`x`, key)}
       />
 
-      <!-- X2-axis (Top) -->
-      <!-- Note: x2 axis is only supported for vertical orientation -->
+      <!-- X2-axis (Top): only rendered in vertical orientation -->
       {#if show_x2}
         <PlotAxis
           side="x2"
@@ -1009,8 +1014,7 @@
         on_axis_change={(key) => handle_axis_change(`y`, key)}
       />
 
-      <!-- Y2-axis (Right) -->
-      <!-- Note: y2 axis is only supported for vertical orientation. Implementing x2 for horizontal mode requires additional complexity. -->
+      <!-- Y2-axis (Right): only rendered in vertical orientation -->
       {#if show_y2}
         <PlotAxis
           side="y2"
@@ -1138,11 +1142,7 @@
                       change(hover_info)
                       on_bar_hover?.({ ...hover_info!, event: evt })
                     }}
-                    onmouseleave={() => {
-                      change(null)
-                      hover_info = null
-                      on_bar_hover?.(null)
-                    }}
+                    onmouseleave={clear_hover}
                     onclick={(evt) => {
                       const pt = find_closest_point(evt, points)
                       if (!pt) return
@@ -1304,11 +1304,7 @@
                       aria-label={`bar ${bar_idx + 1} of ${srs.label ?? `series`}`}
                       style:cursor={on_bar_click ? `pointer` : undefined}
                       onmousemove={handle_bar_hover(series_idx, bar_idx, color)}
-                      onmouseleave={() => {
-                        hover_info = null
-                        change(null)
-                        on_bar_hover?.(null)
-                      }}
+                      onmouseleave={clear_hover}
                       onclick={(evt) =>
                         on_bar_click?.({
                           ...get_bar_data(series_idx, bar_idx, color),
@@ -1375,11 +1371,11 @@
     </svg>
 
     <!-- Legend -->
-    {#if legend && (show_legend !== undefined ? show_legend : series.length > 1)}
+    {#if legend && should_show_legend}
       {@const legend_pos = placed_coords(
-        legend_auto_outside,
-        { x: legend_outside_x, y: legend_outside_y },
-        legend_placement,
+        decor.legend_outside,
+        decor.legend_pos,
+        legend_tween.placed(),
         legend_tween.coords.current,
         { x: pad.l + 10, y: pad.t + 10 },
       )}

package/dist/plot/bar/SpacegroupBarPlot.svelte

@@ -34,36 +34,21 @@
     data.map(spg.normalize_spacegroup).filter((sg): sg is number => sg !== null),
   )
 
-  // Compute histogram of space group numbers
+  // Histogram of space group number counts
   const histogram = $derived.by(() => {
     const hist = new SvelteMap<number, number>()
-
-    // Count occurrences
-    for (const sg of normalized_data) {
-      hist.set(sg, (hist.get(sg) ?? 0) + 1)
-    }
-
+    for (const sg of normalized_data) hist.set(sg, (hist.get(sg) ?? 0) + 1)
     return hist
   })
 
-  // Group counts by crystal system
-  const crystal_system_stats = $derived.by(() => {
-    const stats = new SvelteMap<CrystalSystem, { count: number; spacegroups: number[] }>()
-
-    for (const system of symmetry.CRYSTAL_SYSTEMS) {
-      stats.set(system, { count: 0, spacegroups: [] })
-    }
-
+  // Total counts per crystal system
+  const crystal_system_counts = $derived.by(() => {
+    const counts = new SvelteMap<CrystalSystem, number>()
     for (const [sg, count] of histogram) {
       const system = spg.spacegroup_to_crystal_sys(sg)
-      if (!system) continue
-      const stat = stats.get(system)
-      if (!stat) continue
-      stat.count += count
-      stat.spacegroups.push(sg)
+      if (system) counts.set(system, (counts.get(system) ?? 0) + count)
     }
-
-    return stats
+    return counts
   })
 
   // Create sorted list of space groups for x-axis
@@ -88,28 +73,20 @@
     // Group data by crystal system
     for (const sg of sorted_spacegroups) {
       const system = spg.spacegroup_to_crystal_sys(sg)
-      if (system) {
-        let series = series_by_system.get(system)
-        if (!series) {
-          series = { x: [], y: [] }
-          series_by_system.set(system, series)
-        }
-        series.x.push(sg)
-        series.y.push(histogram.get(sg) ?? 0)
-      }
+      if (!system) continue
+      let series = series_by_system.get(system)
+      if (!series) series_by_system.set(system, (series = { x: [], y: [] }))
+      series.x.push(sg)
+      series.y.push(histogram.get(sg) ?? 0)
     }
 
     // Convert to BarSeries array, maintaining order of crystal systems
-    const result: BarSeries[] = []
-    for (const system of symmetry.CRYSTAL_SYSTEMS) {
+    return symmetry.CRYSTAL_SYSTEMS.flatMap((system) => {
       const system_data = series_by_system.get(system)
-      if (system_data) {
-        const { x, y } = system_data
-        const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
-        result.push({ x, y, color, label: system, bar_width: 0.9, visible: true })
-      }
-    }
-    return result
+      if (!system_data) return []
+      const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
+      return { ...system_data, color, label: system, bar_width: 0.9, visible: true }
+    })
   })
 
   // Always show full space group range (1-230)
@@ -121,8 +98,7 @@
 
     return symmetry.CRYSTAL_SYSTEMS.map((system) => {
       const [sg_start, sg_end] = symmetry.CRYSTAL_SYSTEM_RANGES[system]
-      const stats = crystal_system_stats.get(system)
-      const count = stats?.count ?? 0
+      const count = crystal_system_counts.get(system) ?? 0
       const color = symmetry.CRYSTAL_SYSTEM_COLORS[system]
       return { system, sg_start, sg_end, count, color }
     }).filter(

package/dist/plot/box/BoxPlot.svelte

@@ -491,9 +491,11 @@
   })
 
   let legend_element = $state<HTMLDivElement | undefined>()
-  const legend_footprint = $derived(
-    measured_footprint(legend_element, { width: 120, height: 60 }),
-  )
+  let legend_size_revision = $state(0)
+  const legend_footprint = $derived.by(() => {
+    void legend_size_revision
+    return measured_footprint(legend_element, { width: 120, height: 60 })
+  })
   const legend_has_explicit_pos = $derived(has_explicit_position(legend?.style))
 
   // Obstacle field in normalized [0,1] coords: each box modeled as a whisker-spanning segment
@@ -531,7 +533,7 @@
   })
 
   const should_show_legend = $derived(show_legend ?? false)
-  const decor = $derived.by(() =>
+  const decor = $derived(
     place_decorations({
       base_pad,
       width,
@@ -570,9 +572,6 @@
     }),
   )
   const marginal_has_axis = $derived(marginal_axis_presence(show_x2, show_y2))
-  const legend_auto_outside = $derived(decor.legend_outside)
-  const legend_outside_x = $derived(decor.legend_pos.x)
-  const legend_outside_y = $derived(decor.legend_pos.y)
   const chart_width = $derived(Math.max(1, width - pad.l - pad.r))
   const chart_height = $derived(Math.max(1, height - pad.t - pad.b))
 
@@ -645,7 +644,6 @@
   let tick_label_widths = $derived({
     y_max: measure_max_tick_width(ticks.y, y_axis.format ?? ``),
     y2_max: measure_max_tick_width(ticks.y2, y2_axis.format ?? ``),
-    x2_max: measure_max_tick_width(ticks.x2, x2_axis.format ?? ``),
   })
 
   // Shared pan/zoom/touch/drag-rect interaction controller
@@ -653,7 +651,12 @@
     ranges: () => ranges.current,
     scale_type: (axis) =>
       ({ x: x_axis, x2: x2_axis, y: y_axis, y2: y2_axis })[axis].scale_type,
-    plot_dims: () => ({ width: chart_width, height: chart_height }),
+    plot_bounds: () => ({
+      x: pad.l,
+      y: pad.t,
+      width: chart_width,
+      height: chart_height,
+    }),
     pan: () => pan,
     set_range: (axis, range) => (ranges.current[axis] = range),
     svg: () => svg_element,
@@ -718,7 +721,7 @@
 
   let hovered_legend_series_idx = $state<number | null>(null)
 
-  let legend_placement = $derived.by(() => {
+  const get_legend_placement = () => {
     if (!should_show_legend || !width || !height) return null
     return compute_element_placement({
       plot_bounds: { x: pad.l, y: pad.t, width: chart_width, height: chart_height },
@@ -728,15 +731,16 @@
       exclude_rects: [],
       points: box_points_for_placement,
     })
-  })
+  }
 
   // Tweened legend coordinates with shared placement stability gating
   const legend_tween = create_placed_tween({
-    placement: () => legend_placement,
+    placement: get_legend_placement,
     dims: () => ({ width, height }),
     responsive: () => legend?.responsive ?? false,
     element: () => legend_element,
     tween: () => legend?.tween,
+    on_element_resize: () => (legend_size_revision += 1),
   })
 
   // === Tooltip / hover ===
@@ -788,6 +792,12 @@
     on_box_hover?.({ ...hover_info, event })
   }
 
+  const clear_hover = () => {
+    hover_info = null
+    change(null)
+    on_box_hover?.(null)
+  }
+
   // Set theme-aware background when entering fullscreen
   $effect(() => set_fullscreen_bg(wrapper, fullscreen, `--boxplot-fullscreen-bg`))
 
@@ -880,9 +890,7 @@
       onkeydown={pan_zoom.on_key_down}
       onmouseleave={() => {
         hovered = false
-        hover_info = null
-        change(null)
-        on_box_hover?.(null)
+        clear_hover()
       }}
       onwheel={pan_zoom.on_wheel}
       ontouchstart={pan_zoom.on_touch_start}
@@ -1080,11 +1088,7 @@
                 ? 0.25
                 : 1}
               onmousemove={handle_box_hover(box_item, color)}
-              onmouseleave={() => {
-                hover_info = null
-                change(null)
-                on_box_hover?.(null)
-              }}
+              onmouseleave={clear_hover}
               onclick={(evt) =>
                 on_box_click?.({ ...get_box_data(box_item, color), event: evt })}
               onkeydown={(evt) => {
@@ -1215,9 +1219,9 @@
 
     {#if legend && should_show_legend}
       {@const legend_pos = placed_coords(
-        legend_auto_outside,
-        { x: legend_outside_x, y: legend_outside_y },
-        legend_placement,
+        decor.legend_outside,
+        decor.legend_pos,
+        legend_tween.placed(),
         legend_tween.coords.current,
         { x: pad.l + 10, y: pad.t + 10 },
       )}

package/dist/plot/core/auto-place.d.ts

@@ -7,7 +7,7 @@ type Size = {
     width: number;
     height: number;
 };
-export declare const placed_coords: (auto_outside: boolean, outside: Pt, placement: Pt | null, tweened: Pt, fallback: Pt) => Pt;
+export declare const placed_coords: (auto_outside: boolean, outside: Pt, placed: boolean, tweened: Pt, fallback: Pt) => Pt;
 export declare const has_explicit_position: (style?: string | null) => boolean;
 export declare const measured_footprint: (el: HTMLElement | null | undefined, fallback: Size) => Size;
 export declare function build_obstacles_norm(series: {

package/dist/plot/core/auto-place.js

@@ -4,7 +4,7 @@ import { compute_element_placement, sample_series_obstacle_points, } from './lay
 const DECOR_GAP = 8; // px gap between an outside decoration and the plot edge
 // Final on-screen position for an auto-placed decoration: explicit outside placement
 // wins, then the tweened auto placement, else a static padding fallback
-export const placed_coords = (auto_outside, outside, placement, tweened, fallback) => (auto_outside ? outside : placement ? tweened : fallback);
+export const placed_coords = (auto_outside, outside, placed, tweened, fallback) => (auto_outside ? outside : placed ? tweened : fallback);
 // True when the user pinned a decoration via its style (an edge property or position:absolute),
 // in which case auto-placement must leave it alone.
 export const has_explicit_position = (style) => /(?:^|[;{]\s*)(?:top|bottom|left|right)\s*:|position\s*:\s*absolute/.test(style ?? ``);

package/dist/plot/core/data-transform.d.ts

@@ -1,5 +1,5 @@
 import type { D3SymbolName } from '../../labels';
-import type { DataSeries, Point } from '..';
+import type { DataSeries } from '..';
 export declare const get_series_color: (series_idx: number) => string;
 export declare const get_series_symbol: (series_idx: number) => D3SymbolName;
 export declare const extract_series_color: (series_data: DataSeries) => string;
@@ -12,5 +12,4 @@ export declare const prepare_legend_data: (series: DataSeries[]) => {
         symbol_color: string;
     };
 }[];
-export declare const create_data_points: (series: DataSeries[], filter_fn?: (series: DataSeries) => boolean) => Point[];
 export declare function process_prop<T>(prop: T[] | T | undefined | null, idx: number): T | undefined;

package/dist/plot/core/data-transform.js

@@ -28,16 +28,6 @@ export const prepare_legend_data = (series) => series.map((series_data, series_i
         symbol_color: extract_series_color(series_data),
     },
 }));
-// Create data points from series for analysis
-export const create_data_points = (series, filter_fn) => series
-    .filter(filter_fn ?? ((srs) => srs.visible ?? true))
-    .flatMap(({ x: xs, y: ys }, series_idx) => {
-    const length = Math.min(xs.length, ys.length);
-    if (xs.length !== ys.length) {
-        console.warn(`length mismatch in series ${series_idx}: x.length=${xs.length} vs y.length=${ys.length}`);
-    }
-    return xs.slice(0, length).map((x, idx) => ({ x, y: ys[idx] }));
-});
 // Process array or scalar properties for indexed access.
 // If prop is an array, returns the element at the given index.
 // If prop is a scalar, returns the scalar (applied to all indices).

package/dist/plot/core/layout.d.ts

@@ -10,10 +10,15 @@ export declare const DEFAULT_PLOT_PADDING: Required<Sides>;
 export declare function y2_axis_label_x(axis: AxisConfig, width: number, pad_r: number, max_tick_width: number): number;
 export declare const filter_padding: (padding: Partial<Sides> | undefined | null, defaults: Required<Sides>) => Required<Sides>;
 export declare function measure_text_width(text: string, font?: string): number;
-export declare function measure_full_footprint(el: HTMLElement): {
+type Size = {
     width: number;
     height: number;
 };
+type ElementFootprint = Size & {
+    offset_x: number;
+    offset_y: number;
+};
+export declare const full_footprint_or: (el: HTMLElement | null | undefined, fallback: Size) => ElementFootprint;
 export interface AutoPaddingConfig {
     padding: Partial<Sides>;
     default_padding: Required<Sides>;
@@ -52,10 +57,7 @@ export declare const centered_rect: (center_x: number, top_y: number, width: num
 export declare const rect_within_rect: (rect: Rect, bounds: Rect) => boolean;
 export interface ElementPlacementConfig {
     plot_bounds: Rect;
-    element_size: {
-        width: number;
-        height: number;
-    };
+    element_size: Size;
     element?: HTMLElement | null;
     axis_clearance?: number;
     exclude_rects?: Rect[];
@@ -70,6 +72,10 @@ export interface ElementPlacementResult {
     y: number;
     score: number;
 }
+export declare const point_in_rect: (point: {
+    x: number;
+    y: number;
+}, rect: Rect) => boolean;
 export declare const rects_overlap: (r1: Rect, r2: Rect) => boolean;
 export declare function sample_series_obstacle_points(pixel_points: {
     x: number;
@@ -79,3 +85,4 @@ export declare function sample_series_obstacle_points(pixel_points: {
     y: number;
 }[];
 export declare function compute_element_placement(config: ElementPlacementConfig): ElementPlacementResult;
+export {};