matterviz 0.4.1 → 0.4.2

package/dist/plot/treemap/Treemap.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { D3InterpolateName } from '../../colors';
+import type { Vec2 } from '../../math';
+import type { BasePlotProps, LegendConfig, SunburstLabelText, SunburstSort, SunburstValueMode } from '..';
+import { ColorBar } from '..';
+import type { Rect, Sides } from '../core/layout';
+import type { PositionedArc } from '../sunburst/sunburst';
+import type { TreemapNode, TreemapNodeHandlerProps } from './treemap';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
+declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, "change"> & {
+        data?: TreemapNode<Metadata> | TreemapNode<Metadata>[];
+        value_mode?: SunburstValueMode;
+        sort?: SunburstSort;
+        level_lighten?: number;
+        min_fraction?: number;
+        other_label?: string;
+        max_depth?: number;
+        padding_inner?: number;
+        padding_top?: number;
+        padding_outer?: number;
+        show_labels?: boolean;
+        label_text?: SunburstLabelText;
+        zoom_on_click?: boolean;
+        zoom_root_id?: string | number | null;
+        show_breadcrumbs?: boolean;
+        color_values?: (rect: PositionedArc<Metadata>) => number | null;
+        color_scale?: D3InterpolateName;
+        color_range?: Vec2;
+        colorbar?: ComponentProps<typeof ColorBar> | null;
+        export_buttons?: boolean;
+        export_filename?: string;
+        tween?: Omit<TweenOptions<Rect[]>, `interpolate`>;
+        value_format?: string;
+        padding?: Sides;
+        legend?: LegendConfig | null;
+        show_legend?: boolean;
+        tooltip?: Snippet<[TreemapNodeHandlerProps<Metadata>]>;
+        cell_content?: Snippet<[{
+            arc: PositionedArc<Metadata>;
+            rect: Rect;
+        }]>;
+        change?: (data: TreemapNodeHandlerProps<Metadata> | null) => void;
+        on_node_click?: (data: TreemapNodeHandlerProps<Metadata> & {
+            event: MouseEvent | KeyboardEvent;
+        }) => void;
+        on_node_hover?: (data: (TreemapNodeHandlerProps<Metadata> & {
+            event: MouseEvent | FocusEvent;
+        }) | null) => void;
+        on_zoom?: (data: {
+            root: TreemapNodeHandlerProps<Metadata> | null;
+        }) => void;
+        header_controls?: Snippet<[{
+            height: number;
+            width: number;
+            fullscreen: boolean;
+        }]>;
+        controls_extra?: Snippet<[{
+            zoom_root_id: string | number | null;
+        }]>;
+    };
+    exports: {};
+    bindings: "show_controls" | "data" | "show_labels" | "fullscreen" | "hovered" | "controls_open" | "padding_inner" | "padding_top" | "padding_outer" | "value_mode" | "max_depth" | "min_fraction" | "label_text" | "zoom_on_click" | "show_breadcrumbs" | "zoom_root_id";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Metadata extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<Metadata>>['props'];
+    events(): ReturnType<typeof $$render<Metadata>>['events'];
+    slots(): ReturnType<typeof $$render<Metadata>>['slots'];
+    bindings(): "show_controls" | "data" | "show_labels" | "fullscreen" | "hovered" | "controls_open" | "padding_inner" | "padding_top" | "padding_outer" | "value_mode" | "max_depth" | "min_fraction" | "label_text" | "zoom_on_click" | "show_breadcrumbs" | "zoom_root_id";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Metadata extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Metadata>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Metadata>['props']>, ReturnType<__sveltets_Render<Metadata>['events']>, ReturnType<__sveltets_Render<Metadata>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Metadata>['bindings']>;
+    } & ReturnType<__sveltets_Render<Metadata>['exports']>;
+    <Metadata extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<Metadata>['props']> & {}): ReturnType<__sveltets_Render<Metadata>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Treemap: $$IsomorphicComponent;
+type Treemap<Metadata extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof Treemap<Metadata>>;
+export default Treemap;

