matterviz 0.4.1 → 0.4.2

package/dist/convex-hull/ConvexHull4D.svelte

@@ -29,12 +29,7 @@
   import TemperatureSlider from './TemperatureSlider.svelte'
   import type { Point4D } from './thermodynamics'
   import * as thermo from './thermodynamics'
-  import type {
-    ConvexHullEntry,
-    HighlightStyle,
-    HullFaceColorMode,
-    PhaseData,
-  } from './types'
+  import type { ConvexHullEntry, HighlightStyle, HullFaceColorMode, PhaseData } from './types'
   import { MAGNETIC_ORDERING_CATEGORY } from './types'
   import { compute_hull_stability } from './helpers'
 
@@ -61,9 +56,7 @@
     ),
     element_colors = vesta_hex,
     color_mode = $bindable(DEFAULTS.convex_hull.quaternary.color_mode),
-    color_scale = $bindable(
-      DEFAULTS.convex_hull.quaternary.color_scale as D3InterpolateName,
-    ),
+    color_scale = $bindable(DEFAULTS.convex_hull.quaternary.color_scale as D3InterpolateName),
     info_pane_open = $bindable(DEFAULTS.convex_hull.quaternary.info_pane_open),
     controls_open = $bindable(DEFAULTS.convex_hull.quaternary.legend_pane_open),
     max_hull_dist_show_phases = $bindable(
@@ -72,12 +65,8 @@
     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,
-    ),
+    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,
@@ -96,9 +85,10 @@
     children,
     tooltip,
     ...rest
-  }: BaseConvexHullProps<ConvexHullEntry> & Hull3DProps & {
-    highlight_style?: HighlightStyle
-  } = $props()
+  }: BaseConvexHullProps<ConvexHullEntry> &
+    Hull3DProps & {
+      highlight_style?: HighlightStyle
+    } = $props()
 
   const merged_controls = $derived({ ...default_controls, ...controls })
   const controls_config = $derived(normalize_show_controls(show_controls))
@@ -111,7 +101,7 @@
 
   // Reactive dark mode detection for canvas text color
   let dark_mode = $state(is_dark_mode())
-  $effect(() => watch_dark_mode((dark) => dark_mode = dark))
+  $effect(() => watch_dark_mode((dark) => (dark_mode = dark)))
   const text_color = $derived(helpers.get_canvas_text_color(dark_mode))
 
   // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
@@ -131,14 +121,11 @@
     show_unstable: () => show_unstable,
     entry_category: () => entry_category,
     hidden_categories: () => hidden_categories,
-    // Always include stable entries and elemental reference points
-    keep_plot_entry: (entry, max_dist) =>
-      helpers.entry_is_stable(entry) ||
-      (typeof entry.e_above_hull === `number` && entry.e_above_hull <= max_dist),
-    set_temperature: (next_temp) => temperature = next_temp,
-    set_max_hull_dist_show_phases: (value) => max_hull_dist_show_phases = value,
-    set_stable_entries: (value) => stable_entries = value,
-    set_unstable_entries: (value) => unstable_entries = value,
+    keep_plot_entry: helpers.entry_within_hull_dist,
+    set_temperature: (next_temp) => (temperature = next_temp),
+    set_max_hull_dist_show_phases: (value) => (max_hull_dist_show_phases = value),
+    set_stable_entries: (value) => (stable_entries = value),
+    set_unstable_entries: (value) => (unstable_entries = value),
   })
   const merged_gas_config = $derived(hull_data.merged_gas_config)
   const pd_data = $derived(hull_data.pd_data)
@@ -151,8 +138,9 @@
 
     try {
       // Get coords with formation energies, excluding entries that don't participate in hull
-      const coords = compute_4d_coords(pd_data.entries, elements)
-        .filter((ent) => !ent.exclude_from_hull)
+      const coords = compute_4d_coords(pd_data.entries, elements).filter(
+        (ent) => !ent.exclude_from_hull,
+      )
 
       // Convert to 4D points for hull computation using barycentric coordinates (composition fractions)
       const points_4d: Point4D[] = coords
@@ -192,22 +180,26 @@
         if (
           !Number.isFinite(entry.e_form_per_atom) ||
           ![entry.x, entry.y, entry.z].every(Number.isFinite)
-        ) return []
+        )
+          return []
         const amounts = elements.map((el) => entry.composition[el] || 0)
-          const total = amounts.reduce((sum, amt) => sum + amt, 0)
+        const total = amounts.reduce((sum, amt) => sum + amt, 0)
         if (!(total > 0)) return []
