matterviz 0.3.1 → 0.3.3

package/dist/phase-diagram/PhaseDiagramTooltip.svelte

@@ -1,80 +1,172 @@
-<script lang="ts">import { ATOMIC_WEIGHTS } from '../composition/parse';
-import { format_num } from '../labels';
-import { TooltipContent } from '../tooltip';
-import { format_composition, format_temperature, get_phase_stability_range, } from './utils';
-let { hover_info, temperature_unit = `K`, composition_unit = `at%`, component_a = `A`, component_b = `B`, boundaries = [], tooltip, } = $props();
-// Convert atomic fraction to weight fraction: wt_B = (x_B * M_B) / (x_A * M_A + x_B * M_B)
-const wt_fraction_b = $derived.by(() => {
-    const mass_a = ATOMIC_WEIGHTS.get(component_a);
-    const mass_b = ATOMIC_WEIGHTS.get(component_b);
-    if (!mass_a || !mass_b)
-        return null;
-    const { composition: x_b } = hover_info;
-    const denom = (1 - x_b) * mass_a + x_b * mass_b;
-    return denom > 0 ? (x_b * mass_b) / denom : null;
-});
-const stability = $derived(get_phase_stability_range(hover_info.region));
-// Format special point type for display (e.g., "peritectic" → "Peritectic")
-// For melting points and congruent points at composition edges, show element-specific info
-const special_point_info = $derived.by(() => {
-    const point = hover_info.special_point;
-    if (!point)
-        return null;
-    const type = point.type;
-    const position = point.position;
-    const temp = format_temperature(position[1], temperature_unit);
+<script lang="ts">
+  import { ATOMIC_WEIGHTS } from '../composition/parse'
+  import type { ElementSymbol } from '../element'
+  import { format_num } from '../labels'
+  import { sanitize_formula, sanitize_html } from '../sanitize'
+  import { TooltipContent } from '../tooltip'
+  import type {
+    CompUnit,
+    LeverRuleMode,
+    PhaseBoundary,
+    PhaseDiagramTooltipProp,
+    PhaseHoverInfo,
+    TempUnit,
+  } from './types'
+  import {
+    convert_temp,
+    format_composition,
+    format_label_html,
+    format_temperature,
+    get_phase_stability_range,
+  } from './utils'
+
+  let {
+    hover_info,
+    temperature_unit = `K`,
+    data_temperature_unit,
+    composition_unit = `at%`,
+    component_a = `A`,
+    component_b = `B`,
+    boundaries = [],
+    lever_rule_mode = `horizontal`,
+    use_subscripts = true,
+    tooltip,
+  }: {
+    hover_info: PhaseHoverInfo
+    temperature_unit?: TempUnit
+    // Original unit of hover_info.temperature (defaults to temperature_unit)
+    data_temperature_unit?: TempUnit
+    composition_unit?: CompUnit
+    component_a?: string
+    component_b?: string
+    boundaries?: PhaseBoundary[]
+    lever_rule_mode?: LeverRuleMode
+    use_subscripts?: boolean
+    tooltip?: PhaseDiagramTooltipProp
+  } = $props()
+
+  // The unit that hover_info.temperature is actually in
+  const data_unit = $derived(data_temperature_unit ?? temperature_unit)
+
+  const safe_formula = (comp: string) => sanitize_formula(comp, use_subscripts)
+
+  // Convert a temperature from data unit to display unit
+  function to_display(temp: number): number {
+    return convert_temp(temp, data_unit, temperature_unit)
+  }
+
+  // Convert atomic fraction to weight fraction: wt_B = (x_B * M_B) / (x_A * M_A + x_B * M_B)
+  const wt_fraction_b = $derived.by(() => {
+    const mass_a = ATOMIC_WEIGHTS.get(component_a as ElementSymbol)
+    const mass_b = ATOMIC_WEIGHTS.get(component_b as ElementSymbol)
+    if (!mass_a || !mass_b) return null
+    const { composition: x_b } = hover_info
+    const denom = (1 - x_b) * mass_a + x_b * mass_b
+    return denom > 0 ? (x_b * mass_b) / denom : null
+  })
+
+  const stability = $derived(get_phase_stability_range(hover_info.region))
+
+  // Format special point type for display (e.g., "peritectic" → "Peritectic")
+  // For melting points and congruent points at composition edges, show element-specific info
+  const special_point_info = $derived.by(() => {
+    const point = hover_info.special_point
+    if (!point) return null
+
+    const type = point.type
+    const position = point.position
+    const temp = format_temperature(to_display(position[1]), temperature_unit)
+
     // Check if this is a melting point (at composition edge)
-    const is_at_edge = position[0] <= 0.01 || position[0] >= 0.99;
-    const is_melting = type === `melting_point` || type === `congruent`;
+    const is_at_edge = position[0] <= 0.01 || position[0] >= 0.99
+    const is_melting = type === `melting_point` || type === `congruent`
+
     if (is_melting && is_at_edge) {
-        const element = position[0] <= 0.01 ? component_a : component_b;
-        return {
-            badge: `Melting Point`,
-            description: `${element} melts at ${temp}`,
-        };
+      const element = position[0] <= 0.01 ? component_a : component_b
+      return {
+        badge: `Melting Point`,
+        description: `${element} melts at ${temp}`,
+      }
     }
+
     // Handle other special point types with descriptive info
-    const type_descriptions = {
-        eutectic: `Liquid → two solid phases at ${temp}`,
-        peritectic: `Liquid + solid → different solid at ${temp}`,
-        eutectoid: `Solid → two solid phases at ${temp}`,
-        peritectoid: `Two solids → different solid at ${temp}`,
-        congruent: `Congruent phase change at ${temp}`,
-    };
-    const badge = type.charAt(0).toUpperCase() + type.slice(1).replace(/_/g, ` `);
+    const type_descriptions: Record<string, string> = {
+      eutectic: `Liquid → two solid phases at ${temp}`,
+      peritectic: `Liquid + solid → different solid at ${temp}`,
+      eutectoid: `Solid → two solid phases at ${temp}`,
+      peritectoid: `Two solids → different solid at ${temp}`,
+      congruent: `Congruent phase change at ${temp}`,
+    }
+
+    const badge = type.charAt(0).toUpperCase() + type.slice(1).replaceAll(`_`, ` `)
     return {
-        badge,
-        description: type_descriptions[type] ?? null,
-    };
-});
-// Calculate distance to nearest phase boundary (liquidus/solidus)
-const boundary_distance = $derived.by(() => {
-    if (!boundaries.length)
-        return null;
-    const { composition, temperature } = hover_info;
-    let min_dist = null;
+      badge,
+      description: type_descriptions[type] ?? null,
+    }
+  })
+
+  // Calculate distance to nearest phase boundary (liquidus/solidus)
+  const boundary_distance = $derived.by(() => {
+    if (!boundaries.length) return null
+    const { composition, temperature } = hover_info
+    let min_dist: { type: string; delta_t: number } | null = null
+
     for (const boundary of boundaries) {
-        if (![`liquidus`, `solidus`, `solvus`].includes(boundary.type))
-            continue;
-        // Find the boundary point closest in composition
-        for (const [bx, bt] of boundary.points) {
-            if (Math.abs(bx - composition) < 0.02) {
-                // Within 2% composition
-                const delta = temperature - bt;
-                if (!min_dist || Math.abs(delta) < Math.abs(min_dist.delta_t)) {
-                    min_dist = { type: boundary.type, delta_t: delta };
-                }
-            }
+      if (![`liquidus`, `solidus`, `solvus`].includes(boundary.type)) continue
+      // Find the boundary point closest in composition
+      for (const [bx, bt] of boundary.points) {
+        if (Math.abs(bx - composition) < 0.02) {
+          // Within 2% composition
+          const delta = temperature - bt
+          if (!min_dist || Math.abs(delta) < Math.abs(min_dist.delta_t)) {
+            min_dist = { type: boundary.type, delta_t: delta }
+          }
         }
+      }
+    }
+    return min_dist
+  })
+
+  // Normalized lever rule display data (unifies horizontal and vertical modes)
+  const lever_display = $derived.by(() => {
+    if (lever_rule_mode === `vertical` && hover_info.vertical_lever_rule) {
+      const vlr = hover_info.vertical_lever_rule
+      return {
+        label: `Lever Rule (vertical)`,
+        phase_a: vlr.bottom_phase,
+        phase_b: vlr.top_phase,
+        fraction_a: vlr.fraction_bottom,
+        fraction_b: vlr.fraction_top,
+        detail_a: format_temperature(
+          to_display(vlr.bottom_temperature),
+          temperature_unit,
+        ),
+        detail_b: format_temperature(
+          to_display(vlr.top_temperature),
+          temperature_unit,
+        ),
+      }
+    }
+    if (lever_rule_mode === `horizontal` && hover_info.lever_rule) {
+      const lr = hover_info.lever_rule
+      return {
+        label: `Lever Rule`,
+        phase_a: lr.left_phase,
+        phase_b: lr.right_phase,
+        fraction_a: lr.fraction_left,
+        fraction_b: lr.fraction_right,
+        detail_a: format_composition(lr.left_composition, composition_unit),
+        detail_b: format_composition(lr.right_composition, composition_unit),
+      }
     }
-    return min_dist;
-});
+    return null
+  })
 </script>
 
 <TooltipContent data={hover_info} snippet_arg={hover_info} {tooltip}>
   <div class="phase-diagram-tooltip">
     <header>