package/dist/plot/treemap/index.d.ts

@@ -0,0 +1,3 @@
+export * from './treemap';
+export { default as Treemap } from './Treemap.svelte';
+export { default as TreemapControls } from '../core/components/HierarchyControls.svelte';

package/dist/plot/treemap/index.js

@@ -0,0 +1,4 @@
+export * from './treemap';
+export { default as Treemap } from './Treemap.svelte';
+// Shared with Sunburst; pass chart="treemap"
+export { default as TreemapControls } from '../core/components/HierarchyControls.svelte';

package/dist/plot/treemap/treemap.d.ts

@@ -0,0 +1,26 @@
+import type { Rect } from '../core/layout';
+import type { PositionedArc, SunburstLayoutOptions, SunburstNode, SunburstNodeHandlerProps } from '../sunburst/sunburst';
+export type TreemapNode<Metadata = Record<string, unknown>> = SunburstNode<Metadata>;
+export type TreemapArc<Metadata = Record<string, unknown>> = PositionedArc<Metadata>;
+export type TreemapNodeHandlerProps<Metadata = Record<string, unknown>> = SunburstNodeHandlerProps<Metadata>;
+export type TreemapLayoutOptions = SunburstLayoutOptions;
+export interface TilePadding {
+    padding_inner: number;
+    padding_top: number;
+    padding_outer: number;
+}
+export declare function tile_rects<Metadata>(arcs: readonly PositionedArc<Metadata>[], root_idx: number, size: {
+    width: number;
+    height: number;
+}, pad: TilePadding): Rect[];
+export declare function lerp_rects(prev: readonly Rect[], next: readonly Rect[], t: number): Rect[];
+export interface TreemapLayoutResult<Metadata = Record<string, unknown>> {
+    arcs: TreemapArc<Metadata>[];
+    rects: Rect[];
+    root: TreemapArc<Metadata> | null;
+    max_depth: number;
+}
+export declare function compute_treemap_layout<Metadata = Record<string, unknown>>(data: TreemapNode<Metadata> | TreemapNode<Metadata>[], size: {
+    width: number;
+    height: number;
+}, opts?: TreemapLayoutOptions & Partial<TilePadding>): TreemapLayoutResult<Metadata>;

package/dist/plot/treemap/treemap.js