-          const [x, y, z] = amounts.map((amt) => amt / total)
+        const [x, y, z] = amounts.map((amt) => amt / total)
         return [x, y, z].every(Number.isFinite)
           ? [{ idx, pt: { x, y, z, w: entry.e_form_per_atom ?? NaN } }]
           : []
       })
-      const raw_dists = thermo.compute_e_above_hull_4d(valid.map((item) => item.pt), hull_4d)
+      const raw_dists = thermo.compute_e_above_hull_4d(
+        valid.map((item) => item.pt),
+        hull_4d,
+      )
       const hull_map = new Map(valid.map((item, hull_idx) => [item.idx, raw_dists[hull_idx]]))
-      return coords.map((entry, idx) => {
-        const raw = hull_map.get(idx)
-        if (raw === undefined) return { ...entry, e_above_hull: raw, is_stable: false }
-        return { ...entry, ...compute_hull_stability(raw, entry.exclude_from_hull) }
-      })
+      // missing/non-finite distance (no energy or point outside hull projection) -> unknown
+      return coords.map((entry, idx) => ({
+        ...entry,
+        ...compute_hull_stability(hull_map.get(idx), entry.exclude_from_hull),
+      }))
     } catch (err) {
       console.error(`Error computing quaternary coordinates:`, err)
       return []
@@ -234,12 +226,12 @@
     canvas: () => canvas,
     wrapper: () => wrapper,
     ctx: () => ctx,
-    set_ctx: (context) => ctx = context,
-    set_canvas_dims: (dims) => canvas_dims = dims,
+    set_ctx: (context) => (ctx = context),
+    set_canvas_dims: (dims) => (canvas_dims = dims),
     visible_entries: () => hull_data.visible_entries,
     plot_entries: () => plot_entries,
     selected_entry: () => selected_entry,
-    set_selected_entry: (entry) => selected_entry = entry,
+    set_selected_entry: (entry) => (selected_entry = entry),
     fullscreen: () => fullscreen,
     enable_click_selection: () => enable_click_selection,
     enable_structure_preview: () => enable_structure_preview,
@@ -248,7 +240,7 @@
     on_file_drop: () => on_file_drop,
     entry_category: () => entry_category,
     zoom: () => camera.zoom,
-    set_zoom: (zoom) => camera.zoom = zoom,
+    set_zoom: (zoom) => (camera.zoom = zoom),
     project_point: project_3d_point,
     extract_structure: extract_structure_from_entry,
     render_frame,
@@ -271,11 +263,11 @@
     },
     actions: () => ({
       r: reset_camera,
-      b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
-      s: () => show_stable = !show_stable,
-      u: () => show_unstable = !show_unstable,
-      h: () => show_hull_faces = !show_hull_faces,
-      l: () => show_stable_labels = !show_stable_labels,
+      b: () => (color_mode = color_mode === `stability` ? `energy` : `stability`),
+      s: () => (show_stable = !show_stable),
+      u: () => (show_unstable = !show_unstable),
+      h: () => (show_hull_faces = !show_hull_faces),
+      l: () => (show_stable_labels = !show_stable_labels),
     }),
   })
   const { render_once } = interactions
@@ -292,9 +284,7 @@
   let pulse_opacity = $derived(0.3 + 0.4 * pulse.unit)
 
   // Merge highlight style with defaults
-  const merged_highlight_style = $derived(
-    helpers.merge_highlight_style(highlight_style),
-  )
+  const merged_highlight_style = $derived(helpers.merge_highlight_style(highlight_style))
 
   // Helper to check if entry is highlighted
   const is_highlighted = (entry: ConvexHullEntry): boolean =>
@@ -347,8 +337,7 @@
     show_unstable_labels = DEFAULTS.convex_hull.quaternary.show_unstable_labels
     // Use auto-computed threshold based on entry count instead of static default
     max_hull_dist_show_phases = hull_data.auto_default_threshold
-    max_hull_dist_show_labels =
-      DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels
+    max_hull_dist_show_labels = DEFAULTS.convex_hull.quaternary.max_hull_dist_show_labels
     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
@@ -366,7 +355,7 @@
 
   // Cache energy color scale per frame/setting
   const energy_color_scale = $derived.by(() =>
-    helpers.get_energy_color_scale(color_mode, color_scale, plot_entries)
+    helpers.get_energy_color_scale(color_mode, color_scale, plot_entries),
   )
 
   // Convex hull statistics - compute internally and expose via bindable prop
@@ -527,30 +516,10 @@
       const [p0, p1, p2, p3] = tet.vertices
 
       // Convert barycentric coordinates to tetrahedral 3D coordinates
