matterviz 0.4.2 → 0.4.3

package/dist/spectral/helpers.js

@@ -81,7 +81,7 @@ export const IMAGINARY_MODE_NOISE_THRESHOLD = 0.005; // Clamp negatives < 0.5% a
 export function pretty_sym_point(symbol) {
     if (!symbol)
         return ``;
-    // Remove underscores (htmlify maps S0 → S<sub>0</sub> but leaves S_0 as is)
+    // Remove underscores so S_0 and S0 are treated alike
     // Replace common symmetry point names with Greek letters
     // Handle both plain names (GAMMA) and LaTeX notation (\Gamma) from pymatgen
     // Handle subscripts: convert S0 to S₀, K1 to K₁, Γ1 to Γ₁, etc.
@@ -336,35 +336,15 @@ const SPIN_DOWN_KEYS = [`-1`, `Spin.down`];
 export function extract_spin_channels(data) {
     if (Array.isArray(data))
         return { up: data, down: null };
-    if (data && typeof data === `object`) {
-        const record = data;
-        let spin_up = null;
-        let spin_down = null;
-        // Extract spin-up channel
-        for (const key of SPIN_UP_KEYS) {
-            if (key in record) {
-                spin_up = record[key];
-                break;
-            }
-        }
-        // Extract spin-down channel
-        for (const key of SPIN_DOWN_KEYS) {
-            if (key in record) {
-                spin_down = record[key];
-                break;
-            }
-        }
-        // Fall back to first key if no spin-up key found
-        if (spin_up === null) {
-            const keys = Object.keys(record);
-            if (keys.length > 0)
-                spin_up = record[keys[0]];
-        }
-        if (spin_up === null)
-            return null;
-        return { up: spin_up, down: spin_down };
-    }
-    return null;
+    if (!data || typeof data !== `object`)
+        return null;
+    const record = data;
+    const up_key = SPIN_UP_KEYS.find((key) => key in record);
+    const down_key = SPIN_DOWN_KEYS.find((key) => key in record);
+    // No spin-up key: do not fall back to Object.keys()[0] (could be spin-down)
+    if (up_key === undefined)
+        return null;
+    return { up: record[up_key], down: down_key !== undefined ? record[down_key] : null };
 }
 // Convert pymatgen PhononBandStructureSymmLine or BandStructure to matterviz format
 function convert_pymatgen_band_structure(pmg) {
@@ -640,6 +620,8 @@ export function find_qpoint_at_distance(band_struct, target) {
         return null;
     return distance.reduce((closest, dist, idx) => Math.abs(dist - target) < Math.abs(distance[closest] - target) ? idx : closest, 0);
 }
+// Look up a branch's x-range in the plot via its start/end q-point labels
+const branch_x_range = (bs, branch, x_positions) => x_positions[get_segment_key(bs.qpoints[branch.start_index]?.label ?? undefined, bs.qpoints[branch.end_index]?.label ?? undefined)];
 // Rescaled x-position of a q-point index along the band plot path. Inverse of
 // find_qpoint_at_rescaled_x, used to highlight a q-point hovered in the Brillouin zone.
 // Returns null if the index doesn't fall on a plotted (non-discontinuity) branch.
@@ -649,9 +631,7 @@ export function qpoint_x_position(band_struct, qpoint_index, x_positions) {
     for (const branch of band_struct.branches) {
         if (qpoint_index < branch.start_index || qpoint_index > branch.end_index)
             continue;
-        const start_label = band_struct.qpoints[branch.start_index]?.label ?? undefined;
-        const end_label = band_struct.qpoints[branch.end_index]?.label ?? undefined;
-        const range = x_positions[get_segment_key(start_label, end_label)];
+        const range = branch_x_range(band_struct, branch, x_positions);
         if (!range)
             continue;
         const [x_start, x_end] = range;
@@ -671,74 +651,50 @@ export function find_qpoint_at_rescaled_x(band_struct, rescaled_x, x_positions)
         return null;
     // Find which segment contains this x coordinate
     for (const branch of band_struct.branches) {
-        const start_idx = branch.start_index;
-        const end_idx = branch.end_index;
-        const start_label = band_struct.qpoints[start_idx]?.label ?? undefined;
-        const end_label = band_struct.qpoints[end_idx]?.label ?? undefined;
-        const segment_key = get_segment_key(start_label, end_label);
-        const segment_range = x_positions[segment_key];
+        const { start_index: start_idx, end_index: end_idx } = branch;
+        const segment_range = branch_x_range(band_struct, branch, x_positions);
         if (!segment_range)
             continue;
         const [x_start, x_end] = segment_range;
-        // Check if discontinuity (zero-length segment)
-        const is_discontinuity = Math.abs(x_end - x_start) < 1e-6;
-        if (is_discontinuity) {
-            // For discontinuities, check if x is exactly at this point
-            if (Math.abs(rescaled_x - x_start) < 1e-6) {
+        // Discontinuity (zero-length segment): match only if x is exactly at this point
+        if (Math.abs(x_end - x_start) < 1e-6) {
+            if (Math.abs(rescaled_x - x_start) < 1e-6)
                 return start_idx;
-            }
             continue;
         }
         // Check if x is within this segment (with small tolerance for edges)
         if (rescaled_x >= x_start - 1e-6 && rescaled_x <= x_end + 1e-6) {
             // Map from rescaled x back to original distance
-            const segment_distances = band_struct.distance.slice(start_idx, end_idx + 1);
-            const dist_min = segment_distances[0];
-            const dist_max = segment_distances.at(-1) ?? dist_min;
-            const dist_range = dist_max - dist_min;
-            // Handle zero-length segments
-            if (dist_range === 0) {
+            const dist_min = band_struct.distance[start_idx];
+            const dist_range = band_struct.distance[end_idx] - dist_min;
+            if (dist_range === 0)
                 return start_idx;
-            }
             // Inverse of the scaling: x = x_start + ((dist - dist_min) / dist_range) * (x_end - x_start)
-            // Solving for dist: dist = dist_min + ((x - x_start) / (x_end - x_start)) * dist_range
             const normalized_x = (rescaled_x - x_start) / (x_end - x_start);
             const target_dist = dist_min + normalized_x * dist_range;
             // Find closest qpoint in this branch to the target distance
-            let closest_idx = start_idx;
-            let min_diff = Math.abs(band_struct.distance[start_idx] - target_dist);
+            let [closest_idx, min_diff] = [start_idx, Infinity];
             for (let idx = start_idx; idx <= end_idx; idx++) {
                 const diff = Math.abs(band_struct.distance[idx] - target_dist);
-                if (diff < min_diff) {
-                    min_diff = diff;
-                    closest_idx = idx;
-                }
+                if (diff < min_diff)
+                    [closest_idx, min_diff] = [idx, diff];
             }
             return closest_idx;
         }
     }
     // Fallback: find closest labeled point
-    let closest_idx = 0;
-    let min_dist = Infinity;
+    let [closest_idx, min_dist] = [0, Infinity];
     for (const branch of band_struct.branches) {
-        const start_idx = branch.start_index;
-        const end_idx = branch.end_index;
-        const start_label = band_struct.qpoints[start_idx]?.label ?? undefined;
-        const end_label = band_struct.qpoints[end_idx]?.label ?? undefined;
-        const segment_key = get_segment_key(start_label, end_label);
-        const segment_range = x_positions[segment_key];
+        const segment_range = branch_x_range(band_struct, branch, x_positions);
         if (!segment_range)
             continue;
-        const [x_start, x_end] = segment_range;
         for (const [x_pos, idx] of [
-            [x_start, start_idx],
-            [x_end, end_idx],
+            [segment_range[0], branch.start_index],
+            [segment_range[1], branch.end_index],
         ]) {
             const dist = Math.abs(rescaled_x - x_pos);
-            if (dist < min_dist) {
-                min_dist = dist;
-                closest_idx = idx;
-            }
+            if (dist < min_dist)
+                [closest_idx, min_dist] = [idx, dist];
         }
     }
     return closest_idx;
@@ -791,24 +747,15 @@ const shift_dos_energies = (dos, shift) => ({
 // Recursively shifts nested DOS in atom_dos and spd_dos for consistency
 export function shift_to_fermi(dos) {
     const shift = dos.efermi;
-    // Shift root DOS energies using the shared helper
-    const shifted_root = shift_dos_energies(dos, shift);
-    // Shift nested atom_dos if present
-    const atom_dos = dos.atom_dos
-        ? Object.fromEntries(Object.entries(dos.atom_dos).map(([key, nested_dos]) => [
-            key,
-            shift_dos_energies(nested_dos, shift),
-        ]))
-        : undefined;
-    // Shift nested spd_dos if present
-    const spd_dos = dos.spd_dos
-        ? Object.fromEntries(Object.entries(dos.spd_dos).map(([key, nested_dos]) => [
+    const shift_nested = (nested) => nested &&
+        Object.fromEntries(Object.entries(nested).map(([key, nested_dos]) => [
             key,
             shift_dos_energies(nested_dos, shift),
-        ]))
-        : undefined;
+        ]));
+    const atom_dos = shift_nested(dos.atom_dos);
+    const spd_dos = shift_nested(dos.spd_dos);
     return {
-        ...shifted_root,
+        ...shift_dos_energies(dos, shift),
         efermi: 0, // Explicitly set to 0 (shift_dos_energies would give efermi - shift)
         ...(atom_dos && { atom_dos }),
         ...(spd_dos && { spd_dos }),
@@ -905,26 +852,14 @@ export function compute_frequency_range(band_structs, doses, padding_factor = 0.
     const all_freqs = [];
     // Check raw band_structs for electronic markers before normalization
     // (normalized structures always have qpoints, so we can't detect from them)
-    let has_electronic_bs = false;
     // Support both qpoints (phonon) and kpoints (electronic) to detect single vs dict
     const is_single_bs = band_structs &&
         typeof band_structs === `object` &&
         (`qpoints` in band_structs || `kpoints` in band_structs);
-    if (band_structs && typeof band_structs === `object`) {
-        // Single structure check
-        if (is_electronic_band_struct(band_structs)) {
-            has_electronic_bs = true;
-        }
-        else if (!is_single_bs) {
-            // Dict of band structures - check each value
-            for (const bs_val of Object.values(band_structs)) {
-                if (is_electronic_band_struct(bs_val)) {
-                    has_electronic_bs = true;
-                    break;
-                }
-            }
-        }
-    }
+    const has_electronic_bs = band_structs &&
+        typeof band_structs === `object` &&
+        (is_electronic_band_struct(band_structs) ||
+            (!is_single_bs && Object.values(band_structs).some(is_electronic_band_struct)));
     const bs_list = band_structs
         ? is_single_bs
             ? [normalize_band_structure(band_structs)]

package/dist/structure/AtomLegend.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { contrast_color, default_element_colors } from '../colors'
   import type { CompositionType } from '../composition'
-  import type { ElementSymbol } from '../element'
-  import { element_data } from '../element'
+  import { element_by_symbol, is_elem_symbol, type ElementSymbol } from '../element'
   import Icon from '../Icon.svelte'
   import { ELEM_SYMBOLS, format_num } from '../labels'
   import { ColorBar } from '../plot'
@@ -26,7 +25,6 @@
     property_colors = null,
     elements,
     elem_color_picker_title = `Double click to reset color`,
-    labels = $bindable([]),
     amount_format = `.3~f`,
     show_amounts = true,
     get_element_label,
@@ -49,7 +47,6 @@
     property_colors?: AtomPropertyColors | null
     elements?: CompositionType
     elem_color_picker_title?: string
-    labels?: HTMLLabelElement[]
     amount_format?: string // Float formatting for element amounts (default: 3 significant digits)
     show_amounts?: boolean // Whether to show element amounts
     get_element_label?: (element: string, amount: number) => string // Custom label function
@@ -161,12 +158,11 @@
     if (!remap_search) return ELEM_SYMBOLS
     const query = remap_search.toLowerCase()
     return ELEM_SYMBOLS.filter((elem) => {
-      const data = element_data?.find((el) => el.symbol === elem)
+      const data = element_by_symbol.get(elem)
       return elem.toLowerCase().includes(query) || data?.name?.toLowerCase().includes(query)
     })
   })
 
-  const known_element_symbols = new Set(ELEM_SYMBOLS)
   let sorted_element_entries = $derived.by(() => {
     if (!elements) return []
     const element_amounts = elements as Record<string, number>
@@ -175,9 +171,7 @@
       return amount === undefined ? [] : [[element_symbol, amount] as const]
     })
     const unknown_entries = Object.entries(element_amounts)
-      .filter(
-        ([element_symbol]) => !known_element_symbols.has(element_symbol as ElementSymbol),
-      )
+      .filter(([element_symbol]) => !is_elem_symbol(element_symbol))
       .sort(([element_a], [element_b]) => element_a.localeCompare(element_b))
     return [...ordered_known_entries, ...unknown_entries]
   })
@@ -326,13 +320,12 @@
 {#if show_element_legend}
   <div {...rest} class={[`atom-legend element-legend`, rest.class]}>
     {@render mode_selector_snippet()}
-    {#each sorted_element_entries as [elem, amt], idx (elem)}
+    {#each sorted_element_entries as [elem, amt] (elem)}
       {@const is_hidden = hidden_elements.has(elem as ElementSymbol)}
       {@const displayed_elem = element_mapping?.[elem as ElementSymbol] || elem}
       <div class="legend-item">
         <label
-          bind:this={labels[idx]}
-          title="{element_data?.find((el) => el.symbol === displayed_elem)?.name ??
+          title="{element_by_symbol.get(displayed_elem as ElementSymbol)?.name ??
             ``}{displayed_elem !== elem ? ` (remapped from ${elem})` : ``}"
           {@attach tooltip()}
           style:background-color={colors.element[displayed_elem]}
@@ -445,7 +438,7 @@
                 </button>
               {/if}
               {#each filtered_elements as target_elem (target_elem)}
-                {@const elem_info = element_data?.find((el) => el.symbol === target_elem)}
+                {@const elem_info = element_by_symbol.get(target_elem)}
                 <button
                   class="remap-option"
                   class:selected={displayed_elem === target_elem}
@@ -550,6 +543,8 @@
   .atom-legend {
     position: absolute;
     z-index: var(--legend-z-index, 1);
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     pointer-events: auto;
     visibility: visible;
     filter: var(--legend-filter, grayscale(10%) brightness(0.95) saturate(0.8));

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

@@ -1,5 +1,5 @@
 import type { CompositionType } from '../composition';
-import type { ElementSymbol } from '../element';
+import { type ElementSymbol } from '../element';
 import type { AnyStructure } from './';
 import type { AtomColorConfig, AtomPropertyColors } from './atom-properties';
 import type { MoyoDataset } from '@spglib/moyo-wasm';
@@ -11,7 +11,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
     property_colors?: AtomPropertyColors | null;
     elements?: CompositionType;
     elem_color_picker_title?: string;
-    labels?: HTMLLabelElement[];
     amount_format?: string;
     show_amounts?: boolean;
     get_element_label?: (element: string, amount: number) => string;
@@ -30,6 +29,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `children`> & {
         structure?: AnyStructure | null;
     }]>;
 };
-declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "labels" | "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "atom_color_config" | "element_mapping">;
+declare const AtomLegend: import("svelte").Component<$$ComponentProps, {}, "hidden_elements" | "hidden_prop_vals" | "element_radius_overrides" | "site_radius_overrides" | "atom_color_config" | "element_mapping">;
 type AtomLegend = ReturnType<typeof AtomLegend>;
 export default AtomLegend;

package/dist/structure/CellSelect.svelte

@@ -29,6 +29,26 @@
   let input_value = $state(supercell_scaling)
   let input_valid = $derived(is_valid_supercell_input(input_value))
 
+  // Hover-intent gate: opening instantly on mouseenter made the menu pop open
+  // when merely scrubbing the pointer across compact embeds (carousel cards).
+  // Deliberate hovers still open it; keyboard focus and clicks open instantly.
+  const hover_open_delay_ms = 200
+  let hover_timer: ReturnType<typeof setTimeout> | undefined
+
+  const schedule_hover_open = () => {
+    if (suppress_hover) return
+    clearTimeout(hover_timer)
+    // re-check suppression at fire time: a sibling popover may have opened meanwhile
+    hover_timer = setTimeout(() => (menu_open = !suppress_hover), hover_open_delay_ms)
+  }
+
+  const close_menu = () => {
+    clearTimeout(hover_timer)
+    menu_open = false
+  }
+
+  $effect(() => () => clearTimeout(hover_timer))
+
   const supercell_presets = [`1x1x1`, `2x2x2`, `3x3x3`, `2x2x1`, `3x3x1`, `2x1x1`]
 
   // Always show all 3 cell types - Prim/Conv disabled without sym_data
@@ -51,13 +71,13 @@
   function apply_preset(preset: string) {
     supercell_scaling = preset
     input_value = preset
-    menu_open = false
+    close_menu()
   }
 
   function handle_input_submit() {
     if (input_valid && input_value !== supercell_scaling) {
       supercell_scaling = input_value
-      menu_open = false
+      close_menu()
     }
   }
 
@@ -69,11 +89,11 @@
       !(next_target instanceof Node) ||
       !current_target.contains(next_target)
     )
-      menu_open = false
+      close_menu()
   }
 
   function handle_key_down(event: KeyboardEvent, submit_on_enter: boolean = false) {
-    if (event.key === `Escape`) menu_open = false
+    if (event.key === `Escape`) close_menu()
     if (submit_on_enter && event.key === `Enter`) handle_input_submit()
   }
 
@@ -87,22 +107,25 @@
   // Close + keep closed while suppressed so the menu can't obscure a sibling popover
   // (e.g. the atom color-mode dropdown) the user is actively interacting with
   $effect(() => {
-    if (suppress_hover) menu_open = false
+    if (suppress_hover) close_menu()
   })
 </script>
 
 <div
   class="cell-select"
   role="group"
-  {@attach click_outside({ callback: () => (menu_open = false) })}
-  onmouseenter={() => (menu_open = !suppress_hover)}
-  onmouseleave={() => (menu_open = false)}
+  {@attach click_outside({ callback: close_menu })}
+  onmouseenter={schedule_hover_open}
+  onmouseleave={close_menu}
   onfocusin={() => (menu_open = !suppress_hover)}
   onfocusout={handle_focus_out}
 >
   <button
     type="button"
-    onclick={() => (menu_open = !suppress_hover && !menu_open)}
+    onclick={() => {
+      clearTimeout(hover_timer)
+      menu_open = !suppress_hover && !menu_open
+    }}
     onkeydown={handle_key_down}
     class="toggle-btn"
     class:active={menu_open}
@@ -224,7 +247,9 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
-    z-index: 100;
+    z-index: var(--z-index-viewer-dropdown, 100);
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     font-size: var(--struct-cell-select-dropdown-font, max(10px, 1em));
     min-width: 118px;
   }