@@ -0,0 +1,99 @@
+// Layout helpers for Treemap charts. All tree semantics (value modes, sorting,
+// 'Other' bucketing, color inheritance, stable ids, pre-order indexing) are
+// delegated to compute_sunburst_layout — a treemap is the same hierarchy with
+// squarified pixel rects instead of polar partition coordinates, so the two
+// charts share data builders (sunburst_from_paths, chem_sys_sunburst_data, …)
+// and value semantics (plotly branchvalues) by construction.
+import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';
+import { compute_sunburst_layout } from '../sunburst/sunburst';
+import { DEFAULTS } from '../../settings';
+// Fresh object per call: returned rect arrays hand these to consumers, and a
+// shared constant would let mutating one zero rect corrupt every other one
+const zero_rect = () => ({ x: 0, y: 0, width: 0, height: 0 });
+// Squarify the subtree under arcs[root_idx] into pixel rects filling `size`.
+// Returns an array aligned with `arcs` by node_idx (nodes outside the subtree
+// get zero rects). Separate from tree-semantics so zooming re-tiles the new
+// root's subtree to the full viewport (plotly behavior) — unlike the sunburst's
+// size-independent partition, squarified tiling depends on the target aspect
+// ratio, so projecting one fixed layout through a zoom window would distort
+// cells and scale up the fixed-px header strips.
+export function tile_rects(arcs, root_idx, size, pad) {
+    const rects = arcs.map(zero_rect);
+    const root_arc = arcs[root_idx];
+    if (!root_arc || !(size.width > 0) || !(size.height > 0))
+        return rects;
+    // Rebuild the (already value-resolved, sorted and bucketed) subtree from the
+    // flat pre-order arcs: children of arc N are the top-level subtree ranges in
+    // (N, N.subtree_end].
+    const children_of = (arc) => {
+        const kids = [];
+        for (let idx = arc.node_idx + 1; idx <= arc.subtree_end; idx = arcs[idx].subtree_end + 1) {
+            kids.push(arcs[idx]);
+        }
+        return kids;
+    };
+    const root = hierarchy(root_arc, children_of);
+    // Values are assigned manually (the documented d3 way to bypass .sum()) so all
+    // three value modes carry over — with 'total', children summing to less than
+    // their parent leave unfilled space in the parent cell, matching plotly.
+    // Non-finite/negative values would make d3's tiling emit NaN/out-of-bounds
+    // rects; coerce them to zero-size instead of corrupting the whole chart.
+    root.each((node) => {
+        const { value } = node.data;
+        node.value = Number.isFinite(value) && value >= 0 ? value : 0;
+    });
+    const tiled = treemap()
+        .tile(treemapSquarify)
+        .size([size.width, size.height])
+        .paddingInner(pad.padding_inner)
+        // inset children within branch cells below the tiling root (the root fills
+        // the viewport and is labeled by breadcrumbs, not a frame + header) …
+        .paddingOuter((node) => (node.depth > 0 ? pad.padding_outer : 0))
+        // … with the top inset enlarged into the label header strip. paddingTop is
+        // applied after paddingOuter, overriding its top component.
+        .paddingTop((node) => node.depth > 0 && node.children ? Math.max(pad.padding_top, pad.padding_outer) : 0)(root);
+    // Clamp to the tiling area: with value_mode 'total', children exceeding their
+    // parent's value overflow the parent rect (d3 scales children by parent value;
+    // compute_sunburst_layout warns). Clamping keeps overflow inside the chart,
+    // mirroring the sunburst's clamp01 window projection.
+    const clamp_x = (val) => Math.min(Math.max(val, 0), size.width);
+    const clamp_y = (val) => Math.min(Math.max(val, 0), size.height);
+    tiled.each((node) => {
+        const x = clamp_x(node.x0);
+        const y = clamp_y(node.y0);
+        rects[node.data.node_idx] = {
+            x,
+            y,
+            width: Math.max(0, clamp_x(node.x1) - x),
+            height: Math.max(0, clamp_y(node.y1) - y),
+        };
+    });
+    return rects;
+}
+// Interpolate between two tilings (zoom animation). Rects are aligned by
+// node_idx; frames allocate one array but reuse rect objects at t = 0/1.
+export function lerp_rects(prev, next, t) {
+    if (t >= 1 || prev.length !== next.length)
+        return next;
+    if (t <= 0)
+        return prev;
+    return next.map((to, idx) => {
+        const from = prev[idx];
+        return {
+            x: from.x + (to.x - from.x) * t,
+            y: from.y + (to.y - from.y) * t,
+            width: from.width + (to.width - from.width) * t,
+            height: from.height + (to.height - from.height) * t,
+        };
+    });
+}
+// One-shot semantic layout + root tiling (tests and non-zooming callers; the
+// component calls compute_sunburst_layout and tile_rects separately so zoom
+// re-tiles without recomputing tree semantics).
+export function compute_treemap_layout(data, size, opts = {}) {
+    // padding fallbacks derive from DEFAULTS.treemap to prevent drift with the component
+    const { padding_inner = DEFAULTS.treemap.padding_inner, padding_top = DEFAULTS.treemap.padding_top, padding_outer = DEFAULTS.treemap.padding_outer, ...tree_opts } = opts;
+    const { arcs, root, max_depth } = compute_sunburst_layout(data, tree_opts);
+    const rects = tile_rects(arcs, 0, size, { padding_inner, padding_top, padding_outer });
+    return { arcs, rects, root, max_depth };
+}

package/dist/rdf/RdfPlot.svelte

