matterviz 0.3.2 → 0.3.3

package/dist/brillouin/BrillouinZoneScene.svelte.d.ts

@@ -43,6 +43,6 @@ type $$ComponentProps = {
     hovered_qpoint_index?: number | null;
     hover_data?: BZHoverData | null;
 };
-declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera_position" | "camera_projection" | "scene" | "camera" | "camera_is_moving" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale" | "hover_data">;
+declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera_position" | "camera_projection" | "vector_scale" | "camera" | "scene" | "camera_is_moving" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "hover_data">;
 type BrillouinZoneScene = ReturnType<typeof BrillouinZoneScene>;
 export default BrillouinZoneScene;

package/dist/brillouin/BrillouinZoneTooltip.svelte

@@ -1,10 +1,20 @@
-<script lang="ts">// Tooltip component for Brillouin zone hover information
-// Displays k-coordinates, BZ order, volume, and IBZ-specific info
-import { format_num, format_vec3 } from '../labels';
-import { TooltipContent } from '../tooltip';
-let { hover_data, tooltip, } = $props();
-// Ordinal for BZ order (only 1-3 in practice)
-const ordinal = (num) => `${num}${[`th`, `st`, `nd`, `rd`][num] ?? `th`}`;
+<script lang="ts">
+  // Tooltip component for Brillouin zone hover information
+  // Displays k-coordinates, BZ order, volume, and IBZ-specific info
+  import { format_num, format_vec3 } from '../labels'
+  import { TooltipContent } from '../tooltip'
+  import type { BZHoverData, BZTooltipProp } from './types'
+
+  let {
+    hover_data,
+    tooltip,
+  }: {
+    hover_data: BZHoverData
+    tooltip?: BZTooltipProp
+  } = $props()
+
+  // Ordinal for BZ order (only 1-3 in practice)
+  const ordinal = (num: number) => `${num}${[`th`, `st`, `nd`, `rd`][num] ?? `th`}`
 </script>
 
 <TooltipContent data={hover_data} snippet_arg={{ hover_data }} {tooltip}>

package/dist/brillouin/compute.js

