matterviz 0.1.0

package/dist/structure/index.js

@@ -0,0 +1,114 @@
+import { format_num, scale } from '..';
+import element_data from '../element/data';
+export { default as Bond } from './Bond.svelte';
+export * as bonding_strategies from './bonding';
+export { default as Lattice } from './Lattice.svelte';
+export * from './pbc';
+export { default as Structure } from './Structure.svelte';
+export { default as StructureCard } from './StructureCard.svelte';
+export { default as StructureControls } from './StructureControls.svelte';
+export { default as StructureLegend } from './StructureLegend.svelte';
+export { default as StructureScene } from './StructureScene.svelte';
+export const CELL_DEFAULTS = {
+    edge_opacity: 0.4,
+    surface_opacity: 0.05,
+    color: `#ffffff`,
+    line_width: 1.5,
+};
+export const BOND_DEFAULTS = {
+    thickness: 0.25,
+    offset: 0,
+    color: `white`,
+    from_color: `white`,
+    to_color: `white`,
+};
+export const lattice_param_keys = [
+    `a`,
+    `b`,
+    `c`,
+    `alpha`,
+    `beta`,
+    `gamma`,
+];
+export function get_elem_amounts(structure) {
+    const elements = {};
+    for (const site of structure.sites) {
+        for (const species of site.species) {
+            const { element: elem, occu } = species;
+            elements[elem] = (elements[elem] ?? 0) + occu;
+        }
+    }
+    return elements;
+}
+export function format_chemical_formula(structure, sort_fn) {
+    // concatenate elements in a pymatgen Structure followed by their amount
+    const elements = get_elem_amounts(structure);
+    const formula = [];
+    for (const el of sort_fn(Object.keys(elements))) {
+        const amount = elements[el] ?? 0;
+        if (amount === 1)
+            formula.push(el);
+        else
+            formula.push(`${el}<sub>${amount}</sub>`);
+    }
+    return formula.join(` `);
+}
+export function alphabetical_formula(structure) {
+    // concatenate elements in a pymatgen Structure followed by their amount in alphabetical order
+    return format_chemical_formula(structure, (symbols) => symbols.sort());
+}
+export function electro_neg_formula(structure) {
+    // concatenate elements in a pymatgen Structure followed by their amount sorted by electronegativity
+    return format_chemical_formula(structure, (symbols) => {
+        return symbols.sort((el1, el2) => {
+            const elec_neg1 = element_data.find((el) => el.symbol === el1)?.electronegativity ??
+                0;
+            const elec_neg2 = element_data.find((el) => el.symbol === el2)?.electronegativity ??
+                0;
+            // Sort by electronegativity (ascending), then alphabetically for ties
+            if (elec_neg1 !== elec_neg2)
+                return elec_neg1 - elec_neg2;
+            return el1.localeCompare(el2);
+        });
+    });
+}
+export const atomic_radii = Object.fromEntries(element_data.map((el) => [el.symbol, (el.atomic_radius ?? 1) / 2]));
+export const atomic_weights = Object.fromEntries(element_data.map((el) => [el.symbol, el.atomic_mass]));
+export function get_elements(structure) {
+    const elems = structure.sites.flatMap((site) => site.species.map((sp) => sp.element));
+    return [...new Set(elems)].sort(); // unique elements
+}
+// unified atomic mass units (u) per cubic angstrom (Å^3)
+// to grams per cubic centimeter (g/cm^3)
+const uA3_to_gcm3 = 1.66053907;
+export function density(structure, prec = `.2f`) {
+    // calculate the density of a pymatgen Structure in
+    const elements = get_elem_amounts(structure);
+    let mass = 0;
+    for (const [el, amt] of Object.entries(elements)) {
+        const element = el;
+        const weight = atomic_weights[element];
+        if (weight !== undefined) {
+            mass += amt * weight;
+        }
+    }
+    const dens = (uA3_to_gcm3 * mass) / structure.lattice.volume;
+    return format_num(dens, prec);
+}
+export function get_center_of_mass(struct_or_mol) {
+    let center = [0, 0, 0];
+    let total_weight = 0;
+    for (const site of struct_or_mol.sites) {
+        // TODO this assumes there's just one species. doesn't handle disordered sites
+        const wt = site.species[0].occu;
+        const scaled_pos = scale(site.xyz, wt);
+        center = [
+            center[0] + scaled_pos[0],
+            center[1] + scaled_pos[1],
+            center[2] + scaled_pos[2],
+        ];
+        total_weight += wt;
+    }
+    const result = scale(center, 1 / total_weight);
+    return [result[0], result[1], result[2]];
+}