@@ -56,9 +56,7 @@
 
   const compute_and_add = (content: string | ArrayBuffer, filename: string) => {
     try {
-      const text = content instanceof ArrayBuffer
-        ? new TextDecoder().decode(content)
-        : content
+      const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
       const parsed_struct = parse_any_structure(text, filename)
       if (is_crystal(parsed_struct)) {
         drag_dropped = [...drag_dropped, parsed_struct]
@@ -66,16 +64,13 @@
         error_msg = `Crystal has no lattice or sites; cannot compute RDF`
       }
     } catch (exc) {
-      error_msg = `Failed to process structure: ${
-        to_error(exc).message
-      }`
+      error_msg = `Failed to process structure: ${to_error(exc).message}`
     }
   }
 
   const handle_drop = create_file_drop_handler({
     allow: () => enable_drop,
-    on_drop: (content, filename) =>
-      (on_file_drop || compute_and_add)(content, filename),
+    on_drop: (content, filename) => (on_file_drop || compute_and_add)(content, filename),
     on_error: (msg) => {
       error_msg = msg
     },
@@ -85,9 +80,9 @@
     },
   })
 
-  function handle_dragover(ev: DragEvent) {
-    ev.preventDefault()
-    if (ev.dataTransfer) ev.dataTransfer.dropEffect = `copy`
+  function handle_dragover(event: DragEvent) {
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = `copy`
     dragging = true
   }
 
@@ -108,7 +103,7 @@
           struct_list.push({
             struct,
             label: format_structure_label(struct, `Crystal ${idx + 1}`),
-          })
+          }),
         )
       } else if (is_crystal(structures)) {
         struct_list.push({
@@ -117,7 +112,7 @@
         })
       } else {
         Object.entries(structures).forEach(([label, struct]) =>
-          struct_list.push({ struct, label: format_structure_label(struct, label) })
+          struct_list.push({ struct, label: format_structure_label(struct, label) }),
         )
       }
     }
