matterviz 0.3.1 → 0.3.3

package/dist/coordination/CoordinationBarPlot.svelte

@@ -1,197 +1,253 @@
-<script lang="ts">import { PLOT_COLORS } from '../colors';
-import { StatusMessage } from '../feedback';
-import { decompress_file, handle_url_drop } from '../io';
-import { format_value } from '../labels';
-import { BarPlot } from '../plot';
-import { parse_any_structure } from '../structure/parse';
-import { is_crystal } from '../structure/validation';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import { calc_coordination_nums } from './calc-coordination';
-let { structures, strategy = `electroneg_ratio`, split_mode = `by_element`, mode = $bindable(`grouped`), orientation = `vertical`, x_axis = {}, y_axis = {}, allow_file_drop = true, on_file_drop, loading = $bindable(false), error_msg = $bindable(), ...rest } = $props();
-let dragover = $state(false);
-let dropped_entries = $state([]);
-let is_horizontal = $derived(orientation === `horizontal`);
-// Normalize input to consistent array of { label, structure, color }
-const structure_entries = $derived.by(() => {
-    if (!structures)
-        return [];
+<script lang="ts">
+  import { PLOT_COLORS } from '../colors'
+  import { StatusMessage } from '../feedback'
+  import { create_file_drop_handler } from '../io'
+  import { format_value } from '../labels'
+  import { BarPlot } from '../plot'
+  import type {
+    AxisConfig,
+    BarHandlerProps,
+    BarSeries,
+    Orientation,
+  } from '../plot/types'
+  import type { AnyStructure } from '../structure'
+  import type { BondingStrategy } from '../structure/bonding'
+  import { parse_any_structure } from '../structure/parse'
+  import { is_crystal } from '../structure/validation'
+  import type { ComponentProps } from 'svelte'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+  import { calc_coordination_nums, type CoordinationData } from './calc-coordination'
+  import type { SplitMode } from './index'
+
+  type CoordinationMetadata = {
+    element?: string
+    structure_label?: string
+  } & Record<string, unknown>
+
+  interface StructureEntry {
+    label: string
+    structure: AnyStructure
+    color?: string
+    data?: CoordinationData
+  }
+  let {
+    structures,
+    strategy = `electroneg_ratio`,
+    split_mode = `by_element`,
+    mode = $bindable(`grouped`),
+    orientation = `vertical` as Orientation,
+    x_axis = {},
+    y_axis = {},
+    allow_file_drop = true,
+    on_file_drop,
+    loading = $bindable(false),
+    error_msg = $bindable(),
+    ...rest
+  }: Omit<ComponentProps<typeof BarPlot>, `series`> & {
+    structures:
+      | AnyStructure
+      | Record<string, AnyStructure | { structure: AnyStructure; color?: string }>
+      | StructureEntry[]
+    strategy?: BondingStrategy
+    split_mode?: SplitMode
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    allow_file_drop?: boolean
+    on_file_drop?: (content: string | ArrayBuffer, filename: string) => void
+    loading?: boolean
+    error_msg?: string
+  } = $props()
+
+  let dragover = $state(false)
+  let dropped_entries = $state<StructureEntry[]>([])
+  let is_horizontal = $derived(orientation === `horizontal`)
+
+  // Normalize input to consistent array of { label, structure, color }
+  const structure_entries = $derived.by<StructureEntry[]>(() => {
+    if (!structures) return []
+
     const base_entries = Array.isArray(structures)
-        ? structures
-        : (is_crystal(structures)
-            ? [{ label: `Structure`, structure: structures }]
-            : Object.entries(structures).map(([label, value]) => `structure` in value
-                ? { label, ...value }
-                : { label, structure: value }));
+      ? (structures as StructureEntry[])
+      : (is_crystal(structures)
+        ? [{ label: `Structure`, structure: structures as AnyStructure }]
+        : Object.entries(
+          structures as Record<
+            string,
+            AnyStructure | { structure: AnyStructure; color?: string }
+          >,
+        ).map(([label, value]) =>
+          `structure` in value
+            ? { label, ...value }
+            : { label, structure: value as AnyStructure }
+        ))
+
     // Merge user-provided structures with dropped structures
-    return [...base_entries, ...dropped_entries];
-});
-// Compute coordination data for each structure
-const entries_with_data = $derived(structure_entries.map((entry) => ({
+    return [...base_entries, ...dropped_entries]
+  })
+
+  // Compute coordination data for each structure
+  const entries_with_data = $derived(structure_entries.map((entry) => ({
     ...entry,
     data: calc_coordination_nums(entry.structure, strategy),
-})));
-// Compute appropriate ranges
-const ranges = $derived.by(() => {
+  })))
+
+  // Compute appropriate ranges
+  const ranges = $derived.by(() => {
     // CN axis should always start at 0 and show at least [0,4]
-    let max_cn = 4; // minimum max value
+    let max_cn = 4 // minimum max value
     for (const entry of entries_with_data) {
-        for (const [cn] of entry.data.cn_histogram)
-            max_cn = Math.max(max_cn, cn);
+      for (const [cn] of entry.data.cn_histogram) max_cn = Math.max(max_cn, cn)
     }
-    const cn_range = [-0.5, max_cn + 0.5];
-    return { count: [0, null], cn: cn_range }; // Count axis should always start at 0
-});
-// Derive integer CN ticks for axis labels
-const cn_ticks = $derived.by(() => {
-    const all_cns = new SvelteSet();
+    const cn_range: [number, number] = [-0.5, max_cn + 0.5]
+
+    return { count: [0, null] as [number, null], cn: cn_range } // Count axis should always start at 0
+  })
+
+  // Derive integer CN ticks for axis labels
+  const cn_ticks = $derived.by(() => {
+    const all_cns = new SvelteSet<number>()
     // Always include minimum CN values 0-4
-    for (let idx = 0; idx <= 4; idx++)
-        all_cns.add(idx);
+    for (let idx = 0; idx <= 4; idx++) all_cns.add(idx)
     // Add actual CN values from data
     for (const entry of entries_with_data) {
-        for (const [cn] of entry.data.cn_histogram)
-            all_cns.add(cn);
+      for (const [cn] of entry.data.cn_histogram) all_cns.add(cn)
     }
-    return Array.from(all_cns).sort((cn1, cn2) => cn1 - cn2);
-});
-// Build BarPlot series based on split_mode
-const bar_series = $derived.by(() => {
+    return Array.from(all_cns).sort((cn1, cn2) => cn1 - cn2)
+  })
+
+  // Build BarPlot series based on split_mode
+  const bar_series = $derived.by<BarSeries<CoordinationMetadata>[]>(() => {
     if (split_mode === `by_element`) {
-        // One series per element across all structures
-        const element_series_map = new SvelteMap();
-        // Collect all unique CNs across all elements
-        const all_cns = new SvelteSet();
-        for (const entry of entries_with_data) {
-            for (const [element, cn_histogram] of entry.data.cn_histogram_by_element) {
-                if (!element_series_map.has(element)) {
-                    element_series_map.set(element, new SvelteMap());
-                }
-                const element_map = element_series_map.get(element);
-                for (const [cn, count] of cn_histogram) {
-                    all_cns.add(cn);
-                    element_map.set(cn, (element_map.get(cn) ?? 0) + count);
-                }
-            }
-        }
-        // Sort CNs for consistent x-axis
-        const sorted_cns = Array.from(all_cns).sort((a, b) => a - b);
-        // Convert map to array and ensure all series have same x-values
-        return Array.from(element_series_map.entries())
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([element, cn_map], idx) => {
-            return {
-                x: sorted_cns,
-                y: sorted_cns.map((cn) => cn_map.get(cn) ?? 0),
-                label: element,
-                color: PLOT_COLORS[idx % PLOT_COLORS.length],
-                bar_width: 0.8,
-                visible: true,
-                metadata: { element },
-            };
-        });
-    }
-    else if (split_mode === `by_structure`) {
-        // One series per structure
-        // First collect all unique CNs
-        const all_cns = new SvelteSet();
-        for (const entry of entries_with_data) {
-            for (const [cn] of entry.data.cn_histogram) {
-                all_cns.add(cn);
-            }
-        }
-        const sorted_cns = Array.from(all_cns).sort((a, b) => a - b);
-        return entries_with_data.map((entry, idx) => {
-            return {
-                x: sorted_cns,
-                y: sorted_cns.map((cn) => entry.data.cn_histogram.get(cn) ?? 0),
-                label: entry.label,
-                color: entry.color ?? PLOT_COLORS[idx % PLOT_COLORS.length],
-                bar_width: 0.8,
-                visible: true,
-                metadata: { structure_label: entry.label },
-            };
-        });
-    }
-    else {
-        // split_mode === 'none': combine all into single series
-        const combined_histogram = new SvelteMap();
-        for (const entry of entries_with_data) {
-            for (const [cn, count] of entry.data.cn_histogram) {
-                combined_histogram.set(cn, (combined_histogram.get(cn) ?? 0) + count);
-            }
+      // One series per element across all structures
+      const element_series_map = new SvelteMap<string, Map<number, number>>()
+
+      // Collect all unique CNs across all elements
+      const all_cns = new SvelteSet<number>()
+
+      for (const entry of entries_with_data) {
+        for (const [element, cn_histogram] of entry.data.cn_histogram_by_element) {
+          if (!element_series_map.has(element)) {
+            element_series_map.set(element, new SvelteMap())
+          }
+          const element_map = element_series_map.get(element)
+          if (!element_map) continue
+
+          for (const [cn, count] of cn_histogram) {
+            all_cns.add(cn)
+            element_map.set(cn, (element_map.get(cn) ?? 0) + count)
+          }
         }
-        const x_vals = Array.from(combined_histogram.keys()).sort((a, b) => a - b);
-        const y_vals = x_vals.map((cn) => combined_histogram.get(cn));
-        return [
-            {
-                x: x_vals,
-                y: y_vals,
-                label: `All Sites`,
-                color: PLOT_COLORS[0],
-                bar_width: 0.8,
-                visible: true,
-                metadata: {},
-            },
-        ];
-    }
-});
-async function handle_file_drop(event) {
-    event.preventDefault();
-    dragover = false;
-    if (!allow_file_drop)
-        return;
-    loading = true;
-    error_msg = undefined;
-    const compute_and_add = (content, filename) => {
-        try {
-            const text_content = content instanceof ArrayBuffer
-                ? new TextDecoder().decode(content)
-                : content;
-            const parsed_structure = parse_any_structure(text_content, filename);
-            if (is_crystal(parsed_structure)) {
-                dropped_entries = [{
-                        label: filename || `Dropped structure`,
-                        structure: parsed_structure,
-                    }, ...dropped_entries];
-            }
-            else {
-                error_msg = `Structure has no lattice or sites; cannot compute coordination`;
-            }
+      }
+
+      // Sort CNs for consistent x-axis
+      const sorted_cns = Array.from(all_cns).sort((a, b) => a - b)
+
+      // Convert map to array and ensure all series have same x-values
+      return Array.from(element_series_map.entries())
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([element, cn_map], idx) => {
+          return {
+            x: sorted_cns,
+            y: sorted_cns.map((cn) => cn_map.get(cn) ?? 0),
+            label: element,
+            color: PLOT_COLORS[idx % PLOT_COLORS.length],
+            bar_width: 0.8,
+            visible: true,
+            metadata: { element },
+          }
+        })
+    } else if (split_mode === `by_structure`) {
+      // One series per structure
+      // First collect all unique CNs
+      const all_cns = new SvelteSet<number>()
+      for (const entry of entries_with_data) {
+        for (const [cn] of entry.data.cn_histogram) {
+          all_cns.add(cn)
         }
-        catch (exc) {
-            error_msg = `Failed to process structure: ${exc instanceof Error ? exc.message : String(exc)}`;
+      }
+      const sorted_cns = Array.from(all_cns).sort((a, b) => a - b)
+
+      return entries_with_data.map((entry, idx) => {
+        return {
+          x: sorted_cns,
+          y: sorted_cns.map((cn) => entry.data.cn_histogram.get(cn) ?? 0),
+          label: entry.label,
+          color: entry.color ?? PLOT_COLORS[idx % PLOT_COLORS.length],
+          bar_width: 0.8,
+          visible: true,
+          metadata: { structure_label: entry.label },
         }
-    };
-    try {
-        // Handle URL-based drops
-        const handled = await handle_url_drop(event, on_file_drop || compute_and_add)
-            .catch(() => false);
-        if (handled)
-            return;
-        const file = event.dataTransfer?.files?.[0];
-        if (file) {
-            try {
-                const { content, filename } = await decompress_file(file);
-                if (content)
-                    (on_file_drop || compute_and_add)(content, filename);
-            }
-            catch (exc) {
-                error_msg = `Failed to load file ${file.name}: ${exc instanceof Error ? exc.message : String(exc)}`;
-            }
+      })
+    } else {
+      // split_mode === 'none': combine all into single series
+      const combined_histogram = new SvelteMap<number, number>()
+
+      for (const entry of entries_with_data) {
+        for (const [cn, count] of entry.data.cn_histogram) {
+          combined_histogram.set(cn, (combined_histogram.get(cn) ?? 0) + count)
         }
+      }
+
+      const x_vals = Array.from(combined_histogram.keys()).sort((a, b) => a - b)
+      const y_vals = x_vals.map((cn) => combined_histogram.get(cn) ?? 0)
+
+      return [
+        {
+          x: x_vals,
+          y: y_vals,
+          label: `All Sites`,
+          color: PLOT_COLORS[0],
+          bar_width: 0.8,
+          visible: true,
+          metadata: {},
+        },
+      ]
     }
-    finally {
-        loading = false;
+  })
+
+  const compute_and_add = (content: string | ArrayBuffer, filename: string) => {
+    try {
+      const text_content = content instanceof ArrayBuffer
+        ? new TextDecoder().decode(content)
+        : content
+      const parsed_structure = parse_any_structure(text_content, filename)
+      if (is_crystal(parsed_structure)) {
+        dropped_entries = [{
+          label: filename || `Dropped structure`,
+          structure: parsed_structure,
+        }, ...dropped_entries]
+      } else {
+        error_msg = `Structure has no lattice or sites; cannot compute coordination`
+      }
+    } catch (exc) {
+      error_msg = `Failed to process structure: ${
+        exc instanceof Error ? exc.message : String(exc)
+      }`
     }
-}
-let display = $state({ x_zero_line: false, y_zero_line: false });
-// Update display when orientation changes
-$effect(() => {
-    display.x_zero_line = is_horizontal;
-    display.y_zero_line = !is_horizontal;
-});
-const cn_axis = { label: `Coordination Number`, format: `d` };
-const count_axis = { label: `Count`, format: `d` };
+  }
+
+  const handle_file_drop = create_file_drop_handler({
+    allow: () => allow_file_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, dragover] = [undefined, false]
+    },
+  })
+
+  let display = $state({ x_zero_line: false, y_zero_line: false })
+  // Update display when orientation changes
+  $effect(() => {
+    display.x_zero_line = is_horizontal
+    display.y_zero_line = !is_horizontal
+  })
+
+  const cn_axis = { label: `Coordination Number`, format: `d` }
+  const count_axis = { label: `Count`, format: `d` }
 </script>
 
 <StatusMessage bind:message={error_msg} type="error" dismissible />

package/dist/element/BohrAtom.svelte

@@ -1,26 +1,69 @@
-<script lang="ts">let { symbol = ``, name = ``, shells, adapt_size = true, shell_width = 20, size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270, base_fill = `var(--text-color)`, orbital_period = 3, nucleus_props = {}, shell_props = {}, electron_props = {}, highlight_shell = null, number_electrons = false, electron_label_props = {}, ...rest } = $props();
-// Bohr atom electron orbital period is given by
-// T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
-// with n the shell number, Z the atomic number, m the mass of the electron
-let _nucleus_props = $derived({
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements'
+
+  type Props = SVGAttributes<SVGSVGElement> & {
+    // https://svelte.dev/repl/17d71b590f554b5a9eba6e04023dd41c
+    symbol?: string // usually H, He, etc. but can be anything
+    name?: string // usually Hydrogen, Helium, etc. but can be anything
+    shells: number[]
+    adapt_size?: boolean
+    shell_width?: number
+    size?: number
+    base_fill?: string
+    orbital_period?: number // time for inner-most electron orbit in seconds, 0 for no motion
+    // set properties like size, fill, stroke, stroke-width, for nucleus and electrons here
+    nucleus_props?: Record<string, string | number>
+    shell_props?: Record<string, string | number>
+    electron_props?: Record<string, string | number>
+    highlight_shell?: number | null
+    // if function, it'll be called with electron index and should return a string
+    number_electrons?:
+      | boolean
+      | `hierarchical`
+      | `sequential`
+      | ((idx: number) => string)
+    electron_label_props?: Record<string, string | number>
+  }
+
+  let {
+    symbol = ``,
+    name = ``,
+    shells,
+    adapt_size = true,
+    shell_width = 20,
+    size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270,
+    base_fill = `var(--text-color)`,
+    orbital_period = 3,
+    nucleus_props = {},
+    shell_props = {},
+    electron_props = {},
+    highlight_shell = null,
+    number_electrons = false,
+    electron_label_props = {},
+    ...rest
+  }: Props = $props()
+
+  // Bohr atom electron orbital period is given by
+  // T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
+  // with n the shell number, Z the atomic number, m the mass of the electron
+  let _nucleus_props = $derived({
     r: 20,
     fill: base_fill,
     'fill-opacity': `0.3`,
     ...nucleus_props,
-});
-let _shell_props = $derived({
+  })
+  let _shell_props = $derived({
     stroke: base_fill,
     fill: `none`,
     ...shell_props,
-});
-let _electron_props = $derived({
+  })
+  let _electron_props = $derived({
     r: 3,
     stroke: base_fill,
     fill: `blue`,
     ...electron_props,
-});
-let viewBox = $derived(`-${size / 2}, -${size / 2}, ${size}, ${size}`);
-export {};
+  })
+  let viewBox = $derived(`-${size / 2}, -${size / 2}, ${size}, ${size}`)
 </script>
 
 <svg
@@ -42,7 +85,7 @@ export {};
   {/if}
 
   <!-- electron orbitals -->
-  {#each shells as electrons, shell_idx ([electrons, shell_idx])}
+  {#each shells as electrons, shell_idx (`${shell_idx}-${electrons}`)}
     {@const n = shell_idx + 1}
     {@const shell_radius = _nucleus_props.r + n * shell_width}
     {@const active = n === highlight_shell}

package/dist/element/ElementHeading.svelte

@@ -1,5 +1,10 @@
-<script lang="ts">let { element, ...rest } = $props();
-export {};
+<script lang="ts">
+  import type { ChemicalElement } from './'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, ...rest }: HTMLAttributes<HTMLHeadingElement> & {
+    element: ChemicalElement
+  } = $props()
 </script>
 
 <h2 {...rest}>

package/dist/element/ElementPhoto.svelte

@@ -1,12 +1,18 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-let { element, missing_msg = `No image for `, ...rest } = $props();
-let { name, number } = $derived(element ?? {});
-let file = $derived(`elements/${number}-${name?.toLowerCase()}.avif`);
-let hidden = $state(false);
-$effect.pre(() => {
-    if (file)
-        hidden = false;
-}); // reset hidden to false when file changes
+<script lang="ts">
+  import type { ChemicalElement } from './'
+  import Icon from '../Icon.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, missing_msg = `No image for `, ...rest }:
+    & HTMLAttributes<HTMLImageElement | HTMLDivElement>
+    & { element: ChemicalElement; missing_msg?: string } = $props()
+
+  let { name, number } = $derived(element ?? {})
+  let file = $derived(`elements/${number}-${name?.toLowerCase()}.avif`)
+  let hidden = $state(false)
+  $effect.pre(() => {
+    if (file) hidden = false
+  }) // reset hidden to false when file changes
 </script>
 
 {#if name && number}

package/dist/element/ElementStats.svelte

@@ -1,7 +1,13 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { format_num } from '../labels';
-import ElementHeading from './ElementHeading.svelte';
-let { element, ...rest } = $props();
+<script lang="ts">
+  import type { ChemicalElement } from './'
+  import Icon from '../Icon.svelte'
+  import { format_num } from '../labels'
+  import ElementHeading from './ElementHeading.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { element, ...rest }: HTMLAttributes<HTMLDivElement> & {
+    element: ChemicalElement | null
+  } = $props()
 </script>
 
 {#if element}