matterviz 0.3.5 → 0.3.7

package/dist/convex-hull/ConvexHullControls.svelte

@@ -110,9 +110,10 @@
   } = $props()
 
   // Focus the multiselect input next to the "Color scale" label
-  function focus_multiselect(evt: Event): void {
-    ;(evt.currentTarget as HTMLElement).nextElementSibling
-      ?.querySelector<HTMLInputElement>(`input`)?.focus()
+  function focus_multiselect(
+    evt: Event & { currentTarget: HTMLElement },
+  ): void {
+    evt.currentTarget.nextElementSibling?.querySelector<HTMLInputElement>(`input`)?.focus()
   }
 </script>
 
@@ -145,6 +146,7 @@
         class="toggle-btn {energy_source_mode === `precomputed` ? `active` : ``}"
         onclick={() => energy_source_mode = `precomputed`}
         {@attach tooltip({
+          allow_html: true,
           content: `Use precomputed formation energies (E<sub>form</sub>)`,
         })}
       >
@@ -154,6 +156,7 @@
         class="toggle-btn {energy_source_mode === `on-the-fly` ? `active` : ``}"
         onclick={() => energy_source_mode = `on-the-fly`}
         {@attach tooltip({
+          allow_html: true,
           content:
             `Compute formation energies and hull distances on the fly. Note: Missing pure-element reference entries default to E<sub>form</sub> = 0 eV/atom if not provided explicitly.`,
         })}
@@ -239,9 +242,7 @@
           <div class="marker unstable"></div>
           <span>Above hull{
               merged_controls.show_counts
-              ? ` (${
-                unstable_entries.filter((e) => e.visible).length
-              }/${unstable_entries.length})`
+              ? ` (${show_unstable ? unstable_entries.length : 0}/${unstable_entries.length})`
               : ``
             }</span>
         </div>
@@ -277,9 +278,7 @@
           <input
             type="checkbox"
             checked={show_stable_labels}
-            oninput={(
-              evt,
-            ) => (show_stable_labels = (evt.target as HTMLInputElement).checked)}
+            oninput={(evt) => (show_stable_labels = evt.currentTarget.checked)}
           />
           <span>Stable</span>
         </label>
@@ -287,10 +286,7 @@
           <input
             type="checkbox"
             checked={show_unstable_labels}
-            oninput={(
-              evt,
-            ) => (show_unstable_labels =
-              (evt.target as HTMLInputElement).checked)}
+            oninput={(evt) => (show_unstable_labels = evt.currentTarget.checked)}
           />
           <span>Unstable</span>
         </label>
@@ -327,7 +323,7 @@
         <input
           type="checkbox"
           checked={show_hull_faces}
-          oninput={(e) => on_hull_faces_change?.((e.target as HTMLInputElement).checked)}
+          oninput={(event) => on_hull_faces_change?.(event.currentTarget.checked)}
         />
         <span>Show</span>
       </label>
@@ -336,7 +332,7 @@
           <input
             type="color"
             value={hull_face_color}
-            oninput={(e) => on_hull_face_color_change?.((e.target as HTMLInputElement).value)}
+            oninput={(event) => on_hull_face_color_change?.(event.currentTarget.value)}
             {@attach tooltip({ content: `Set hull face color` })}
             style="width: 40px; height: 20px"
           />
@@ -383,20 +379,16 @@
         <!-- Ternary camera controls (elevation/azimuth) -->
         <label
           class="angle-input"
-          {@attach tooltip({
-            content:
-              `Elevation angle (0° = look down z-axis, 90° = side view, 180° = look up z-axis)`,
-          })}
+          {@attach tooltip({ content: `Elevation angle (0° = look down z-axis, 90° = side view, 180° = look up z-axis)` })}
         >
           <span>Elev</span>
           <input
             type="number"
             value={camera.elevation.toFixed(0)}
             step="5"
-            oninput={(e) =>
-            camera.elevation = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
+            oninput={(event) => {
+              camera.elevation = parseFloat(event.currentTarget.value)
+            }}
             style="width: 3em"
           />
           <span>°</span>
@@ -410,10 +402,9 @@
             type="number"
             value={camera.azimuth.toFixed(0)}
             step="15"
-            oninput={(e) =>
-            camera.azimuth = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
+            oninput={(event) => {
+              camera.azimuth = parseFloat(event.currentTarget.value)
+            }}
             style="width: 3em"
           />
           <span>°</span>
@@ -431,10 +422,9 @@
             step="0.1"
             min={-Math.PI / 3}
             max={Math.PI / 3}
-            oninput={(e) =>
-            camera.rotation_x = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
+            oninput={(event) => {
+              camera.rotation_x = parseFloat(event.currentTarget.value)
+            }}
             style="width: 3em"
           />
         </label>
@@ -447,10 +437,9 @@
             type="number"
             value={(camera.rotation_y ?? 0).toFixed(2)}
             step="0.1"
-            oninput={(e) =>
-            camera.rotation_y = parseFloat(
-              (e.target as HTMLInputElement).value,
-            )}
+            oninput={(event) => {
+              camera.rotation_y = parseFloat(event.currentTarget.value)
+            }}
             style="width: 3em"
           />
         </label>

package/dist/convex-hull/ConvexHullInfoPane.svelte

@@ -23,6 +23,8 @@
     phase_stats,
     stable_entries,
     unstable_entries,
+    show_stable = true,
+    show_unstable = true,
     max_hull_dist_show_phases,
     max_hull_dist_show_labels,
     label_threshold,
@@ -34,6 +36,8 @@
     phase_stats: PhaseStats | null
     stable_entries: ConvexHullEntry[]
     unstable_entries: ConvexHullEntry[]
+    show_stable?: boolean
+    show_unstable?: boolean
     max_hull_dist_show_phases: number
     max_hull_dist_show_labels: number
     label_threshold: number
@@ -42,18 +46,15 @@
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
   } = $props()
 
-  const count_visible = (entries: ConvexHullEntry[]): number =>
-    entries.reduce((count, entry) => count + Number(entry.visible), 0)
-
   let settings_rows = $derived([
     {
       label: `Visible stable`,
-      value: `${count_visible(stable_entries)} / ${stable_entries.length}`,
+      value: `${show_stable ? stable_entries.length : 0} / ${stable_entries.length}`,
       key: `hull-visible-stable`,
     },
     {
       label: `Visible unstable`,
-      value: `${count_visible(unstable_entries)} / ${unstable_entries.length}`,
+      value: `${show_unstable ? unstable_entries.length : 0} / ${unstable_entries.length}`,
       key: `hull-visible-unstable`,
     },
     {
@@ -108,6 +109,8 @@
     {phase_stats}
     {stable_entries}
     {unstable_entries}
+    {show_stable}
+    {show_unstable}
     style="padding: 3pt; background: var(--pane-bg); --hull-stats-table-height: 30rem"
   />
 

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

@@ -6,6 +6,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclose`> & {
     phase_stats: PhaseStats | null;
     stable_entries: ConvexHullEntry[];
     unstable_entries: ConvexHullEntry[];
+    show_stable?: boolean;
+    show_unstable?: boolean;
     max_hull_dist_show_phases: number;
     max_hull_dist_show_labels: number;
     label_threshold: number;

package/dist/convex-hull/ConvexHullStats.svelte

@@ -19,6 +19,8 @@
     phase_stats,
     stable_entries,
     unstable_entries,
+    show_stable = true,
+    show_unstable = true,
     layout = `toggle`,
     on_entry_click,
     highlighted_entry_id,
@@ -31,6 +33,8 @@
       phase_stats: PhaseStats | null
       stable_entries: ConvexHullEntry[]
       unstable_entries: ConvexHullEntry[]
+      show_stable?: boolean
+      show_unstable?: boolean
       // 'toggle' shows stats/table with toggle buttons (default)
       // 'side-by-side' shows both stats and table next to each other without toggle
       layout?: `toggle` | `side-by-side`
@@ -82,6 +86,10 @@
 
   // Shared concatenation of stable + unstable for histograms
   let all_entries = $derived([...stable_entries, ...unstable_entries])
+  let shown_entries = $derived([
+    ...(show_stable ? stable_entries : []),
+    ...(show_unstable ? unstable_entries : []),
+  ])
 
   // Static arity labels for phase breakdown display
   const arity_types: [string, PhaseArityField, number][] = [
@@ -222,8 +230,7 @@
 
   // Table view: visible entries filtered by min element count and formula
   let visible_entries = $derived(
-    all_entries.filter((entry) => {
-      if (!entry.visible) return false
+    shown_entries.filter((entry) => {
       if (min_n_elements > 1 && get_arity(entry) < min_n_elements) return false
       if (
         active_formula_filter &&

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

@@ -4,6 +4,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     phase_stats: PhaseStats | null;
     stable_entries: ConvexHullEntry[];
     unstable_entries: ConvexHullEntry[];
+    show_stable?: boolean;
+    show_unstable?: boolean;
     layout?: `toggle` | `side-by-side`;
     on_entry_click?: (entry: ConvexHullEntry) => void;
     highlighted_entry_id?: string;

package/dist/convex-hull/GasPressureControls.svelte

@@ -90,8 +90,11 @@
     }
   }
 
-  function handle_slider_end(gas: GasSpecies, event: Event): void {
-    const P = slider_to_pressure(+(event.currentTarget as HTMLInputElement).value)
+  function handle_slider_end(
+    gas: GasSpecies,
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const P = slider_to_pressure(+event.currentTarget.value)
     pressures = { ...pressures, [gas]: P }
     // Clear only this gas's preview (don't reset other sliders being dragged simultaneously)
     const { [gas]: _removed_preview, ...remaining_previews } = preview_pressures
@@ -112,13 +115,10 @@
     {#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: `${gas} partial pressure for μ(T,P)\nμ = ${
-            format_chemical_potential(mu, 3)
-          }`,
-        })}
+        {@attach tooltip({ content: tooltip_content })}
       >
         <label class="pressure-label">
           <input

package/dist/convex-hull/StructurePopup.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import type { AnyStructure } from '../structure'
+  import { get_electro_neg_formula } from '../composition'
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
+  import { DragControlTab } from '../overlays'
+  import { sanitize_formula } from '../sanitize'
   import { Structure } from '../structure'
+  import type { StructurePopupContext, StructurePopupStats } from './types'
+  import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
+  import { draggable } from 'svelte-multiselect/attachments'
 
   let {
     structure,
@@ -12,17 +18,25 @@
     height = 400,
     onclose,
     stats,
+    top_left,
+    children,
     popup_div = $bindable(),
     ...rest
-  }: HTMLAttributes<HTMLDivElement> & {
+  }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     structure: AnyStructure
     place_right?: boolean
     width?: number
     height?: number
     onclose?: () => void
-    stats?: { id?: string; e_above_hull?: number; e_form?: number }
+    stats?: StructurePopupStats
+    top_left?: Snippet<[StructurePopupContext]>
+    children?: Snippet<[StructurePopupContext]>
     popup_div?: HTMLDivElement
   } = $props()
+
+  const formula_html = $derived.by(() =>
+    sanitize_formula(get_electro_neg_formula(stats?.formula ?? structure, true)))
+  const context = $derived({ structure, stats, formula_html })
 </script>
 
 {#snippet close_button()}
@@ -40,6 +54,9 @@
 />
 
 <div
+  {@attach draggable({
+    handle_selector: `.drag-handle`,
+  })}
   {...rest}
   class="structure-popup {place_right ? `right` : `left`} {rest.class ?? ``}"
   role="dialog"
@@ -47,49 +64,66 @@
   tabindex="-1"
   bind:this={popup_div}
 >
-  {#if stats}
-    <div class="structure-stats">
-      {#if stats.id}
-        ID = {stats.id}<br>
-      {/if}
-      {#if stats.e_above_hull != null}
-        E<sub>above hull</sub> = {format_num(stats.e_above_hull ?? 0, `.3~`)} eV/atom<br>
-      {/if}
-      {#if stats.e_form != null}
-        E<sub>form</sub> = {format_num(stats.e_form || 0, `.3~`)}
-        eV/atom
-      {/if}
-    </div>
-  {/if}
+  <DragControlTab />
+  <div class="structure-popup-content">
+    {#if top_left || stats}
+      <div class="structure-stats">
+        {#if top_left}
+          {@render top_left(context)}
+        {:else if stats}
+          {#if stats.id}
+            ID = {stats.id}<br>
+          {/if}
+          {#if formula_html}
+            {@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>
+          {/if}
+          {#if stats.e_form != null}
+            E<sub>form</sub> = {format_num(stats.e_form, `.3~`)}
+            eV/atom
+          {/if}
+        {/if}
+      </div>
+    {/if}
 
-  <Structure
-    {structure}
-    {width}
-    {height}
-    top_right_controls={close_button}
-    show_controls
-  />
+    <Structure
+      {structure}
+      {width}
+      {height}
+      top_right_controls={close_button}
+      show_controls="hover"
+      style="--struct-width: {width}px; --struct-height: {height}px; --struct-min-width: 0"
+    />
+    {@render children?.(context)}
+  </div>
 </div>
 
 <style>
   .structure-popup {
     position: absolute;
     box-sizing: border-box;
-    width: 500px;
+    width: max-content;
+    z-index: 10000;
+    overflow: visible;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .structure-popup-content {
+    display: flex;
+    gap: 8px;
     background: var(--surface-bg);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
-    z-index: 10000;
     overflow: hidden;
-    top: 50%;
-    transform: translateY(-50%);
   }
   .structure-popup.right {
-    left: calc(100% + 1em);
+    left: calc(100% + var(--structure-popup-gap, 1em));
   }
   .structure-popup.left {
-    right: calc(100% + 1em);
+    right: calc(100% + var(--structure-popup-gap, 1em));
   }
   .close-btn {
     background: transparent;
@@ -106,7 +140,8 @@
     position: absolute;
     top: 10px;
     left: 10px;
-    background: var(--surface-bg);
+    background: transparent;
+    backdrop-filter: blur(8px);
     color: var(--text-color);
     padding: 4px 8px;
     border-radius: 6px;

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

@@ -1,16 +1,16 @@
 import type { AnyStructure } from '../structure';
+import type { StructurePopupContext, StructurePopupStats } from './types';
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     structure: AnyStructure;
     place_right?: boolean;
     width?: number;
     height?: number;
     onclose?: () => void;
-    stats?: {
-        id?: string;
-        e_above_hull?: number;
-        e_form?: number;
-    };
+    stats?: StructurePopupStats;
+    top_left?: Snippet<[StructurePopupContext]>;
+    children?: Snippet<[StructurePopupContext]>;
     popup_div?: HTMLDivElement;
 };
 declare const StructurePopup: import("svelte").Component<$$ComponentProps, {}, "popup_div">;

package/dist/convex-hull/TemperatureSlider.svelte

@@ -22,8 +22,10 @@
   const display_index = $derived(preview_index ?? temp_index)
   const display_temp = $derived(available_temperatures[display_index] ?? temperature)
 
-  function handle_slider_input(event: Event): void {
-    const new_index = +(event.currentTarget as HTMLInputElement).value
+  function handle_slider_input(
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const new_index = +event.currentTarget.value
     preview_index = new_index
     // Throttle parent updates during drag to prevent scene flashing
     const now = Date.now()
@@ -33,9 +35,10 @@
     }
   }
 
-  function handle_slider_end(event: Event): void {
-    const new_temp =
-      available_temperatures[+(event.currentTarget as HTMLInputElement).value]
+  function handle_slider_end(
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const new_temp = available_temperatures[+event.currentTarget.value]
     if (new_temp !== undefined) temperature = new_temp
     preview_index = null
   }

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

@@ -1,6 +1,6 @@
 import type { ElementSymbol } from '../element';
-import type { Vec3 } from '../math';
-import type { ConvexHullEntry, PhaseData, Point3D } from './types';
+import type { Point3D, 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];

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

@@ -86,7 +86,7 @@ export function get_ternary_3d_coordinates(entries, elements, el_refs) {
             : (compute_e_form_per_atom(entry, refs) ?? NaN);
         const xyz = barycentric_to_ternary_xyz(barycentric, e_form_per_atom);
         const is_element = is_unary_entry(entry);
-        return { ...entry, ...xyz, is_element, visible: true };
+        return { ...entry, ...xyz, is_element };
     });
     return result;
 }
@@ -177,6 +177,6 @@ export function compute_4d_coords(entries, elements) {
         const barycentric_4d = composition_to_barycentric_4d(entry.composition, elements);
         const tetrahedral = barycentric_to_tetrahedral(barycentric_4d);
         const is_element = is_unary_entry(entry);
-        return { ...entry, ...tetrahedral, is_element, visible: true };
+        return { ...entry, ...tetrahedral, is_element };
     });
 }

package/dist/convex-hull/gas-thermodynamics.js

@@ -121,9 +121,7 @@ export function create_default_gas_provider() {
 let default_provider = null;
 // Get the default gas thermodynamics provider (lazy initialization)
 export function get_default_gas_provider() {
-    if (!default_provider) {
-        default_provider = create_default_gas_provider();
-    }
+    default_provider ??= create_default_gas_provider();
     return default_provider;
 }
 // Gas Chemical Potential Calculations
@@ -275,7 +273,7 @@ export function compute_gas_correction(entry, config, T, pressures) {
 // By only correcting unary references, we effectively replace the standard
 // elemental reference with the gas chemical potential at (T, P).
 export function apply_gas_corrections(entries, config, T) {
-    if (!config || !config.enabled_gases?.length)
+    if (!config?.enabled_gases?.length)
         return entries;
     const analysis = analyze_gas_data(entries, config);
     // No gas-dependent elements, return entries unchanged

package/dist/convex-hull/helpers.d.ts

@@ -9,9 +9,17 @@ export declare function compute_hull_stability(raw_distance: number, exclude_fro
     e_above_hull: number;
     is_stable: boolean;
 };
+type StabilityEntry = {
+    is_stable?: boolean;
+    e_above_hull?: number;
+};
+export declare const entry_is_stable: (entry: StabilityEntry, tol?: number) => boolean;
 export declare const is_on_hull: (entry: PhaseData, tol?: number) => boolean;
 export declare const get_arity: (entry: PhaseData) => number;
 export declare const is_unary_entry: (entry: PhaseData) => boolean;
+export declare const entry_is_unstable: (entry: StabilityEntry) => boolean;
+export declare const entry_is_visible: (entry: StabilityEntry, show_stable: boolean, show_unstable: boolean) => boolean;
+export declare const visible_entries: <Entry extends StabilityEntry>(entries: readonly Entry[], show_stable: boolean, show_unstable: boolean) => Entry[];
 export declare function get_energy_color_scale(color_mode: `stability` | `energy`, color_scale: D3InterpolateName, plot_entries: {
     e_above_hull?: number;
 }[]): ((value: number) => string) | null;
@@ -22,12 +30,15 @@ export declare function get_point_color_for_entry(entry: {
 export declare function parse_hull_entries_from_drop(event: DragEvent): Promise<PhaseData[] | null>;
 export declare function calc_max_hull_dist_in_data(processed_entries: PhaseData[]): number;
 export declare function compute_auto_hull_dist_threshold(n_entries: number, max_hull_dist_in_data: number, static_default: number): number;
+export declare function auto_threshold_reset(default_threshold: number): (next_source: unknown, current_threshold: number, next_auto_threshold: number) => number | undefined;
+export declare function current_entry<Entry extends {
+    entry_id?: string;
+}>(entry: Entry | null | undefined, entries: readonly Entry[]): Entry | null;
 export declare function build_entry_tooltip_text(entry: PhaseData): string;
 export declare function find_hull_entry_at_mouse<T extends {
     x: number;
     y: number;
     z: number;
-    visible?: boolean;
     size?: number;
     is_stable?: boolean;
     e_above_hull?: number;
@@ -80,7 +91,7 @@ export interface TemperatureAnalysis {
     available_temperatures: number[];
 }
 export declare function analyze_temperature_data(entries: PhaseData[]): TemperatureAnalysis;
-export declare function entry_has_temperature(entry: PhaseData, T: number): boolean;
+export declare const entry_has_temperature: (entry: PhaseData, T: number) => boolean;
 export declare function get_energy_at_temperature(entry: PhaseData, T: number): number;
 export declare function can_interpolate_at_temperature(entry: PhaseData, T: number, max_gap: number): boolean;
 export declare function interpolate_energy_at_temperature(entry: PhaseData, T: number, max_gap: number): number | null;