matterviz 0.3.5 → 0.3.7

package/dist/composition/Formula.svelte

@@ -89,11 +89,11 @@
       .join(` `),
   )
 
-  function handle_copy(event: ClipboardEvent) {
+  function handle_copy(event: ClipboardEvent & { currentTarget: HTMLElement }) {
     const selection = window.getSelection()
     // Only intercept if user selected text fully within this formula
     if (!selection || selection.isCollapsed) return
-    const formula_el = event.currentTarget as HTMLElement
+    const formula_el = event.currentTarget
     if (
       !formula_el.contains(selection.anchorNode) ||
       !formula_el.contains(selection.focusNode)
@@ -102,8 +102,11 @@
     event.clipboardData?.setData(`text/plain`, plain_text_formula)
   }
 
-  function show_tooltip(element: ElementSymbol, event: MouseEvent) {
-    const { left, width, top, bottom, right, height } = (event.target as HTMLElement)
+  function show_tooltip(
+    element: ElementSymbol,
+    event: MouseEvent & { currentTarget: HTMLElement },
+  ) {
+    const { left, width, top, bottom, right, height } = event.currentTarget
       .getBoundingClientRect()
     hovered_element = element
 

package/dist/composition/FormulaFilter.svelte

@@ -243,9 +243,7 @@
     close_history()
   }
 
-  function is_pinned(entry: string): boolean {
-    return pinned_history.includes(entry)
-  }
+  const is_pinned = (entry: string): boolean => pinned_history.includes(entry)
 
   // Filtered history: exclude current value to avoid redundant suggestion
   let visible_history = $derived.by(() => {

package/dist/composition/format.js

@@ -1,5 +1,5 @@
 import { format_num } from '../labels';
-import { ELEMENT_ELECTRONEGATIVITY_MAP, parse_composition } from './parse';
+import { ELEMENT_ELECTRONEGATIVITY_MAP, is_valid_element, parse_composition } from './parse';
 // Extract composition from structure object
 const structure_to_composition = (structure) => {
     if (!structure.sites || !Array.isArray(structure.sites)) {
@@ -17,9 +17,10 @@ const structure_to_composition = (structure) => {
     }
     return composition;
 };
+const is_structure_like = (input) => `sites` in input || `lattice` in input;
 // Format composition into chemical formula string
 export const format_composition_formula = (composition, sort_fn, plain_text = false, delim = ` `, amount_format = `.3~s`) => {
-    const symbols = Object.keys(composition);
+    const symbols = Object.keys(composition).filter(is_valid_element);
     return sort_fn(symbols)
         .filter((el) => composition[el] && composition[el] > 0)
         .map((el) => {
@@ -37,9 +38,8 @@ const format_formula_generic = (input, sort_fn, plain_text = false, delim = ` `,
         let composition;
         if (typeof input === `string`)
             composition = parse_composition(input);
-        else if (`sites` in input || `lattice` in input) {
+        else if (is_structure_like(input))
             composition = structure_to_composition(input);
-        }
         else
             composition = input;
         return format_composition_formula(composition, sort_fn, plain_text, delim, amount_format);

package/dist/composition/parse.d.ts

@@ -34,7 +34,8 @@ export declare function extract_formula_elements(formula: string, { unique, sort
     sorted?: boolean;
 }): ElementSymbol[];
 export declare function generate_chem_sys_subspaces(input: string | CompositionType | ElementSymbol[]): string[];
-export declare const normalize_element_symbols: <T extends string>(csv: string, all_symbols?: T[]) => T[];
+export declare function normalize_element_symbols(csv: string): ElementSymbol[];
+export declare function normalize_element_symbols<T extends string>(csv: string, all_symbols: T[]): T[];
 export type WildcardFormulaToken = {
     element: ElementSymbol | null;
     count: number;

package/dist/composition/parse.js

@@ -21,8 +21,19 @@ export const is_valid_element = (sym) => ELEM_SYMBOLS.includes(sym);
 // Check if object has atomic numbers as keys (1-118)
 const is_atomic_number_composition = (obj) => {
     const keys = Object.keys(obj);
+    const atomic_nums = keys.map(Number);
     return (keys.length > 0 &&
-        keys.map(Number).every((num) => Number.isInteger(num) && num >= 1 && num <= 118));
+        atomic_nums.every((atomic_num) => Number.isInteger(atomic_num) && Object.hasOwn(ATOMIC_NUMBER_TO_SYMBOL, atomic_num)));
+};
+const format_state = (state) => (state > 0 ? `+` : ``) + state;
+const parse_count = (count) => (count ? parseFloat(count) : 1);
+const format_count = (count) => {
+    if (!Number.isFinite(count))
+        return `${count}`;
+    return Number(count.toPrecision(12)).toLocaleString(`en-US`, {
+        maximumSignificantDigits: 12,
+        useGrouping: false,
+    });
 };
 // Convert atomic numbers to element symbols
 export const atomic_num_to_symbols = (atomic_composition) => {
@@ -32,7 +43,7 @@ export const atomic_num_to_symbols = (atomic_composition) => {
         if (!symbol)
             throw new Error(`Invalid atomic number: ${atomic_num_str}`);
         if (amount > 0)
-            composition[symbol] = (composition[symbol] || 0) + amount;
+            composition[symbol] = (composition[symbol] ?? 0) + amount;
     }
     return composition;
 };
@@ -40,6 +51,8 @@ export const atomic_num_to_symbols = (atomic_composition) => {
 export const atomic_symbol_to_num = (symbol_composition) => {
     const atomic_composition = {};
     for (const [symbol, amount] of Object.entries(symbol_composition)) {
+        if (!is_valid_element(symbol))
+            throw new Error(`Invalid element symbol: ${symbol}`);
         const atomic_num = SYMBOL_TO_ATOMIC_NUMBER[symbol];
         if (!atomic_num)
             throw new Error(`Invalid element symbol: ${symbol}`);
@@ -52,11 +65,11 @@ export const atomic_symbol_to_num = (symbol_composition) => {
 // Expand parentheses in chemical formulas
 const expand_parentheses = (formula) => {
     while (formula.includes(`(`)) {
-        formula = formula.replace(/\(([^()]+)\)(\d*)/g, (_match, group, multiplier) => {
-            const mult = multiplier ? parseInt(multiplier, 10) : 1;
-            return group.replace(/([A-Z][a-z]?)(\d*)/g, (_m, element, count) => {
-                const num = (count ? parseInt(count, 10) : 1) * mult;
-                return element + (num > 1 ? num : ``);
+        formula = formula.replace(/\(([^()]+)\)(\d+(?:\.\d+)?|\.\d+)?/g, (_match, group, multiplier) => {
+            const mult = parse_count(multiplier);
+            return group.replace(/([A-Z][a-z]?)(\d+(?:\.\d+)?|\.\d+)?/g, (_m, element, count) => {
+                const count_str = format_count(parse_count(count) * mult);
+                return element + (count_str === `1` ? `` : count_str);
             });
         });
     }
@@ -66,12 +79,12 @@ const expand_parentheses = (formula) => {
 export const parse_formula = (formula) => {
     const composition = {};
     const cleaned_formula = expand_parentheses(formula.replace(/\s/g, ``));
-    for (const match of cleaned_formula.matchAll(/([A-Z][a-z]?)(\d*)/g)) {
+    for (const match of cleaned_formula.matchAll(/([A-Z][a-z]?)(\d+(?:\.\d+)?|\.\d+)?/g)) {
         const element = match[1];
-        const count = match[2] ? parseInt(match[2], 10) : 1;
+        const count = parse_count(match[2]);
         if (!is_valid_element(element))
             throw new Error(`Invalid element symbol: ${element}`);
-        composition[element] = (composition[element] || 0) + count;
+        composition[element] = (composition[element] ?? 0) + count;
     }
     return composition;
 };
@@ -82,7 +95,7 @@ export const normalize_composition = (composition) => {
     }
     const normalized = {};
     for (const [element, amount] of Object.entries(composition)) {
-        if (typeof amount === `number` && amount > 0) {
+        if (typeof amount === `number` && amount > 0 && is_valid_element(element)) {
             normalized[element] = amount;
         }
     }
@@ -100,7 +113,7 @@ export const sanitize_composition_keys = (composition) => {
         if (typeof amount !== `number` || amount <= 0)
             continue;
         // Extract first valid element symbol from key (e.g. "B0." -> "B", "Fe2+" -> "Fe")
-        const elem = (key.match(/[A-Z][a-z]?/g) || []).find(is_valid_element);
+        const elem = (key.match(/[A-Z][a-z]?/g) ?? []).find(is_valid_element);
         if (elem)
             sanitized[elem] = (sanitized[elem] || 0) + amount;
     }
@@ -114,6 +127,8 @@ export const fractional_composition = (composition, by_weight = false) => {
     const filtered = Object.fromEntries(Object.entries(composition).filter(([, amount]) => amount > 0));
     if (by_weight) {
         const element_weights = Object.fromEntries(Object.entries(filtered).map(([element, amount]) => {
+            if (!is_valid_element(element))
+                throw new Error(`Unknown element: ${element}`);
             const atomic_mass = ATOMIC_WEIGHTS.get(element);
             if (!atomic_mass)
                 throw new Error(`Unknown element: ${element}`);
@@ -162,11 +177,16 @@ export const get_reduced_formula = (composition) => {
     const divisor = amounts.reduce((acc, amt) => gcd(acc, amt));
     if (divisor <= 1)
         return composition;
-    return Object.fromEntries(Object.entries(composition).map(([elem, amt]) => [elem, amt / divisor]));
+    const reduced = {};
+    for (const [elem, amt] of Object.entries(composition)) {
+        if (is_valid_element(elem))
+            reduced[elem] = amt / divisor;
+    }
+    return reduced;
 };
 // Calculate molecular weight (sum of atomic masses * amounts)
 export const get_molecular_weight = (composition) => Object.entries(composition).reduce((total, [elem, amount]) => {
-    const mass = ATOMIC_WEIGHTS.get(elem) ?? 0;
+    const mass = is_valid_element(elem) ? (ATOMIC_WEIGHTS.get(elem) ?? 0) : 0;
     return total + mass * amount;
 }, 0);
 // Parse oxidation state string (e.g. "+2", "2+", "-", "[2-]") to number
@@ -194,12 +214,12 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
     // Regex to match: Element, optional oxidation state and/or count in either order
     // Pattern: ([A-Z][a-z]?)  - element symbol
     //          Followed by one of:
-    //          - oxidation then optional count: (?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])(\d*)
-    //          - count then optional oxidation: (\d+)(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?
+    //          - oxidation then optional count: (?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])(count?)
+    //          - count then optional oxidation: count(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?
     //          - just oxidation: (?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])
-    //          - just count: (\d+)
+    //          - just count: count
     //          - neither
-    const regex = /([A-Z][a-z]?)(?:(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])(\d*)|(\d+)(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?)?/g;
+    const regex = /([A-Z][a-z]?)(?:(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])((?:\d+(?:\.\d+)?|\.\d+)?)|((?:\d+(?:\.\d+)?|\.\d+))(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?)?/g;
     let match;
     let orig_idx = 0;
     while ((match = regex.exec(cleaned_formula)) !== null) {
@@ -208,7 +228,7 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
         // Count can be in group 4 (after oxidation) or 5 (before oxidation)
         const oxidation_str = match[2] || match[3] || match[6] || match[7];
         const count_str = match[4] || match[5];
-        const count = count_str ? parseInt(count_str, 10) : 1;
+        const count = parse_count(count_str);
         if (!is_valid_element(element))
             throw new Error(`Invalid element symbol: ${element}`);
         const oxidation_state = oxidation_str ? parse_oxidation_state(oxidation_str) : undefined;
@@ -226,7 +246,6 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
             }
             else if (strict && existing.oxidation_state !== oxidation_state) {
                 // In strict mode, throw on conflicting oxidation states
-                const format_state = (state) => (state > 0 ? `+` : ``) + state;
                 throw new Error(`Conflicting oxidation states for ${element}: ${format_state(existing.oxidation_state)} and ${format_state(oxidation_state)}`);
             }
         }
@@ -238,12 +257,7 @@ export const parse_formula_with_oxidation = (formula, strict = false) => {
 };
 // Convert OxiComposition to ElementWithOxidation array
 // Does not preserve original order since objects don't have a defined order
-export const oxi_composition_to_elements = (composition) => Object.entries(composition).map(([element, data], idx) => ({
-    element: element,
-    amount: data.amount,
-    oxidation_state: data.oxidation_state,
-    orig_idx: idx,
-}));
+export const oxi_composition_to_elements = (composition) => Object.entries(composition).flatMap(([element, { amount, oxidation_state }], idx) => is_valid_element(element) ? [{ element, amount, oxidation_state, orig_idx: idx }] : []);
 // Extract element symbols from a chemical formula.
 // Default (unique=true, sorted=true): "NbZr2Nb" -> ["Nb", "Zr"]
 // unique=false: Fast token extraction preserving order without parentheses expansion
@@ -254,10 +268,15 @@ export const oxi_composition_to_elements = (composition) => Object.entries(compo
 export function extract_formula_elements(formula, { unique = true, sorted = true } = {}) {
     if (!unique) {
         // Fast path: regex token extraction without parentheses expansion
-        const matches = formula.match(/[A-Z][a-z]?/g) || [];
-        return matches.filter(is_valid_element);
+        const matches = formula.match(/[A-Z][a-z]?/g) ?? [];
+        const elements = [];
+        for (const match of matches) {
+            if (is_valid_element(match))
+                elements.push(match);
+        }
+        return elements;
     }
-    const symbols = Object.keys(parse_formula(formula));
+    const symbols = Object.keys(parse_formula(formula)).filter(is_valid_element);
     return sorted ? symbols.sort() : symbols;
 }
 // Generate all non-empty subsets of a chemical system as hyphenated strings.
@@ -277,12 +296,12 @@ export function generate_chem_sys_subspaces(input) {
         elements = uniq;
     }
     else {
-        const keys = Object.keys(input);
-        for (const elem of keys) {
+        elements = [];
+        for (const elem of Object.keys(input)) {
             if (!is_valid_element(elem))
                 throw new Error(`Invalid element symbol: ${elem}`);
+            elements.push(elem);
         }
-        elements = keys;
     }
     const sorted = [...elements].sort();
     const subspaces = [];
@@ -297,18 +316,14 @@ export function generate_chem_sys_subspaces(input) {
     }
     return subspaces;
 }
-// Normalize CSV of element symbols to valid symbols in periodic order.
-// Filters invalid symbols, removes duplicates, trims whitespace.
-// Example: "Zr, Nb, InvalidElement, H" -> ["H", "Nb", "Zr"]
-// Note: Matching is case-sensitive. Use all_symbols to filter against a subset.
-export const normalize_element_symbols = (csv, all_symbols) => {
+export function normalize_element_symbols(csv, all_symbols) {
     const input_set = new Set(csv
         .split(`,`)
         .map((sym) => sym.trim())
         .filter(Boolean));
-    // Cast needed: ELEM_SYMBOLS is readonly const tuple, T is generic string subtype
-    return (all_symbols ?? ELEM_SYMBOLS).filter((sym) => input_set.has(sym));
-};
+    const symbols = all_symbols ?? ELEM_SYMBOLS;
+    return symbols.filter((sym) => input_set.has(sym));
+}
 // Check if input contains wildcard elements (*).
 // Works for both chemsys format (Li-Fe-*-*) and exact formula format (LiFe*2*).
 export const has_wildcards = (input) => input.includes(`*`);
@@ -360,20 +375,20 @@ export function parse_formula_with_wildcards(formula) {
     // Restore wildcards
     cleaned = cleaned.replace(ELEM_WILDCARD.from_placeholder, `*`);
     // Regex to match either:
-    // 1. Standard element symbol with optional count: ([A-Z][a-z]?)(\d*)
-    // 2. Wildcard with optional count: \*(\d*)
-    const regex = /([A-Z][a-z]?)(\d*)|(\*)(\d*)/g;
+    // 1. Standard element symbol with optional decimal count
+    // 2. Wildcard with optional decimal count
+    const regex = /([A-Z][a-z]?)((?:\d+(?:\.\d+)?|\.\d+)?)|(\*)((?:\d+(?:\.\d+)?|\.\d+)?)/g;
     let match;
     while ((match = regex.exec(cleaned)) !== null) {
         if (match[3] === `*`) {
             // Wildcard match
-            const count = match[4] ? parseInt(match[4], 10) : 1;
+            const count = parse_count(match[4]);
             tokens.push({ element: null, count });
         }
         else if (match[1]) {
             // Element symbol match
             const element = match[1];
-            const count = match[2] ? parseInt(match[2], 10) : 1;
+            const count = parse_count(match[2]);
             if (!is_valid_element(element)) {
                 throw new Error(`Invalid element symbol: ${element}`);
             }
@@ -395,7 +410,7 @@ export function matches_chemsys_wildcard(formula, explicit_elements, wildcard_co
         // Must contain all explicit elements
         const formula_set = new Set(formula_elements);
         for (const elem of explicit_elements) {
-            if (!formula_set.has(elem))
+            if (!is_valid_element(elem) || !formula_set.has(elem))
                 return false;
         }
         return true;

package/dist/convex-hull/ConvexHull2D.svelte

@@ -206,39 +206,26 @@
       // Require formation energy per atom to place along y
       const e_form = entry.e_form_per_atom
       if (typeof e_form !== `number`) continue
-      const total = Object.values(entry.composition).reduce((s, v) => s + v, 0)
+      const total = Object.values(entry.composition).reduce((sum, amount) => sum + amount, 0)
       if (total <= 0) continue
       const frac_b = (entry.composition[el2] || 0) / total
       const is_element = is_unary_entry(entry)
-      coords.push({ ...entry, x: frac_b, y: e_form, z: 0, is_element, visible: true })
+      coords.push({ ...entry, x: frac_b, y: e_form, z: 0, is_element })
     }
     // Ensure elemental references at x=0 and x=1 with y=0 to close the hull
-    const el_a: ConvexHullEntry | undefined = coords.find((e) =>
-      e.is_element && e.x === 0
-    )
-    const el_b: ConvexHullEntry | undefined = coords.find((e) =>
-      e.is_element && e.x === 1
-    )
-    if (!el_a) {
+    for (const [element, x_coord] of [
+      [el1, 0],
+      [el2, 1],
+    ] as const) {
+      if (coords.some((entry) => entry.is_element && entry.x === x_coord)) continue
       coords.push({
-        composition: { [el1]: 1 } as CompositionType,
+        composition: { [element]: 1 } as CompositionType,
         energy: 0,
-        x: 0,
+        entry_id: `synthetic-element:${element}`,
+        x: x_coord,
         y: 0,
         z: 0,
         is_element: true,
-        visible: true,
-      })
-    }
-    if (!el_b) {
-      coords.push({
-        composition: { [el2]: 1 } as CompositionType,
-        energy: 0,
-        x: 1,
-        y: 0,
-        z: 0,
-        is_element: true,
-        visible: true,
       })
     }
     return coords
@@ -280,9 +267,7 @@
     const enriched_entries = coords_entries.map((entry) => {
       const y_hull = thermo.interpolate_hull_2d(computed_hull_points, entry.x)
       const raw_dist = y_hull == null ? 0 : entry.y - y_hull
-      return {
-        ...entry, ...compute_hull_stability(raw_dist, entry.exclude_from_hull), visible: true,
-      }
+      return { ...entry, ...compute_hull_stability(raw_dist, entry.exclude_from_hull) }
     })
     return { all_enriched_entries: enriched_entries, hull_points: computed_hull_points }
   })
@@ -297,25 +282,23 @@
     DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
   ))
 
-  // Initialize threshold to auto value on first load
-  let initialized = $state(false)
+  const next_auto_threshold = helpers.auto_threshold_reset(
+    DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
+  )
   $effect(() => {
-    if (!initialized && all_enriched_entries.length > 0) {
-      initialized = true
-      max_hull_dist_show_phases = auto_default_threshold
-    }
+    max_hull_dist_show_phases = next_auto_threshold(
+      entries,
+      max_hull_dist_show_phases,
+      auto_default_threshold,
+    ) ?? max_hull_dist_show_phases
   })
 
-  // Filter by threshold and compute visibility
+  // Filter by threshold; visibility is a view predicate, not entry state.
   const plot_entries = $derived(
-    all_enriched_entries
-      .filter((e) =>
-        e.is_stable || (e.e_above_hull ?? 0) <= max_hull_dist_show_phases
-      )
-      .map((e) => ({
-        ...e,
-        visible: (e.is_stable && show_stable) || (!e.is_stable && show_unstable),
-      })),
+    all_enriched_entries.filter((entry) =>
+      helpers.entry_is_stable(entry) ||
+      (entry.e_above_hull ?? 0) <= max_hull_dist_show_phases
+    ),
   )
 
   // Update bindable entries arrays when plot_entries change (single pass)
@@ -323,7 +306,7 @@
     const stable: ConvexHullEntry[] = []
     const unstable: ConvexHullEntry[] = []
     for (const entry of plot_entries) {
-      if (entry.is_stable) stable.push(entry)
+      if (helpers.entry_is_stable(entry)) stable.push(entry)
       else unstable.push(entry)
     }
     stable_entries = stable
@@ -371,7 +354,11 @@
   }
 
   // Pre-compute visible entries to avoid redundant filtering
-  const visible_entries = $derived(plot_entries.filter((e) => e.visible))
+  const visible_entries = $derived(helpers.visible_entries(
+    plot_entries,
+    show_stable,
+    show_unstable,
+  ))
 
   const scatter_points_series = $derived.by(() => {
     const is_energy_mode = color_mode === `energy`
@@ -389,7 +376,7 @@
       y_vals[idx] = entry.y
       if (is_energy_mode) color_values[idx] = entry.e_above_hull ?? 0
 
-      const is_stable = entry.is_stable || entry.e_above_hull === 0
+      const is_stable = helpers.entry_is_stable(entry)
       const base_radius = entry.size || (is_stable ? 6 : 4)
       const hl = is_highlighted(entry) ? merged_highlight_style : null
 
@@ -444,10 +431,8 @@
 
   const scatter_series = $derived([scatter_points_series, ...hull_segments_series])
 
-  // Map selected_entry to ScatterPlot point index (series_idx: 0 = points series)
-  // Use object identity comparison (e === entry) instead of entry_id comparison
-  // because synthetic elemental entries lack entry_id, and undefined === undefined
-  // would incorrectly match the first entry with undefined entry_id
+  // Map selected_entry to ScatterPlot point index (series_idx: 0 = points series).
+  // current_entry() keeps selections pointing at the current plot entry object.
   const selected_scatter_point = $derived.by(() => {
     const entry = selected_entry
     if (!entry) return null
@@ -505,9 +490,33 @@
 
   // Custom hover tooltip state used with ScatterPlot events
   let hover_data = $state<HoverData3D<ConvexHullEntry> | null>(null)
+  $effect(() => {
+    const current_selection = helpers.current_entry(selected_entry, plot_entries)
+    if (selected_entry && !current_selection) selected_entry = null
+    else if (current_selection && current_selection !== selected_entry) {
+      selected_entry = current_selection
+    }
+    const current_hover = helpers.current_entry(hover_data?.entry, plot_entries)
+    if (hover_data?.entry && !current_hover) {
+      hover_data = null
+      on_point_hover?.(null)
+    } else if (hover_data && current_hover && current_hover !== hover_data.entry) {
+      hover_data = { ...hover_data, entry: current_hover }
+    }
+    const current_popup = helpers.current_entry(structure_popup.entry, plot_entries)
+    if (structure_popup.open) {
+      const structure = current_popup && extract_structure_from_entry(current_popup)
+      if (!structure) structure_popup = { open: false, structure: null, entry: null, place_right: true }
+      else if (
+        current_popup !== structure_popup.entry ||
+        structure !== structure_popup.structure
+      ) structure_popup = { ...structure_popup, entry: current_popup, structure }
+    }
+  })
 
   const handle_keydown = (event: KeyboardEvent) => {
-    if ((event.target as HTMLElement).tagName.match(/INPUT|TEXTAREA/)) return
+    const target = event.target
+    if (target instanceof HTMLElement && target.tagName.match(/INPUT|TEXTAREA/)) return
     const actions: Record<string, () => void> = {
       b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
       s: () => show_stable = !show_stable,
@@ -637,6 +646,8 @@
         {phase_stats}
         {stable_entries}
         {unstable_entries}
+        {show_stable}
+        {show_unstable}
         {max_hull_dist_show_phases}
         {max_hull_dist_show_labels}
         {label_threshold}
@@ -695,11 +706,11 @@
     tabindex={-1}
     onkeydown={handle_keydown}
     ondrop={handle_file_drop}
-    ondragover={(event) => {
+    ondragover={(event: DragEvent) => {
       event.preventDefault()
       drag_over = true
     }}
-    ondragleave={(event) => {
+    ondragleave={(event: DragEvent) => {
       event.preventDefault()
       drag_over = false
     }}