matterviz 0.3.5 → 0.3.6

package/dist/src/lib/rdf/RdfPlot.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import { PLOT_COLORS } from '$lib/colors'
+  import { get_electro_neg_formula } from '$lib/composition'
+  import { StatusMessage } from '$lib/feedback'
+  import { create_file_drop_handler } from '$lib/io'
+  import type { DataSeries } from '$lib/plot'
+  import { ScatterPlot } from '$lib/plot'
+  import type { Crystal, Pbc } from '$lib/structure'
+  import { parse_any_structure } from '$lib/structure/parse'
+  import { is_crystal } from '$lib/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`
+      }
+    } catch (exc) {
+      error_msg = `Failed to process structure: ${
+        exc instanceof Error ? exc.message : String(exc)
+      }`
+    }
+  }
+
+  const handle_drop = create_file_drop_handler({
+    allow: () => enable_drop,
+    on_drop: (content, filename) =>
+      (on_file_drop || compute_and_add)(content, filename),
+    on_error: (msg) => {
+      error_msg = msg
+    },
+    set_loading: (val) => {
+      loading = val
+      if (val) [error_msg, dragging] = [undefined, false]
+    },
+  })
+
+  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)
+    }
+
+    // Add structures
+    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) })
+        )
+      }
+    }
+    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((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 })
+      }
+    }
+    return result
+  })
+
+  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,
+      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 />
+
+{#if enable_drop && drag_dropped.length > 0}
+  <div class="dropped-info">
+    {drag_dropped.length} structure{drag_dropped.length > 1 ? `s` : ``} loaded
+    <button onclick={() => (drag_dropped = [])}>Clear</button>
+  </div>
+{/if}
+
+{#if series.length === 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="empty-drop {dragging ? `dragging` : ``}"
+    ondragover={enable_drop ? handle_dragover : undefined}
+    ondragleave={enable_drop ? () => (dragging = false) : undefined}
+    ondrop={enable_drop ? handle_drop : undefined}
+  >
+    <StatusMessage
+      message={enable_drop
+      ? `Drag and drop structure files here to visualize RDFs`
+      : `No RDF data to display`}
+      style="border: none"
+    />
+  </div>
+{:else}
+  <ScatterPlot
+    {...rest}
+    {series}
+    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` : ``}"
+    style={rest.style ?? `height: 400px;`}
+    ondragover={enable_drop ? handle_dragover : undefined}
+    ondragleave={enable_drop ? () => (dragging = false) : undefined}
+    ondrop={enable_drop ? handle_drop : undefined}
+  >
+    {#snippet user_content({ width, y_scale_fn, pad })}
+      {#if show_reference_line}
+        {@const y1 = y_scale_fn(1)}
+        {#if isFinite(y1)}
+          {@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>
+        {/if}
+      {/if}
+    {/snippet}
+
+    {@render children?.({ drag_dropped })}
+  </ScatterPlot>
+{/if}
+
+<style>
+  :global(.dragging) {
+    outline: 2px dashed #4e79a7;
+    outline-offset: 4px;
+  }
+  .empty-drop {
+    outline: 2px dashed #ccc;
+    border-radius: var(--border-radius, 3pt);
+    text-align: center;
+  }
+  .dropped-info {
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+    background: #f0f0f0;
+    border-radius: 4px;
+  }
+  button {
+    margin-left: 1em;
+    padding: 0.25em 0.75em;
+    background: #e0e0e0;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  button:hover {
+    background: #d0d0d0;
+  }
+</style>

package/dist/src/lib/rdf/calc-rdf.ts

@@ -0,0 +1,167 @@
+import type { Matrix3x3, Vec3 } from '$lib/math'
+import {
+  calc_lattice_params,
+  create_lattice_converters,
+  euclidean_dist,
+  pbc_dist,
+} from '$lib/math'
+import type { Crystal, Pbc } from '$lib/structure'
+import { make_supercell } from '$lib/structure/supercell'
+import type { RdfOptions, RdfPattern } from './index'
+
+const get_occu = (site: Crystal[`sites`][number], elem: string | undefined) =>
+  elem ? (site.species.find((spec) => spec.element === elem)?.occu ?? 0) : 1
+const has_species = (site: Crystal[`sites`][number], elem: string | undefined) =>
+  !elem || site.species.some((spec) => spec.element === elem)
+const sum_occu = (sites: Crystal[`sites`], elem: string | undefined) =>
+  sites.reduce((sum, site) => sum + get_occu(site, elem), 0)
+
+// Calculate radial distribution function
+export function calculate_rdf(structure: Crystal, options: RdfOptions = {}): RdfPattern {
+  const {
+    center_species,
+    neighbor_species,
+    cutoff = 15,
+    n_bins = 75,
+    auto_expand = true,
+    expansion_factor = 2.0,
+  } = options
+  let { pbc = [true, true, true] } = options
+  if (cutoff <= 0 || n_bins <= 0) {
+    throw new Error(`cutoff and n_bins must be positive`)
+  }
+
+  // Validate structure has lattice
+  if (!structure.lattice?.matrix) {
+    throw new Error(`Crystal must have a lattice for RDF calculation`)
+  }
+
+  let lattice: Matrix3x3 = structure.lattice.matrix
+  let { sites } = structure
+
+  // Expand structure if needed to ensure shortest lattice vector is expansion_factor× the cutoff
+  // This prevents artificial close contacts at cell boundaries when using PBC
+  // Standard practice uses 2.0-2.5× to eliminate finite-size effects
+  if (auto_expand) {
+    const { a, b, c } = calc_lattice_params(lattice)
+    const min_size = cutoff * expansion_factor
+    const [n_a, n_b, n_c] = [a, b, c].map((len) => Math.ceil(min_size / len))
+
+    if (n_a > 1 || n_b > 1 || n_c > 1) {
+      const expanded_structure = make_supercell(
+        structure,
+        [n_a, n_b, n_c] as Vec3,
+        false, // Don't fold back to unit cell
+      )
+      sites = expanded_structure.sites
+      lattice = expanded_structure.lattice.matrix
+      pbc = [false, false, false] // Disable PBC since we explicitly expanded the structure
+    }
+  }
+
+  const bin_size = cutoff / n_bins
+  const r = Array.from({ length: n_bins }, (_, idx) => (idx + 0.5) * bin_size)
+  const g_r = Array(n_bins).fill(0)
+
+  if (sites.length === 0) return { r, g_r }
+
+  // Get occupancy weight for a site-species pair (supports mixed occupancy)
+  const centers = 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] as [string, string])
+        : undefined
+    return { r, g_r, element_pair }
+  }
+
+  // Calculate distances and bin them with occupancy weighting
+  const use_pbc = pbc.some((flag) => flag)
+  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, 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)
+        g_r[Math.min(Math.floor(dist / bin_size), n_bins - 1)] += weight
+      }
+    }
+  }
+
+  // Normalize using occupancy-weighted pair count (excludes self-interactions for same species)
+  const center_weight = sum_occu(centers, center_species)
+  const neighbor_weight = sum_occu(neighbors, neighbor_species)
+  const self_weight =
+    center_species === neighbor_species
+      ? centers.reduce((sum, site) => sum + get_occu(site, center_species) ** 2, 0)
+      : 0
+  const n_pairs = center_weight * neighbor_weight - self_weight
+
+  if (n_pairs > 0) {
+    const volume = calc_lattice_params(lattice).volume
+    for (let idx = 0; idx < n_bins; idx++) {
+      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] as [string, string])
+      : undefined
+  return { r, g_r, element_pair }
+}
+
+// Calculate RDF for all element pairs
+export function calculate_all_pair_rdfs(
+  structure: Crystal,
+  options: Omit<RdfOptions, `center_species` | `neighbor_species`> = {},
+): RdfPattern[] {
+  // Collect all unique elements across all species (supports mixed occupancy)
+  const elems = [
+    ...new Set(structure.sites.flatMap((site) => site.species.map((spec) => spec.element))),
+  ].sort()
+
+  // If auto_expand is true, expand the structure once and reuse it for all pairs
+  // to avoid repeated supercell computations
+  let structure_to_use = structure
+  if (options.auto_expand !== false) {
+    const { cutoff = 15, expansion_factor = 2.0 } = options
+    const lattice = structure.lattice?.matrix
+    if (lattice) {
+      const { a, b, c } = calc_lattice_params(lattice)
+      const min_size = cutoff * expansion_factor
+      const [n_a, n_b, n_c] = [a, b, c].map((len) => Math.ceil(min_size / len))
+
+      if (n_a > 1 || n_b > 1 || n_c > 1) {
+        structure_to_use = make_supercell(
+          structure,
+          [n_a, n_b, n_c] as Vec3,
+          false, // Don't fold back to unit cell
+        )
+      }
+    }
+  }
+
+  // Pass auto_expand=false since we've already expanded, and pbc=false for expanded structure
+  const pbc = [false, false, false] as Pbc
+  const rdf_options = { ...options, auto_expand: false, pbc }
+
+  return elems.flatMap((el1, idx1) =>
+    elems.slice(idx1).map((el2) =>
+      calculate_rdf(structure_to_use, {
+        ...rdf_options,
+        center_species: el1,
+        neighbor_species: el2,
+      }),
+    ),
+  )
+}

package/dist/src/lib/rdf/index.ts

@@ -0,0 +1,27 @@
+import type { Pbc } from '$lib/structure'
+
+export * from './calc-rdf'
+export { default as RdfPlot } from './RdfPlot.svelte'
+
+export type RdfPattern = {
+  r: number[]
+  g_r: number[]
+  element_pair?: [string, string]
+}
+
+export interface RdfEntry {
+  label: string
+  pattern: RdfPattern
+  color?: string
+  legend_group?: string // Group name for legend grouping (e.g. structure name)
+}
+
+export interface RdfOptions {
+  center_species?: string
+  neighbor_species?: string
+  cutoff?: number
+  n_bins?: number
+  pbc?: Pbc
+  auto_expand?: boolean
+  expansion_factor?: number
+}

package/dist/src/lib/sanitize.ts

@@ -0,0 +1,126 @@
+import DOMPurify from 'dompurify'
+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*:/
+
+// Add a token to a space-separated string if not already present
+const ensure_token = (value: string, token: string): string => {
+  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: ReturnType<typeof DOMPurify> | null | undefined
+
+function get_purify(): ReturnType<typeof DOMPurify> | null {
+  if (purify !== undefined) return purify
+  if (typeof globalThis.window === `undefined`) return (purify = null)
+  const instance = 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: string,
+  allowed_tags: string[],
+  allowed_attrs: string[],
+): string {
+  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)
+}
+
+const stringify_html_input = (html: unknown): string => {
+  if (html == null) return ``
+  if (typeof html === `string`) return html
+  if (typeof html === `number`) return Number.isNaN(html) ? `NaN` : `${html}`
+  if (typeof html === `boolean` || typeof html === `bigint`) return `${html}`
+  if (typeof html !== `object`) return ``
+  try {
+    return JSON.stringify(html) ?? ``
+  } catch {
+    return ``
+  }
+}
+
+// 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: unknown): string {
+  const str = stringify_html_input(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 })
+}
+
+export const compact_formula = (formula: string): string => formula.replaceAll(/\s+/g, ``)
+
+// Sanitize a chemical formula with optional subscript formatting
+export const sanitize_formula = (formula: string, use_subscripts = true): string =>
+  sanitize_html(format_formula_html(formula, use_subscripts))
+
+export const sanitize_compact_formula = (formula: string, use_subscripts = true): string =>
+  sanitize_formula(compact_formula(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: string): string =>
+  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: string): string =>
+  sanitize_svg_content(html, SVG_ICON_TAGS, SVG_ICON_ATTRS)