@@ -125,17 +120,21 @@
       struct_list.push({
         struct,
         label: format_structure_label(struct, `Dropped ${idx + 1}`),
-      })
+      }),
     )
 
     for (const { struct, label } of struct_list) {
       if (mode === `element_pairs`) {
         const pairs = calculate_all_pair_rdfs(struct, { cutoff, n_bins, pbc })
-        result.push(...pairs.map((pair) => ({
-          label: pair.element_pair ? `${pair.element_pair[0]}-${pair.element_pair[1]}` : label,
-          legend_group: label, // Group by structure name for multi-structure plots
-          pattern: pair,
-        })))
+        result.push(
+          ...pairs.map((pair) => ({
+            label: pair.element_pair
+              ? `${pair.element_pair[0]}-${pair.element_pair[1]}`
+              : label,
+            legend_group: label, // Group by structure name for multi-structure plots
+            pattern: pair,
+          })),
+        )
       } else {
         const pattern = calculate_rdf(struct, { cutoff, n_bins, pbc })
         result.push({ label, pattern })
@@ -146,7 +145,6 @@
 
   const max_r = $derived(Math.max(...entries.flatMap((entry) => entry.pattern.r), 0))
   const max_g = $derived(Math.max(1.2, ...entries.flatMap((entry) => entry.pattern.g_r)))
-
   const series = $derived<DataSeries[]>(
     entries.map((ent, idx) => ({
       x: ent.pattern.r,
@@ -182,8 +180,8 @@
   >
     <StatusMessage
       message={enable_drop
-      ? `Drag and drop structure files here to visualize RDFs`
-      : `No RDF data to display`}
+        ? `Drag and drop structure files here to visualize RDFs`
+        : `No RDF data to display`}
       style="border: none"
     />
   </div>
@@ -194,7 +192,7 @@
     x_axis={{ label: `r (Å)`, range: [0, max_r], ...x_axis }}
     y_axis={{ label: `g(r)`, range: [0, max_g * 1.05], ...y_axis }}
     styles={{ show_lines: true, show_points: false }}
-    class="{rest.class ?? ``} {dragging ? `dragging` : ``}"
+    class={[rest.class, dragging && `dragging`]}
     style={rest.style ?? `height: 400px;`}
     ondragover={enable_drop ? handle_dragover : undefined}
     ondragleave={enable_drop ? () => (dragging = false) : undefined}
@@ -207,9 +205,7 @@
           {@const [x1, x2] = [pad.l, width - pad.r]}
           {@const [x, y] = [width - pad.r - 5, y1 - 5]}
           <line {x1} {x2} {y1} y2={y1} stroke="gray" stroke-dasharray="4" opacity="0.5" />
-          <text {x} {y} text-anchor="end" fill="gray" font-size="0.8em">
-            g(r) = 1
-          </text>
+          <text {x} {y} text-anchor="end" fill="gray" font-size="0.8em"> g(r) = 1 </text>
         {/if}
       {/if}
     {/snippet}

package/dist/rdf/RdfPlot.svelte.d.ts

@@ -22,6 +22,6 @@ type $$ComponentProps = {
     drag_dropped?: Crystal[];
     dragging?: boolean;
 } & ComponentProps<typeof ScatterPlot>;
-declare const RdfPlot: import("svelte").Component<$$ComponentProps, {}, "loading" | "dragging" | "error_msg" | "drag_dropped">;
+declare const RdfPlot: import("svelte").Component<$$ComponentProps, {}, "dragging" | "loading" | "error_msg" | "drag_dropped">;
 type RdfPlot = ReturnType<typeof RdfPlot>;
 export default RdfPlot;

package/dist/rdf/calc-rdf.js

@@ -42,12 +42,11 @@ export function calculate_rdf(structure, options = {}) {
     // Get occupancy weight for a site-species pair (supports mixed occupancy)
     const centers = center_sites.filter((site) => has_species(site, center_species));
     const neighbors = sites.filter((site) => has_species(site, neighbor_species));
-    if (centers.length === 0 || neighbors.length === 0) {
-        const element_pair = center_species && neighbor_species
-            ? [center_species, neighbor_species]
-            : undefined;
+    const element_pair = center_species && neighbor_species
+        ? [center_species, neighbor_species]
+        : undefined;
+    if (centers.length === 0 || neighbors.length === 0)
         return { r, g_r, element_pair };
-    }
     // Calculate distances and bin them with occupancy weighting
     const use_pbc = pbc.some(Boolean);
     const converters = use_pbc ? create_lattice_converters(lattice) : undefined;
@@ -78,9 +77,6 @@ export function calculate_rdf(structure, options = {}) {
             g_r[idx] /= n_pairs * ((4 * Math.PI * r[idx] ** 2 * bin_size) / volume);
         }
     }
-    const element_pair = center_species && neighbor_species
-        ? [center_species, neighbor_species]
-        : undefined;
     return { r, g_r, element_pair };
 }
 // Calculate RDF for all element pairs

package/dist/sanitize.js

@@ -3,7 +3,7 @@ import { format_formula_html } from './phase-diagram/utils';
 const SAFE_TAGS = [`a`, `b`, `i`, `em`, `strong`, `sub`, `sup`, `br`, `span`, `code`, `small`];
 const SAFE_ATTRS = [`style`, `class`, `title`, `href`, `target`, `rel`];
 // only allow safe CSS properties for text formatting
-const SAFE_STYLE_RE = /^\s*(color|font-weight|font-style|font-size|text-decoration|vertical-align)\s*:/;
+const SAFE_STYLE_RE = /^\s*(?:color|font-weight|font-style|font-size|text-decoration|vertical-align)\s*:/;
 // Add a token to a space-separated string if not already present
 const ensure_token = (value, token) => {
     const tokens = new Set(value.split(/\s+/).filter(Boolean));

package/dist/scene/bind-renderer.svelte.js

@@ -1,14 +1,22 @@
-import { renderer_registry } from '../io/export';
+import { renderer_registry, scene_registry } from '../io/export';
 import { useThrelte } from '@threlte/core';
-// Mirror the Threlte scene + active camera into bindable props (for export panes etc.) and register the canvas->renderer mapping so PNG-export helpers can find it. Creates an $effect (call during component init). Returns the Threlte context for further use (e.g. clipping planes).
+// Mirror the Threlte scene + active camera into bindable props (for export panes etc.) and register the canvas->renderer/scene mappings so PNG-export and element-capture helpers can find them. Creates an $effect (call during component init). Returns the Threlte context for further use (e.g. clipping planes).
 export function bind_renderer(on_bind, on_renderer) {
     const threlte = useThrelte();
     $effect(() => {
-        on_bind(threlte.scene, threlte.camera.current);
-        if (threlte.renderer) {
-            on_renderer?.(threlte.renderer);
-            renderer_registry.set(threlte.renderer.domElement, threlte.renderer);
+        const renderer = threlte.renderer;
+        // `camera.current` is not reactive, so subscribe to be notified when the active camera changes
+        const unsubscribe = threlte.camera.subscribe((camera) => {
+            on_bind(threlte.scene, camera);
+            if (renderer) {
+                scene_registry.set(renderer.domElement, { scene: threlte.scene, camera });
+            }
+        });
+        if (renderer) {
+            on_renderer?.(renderer);
+            renderer_registry.set(renderer.domElement, renderer);
         }
+        return unsubscribe;
     });
     return threlte;
 }

package/dist/settings.d.ts

@@ -111,6 +111,15 @@ type ConvexHullWith3DType = ConvexHullCommonType & {
     hull_face_opacity: SettingType<number>;
     hull_face_color_mode: SettingType<HullFaceColorMode>;
 };
+type HierarchyChartSettingsSchema = {
+    value_mode: SettingType<SunburstValueMode>;
+    max_depth: SettingType<number>;
+    min_fraction: SettingType<number>;
+    show_labels: SettingType<boolean>;
+    label_text: SettingType<SunburstLabelText>;
+    zoom_on_click: SettingType<boolean>;
+    show_breadcrumbs: SettingType<boolean>;
+};
 export interface SettingsConfig {
     color_scheme: SettingType<string>;
     background_color: SettingType<string>;
@@ -289,18 +298,16 @@ export interface SettingsConfig {
         show_node_labels: SettingType<boolean>;
         iterations: SettingType<number>;
     };
-    sunburst: {
+    sunburst: HierarchyChartSettingsSchema & {
         shape: SettingType<SunburstShape>;
-        value_mode: SettingType<SunburstValueMode>;
-        max_depth: SettingType<number>;
         inner_radius: SettingType<number>;
         pad_angle: SettingType<number>;
-        min_fraction: SettingType<number>;
-        show_labels: SettingType<boolean>;
         label_rotation: SettingType<SunburstLabelRotation>;
-        label_text: SettingType<SunburstLabelText>;
-        zoom_on_click: SettingType<boolean>;
-        show_breadcrumbs: SettingType<boolean>;
+    };
+    treemap: HierarchyChartSettingsSchema & {
+        padding_inner: SettingType<number>;
+        padding_top: SettingType<number>;
+        padding_outer: SettingType<number>;
     };
     composition: {
         display_mode: SettingType<`pie` | `bubble` | `bar`>;
@@ -327,5 +334,8 @@ export type DefaultSettings = {
     } : never;
 };
 export declare const DEFAULTS: DefaultSettings;
-export declare const merge: (user?: Partial<DefaultSettings>) => DefaultSettings;
+export type PartialSettings = {
+    [Key in keyof DefaultSettings]?: DefaultSettings[Key] extends Record<string, unknown> ? Partial<DefaultSettings[Key]> : DefaultSettings[Key];
+};
+export declare const merge: (user?: PartialSettings) => DefaultSettings;
 export {};