package/dist/structure/pbc.d.ts

@@ -0,0 +1,6 @@
+import type { Vec3 } from '..';
+import type { PymatgenStructure } from './index';
+export declare function find_image_atoms(structure: PymatgenStructure, { tolerance }?: {
+    tolerance?: number;
+}): [number, Vec3, Vec3][];
+export declare function get_pbc_image_sites(...args: Parameters<typeof find_image_atoms>): PymatgenStructure;

package/dist/structure/pbc.js

@@ -0,0 +1,72 @@
+import { add, scale } from '..';
+export function find_image_atoms(structure, { tolerance = 0.05 } = {}) {
+    // Find image atoms for PBC. Returns [atom_idx, image_xyz, image_abc] tuples.
+    // Skips image generation for trajectory data with scattered atoms.
+    if (!structure.lattice)
+        return [];
+    const image_sites = [];
+    const lattice_vecs = structure.lattice.matrix;
+    // Check for trajectory data (atoms scattered outside unit cell)
+    const atoms_outside_cell = structure.sites.filter(({ abc }) => abc.some((coord) => coord < -0.1 || coord > 1.1));
+    // Skip image generation for trajectory data (>10% atoms outside cell)
+    if (atoms_outside_cell.length > structure.sites.length * 0.1) {
+        console.log(`Detected trajectory data with ${atoms_outside_cell.length} atoms outside unit cell. Skipping image atom generation.`);
+        return [];
+    }
+    // Generate image atoms for properly bounded structures
+    for (const [idx, site] of structure.sites.entries()) {
+        const abc = site.abc;
+        // Find edge dimensions and translation directions
+        const edge_dims = [];
+        for (let dim = 0; dim < 3; dim++) {
+            const frac_coord = abc[dim];
+            if (Math.abs(frac_coord) < tolerance)
+                edge_dims.push({ dim, direction: 1 }); // Near 0 → translate +1
+            if (Math.abs(frac_coord - 1) < tolerance)
+                edge_dims.push({ dim, direction: -1 }); // Near 1 → translate -1
+        }
+        // Generate all translation combinations (avoids duplicates)
+        if (edge_dims.length > 0) {
+            for (let mask = 1; mask < (1 << edge_dims.length); mask++) {
+                let img_xyz = [...site.xyz];
+                const img_abc = [...site.abc];
+                // Apply selected translations
+                for (let bit = 0; bit < edge_dims.length; bit++) {
+                    if (mask & (1 << bit)) {
+                        const { dim, direction } = edge_dims[bit];
+                        const translation = scale(lattice_vecs[dim], direction);
+                        const sum = add(img_xyz, translation);
+                        img_xyz = [sum[0], sum[1], sum[2]];
+                        img_abc[dim] += direction; // Update fractional coordinate
+                    }
+                }
+                image_sites.push([idx, img_xyz, img_abc]);
+            }
+        }
+    }
+    return image_sites;
+}
+// Return structure with image atoms added
+export function get_pbc_image_sites(...args) {
+    const structure = args[0];
+    // Check for trajectory data
+    const atoms_outside_cell = structure.sites.filter((site) => {
+        const abc = site.abc;
+        return abc.some((coord) => coord < -0.1 || coord > 1.1);
+    });
+    // Return trajectory data unchanged
+    if (atoms_outside_cell.length > structure.sites.length * 0.1) {
+        console.log(`Detected trajectory data with ${atoms_outside_cell.length} atoms outside unit cell. Returning structure as-is for proper trajectory visualization.`);
+        return structure;
+    }
+    // Add image atoms to regular crystal structures
+    const image_sites = find_image_atoms(...args);
+    const symmetrized_structure = { ...structure };
+    symmetrized_structure.sites = [...structure.sites];
+    // Add image atoms as new sites
+    for (const [site_idx, img_xyz, img_abc] of image_sites) {
+        const original_site = structure.sites[site_idx];
+        symmetrized_structure.sites.push({ ...original_site, abc: img_abc, xyz: img_xyz });
+    }
+    return symmetrized_structure;
+}

package/dist/trajectory/Sidebar.svelte

