matterviz 0.4.0 → 0.4.2

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

@@ -1,11 +1,13 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullEntry, PhaseStats } from './types';
+import type { ConvexHullEntry, EntryCategoryConfig, PhaseStats } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     phase_stats: PhaseStats | null;
     stable_entries: ConvexHullEntry[];
     unstable_entries: ConvexHullEntry[];
     show_stable?: boolean;
     show_unstable?: boolean;
+    entry_category?: EntryCategoryConfig | null;
+    hidden_categories?: string[];
     layout?: `toggle` | `side-by-side`;
     on_entry_click?: (entry: ConvexHullEntry) => void;
     highlighted_entry_id?: string;

package/dist/convex-hull/ConvexHullTooltip.svelte

@@ -7,35 +7,35 @@
   import { TooltipContent } from '../tooltip'
   import type { PolymorphStats } from './helpers'
   import type { ConvexHullTooltipProp, TooltipSnippetProps } from './index'
-  import type { HighlightStyle, PhaseData } from './types'
-  import { is_unary_entry } from './helpers'
+  import type { EntryCategoryConfig, HighlightStyle, PhaseData } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
+  import { get_entry_category, is_unary_entry } from './helpers'
 
   let {
     entry,
     polymorph_stats_map,
     highlight_style,
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
     tooltip,
     show_fractional = true,
   }: {
     entry: EntryT
     polymorph_stats_map?: Map<string, PolymorphStats>
     highlight_style?: HighlightStyle
+    entry_category?: EntryCategoryConfig | null
     tooltip?: ConvexHullTooltipProp<EntryT>
     show_fractional?: boolean
   } = $props()
 
   const is_element = $derived(is_unary_entry(entry))
   const elem_symbol = $derived(
-    is_element
-      ? (Object.entries(entry.composition).find(([, n]) => n > 0)?.[0] ?? ``)
-      : ``,
+    is_element ? (Object.entries(entry.composition).find(([, n]) => n > 0)?.[0] ?? ``) : ``,
   ) as ElementSymbol | ``
   const elem_name = $derived(elem_symbol && ELEM_SYMBOL_TO_NAME[elem_symbol])
   const polymorph_stats = $derived(
-    entry.entry_id && polymorph_stats_map
-      ? polymorph_stats_map.get(entry.entry_id)
-      : null,
+    entry.entry_id && polymorph_stats_map ? polymorph_stats_map.get(entry.entry_id) : null,
   )
+  const category_value = $derived(get_entry_category(entry, entry_category))
 </script>
 
 <TooltipContent
