matterviz 0.3.1 → 0.3.2

package/dist/structure/Structure.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { ELEMENT_COLOR_SCHEMES } from '../colors';
 import { normalize_show_controls } from '../controls';
+import { StatusMessage } from '../feedback';
 import Spinner from '../feedback/Spinner.svelte';
 import Icon from '../Icon.svelte';
-import { decompress_file, handle_url_drop, load_from_url } from '../io';
+import { create_file_drop_handler, load_from_url } from '../io';
 import { parse_volumetric_file } from '../isosurface/parse';
 import { auto_isosurface_settings, DEFAULT_ISOSURFACE_SETTINGS, } from '../isosurface/types';
 import { ELEM_SYMBOLS } from '../labels';
@@ -10,7 +11,7 @@ import { set_fullscreen_bg, toggle_fullscreen } from '../layout';
 import { create_cart_to_frac, create_frac_to_cart } from '../math';
 import { DEFAULTS } from '../settings';
 import { colors } from '../state.svelte';
-import { get_element_counts, get_pbc_image_sites } from './';
+import { get_element_counts, get_pbc_image_sites, get_site_vector, } from './';
 import { wrap_to_unit_cell } from './pbc';
 import { is_valid_supercell_input, make_supercell } from './supercell';
 import * as symmetry from '../symmetry';
@@ -141,17 +142,18 @@ $effect(() => {
 });
 // Track if force vectors were auto-enabled to prevent repeated triggering
 let force_vectors_auto_enabled = $state(false);