-      const tet0 = barycentric_to_tetrahedral([
-        p0.x,
-        p0.y,
-        p0.z,
-        1 - p0.x - p0.y - p0.z,
-      ])
-      const tet1 = barycentric_to_tetrahedral([
-        p1.x,
-        p1.y,
-        p1.z,
-        1 - p1.x - p1.y - p1.z,
-      ])
-      const tet2 = barycentric_to_tetrahedral([
-        p2.x,
-        p2.y,
-        p2.z,
-        1 - p2.x - p2.y - p2.z,
-      ])
-      const tet3 = barycentric_to_tetrahedral([
-        p3.x,
-        p3.y,
-        p3.z,
-        1 - p3.x - p3.y - p3.z,
-      ])
+      const tet0 = barycentric_to_tetrahedral([p0.x, p0.y, p0.z, 1 - p0.x - p0.y - p0.z])
+      const tet1 = barycentric_to_tetrahedral([p1.x, p1.y, p1.z, 1 - p1.x - p1.y - p1.z])
+      const tet2 = barycentric_to_tetrahedral([p2.x, p2.y, p2.z, 1 - p2.x - p2.y - p2.z])
+      const tet3 = barycentric_to_tetrahedral([p3.x, p3.y, p3.z, 1 - p3.x - p3.y - p3.z])
 
       // Project to 2D screen space
       const proj0 = project_3d_point(tet0.x, tet0.y, tet0.z)
@@ -564,8 +533,14 @@
         (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,
+        (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
@@ -607,7 +582,7 @@
     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)
+      min_w = helpers.array_min(all_avg_w)
       energy_face_scale = helpers.get_energy_color_scale(
         `energy`,
         color_scale,
@@ -625,7 +600,7 @@
       }
       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 max_idx = tri.centroid_bary.indexOf(helpers.array_max(tri.centroid_bary))
         const el = elements[max_idx]
         return element_colors[el] ?? `#888888`
       }
