matterviz 0.3.0 → 0.3.2

package/dist/convex-hull/ConvexHull3D.svelte

@@ -1,13 +1,17 @@
-<script lang="ts">import { is_dark_mode, watch_dark_mode } from '../colors';
+<script lang="ts">import { add_alpha, AXIS_COLORS, is_dark_mode, NEG_AXIS_COLORS, PLOT_COLORS, vesta_hex, watch_dark_mode, } from '../colors';
 import { normalize_show_controls } from '../controls';
-import { ClickFeedback, DragOverlay } from '../feedback';
+import { ClickFeedback, DragOverlay, Spinner } from '../feedback';
 import Icon from '../Icon.svelte';
 import { format_num } from '../labels';
 import { set_fullscreen_bg, setup_fullscreen_effect, toggle_fullscreen, } from '../layout';
+import { to_radians } from '../math';
 import { ColorBar, PlotTooltip } from '../plot';
 import { DEFAULTS } from '../settings';
+import { Canvas, T } from '@threlte/core';
+import * as extras from '@threlte/extras';
 import { ticks } from 'd3-array';
 import { SvelteMap } from 'svelte/reactivity';
+import { PerspectiveCamera, WebGLRenderer } from 'three';
 import { get_ternary_3d_coordinates, get_triangle_centroid, get_triangle_edges, get_triangle_vertical_edges, TRIANGLE_VERTICES, } from './barycentric-coords';
 import ConvexHullControls from './ConvexHullControls.svelte';
 import ConvexHullInfoPane from './ConvexHullInfoPane.svelte';
@@ -18,7 +22,7 @@ import { CONVEX_HULL_STYLE, default_controls, default_hull_config } from './inde
 import StructurePopup from './StructurePopup.svelte';
 import TemperatureSlider from './TemperatureSlider.svelte';
 import * as thermo from './thermodynamics';
