matterviz 0.1.12 → 0.1.13

package/dist/phase-diagram/PhaseDiagram4D.svelte

@@ -4,74 +4,33 @@ import { elem_symbol_to_name, get_electro_neg_formula } from '../composition';
 import { format_fractional, format_num } from '../labels';
 import { ColorBar } from '../plot';
 import { barycentric_to_tetrahedral, compute_4d_coords, TETRAHEDRON_VERTICES, } from './barycentric-coords';
-import { build_entry_tooltip_text, compute_max_energy_threshold, default_controls, find_pd_entry_at_mouse, get_energy_color_scale, get_point_color_for_entry, parse_pd_entries_from_drop, PD_STYLE, } from './helpers';
+import * as helpers from './helpers';
+import { default_controls, default_pd_config, PD_STYLE } from './index';
 import PhaseDiagramControls from './PhaseDiagramControls.svelte';
 import PhaseDiagramInfoPane from './PhaseDiagramInfoPane.svelte';
 import StructurePopup from './StructurePopup.svelte';
-import { compute_e_above_hull_4d, compute_e_form_per_atom, compute_lower_hull_4d, find_lowest_energy_unary_refs, get_phase_diagram_stats, process_pd_entries, } from './thermodynamics';
-let { entries, controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(false), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(undefined), label_threshold = 50, show_stable = $bindable(true), show_unstable = $bindable(true), show_hull_faces = $bindable(true), hull_face_opacity = $bindable(0.06), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), energy_threshold = $bindable(0.1), // eV/atom above hull for showing entries
+import * as thermo from './thermodynamics';
+let { entries, controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(false), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(undefined), label_threshold = 50, show_stable = $bindable(true), show_unstable = $bindable(true), show_hull_faces = $bindable(true), hull_face_opacity = $bindable(0.06), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), max_hull_dist_show_phases = $bindable(0.1), // eV/atom above hull for showing entries
 on_file_drop, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), ...rest } = $props();
-const merged_controls = $derived({
-    ...default_controls,
-    ...controls,
-});
+const merged_controls = $derived({ ...default_controls, ...controls });
 const merged_config = $derived({
-    width: 600,
-    height: 600,
-    show_labels: true,
-    show_hull: true,
-    point_size: 8,
-    line_width: 2,
-    font_size: 12,
-    colors: {
-        stable: `#0072B2`,
-        unstable: `#E69F00`,
-        hull_line: `var(--accent-color, #1976D2)`,
-        background: `transparent`,
-        text: `var(--text-color, #212121)`,
-        edge: `var(--text-color, #212121)`,
-        tooltip_bg: `var(--tooltip-bg, rgba(0, 0, 0, 0.85))`,
-        tooltip_text: `var(--tooltip-text, white)`,
-        annotation: `var(--text-color, #212121)`,
-    },
+    ...default_pd_config,
     ...config,
-    margin: { top: 60, right: 60, bottom: 60, left: 60, ...(config.margin || {}) },
-});
-// Decide which energy source to use per entry (keep e_form and e_above_hull consistent)
-const has_precomputed_e_form = $derived(entries.length > 0 && entries.every((e) => typeof e.e_form_per_atom === `number`));
-const has_precomputed_hull = $derived(entries.length > 0 && entries.every((e) => typeof e.e_above_hull === `number`));
-// Build unary references once from entries (needed for capability checking)
-const unary_refs = $derived.by(() => find_lowest_energy_unary_refs(entries));
-const can_compute_e_form = $derived.by(() => {
-    const elements_in_entries = Array.from(new Set(entries.flatMap((e) => Object.keys(e.composition))));
-    return elements_in_entries.every((el) => Boolean(unary_refs[el]));
-});
-// Quaternary on-the-fly hull distances ARE now implemented using 4D Quick Hull
-const can_compute_hull = $derived(can_compute_e_form);
-const energy_mode = $derived((has_precomputed_e_form && has_precomputed_hull)
-    ? energy_source_mode
-    : ((can_compute_e_form && can_compute_hull) ? `on-the-fly` : `precomputed`));
-const effective_entries = $derived.by(() => {
-    if (energy_mode === `precomputed`)
-        return entries;
-    // on-the-fly: compute formation energy per atom where possible
-    return entries.map((entry) => {
-        const e_form = compute_e_form_per_atom(entry, unary_refs);
-        if (e_form === null)
-            return entry;
-        return { ...entry, e_form_per_atom: e_form };
-    });
+    colors: { ...default_pd_config.colors, ...(config.colors || {}) },
+    margin: { t: 60, r: 60, b: 60, l: 60, ...(config.margin || {}) },
 });
