matterviz 0.4.2 → 0.4.3

package/dist/composition/parse.js

@@ -50,9 +50,7 @@ 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_elem_symbol(symbol))
-            throw new Error(`Invalid element symbol: ${symbol}`);
-        const atomic_num = SYMBOL_TO_ATOMIC_NUMBER[symbol];
+        const atomic_num = is_elem_symbol(symbol) ? SYMBOL_TO_ATOMIC_NUMBER[symbol] : undefined;
         if (!atomic_num)
             throw new Error(`Invalid element symbol: ${symbol}`);
         if (amount > 0) {
@@ -138,9 +136,7 @@ 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_elem_symbol(element))
-                throw new Error(`Unknown element: ${element}`);
-            const atomic_mass = ATOMIC_WEIGHTS.get(element);
+            const atomic_mass = is_elem_symbol(element) ? ATOMIC_WEIGHTS.get(element) : undefined;
             if (!atomic_mass)
                 throw new Error(`Unknown element: ${element}`);
             return [element, amount * atomic_mass];
@@ -222,46 +218,30 @@ const parse_oxidation_state = (oxidation_str) => {
 export const parse_formula_with_oxidation = (formula, strict = false) => {
     const elements = [];
     const cleaned_formula = expand_parentheses(formula.replaceAll(/\s/g, ``));
-    // 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+[+-]?|[+-])\])(count?)
-    //          - count then optional oxidation: count(?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])?
-    //          - just oxidation: (?:\^([+-]?\d+[+-]?|[+-])|\[([+-]?\d+[+-]?|[+-])\])
-    //          - just count: count
-    //          - neither
+    // Element symbol followed by optional oxidation state (^2+ or [2+] syntax) and
+    // optional count, in either order: Fe^2+O3, Fe[2+]O3, Fe3^2+, Fe2
     const regex = /(?<element>[A-Z][a-z]?)(?:(?:\^(?<oxi_caret>[+-]?\d+[+-]?|[+-])|\[(?<oxi_bracket>[+-]?\d+[+-]?|[+-])\])(?<count_after>(?:\d+(?:\.\d+)?|\.\d+)?)|(?<count_before>(?:\d+(?:\.\d+)?|\.\d+))(?:\^(?<oxi_caret_2>[+-]?\d+[+-]?|[+-])|\[(?<oxi_bracket_2>[+-]?\d+[+-]?|[+-])\])?)?/g;
-    let match;
-    let orig_idx = 0;
-    while ((match = regex.exec(cleaned_formula)) !== null) {
-        const element = match[1];
-        // Oxidation can be in groups 2/3 (oxidation first) or 6/7 (count first)
-        // 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 = parse_count(count_str);
+    for (const match of cleaned_formula.matchAll(regex)) {
+        const groups = match.groups ?? {};
+        const element = groups.element;
+        const oxidation_str = groups.oxi_caret || groups.oxi_bracket || groups.oxi_caret_2 || groups.oxi_bracket_2;
+        const count = parse_count(groups.count_after || groups.count_before);
         if (!is_elem_symbol(element))
             throw new Error(`Invalid element symbol: ${element}`);
         const oxidation_state = oxidation_str ? parse_oxidation_state(oxidation_str) : undefined;
-        // Find or add element entry
         const existing = elements.find((el) => el.element === element);
-        if (existing) {
-            existing.amount += count;
-            // Handle oxidation state conflicts
-            if (oxidation_state === undefined) {
-                // No oxidation state in current match, nothing to do
-            }
-            else if (existing.oxidation_state === undefined) {
-                // Set oxidation state on first occurrence
-                existing.oxidation_state = oxidation_state;
-            }
-            else if (strict && existing.oxidation_state !== oxidation_state) {
-                // In strict mode, throw on conflicting oxidation states
-                throw new Error(`Conflicting oxidation states for ${element}: ${format_state(existing.oxidation_state)} and ${format_state(oxidation_state)}`);
-            }
+        if (!existing) {
+            elements.push({ element, amount: count, oxidation_state, orig_idx: elements.length });
+            continue;
         }
-        else {
-            elements.push({ element, amount: count, oxidation_state, orig_idx: orig_idx++ });
+        existing.amount += count;
+        if (oxidation_state === undefined)
+            continue;
+        if (existing.oxidation_state === undefined) {
+            existing.oxidation_state = oxidation_state; // Set on first occurrence
+        }
+        else if (strict && existing.oxidation_state !== oxidation_state) {
+            throw new Error(`Conflicting oxidation states for ${element}: ${format_state(existing.oxidation_state)} and ${format_state(oxidation_state)}`);
         }
     }
     return elements;
@@ -298,20 +278,12 @@ export function generate_chem_sys_subspaces(input) {
     let elements;
     if (typeof input === `string`)
         elements = extract_formula_elements(input);
-    else if (Array.isArray(input)) {
-        const uniq = [...new Set(input)];
-        for (const elem of uniq) {
-            if (!is_elem_symbol(elem))
-                throw new Error(`Invalid element symbol: ${elem}`);
-        }
-        elements = uniq;
-    }
     else {
-        elements = [];
-        for (const elem of Object.keys(input)) {
+        const symbols = Array.isArray(input) ? input : Object.keys(input);
+        elements = [...new Set(symbols)];
+        for (const elem of elements) {
             if (!is_elem_symbol(elem))
                 throw new Error(`Invalid element symbol: ${elem}`);
-            elements.push(elem);
         }
     }
     const sorted = [...elements].sort();
@@ -343,7 +315,7 @@ export const has_wildcards = (input) => input.includes(`*`);
 // Throws if any non-wildcard token is not a valid element symbol.
 export function parse_chemsys_with_wildcards(input) {
     const tokens = input
-        .replaceAll('-', `,`)
+        .replaceAll(`-`, `,`)
         .split(`,`)
         .map((tok) => tok.trim())
         .filter(Boolean);
@@ -378,32 +350,21 @@ export const ELEM_WILDCARD = {
 //   "**O4" -> *(1), *(1), O(4) - matches ternary oxides with 1:1:4 ratio
 export function parse_formula_with_wildcards(formula) {
     const tokens = [];
-    // Expand parentheses, treating * as a pseudo-element (temporarily replace to protect it)
+    // Swap * for a placeholder so parentheses expansion treats it as a pseudo-element
     let cleaned = formula.replaceAll(/\s/g, ``);
-    // Protect wildcards from parentheses expansion by replacing * with placeholder
     cleaned = cleaned.replace(ELEM_WILDCARD.to_placeholder, ELEM_WILDCARD.placeholder);
     cleaned = expand_parentheses(cleaned);
-    // Restore wildcards
     cleaned = cleaned.replace(ELEM_WILDCARD.from_placeholder, `*`);
-    // Regex to match either:
-    // 1. Standard element symbol with optional decimal count
-    // 2. Wildcard with optional decimal count
+    // Match element symbol or wildcard, each with optional decimal count
     const regex = /(?<element>[A-Z][a-z]?)(?<count>(?:\d+(?:\.\d+)?|\.\d+)?)|(?<wildcard>\*)(?<wildcard_count>(?:\d+(?:\.\d+)?|\.\d+)?)/g;
-    let match;
-    while ((match = regex.exec(cleaned)) !== null) {
-        if (match[3] === `*`) {
-            // Wildcard match
-            const count = parse_count(match[4]);
-            tokens.push({ element: null, count });
-        }
-        else if (match[1]) {
-            // Element symbol match
-            const element = match[1];
-            const count = parse_count(match[2]);
-            if (!is_elem_symbol(element)) {
+    for (const match of cleaned.matchAll(regex)) {
+        const { element, count, wildcard, wildcard_count } = match.groups ?? {};
+        if (wildcard)
+            tokens.push({ element: null, count: parse_count(wildcard_count) });
+        else if (element) {
+            if (!is_elem_symbol(element))
                 throw new Error(`Invalid element symbol: ${element}`);
-            }
-            tokens.push({ element, count });
+            tokens.push({ element, count: parse_count(count) });
         }
     }
     return tokens;
@@ -436,48 +397,32 @@ export function matches_chemsys_wildcard(formula, explicit_elements, wildcard_co
 export function matches_formula_wildcard(formula, pattern) {
     try {
         const composition = parse_formula(formula);
-        // Separate explicit elements and wildcards from pattern
-        const explicit_requirements = [];
+        // Split pattern into merged explicit element counts (e.g. "LiLi" -> Li: 2)
+        // and wildcard counts
+        const explicit_counts = new Map();
         const wildcard_counts = [];
         for (const token of pattern) {
-            if (token.element === null) {
+            if (token.element === null)
                 wildcard_counts.push(token.count);
-            }
             else {
-                // Merge counts for same element (e.g. "LiLi" -> Li with count 2)
-                const existing = explicit_requirements.find((req) => req.element === token.element);
-                if (existing) {
-                    existing.count += token.count;
-                }
-                else {
-                    explicit_requirements.push({ element: token.element, count: token.count });
-                }
+                explicit_counts.set(token.element, (explicit_counts.get(token.element) ?? 0) + token.count);
             }
         }
-        // Check explicit element requirements
-        const used_elements = new Set();
-        for (const req of explicit_requirements) {
-            if (composition[req.element] !== req.count)
+        for (const [element, count] of explicit_counts) {
+            if (composition[element] !== count)
                 return false;
-            used_elements.add(req.element);
         }
-        // Get remaining elements (candidates for wildcards)
-        const remaining_elements = Object.entries(composition)
-            .filter(([elem]) => !used_elements.has(elem))
-            .map(([elem, count]) => ({ elem, count }));
-        // Must have exactly as many remaining elements as wildcards
-        if (remaining_elements.length !== wildcard_counts.length)
+        // Remaining elements are wildcard candidates. Each wildcard needs a distinct
+        // element with exactly its count, so sorting both count lists reduces the
+        // matching to a positional comparison
+        const remaining_counts = Object.entries(composition)
+            .filter(([elem]) => !explicit_counts.has(elem))
+            .map(([, count]) => count)
+            .sort((cnt_a, cnt_b) => cnt_a - cnt_b);
+        if (remaining_counts.length !== wildcard_counts.length)
             return false;
-        // Try to match remaining elements to wildcards (each wildcard needs a distinct element)
-        // Sort both by count to enable greedy matching
-        const sorted_remaining = [...remaining_elements].sort((a, b) => a.count - b.count);
-        const sorted_wildcards = [...wildcard_counts].sort((a, b) => a - b);
-        // Check if counts match (simple comparison works because we need exact matches)
-        for (let idx = 0; idx < sorted_wildcards.length; idx++) {
-            if (sorted_remaining[idx].count !== sorted_wildcards[idx])
-                return false;
-        }
-        return true;
+        wildcard_counts.sort((cnt_a, cnt_b) => cnt_a - cnt_b);
+        return wildcard_counts.every((count, idx) => remaining_counts[idx] === count);
     }
     catch {
         return false;

package/dist/constants.d.ts

@@ -13,7 +13,6 @@ export declare const STRUCT_KEYWORDS_STRICT: readonly string[];
 export declare const TRAJ_KEYWORDS_REGEX: RegExp;
 export declare const STRUCT_KEYWORDS_REGEX: RegExp;
 export declare const STRUCT_KEYWORDS_STRICT_REGEX: RegExp;
-export declare const TRAJ_KEYWORDS_SIMPLE_REGEX: RegExp;
 export declare const TRAJ_EXTENSIONS: readonly string[];
 export declare const TRAJ_EXTENSIONS_REGEX: RegExp;
 export declare const STRUCTURE_EXTENSIONS: readonly string[];

package/dist/constants.js

@@ -14,11 +14,13 @@ export const COMPRESSION_EXTENSIONS = Object.freeze(Object.values(COMPRESSION_FO
 export const TRAJ_KEYWORDS = Object.freeze([
     `trajectory`,
     `traj`,
+    `relaxation`,
     `relax`,
     `npt`,
     `nvt`,
     `nve`,
     `qha`,
+    `dpmd`, // DeePMD trajectory outputs (before `md` so the longer token wins)
     `md`,
     `dynamics`,
     `simulation`,
@@ -41,26 +43,13 @@ export const STRUCT_KEYWORDS = Object.freeze([
     `phonopy`,
 ]);
 // More restrictive keywords for JSON/YAML files (excludes generic terms like "data")
-export const STRUCT_KEYWORDS_STRICT = Object.freeze([
-    `structure`,
-    `phono`,
-    `vasp`,
-    `crystal`,
-    `material`,
-    `lattice`,
-    `geometry`,
-    `unit_cell`,
-    `unitcell`,
-    `atoms`,
-    `sites`,
-    `phono3py`,
-    `phonopy`,
-]);
-// Regex patterns for keyword matching
+export const STRUCT_KEYWORDS_STRICT = Object.freeze(STRUCT_KEYWORDS.filter((keyword) => keyword !== `data`));
+// Regex patterns for keyword matching. Keywords must be delimited on both sides
+// (`md_300K`, `si_md.log`) so bare prefixes like `md/notes.log` or `mdp_run` do not
+// match. `relaxation` is listed explicitly (not only via the `relax` prefix).
 export const TRAJ_KEYWORDS_REGEX = new RegExp(`(^|[-_.])(${TRAJ_KEYWORDS.join(`|`)})([-_.]|$)`, `i`);
 export const STRUCT_KEYWORDS_REGEX = new RegExp(`(${STRUCT_KEYWORDS.join(`|`)})`, `i`);
 export const STRUCT_KEYWORDS_STRICT_REGEX = new RegExp(`(${STRUCT_KEYWORDS_STRICT.join(`|`)})`, `i`);
-export const TRAJ_KEYWORDS_SIMPLE_REGEX = new RegExp(`(${TRAJ_KEYWORDS.join(`|`)})`, `i`);
 // Build a case-insensitive `\.(ext1|ext2|...)$` regex from extensions (leading dots stripped)
 const ext_regex = (exts) => new RegExp(`\\.(${exts.map((ext) => ext.slice(1)).join(`|`)})$`, `i`);
 // File extensions for different file types

package/dist/convex-hull/ConvexHull2D.svelte

@@ -95,10 +95,8 @@
   const controls_config = $derived(normalize_show_controls(show_controls))
   const merged_config = $derived({
     ...default_hull_config,
-    point_size: 6, // Binary diagrams use slightly smaller points
     ...config,
     colors: { ...default_hull_config.colors, ...config.colors },
-    margin: { t: 40, r: 40, b: 60, l: 60, ...config.margin },
   })
 
   // Narrow deriveds to primitive fields so heavy downstream deriveds (scatter series,

package/dist/convex-hull/ConvexHull3D.svelte

@@ -16,7 +16,7 @@
   import { sanitize_html } from '../sanitize'
   import { Spinner } from '../feedback'
   import { format_num } from '../labels'
-  import { to_radians, type Point3D, type Vec2, type Vec3 } from '../math'
+  import { to_radians, type Vec2, type Vec3 } from '../math'
   import { ColorBar } from '../plot'
   import {
     centered_rect,
@@ -123,7 +123,6 @@
     ...default_hull_config,
     ...config,
     colors: { ...default_hull_config.colors, ...config.colors },
-    margin: { t: 40, r: 40, b: 60, l: 60, ...config.margin },
   })
 
   // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
@@ -187,7 +186,7 @@
   })
 
   // Cached hull model for e_above_hull queries; recompute only when faces change
-  let hull_model = $derived.by(() => thermo.build_lower_hull_model(hull_faces))
+  const hull_model = $derived(thermo.build_lower_hull_model(hull_faces))
 
   // Enrich coords with e_above_hull from cached hull model (before filtering)
   const all_enriched_entries = $derived.by(() => {
@@ -432,7 +431,7 @@
     )
 
   // Cache energy color scale per frame/setting
-  const energy_color_scale = $derived.by(() =>
+  const energy_color_scale = $derived(
     helpers.get_energy_color_scale(color_mode, color_scale, plot_entries),
   )
 
@@ -472,65 +471,38 @@
     }
   }
 
+  // Dashed triangle outline: base triangle at E_form = 0, bottom triangle at the most
+  // negative formation energy, and vertical edges connecting corresponding corners
   function draw_structure_outline(): void {
     if (!ctx || !canvas) return
 
-    // Set consistent style for all triangle structure lines
     ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color
     ctx.lineWidth = CONVEX_HULL_STYLE.structure_line.line_width
-    ctx.setLineDash(CONVEX_HULL_STYLE.structure_line.dash) // Dashed lines for all structure lines
+    ctx.setLineDash(CONVEX_HULL_STYLE.structure_line.dash)
 
-    // Draw triangle base and vertical edges
-    draw_triangle_structure()
-  }
-
-  function draw_triangle_structure(): void {
-    if (!ctx || !canvas) return
-
-    // Get formation energy range for vertical edges
-    const e_form_min = energy_range.min // Includes 0 for elemental references
-    const e_form_max = energy_range.max // Includes 0 for elemental references
-
-    // Draw base triangle edges (top triangle at formation energy = 0)
+    const { min: e_form_min } = energy_range
     const triangle_edges = get_triangle_edges()
     ctx.beginPath()
-    for (const [v1, v2] of triangle_edges) {
-      const proj1 = project_3d_point(v1.x, v1.y, 0) // Base triangle at formation energy = 0
-      const proj2 = project_3d_point(v2.x, v2.y, 0)
-
-      ctx.moveTo(proj1.x, proj1.y)
-      ctx.lineTo(proj2.x, proj2.y)
+    for (const z_plane of [0, e_form_min]) {
+      for (const [v1, v2] of triangle_edges) {
+        const proj1 = project_3d_point(v1.x, v1.y, z_plane)
+        const proj2 = project_3d_point(v2.x, v2.y, z_plane)
+        ctx.moveTo(proj1.x, proj1.y)
+        ctx.lineTo(proj2.x, proj2.y)
+      }
     }
-    ctx.stroke()
-
-    // Draw vertical edges from corners (from most negative to 0 formation energy)
-    const vertical_edges = get_triangle_vertical_edges(e_form_min, e_form_max)
-    ctx.beginPath()
-    for (const [v1, v2] of vertical_edges) {
+    for (const [v1, v2] of get_triangle_vertical_edges(e_form_min, 0)) {
       const proj1 = project_3d_point(v1.x, v1.y, v1.z)
       const proj2 = project_3d_point(v2.x, v2.y, v2.z)
-
-      ctx.moveTo(proj1.x, proj1.y)
-      ctx.lineTo(proj2.x, proj2.y)
-    }
-    ctx.stroke()
-
-    // Draw bottom triangle (connecting the bottom tips of vertical lines)
-    const bottom_triangle_edges = get_triangle_edges()
-    ctx.beginPath()
-    for (const [v1, v2] of bottom_triangle_edges) {
-      const proj1 = project_3d_point(v1.x, v1.y, e_form_min) // Bottom triangle at most negative energy
-      const proj2 = project_3d_point(v2.x, v2.y, e_form_min)
-
       ctx.moveTo(proj1.x, proj1.y)
       ctx.lineTo(proj2.x, proj2.y)
     }
     ctx.stroke()
 
-    // Reset stroke style to default for other elements
-    const styles = getComputedStyle(canvas)
-    ctx.strokeStyle = styles.getPropertyValue(`--hull-edge-color`) || `#212121`
-    ctx.setLineDash([]) // Reset line dash for other drawing operations
+    // Reset stroke style and line dash for subsequent drawing operations
+    ctx.strokeStyle =
+      getComputedStyle(canvas).getPropertyValue(`--hull-edge-color`) || `#212121`
+    ctx.setLineDash([])
   }
 
   function draw_element_labels(): void {

package/dist/convex-hull/ConvexHull4D.svelte

@@ -96,13 +96,24 @@
     ...default_hull_config,
     ...config,
     colors: { ...default_hull_config.colors, ...config.colors },
-    margin: { t: 60, r: 60, b: 60, l: 60, ...config.margin },
   })
 
-  // Reactive dark mode detection for canvas text color
-  let dark_mode = $state(is_dark_mode())
-  $effect(() => watch_dark_mode((dark) => (dark_mode = dark)))
-  const text_color = $derived(helpers.get_canvas_text_color(dark_mode))
+  // Cache resolved canvas colors and refresh them only when the theme changes.
+  const initial_text_color = helpers.get_canvas_text_color(is_dark_mode())
+  let text_color = $state(initial_text_color)
+  let hull_edge_color = $state(initial_text_color)
+  function refresh_canvas_colors(dark_mode: boolean): void {
+    const next_text_color = helpers.get_canvas_text_color(dark_mode)
+    text_color = next_text_color
+    const resolved_edge_color = canvas
+      ? getComputedStyle(canvas).getPropertyValue(`--hull-edge-color`).trim()
+      : ``
+    hull_edge_color = resolved_edge_color || next_text_color
+  }
+  $effect(() => {
+    refresh_canvas_colors(is_dark_mode())
+    return watch_dark_mode(refresh_canvas_colors)
+  })
 
   // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
   // Explicit generic breaks the circular type inference through the all_enriched_entries thunk
@@ -132,31 +143,33 @@
   const elements = $derived(hull_data.elements)
   const plot_entries = $derived(hull_data.plot_entries)
 
+  // Entry → 4D hull point (3 barycentric composition fractions + e_form as w),
+  // or null when the entry lacks a finite formation energy or valid composition
+  function to_point_4d(entry: ConvexHullEntry): Point4D | null {
+    if (
+      !Number.isFinite(entry.e_form_per_atom) ||
+      ![entry.x, entry.y, entry.z].every(Number.isFinite)
+    )
+      return null
+    const amounts = elements.map((el) => entry.composition[el] || 0)
+    const total = amounts.reduce((sum, amt) => sum + amt, 0)
+    if (!(total > 0)) return null
+    const [x, y, z] = amounts.map((amt) => amt / total)
+    return [x, y, z].every(Number.isFinite)
+      ? { x, y, z, w: entry.e_form_per_atom ?? NaN }
+      : null
+  }
+
   // Compute 4D hull for visualization (always compute when we have formation energies)
   const hull_4d = $derived.by(() => {
     if (elements.length !== 4) return []
 
     try {
-      // Get coords with formation energies, excluding entries that don't participate in hull
-      const coords = compute_4d_coords(pd_data.entries, elements).filter(
-        (ent) => !ent.exclude_from_hull,
-      )
-
-      // Convert to 4D points for hull computation using barycentric coordinates (composition fractions)
-      const points_4d: Point4D[] = coords
-        .filter(
-          (ent) =>
-            Number.isFinite(ent.e_form_per_atom) &&
-            [ent.x, ent.y, ent.z].every(Number.isFinite),
-        )
-        .map((ent) => {
-          const amounts = elements.map((el) => ent.composition[el] || 0)
-          const total = amounts.reduce((sum, amt) => sum + amt, 0)
-          if (!(total > 0)) return { x: NaN, y: NaN, z: NaN, w: NaN }
-          const [x, y, z] = amounts.map((amt) => amt / total)
-          return { x, y, z, w: ent.e_form_per_atom ?? NaN }
-        })
-        .filter((point) => [point.x, point.y, point.z, point.w].every(Number.isFinite))
+      // Excluded entries don't participate in hull construction
+      const points_4d = compute_4d_coords(pd_data.entries, elements)
+        .filter((ent) => !ent.exclude_from_hull)
+        .map(to_point_4d)
+        .filter((point): point is Point4D => point !== null)
 
       if (points_4d.length < 5) return [] // Need at least 5 points for 4D hull
 
@@ -177,18 +190,8 @@
 
       // Build 4D points, tracking original indices for mapping hull distances back
       const valid = coords.flatMap((entry, idx) => {
-        if (
-          !Number.isFinite(entry.e_form_per_atom) ||
-          ![entry.x, entry.y, entry.z].every(Number.isFinite)
-        )
-          return []
-        const amounts = elements.map((el) => entry.composition[el] || 0)
-        const total = amounts.reduce((sum, amt) => sum + amt, 0)
-        if (!(total > 0)) return []
-        const [x, y, z] = amounts.map((amt) => amt / total)
-        return [x, y, z].every(Number.isFinite)
-          ? [{ idx, pt: { x, y, z, w: entry.e_form_per_atom ?? NaN } }]
-          : []
+        const pt = to_point_4d(entry)
+        return pt ? [{ idx, pt }] : []
       })
       const raw_dists = thermo.compute_e_above_hull_4d(
         valid.map((item) => item.pt),
@@ -206,7 +209,7 @@
     }
   })
 
-  let canvas: HTMLCanvasElement | undefined = undefined
+  let canvas = $state<HTMLCanvasElement>()
   let ctx: CanvasRenderingContext2D | null = null
 
   // Camera state - following Materials Project's 3D camera setup
@@ -293,13 +296,11 @@
   // Re-render when important state changes
   $effect(() => {
     // oxfmt-ignore
-    void [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_data.visible_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, text_color, elements] // track reactively
+    void [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_data.visible_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, text_color, hull_edge_color, elements] // track reactively
 
     render_once()
   })
 
-  // Visibility toggles are now bindable props
-
   // Smart label defaults: hide labels for large datasets. Applied once per dataset
   // (keyed on the entries prop) so later entry-count changes from temperature/gas
   // filtering don't clobber the user's label toggles.
@@ -354,7 +355,7 @@
     )
 
   // Cache energy color scale per frame/setting
-  const energy_color_scale = $derived.by(() =>
+  const energy_color_scale = $derived(
     helpers.get_energy_color_scale(color_mode, color_scale, plot_entries),
   )
 
@@ -371,16 +372,11 @@
   ): { x: number; y: number; depth: number } {
     if (!canvas) return { x: 0, y: 0, depth: 0 }
 
-    // Center coordinates around tetrahedron/triangle centroid
-    let [centered_x, centered_y, centered_z] = [x, y, z]
-
-    // Tetrahedron centroid: average of vertices (1,0,0), (0.5,√3/2,0), (0.5,√3/6,√6/3), (0,0,0)
-    const centroid_x = (1 + 0.5 + 0.5 + 0) / 4 // = 0.5
-    const centroid_y = (0 + Math.sqrt(3) / 2 + Math.sqrt(3) / 6 + 0) / 4 // = √3/6
-    const centroid_z = (0 + 0 + Math.sqrt(6) / 3 + 0) / 4 // = √6/12
-    centered_x = x - centroid_x
-    centered_y = y - centroid_y
-    centered_z = z - centroid_z
+    // Center coordinates around the tetrahedron centroid: average of vertices
+    // (1,0,0), (0.5,√3/2,0), (0.5,√3/6,√6/3), (0,0,0)
+    const centered_x = x - (1 + 0.5 + 0.5 + 0) / 4 // centroid_x = 0.5
+    const centered_y = y - (0 + Math.sqrt(3) / 2 + Math.sqrt(3) / 6 + 0) / 4 // = √3/6
+    const centered_z = z - (0 + 0 + Math.sqrt(6) / 3 + 0) / 4 // = √6/12
 
     // Apply 3D transformations around the centered coordinates
     const cos_x = Math.cos(camera.rotation_x)
@@ -408,56 +404,33 @@
     }
   }
 
+  // Dashed tetrahedron outline (matching the gray structure lines used in 3D)
+  // plus corner element labels
   function draw_structure_outline(): void {
     if (!ctx || !canvas) return
 
-    const styles = getComputedStyle(canvas)
-    // Match gray dashed structure lines used in 3D
     ctx.strokeStyle = CONVEX_HULL_STYLE.structure_line.color
     ctx.lineWidth = CONVEX_HULL_STYLE.structure_line.line_width
     ctx.setLineDash(CONVEX_HULL_STYLE.structure_line.dash)
 
-    // Draw tetrahedron edges
-    draw_tetrahedron()
-
-    // Reset dash and stroke for subsequent drawings
-    ctx.setLineDash([])
-    ctx.strokeStyle = styles.getPropertyValue(`--hull-edge-color`) || `#212121`
-  }
-
-  function draw_tetrahedron(): void {
-    if (!ctx) return
-
-    // Convert vertices to Point3D objects
     const vertices = TETRAHEDRON_VERTICES.map(([x, y, z]) => ({ x, y, z }))
-
-    // Tetrahedron edges (connecting vertices)
-    const edges = [
-      [0, 1],
-      [0, 2],
-      [0, 3], // From vertex 0
-      [1, 2],
-      [1, 3], // From vertex 1
-      [2, 3], // From vertex 2
-    ]
-
-    // Draw edges
+    // oxfmt-ignore
+    const edges = [[0, 1], [0, 2], [0, 3], [1, 2], [1, 3], [2, 3]]
     ctx.beginPath()
     for (const [start, end] of edges) {
-      const v1 = vertices[start]
-      const v2 = vertices[end]
-
-      const proj1 = project_3d_point(v1.x, v1.y, v1.z)
-      const proj2 = project_3d_point(v2.x, v2.y, v2.z)
-
+      const proj1 = project_3d_point(vertices[start].x, vertices[start].y, vertices[start].z)
+      const proj2 = project_3d_point(vertices[end].x, vertices[end].y, vertices[end].z)
       ctx.moveTo(proj1.x, proj1.y)
       ctx.lineTo(proj2.x, proj2.y)
     }
     ctx.stroke()
 
-    // Corner element labels: place just outside along line towards tetrahedron centroid
+    // Reset dash and stroke for subsequent drawings
+    ctx.setLineDash([])
+    ctx.strokeStyle = hull_edge_color
+
+    // Corner element labels: place just outside each vertex, along the centroid→vertex line
     if (elements.length === 4) {
-      // Tetrahedron centroid in barycentric space maps to average of vertices
       const centroid = {
         x: (vertices[0].x + vertices[1].x + vertices[2].x + vertices[3].x) / 4,
         y: (vertices[0].y + vertices[1].y + vertices[2].y + vertices[3].y) / 4,
@@ -472,16 +445,13 @@
       const distance = 0.06
       for (let idx = 0; idx < 4; idx++) {
         const vx = vertices[idx]
-        // Direction from centroid to vertex
-        const { x: cx, y: cy, z: cz } = centroid
-        const dir = { x: vx.x - cx, y: vx.y - cy, z: vx.z - cz }
+        const dir = { x: vx.x - centroid.x, y: vx.y - centroid.y, z: vx.z - centroid.z }
         const len = Math.hypot(dir.x, dir.y, dir.z) || 1
-        const label_pos = {
-          x: vx.x + (dir.x / len) * distance,
-          y: vx.y + (dir.y / len) * distance,
-          z: vx.z + (dir.z / len) * distance,
-        }
-        const proj = project_3d_point(label_pos.x, label_pos.y, label_pos.z)
+        const proj = project_3d_point(
+          vx.x + (dir.x / len) * distance,
+          vx.y + (dir.y / len) * distance,
+          vx.z + (dir.z / len) * distance,
+        )
         ctx.fillText(elements[idx], proj.x, proj.y)
       }
     }