-let { entries = [], controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(DEFAULTS.convex_hull.ternary.fullscreen), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.ternary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.ternary.show_unstable), show_hull_faces = $bindable(DEFAULTS.convex_hull.ternary.show_hull_faces), hull_face_opacity = $bindable(DEFAULTS.convex_hull.ternary.hull_face_opacity), color_mode = $bindable(DEFAULTS.convex_hull.ternary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.ternary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.ternary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.ternary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_unstable_labels), on_file_drop, enable_click_selection = true, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), highlight_style = {}, selected_entry = $bindable(null), temperature = $bindable(), interpolate_temperature = true, max_interpolation_gap = 500, gas_config, gas_pressures = $bindable({}), children, tooltip, ...rest } = $props();
+let { entries = [], controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(DEFAULTS.convex_hull.ternary.fullscreen), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.ternary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.ternary.show_unstable), show_hull_faces = $bindable(DEFAULTS.convex_hull.ternary.show_hull_faces), hull_face_opacity = $bindable(DEFAULTS.convex_hull.ternary.hull_face_opacity), hull_face_color_mode = $bindable(DEFAULTS.convex_hull.ternary.hull_face_color_mode), element_colors = vesta_hex, color_mode = $bindable(DEFAULTS.convex_hull.ternary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.ternary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.ternary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.ternary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.ternary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.ternary.show_unstable_labels), on_file_drop, enable_click_selection = true, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), highlight_style = {}, selected_entry = $bindable(null), temperature = $bindable(), interpolate_temperature = true, max_interpolation_gap = 500, gizmo = true, gas_config, gas_pressures = $bindable({}), children, tooltip, ...rest } = $props();
 const merged_controls = $derived({ ...default_controls, ...controls });
 const controls_config = $derived(normalize_show_controls(merged_controls.show));
 const merged_config = $derived({
@@ -136,6 +140,98 @@ const camera_default = {
     center_y: -50, // Shift up to better show the formation energy funnel
 };
 let camera = $state({ ...camera_default });
+// === Gizmo state & coordinate mapping ===
+// ConvexHull3D uses Rz(azimuth) then Rx(-elevation), viewing along -z_rotated.
+// These helpers convert between that system and Three.js camera position/up.
+const GIZMO_CAM_DIST = 5;
+const MIN_ELEV_FOR_Z_AXIS = 5; // degrees — below this, z-axis ticks collapse to a point
+let gizmo_cam_ref = $state();
+let gizmo_orbit_ref = $state(undefined);
+let gizmo_active = $state(false);
+// Convert elevation/azimuth (degrees) to Three.js camera position + up vector.
+function gizmo_camera(elev_deg, azim_deg) {
+    const [elev, azim] = [to_radians(elev_deg), to_radians(azim_deg)];
+    const [se, ce, sa, ca] = [
+        Math.sin(elev),
+        Math.cos(elev),
+        Math.sin(azim),
+        Math.cos(azim),
+    ];
+    return {
+        position: [
+            -sa * se * GIZMO_CAM_DIST,
+            -ca * se * GIZMO_CAM_DIST,
+            ce * GIZMO_CAM_DIST,
+        ],
+        up: [sa * ce, ca * ce, se],
+    };
+}
+// Derived gizmo camera state, avoids recomputing in the template
+const gizmo_cam_state = $derived(gizmo_camera(camera.elevation, camera.azimuth));
+// Center camera on the triangle's visual center for a given elevation.
+// The centroid (rotation center) sits at 1/3 height while the bbox
+// center is at 1/2 height — a difference of sqrt(3)/12 in data units.
+// Scale by cos(elevation) so offset only applies in near-top-down views.
+function center_camera(elev_deg) {
+    camera.center_x = 0;
+    // 0.6 matches the draw_data_points() scale factor that maps data coords to canvas pixels
+    const scale = Math.min(canvas_dims.width, canvas_dims.height) * 0.6 * camera.zoom;
+    camera.center_y = Math.sqrt(3) / 12 * scale * Math.cos(to_radians(elev_deg));
+}
+// Sync: ConvexHull3D → Three.js gizmo camera (on main canvas drag)
+$effect(() => {
+    if (gizmo_active)
+        return;
+    const cam = gizmo_cam_ref;
+    if (!cam)
+        return;
+    const { position, up } = gizmo_camera(camera.elevation, camera.azimuth);
+    cam.position.set(...position);
+    cam.up.set(...up);
+    cam.lookAt(0, 0, 0);
+    gizmo_orbit_ref?.update?.();
+});
+// Sync: gizmo → ConvexHull3D (during and after gizmo animation)
+function sync_gizmo_to_camera() {
+    const cam = gizmo_cam_ref;
+    if (!cam)
+        return;
+    const { x: cx, y: cy, z: cz } = cam.position;
+    const dist = Math.sqrt(cx * cx + cy * cy + cz * cz);
+    if (dist < 1e-6)
+        return;
+    const elev_rad = Math.acos(Math.max(-1, Math.min(1, cz / dist)));
+    const sin_elev = Math.sin(elev_rad);
+    const azim_deg = Math.abs(sin_elev) > 1e-6
+        ? Math.atan2(-cx / (dist * sin_elev), -cy / (dist * sin_elev)) * 180 / Math.PI
+        : 0;
+    const elev_deg = elev_rad * 180 / Math.PI;
+    camera.elevation = elev_deg;
+    camera.azimuth = azim_deg;
+    center_camera(elev_deg);
+}
+// Gizmo axis colors (constant — AXIS_COLORS/NEG_AXIS_COLORS never change)
+const gizmo_axis_options = Object.fromEntries([...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover_color]) => [axis, {
+        color,
+        labelColor: `#111`,
+        opacity: 0.85,
+        hover: { color: hover_color, labelColor: `#222`, opacity: 1 },
+    }]));
+// Extract placement from gizmo options (not a Threlte Gizmo prop)
+const gizmo_placement = $derived(typeof gizmo === `object` && gizmo?.placement ? gizmo.placement : `top-right`);
+// Merge constant axis options with consumer overrides (exclude our custom placement)
+const gizmo_props = $derived.by(() => {
+    if (typeof gizmo !== `object` || !gizmo) {
+        return { background: { enabled: false }, size: 80, ...gizmo_axis_options };
+    }
+    const { placement: _, ...threlte_opts } = gizmo;
+    return {
+        background: { enabled: false },
+        size: 80,
+        ...gizmo_axis_options,
+        ...threlte_opts,
+    };
+});
 // Interaction state
 let is_dragging = $state(false);
 let drag_started = $state(false);
@@ -150,17 +246,6 @@ let selected_structure = $state(null);
 let modal_place_right = $state(true);
 // Hull face color (customizable via controls)
 let hull_face_color = $state(`#4caf50`);