@@ -639,9 +614,10 @@
     for (const tri of triangles) {
       const [v0, v1, v2] = tri.vertices
       // 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)
-        : hull_face_opacity
+      const alpha =
+        hull_face_color_mode === `uniform`
+          ? (norm_alpha?.(tri.avg_w) ?? hull_face_opacity)
+          : hull_face_opacity
       const face_color = get_face_color(tri)
 
       ctx.save()
@@ -683,9 +659,12 @@
         .filter((entry) => {
           if (entry.is_element) return false
           const is_stable = helpers.entry_is_stable(entry)
-          return (is_stable && show_stable_labels) ||
-            (!is_stable && show_unstable_labels &&
+          return (
+            (is_stable && show_stable_labels) ||
+            (!is_stable &&
+              show_unstable_labels &&
               (entry.e_above_hull ?? 0) <= max_hull_dist_show_labels)
+          )
         }),
     )
 
@@ -761,7 +740,7 @@
 
 <div
   {...rest}
-  class="convex-hull-4d {rest.class ?? ``}"
+  class={[`convex-hull-4d`, rest.class]}
   class:dragover={interactions.drag_over}
   style={`${style}; ${rest.style ?? ``}`}
   data-has-selection={selected_entry !== null}
@@ -776,11 +755,11 @@
   aria-label="Convex hull visualization"
 >
   {@render children?.({
-      stable_entries,
-      unstable_entries,
-      highlighted_entries,
-      selected_entry,
-    })}
+    stable_entries,
+    unstable_entries,
+    highlighted_entries,
+    selected_entry,
+  })}
   <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0">
     {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
   </h3>
@@ -853,7 +832,10 @@
   />
 
   {#if hull_data.has_temp_data && temperature !== undefined}
-    <TemperatureSlider available_temperatures={hull_data.available_temperatures} bind:temperature />
+    <TemperatureSlider
+      available_temperatures={hull_data.available_temperatures}
+      bind:temperature
+    />
   {/if}
 
   {#if hull_data.gas_analysis.has_gas_dependent_elements && merged_gas_config}
@@ -863,7 +845,6 @@
       temperature={temperature ?? 300}
     />
   {/if}
-
 </div>
 
 <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" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "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" | "hidden_categories" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull4D: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "temperature" | "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" | "hidden_categories" | "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/ConvexHullChrome.svelte

@@ -59,32 +59,30 @@
     max_hull_dist_show_phases = $bindable(0),
     max_hull_dist_show_labels = $bindable(0.1),
     energy_source_mode = $bindable(`precomputed`),
-  }:
-    & Pick<
-      ControlsProps,
-      | `camera`
-      | `merged_controls`
-      | `stable_entries`
-      | `unstable_entries`
-      | `color_mode`
-      | `color_scale`
-      | `show_stable`
-      | `show_unstable`
-      | `entry_category`
-      | `hidden_categories`
-      | `show_stable_labels`
-      | `show_unstable_labels`
-      | `max_hull_dist_show_phases`
-      | `max_hull_dist_show_labels`
-      | `energy_source_mode`
-      | `controls_open`
-      | `show_hull_faces`
-      | `hull_face_color`
-      | `hull_face_opacity`
-      | `hull_face_color_mode`
-    >
-    & Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`>
-    & {
+  }: Pick<
+    ControlsProps,
+    | `camera`
+    | `merged_controls`
+    | `stable_entries`
+    | `unstable_entries`
+    | `color_mode`
+    | `color_scale`
+    | `show_stable`
+    | `show_unstable`
+    | `entry_category`
+    | `hidden_categories`
+    | `show_stable_labels`
+    | `show_unstable_labels`
+    | `max_hull_dist_show_phases`
+    | `max_hull_dist_show_labels`
+    | `energy_source_mode`
+    | `controls_open`
+    | `show_hull_faces`
+    | `hull_face_color`
+    | `hull_face_opacity`
+    | `hull_face_color_mode`
+  > &
+    Pick<ComponentProps<typeof ConvexHullInfoPane>, `phase_stats` | `label_threshold`> & {
       interactions: ReturnType<typeof create_canvas_interactions>
       hull_data: ReturnType<typeof create_hull_data_pipeline<ConvexHullEntry>>
       controls_config: ShowControlsState
@@ -107,12 +105,7 @@
 {#if controls_config.mode !== `never`}
   <section class="control-buttons {controls_config.class}">
     {#if controls_config.visible(`reset`)}
-      <button
-        type="button"
-        onclick={reset_all}
-        title={reset_title}
-        class="reset-camera-btn"
-      >
+      <button type="button" onclick={reset_all} title={reset_title} class="reset-camera-btn">
         <Icon icon="Reset" />
       </button>
     {/if}
@@ -159,14 +152,14 @@
         {merged_controls}
         toggle_props={{ class: `legend-controls-btn` }}
         {show_hull_faces}
-        on_hull_faces_change={(value: boolean) => show_hull_faces = value}
+        on_hull_faces_change={(value: boolean) => (show_hull_faces = value)}
         {hull_face_color}
-        on_hull_face_color_change={(value: string) => hull_face_color = value}
+        on_hull_face_color_change={(value: string) => (hull_face_color = value)}
         {hull_face_opacity}
-        on_hull_face_opacity_change={(value: number) => hull_face_opacity = value}
+        on_hull_face_opacity_change={(value: number) => (hull_face_opacity = value)}
         {hull_face_color_mode}
         on_hull_face_color_mode_change={(value: HullFaceColorMode) =>
-        hull_face_color_mode = value}
+          (hull_face_color_mode = value)}
         bind:energy_source_mode
         has_precomputed_e_form={hull_data.has_precomputed_e_form}
         can_compute_e_form={hull_data.can_compute_e_form}
@@ -181,8 +174,7 @@
 {#if interactions.hover_data}
   {@const { entry, position } = interactions.hover_data}
   {@const entry_highlight = is_highlighted(entry) ? merged_highlight_style : undefined}
-  {@const tooltip_style =
-    `z-index: ${CONVEX_HULL_STYLE.z_index.tooltip}; backdrop-filter: blur(4px);
+  {@const tooltip_style = `z-index: ${CONVEX_HULL_STYLE.z_index.tooltip}; backdrop-filter: blur(4px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);`}
   <PlotTooltip
     x={position.x}
@@ -209,7 +201,11 @@
 />
 
 <!-- z-index 1: above auto-stacked siblings after the chrome (3D gizmo, gas controls), below z-2 sliders -->
-<DragOverlay visible={interactions.drag_over} style="z-index: 1" />
+<DragOverlay
+  visible={interactions.drag_over}
+  message="Drop JSON file to load phase diagram data"
+  style="z-index: 1"
+/>
 
 {#if interactions.modal_open && interactions.selected_structure}
   <StructurePopup
@@ -260,7 +256,7 @@
     color: var(--text-color, currentColor);
     transition: background-color 0.2s;
     display: flex;
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
   }
   .control-buttons :global(button):hover {
     background-color: color-mix(in srgb, currentColor 8%, transparent);