-// Auto-enable force vectors when structure has force data
+// Auto-enable force vectors when structure has vector data (force, magmom, or spin)
 $effect(() => {
     if (structure?.sites && !force_vectors_auto_enabled) {
-        const has_force_data = structure.sites.some((site) => site.properties?.force && Array.isArray(site.properties.force));
-        // Enable force vectors if structure has force data
-        if (has_force_data && !scene_props.show_force_vectors) {
+        const has_vector_data = structure.sites.some((site) => get_site_vector(site) !== null);
+        if (!has_vector_data)
+            return;
+        if (!scene_props.show_force_vectors) {
             scene_props.show_force_vectors = true;
             scene_props.force_scale ??= DEFAULTS.structure.force_scale;
             scene_props.force_color ??= DEFAULTS.structure.force_color;
-            force_vectors_auto_enabled = true;
         }
+        force_vectors_auto_enabled = true;
     }
 });
 // Optimize scene props for performance based on structure size and mode
@@ -172,6 +174,7 @@ $effect(() => {
 let property_colors = $derived(get_property_colors(structure, atom_color_config, scene_props.bonding_strategy, sym_data));
 let symmetry_run_id = 0;
 let symmetry_error = $state();
+let last_symmetry_structure_ref = null;
 // Trigger symmetry analysis when structure is loaded or settings change.
 // Skip during atom drags — symmetry doesn't change from moving atoms,
 // and WASM analysis on every drag frame causes severe frame drops.
@@ -183,16 +186,28 @@ $effect(() => {
             sym_data = null;
             symmetry_error = undefined;
         });
+        last_symmetry_structure_ref = null;
         return;
     }
     const current_structure = structure;
+    const structure_changed = current_structure !== last_symmetry_structure_ref;
+    if (structure_changed) {
+        untrack(() => {
+            sym_data = null;
+            symmetry_error = undefined;
+        });
+        last_symmetry_structure_ref = current_structure;
+    }
+    else {
+        // Keep previous symmetry data while recomputing so bound consumers
+        // (e.g. SymmetryStats inputs) do not unmount and lose focus.
+        untrack(() => symmetry_error = undefined);
+    }
     const run_id = ++symmetry_run_id;
     // Destructure symmetry_settings to ensure Svelte tracks changes to symprec and algo
     // (reading just the object reference isn't sufficient for fine-grained reactivity)
     const { symprec, algo } = symmetry_settings ?? symmetry.default_sym_settings;
     const current_settings = { symprec, algo };
-    // Use untrack to prevent cascading reactivity when resetting state
-    untrack(() => [sym_data, symmetry_error] = [null, undefined]);
     symmetry.ensure_moyo_wasm_ready()
         .then(() => run_id === symmetry_run_id
         ? symmetry.analyze_structure_symmetry(current_structure, current_settings)
@@ -204,6 +219,7 @@ $effect(() => {
     })
         .catch((err) => {
         if (run_id === symmetry_run_id) {
+            untrack(() => sym_data = null);
             symmetry_error = `Symmetry analysis failed: ${err?.message || err}`;
             console.error(`Symmetry analysis failed:`, err);
         }
@@ -458,7 +474,6 @@ let camera = $state(undefined);
 let orbit_controls = $state(undefined);
 let rotation_target_ref = $state(undefined);
 let initial_computed_zoom = $state(undefined);
-let camera_move_timeout = $state(null);
 // Mutual exclusion: opening one pane closes others
 $effect(() => {
     if (info_pane_open) {
@@ -480,29 +495,53 @@ $effect(() => {
     if (structure)
         camera_has_moved = false;
 });
-// Set camera_has_moved to true when camera starts moving
-$effect(() => untrack(() => {
-    if (camera_is_moving) {
-        camera_has_moved = true;
-        // Debounce camera move events to avoid excessive emissions
-        if (camera_move_timeout)
-            clearTimeout(camera_move_timeout);
-        camera_move_timeout = setTimeout(() => {
-            const { camera_position } = scene_props;
-            on_camera_move?.({ structure, camera_has_moved, camera_position });
-        }, 200);
-    }
-}));
+const read_orbit_target = () => {
+    if (!orbit_controls?.target)
+        return;
+    const { x, y, z } = orbit_controls.target;
+    return [x, y, z];
+};
+const read_camera_position = () => camera
+    ? [camera.position.x, camera.position.y, camera.position.z]
+    : scene_props.camera_position;
+// Emit debounced camera updates while controls are active.
+$effect(() => {
+    if (!camera_is_moving)
+        return;
+    camera_has_moved = true;
+    const emit_camera_move = () => {
+        const camera_position = read_camera_position();
+        if (camera_position === undefined)
+            return;
+        const camera_target = read_orbit_target();
+        scene_props.camera_position = camera_position;
+        scene_props.camera_target = camera_target;
+        on_camera_move?.({
+            structure,
+            camera_has_moved,
+            camera_position,
+            camera_target,
+        });
+    };
+    emit_camera_move();
+    const emit_interval = setInterval(emit_camera_move, 200);
+    return () => clearInterval(emit_interval);
+});
 function reset_camera() {
-    // Reset camera position to trigger automatic positioning
+    // Reset camera position to trigger automatic positioning.
     scene_props.camera_position = [0, 0, 0];
+    scene_props.camera_target = rotation_target_ref;
     camera_has_moved = false;
-    // Manually reset zoom and pan using the exposed initial values
+    let camera_position = [0, 0, 0];
+    let camera_target = rotation_target_ref;
+    // Reset pan/zoom and ensure controls target returns to structure center.
     if (orbit_controls && camera) {
-        // Reset the target to the structure center (pan reset)
+        if (`reset` in orbit_controls &&
+            typeof orbit_controls.reset === `function`)
+            orbit_controls.reset();
         if (orbit_controls.target && rotation_target_ref) {
-            const [x, y, z] = rotation_target_ref;
-            orbit_controls.target.set(x, y, z);
+            const [target_x, target_y, target_z] = rotation_target_ref;
+            orbit_controls.target.set(target_x, target_y, target_z);
         }
         // Reset zoom for orthographic camera
         if (`zoom` in camera && initial_computed_zoom !== undefined) {
@@ -511,11 +550,14 @@ function reset_camera() {
             ortho_camera.updateProjectionMatrix();
         }
         // Call update to apply changes immediately
-        if (typeof orbit_controls.update === `function`) {
+        if (typeof orbit_controls.update === `function`)
             orbit_controls.update();
-        }
+        camera_position = read_camera_position() ?? camera_position;
+        camera_target = read_orbit_target();
     }
-    on_camera_reset?.({ structure, camera_has_moved, camera_position: [0, 0, 0] });
+    scene_props.camera_position = camera_position;
+    scene_props.camera_target = camera_target;
+    on_camera_reset?.({ structure, camera_has_moved, camera_position, camera_target });
 }
 const emit_file_load_event = (structure, filename, content) => on_file_load?.({
     structure: structure,
@@ -558,61 +600,33 @@ function parse_file_content(text_content, filename) {
     structure = parsed;
     return parsed;
 }
-async function handle_file_drop(event) {
-    event.preventDefault();
-    dragover = false;
-    if (!allow_file_drop)
-        return;
-    loading = true;
-    error_msg = undefined; // Clear previous error when a new file is dropped
-    try {
-        // Handle URL-based files (e.g. from FilePicker)
-        const handled = await handle_url_drop(event, on_file_drop || ((content, filename) => {
-            try {
-                const text_content = content instanceof ArrayBuffer
-                    ? new TextDecoder().decode(content)
-                    : content;
-                const parsed = parse_file_content(text_content, filename);
-                emit_file_load_event(parsed, filename, content);
-            }
-            catch (err) {
-                error_msg = `Failed to parse structure: ${err}`;
-                on_error?.({ error_msg, filename });
-            }
-        })).catch(() => false);
-        if (handled)
-            return;
-        // Handle file system drops
-        const file = event.dataTransfer?.files[0];
-        if (file) {
-            try {
-                const { content, filename } = await decompress_file(file);
-                if (content) {
-                    if (on_file_drop)
-                        on_file_drop(content, filename);
-                    else {
-                        // Parse structure internally when no handler provided
-                        try {
-                            const parsed = parse_file_content(content, filename);
-                            emit_file_load_event(parsed, filename, content);
-                        }
-                        catch (err) {
-                            error_msg = `Failed to parse structure: ${err}`;
-                            on_error?.({ error_msg, filename });
-                        }
-                    }
-                }
-            }
-            catch (error) {
-                error_msg = `Failed to load file ${file.name}: ${error}`;
-                on_error?.({ error_msg, filename: file.name });
-            }
+const handle_file_drop = create_file_drop_handler({
+    allow: () => allow_file_drop,
+    on_drop: (content, filename) => {
+        if (on_file_drop)
+            return on_file_drop(content, filename);
+        try {
+            const text_content = content instanceof ArrayBuffer
+                ? new TextDecoder().decode(content)
+                : content;
+            const parsed = parse_file_content(text_content, filename);
+            emit_file_load_event(parsed, filename, content);
         }
-    }
-    finally {
-        loading = false;
-    }
-}
+        catch (err) {
+            error_msg = `Failed to parse structure: ${err instanceof Error ? err.message : String(err)}`;
+            on_error?.({ error_msg, filename });
+        }
+    },
+    on_error: (msg) => {
+        error_msg = msg;
+        on_error?.({ error_msg: msg });
+    },
+    set_loading: (val) => {
+        loading = val;
+        if (val)
+            [error_msg, dragover] = [undefined, false];
+    },
+});
 function handle_keydown(event) {
     // Don't handle shortcuts if user is typing in an input field
     const target = event.target;
@@ -726,11 +740,16 @@ function handle_keydown(event) {
             }
         }
     }
-    // Interface shortcuts
-    if (event.key === `f` && fullscreen_toggle)
+    // Interface shortcuts (require Ctrl/Cmd modifier to avoid accidental triggers)
+    const has_modifier = event.ctrlKey || event.metaKey;
+    if (event.key === `f` && has_modifier && fullscreen_toggle) {
+        event.preventDefault();
         toggle_fullscreen(wrapper);
-    else if (event.key === `i` && enable_info_pane)
+    }
+    else if (event.key === `i` && has_modifier && enable_info_pane) {
+        event.preventDefault();
         info_pane_open = !info_pane_open;
+    }
     else if (event.key === `Escape`) {
         // Prioritize closing panes, then exit edit modes, then exit fullscreen
         if (info_pane_open)
@@ -948,10 +967,7 @@ $effect(() => {
       style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
     />
   {:else if error_msg}
-    <div class="error-state">
-      <p class="error">{error_msg}</p>
-      <button onclick={() => (error_msg = undefined)}>Dismiss</button>
-    </div>
+    <StatusMessage bind:message={error_msg} type="error" dismissible />
   {:else if (structure?.sites?.length ?? 0) > 0}
     <section
       class="control-buttons {controls_config.class}"
@@ -1432,32 +1448,6 @@ $effect(() => {
     display: grid;
     place-content: center;
   }
-  .error-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: var(--struct-height, 500px);
-    padding: 2rem;
-    text-align: center;
-    box-sizing: border-box;
-  }
-  .error-state p {
-    color: var(--error-color, #ff6b6b);
-    margin: 0 0 1rem;
-  }
-  .error-state button {
-    padding: 0.5rem 1rem;
-    background: var(--error-color, #ff6b6b);
-    color: white;
-    border: none;
-    border-radius: var(--border-radius, 3pt);
-    cursor: pointer;
-    font-size: 0.9rem;
-  }
-  .error-state button:hover {
-    background: var(--error-color-hover, #ff5252);
-  }
   .symmetry-error {
     position: absolute;
     bottom: 1rem;

package/dist/structure/Structure.svelte.d.ts

@@ -78,6 +78,6 @@ type $$ComponentProps = {
     on_camera_move?: EventHandler;
     on_camera_reset?: EventHandler;
 } & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`> & Omit<HTMLAttributes<HTMLDivElement>, `children`>;
-declare const Structure: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "structure" | "hovered" | "controls_open" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "loading" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "sym_data" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "measured_sites" | "scene_props" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "wrapper" | "png_dpi" | "measure_mode" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
+declare const Structure: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "controls_open" | "loading" | "fullscreen" | "hovered" | "color_scheme" | "background_color" | "background_opacity" | "show_image_atoms" | "info_pane_open" | "wrapper" | "sym_data" | "error_msg" | "atom_color_config" | "hidden_elements" | "hidden_prop_vals" | "element_mapping" | "element_radius_overrides" | "site_radius_overrides" | "selected_sites" | "supercell_scaling" | "cell_type" | "active_volume_idx" | "measured_sites" | "scene_props" | "lattice_props" | "volumetric_data" | "isosurface_settings" | "png_dpi" | "measure_mode" | "enable_measure_mode" | "performance_mode" | "displayed_structure" | "symmetry_settings">;
 type Structure = ReturnType<typeof Structure>;
 export default Structure;

package/dist/structure/StructureControls.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { AXIS_COLORS, ELEMENT_COLOR_SCHEMES } from '../colors';
+import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte';
 import { format_num } from '../labels';
 import { SettingsSection } from '../layout';
 import { to_degrees, to_radians } from '../math';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import { ColorScaleSelect } from '../plot';
 import { DEFAULTS, SETTINGS_CONFIG } from '../settings';
-import IsosurfaceControls from '../isosurface/IsosurfaceControls.svelte';
 import { Lattice, StructureScene } from './';
 import { is_valid_supercell_input } from './supercell';
 import Select from 'svelte-multiselect';
@@ -103,7 +103,12 @@ function get_representative_colors(scheme_name) {
 
 <DraggablePane
   bind:show={controls_open}
-  pane_props={{ ...pane_props, class: `controls-pane ${pane_props?.class ?? ``}` }}
+  resizable="both"
+  pane_props={{
+    ...pane_props,
+    class: `controls-pane ${pane_props?.class ?? ``}`,
+    style: `--pane-max-height: 70vh; ${pane_props?.style ?? ``}`,
+  }}
   toggle_props={{
     title: controls_open ? `` : `Structure controls`,
     ...toggle_props,
@@ -111,6 +116,14 @@ function get_representative_colors(scheme_name) {
   }}
   {...rest}
 >
+  {#if volumetric_data?.length && isosurface_settings}
+    <IsosurfaceControls
+      bind:settings={isosurface_settings}
+      volumes={volumetric_data}
+      bind:active_volume_idx
+    />
+  {/if}
+
   <SettingsSection
     title="Visibility"
     current_values={{
@@ -424,9 +437,7 @@ function get_representative_colors(scheme_name) {
       Same size atoms
       <input type="checkbox" bind:checked={scene_props.same_size_atoms} />
     </label>
-    <span
-      class="label"
-      style="align-items: start"
+    <label
       {@attach tooltip({ content: SETTINGS_CONFIG.color_scheme.description })}
     >
       Color scheme
@@ -436,7 +447,10 @@ function get_representative_colors(scheme_name) {
         minSelect={1}
         bind:selected={color_scheme_selected}
         liOptionStyle="padding: 3pt 6pt;"
-        style="width: 10em; border: none"
+        liSelectedStyle="background-color: transparent;"
+        ulSelectedStyle="display: contents;"
+        inputStyle="flex: none; min-width: 0; width: 0; opacity: 0;"
+        style="flex: 1; min-width: 0; border: none; margin-left: 4pt"
         aria-label="Color scheme"
       >
         {#snippet children({ option })}
@@ -454,9 +468,8 @@ function get_representative_colors(scheme_name) {
           </div>
         {/snippet}
       </Select>
-    </span>
+    </label>
     <label
-      style="align-items: start"
       {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_mode.description })}
     >
       Atom coloring
@@ -470,9 +483,7 @@ function get_representative_colors(scheme_name) {
       </select>
     </label>
     {#if atom_color_config.mode !== `element`}
-      <span
-        class="label"
-        style="align-items: start; white-space: nowrap"
+      <label
         {@attach tooltip({ content: SETTINGS_CONFIG.structure.atom_color_scale.description })}
       >
         Color scale
@@ -484,10 +495,10 @@ function get_representative_colors(scheme_name) {
             wrapper_style: `width: 100%;`,
             title_style: `font-size: 0.95em;`,
           }}
-          style="width: 100%; border: none"
+          style="flex: 1; min-width: 0; border: none"
           aria-label="Color scale"
         />
-      </span>
+      </label>
     {/if}
   </SettingsSection>
 
@@ -884,14 +895,6 @@ function get_representative_colors(scheme_name) {
       </label>
     </SettingsSection>
   {/if}
-
-  {#if volumetric_data?.length && isosurface_settings}
-    <IsosurfaceControls
-      bind:settings={isosurface_settings}
-      volumes={volumetric_data}
-      bind:active_volume_idx
-    />
-  {/if}
 </DraggablePane>
 
 <style>
@@ -925,7 +928,7 @@ function get_representative_colors(scheme_name) {
     justify-content: space-between;
     width: 100%;
   }
-  label, .label {
+  label {
     display: flex;
     align-items: center;
     gap: 10pt;

package/dist/structure/StructureControls.svelte.d.ts

@@ -1,5 +1,5 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { IsosurfaceSettings, VolumetricData } from '../isosurface/types';
+import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AnyStructure } from './';
 import { Lattice, StructureScene } from './';
 import type { AtomColorConfig } from './atom-properties';

package/dist/structure/StructureInfoPane.svelte

@@ -96,12 +96,18 @@ let pane_data = $derived.by(() => {
             else
                 roto_translations++;
         }
+        const international_symbol = sym_data.international_short;
+        const space_group_symbol = (sym_data.hm_symbol ?? international_symbol)
+            ?.replace(/\s+/g, ``);
+        const space_group_value = space_group_symbol
+            ? `${sym_data.number} (${space_group_symbol})`
+            : String(sym_data.number);
         sections.push({
             title: `Symmetry`,
             items: [
                 {
                     label: `Space Group`,
-                    value: String(sym_data.number),
+                    value: space_group_value,
                     key: `symmetry-space-group`,
                 },
                 {