-      <strong>{hover_info.region.name}</strong>
+      <strong>{@html sanitize_html(format_label_html(hover_info.region.name, use_subscripts))}</strong>
       {#if special_point_info}<span class="special-point-badge">{
           special_point_info.badge
         }</span>{/if}
@@ -86,49 +178,84 @@ const boundary_distance = $derived.by(() => {
 
     <dl>
       <dt>Temperature</dt>
-      <dd>{format_temperature(hover_info.temperature, temperature_unit)}</dd>
+      <dd>
+        {
+          format_temperature(
+            to_display(hover_info.temperature),
+            temperature_unit,
+          )
+        }
+        {#if temperature_unit !== `°C`}
+          <small>({
+              format_temperature(
+                convert_temp(hover_info.temperature, data_unit, `°C`),
+                `°C`,
+              )
+            })</small>
+        {/if}
+      </dd>
       <dt>Composition</dt>
       <dd>
-        {format_composition(hover_info.composition, composition_unit)} {component_b}
-        <small>({format_composition(1 - hover_info.composition, composition_unit)} {
-            component_a
-          })</small>
+        {format_composition(hover_info.composition, composition_unit)}
+        {@html safe_formula(component_b)}
+        <small>({format_composition(1 - hover_info.composition, composition_unit)}
+          {@html safe_formula(component_a)})</small>
       </dd>
       {#if wt_fraction_b !== null}
         <dt>Weight</dt>
         <dd>
-          {format_num(wt_fraction_b * 100, `.1f`)}% {component_b}
-          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}% {component_a})</small>
+          {format_num(wt_fraction_b * 100, `.1f`)}%
+          {@html safe_formula(component_b)}
+          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
+            {@html safe_formula(component_a)})</small>
         </dd>
       {/if}
       {#if stability}
-        <dt>Stable</dt><dd>{stability.t_min} – {stability.t_max} {temperature_unit}</dd>
+        <dt>Stable</dt><dd>
+          {format_num(to_display(stability.t_min), `.0f`)} – {
+            format_num(to_display(stability.t_max), `.0f`)
+          } {temperature_unit}
+          {#if temperature_unit !== `°C`}
+            <small>({
+                format_num(
+                  convert_temp(stability.t_min, data_unit, `°C`),
+                  `.0f`,
+                )
+              } – {
+                format_num(
+                  convert_temp(stability.t_max, data_unit, `°C`),
+                  `.0f`,
+                )
+              } °C)</small>
+          {/if}
+        </dd>
       {/if}
     </dl>
 
-    {#if hover_info.lever_rule}
-      {@const lr = hover_info.lever_rule}
+    {#if lever_display}
+      {@const ld = lever_display}
       <div class="lever">
-        <span>Lever Rule</span>
+        <span>{ld.label}</span>
         <div class="bar">
           <div
-            style:width="{lr.fraction_left * 100}%"
-            title="{lr.left_phase}: {format_num(lr.fraction_left * 100, `.1f`)}%"
+            style:width="{ld.fraction_a * 100}%"
+            title="{ld.phase_a}: {format_num(ld.fraction_a * 100, `.1f`)}%"
           >
           </div>
           <div
-            style:width="{lr.fraction_right * 100}%"
-            title="{lr.right_phase}: {format_num(lr.fraction_right * 100, `.1f`)}%"
+            style:width="{ld.fraction_b * 100}%"
+            title="{ld.phase_b}: {format_num(ld.fraction_b * 100, `.1f`)}%"
           >
           </div>
-          <i style:left="{lr.fraction_left * 100}%"></i>
+          <i style:left="{ld.fraction_a * 100}%"></i>
         </div>
         <div class="phase-info">
-          <span>{lr.left_phase}: {format_num(lr.fraction_left * 100, `.0f`)}% <small>at {
-                format_composition(lr.left_composition, composition_unit)
-              }</small></span>
-          <span>{lr.right_phase}: {format_num(lr.fraction_right * 100, `.0f`)}% <small>at
-              {format_composition(lr.right_composition, composition_unit)}</small></span>
+          <span>{@html safe_formula(ld.phase_a)}: {
+              format_num(ld.fraction_a * 100, `.0f`)
+            }% <small>at {ld.detail_a}</small></span>
+          <span>{@html safe_formula(ld.phase_b)}: {
+              format_num(ld.fraction_b * 100, `.0f`)
+            }% <small>at {ld.detail_b}</small></span>
         </div>
       </div>
     {/if}
@@ -136,8 +263,12 @@ const boundary_distance = $derived.by(() => {
     {#if boundary_distance}
       {@const { type, delta_t } = boundary_distance}
       {@const label = delta_t > 0 ? `above` : `below`}
+      {@const display_delta = Math.abs(
+        to_display(hover_info.temperature) -
+          to_display(hover_info.temperature - delta_t),
+      )}
       <div class="boundary-info">
-        {Math.round(Math.abs(delta_t))} {temperature_unit} {label} {type}
+        {Math.round(display_delta)} {temperature_unit} {label} {type}
       </div>
     {/if}
   </div>

package/dist/phase-diagram/PhaseDiagramTooltip.svelte.d.ts

@@ -1,11 +1,14 @@
-import type { PhaseBoundary, PhaseDiagramTooltipProp, PhaseHoverInfo } from './types';
+import type { CompUnit, LeverRuleMode, PhaseBoundary, PhaseDiagramTooltipProp, PhaseHoverInfo, TempUnit } from './types';
 type $$ComponentProps = {
     hover_info: PhaseHoverInfo;
-    temperature_unit?: string;
-    composition_unit?: string;
+    temperature_unit?: TempUnit;
+    data_temperature_unit?: TempUnit;
+    composition_unit?: CompUnit;
     component_a?: string;
     component_b?: string;
     boundaries?: PhaseBoundary[];
+    lever_rule_mode?: LeverRuleMode;
+    use_subscripts?: boolean;
     tooltip?: PhaseDiagramTooltipProp;
 };
 declare const PhaseDiagramTooltip: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/phase-diagram/TdbInfoPanel.svelte

@@ -1,7 +1,31 @@
-<script lang="ts">import { extract_tdb_reference, summarize_models } from './utils';
-let { result, system_name = ``, has_precomputed = false, is_precomputed_loaded = false, on_load_precomputed, style = ``, } = $props();
-const reference = $derived(result.data ? extract_tdb_reference(result.data.comments) : null);
-const model_summary = $derived(result.data ? summarize_models(result.data.phases) : null);
+<script lang="ts">
+  import type { TdbParseResult } from './parse'
+  import { extract_tdb_reference, summarize_models } from './utils'
+
+  interface Props {
+    result: TdbParseResult
+    system_name?: string
+    has_precomputed?: boolean
+    is_precomputed_loaded?: boolean
+    on_load_precomputed?: () => void
+    style?: string
+  }
+
+  let {
+    result,
+    system_name = ``,
+    has_precomputed = false,
+    is_precomputed_loaded = false,
+    on_load_precomputed,
+    style = ``,
+  }: Props = $props()
+
+  const reference = $derived(
+    result.data ? extract_tdb_reference(result.data.comments) : null,
+  )
+  const model_summary = $derived(
+    result.data ? summarize_models(result.data.phases) : null,
+  )
 </script>
 
 <div class="tdb-info-panel" {style}>

package/dist/phase-diagram/build-diagram.js

@@ -19,7 +19,7 @@ export function parse_curve_ref(ref) {
         name = name.slice(1);
     }
     // Check for slice suffix [start:end]
-    const slice_match = name.match(/^(.+)\[(-?\d*):(-?\d*)\]$/);
+    const slice_match = /^(.+)\[(-?\d*):(-?\d*)\]$/.exec(name);
     if (slice_match) {
         name = slice_match[1];
         start = slice_match[2] ? parseInt(slice_match[2]) : null;
@@ -30,14 +30,14 @@ export function parse_curve_ref(ref) {
 // Apply slicing to array (Python-style negative indices supported)
 export function apply_slice(arr, start, end) {
     const len = arr.length;
-    let s = start ?? 0;
-    let e = end ?? len;
+    let start_idx = start ?? 0;
+    let end_idx = end ?? len;
     // Handle negative indices
-    if (s < 0)
-        s = Math.max(0, len + s);
-    if (e < 0)
-        e = Math.max(0, len + e);
-    return arr.slice(s, e);
+    if (start_idx < 0)
+        start_idx = Math.max(0, len + start_idx);
+    if (end_idx < 0)
+        end_idx = Math.max(0, len + end_idx);
+    return arr.slice(start_idx, end_idx);
 }
 // Expand bounds to vertex list
 function expand_bounds(bounds, curves) {
@@ -57,7 +57,7 @@ function expand_bounds(bounds, curves) {
             }
             // Apply reverse first (to match Python's `reversed(curve)[1:]` pattern)
             if (ref.reverse) {
-                points = [...points].reverse();
+                points = points.toReversed();
             }
             // Then apply slice
             points = apply_slice(points, ref.start, ref.end);

package/dist/phase-diagram/colors.js

@@ -1,8 +1,6 @@
 // Phase diagram color palette
 // Keys can be referenced in diagram JSON files
-function rgba(r, g, b, a = 0.6) {
-    return `rgba(${r}, ${g}, ${b}, ${a})`;
-}
+const rgba = (r, g, b, a = 0.6) => `rgba(${r}, ${g}, ${b}, ${a})`;
 // Color palette for diagram JSON files - keyed colors that can be referenced by name
 export const DIAGRAM_COLORS = {
     // Single-phase regions (alpha=0.6)

package/dist/phase-diagram/index.d.ts

@@ -4,8 +4,10 @@ export * from './diagram-input';
 export { default as IsobaricBinaryPhaseDiagram } from './IsobaricBinaryPhaseDiagram.svelte';
 export * from './parse';
 export { default as PhaseDiagramControls } from './PhaseDiagramControls.svelte';
+export { default as PhaseDiagramEditorPane } from './PhaseDiagramEditorPane.svelte';
 export { default as PhaseDiagramExportPane } from './PhaseDiagramExportPane.svelte';
 export { default as PhaseDiagramTooltip } from './PhaseDiagramTooltip.svelte';
+export { parse_phase_diagram_svg } from './svg-to-diagram';
 export { default as TdbInfoPanel } from './TdbInfoPanel.svelte';
 export * from './types';
 export * from './utils';

package/dist/phase-diagram/index.js

@@ -4,8 +4,10 @@ export * from './diagram-input';
 export { default as IsobaricBinaryPhaseDiagram } from './IsobaricBinaryPhaseDiagram.svelte';
 export * from './parse';
 export { default as PhaseDiagramControls } from './PhaseDiagramControls.svelte';
+export { default as PhaseDiagramEditorPane } from './PhaseDiagramEditorPane.svelte';
 export { default as PhaseDiagramExportPane } from './PhaseDiagramExportPane.svelte';
 export { default as PhaseDiagramTooltip } from './PhaseDiagramTooltip.svelte';
+export { parse_phase_diagram_svg } from './svg-to-diagram';
 export { default as TdbInfoPanel } from './TdbInfoPanel.svelte';
 export * from './types';
 export * from './utils';

package/dist/phase-diagram/parse.js

@@ -44,13 +44,10 @@ export function parse_tdb(content) {
         }
         // Derive binary system from elements (excluding VA)
         const real_elements = data.elements.map((el) => el.symbol).filter(is_real_element);
-        const binary_system = real_elements.length === 2
-            ? [real_elements[0], real_elements[1]]
-            : undefined;
+        const binary_system = real_elements.length === 2 ? [real_elements[0], real_elements[1]] : undefined;
         // Extract temperature range from functions/parameters
         // Find the actual min and max temperatures across all ranges
-        let min_temp = Infinity;
-        let max_temp = -Infinity;
+        let [min_temp, max_temp] = [Infinity, -Infinity];
         for (const func of data.functions) {
             for (const range of func.temperature_ranges) {
                 if (range.min < min_temp)
@@ -152,7 +149,7 @@ const LINE_PARSERS = [
         prefix: `PARAMETER `,
         pattern: /PARAMETER\s+(\w+)\(([^)]+)\)\s+(.+?)!/i,
         handler: (match, data) => {
-            const spec_match = match[2].match(/([^,]+),([^;]+);(\d+)/);
+            const spec_match = /([^,]+),([^;]+);(\d+)/.exec(match[2]);
             if (spec_match) {
                 data.parameters.push({
                     type: match[1],
@@ -172,7 +169,7 @@ function parse_temperature_ranges(body) {
         const trimmed = segment.trim();
         if (!trimmed)
             continue;
-        const temp_match = trimmed.match(/^([\d.E+-]+)\s+(.+)/i);
+        const temp_match = /^([\d.E+-]+)\s+(.+)/i.exec(trimmed);
         if (temp_match) {
             const next_temp = parseFloat(temp_match[1]);
             const expr = temp_match[2].replace(/\s+[YN]\s*$/, ``).trim();
@@ -193,7 +190,7 @@ function parse_tdb_line(line, data) {
                 parser.handler(match, data);
             else if (parser.prefix === `ELEMENT `) {
                 // Fallback for simpler ELEMENT format: ELEMENT AL FCC_A1!
-                const simple_match = line.match(/ELEMENT\s+(\S+)\s+(\S+)/i);
+                const simple_match = /ELEMENT\s+(\S+)\s+(\S+)/i.exec(line);
                 if (simple_match) {
                     data.elements.push({
                         symbol: simple_match[1].toUpperCase(),
@@ -211,7 +208,11 @@ function parse_tdb_line(line, data) {
 }
 // Get a normalized system name from elements (e.g., "AL-ZN" always alphabetically sorted)
 export function get_system_name(elements) {
-    return elements.filter(is_real_element).map((el) => el.toUpperCase()).sort().join(`-`);
+    return elements
+        .filter(is_real_element)
+        .map((el) => el.toUpperCase())
+        .sort()
+        .join(`-`);
 }
 // Check if a TDB file represents a binary system
 export function is_binary_system(tdb_data) {

package/dist/phase-diagram/svg-to-diagram.d.ts

@@ -0,0 +1,2 @@
+import type { DiagramInput } from './diagram-input';
+export declare function parse_phase_diagram_svg(svg_string: string): DiagramInput;