matterviz 0.3.2 → 0.3.4

package/dist/plot/utils/series-visibility.js

@@ -44,7 +44,7 @@ export function handle_legend_double_click(series, idx, prev_visibility) {
     const check_series = prev_visibility ? series.slice(0, prev_visibility.length) : series;
     const is_isolated = check_series.every((srs, srs_idx) => {
         const in_group = label ? srs.label === label : srs_idx === idx;
-        return in_group ? srs.visible ?? true : !(srs.visible ?? true);
+        return in_group ? (srs.visible ?? true) : !(srs.visible ?? true);
     });
     // Restore from isolation
     if (is_isolated && prev_visibility) {
@@ -56,8 +56,7 @@ export function handle_legend_double_click(series, idx, prev_visibility) {
         };
     }
     // Isolate series
-    const new_prev = prev_visibility ??
-        (current.filter(Boolean).length > 1 ? [...current] : null);
+    const new_prev = prev_visibility ?? (current.filter(Boolean).length > 1 ? [...current] : null);
     return {
         series: series.map((srs, srs_idx) => {
             const in_group = label ? srs.label === label : srs_idx === idx;

package/dist/rdf/RdfPlot.svelte

@@ -1,113 +1,165 @@
-<script lang="ts">import { PLOT_COLORS } from '../colors';
-import { get_electro_neg_formula } from '../composition';
-import { StatusMessage } from '../feedback';
-import { create_file_drop_handler } from '../io';
-import { ScatterPlot } from '../plot';
-import { parse_any_structure } from '../structure/parse';
-import { is_crystal } from '../structure/validation';
-import { calculate_all_pair_rdfs, calculate_rdf } from './index';
-let { patterns, structures, mode = `element_pairs`, show_reference_line = true, x_axis = {}, y_axis = {}, cutoff = 15, n_bins = 75, pbc = [true, true, true], enable_drop = false, on_file_drop, loading = $bindable(false), error_msg = $bindable(), children, drag_dropped = $bindable([]), dragging = $bindable(false), ...rest } = $props();
-function format_structure_label(struct, label_base) {
-    const formula = get_electro_neg_formula(struct);
-    return formula && label_base ? `${formula}: ${label_base}` : formula || label_base;
-}
-const compute_and_add = (content, filename) => {
+<script lang="ts">
+  import { PLOT_COLORS } from '../colors'
+  import { get_electro_neg_formula } from '../composition'
+  import { StatusMessage } from '../feedback'
+  import { create_file_drop_handler } from '../io'
+  import type { DataSeries } from '../plot'
+  import { ScatterPlot } from '../plot'
+  import type { Crystal, Pbc } from '../structure'
+  import { parse_any_structure } from '../structure/parse'
+  import { is_crystal } from '../structure/validation'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import { calculate_all_pair_rdfs, calculate_rdf, type RdfEntry } from './index'
+
+  let {
+    patterns,
+    structures,
+    mode = `element_pairs`,
+    show_reference_line = true,
+    x_axis = {},
+    y_axis = {},
+    cutoff = 15,
+    n_bins = 75,
+    pbc = [true, true, true],
+    enable_drop = false,
+    on_file_drop,
+    loading = $bindable(false),
+    error_msg = $bindable(),
+    children,
+    drag_dropped = $bindable([]),
+    dragging = $bindable(false),
+    ...rest
+  }: {
+    patterns?: RdfEntry | RdfEntry[]
+    structures?: Crystal | Crystal[] | Record<string, Crystal>
+    mode?: `element_pairs` | `full`
+    show_reference_line?: boolean
+    x_axis?: ComponentProps<typeof ScatterPlot>[`x_axis`]
+    y_axis?: ComponentProps<typeof ScatterPlot>[`y_axis`]
+    cutoff?: number
+    n_bins?: number
+    pbc?: Pbc
+    enable_drop?: boolean
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    loading?: boolean
+    error_msg?: string
+    children?: Snippet<[{ drag_dropped: Crystal[] }]>
+    drag_dropped?: Crystal[]
+    dragging?: boolean
+  } & ComponentProps<typeof ScatterPlot> = $props()
+
+  function format_structure_label(struct: Crystal, label_base: string): string {
+    const formula = get_electro_neg_formula(struct)
+    return formula && label_base ? `${formula}: ${label_base}` : formula || label_base
+  }
+
+  const compute_and_add = (content: string | ArrayBuffer, filename: string) => {
     try {
-        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];
-        }
-        else {
-            error_msg = `Crystal has no lattice or sites; cannot compute RDF`;
-        }
+      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]
+      } else {
+        error_msg = `Crystal has no lattice or sites; cannot compute RDF`
+      }
+    } catch (exc) {
+      error_msg = `Failed to process structure: ${
+        exc instanceof Error ? exc.message : String(exc)
+      }`
     }
-    catch (exc) {
-        error_msg = `Failed to process structure: ${exc instanceof Error ? exc.message : String(exc)}`;
-    }
-};
-const handle_drop = create_file_drop_handler({
+  }
+
+  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;
+      error_msg = msg
     },
     set_loading: (val) => {
-        loading = val;
-        if (val)
-            [error_msg, dragging] = [undefined, false];
+      loading = val
+      if (val) [error_msg, dragging] = [undefined, false]
     },
-});
-function handle_dragover(ev) {
-    ev.preventDefault();
-    if (ev.dataTransfer)
-        ev.dataTransfer.dropEffect = `copy`;
-    dragging = true;
-}
-const entries = $derived.by(() => {
-    const result = [];
+  })
+
+  function handle_dragover(ev: DragEvent) {
+    ev.preventDefault()
+    if (ev.dataTransfer) ev.dataTransfer.dropEffect = `copy`
+    dragging = true
+  }
+
+  const entries = $derived.by(() => {
+    const result: RdfEntry[] = []
+
     // Add patterns
     if (patterns) {
-        if (Array.isArray(patterns))
-            result.push(...patterns);
-        else
-            result.push(patterns);
+      if (Array.isArray(patterns)) result.push(...patterns)
+      else result.push(patterns)
     }
+
     // Add structures
-    const struct_list = [];
+    const struct_list: { struct: Crystal; label: string }[] = []
     if (structures) {
-        if (Array.isArray(structures)) {
-            structures.forEach((struct, idx) => struct_list.push({
-                struct,
-                label: format_structure_label(struct, `Crystal ${idx + 1}`),
-            }));
-        }
-        else if (is_crystal(structures)) {
-            struct_list.push({
-                struct: structures,
-                label: format_structure_label(structures, ``),
-            });
-        }
-        else {
-            Object.entries(structures).forEach(([label, struct]) => struct_list.push({ struct, label: format_structure_label(struct, label) }));
-        }
+      if (Array.isArray(structures)) {
+        structures.forEach((struct, idx) =>
+          struct_list.push({
+            struct,
+            label: format_structure_label(struct, `Crystal ${idx + 1}`),
+          })
+        )
+      } else if (is_crystal(structures)) {
+        struct_list.push({
+          struct: structures,
+          label: format_structure_label(structures, ``),
+        })
+      } else {
+        Object.entries(structures).forEach(([label, struct]) =>
+          struct_list.push({ struct, label: format_structure_label(struct, label) })
+        )
+      }
     }
-    drag_dropped.forEach((struct, idx) => struct_list.push({
+    drag_dropped.forEach((struct, idx) =>
+      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((p) => ({
-                label: p.element_pair ? `${p.element_pair[0]}-${p.element_pair[1]}` : label,
-                legend_group: label, // Group by structure name for multi-structure plots
-                pattern: p,
-            })));
-        }
-        else {
-            const pattern = calculate_rdf(struct, { cutoff, n_bins, pbc });
-            result.push({ label, pattern });
-        }
+      if (mode === `element_pairs`) {
+        const pairs = calculate_all_pair_rdfs(struct, { cutoff, n_bins, pbc })
+        result.push(...pairs.map((p) => ({
+          label: p.element_pair ? `${p.element_pair[0]}-${p.element_pair[1]}` : label,
+          legend_group: label, // Group by structure name for multi-structure plots
+          pattern: p,
+        })))
+      } else {
+        const pattern = calculate_rdf(struct, { cutoff, n_bins, pbc })
+        result.push({ label, pattern })
+      }
     }
-    return result;
-});
-const max_r = $derived(Math.max(...entries.flatMap((e) => e.pattern.r), 0));
-const max_g = $derived(Math.max(1.2, ...entries.flatMap((e) => e.pattern.g_r)));
-const series = $derived(entries.map((ent, idx) => ({
-    x: ent.pattern.r,
-    y: ent.pattern.g_r,
-    label: ent.label,
-    legend_group: ent.legend_group,
-    visible: mode === `element_pairs` ? idx < 3 : true,
-    markers: `line`,
-    line_style: {
+    return result
+  })
+
+  const max_r = $derived(Math.max(...entries.flatMap((e) => e.pattern.r), 0))
+  const max_g = $derived(Math.max(1.2, ...entries.flatMap((e) => e.pattern.g_r)))
+
+  const series = $derived<DataSeries[]>(
+    entries.map((ent, idx) => ({
+      x: ent.pattern.r,
+      y: ent.pattern.g_r,
+      label: ent.label,
+      legend_group: ent.legend_group,
+      visible: mode === `element_pairs` ? idx < 3 : true,
+      markers: `line` as const,
+      line_style: {
         stroke: ent.color ?? PLOT_COLORS[idx % PLOT_COLORS.length],
         stroke_width: 2,
-    },
-})));
+      },
+    })),
+  )
 </script>
 
 <StatusMessage bind:message={error_msg} type="error" dismissible />

