matterviz 0.3.0 → 0.3.2

package/dist/convex-hull/ConvexHull3D.svelte.d.ts

@@ -3,6 +3,6 @@ import type { ConvexHullEntry, HighlightStyle } from './types';
 type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
     highlight_style?: HighlightStyle;
 };
-declare const ConvexHull3D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "fullscreen" | "show_hull_faces" | "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" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull3D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "color_scale" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull3D = ReturnType<typeof ConvexHull3D>;
 export default ConvexHull3D;

package/dist/convex-hull/ConvexHull4D.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { is_dark_mode, watch_dark_mode } from '../colors';
+<script lang="ts">import { add_alpha, is_dark_mode, 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 { set_fullscreen_bg, setup_fullscreen_effect, toggle_fullscreen, } from '../layout';
 import { ColorBar, PlotTooltip } from '../plot';
@@ -15,7 +15,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.quaternary.fullscreen), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.quaternary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.quaternary.show_unstable), show_hull_faces = $bindable(DEFAULTS.convex_hull.quaternary.show_hull_faces), hull_face_opacity = $bindable(DEFAULTS.convex_hull.quaternary.hull_face_opacity), color_mode = $bindable(DEFAULTS.convex_hull.quaternary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.quaternary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.quaternary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.quaternary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.quaternary.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.quaternary.fullscreen), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.quaternary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.quaternary.show_unstable), show_hull_faces = $bindable(DEFAULTS.convex_hull.quaternary.show_hull_faces), hull_face_opacity = $bindable(DEFAULTS.convex_hull.quaternary.hull_face_opacity), hull_face_color_mode = $bindable(DEFAULTS.convex_hull.quaternary.hull_face_color_mode), element_colors = vesta_hex, color_mode = $bindable(DEFAULTS.convex_hull.quaternary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.quaternary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.quaternary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.quaternary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.quaternary.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();
 const merged_controls = $derived({ ...default_controls, ...controls });
 const controls_config = $derived(normalize_show_controls(merged_controls.show));
 const merged_config = $derived({
@@ -80,10 +80,9 @@ const hull_4d = $derived.by(() => {
             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)
+        if (points_4d.length < 5)
             return []; // Need at least 5 points for 4D hull
-        return thermo.compute_lower_hull_4d(valid_points);
+        return thermo.compute_lower_hull_4d(points_4d);
     }
     catch (error) {
         console.error(`Error computing 4D hull:`, error);
@@ -208,7 +207,7 @@ $effect(() => {
 $effect(() => {
     // deno-fmt-ignore
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, text_color, elements];
+    [show_hull_faces, color_mode, color_scale, camera.rotation_x, camera.rotation_y, camera.zoom, camera.center_x, camera.center_y, plot_entries, hull_face_color, hull_face_opacity, hull_face_color_mode, element_colors, text_color, elements];
     render_once();
 });
 // Visibility toggles are now bindable props
@@ -255,6 +254,8 @@ function reset_all() {
     show_hull_faces = DEFAULTS.convex_hull.quaternary.show_hull_faces;
     hull_face_color = DEFAULTS.convex_hull.quaternary.hull_face_color;
     hull_face_opacity = DEFAULTS.convex_hull.quaternary.hull_face_opacity;
+    hull_face_color_mode = DEFAULTS.convex_hull.quaternary
+        .hull_face_color_mode;
 }
 const handle_keydown = (event) => {
     const target = event.target;
@@ -316,17 +317,6 @@ const energy_color_scale = $derived.by(() => helpers.get_energy_color_scale(colo
 $effect(() => {
     phase_stats = thermo.get_convex_hull_stats(plot_entries, elements, 4);
 });
-// Utility: convert hex color to rgba string with alpha
-function hex_to_rgba(hex, alpha) {
-    const normalized = hex.trim();
-    const match = normalized.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
-    if (!match)
-        return `rgba(0,0,0,${alpha})`;
-    const r = parseInt(match[1], 16);
-    const g = parseInt(match[2], 16);
-    const b = parseInt(match[3], 16);
-    return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, alpha))})`;
-}
 // 3D to 2D projection following Materials Project approach
 function project_3d_point(x, y, z) {
     if (!canvas)
@@ -476,6 +466,15 @@ function draw_convex_hull_faces() {
         const proj1 = project_3d_point(tet1.x, tet1.y, tet1.z);
         const proj2 = project_3d_point(tet2.x, tet2.y, tet2.z);
         const proj3 = project_3d_point(tet3.x, tet3.y, tet3.z);
+        // Compute tetrahedron centroid in barycentric coords (for dominant_element mode)
+        // All 4 faces share the same tetrahedron, so they get the same color for facet_index
+        const tet_centroid_bary = [
+            (p0.x + p1.x + p2.x + p3.x) / 4,
+            (p0.y + p1.y + p2.y + p3.y) / 4,
+            (p0.z + p1.z + p2.z + p3.z) / 4,
+            ((1 - p0.x - p0.y - p0.z) + (1 - p1.x - p1.y - p1.z) +
+                (1 - p2.x - p2.y - p2.z) + (1 - p3.x - p3.y - p3.z)) / 4,
+        ];
         // Each tetrahedron has 4 triangular faces
         const faces = [
             [proj0, proj1, proj2, (p0.w + p1.w + p2.w) / 3],
@@ -488,34 +487,68 @@ function draw_convex_hull_faces() {
                 vertices: [v0, v1, v2],
                 avg_depth: (v0.depth + v1.depth + v2.depth) / 3,
                 avg_w,
+                tet_idx,
+                centroid_bary: tet_centroid_bary,
             });
         }
     }
     // Sort by depth (back to front)
     triangles.sort((a, b) => a.avg_depth - b.avg_depth);
-    // Determine alpha based on formation energy (more negative = more opaque)
-    // Scale by user-controlled 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 = (w) => {
-        const t = Math.max(0, Math.min(1, (0 - w) / Math.max(1e-6, 0 - min_fe)));
-        // Use user-controlled opacity as the maximum
-        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 = (w) => {
+            const t = Math.max(0, Math.min(1, (0 - w) / 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_w = 0;
+    if (hull_face_color_mode === `formation_energy`) {
+        const all_avg_w = triangles.map((tri) => tri.avg_w);
+        min_w = Math.min(...all_avg_w);
+        energy_face_scale = helpers.get_energy_color_scale(`energy`, color_scale, all_avg_w.map((w) => ({ e_above_hull: w - min_w })));
+    }
+    // Helper to get face color based on mode
+    const get_face_color = (tri) => {
+        if (hull_face_color_mode === `uniform`) {
+            return hull_face_color;
+        }
+        if (hull_face_color_mode === `formation_energy`) {
+            return energy_face_scale(tri.avg_w - min_w);
+        }
+        if (hull_face_color_mode === `dominant_element`) {
+            // Find element with highest fraction
+            const max_idx = tri.centroid_bary.indexOf(Math.max(...tri.centroid_bary));
+            const el = elements[max_idx];
+            return element_colors[el] ?? `#888888`;
+        }
+        if (hull_face_color_mode === `facet_index`) {
+            return PLOT_COLORS[tri.tet_idx % PLOT_COLORS.length];
+        }
+        return hull_face_color;
     };
     // Draw each triangle
     for (const tri of triangles) {
         const [v0, v1, v2] = tri.vertices;
-        const alpha = norm_alpha(tri.avg_w);
+        // Uniform mode uses variable opacity; other modes use fixed opacity
+        const alpha = hull_face_color_mode === `uniform`
+            ? norm_alpha(tri.avg_w)
+            : hull_face_opacity;
+        const face_color = get_face_color(tri);
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(v0.x, v0.y);
         ctx.lineTo(v1.x, v1.y);
         ctx.lineTo(v2.x, v2.y);
         ctx.closePath();
-        ctx.fillStyle = hex_to_rgba(hull_face_color, alpha);
+        ctx.fillStyle = add_alpha(face_color, alpha);
         ctx.fill();
-        // Edge lines more pronounced with higher opacity and thicker width
-        ctx.strokeStyle = hex_to_rgba(hull_face_color, Math.min(0.4, hull_face_opacity * 4));
+        // Edge lines more pronounced with higher opacity
+        ctx.strokeStyle = add_alpha(face_color, Math.min(0.4, alpha * 4));
         ctx.lineWidth = 1;
         ctx.stroke();
         ctx.restore();
@@ -564,8 +597,7 @@ function draw_data_points() {
                 (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels));
         if (should_label) {
             ctx.fillStyle = text_color;
-            const label = entry.name || entry.reduced_formula || entry.entry_id ||
-                `Unknown`;
+            const label = helpers.get_entry_label(entry, elements);
             const font_size = Math.round(12 * canvas_dims.scale);
             ctx.font = `${font_size}px Arial`;
             ctx.textAlign = `center`;
@@ -584,11 +616,13 @@ function render_frame() {
     ctx.fillStyle = `transparent`; // Set background - use transparent to inherit from container
     ctx.fillRect(0, 0, display_width, display_height);
     if (elements.length !== 4) {
-        ctx.fillStyle = text_color;
-        ctx.font = `16px Arial`;
-        ctx.textAlign = `center`;
-        ctx.textBaseline = `middle`;
-        ctx.fillText(`Quaternary convex hull requires exactly 4 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(`Quaternary convex hull requires exactly 4 elements (got ${elements.length})`, display_width / 2, display_height / 2);
+        }
         return;
     }
     draw_structure_outline(); // Draw tetrahedron outline
@@ -598,6 +632,8 @@ 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) => {
@@ -613,8 +649,8 @@ const handle_mouse_move = (event) => {
         camera.center_y += dy;
     }
     else {
-        camera.rotation_y -= dx * 0.005;
-        camera.rotation_x = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, camera.rotation_x + dy * 0.005));
+        camera.rotation_y += dx * 0.005;
+        camera.rotation_x = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, camera.rotation_x - dy * 0.005));
     }
     last_mouse = { x: event.clientX, y: event.clientY };
 };
@@ -623,6 +659,8 @@ const handle_wheel = (event) => {
     camera.zoom = Math.max(1.0, Math.min(15, 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 } }
@@ -759,6 +797,10 @@ 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}
+  data-rotation-x={camera.rotation_x.toFixed(4)}
+  data-rotation-y={camera.rotation_y.toFixed(4)}
   bind:this={wrapper}
   role="application"
   tabindex="-1"
@@ -796,6 +838,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}
+
   <!-- Energy above hull Color Bar -->
   {#if color_mode === `energy` && plot_entries.length > 0}
     {@const hull_distances = plot_entries
@@ -875,6 +924,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}
@@ -990,7 +1041,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
   .control-buttons :global(.draggable-pane) {
     z-index: 1001 !important;
   }
-  .control-buttons button {
+  .control-buttons :global(button) {
     background: transparent;
     border: none;
     padding: 4px;
@@ -999,9 +1050,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>

package/dist/convex-hull/ConvexHull4D.svelte.d.ts

@@ -3,6 +3,6 @@ import type { ConvexHullEntry, HighlightStyle } from './types';
 type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
     highlight_style?: HighlightStyle;
 };
-declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "fullscreen" | "show_hull_faces" | "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" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "color_scale" | "fullscreen" | "show_hull_faces" | "hull_face_opacity" | "hull_face_color_mode" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull4D = ReturnType<typeof ConvexHull4D>;
 export default ConvexHull4D;

package/dist/convex-hull/ConvexHullControls.svelte

@@ -2,7 +2,27 @@
 import DraggablePane from '../overlays/DraggablePane.svelte';
 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.03), 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, camera, merged_controls, controls_open = $bindable(false), toggle_props = {}, pane_props = {}, ...rest } = $props();
+import { HULL_FACE_COLOR_MODES } from './types';
+// Face color mode display labels and tooltips
+const FACE_COLOR_MODES = {
+    uniform: { label: `Uniform`, tip: `Single uniform color for all faces` },
+    formation_energy: {
+        label: `Energy`,
+        tip: `Color by average formation energy of face vertices`,
+    },
+    dominant_element: {
+        label: `Element`,
+        tip: `Color by element with highest concentration at face centroid`,
+    },
+    facet_index: { label: `Index`, tip: `Distinct categorical color per facet` },
+};
+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.03), on_hull_face_opacity_change, hull_face_color_mode = `uniform`, on_hull_face_color_mode_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, camera, merged_controls, controls_open = $bindable(false), toggle_props = {}, pane_props = {}, ...rest } = $props();
+// Focus the multiselect input next to the "Color scale" label
+function focus_multiselect(evt) {
+    ;
+    evt.currentTarget.nextElementSibling
+        ?.querySelector(`input`)?.focus();
+}
 </script>
 
 <DraggablePane
@@ -10,10 +30,7 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
   pane_props={{
     ...pane_props,
     class: `convex-hull-controls-pane ${pane_props?.class ?? ``}`,
-    style:
-      `--pane-min-height: 280px; --pane-max-height: max(350px, calc(100cqh - 40px)); ${
-        pane_props?.style ?? ``
-      }`,
+    style: `${pane_props?.style ?? ``}`,
   }}
   toggle_props={{
     title: controls_open ? `` : `Convex hull controls`,
@@ -24,7 +41,7 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
   open_icon="Cross"
   {...rest}
 >
-  <h4 style="margin: 0">
+  <h4>
     {@html merged_controls.title || `Convex Hull Controls`}
   </h4>
 
@@ -89,7 +106,7 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
         bind:value={max_hull_dist_show_phases}
         class="threshold-input"
       />
-      <span style="white-space: nowrap; font-size: 0.85em">eV/atom</span>
+      <span style="white-space: nowrap">eV/atom</span>
       <input
         type="range"
         min="0"
@@ -141,8 +158,17 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
     </div>
   {:else}
     <!-- Color scale selector -->
-    <div style="display: grid; gap: 8px; grid-template-columns: auto 1fr">
-      <span {@attach tooltip({ content: `Choose energy colormap` })}>Color scale</span>
+    <div class="color-scale-row">
+      <span
+        {@attach tooltip({ content: `Choose energy colormap` })}
+        onclick={focus_multiselect}
+        onkeydown={(evt) => {
+          if (evt.key === `Enter` || evt.key === ` `) focus_multiselect(evt)
+        }}
+        role="button"
+        tabindex="0"
+        style="cursor: pointer"
+      >Color scale</span>
       <ColorScaleSelect
         bind:value={color_scale}
         selected={[color_scale]}
@@ -187,9 +213,8 @@ 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">{
-              max_hull_dist_show_labels.toFixed(2)
-            } eV/atom</span>
+          <span style="white-space: nowrap">{max_hull_dist_show_labels.toFixed(2)}
+            eV/atom</span>
           <input
             type="range"
             min="0"
@@ -216,13 +241,15 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
         <span>Show</span>
       </label>
       <div style="display: flex; gap: 6px; align-items: center; flex: 1">
-        <input
-          type="color"
-          value={hull_face_color}
-          oninput={(e) => on_hull_face_color_change?.((e.target as HTMLInputElement).value)}
-          {@attach tooltip({ content: `Set hull face color` })}
-          style="width: 40px; height: 28px"
-        />
+        {#if hull_face_color_mode === `uniform`}
+          <input
+            type="color"
+            value={hull_face_color}
+            oninput={(e) => on_hull_face_color_change?.((e.target as HTMLInputElement).value)}
+            {@attach tooltip({ content: `Set hull face color` })}
+            style="width: 40px; height: 28px"
+          />
+        {/if}
         <input
           type="range"
           min="0"
@@ -235,11 +262,27 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
           class="threshold-slider"
           style="flex: 1; min-width: 80px"
         />
-        <span style="font-size: 0.75em; min-width: 2em; text-align: right">{
+        <span style="font-size: 0.9em; min-width: 2em; text-align: right">{
           format_num(hull_face_opacity, `.1%`)
         }</span>
       </div>
     </div>
+
+    <!-- Face color mode selector -->
+    <div class="control-row">
+      <span class="control-label">Face color</span>
+      <div class="face-color-mode-buttons">
+        {#each HULL_FACE_COLOR_MODES as mode (mode)}
+          <button
+            class="toggle-btn face-mode-btn {hull_face_color_mode === mode ? `active` : ``}"
+            onclick={() => on_hull_face_color_mode_change?.(mode)}
+            {@attach tooltip({ content: FACE_COLOR_MODES[mode].tip })}
+          >
+            {FACE_COLOR_MODES[mode].label}
+          </button>
+        {/each}
+      </div>
+    </div>
   {/if}
 
   {#if camera}
@@ -326,27 +369,24 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
 </DraggablePane>
 
 <style>
+  :global(.convex-hull-controls-pane) {
+    --pane-max-height: max(350px, calc(100cqh - 40px));
+    --pane-padding: 1ex;
+    --pane-gap: 0;
+    font-size: 0.85em;
+    pointer-events: auto;
+  }
   .control-row {
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-bottom: 12px;
-  }
-  /* Remove bottom margin from last element to prevent blank scrollable space */
-  :global(.convex-hull-controls-pane > :last-child) {
-    margin-bottom: 0;
+    margin-top: 12px;
   }
   .control-label {
     font-weight: 500;
     min-width: 80px;
   }
-  .color-mode-toggle {
-    display: flex;
-    gap: 4px;
-    flex: 1;
-  }
   button {
-    flex: 1;
     border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
   }
   .toggle-btn.active, .toggle-btn:hover.active {
@@ -389,8 +429,31 @@ let { color_mode = $bindable(`stability`), color_scale = $bindable(`interpolateV
     display: flex;
     gap: 12px;
     flex: 1;
+    margin-top: 12px;
   }
   .threshold-input {
     border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
   }
+  .face-color-mode-buttons {
+    display: flex;
+    gap: 4px;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+  .face-mode-btn {
+    padding: 2px 6px;
+    min-width: auto;
+    flex: 0 1 auto;
+  }
+  .color-scale-row {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    margin-top: 12px;
+  }
+  .color-scale-row :global(.multiselect) {
+    font-size: 0.85em;
+    --sms-min-height: 24px;
+  }
 </style>

package/dist/convex-hull/ConvexHullControls.svelte.d.ts

@@ -2,7 +2,7 @@ import type { D3InterpolateName } from '../colors';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullControlsType, ConvexHullEntry } from './types';
+import type { ConvexHullControlsType, ConvexHullEntry, HullFaceColorMode } from './types';
 interface CameraState {
     elevation?: number;
     azimuth?: number;
@@ -25,6 +25,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     on_hull_face_color_change?: (value: string) => void;
     hull_face_opacity?: number;
     on_hull_face_opacity_change?: (value: number) => void;
+    hull_face_color_mode?: HullFaceColorMode;
+    on_hull_face_color_mode_change?: (value: HullFaceColorMode) => void;
     energy_source_mode?: `precomputed` | `on-the-fly`;
     has_precomputed_hull?: boolean;
     can_compute_hull?: boolean;
@@ -41,6 +43,6 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
 };
-declare const ConvexHullControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "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" | "energy_source_mode">;
+declare const ConvexHullControls: import("svelte").Component<$$ComponentProps, {}, "color_scale" | "controls_open" | "hull_face_opacity" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "energy_source_mode">;
 type ConvexHullControls = ReturnType<typeof ConvexHullControls>;
 export default ConvexHullControls;