@@ -69,16 +69,18 @@
     {#if entry.e_form_per_atom != null}
       <div>E<sub>form</sub>: {format_num(entry.e_form_per_atom, `.3~`)} eV/atom</div>
     {/if}
+    {#if entry_category && category_value}
+      <div title={entry_category.labels?.[category_value]}>
+        {entry_category.label}: {category_value}
+      </div>
+    {/if}
 
     {#if show_fractional && !is_element}
-      {@const total = Object.values(entry.composition).reduce(
-        (sum, amt) => sum + amt,
-        0,
-      )}
+      {@const total = Object.values(entry.composition).reduce((sum, amt) => sum + amt, 0)}
       {#if total > 0}
         {@const fractions = Object.entries(entry.composition)
-        .filter(([, amt]) => amt > 0)
-        .map(([el, amt]) => `${el}<sub>${format_num(amt / total, `.2~`)}</sub>`)}
+          .filter(([, amt]) => amt > 0)
+          .map(([el, amt]) => `${el}<sub>${format_num(amt / total, `.2~`)}</sub>`)}
         {#if fractions.length > 1}
           <div>Fractional: {@html sanitize_html(fractions.join(` `))}</div>
         {/if}

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

@@ -1,11 +1,12 @@
 import type { PolymorphStats } from './helpers';
 import type { ConvexHullTooltipProp } from './index';
-import type { HighlightStyle, PhaseData } from './types';
+import type { EntryCategoryConfig, HighlightStyle, PhaseData } from './types';
 declare function $$render<EntryT extends PhaseData = PhaseData>(): {
     props: {
         entry: EntryT;
         polymorph_stats_map?: Map<string, PolymorphStats>;
         highlight_style?: HighlightStyle;
+        entry_category?: EntryCategoryConfig | null;
         tooltip?: ConvexHullTooltipProp<EntryT>;
         show_fractional?: boolean;
     };

package/dist/convex-hull/GasPressureControls.svelte

@@ -59,8 +59,7 @@
 
   // Convert pressure to log scale slider position (0-100)
   const pressure_to_slider = (P: number): number =>
-    ((Math.max(LOG_P_MIN, Math.min(LOG_P_MAX, Math.log10(P))) - LOG_P_MIN) /
-      LOG_P_RANGE) * 100
+    ((Math.max(LOG_P_MIN, Math.min(LOG_P_MAX, Math.log10(P))) - LOG_P_MIN) / LOG_P_RANGE) * 100
 
   // Convert slider position (0-100) to pressure
   const slider_to_pressure = (value: number): number =>
@@ -68,7 +67,7 @@
 
   // Format gas name for display (subscript numbers)
   const format_gas_name = (gas: GasSpecies): string =>
-    gas.replaceAll(/(\d+)/g, `<sub>$1</sub>`)
+    gas.replaceAll(/(?<digits>\d+)/g, `<sub>$1</sub>`)
 
   // Format pressure as plain text (no HTML) for the number input
   function format_pressure(P: number): string {
@@ -102,24 +101,18 @@
   }
 
   function set_pressure_direct(gas: GasSpecies, value: number): void {
-    const clamped = Math.max(
-      10 ** LOG_P_MIN,
-      Math.min(10 ** LOG_P_MAX, value),
-    )
+    const clamped = Math.max(10 ** LOG_P_MIN, Math.min(10 ** LOG_P_MAX, value))
     pressures = { ...pressures, [gas]: clamped }
   }
 </script>
 
 {#if enabled_gases.length > 0}
-  <div {...rest} class="pressure-controls {position} {rest.class ?? ``}">
+  <div {...rest} class={[`pressure-controls`, position, rest.class]}>
     {#each enabled_gases as gas (gas)}
       {@const P = get_pressure(gas)}
       {@const mu = get_mu(gas)}
       {@const tooltip_content = `${gas} partial pressure for μ(T,P)\nμ = ${format_chemical_potential(mu, 3)}`}
-      <div
-        class="pressure-slider"
-        {@attach tooltip({ content: tooltip_content })}
-      >
+      <div class="pressure-slider" {@attach tooltip({ content: tooltip_content })}>
         <label class="pressure-label">
           <input
             type="text"

package/dist/convex-hull/StructurePopup.svelte

@@ -3,7 +3,7 @@
   import { get_electro_neg_formula } from '../composition'
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
-  import { DragControlTab } from '../overlays'
+  import { DragControlTab, GlassChip } from '../overlays'
   import { sanitize_formula } from '../sanitize'
   import { Structure } from '../structure'
   import type { StructurePopupContext, StructurePopupStats } from './types'
@@ -17,6 +17,8 @@
     width = 500,
     height = 400,
     onclose,
+    close_on_outside = true,
+    show_drag_handle = true,
     stats,
     top_left,
     children,
@@ -28,6 +30,8 @@
     width?: number
     height?: number
     onclose?: () => void
+    close_on_outside?: boolean
+    show_drag_handle?: boolean
     stats?: StructurePopupStats
     top_left?: Snippet<[StructurePopupContext]>
     children?: Snippet<[StructurePopupContext]>
@@ -35,7 +39,8 @@
   } = $props()
 
   const formula_html = $derived.by(() =>
-    sanitize_formula(get_electro_neg_formula(stats?.formula ?? structure, true)))
+    sanitize_formula(get_electro_neg_formula(stats?.formula ?? structure, true)),
+  )
   const context = $derived({ structure, stats, formula_html })
 </script>
 
@@ -48,6 +53,7 @@
 <svelte:window
   onkeydown={(event) => event.key === `Escape` && onclose?.()}
   onmousedown={(event) => {
+    if (!close_on_outside) return
     if (!popup_div || !(event.target instanceof Node)) return
     if (!popup_div.contains(event.target)) onclose?.()
   }}
@@ -58,34 +64,36 @@
     handle_selector: `.drag-handle`,
   })}
   {...rest}
-  class="structure-popup {place_right ? `right` : `left`} {rest.class ?? ``}"
+  class={[`structure-popup`, place_right ? `right` : `left`, rest.class]}
   role="dialog"
   aria-modal="true"
   tabindex="-1"
   bind:this={popup_div}
 >
-  <DragControlTab />
+  {#if show_drag_handle}
+    <DragControlTab />
+  {/if}
   <div class="structure-popup-content">
     {#if top_left || stats}
-      <div class="structure-stats">
+      <GlassChip class="structure-stats">
         {#if top_left}
           {@render top_left(context)}
         {:else if stats}
           {#if stats.id}
-            ID = {stats.id}<br>
+            ID = {stats.id}<br />
           {/if}
           {#if formula_html}
-            {@html formula_html}<br>
+            {@html formula_html}<br />
           {/if}
           {#if stats.e_above_hull != null}
-            E<sub>above hull</sub> = {format_num(stats.e_above_hull, `.3~`)} eV/atom<br>
+            E<sub>above hull</sub> = {format_num(stats.e_above_hull, `.3~`)} eV/atom<br />
           {/if}
           {#if stats.e_form != null}
             E<sub>form</sub> = {format_num(stats.e_form, `.3~`)}
             eV/atom
           {/if}
         {/if}
-      </div>
+      </GlassChip>
     {/if}
 
     <Structure
@@ -136,16 +144,4 @@
   .close-btn:hover {
     background: var(--pane-btn-bg-hover);
   }
-  .structure-stats {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    background: transparent;
-    backdrop-filter: blur(8px);
-    color: var(--text-color);
-    padding: 4px 8px;
-    border-radius: 6px;
-    font-size: 0.85em;
-    z-index: 2;
-  }
 </style>

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

@@ -8,6 +8,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     width?: number;
     height?: number;
     onclose?: () => void;
+    close_on_outside?: boolean;
+    show_drag_handle?: boolean;
     stats?: StructurePopupStats;
     top_left?: Snippet<[StructurePopupContext]>;
     children?: Snippet<[StructurePopupContext]>;

package/dist/convex-hull/TemperatureSlider.svelte

@@ -16,15 +16,11 @@
   let last_update_time = 0
   const THROTTLE_MS = 100
 
-  const temp_index = $derived(
-    Math.max(0, available_temperatures.indexOf(temperature)),
-  )
+  const temp_index = $derived(Math.max(0, available_temperatures.indexOf(temperature)))
   const display_index = $derived(preview_index ?? temp_index)
   const display_temp = $derived(available_temperatures[display_index] ?? temperature)
 
-  function handle_slider_input(
-    event: Event & { currentTarget: HTMLInputElement },
-  ): void {
+  function handle_slider_input(event: Event & { currentTarget: HTMLInputElement }): void {
     const new_index = Number(event.currentTarget.value)
     preview_index = new_index
     // Throttle parent updates during drag to prevent scene flashing
@@ -35,9 +31,7 @@
     }
   }
 
-  function handle_slider_end(
-    event: Event & { currentTarget: HTMLInputElement },
-  ): void {
+  function handle_slider_end(event: Event & { currentTarget: HTMLInputElement }): void {
     const new_temp = available_temperatures[Number(event.currentTarget.value)]
     if (new_temp !== undefined) temperature = new_temp
     preview_index = null
@@ -53,7 +47,7 @@
 
 <div
   {...rest}
-  class="temperature-slider {rest.class ?? ``}"
+  class={[`temperature-slider`, rest.class]}
   {@attach tooltip({ content: `Temperature for G(T) free energies` })}
 >
   <label class="temp-label">

package/dist/convex-hull/barycentric-coords.d.ts

@@ -1,13 +1,11 @@
 import type { ElementSymbol } from '../element';
-import type { Point3D, Vec3 } from '../math';
+import type { Point3D, Vec2, Vec3 } from '../math';
 import type { ConvexHullEntry, PhaseData } from './types';
 export declare const TRIANGLE_VERTICES: readonly [readonly [1, 0], readonly [0.5, number], readonly [0, 0]];
 export declare function composition_to_barycentric_3d(composition: Record<string, number>, elements: ElementSymbol[]): Vec3;
-export declare function barycentric_to_ternary_xy(barycentric: Vec3): [number, number];
+export declare function barycentric_to_ternary_xy(barycentric: Vec3): Vec2;
 export declare function barycentric_to_ternary_xyz(barycentric: Vec3, formation_energy: number): Point3D;
 export declare function get_triangle_centroid(): Point3D;
-export declare function calculate_face_normal(p1: Point3D, p2: Point3D, p3: Point3D): Point3D;
-export declare const calculate_face_centroid: (p1: Point3D, p2: Point3D, p3: Point3D) => Point3D;
 export declare function get_ternary_3d_coordinates(entries: PhaseData[], elements: ElementSymbol[], el_refs?: Record<string, PhaseData>): ConvexHullEntry[];
 export declare function get_triangle_edges(): [Point3D, Point3D][];
 export declare function get_triangle_vertical_edges(min_z: number, max_z: number): [Point3D, Point3D][];

package/dist/convex-hull/barycentric-coords.js

@@ -10,13 +10,7 @@ export function composition_to_barycentric_3d(composition, elements) {
     if (elements.length !== 3) {
         throw new Error(`Ternary system requires exactly 3 elements, got ${elements.length}`);
     }
-    const amounts = elements.map((el) => composition[el] || 0);
-    const total = amounts.reduce((sum, amt) => sum + amt, 0);
-    if (total === 0) {
-        throw new Error(`Composition has no elements from the ternary system: ${elements.join(`-`)}`);
-    }
-    const normalized = amounts.map((amount) => amount / total);
-    return [normalized[0], normalized[1], normalized[2]];
+    return composition_to_barycentric_nd(composition, elements);
 }
 // map barycentric coordinates to triangular 2D coordinates
 export function barycentric_to_ternary_xy(barycentric) {
@@ -37,22 +31,6 @@ export function get_triangle_centroid() {
     const centroid_y = (v0[1] + v1[1] + v2[1]) / 3;
     return { x: centroid_x, y: centroid_y, z: 0 };
 }
-export function calculate_face_normal(p1, p2, p3) {
-    const edge1 = { x: p2.x - p1.x, y: p2.y - p1.y, z: p2.z - p1.z };
-    const edge2 = { x: p3.x - p1.x, y: p3.y - p1.y, z: p3.z - p1.z };
-    const nx = edge1.y * edge2.z - edge1.z * edge2.y;
-    const ny = edge1.z * edge2.x - edge1.x * edge2.z;
-    const nz = edge1.x * edge2.y - edge1.y * edge2.x;
-    const magnitude = Math.hypot(nx, ny, nz);
-    if (magnitude === 0)
-        return { x: 0, y: 0, z: 1 };
-    return { x: nx / magnitude, y: ny / magnitude, z: nz / magnitude };
-}
-export const calculate_face_centroid = (p1, p2, p3) => ({
-    x: (p1.x + p2.x + p3.x) / 3,
-    y: (p1.y + p2.y + p3.y) / 3,
-    z: (p1.z + p2.z + p3.z) / 3,
-});
 export function get_ternary_3d_coordinates(entries, elements, el_refs) {
     if (elements.length !== 3) {
         throw new Error(`Ternary convex hull requires exactly 3 elements, got ${elements.length}`);
@@ -105,14 +83,14 @@ export function get_triangle_vertical_edges(min_z, max_z) {
         { ...vertex, z: max_z },
     ]);
 }
-// --- N-dimensional barycentric coordinates (for 5+ element systems) ---
+// --- N-dimensional barycentric coordinates (the 3D/4D converters wrap this) ---
 // Convert composition to N-dimensional barycentric coordinates
 // Returns array of length N where coords sum to 1 (all N coords are explicit)
 // The last coordinate represents formation energy when used in hull calculations
 export function composition_to_barycentric_nd(composition, elements) {
-    const n = elements.length;
-    if (n < 2) {
-        throw new Error(`Barycentric coordinates require at least 2 elements, got ${n}`);
+    const n_elems = elements.length;
+    if (n_elems < 2) {
+        throw new Error(`Barycentric coordinates require at least 2 elements, got ${n_elems}`);
     }
     // NaN and undefined/missing elements are treated as 0
     const amounts = elements.map((el) => {
@@ -146,12 +124,7 @@ export function composition_to_barycentric_4d(composition, elements) {
     if (elements.length !== 4) {
         throw new Error(`Quaternary barycentric coordinates require exactly 4 elements`);
     }
-    const amounts = elements.map((el) => composition[el] || 0);
-    const total = amounts.reduce((sum, amount) => sum + amount, 0);
-    if (total === 0) {
-        throw new Error(`Composition has no elements from the quaternary system: ${elements.join(`-`)}`);
-    }
-    return amounts.map((amount) => amount / total);
+    return composition_to_barycentric_nd(composition, elements);
 }
 // map barycentric coordinates to tetrahedral 3D coordinates
 export function barycentric_to_tetrahedral(barycentric) {

package/dist/convex-hull/canvas-interactions.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { AnyStructure } from '../structure';
+import type { ConvexHullEntry, EntryCategoryConfig, HoverData3D, PhaseData } from './types';
+export interface CanvasInteractionInputs {
+    wheel_clamp: [min: number, max: number];
+    fullscreen_bg_var: string;
+    canvas: () => HTMLCanvasElement | undefined;
+    wrapper: () => HTMLDivElement | undefined;
+    ctx: () => CanvasRenderingContext2D | null;
+    set_ctx: (ctx: CanvasRenderingContext2D | null) => void;
+    set_canvas_dims: (dims: {
+        width: number;
+        height: number;
+        scale: number;
+    }) => void;
+    visible_entries: () => ConvexHullEntry[];
+    plot_entries: () => ConvexHullEntry[];
+    selected_entry: () => ConvexHullEntry | null;
+    set_selected_entry: (entry: ConvexHullEntry | null) => void;
+    fullscreen: () => boolean;
+    enable_click_selection: () => boolean;
+    enable_structure_preview: () => boolean;
+    on_point_click: () => ((entry: ConvexHullEntry) => void) | undefined;
+    on_point_hover: () => ((data: HoverData3D | null) => void) | undefined;
+    on_file_drop: () => ((entries: PhaseData[]) => void) | undefined;
+    entry_category: () => EntryCategoryConfig | null;
+    zoom: () => number;
+    set_zoom: (zoom: number) => void;
+    project_point: (x: number, y: number, z: number) => {
+        x: number;
+        y: number;
+        depth: number;
+    };
+    extract_structure: (entry: ConvexHullEntry) => AnyStructure | null;
+    render_frame: () => void;
+    on_drag: (dx: number, dy: number, panning: boolean) => void;
+    on_fullscreen_change: () => void;
+    actions: () => Record<string, () => void>;
+}
+export declare function create_canvas_interactions(inputs: CanvasInteractionInputs): {
+    readonly is_dragging: boolean;
+    readonly hover_data: HoverData3D<ConvexHullEntry> | null;
+    readonly drag_over: boolean;
+    readonly modal_open: boolean;
+    readonly selected_structure: AnyStructure | null;
+    readonly modal_place_right: boolean;
+    readonly sorted_points_cache: {
+        entry: ConvexHullEntry;
+        projected: {
+            x: number;
+            y: number;
+            depth: number;
+        };
+    }[];
+    copy_feedback: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+    };
+    canvas_handlers: {
+        onmousedown: (event: MouseEvent) => void;
+        onmousemove: (event: MouseEvent) => void;
+        onclick: (event: MouseEvent) => void;
+        onkeydown: (event: KeyboardEvent) => void;
+        ondblclick: (event: MouseEvent) => void;
+        onwheel: (event: WheelEvent) => void;
+    };
+    wrapper_handlers: {
+        onkeydown: (event: KeyboardEvent) => void;
+        ondrop: (event: DragEvent) => Promise<void>;
+        ondragover: (event: DragEvent) => void;
+        ondragleave: (event: DragEvent) => void;
+    };
+    handle_mouse_move: (event: MouseEvent) => void;
+    handle_mouse_up: () => void;
+    close_structure_popup: () => void;
+    render_once: () => void;
+};