-// Utility: convert hex color to rgba string with alpha
-function hex_to_rgba(hex, alpha) {
-    const normalized = hex.trim();
-    const m = normalized.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-    if (!m)
-        return `rgba(0,0,0,${alpha})`;
-    const r = parseInt(m[1], 16);
-    const g = parseInt(m[2], 16);
-    const b = parseInt(m[3], 16);
-    return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, alpha))})`;
-}
 // Pulsating highlight for selected point
 let pulse_time = $state(0);
 let pulse_opacity = $derived(0.3 + 0.4 * Math.sin(pulse_time * 4));
@@ -186,7 +271,7 @@ $effect(() => {
 $effect(() => {
     // deno-fmt-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    [show_hull_faces, color_mode, color_scale, show_stable_labels, show_unstable_labels, max_hull_dist_show_labels, camera.elevation, camera.azimuth, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, highlighted_entries, text_color];
+    [show_hull_faces, color_mode, color_scale, show_stable_labels, show_unstable_labels, max_hull_dist_show_labels, camera.elevation, camera.azimuth, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, highlighted_entries, text_color];
     render_once();
 });
 // Function to extract structure data from a convex hull entry
@@ -212,6 +297,8 @@ function reset_all() {
     show_hull_faces = DEFAULTS.convex_hull.ternary.show_hull_faces;
     hull_face_color = DEFAULTS.convex_hull.ternary.hull_face_color;
     hull_face_opacity = DEFAULTS.convex_hull.ternary.hull_face_opacity;
+    hull_face_color_mode = DEFAULTS.convex_hull.ternary
+        .hull_face_color_mode;
 }
 const handle_keydown = (event) => {
     const target = event.target;
@@ -222,6 +309,10 @@ const handle_keydown = (event) => {
     if (target === canvas) {
         event.stopPropagation();
     }
+    if (event.key === `Escape` && modal_open) {
+        close_structure_popup();
+        return;
+    }
     // Handle Enter for keyboard accessibility - select hovered entry
     if (event.key === `Enter`) {
         const entry = hover_data?.entry;
@@ -246,6 +337,11 @@ const handle_keydown = (event) => {
     }
     const actions = {
         r: reset_camera,
+        t: () => {
+            camera.elevation = 0;
+            camera.azimuth = 0;
+            center_camera(0);
+        },
         b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
         s: () => show_stable = !show_stable,
         u: () => show_unstable = !show_unstable,
@@ -381,6 +477,9 @@ function draw_element_labels() {
 function draw_z_axis_ticks() {
     if (!ctx || elements.length !== 3)
         return;
+    // Hide z-axis in near-top-down views where ticks collapse to a point
+    if (Math.abs(camera.elevation) < MIN_ELEV_FOR_Z_AXIS)
+        return;
     const { min: e_min, max: e_max, center: e_mid } = energy_range;
     if (Math.abs(e_max - e_min) < 1e-6)
         return;
@@ -403,97 +502,151 @@ function draw_z_axis_ticks() {
         ctx.stroke();
         ctx.fillText(format_num(tick, `.2~`), x - tick_len - 4, y);
     }
-    // Rotated axis label (Unicode superscript: Eᶠᵒʳᵐ)
+    // Rotated axis label: Eform (eV/atom) with "form" as subscript
     const { x: lx, y: ly } = project_3d_point(axis_x, axis_y, e_mid);
+    const fs = merged_config.font_size ?? 12;
+    const sub_fs = Math.round(fs * 0.75);
     ctx.translate(lx - 50 * canvas_dims.scale, ly);
     ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = `center`;
-    ctx.font = `bold ${merged_config.font_size}px Arial`;
-    ctx.fillText(`E\u1DA0\u1D52\u02B3\u1D50 (eV/atom)`, 0, 0); // Eᶠᵒʳᵐ
+    ctx.textAlign = `left`;
+    // Measure widths in each font, then draw — reordered to minimize font switches
+    ctx.font = `bold ${fs}px Arial`;
+    const e_width = ctx.measureText(`E`).width;
+    const suffix_width = ctx.measureText(` (eV/atom)`).width;
+    ctx.font = `${sub_fs}px Arial`;
+    const form_width = ctx.measureText(`form`).width;
+    const offset = -(e_width + form_width + suffix_width) / 2;
+    // Draw subscript while sub-font is still active
+    ctx.fillText(`form`, offset + e_width, fs * 0.3);
+    ctx.font = `bold ${fs}px Arial`;
+    ctx.fillText(`E`, offset, 0);
+    ctx.fillText(` (eV/atom)`, offset + e_width + form_width, 0);
     ctx.restore();
 }
 function draw_convex_hull_faces() {
     if (!ctx || !show_hull_faces || hull_faces.length === 0)
         return;
-    // Normalize alpha by formation energy: 0 eV -> 0 alpha, min E_form -> hull_face_opacity
-    const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
-    const min_fe = Math.min(0, ...formation_energies);
-    const norm_alpha = (z) => {
-        const t = Math.max(0, Math.min(1, (0 - z) / Math.max(1e-6, 0 - min_fe)));
-        return t * hull_face_opacity;
+    // Lazy computation for uniform mode: normalize alpha by formation energy
+    let norm_alpha = null;
+    if (hull_face_color_mode === `uniform`) {
+        const formation_energies = plot_entries.map((e) => e.e_form_per_atom ?? 0);
+        const min_fe = Math.min(0, ...formation_energies);
+        norm_alpha = (z) => {
+            const t = Math.max(0, Math.min(1, (0 - z) / Math.max(1e-6, 0 - min_fe)));
+            return t * hull_face_opacity;
+        };
+    }
+    // Lazy computation for formation_energy mode
+    let energy_face_scale = null;
+    let min_z = 0;
+    if (hull_face_color_mode === `formation_energy`) {
+        const all_z = hull_faces.flatMap((tri) => tri.vertices.map((v) => v.z));
+        min_z = Math.min(...all_z);
+        energy_face_scale = helpers.get_energy_color_scale(`energy`, color_scale, all_z.map((z) => ({ e_above_hull: z - min_z })));
+    }
+    // Helper to get face color based on mode
+    const get_face_color = (tri, tri_idx) => {
+        if (hull_face_color_mode === `uniform`) {
+            return hull_face_color;
+        }
+        if (hull_face_color_mode === `formation_energy`) {
+            const avg_z = (tri.vertices[0].z + tri.vertices[1].z + tri.vertices[2].z) / 3;
+            return energy_face_scale(avg_z - min_z);
+        }
+        if (hull_face_color_mode === `dominant_element`) {
+            // Find element vertex closest to face centroid in 2D ternary space
+            const { x: cx, y: cy } = tri.centroid;
+            const dists = TRIANGLE_VERTICES.map(([tx, ty]) => Math.hypot(cx - tx, cy - ty));
+            const el = elements[dists.indexOf(Math.min(...dists))];
+            return element_colors[el] ?? `#888888`;
+        }
+        if (hull_face_color_mode === `facet_index`) {
+            return PLOT_COLORS[tri_idx % PLOT_COLORS.length];
+        }
+        return hull_face_color;
     };
     // Sort faces by depth for proper rendering