@@ -0,0 +1,412 @@
+<script lang="ts">import { Icon } from '..';
+import { format_num } from '../labels';
+import { electro_neg_formula } from '../structure';
+import { titles_as_tooltips } from 'svelte-zoo';
+let { trajectory, current_step_idx, current_filename, current_file_path, file_size, file_object, is_open = false, onclose = () => { }, } = $props();
+// Structured sidebar data for trajectory statistics
+let sidebar_data = $derived.by(() => {
+    if (!trajectory)
+        return [];
+    const first_frame = trajectory.frames[0];
+    const current_frame = trajectory.frames[current_step_idx];
+    const sections = [];
+    // File Information Section
+    if (current_filename || file_size !== null || trajectory.metadata?.source_format ||
+        file_object) {
+        const file_info = [];
+        if (current_filename) {
+            file_info.push({
+                label: `Filename`,
+                value: current_filename,
+                tooltip: current_file_path || undefined,
+            });
+        }
+        if (file_size !== null && file_size !== undefined) {
+            const size_str = file_size > 1024 * 1024
+                ? `${format_num(file_size / (1024 * 1024), `.2~f`)} MB`
+                : `${format_num(file_size / 1024, `.2~f`)} KB`;
+            file_info.push({ label: `File Size`, value: size_str });
+            // Add file size in bytes for very large files
+            if (file_size > 1024 * 1024) {
+                const bytes_str = file_size.toLocaleString();
+                file_info.push({ label: `Size (bytes)`, value: bytes_str });
+            }
+        }
+        // Add file timestamps if available
+        if (file_object) {
+            file_info.push({
+                label: `Last Modified`,
+                value: file_object.lastModified.toLocaleString(),
+                tooltip: `File system last modified time`,
+            });
+        }
+        if (trajectory.metadata?.source_format) {
+            file_info.push({
+                label: `Format`,
+                value: String(trajectory.metadata.source_format),
+            });
+        }
+        // Add total atoms across all frames if it varies
+        const atom_counts = trajectory.frames.map((f) => f.structure.sites.length);
+        const min_atoms = Math.min(...atom_counts);
+        const max_atoms = Math.max(...atom_counts);
+        if (min_atoms !== max_atoms) {
+            file_info.push({
+                label: `Atoms Range`,
+                value: `${min_atoms} - ${max_atoms}`,
+            });
+        }
+        // Add creation/modification time if available from trajectory metadata
+        if (typeof trajectory?.metadata?.created_at === `string`) {
+            const date = new Date(trajectory.metadata.created_at);
+            file_info.push({
+                label: `Created (metadata)`,
+                value: date.toLocaleDateString(),
+                tooltip: `Creation time from file metadata`,
+            });
+        }
+        sections.push({ title: `File`, items: file_info });
+    }
+    // Structure Information Section
+    const structure_info = [];
+    structure_info.push({
+        label: `Atoms`,
+        value: `${current_frame.structure.sites.length}`,
+    });
+    // Add chemical formula
+    structure_info.push({
+        label: `Formula`,
+        value: String(electro_neg_formula(current_frame.structure)),
+    });
+    if (`lattice` in first_frame.structure) {
+        const { volume } = first_frame.structure.lattice;
+        structure_info.push({
+            label: `Volume`,
+            value: `${format_num(volume, `.3~s`)} ų`,
+        });
+        structure_info.push({
+            label: `Density`,
+            value: `${format_num(first_frame.structure.sites.length / volume, `.4~s`)} atoms/ų`,
+        });
+    }
+    sections.push({ title: `Structure`, items: structure_info });
+    // Unit Cell Section (if lattice exists)
+    if (`lattice` in first_frame.structure) {
+        const { a, b, c, alpha, beta, gamma } = first_frame.structure.lattice;
+        const cell_info = [
+            {
+                label: `Lengths`,
+                value: `${format_num(a, `.3~f`)}, ${format_num(b, `.3~f`)}, ${format_num(c, `.3~f`)} Å`,
+            },
+            {
+                label: `Angles`,
+                value: `${format_num(alpha, `.2~f`)}°, ${format_num(beta, `.2~f`)}°, ${format_num(gamma, `.2~f`)}°`,
+            },
+        ];
+        sections.push({ title: `Unit Cell`, items: cell_info });
+    }
+    // Trajectory Information Section
+    const traj_info = [
+        {
+            label: `Steps`,
+            value: `${trajectory.frames.length} (current: ${current_step_idx + 1})`,
+        },
+    ];
+    // Add trajectory duration if we have time metadata
+    const times = trajectory.frames
+        .map((f) => f.metadata?.time)
+        .filter((t) => typeof t === `number`);
+    if (times.length > 1) {
+        const duration = Math.max(...times) - Math.min(...times);
+        const time_unit = trajectory.metadata?.time_unit || `fs`;
+        traj_info.push({
+            label: `Duration`,
+            value: `${format_num(duration, `.3~s`)} ${time_unit}`,
+        });
+    }
+    // Add temperature range if available
+    const temperatures = trajectory.frames
+        .map((f) => f.metadata?.temperature)
+        .filter((t) => typeof t === `number`);
+    if (temperatures.length > 1) {
+        const min_temp = Math.min(...temperatures);
+        const max_temp = Math.max(...temperatures);
+        if (Math.abs(max_temp - min_temp) > 1) {
+            traj_info.push({
+                label: `Temperature`,
+                value: `${format_num(min_temp, `.2~f`)} - ${format_num(max_temp, `.2~f`)} K`,
+            });
+        }
+    }
+    else if (temperatures.length === 1) {
+        traj_info.push({
+            label: `Temperature`,
+            value: `${format_num(temperatures[0], `.2~f`)} K`,
+        });
+    }
+    // Add pressure range if available
+    const pressures = trajectory.frames
+        .map((f) => f.metadata?.pressure)
+        .filter((p) => typeof p === `number`);
+    if (pressures.length > 1) {
+        const min_pressure = Math.min(...pressures);
+        const max_pressure = Math.max(...pressures);
+        if (Math.abs(max_pressure - min_pressure) > 0.1) {
+            traj_info.push({
+                label: `Pressure`,
+                value: `${format_num(min_pressure, `.2~f`)} - ${format_num(max_pressure, `.2~f`)} GPa`,
+            });
+        }
+    }
+    else if (pressures.length === 1) {
+        traj_info.push({
+            label: `Pressure`,
+            value: `${format_num(pressures[0], `.2~f`)} GPa`,
+        });
+    }
+    sections.push({ title: `Trajectory`, items: traj_info });
+    // Energy Information Section (if available)
+    const energies = trajectory.frames
+        .map((f) => f.metadata?.energy)
+        .filter(Boolean);
+    if (energies.length > 1) {
+        const min_energy = Math.min(...energies);
+        const max_energy = Math.max(...energies);
+        const energy_span = max_energy - min_energy;
+        const current_energy = current_frame.metadata?.energy;
+        const energy_info = [];
+        if (current_energy !== undefined) {
+            energy_info.push({
+                label: `Current Energy`,
+                value: `${format_num(current_energy, `.3~s`)} eV`,
+            });
+        }
+        energy_info.push({
+            label: `Energy Range`,
+            value: `${format_num(min_energy, `.3~s`)} to ${format_num(max_energy, `.3~s`)} eV`,
+        });
+        energy_info.push({
+            label: `Energy Span`,
+            value: `${format_num(energy_span, `.3~s`)} eV`,
+        });
+        sections.push({ title: `Energy`, items: energy_info });
+    }
+    // Forces Information Section (if available)
+    const force_maxes = trajectory.frames
+        .map((f) => f.metadata?.force_max)
+        .filter((f) => typeof f === `number`);
+    if (force_maxes.length > 1) {
+        const min_force = Math.min(...force_maxes);
+        const max_force = Math.max(...force_maxes);
+        const current_force = current_frame.metadata?.force_max;
+        const force_info = [];
+        if (current_force !== undefined) {
+            force_info.push({
+                label: `Current Max Force`,
+                value: `${format_num(current_force, `.3~s`)} eV/Å`,
+            });
+        }
+        force_info.push({
+            label: `Force Range`,
+            value: `${format_num(min_force, `.3~s`)} - ${format_num(max_force, `.3~s`)} eV/Å`,
+        });
+        sections.push({ title: `Forces`, items: force_info });
+    }
+    // Volume Change Section (if available)
+    if (`lattice` in first_frame.structure && trajectory.frames.length > 1) {
+        const volumes = trajectory.frames
+            .map((frame) => `lattice` in frame.structure ? frame.structure.lattice.volume : null)
+            .filter((v) => v !== null);
+        if (volumes.length > 1) {
+            const vol_change = ((Math.max(...volumes) - Math.min(...volumes)) / Math.min(...volumes)) * 100;
+            if (Math.abs(vol_change) > 0.1) {
+                const dynamics_info = [
+                    {
+                        label: `Volume Change`,
+                        value: `${format_num(vol_change, `.2~f`)}%`,
+                    },
+                ];
+                sections.push({ title: `Dynamics`, items: dynamics_info });
+            }
+        }
+    }
+    return sections;
+});
+</script>
+
+<aside class="info-sidebar" class:open={is_open}>
+  <header class="sidebar-header">
+    <h3>Trajectory Info</h3>
+    <button
+      onclick={onclose}
+      aria-label="Close info panel"
+      class="close-button"
+      type="button"
+    >
+      <Icon icon="Cross" />
+    </button>
+  </header>
+  <div class="sidebar-content">
+    {#each sidebar_data as section (section.title)}
+      <section>
+        <h4>{section.title}</h4>
+        {#each section.items as item (item.label)}
+          <div>
+            <span>{item.label}</span>
+            <span
+              title={item.tooltip}
+              use:titles_as_tooltips
+            >
+              {@html item.value}
+            </span>
+          </div>
+        {/each}
+      </section>
+    {/each}
+  </div>
+</aside>
+
+<style>
+  /* Info Sidebar Styles */
+  .info-sidebar {
+    position: absolute;
+    top: 0;
+    right: -320px;
+    width: 320px;
+    height: 100%; /* needed for scroll in sidebar */
+    background: var(--sidebar-bg, rgba(15, 23, 42, 0.96));
+    backdrop-filter: blur(8px);
+    border-left: var(--sidebar-border, 1px solid rgba(71, 85, 105, 0.3));
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: var(--sidebar-shadow, -4px 0 20px rgba(0, 0, 0, 0.15));
+    pointer-events: none;
+  }
+  .info-sidebar.open {
+    right: 0;
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    border-bottom: var(--sidebar-header-border, 1px solid rgba(71, 85, 105, 0.2));
+    background: var(--sidebar-header-bg, rgba(30, 41, 59, 0.8));
+  }
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--sidebar-title-color, #f1f5f9);
+  }
+  .close-button {
+    min-width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--sidebar-close-color, #94a3b8);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+  }
+  .close-button:hover {
+    background: var(--sidebar-close-hover-bg, rgba(71, 85, 105, 0.3));
+    color: var(--sidebar-close-hover-color, #f1f5f9);
+  }
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0.375rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sidebar-scrollbar-thumb, rgba(71, 85, 105, 0.5)) transparent;
+  }
+  .sidebar-content::-webkit-scrollbar {
+    width: 6px;
+  }
+  .sidebar-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .sidebar-content::-webkit-scrollbar-thumb {
+    background: var(--sidebar-scrollbar-thumb, rgba(71, 85, 105, 0.5));
+    border-radius: 3px;
+  }
+  .sidebar-content::-webkit-scrollbar-thumb:hover {
+    background: var(--sidebar-scrollbar-thumb-hover, rgba(71, 85, 105, 0.7));
+  }
+  .sidebar-content section {
+    margin-bottom: 1rem;
+    &:last-child {
+      margin-bottom: 0.25rem;
+    }
+    h4 {
+      margin: 0 0 0.5rem 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--sidebar-section-title-color, #cbd5e1);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: 0 0.375rem;
+    }
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 1pt 4pt;
+      margin-bottom: 0.25rem;
+      background: var(--sidebar-item-bg, rgba(30, 41, 59, 0.4));
+      border-radius: 4px;
+      border: var(--sidebar-item-border, 1px solid rgba(71, 85, 105, 0.2));
+      transition: all 0.2s ease;
+      &:hover {
+        background: var(--sidebar-item-hover-bg, rgba(30, 41, 59, 0.6));
+        border-color: var(--sidebar-item-hover-border, rgba(71, 85, 105, 0.4));
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+      span:first-child {
+        font-size: 0.8rem;
+        color: var(--sidebar-label-color, #94a3b8);
+        font-weight: 500;
+        min-width: 0;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      span:last-child {
+        font-size: 0.75rem;
+        color: var(--sidebar-value-color, #f1f5f9);
+        font-weight: 500;
+        text-align: right;
+        font-family: inherit;
+        flex-shrink: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .info-sidebar {
+      width: 100%;
+      max-width: 320px;
+    }
+  }
+</style>

package/dist/trajectory/Sidebar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Trajectory } from './index';
+interface Props {
+    trajectory: Trajectory;
+    current_step_idx: number;
+    current_filename?: string | null;
+    current_file_path?: string | null;
+    file_size?: number | null;
+    file_object?: File | null;
+    is_open?: boolean;
+    onclose?: () => void;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;