+let { // Compute energy mode information
+has_precomputed_e_form, has_precomputed_hull, can_compute_e_form, can_compute_hull, energy_mode, unary_refs, } = $derived(helpers.compute_energy_mode_info(entries, thermo.find_lowest_energy_unary_refs, energy_source_mode));
+const effective_entries = $derived(helpers.get_effective_entries(entries, energy_mode, unary_refs, thermo.compute_e_form_per_atom));
 // Process phase diagram data with unified PhaseEntry interface using effective entries
 const processed_entries = $derived(effective_entries);
-const pd_data = $derived(process_pd_entries(processed_entries));
+const pd_data = $derived(thermo.process_pd_entries(processed_entries));
 const elements = $derived.by(() => {
-    const all_elements = pd_data.elements;
-    if (all_elements.length > 4) {
-        console.error(`PhaseDiagram4D: Dataset contains ${all_elements.length} elements, but quaternary diagrams require exactly 4. Found: [${all_elements.join(`, `)}]`);
+    if (pd_data.elements.length > 4) {
+        console.error(`PhaseDiagram4D: Dataset contains ${pd_data.elements.length} elements, but quaternary diagrams require exactly 4. Found: [${pd_data.elements.join(`, `)}]`);
         return [];
     }
-    return all_elements;
+    return pd_data.elements;
 });
 // Compute 4D hull for visualization (always compute when we have formation energies)
 const hull_4d = $derived.by(() => {
@@ -80,23 +39,23 @@ const hull_4d = $derived.by(() => {
     try {
         // Get coords with formation energies
         const coords = compute_4d_coords(pd_data.entries, elements);
-        // Convert to 4D points for hull computation
-        const points_4d = coords.map((entry) => {
-            const amounts = elements.map((el) => entry.composition[el] || 0);
+        // Convert to 4D points for hull computation using barycentric coordinates (composition fractions)
+        const points_4d = 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);
-            const normalized = amounts.map((amt) => amt / total);
-            return {
-                x: normalized[0],
-                y: normalized[1],
-                z: normalized[2],
-                w: entry.e_form_per_atom ?? 0,
-            };
-        });
-        // Filter out points with no formation energy
-        const valid_points = points_4d.filter((p) => typeof p.w === `number`);
+            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 };
+        })
+            .filter((p) => [p.x, p.y, p.z, p.w].every(Number.isFinite));
+        const valid_points = points_4d;
         if (valid_points.length < 5)
             return []; // Need at least 5 points for 4D hull
-        return compute_lower_hull_4d(valid_points);
+        return thermo.compute_lower_hull_4d(valid_points);
     }
     catch (error) {
         console.error(`Error computing 4D hull:`, error);
@@ -104,31 +63,40 @@ const hull_4d = $derived.by(() => {
     }
 });
 const plot_entries = $derived.by(() => {
-    if (elements.length !== 4) {
+    if (elements.length !== 4)
         return [];
-    }
     try {
         const coords = compute_4d_coords(pd_data.entries, elements);
         // Compute or use precomputed hull distances
         const enriched = (() => {
             if (energy_mode === `on-the-fly` && hull_4d.length > 0) {
-                // Build 4D points for distance calculation
-                const points_4d = coords.map((entry) => {
+                // Build 4D points for distance calculation using barycentric coordinates
+                // Track indices to map hull distances back to original coords
+                const valid_entries = [];
+                coords.forEach((ent, idx) => {
+                    if (Number.isFinite(ent.e_form_per_atom) &&
+                        [ent.x, ent.y, ent.z].every(Number.isFinite))
+                        valid_entries.push({ entry: ent, orig_idx: idx });
+                });
+                const points_4d = valid_entries
+                    .map(({ entry }) => {
                     const amounts = elements.map((el) => entry.composition[el] || 0);
                     const total = amounts.reduce((sum, amt) => sum + amt, 0);
-                    const normalized = amounts.map((amt) => amt / total);
+                    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: entry.e_form_per_atom };
+                })
+                    .filter((p) => [p.x, p.y, p.z, p.w].every(Number.isFinite));
+                const e_hulls = thermo.compute_e_above_hull_4d(points_4d, hull_4d);
+                // Map hull distances back to all coords
+                return coords.map((entry, idx) => {
+                    const valid_idx = valid_entries.findIndex((v) => v.orig_idx === idx);
                     return {
-                        x: normalized[0],
-                        y: normalized[1],
-                        z: normalized[2],
-                        w: entry.e_form_per_atom ?? 0,
+                        ...entry,
+                        e_above_hull: valid_idx >= 0 ? e_hulls[valid_idx] : undefined,
                     };
                 });
-                const e_hulls = compute_e_above_hull_4d(points_4d, hull_4d);
-                return coords.map((entry, idx) => ({
-                    ...entry,
-                    e_above_hull: e_hulls[idx],
-                }));
             }
             return coords;
         })();
@@ -141,7 +109,7 @@ const plot_entries = $derived.by(() => {
                     return true;
                 // Include other elemental polymorphs only if toggle is enabled AND e_above_hull is defined
                 return typeof entry.e_above_hull === `number` &&
-                    entry.e_above_hull <= energy_threshold;
+                    entry.e_above_hull <= max_hull_dist_show_phases;
             }
             // Include stable entries (treat near-zero as stable)
             if (entry.is_stable ||
@@ -149,7 +117,7 @@ const plot_entries = $derived.by(() => {
                 return true;
             // Include unstable entries within threshold
             return typeof entry.e_above_hull === `number` &&
-                entry.e_above_hull <= energy_threshold;
+                entry.e_above_hull <= max_hull_dist_show_phases;
         });
         return energy_filtered
             .map((entry) => {
@@ -222,14 +190,14 @@ $effect(() => {
 $effect(() => {
     // deno-fmt-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    [show_stable, show_unstable, show_hull_faces, color_mode, color_scale, energy_threshold, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity];
+    [show_stable, show_unstable, show_hull_faces, color_mode, color_scale, max_hull_dist_show_phases, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity];
     render_once();
 });
 // Visibility toggles are now bindable props
 // Label controls with smart defaults based on entry count
 let show_stable_labels = $state(true);
 let show_unstable_labels = $state(false);
-let label_energy_threshold = $state(0.1); // eV/atom above hull for showing labels
+let max_hull_dist_show_labels = $state(0.1); // eV/atom above hull for showing labels
 // Smart label defaults - hide labels if too many entries
 $effect(() => {
     const total_entries = processed_entries.length;
@@ -248,7 +216,6 @@ function extract_structure_from_entry(entry) {
     const original_entry = entries.find((orig_entry) => orig_entry.entry_id === entry.entry_id);
     return original_entry?.structure || null;
 }
-const get_tooltip_text = (entry) => build_entry_tooltip_text(entry);
 const reset_camera = () => Object.assign(camera, {
     rotation_x: PD_DEFAULTS.quaternary.camera_rotation_x,
     rotation_y: PD_DEFAULTS.quaternary.camera_rotation_y,
@@ -267,8 +234,8 @@ function reset_all() {
     show_unstable = PD_DEFAULTS.quaternary.show_unstable;
     show_stable_labels = PD_DEFAULTS.quaternary.show_stable_labels;
     show_unstable_labels = PD_DEFAULTS.quaternary.show_unstable_labels;
-    energy_threshold = PD_DEFAULTS.quaternary.energy_threshold;
-    label_energy_threshold = PD_DEFAULTS.quaternary.label_energy_threshold;
+    max_hull_dist_show_phases = PD_DEFAULTS.quaternary.max_hull_dist_show_phases;
+    max_hull_dist_show_labels = PD_DEFAULTS.quaternary.max_hull_dist_show_labels;
     show_hull_faces = PD_DEFAULTS.quaternary.show_hull_faces;
     hull_face_color = PD_DEFAULTS.quaternary.hull_face_color;
     hull_face_opacity = PD_DEFAULTS.quaternary.hull_face_opacity;
@@ -288,7 +255,7 @@ const handle_keydown = (event) => {
 };
 async function handle_file_drop(event) {
     drag_over = false;
-    const data = await parse_pd_entries_from_drop(event);
+    const data = await helpers.parse_pd_entries_from_drop(event);
     if (data)
         on_file_drop?.(data);
 }
@@ -298,15 +265,13 @@ async function copy_to_clipboard(text, position) {
     copy_feedback_visible = true;
     setTimeout(() => copy_feedback_visible = false, 1500);
 }
-function get_point_color(entry) {
-    return get_point_color_for_entry(entry, color_mode, merged_config.colors, energy_color_scale);
-}
+const get_point_color = (entry) => helpers.get_point_color_for_entry(entry, color_mode, merged_config.colors, energy_color_scale);
 // Cache energy color scale per frame/setting
-const energy_color_scale = $derived.by(() => get_energy_color_scale(color_mode, color_scale, plot_entries));
-const max_energy_threshold = $derived(compute_max_energy_threshold(processed_entries));
+const energy_color_scale = $derived.by(() => helpers.get_energy_color_scale(color_mode, color_scale, plot_entries));
+const max_hull_dist_in_data = $derived(helpers.calc_max_hull_dist_in_data(processed_entries));
 // Phase diagram statistics - compute internally and expose via bindable prop
 $effect(() => {
-    phase_stats = get_phase_diagram_stats(processed_entries, elements, 4);
+    phase_stats = thermo.get_phase_diagram_stats(processed_entries, elements, 4);
 });
 // Utility: convert hex color to rgba string with alpha
 function hex_to_rgba(hex, alpha) {
@@ -570,7 +535,7 @@ function draw_data_points() {
         // Draw labels based on controls (do not label elemental corners here; they are labeled near vertices)
         const should_show_label = merged_config.show_labels && ((is_stable && show_stable_labels) ||
             (!is_stable && show_unstable_labels &&
-                (entry.e_above_hull ?? 0) <= label_energy_threshold));
+                (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels));
         if (should_show_label) {
             ctx.fillStyle = styles.getPropertyValue(`--pd-text-color`) || `#212121`;
             // For compound entries, use name, formula, or entry_id as fallback
@@ -646,7 +611,7 @@ const handle_hover = (event) => {
         : null;
     on_point_hover?.(hover_data);
 };
-const find_entry_at_mouse = (event) => find_pd_entry_at_mouse(canvas, event, plot_entries, (x, y, z) => {
+const find_entry_at_mouse = (event) => helpers.find_pd_entry_at_mouse(canvas, event, plot_entries, (x, y, z) => {
     const p = project_3d_point(x, y, z);
     return { x: p.x, y: p.y };
 });
@@ -665,25 +630,14 @@ const handle_click = (event) => {
             if (structure) {
                 selected_structure = structure;
                 selected_entry = entry;
-                calculate_modal_side();
+                modal_place_right = helpers.calculate_modal_side(wrapper);
                 modal_open = true;
             }
         }
     }
-    else if (modal_open) {
+    else if (modal_open)
         close_structure_popup();
-    }
 };
-// Decide side based on available viewport room
-function calculate_modal_side() {
-    if (!wrapper)
-        return;
-    const rect = wrapper.getBoundingClientRect();
-    const viewport_width = globalThis.innerWidth;
-    const space_on_right = viewport_width - rect.right;
-    const space_on_left = rect.left;
-    modal_place_right = space_on_right >= space_on_left;
-}
 function close_structure_popup() {
     modal_open = false;
     selected_structure = null;
@@ -692,7 +646,7 @@ function close_structure_popup() {
 const handle_double_click = (event) => {
     const entry = find_entry_at_mouse(event);
     if (entry) {
-        copy_to_clipboard(get_tooltip_text(entry), {
+        copy_to_clipboard(helpers.build_entry_tooltip_text(entry), {
             x: event.clientX,
             y: event.clientY,
         });
@@ -753,20 +707,14 @@ $effect(() => {
 // Fullscreen handling with camera reset on transitions
 let was_fullscreen = $state(fullscreen);
 $effect(() => {
-    if (typeof window === `undefined`)
-        return;
-    if (fullscreen && !document.fullscreenElement && wrapper?.isConnected) {
-        wrapper.requestFullscreen().catch(console.error);
-    }
-    else if (!fullscreen && document.fullscreenElement) {
-        document.exitFullscreen();
-    }
-    // Reset camera only on fullscreen transitions
-    if (fullscreen !== was_fullscreen) {
-        camera.center_x = 0;
-        camera.center_y = 20;
-        was_fullscreen = fullscreen;
-    }
+    helpers.setup_fullscreen_effect(fullscreen, wrapper, (entering_fullscreen) => {
+        // Reset camera only on fullscreen transitions
+        if (entering_fullscreen !== was_fullscreen) {
+            camera.center_x = 0;
+            camera.center_y = 20;
+            was_fullscreen = entering_fullscreen;
+        }
+    });
 });
 let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072B2`};
     --pd-unstable-color:${merged_config.colors?.unstable || `#E69F00`};
@@ -779,7 +727,7 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
     fullscreen = Boolean(document.fullscreenElement)
   }}
   onmousemove={handle_mouse_move}
-  onmouseup={() => [is_dragging, drag_started] = [false, false]}
+  onmouseup={() => is_dragging = false}
 />
 
 <div
@@ -817,13 +765,11 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
 
   <!-- Energy above hull Color Bar -->
   {#if color_mode === `energy` && plot_entries.length > 0}
-    {@const formation_energies = plot_entries
+    {@const hull_distances = plot_entries
       .map((e) => e.e_above_hull)
       .filter((v): v is number => typeof v === `number`)}
-    {@const min_energy = formation_energies.length > 0 ? Math.min(...formation_energies) : 0}
-    {@const max_energy = formation_energies.length > 0
-      ? Math.max(...formation_energies, 0.1)
-      : 0.1}
+    {@const min_energy = hull_distances.length > 0 ? Math.min(...hull_distances) : 0}
+    {@const max_energy = hull_distances.length > 0 ? Math.max(...hull_distances, 0.1) : 0.1}
     <ColorBar
       title="Energy above hull (eV/atom)"
       range={[min_energy, max_energy]}
@@ -852,12 +798,10 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
           {phase_stats}
           {stable_entries}
           {unstable_entries}
-          {energy_threshold}
-          {label_energy_threshold}
+          {max_hull_dist_show_phases}
+          {max_hull_dist_show_labels}
           {label_threshold}
-          toggle_props={{
-            class: `info-btn`,
-          }}
+          toggle_props={{ class: `info-btn` }}
         />
       {/if}
 
@@ -881,17 +825,15 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
         bind:show_unstable
         bind:show_stable_labels
         bind:show_unstable_labels
-        bind:energy_threshold
-        bind:label_energy_threshold
-        {max_energy_threshold}
+        bind:max_hull_dist_show_phases
+        bind:max_hull_dist_show_labels
+        {max_hull_dist_in_data}
         {stable_entries}
         {unstable_entries}
         {total_unstable_count}
         {camera}
         {merged_controls}
-        toggle_props={{
-          class: `legend-controls-btn`,
-        }}
+        toggle_props={{ class: `legend-controls-btn` }}
         {show_hull_faces}
         on_hull_faces_change={(value) => show_hull_faces = value}
         {hull_face_color}

package/dist/phase-diagram/PhaseDiagram4D.svelte.d.ts

@@ -1,31 +1,8 @@
-import type { D3InterpolateName } from '../colors';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { HoverData3D, PDControlsType, PhaseDiagramConfig, PhaseEntry, PhaseStats, PlotEntry3D } from './types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    entries: PhaseEntry[];
-    controls?: Partial<PDControlsType>;
-    config?: Partial<PhaseDiagramConfig>;
-    on_point_click?: (entry: PlotEntry3D) => void;
+import type { BasePhaseDiagramProps, Hull3DProps } from './index';
+import type { HoverData3D, PlotEntry3D } from './types';
+type $$ComponentProps = BasePhaseDiagramProps<PlotEntry3D> & Hull3DProps & {
     on_point_hover?: (data: HoverData3D | null) => void;
-    fullscreen?: boolean;
-    enable_fullscreen?: boolean;
-    enable_info_pane?: boolean;
-    wrapper?: HTMLDivElement;
-    label_threshold?: number;
-    show_stable?: boolean;
-    show_unstable?: boolean;
-    show_hull_faces?: boolean;
-    hull_face_opacity?: number;
-    color_mode?: `stability` | `energy`;
-    color_scale?: D3InterpolateName;
-    info_pane_open?: boolean;
-    legend_pane_open?: boolean;
-    energy_threshold?: number;
-    on_file_drop?: (entries: PhaseEntry[]) => void;
-    enable_structure_preview?: boolean;
-    energy_source_mode?: `precomputed` | `on-the-fly`;
-    phase_stats?: PhaseStats | null;
-}
-declare const PhaseDiagram4D: import("svelte").Component<Props, {}, "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "energy_threshold" | "fullscreen" | "info_pane_open" | "legend_pane_open" | "show_hull_faces" | "hull_face_opacity" | "wrapper" | "energy_source_mode" | "phase_stats">;
+};
+declare const PhaseDiagram4D: import("svelte").Component<$$ComponentProps, {}, "show_hull_faces" | "hull_face_opacity" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "max_hull_dist_show_phases" | "fullscreen" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "phase_stats">;
 type PhaseDiagram4D = ReturnType<typeof PhaseDiagram4D>;
 export default PhaseDiagram4D;

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { DraggablePane, format_num } from '..';
 import { ColorScaleSelect } from '../plot';
 import { tooltip } from 'svelte-multiselect';
-let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateViridis`), show_stable = $bindable(true), show_unstable = $bindable(true), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), show_hull_faces = undefined, on_hull_faces_change, hull_face_color = `#0072B2`, on_hull_face_color_change, hull_face_opacity = $bindable(0.06), on_hull_face_opacity_change, energy_threshold = $bindable(0), label_energy_threshold = $bindable(0.1), max_energy_threshold = 0.5, energy_source_mode = $bindable(`precomputed`), has_precomputed_hull = false, can_compute_hull = false, has_precomputed_e_form = false, can_compute_e_form = false, stable_entries, unstable_entries, total_unstable_count, camera, merged_controls, controls_open = $bindable(false), toggle_props = $bindable({}), pane_props = $bindable({}), ...rest } = $props();
+let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateViridis`), show_stable = $bindable(true), show_unstable = $bindable(true), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), show_hull_faces = undefined, on_hull_faces_change, hull_face_color = `#0072B2`, on_hull_face_color_change, hull_face_opacity = $bindable(0.06), on_hull_face_opacity_change, max_hull_dist_show_phases = $bindable(0), max_hull_dist_show_labels = $bindable(0.1), max_hull_dist_in_data = 0.5, energy_source_mode = $bindable(`precomputed`), has_precomputed_hull = false, can_compute_hull = false, has_precomputed_e_form = false, can_compute_e_form = false, stable_entries, unstable_entries, total_unstable_count, camera, merged_controls, controls_open = $bindable(false), toggle_props = $bindable({}), pane_props = $bindable({}), ...rest } = $props();
 </script>
 
 <DraggablePane
@@ -11,7 +11,7 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
     class: `phase-diagram-controls-pane ${pane_props?.class ?? ``}`,
   }}
   toggle_props={{
-    title: `${controls_open ? `Close` : `Open`} phase diagram controls`,
+    title: controls_open ? `` : `Phase diagram controls`,
     class: `phase-diagram-controls-toggle`,
     ...toggle_props,
   }}
@@ -76,18 +76,18 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
       <input
         type="number"
         min="0"
-        max={max_energy_threshold}
+        max={max_hull_dist_in_data}
         step="0.01"
-        bind:value={energy_threshold}
+        bind:value={max_hull_dist_show_phases}
         class="threshold-input"
       />
       <span style="white-space: nowrap; font-size: 0.85em">eV/atom</span>
       <input
         type="range"
         min="0"
-        max={max_energy_threshold}
+        max={max_hull_dist_in_data}
         step="0.01"
-        bind:value={energy_threshold}
+        bind:value={max_hull_dist_show_phases}
         class="threshold-slider"
       />
     </label>
@@ -180,14 +180,14 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
         <span class="control-label">Label threshold</span>
         <label style="display: flex; align-items: center; gap: 4px; flex: 1">
           <span style="white-space: nowrap; font-size: 0.85em">{
-              label_energy_threshold.toFixed(2)
+              max_hull_dist_show_labels.toFixed(2)
             } eV/atom</span>
           <input
             type="range"
             min="0"
-            max={max_energy_threshold}
+            max={max_hull_dist_in_data}
             step="0.01"
-            bind:value={label_energy_threshold}
+            bind:value={max_hull_dist_show_labels}
             class="threshold-slider"
           />
         </label>

package/dist/phase-diagram/PhaseDiagramControls.svelte.d.ts

@@ -12,7 +12,7 @@ interface CameraState {
     center_x: number;
     center_y: number;
 }
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     color_mode?: `stability` | `energy`;
     color_scale?: D3InterpolateName;
     show_stable?: boolean;
@@ -30,9 +30,9 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
     can_compute_hull?: boolean;
     has_precomputed_e_form?: boolean;
     can_compute_e_form?: boolean;
-    energy_threshold?: number;
-    label_energy_threshold?: number;
-    max_energy_threshold?: number;
+    max_hull_dist_show_phases?: number;
+    max_hull_dist_show_labels?: number;
+    max_hull_dist_in_data?: number;
     stable_entries: PlotEntry3D[];
     unstable_entries: PlotEntry3D[];
     total_unstable_count: number;
@@ -41,7 +41,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
     controls_open?: boolean;
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-}
-declare const PhaseDiagramControls: import("svelte").Component<Props, {}, "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "energy_threshold" | "label_energy_threshold" | "hull_face_opacity" | "controls_open" | "toggle_props" | "pane_props" | "energy_source_mode">;
+};
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "hull_face_opacity" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "controls_open" | "toggle_props" | "pane_props" | "energy_source_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramInfoPane.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">import { DraggablePane } from '..';
 import PhaseDiagramStats from './PhaseDiagramStats.svelte';
-let { phase_stats, stable_entries, unstable_entries, energy_threshold, label_energy_threshold, label_threshold, pane_open = $bindable(false), toggle_props = $bindable({}), pane_props = $bindable({}), ...rest } = $props();
+let { phase_stats, stable_entries, unstable_entries, max_hull_dist_show_phases, max_hull_dist_show_labels, label_threshold, pane_open = $bindable(false), toggle_props = $bindable({}), pane_props = $bindable({}), ...rest } = $props();
 </script>
 
 <DraggablePane
   bind:show={pane_open}
   max_width="24em"
   toggle_props={{
-    title: `${pane_open ? `Close` : `Open`} phase diagram info`,
+    title: pane_open ? `` : `Phase diagram info`,
     class: `phase-diagram-info-toggle`,
     ...toggle_props,
   }}
@@ -42,11 +42,11 @@ let { phase_stats, stable_entries, unstable_entries, energy_threshold, label_ene
     </div>
     <div class="setting-item" data-testid="pd-show-threshold">
       <span>Points threshold:</span>
-      <span>{energy_threshold.toFixed(3)} eV/atom</span>
+      <span>{max_hull_dist_show_phases.toFixed(3)} eV/atom</span>
     </div>
     <div class="setting-item" data-testid="pd-label-threshold">
       <span>Label threshold:</span>
-      <span>{label_energy_threshold.toFixed(3)} eV/atom</span>
+      <span>{max_hull_dist_show_labels.toFixed(3)} eV/atom</span>
     </div>
     <div class="setting-item" data-testid="pd-entry-limit-labels">
       <span>Entry limit for labels:</span>

package/dist/phase-diagram/PhaseDiagramInfoPane.svelte.d.ts

@@ -2,17 +2,17 @@ import { DraggablePane } from '..';
 import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { PhaseStats, PlotEntry3D } from './types';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, `onclose`> {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     phase_stats: PhaseStats | null;
     stable_entries: PlotEntry3D[];
     unstable_entries: PlotEntry3D[];
-    energy_threshold: number;
-    label_energy_threshold: number;
+    max_hull_dist_show_phases: number;
+    max_hull_dist_show_labels: number;
     label_threshold: number;
     pane_open?: boolean;
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-}
-declare const PhaseDiagramInfoPane: import("svelte").Component<Props, {}, "toggle_props" | "pane_props" | "pane_open">;
+};
+declare const PhaseDiagramInfoPane: import("svelte").Component<$$ComponentProps, {}, "toggle_props" | "pane_props" | "pane_open">;
 type PhaseDiagramInfoPane = ReturnType<typeof PhaseDiagramInfoPane>;
 export default PhaseDiagramInfoPane;

package/dist/phase-diagram/PhaseDiagramStats.svelte

@@ -13,7 +13,7 @@ async function copy_to_clipboard(label, value, key) {
     }
 }
 // Prepare histogram data for formation energies and hull distances
-let formation_energy_data = $derived.by(() => {
+let e_form_data = $derived.by(() => {
     const all_entries = [...stable_entries, ...unstable_entries];
     const energies = all_entries
         .map((entry) => entry.e_form_per_atom ?? entry.energy_per_atom)
@@ -185,20 +185,17 @@ let pane_data = $derived.by(() => {
       {/each}
 
       {#if section.title === `Energy Statistics (eV/atom)` &&
-        formation_energy_data[0].y.length > 0}
+        e_form_data[0].y.length > 0}
         <Histogram
-          series={formation_energy_data}
+          series={e_form_data}
           bins={50}
-          x_label=""
-          y_label=""
-          x_format=".2f"
-          y_ticks={3}
+          x_axis={{ label: ``, format: `.2f` }}
+          y_axis={{ label: ``, ticks: 3 }}
           show_legend={false}
           show_controls={false}
           padding={{ t: 5, b: 25, l: 35, r: 5 }}
           style="height: 100px; --histogram-min-height: 100px"
-          bar_color="steelblue"
-          bar_opacity={0.7}
+          bar={{ color: `steelblue`, opacity: 0.7 }}
         />
       {/if}
 
@@ -207,17 +204,13 @@ let pane_data = $derived.by(() => {
         <Histogram
           series={hull_distance_data}
           bins={50}
-          x_label=""
-          y_label=""
-          x_format=".2f"
-          x_lim={[0, null]}
-          y_ticks={3}
+          x_axis={{ label: ``, format: `.2f`, range: [0, null] }}
+          y_axis={{ label: ``, ticks: 3 }}
           show_legend={false}
           show_controls={false}
           padding={{ t: 5, b: 25, l: 35, r: 5 }}
           style="height: 100px; --histogram-min-height: 100px"
-          bar_color="coral"
-          bar_opacity={0.7}
+          bar={{ color: `coral`, opacity: 0.7 }}
         />
       {/if}
     </section>