-    const faces_with_depth = hull_faces.map((tri) => {
+    const faces_with_depth = hull_faces.map((tri, tri_idx) => {
         const centroid_proj = project_3d_point(tri.centroid.x, tri.centroid.y, tri.centroid.z);
-        return { tri, depth: centroid_proj.depth };
+        return { tri, tri_idx, depth: centroid_proj.depth };
     });
     faces_with_depth.sort((a, b) => a.depth - b.depth); // Back to front
     // Draw each face (lower hull only)
-    for (const { tri } of faces_with_depth) {
+    for (const { tri, tri_idx } of faces_with_depth) {
         const [p1, p2, p3] = tri.vertices;
         const proj1 = project_3d_point(p1.x, p1.y, p1.z);
         const proj2 = project_3d_point(p2.x, p2.y, p2.z);
         const proj3 = project_3d_point(p3.x, p3.y, p3.z);
-        // Build per-face linear gradient in screen space matching linear variation of formation energy
-        const a1 = norm_alpha(p1.z);
-        const a2 = norm_alpha(p2.z);
-        const a3 = norm_alpha(p3.z);
-        // Solve a*x + b*y + c = alpha at the three projected vertices
-        const x1 = proj1.x, y1 = proj1.y;
-        const x2 = proj2.x, y2 = proj2.y;
-        const x3 = proj3.x, y3 = proj3.y;
-        const det = x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2);
-        let a = 0, b = 0, c = (a1 + a2 + a3) / 3;
-        if (Math.abs(det) > 1e-9) {
-            a = (a1 * (y2 - y3) + a2 * (y3 - y1) + a3 * (y1 - y2)) / det;
-            b = (a1 * (x3 - x2) + a2 * (x1 - x3) + a3 * (x2 - x1)) / det;
-            c = (a1 * (x2 * y3 - x3 * y2) + a2 * (x3 * y1 - x1 * y3) +
-                a3 * (x1 * y2 - x2 * y1)) /
-                det;
-        }
-        // Gradient direction is the screen-space gradient of alpha
-        const mag = Math.hypot(a, b);
-        // Fallback: uniform if nearly flat
-        if (mag < 1e-9) {
-            ctx.save();
-            ctx.beginPath();
-            ctx.moveTo(proj1.x, proj1.y);
-            ctx.lineTo(proj2.x, proj2.y);
-            ctx.lineTo(proj3.x, proj3.y);
-            ctx.closePath();
-            ctx.fillStyle = hex_to_rgba(hull_face_color, (a1 + a2 + a3) / 3);
-            ctx.fill();
-            ctx.strokeStyle = hull_face_color;
-            ctx.lineWidth = 1;
-            ctx.stroke();
-            ctx.restore();
+        const face_color = get_face_color(tri, tri_idx);
+        // For uniform mode, use gradient with variable opacity
+        // For other modes, use fixed opacity
+        if (hull_face_color_mode === `uniform`) {
+            // Build per-face linear gradient in screen space matching linear variation of formation energy
+            const a1 = norm_alpha(p1.z);
+            const a2 = norm_alpha(p2.z);
+            const a3 = norm_alpha(p3.z);
+            // Solve a*x + b*y + c = alpha at the three projected vertices
+            const x1 = proj1.x, y1 = proj1.y;
+            const x2 = proj2.x, y2 = proj2.y;
+            const x3 = proj3.x, y3 = proj3.y;
+            const det = x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2);
+            let coef_a = 0, coef_b = 0, coef_c = (a1 + a2 + a3) / 3;
+            if (Math.abs(det) > 1e-9) {
+                coef_a = (a1 * (y2 - y3) + a2 * (y3 - y1) + a3 * (y1 - y2)) / det;
+                coef_b = (a1 * (x3 - x2) + a2 * (x1 - x3) + a3 * (x2 - x1)) / det;
+                coef_c = (a1 * (x2 * y3 - x3 * y2) + a2 * (x3 * y1 - x1 * y3) +
+                    a3 * (x1 * y2 - x2 * y1)) /
+                    det;
+            }
+            // Helper to draw filled+stroked triangle (ctx guaranteed non-null by early return)
+            const draw_tri = (fill, stroke_alpha) => {
+                ctx.save();
+                ctx.beginPath();
+                ctx.moveTo(proj1.x, proj1.y);
+                ctx.lineTo(proj2.x, proj2.y);
+                ctx.lineTo(proj3.x, proj3.y);
+                ctx.closePath();
+                ctx.fillStyle = fill;
+                ctx.fill();
+                ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, stroke_alpha));
+                ctx.lineWidth = 1;
+                ctx.stroke();
+                ctx.restore();
+            };
+            // Gradient direction is the screen-space gradient of alpha
+            const mag = Math.hypot(coef_a, coef_b);
+            if (mag < 1e-9) {
+                // Fallback: uniform fill if nearly flat
+                const avg_alpha = (a1 + a2 + a3) / 3;
+                draw_tri(add_alpha(face_color, avg_alpha), avg_alpha * 3);
+            }
+            else {
+                const vx = coef_a / mag;
+                const vy = coef_b / mag;
+                const cx = (x1 + x2 + x3) / 3;
+                const cy = (y1 + y2 + y3) / 3;
+                const alpha_c = coef_a * cx + coef_b * cy + coef_c;
+                const alpha_min = Math.min(a1, a2, a3);
+                const alpha_max = Math.max(a1, a2, a3);
+                const s_min = (alpha_min - alpha_c) / mag;
+                const s_max = (alpha_max - alpha_c) / mag;
+                const grad = ctx.createLinearGradient(cx + vx * s_min, cy + vy * s_min, cx + vx * s_max, cy + vy * s_max);
+                grad.addColorStop(0, add_alpha(face_color, alpha_min));
+                grad.addColorStop(1, add_alpha(face_color, alpha_max));
+                draw_tri(grad, alpha_max * 3);
+            }
         }
         else {
-            const vx = a / mag;
-            const vy = b / mag;
-            const cx = (x1 + x2 + x3) / 3;
-            const cy = (y1 + y2 + y3) / 3;
-            const alpha_c = a * cx + b * cy + c;
-            const alpha_min = Math.min(a1, a2, a3);
-            const alpha_max = Math.max(a1, a2, a3);
-            const s_min = (alpha_min - alpha_c) / mag;
-            const s_max = (alpha_max - alpha_c) / mag;
-            const gx0 = cx + vx * s_min;
-            const gy0 = cy + vy * s_min;
-            const gx1 = cx + vx * s_max;
-            const gy1 = cy + vy * s_max;
-            const grad = ctx.createLinearGradient(gx0, gy0, gx1, gy1);
-            grad.addColorStop(0, hex_to_rgba(hull_face_color, alpha_min));
-            grad.addColorStop(1, hex_to_rgba(hull_face_color, alpha_max));
+            // Non-uniform modes: solid color with fixed opacity
             ctx.save();
             ctx.beginPath();
             ctx.moveTo(proj1.x, proj1.y);
             ctx.lineTo(proj2.x, proj2.y);
             ctx.lineTo(proj3.x, proj3.y);
             ctx.closePath();
-            ctx.fillStyle = grad;
+            ctx.fillStyle = add_alpha(face_color, hull_face_opacity);
             ctx.fill();
-            ctx.strokeStyle = hull_face_color;
+            ctx.strokeStyle = add_alpha(face_color, Math.min(0.6, hull_face_opacity * 3));
             ctx.lineWidth = 1;
             ctx.stroke();
             ctx.restore();
@@ -513,7 +666,7 @@ const e_form_color_scale_fn = $derived.by(() => {
         // alpha 0 at 0 eV, goes to hull_face_opacity at most negative energy
         const t = Math.max(0, Math.min(1, (value - min_fe) / denom));
         const alpha = (1 - t) * hull_face_opacity;
-        return hex_to_rgba(hull_face_color, alpha);
+        return add_alpha(hull_face_color, alpha);
     };
 });
 function draw_data_points() {
@@ -584,15 +737,7 @@ function draw_hull_labels() {
         if (!can_label)
             continue;
         const projected = project_3d_point(entry.x, entry.y, entry.z);
-        let formula = entry.reduced_formula || entry.name || ``;
-        if (!formula) {
-            formula = Object.entries(entry.composition)
-                .filter(([, amt]) => amt > 0)
-                .sort(([el1], [el2]) => elements.indexOf(el1) -
-                elements.indexOf(el2))
-                .map(([el, amt]) => Math.abs(amt - 1) < 1e-6 ? el : `${el}${format_num(amt, `.2~`)}`)
-                .join(``);
-        }
+        const formula = helpers.get_entry_label(entry, elements);
         ctx.fillText(formula, projected.x, projected.y + 16 * canvas_dims.scale);
     }
 }
@@ -608,11 +753,13 @@ function render_frame() {
     ctx.fillStyle = `transparent`;
     ctx.fillRect(0, 0, display_width, display_height);
     if (elements.length !== 3) {
-        ctx.fillStyle = text_color;
-        ctx.font = `16px Arial`;
-        ctx.textAlign = `center`;
-        ctx.textBaseline = `middle`;
-        ctx.fillText(`Ternary convex hull requires exactly 3 elements (got ${pd_data.elements.length})`, display_width / 2, display_height / 2);
+        if (elements.length > 0) {
+            ctx.fillStyle = text_color;
+            ctx.font = `16px Arial`;
+            ctx.textAlign = `center`;
+            ctx.textBaseline = `middle`;
+            ctx.fillText(`Ternary convex hull requires exactly 3 elements (got ${elements.length})`, display_width / 2, display_height / 2);
+        }
         return;
     }
     draw_structure_outline();
@@ -625,33 +772,37 @@ function render_frame() {
 function handle_mouse_down(event) {
     is_dragging = true;
     drag_started = false;
+    hover_data = null;
+    on_point_hover?.(null);
     last_mouse = { x: event.clientX, y: event.clientY };
 }
 const handle_mouse_move = (event) => {
-    if (is_dragging) {
-        const [dx, dy] = [event.clientX - last_mouse.x, event.clientY - last_mouse.y];
-        // Mark as drag if any movement occurred
-        if (dx !== 0 || dy !== 0)
-            drag_started = true;
-        // With Cmd/Ctrl held: pan the view instead of rotating
-        if (event.metaKey || event.ctrlKey) {
-            camera.center_x += dx;
-            camera.center_y += dy;
-        }
-        else {
-            // Horizontal drag -> azimuth rotation around z-axis
-            camera.azimuth += dx * 0.3; // Positive dx (drag right) rotates clockwise
-            // Vertical drag -> elevation angle (full range)
-            camera.elevation -= dy * 0.3; // Positive dy (drag down) tilts view down
-        }
-        last_mouse = { x: event.clientX, y: event.clientY };
+    if (!is_dragging)
+        return;
+    const [dx, dy] = [event.clientX - last_mouse.x, event.clientY - last_mouse.y];
+    // Mark as drag if any movement occurred
+    if (dx !== 0 || dy !== 0)
+        drag_started = true;
+    // With Cmd/Ctrl held: pan the view instead of rotating
+    if (event.metaKey || event.ctrlKey) {
+        camera.center_x += dx;
+        camera.center_y += dy;
+    }
+    else {
+        // Horizontal drag -> azimuth rotation around z-axis
+        camera.azimuth += dx * 0.3; // Positive dx (drag right) rotates clockwise
+        // Vertical drag -> elevation angle (full range)
+        camera.elevation -= dy * 0.3; // Positive dy (drag down) tilts view down
     }
+    last_mouse = { x: event.clientX, y: event.clientY };
 };
 const handle_wheel = (event) => {
     event.preventDefault();
     camera.zoom = Math.max(0.5, Math.min(10, camera.zoom * (event.deltaY > 0 ? 0.98 : 1.02)));
 };
 const handle_hover = (event) => {
+    if (is_dragging)
+        return;
     const entry = find_entry_at_mouse(event);
     hover_data = entry
         ? { entry, position: { x: event.clientX, y: event.clientY } }
@@ -717,15 +868,21 @@ function update_canvas_size() {
     const container = canvas.parentElement;
     const rect = container?.getBoundingClientRect();
     const [w, h] = rect ? [rect.width, rect.height] : [400, 400];
-    canvas.width = Math.max(0, Math.round(w * dpr));
-    canvas.height = Math.max(0, Math.round(h * dpr));
-    canvas_dims = { width: w, height: h, scale: Math.min(w, h) / 600 };
-    ctx = canvas.getContext(`2d`);
-    if (ctx) {
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = `high`;
+    // Only update canvas dimensions if they actually changed
+    // (assigning canvas.width/height clears the canvas even if values are the same)
+    const new_width = Math.max(0, Math.round(w * dpr));
+    const new_height = Math.max(0, Math.round(h * dpr));
+    if (!ctx || canvas.width !== new_width || canvas.height !== new_height) {
+        canvas.width = new_width;
+        canvas.height = new_height;
+        ctx = canvas.getContext(`2d`);
+        if (ctx) {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = `high`;
+        }
     }
+    canvas_dims = { width: w, height: h, scale: Math.min(w, h) / 600 };
     render_once();
 }
 // Reactive dark mode detection for canvas text color
@@ -803,6 +960,8 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
   class:dragover={drag_over}
   style={`${style}; ${rest.style ?? ``}`}
   data-has-selection={selected_entry !== null}
+  data-has-hover={hover_data !== null}
+  data-is-dragging={is_dragging}
   bind:this={wrapper}
   role="application"
   tabindex="-1"
@@ -824,7 +983,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
       highlighted_entries,
       selected_entry,
     })}
-  <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0">
+  <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0; font-weight: 500">
     {@html merged_controls.title || phase_stats?.chemical_system || ``}
   </h3>
   <canvas
@@ -839,6 +998,13 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
     onwheel={handle_wheel}
   ></canvas>
 
+  {#if entries.length === 0}
+    <Spinner
+      text="Loading data..."
+      style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center"
+    />
+  {/if}
+
   <!-- Formation Energy Color Bar (bottom-left corner) -->
   {#if color_mode === `energy` && plot_entries.length > 0}
     {@const hull_distances = plot_entries
@@ -850,20 +1016,23 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
       title="Energy above hull (eV/atom)"
       range={[min_energy, max_energy]}
       {color_scale}
-      wrapper_style="position: absolute; bottom: 2em; left: 1em; width: 200px;"
+      wrapper_style="position: absolute; bottom: 16px; left: 1em; width: 200px;"
       bar_style="height: 12px;"
       title_style="margin-bottom: 4px;"
     />
   {/if}
 
   <!-- Formation Energy Faces Color Bar (bottom-right corner) -->
-  {#if plot_entries.length > 0}
+  <!-- Only show for uniform/formation_energy modes where face color relates to E_form -->
+  {#if plot_entries.length > 0 && show_hull_faces &&
+      (hull_face_color_mode === `uniform` ||
+        hull_face_color_mode === `formation_energy`)}
     <ColorBar
       title="Formation energy (eV/atom)"
       color_scale_fn={e_form_color_scale_fn}
       color_scale_domain={e_form_range}
       range={e_form_range}
-      wrapper_style="position: absolute; width: 200px; left: auto; right: 1em; bottom: 2em"
+      wrapper_style="position: absolute; bottom: 16px; right: 1em; width: 200px;"
       bar_style="height: 12px;"
       title_style="margin-bottom: 4px;"
     />
@@ -931,6 +1100,8 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
           on_hull_face_color_change={(value) => hull_face_color = value}
           {hull_face_opacity}
           on_hull_face_opacity_change={(value) => hull_face_opacity = value}
+          {hull_face_color_mode}
+          on_hull_face_color_mode_change={(value) => hull_face_color_mode = value}
           bind:energy_source_mode
           {has_precomputed_e_form}
           {can_compute_e_form}
@@ -941,16 +1112,55 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
     </section>
   {/if}
 
-  {#if has_temp_data && temperature !== undefined}
-    <TemperatureSlider {available_temperatures} bind:temperature />
+  <!-- Orientation gizmo (configurable placement, default top-right) -->
+  {#if gizmo && typeof WebGLRenderingContext !== `undefined`}
+    <div class="gizmo-wrapper {controls_config.class}" data-placement={gizmo_placement}>
+      <Canvas
+        createRenderer={(cvs: HTMLCanvasElement) =>
+        new WebGLRenderer({ canvas: cvs, alpha: true, antialias: true })}
+      >
+        <T.PerspectiveCamera
+          makeDefault
+          bind:ref={gizmo_cam_ref}
+          position={gizmo_cam_state.position}
+          up={gizmo_cam_state.up}
+          fov={50}
+        >
+          <extras.OrbitControls
+            bind:ref={gizmo_orbit_ref}
+            enableRotate={false}
+            enableZoom={false}
+            enablePan={false}
+          >
+            <extras.Gizmo
+              {...gizmo_props}
+              onstart={() => (gizmo_active = true)}
+              onchange={sync_gizmo_to_camera}
+              onend={() => {
+                sync_gizmo_to_camera()
+                gizmo_active = false
+              }}
+            />
+          </extras.OrbitControls>
+        </T.PerspectiveCamera>
+      </Canvas>
+    </div>
   {/if}
 
-  {#if gas_analysis.has_gas_dependent_elements && merged_gas_config}
-    <GasPressureControls
-      config={merged_gas_config}
-      bind:pressures={gas_pressures}
-      temperature={temperature ?? 300}
-    />
+  {#if (has_temp_data && temperature !== undefined) ||
+      (gas_analysis.has_gas_dependent_elements && merged_gas_config)}
+    <div class="right-controls">
+      {#if has_temp_data && temperature !== undefined}
+        <TemperatureSlider {available_temperatures} bind:temperature />
+      {/if}
+      {#if gas_analysis.has_gas_dependent_elements && merged_gas_config}
+        <GasPressureControls
+          config={merged_gas_config}
+          bind:pressures={gas_pressures}
+          temperature={temperature ?? 300}
+        />
+      {/if}
+    </div>
   {/if}
 
   <!-- Hover tooltip -->
@@ -1019,6 +1229,58 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
   canvas:active {
     cursor: grabbing;
   }
+  .right-controls {
+    position: absolute;
+    top: calc(1ex + 50px);
+    right: 1ex;
+    z-index: 2;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+  }
+  .right-controls :global(.temperature-slider),
+  .right-controls :global(.pressure-controls) {
+    position: static;
+  }
+  /* align both vertical range inputs at the same x position */
+  .right-controls :global(.slider-wrapper) {
+    justify-content: flex-end;
+  }
+  .gizmo-wrapper {
+    position: absolute;
+    width: clamp(80px, 18cqmin, 110px);
+    height: clamp(80px, 18cqmin, 110px);
+    pointer-events: auto;
+    isolation: isolate; /* contain z-index: 1000 from three-viewport-gizmo overlay */
+    transition: opacity 0.2s ease-in-out;
+  }
+  .gizmo-wrapper[data-placement='top-right'] {
+    top: 1.8em;
+    right: 1ex;
+  }
+  .gizmo-wrapper[data-placement='top-left'] {
+    top: 1.8em;
+    left: 1ex;
+  }
+  .gizmo-wrapper[data-placement='bottom-right'] {
+    bottom: 2.5em;
+    right: 1ex;
+  }
+  .gizmo-wrapper[data-placement='bottom-left'] {
+    bottom: 2.5em;
+    left: 1ex;
+  }
+  .gizmo-wrapper.hover-visible {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .convex-hull-3d:hover .gizmo-wrapper.hover-visible,
+  .convex-hull-3d:focus-within .gizmo-wrapper.hover-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
   .control-buttons {
     position: absolute;
     top: 1ex;
@@ -1040,7 +1302,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
     opacity: 1;
     pointer-events: auto;
   }
-  .control-buttons button {
+  .control-buttons :global(button) {
     background: transparent;
     border: none;
     padding: 4px;
@@ -1049,9 +1311,9 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
     color: var(--text-color, currentColor);
     transition: background-color 0.2s;
     display: flex;
-    font-size: clamp(0.85em, 2cqmin, 2.5em);
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
-  .control-buttons button:hover {
+  .control-buttons :global(button):hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
 </style>