@@ -29,11 +29,14 @@ export function extract_point_group_from_operations(operations) {
 }
 // Multiply two 3x3 matrices: C = A · B
 function mat3x3_multiply(A, B) {
-    const result = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
+    const result = [
+        [0, 0, 0],
+        [0, 0, 0],
+        [0, 0, 0],
+    ];
     for (let row = 0; row < 3; row++) {
         for (let col = 0; col < 3; col++) {
-            result[row][col] = A[row][0] * B[0][col] + A[row][1] * B[1][col] +
-                A[row][2] * B[2][col];
+            result[row][col] = A[row][0] * B[0][col] + A[row][1] * B[1][col] + A[row][2] * B[2][col];
         }
     }
     return result;
@@ -164,7 +167,8 @@ max_planes_by_order = { 1: 26, 2: 80, 3: 150 }) {
                 // Count how many planes this vertex is beyond (with early termination)
                 let beyond_count = 0;
                 for (let p_idx = 0; p_idx < normals.length; p_idx++) {
-                    const dot = vertex[0] * normals[p_idx][0] + vertex[1] * normals[p_idx][1] +
+                    const dot = vertex[0] * normals[p_idx][0] +
+                        vertex[1] * normals[p_idx][1] +
                         vertex[2] * normals[p_idx][2];
                     if (dot > distances[p_idx] + TOL) {
                         beyond_count++;
@@ -207,9 +211,10 @@ export function compute_convex_hull(vertices, edge_sharp_angle_deg = 5) {
     const vert_map = new Map();
     for (let idx_vertex = 0; idx_vertex < pos.count; idx_vertex++) {
         const vert = [pos.getX(idx_vertex), pos.getY(idx_vertex), pos.getZ(idx_vertex)];
-        const existing_idx = unique_verts.findIndex((u) => Math.abs(u[0] - vert[0]) < TOL && Math.abs(u[1] - vert[1]) < TOL &&
+        const existing_idx = unique_verts.findIndex((u) => Math.abs(u[0] - vert[0]) < TOL &&
+            Math.abs(u[1] - vert[1]) < TOL &&
             Math.abs(u[2] - vert[2]) < TOL);
-        vert_map.set(idx_vertex, existing_idx === -1 ? (unique_verts.push(vert) - 1) : existing_idx);
+        vert_map.set(idx_vertex, existing_idx === -1 ? unique_verts.push(vert) - 1 : existing_idx);
     }
     // Build faces with deduplicated vertex indices
     const faces = [];

package/dist/chempot-diagram/ChemPotDiagram.svelte

@@ -1,25 +1,107 @@
-<script lang="ts">import { get_hill_formula } from '../composition/format';
-import { format_num } from '../labels';
-import ChemPotDiagram2D from './ChemPotDiagram2D.svelte';
-import ChemPotDiagram3D from './ChemPotDiagram3D.svelte';
-import { CHEMPOT_DEFAULTS } from './types';
-let { entries = [], config = {}, width = $bindable(600), height = $bindable(600), 
-// Bound temperature may be auto-corrected by 2D/3D child components.
-temperature = $bindable(), hover_info = $bindable(null), } = $props();
-// Extract unique elements from all entries (composition keys are element symbols)
-const all_elements = $derived([
-    ...new Set(entries.flatMap((entry) => Object.entries(entry.composition)
-        .filter(([, amount]) => amount > 0)
-        .map(([element]) => element))),
-].sort());
-// How many display axes (2 = binary/2D, 3+ = ternary/3D)
-const display_elements = $derived(config.elements ?? all_elements);
-const n_display = $derived(display_elements.length);
-const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip);
-const tooltip_detail_level = $derived(config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level);
-function is_hover_info_3d(value) {
-    return value?.view === `3d`;
-}
+<script lang="ts">
+  import { get_electro_neg_formula } from '../composition/format';
+  import type { PhaseData } from '../convex-hull/types';
+  import Spinner from '../feedback/Spinner.svelte';
+  import { format_num } from '../labels';
+  import { constrain_tooltip_position } from '../plot/layout';
+  import { sanitize_html } from '../sanitize';
+  import { compute_chempot_async } from './async-compute.svelte';
+  import ChemPotDiagram2D from './ChemPotDiagram2D.svelte';
+  import ChemPotDiagram3D from './ChemPotDiagram3D.svelte';
+  import { get_ternary_combinations } from './compute';
+  import type {
+      ChemPotDiagramConfig,
+      ChemPotHoverInfo,
+      ChemPotHoverInfo3D,
+  } from './types';
+  import { CHEMPOT_DEFAULTS } from './types';
+
+  let {
+    entries = [],
+    config = {},
+    width = $bindable(600),
+    height = $bindable(600),
+    // Bound temperature may be auto-corrected by 2D/3D child components.
+    temperature = $bindable(),
+    hover_info = $bindable<ChemPotHoverInfo | null>(null),
+  }: {
+    entries: PhaseData[]
+    config?: ChemPotDiagramConfig
+    width?: number
+    height?: number
+    temperature?: number
+    hover_info?: ChemPotHoverInfo | null
+  } = $props()
+
+  // Extract unique elements from all entries (composition keys are element symbols)
+  const all_elements = $derived(
+    [
+      ...new Set(entries.flatMap((entry) =>
+        Object.entries(entry.composition)
+          .filter(([, amount]) => amount > 0)
+          .map(([element]) => element)
+      )),
+    ].toSorted(),
+  )
+
+  // How many display axes (2 = binary/2D, 3+ = ternary/3D)
+  const display_elements = $derived(config.elements ?? all_elements)
+  const n_display = $derived(display_elements.length)
+  const show_tooltip = $derived(
+    config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip,
+  )
+  const tooltip_detail_level = $derived(
+    config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level,
+  )
+
+  const projection_mode = $derived(
+    config.projection_mode ?? CHEMPOT_DEFAULTS.projection_mode,
+  )
+  // For quaternary+ in grid mode, generate all C(n,3) ternary projections
+  // Uses display_elements (not all_elements) so config.elements scopes the grid
+  const ternary_combos = $derived(
+    n_display > 3 && projection_mode === `grid`
+      ? get_ternary_combinations(display_elements)
+      : [],
+  )
+  const show_grid = $derived(ternary_combos.length > 0 && ternary_combos.length <= 12)
+  // Scale down sub-diagrams in grid mode
+  const grid_width = $derived(Math.max(280, Math.round(width * 0.48)))
+  const grid_height = $derived(Math.max(240, Math.round(height * 0.48)))
+
+  // Pre-warm the worker's N-D computation cache before mounting heavy 3D
+  // children. Fires one async call with the first projection — subsequent
+  // child calls for different element triples hit the cached N-D result.
+  let grid_cache_ready = $state(false)
+  let grid_error = $state<string | null>(null)
+  $effect(() => {
+    grid_cache_ready = false
+    grid_error = null
+    if (!show_grid) return
+    let cancelled = false
+    compute_chempot_async(entries, { ...config, elements: ternary_combos[0] })
+      .then(() => { if (!cancelled) grid_cache_ready = true })
+      .catch((err) => {
+        if (cancelled) return
+        console.error(`Grid precompute failed:`, err)
+        grid_error = err instanceof Error ? err.message : String(err)
+      })
+    return () => { cancelled = true }
+  })
+const is_hover_info_3d = (value: ChemPotHoverInfo | null): value is ChemPotHoverInfo3D => value?.view === `3d`
+
+  let tooltip_el = $state<HTMLElement>()
+  const tooltip_pos = $derived.by(() => {
+    const pointer = hover_info?.pointer
+    if (!pointer) return { x: 4, y: 4 }
+    return constrain_tooltip_position(
+      pointer.x, pointer.y,
+      tooltip_el?.offsetWidth ?? 200,
+      tooltip_el?.offsetHeight ?? 100,
+      width, height,
+      { offset: 0 },
+    )
+  })
 </script>
 
 <div class="chempot-diagram-wrapper">
@@ -50,7 +132,7 @@ function is_hover_info_3d(value) {
       bind:hover_info
       render_local_tooltip={false}
     />
-  {:else}
+  {:else if n_display === 3 || !show_grid}
     <ChemPotDiagram3D
       {entries}
       {config}
@@ -60,14 +142,48 @@ function is_hover_info_3d(value) {
       bind:hover_info
       render_local_tooltip={false}
     />
+  {:else}
+    <p class="projection-info">
+      Showing all {ternary_combos.length} ternary projections of the
+      {display_elements.length}-element system ({display_elements.join(`-`)})
+    </p>
+    {#if grid_error}
+      <div class="chempot-error" role="alert">
+        <div>
+          <h3 id="grid-computation-failed">Grid computation failed</h3>
+          <p>{grid_error}</p>
+        </div>
+      </div>
+    {:else if !grid_cache_ready}
+      <Spinner
+        text="Computing {display_elements.length}-element chemical potential domains..."
+        style="--spinner-size: 1.2em"
+      />
+    {:else}
+      <div class="projection-grid">
+        {#each ternary_combos as combo (combo.join(`|`))}
+          <div class="projection-cell">
+            <h4 id="projection" class="projection-label">{combo.join(`-`)} projection</h4>
+            <ChemPotDiagram3D
+              {entries}
+              config={{ ...config, elements: combo }}
+              width={grid_width}
+              height={grid_height}
+              bind:temperature
+            />
+          </div>
+        {/each}
+      </div>
+    {/if}
   {/if}
   {#if show_tooltip && hover_info}
     <aside
+      bind:this={tooltip_el}
       class="chempot-tooltip"
-      style:left="{hover_info.pointer?.x ?? 4}px"
-      style:top="{hover_info.pointer?.y ?? 4}px"
+      style:left="{tooltip_pos.x}px"
+      style:top="{tooltip_pos.y}px"
     >
-      <h4>{@html get_hill_formula(hover_info.formula, false, ``)}</h4>
+      <h4>{@html sanitize_html(get_electro_neg_formula(hover_info.formula, false, ``, `.3~s`))}</h4>
       {#if hover_info.view === `2d`}
         <p>2D domain · Points: {hover_info.n_points}</p>
         {#if tooltip_detail_level === `detailed`}
@@ -117,7 +233,7 @@ function is_hover_info_3d(value) {
             <h5 id="neighbors">Neighbors ({hover_info.neighbors.length})</h5>
             <p>
               {
-                hover_info.neighbors.map((f) => get_hill_formula(f, true, ``)).join(
+                hover_info.neighbors.map((f) => get_electro_neg_formula(f, true, ``, `.3~s`)).join(
                   `, `,
                 )
               }
@@ -137,6 +253,25 @@ function is_hover_info_3d(value) {
   .chempot-diagram-wrapper {
     position: relative;
   }
+  .projection-info {
+    margin: 0 0 0.5em;
+    font-size: 0.9em;
+    color: var(--text-color-secondary, #666);
+  }
+  .projection-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.4em;
+  }
+  .projection-cell {
+    min-width: 0;
+  }
+  .projection-label {
+    margin: 0 0 0.3em;
+    font-size: 0.85em;
+    font-weight: 400;
+    text-align: center;
+  }
   .chempot-error {
     display: flex;
     align-items: center;