package/dist/rdf/calc-rdf.js

@@ -1,4 +1,4 @@
-import { calc_lattice_params, euclidean_dist, matrix_inverse_3x3, pbc_dist, } from '../math';
+import { calc_lattice_params, create_lattice_converters, euclidean_dist, pbc_dist, } from '../math';
 import { make_supercell } from '../structure/supercell';
 // Calculate radial distribution function
 export function calculate_rdf(structure, options = {}) {
@@ -45,18 +45,17 @@ export function calculate_rdf(structure, options = {}) {
     }
     // Calculate distances and bin them with occupancy weighting
     const use_pbc = pbc.some((flag) => flag);
-    const lattice_inv = use_pbc ? matrix_inverse_3x3(lattice) : undefined;
+    const converters = use_pbc ? create_lattice_converters(lattice) : undefined;
     for (const center of centers) {
         for (const neighbor of neighbors) {
             if (center === neighbor)
                 continue;
             const dist = use_pbc
-                ? pbc_dist(center.xyz, neighbor.xyz, lattice, lattice_inv, pbc)
+                ? pbc_dist(center.xyz, neighbor.xyz, lattice, converters, pbc)
                 : euclidean_dist(center.xyz, neighbor.xyz);
             if (dist > 0 && dist < cutoff) {
                 // Weight by product of occupancies for the species pair
-                const weight = get_occu(center, center_species) *
-                    get_occu(neighbor, neighbor_species);
+                const weight = get_occu(center, center_species) * get_occu(neighbor, neighbor_species);
                 g_r[Math.min(Math.floor(dist / bin_size), n_bins - 1)] += weight;
             }
         }

package/dist/sanitize.d.ts

@@ -0,0 +1,4 @@
+export declare function sanitize_html(html: unknown): string;
+export declare const sanitize_formula: (formula: string, use_subscripts?: boolean) => string;
+export declare const sanitize_svg: (html: string) => string;
+export declare const sanitize_icon_svg: (html: string) => string;

package/dist/sanitize.js

@@ -0,0 +1,107 @@
+import DOMPurify from 'dompurify';
+import { format_formula_html } from './phase-diagram/utils';
+// SSR: provide a DOM for DOMPurify when no browser window exists (e.g. during vite build)
+let ssr_window;
+if (typeof globalThis.window === `undefined`) {
+    try {
+        const { Window } = await import(`happy-dom`);
+        ssr_window = new Window();
+    }
+    catch {
+        // happy-dom not available at runtime — get_purify() will fall back to pass-through
+    }
+}
+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*:/;
+// 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));
+    tokens.add(token);
+    return [...tokens].join(` `);
+};
+// undefined = not yet checked, null = no DOM available, instance = ready
+let purify;
+function get_purify() {
+    if (purify !== undefined)
+        return purify;
+    const instance = ssr_window
+        ? DOMPurify(ssr_window)
+        : DOMPurify();
+    if (typeof instance.sanitize !== `function`) {
+        purify = null;
+        return null;
+    }
+    purify = instance;
+    instance.addHook(`uponSanitizeAttribute`, (node, data) => {
+        if (data.attrName === `style`) {
+            const rules = data.attrValue.split(`;`).filter((rule) => SAFE_STYLE_RE.test(rule));
+            if (rules.length === 0)
+                data.keepAttr = false;
+            else
+                data.attrValue = rules.join(`;`);
+        }
+        // force rel="noopener" on links to prevent window.opener attacks
+        if (data.attrName === `href`) {
+            node.setAttribute(`rel`, ensure_token(node.getAttribute(`rel`) ?? ``, `noopener`));
+        }
+        if (data.attrName === `rel`) {
+            data.attrValue = ensure_token(data.attrValue, `noopener`);
+        }
+    });
+    return instance;
+}
+// Wrap in <svg>, sanitize with allowlist, then unwrap. Required because DOMPurify
+// needs the <svg> parent to parse children in the SVG namespace.
+function sanitize_svg_content(html, allowed_tags, allowed_attrs) {
+    const dp = get_purify();
+    if (!dp)
+        return html;
+    const wrapped = dp.sanitize(`<svg>${html}</svg>`, {
+        ALLOWED_TAGS: [...allowed_tags, `svg`],
+        ALLOWED_ATTR: allowed_attrs,
+    });
+    const open_end = wrapped.indexOf(`>`);
+    const close_start = wrapped.lastIndexOf(`</svg>`);
+    if (open_end < 0 || close_start < 0)
+        return wrapped;
+    return wrapped.slice(open_end + 1, close_start);
+}
+// Sanitize HTML string, allowing only safe formatting tags and links.
+// Two-pass: happy-dom promotes dangerous children when a non-allowed parent is
+// stripped (e.g. <div><script>…</script></div> → <script>…</script>). The first
+// pass explicitly removes dangerous tags so they can't survive promotion.
+export function sanitize_html(html) {
+    const str = html == null ? `` : String(html);
+    const dp = get_purify();
+    if (!dp)
+        return str;
+    // oxfmt-ignore
+    const safe = dp.sanitize(str, { ADD_ATTR: [`target`], FORBID_TAGS: [
+            `script`, `style`, `iframe`, `object`, `embed`, `form`, `input`, `textarea`,
+            `select`, `button`, `meta`, `link`, `base`, `template`, `noscript`,
+        ] });
+    return dp.sanitize(safe, { ALLOWED_TAGS: SAFE_TAGS, ALLOWED_ATTR: SAFE_ATTRS });
+}
+// Sanitize a chemical formula with optional subscript formatting
+export const sanitize_formula = (formula, use_subscripts = true) => sanitize_html(format_formula_html(formula, use_subscripts));
+const SVG_TEXT_TAGS = [`tspan`, `title`];
+// oxfmt-ignore
+const SVG_TEXT_ATTRS = [`dx`, `dy`, `x`, `y`, `fill`, `font-size`, `font-weight`, `baseline-shift`];
+// Sanitize HTML intended for SVG text contexts (tspan, title)
+export const sanitize_svg = (html) => sanitize_svg_content(html, SVG_TEXT_TAGS, SVG_TEXT_ATTRS);
+// oxfmt-ignore
+const SVG_ICON_TAGS = [
+    `path`, `circle`, `rect`, `line`, `polyline`, `polygon`, `g`, `ellipse`,
+    `clipPath`, `defs`, `mask`, `use`, `title`,
+];
+// oxfmt-ignore
+const SVG_ICON_ATTRS = [
+    `d`, `fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-linejoin`,
+    `cx`, `cy`, `r`, `rx`, `ry`, `x`, `y`, `x1`, `y1`, `x2`, `y2`,
+    `width`, `height`, `viewBox`, `points`, `transform`, `opacity`,
+    `clip-path`, `clip-rule`, `fill-rule`, `id`, `class`,
+];
+// Sanitize inline SVG markup (path, circle, rect, etc.) for icon rendering
+export const sanitize_icon_svg = (html) => sanitize_svg_content(html, SVG_ICON_TAGS, SVG_ICON_ATTRS);

package/dist/settings.d.ts

@@ -17,6 +17,13 @@ export interface SettingType<T = unknown> {
 export declare const SHOW_BONDS_OPTIONS: readonly ["never", "always", "crystals", "molecules"];
 export type ShowBonds = (typeof SHOW_BONDS_OPTIONS)[number];
 export type CameraProjection = `perspective` | `orthographic`;
+export declare const VECTOR_COLOR_MODES: readonly ["auto", "element", "spin_direction", "magnitude", "uniform"];
+export type VectorColorMode = (typeof VECTOR_COLOR_MODES)[number];
+export type VectorLayerConfig = {
+    visible: boolean;
+    color: string | null;
+    scale: number | null;
+};
 export declare const ATOM_COLOR_MODE_OPTIONS: readonly ["element", "coordination", "wyckoff", "custom"];
 export type AtomColorMode = (typeof ATOM_COLOR_MODE_OPTIONS)[number];
 type DisplayConfigType = {
@@ -122,12 +129,17 @@ export interface SettingsConfig {
         site_label_offset: SettingType<Vec3>;
         ambient_light: SettingType<number>;
         directional_light: SettingType<number>;
-        show_force_vectors: SettingType<boolean>;
-        force_scale: SettingType<number>;
-        force_color: SettingType<string>;
-        force_shaft_radius: SettingType<number>;
-        force_arrow_head_radius: SettingType<number>;
-        force_arrow_head_length: SettingType<number>;
+        vector_configs: SettingType<Record<string, VectorLayerConfig>>;
+        vector_scale: SettingType<number>;
+        vector_color: SettingType<string>;
+        vector_color_mode: SettingType<VectorColorMode>;
+        vector_color_scale: SettingType<D3InterpolateName>;
+        vector_normalize: SettingType<boolean>;
+        vector_uniform_thickness: SettingType<boolean>;
+        vector_origin_gap: SettingType<number>;
+        vector_shaft_radius: SettingType<number>;
+        vector_arrow_head_radius: SettingType<number>;
+        vector_arrow_head_length: SettingType<number>;
         show_cell: SettingType<boolean>;
         show_cell_vectors: SettingType<boolean>;
         cell_edge_opacity: SettingType<number>;

package/dist/settings.js

@@ -3,6 +3,13 @@
 import { symbol_names } from './labels';
 import { merge_nested } from './utils';
 export const SHOW_BONDS_OPTIONS = [`never`, `always`, `crystals`, `molecules`];
+export const VECTOR_COLOR_MODES = [
+    `auto`,
+    `element`,
+    `spin_direction`,
+    `magnitude`,
+    `uniform`,
+];
 export const ATOM_COLOR_MODE_OPTIONS = [
     `element`,
     `coordination`,
@@ -74,8 +81,8 @@ export const SETTINGS_CONFIG = {
     structure: {
         // Atoms & Bonds
         atom_radius: {
-            value: 1.0,
-            description: `Radius multiplier for atoms (1.0 = standard atomic radii)`,
+            value: 0.7,
+            description: `Radius multiplier for atoms (0.7 = standard atomic radii)`,
             minimum: 0.1,
             maximum: 3.0,
         },
@@ -267,36 +274,58 @@ export const SETTINGS_CONFIG = {
             minimum: 0,
             maximum: 4,
         },
-        // Forces & Lattice
-        show_force_vectors: {
-            value: false,
-            description: `Display force vectors on atoms`,
+        // Site Vectors (force, magmom, spin) & Lattice
+        vector_configs: {
+            value: {},
+            description: `Per-key configuration for site vector layers. Keys map to site property names (e.g. force, magmom, force_DFT). Auto-populated when a structure with vector data loads.`,
         },
-        force_scale: {
+        vector_scale: {
             value: 1.0,
-            description: `Scale factor for force vector arrows`,
+            description: `Scale factor for site vector arrows`,
             minimum: 0.1,
             maximum: 10.0,
         },
-        force_color: {
+        vector_color: {
             value: `#ff0000`,
-            description: `Color for force vectors`,
+            description: `Color for site vector arrows (used in uniform mode and as fallback)`,
+        },
+        vector_color_mode: {
+            value: `auto`,
+            description: `How to color arrows. auto = element for force, spin-direction for magmom/spin. element = majority species color. spin_direction = red/blue by z-component. magnitude = continuous color scale by vector length. uniform = single color (vector_color).`,
+        },
+        vector_color_scale: {
+            value: `interpolateViridis`,
+            description: `D3 color scale for magnitude coloring mode`,
+        },
+        vector_normalize: {
+            value: false,
+            description: `Show all arrows at the same length (direction only). Useful for spin/magmom visualization where orientation matters but magnitude does not.`,
+        },
+        vector_uniform_thickness: {
+            value: false,
+            description: `Use the same shaft and head size for all arrows regardless of length. When off (default), thickness scales with arrow length.`,
+        },
+        vector_origin_gap: {
+            value: 0,
+            description: `Fraction of visual atom radius to offset each arrow origin when multiple vectors are shown per site. 0 = all from atom center, 0.5 = halfway to surface.`,
+            minimum: 0,
+            maximum: 0.5,
         },
-        force_shaft_radius: {
+        vector_shaft_radius: {
             value: -0.03,
-            description: `Radius of force vector shaft (negative = relative to length, positive = absolute)`,
+            description: `Radius of vector shaft (negative = relative to length, positive = absolute)`,
             minimum: -0.1,
             maximum: 0.1,
         },
-        force_arrow_head_radius: {
+        vector_arrow_head_radius: {
             value: -0.06,
-            description: `Radius of force vector arrow head (negative = relative to length, positive = absolute)`,
+            description: `Radius of vector arrow head (negative = relative to length, positive = absolute)`,
             minimum: -0.2,
             maximum: 0.2,
         },
-        force_arrow_head_length: {
+        vector_arrow_head_length: {
             value: -0.15,
-            description: `Length of force vector arrow head (negative = relative to length, positive = absolute)`,
+            description: `Length of vector arrow head (negative = relative to length, positive = absolute)`,
             minimum: -0.5,
             maximum: 0.5,
         },
@@ -785,6 +814,7 @@ export const SETTINGS_CONFIG = {
         },
     },
     convex_hull: {
+        // Convex hull defaults (binary/ternary/quaternary)
         binary: {
             camera_zoom: {
                 value: 1.0,