matterviz 0.3.6 → 0.4.0

package/dist/phase-diagram/TdbInfoPanel.svelte

@@ -0,0 +1,203 @@
+<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}>
+  <h3 id="tdb-file-parsed">TDB File Parsed</h3>
+
+  {#if result.success && result.data}
+    {@const { phases, functions, parameters } = result.data}
+    {@const sys = system_name || result.binary_system?.join(`-`) || `Unknown`}
+    <dl class="info-grid">
+      <dt>System</dt>
+      <dd>{sys}</dd>
+      <dt>Phases</dt>
+      <dd class="phases">{#each phases as { name } (name)}<span>{name}</span>{/each}</dd>
+      {#if model_summary}<dt>Models</dt><dd>{model_summary}</dd>{/if}
+      <dt>Funcs / Params</dt>
+      <dd>{functions.length} / {parameters.length}</dd>
+      {#if result.temperature_range}
+        {@const [t_min, t_max] = result.temperature_range}
+        <dt>T Range</dt><dd>{t_min} – {t_max} K</dd>
+      {/if}
+      {#if reference}<dt>Ref</dt><dd class="ref" title={reference}>{reference}</dd>{/if}
+    </dl>
+
+    {#if has_precomputed}
+      <p class="notice success">
+        ✓ {#if is_precomputed_loaded}
+          <strong>Phase diagram loaded</strong> ({sys}.json)
+          <small>TDB contains model parameters. Boundaries computed offline via
+            <a href="https://pycalphad.org" target="_blank">pycalphad</a>.</small>
+        {:else}
+          Pre-computed diagram available!
+          {#if on_load_precomputed}
+            <button class="load-btn" onclick={on_load_precomputed}>Load</button>
+          {/if}
+        {/if}
+      </p>
+    {:else}
+      {@const elems = result.data.elements
+        .map((element) => element.symbol)
+        .filter((symbol) => symbol !== `VA` && symbol !== `/-`)}
+      {@const [el_a, el_b] = [elems[0] ?? `EL1`, elems[1] ?? `EL2`]}
+      {@const tdb = system_name || `your_system`}
+      <div class="notice warning">
+        <p>
+          ℹ No pre-computed diagram. Use <a href="https://pycalphad.org" target="_blank"
+          >pycalphad</a>:
+        </p>
+        <pre>
+<code>from pycalphad import Database, binplot
+import pycalphad.variables as v
+
+db = Database('{tdb}.tdb')
+binplot(db, ['{el_a}', '{el_b}', 'VA'], list(db.phases.keys()), {`{`}
+    v.X('{el_b}'): (0, 1, 0.01), v.T: (300, 2000, 10), v.P: 101325, v.N: 1
+})</code></pre>
+      </div>
+    {/if}
+  {:else}
+    <p class="error">⚠ Failed to parse TDB file: {result.error}</p>
+  {/if}
+</div>
+
+<style>
+  .tdb-info-panel {
+    --success-color: var(--tdb-success-color, #22c55e);
+    --success-hover: var(--tdb-success-hover, #16a34a);
+    --warning-color: var(--tdb-warning-color, #eab308);
+    --error-color: var(--tdb-error-color, #ef4444);
+    background: var(--surface-bg, rgba(255, 255, 255, 0.05));
+    border: 1px solid var(--border-color, #444);
+    border-radius: var(--border-radius, 8px);
+    padding: 8pt 9pt;
+    font-size: 10pt;
+  }
+  h3 {
+    margin: 0 0 5pt 0;
+    font-size: 11pt;
+    color: var(--text-color, #fff);
+    border-bottom: 1px solid var(--border-color, #444);
+    padding-bottom: 4pt;
+  }
+  .info-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4pt 12pt;
+    margin: 0 0 6pt;
+    align-items: center;
+  }
+  dt {
+    color: var(--text-color-muted, #888);
+    font-weight: 500;
+    &::after {
+      content: ':';
+    }
+  }
+  dd {
+    margin: 0 12pt 0 4pt;
+    color: var(--text-color, #fff);
+
+    &.ref {
+      max-width: 200pt;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  dd.phases {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2pt;
+
+    & > span {
+      background: var(--accent-color, #6366f1);
+      color: white;
+      padding: 0 5pt;
+      border-radius: 3px;
+      font-family: monospace;
+    }
+  }
+  .notice {
+    padding: 6pt;
+    border-radius: 6px;
+    margin: 12pt 0 0;
+
+    &.success {
+      background: rgba(from var(--success-color) r g b / 0.15);
+      border: 1px solid rgba(from var(--success-color) r g b / 0.3);
+    }
+    &.warning {
+      background: rgba(from var(--warning-color) r g b / 0.1);
+      border: 1px solid rgba(from var(--warning-color) r g b / 0.3);
+    }
+  }
+  .notice small {
+    display: block;
+    margin-top: 4pt;
+    font-size: 10pt;
+    color: var(--text-color-muted, #888);
+  }
+  .notice p {
+    margin: 0 0 6pt;
+  }
+  pre {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 6pt;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 6pt 0 0;
+  }
+  code {
+    font-family: 'Fira Code', 'Monaco', monospace;
+  }
+  .load-btn {
+    background: var(--success-color);
+    color: white;
+    border: none;
+    padding: 4pt 10pt;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    margin-left: 8pt;
+  }
+  .load-btn:hover {
+    background: var(--success-hover);
+  }
+  .error {
+    color: var(--error-color);
+    background: rgba(from var(--error-color) r g b / 0.1);
+    padding: 9pt;
+    border-radius: 6px;
+    margin: 0;
+  }
+  a {
+    color: var(--accent-color, #6366f1);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { TdbParseResult } from './parse';
+interface Props {
+    result: TdbParseResult;
+    system_name?: string;
+    has_precomputed?: boolean;
+    is_precomputed_loaded?: boolean;
+    on_load_precomputed?: () => void;
+    style?: string;
+}
+declare const TdbInfoPanel: import("svelte").Component<Props, {}, "">;
+type TdbInfoPanel = ReturnType<typeof TdbInfoPanel>;
+export default TdbInfoPanel;

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

@@ -0,0 +1,11 @@
+import type { DiagramInput } from './diagram-input';
+import type { PhaseDiagramData } from './types';
+export interface CurveRef {
+    name: string;
+    reverse: boolean;
+    start: number | null;
+    end: number | null;
+}
+export declare function parse_curve_ref(ref: string): CurveRef;
+export declare function apply_slice<T>(arr: T[], start: number | null, end: number | null): T[];
+export declare function build_diagram(input: DiagramInput): PhaseDiagramData;

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

@@ -0,0 +1,160 @@
+// Build PhaseDiagramData from compact DiagramInput JSON format
+//
+// The compact format uses curve references in region bounds to avoid duplicating points.
+// Curve reference syntax:
+//   - "curve_name" - use all points from the curve
+//   - "~curve_name" - use reversed curve points
+//   - "curve_name[1:]" - Python-style slice (skip first point)
+//   - "curve_name[:-1]" - slice (skip last point)
+//   - "~curve_name[1:-1]" - reverse then slice
+import { resolve_diagram_color } from './colors';
+export function parse_curve_ref(ref) {
+    let name = ref;
+    let reverse = false;
+    let start = null;
+    let end = null;
+    // Check for reverse prefix
+    if (name.startsWith(`~`)) {
+        reverse = true;
+        name = name.slice(1);
+    }
+    // Check for slice suffix [start:end]
+    const slice_match = /^(.+)\[(-?\d*):(-?\d*)\]$/.exec(name);
+    if (slice_match) {
+        name = slice_match[1];
+        start = slice_match[2] ? parseInt(slice_match[2], 10) : null;
+        end = slice_match[3] ? parseInt(slice_match[3], 10) : null;
+    }
+    return { name, reverse, start, end };
+}
+// Apply slicing to array (Python-style negative indices supported)
+export function apply_slice(arr, start, end) {
+    const len = arr.length;
+    let start_idx = start ?? 0;
+    let end_idx = end ?? len;
+    // Handle negative indices
+    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) {
+    const vertices = [];
+    for (const bound of bounds) {
+        if (Array.isArray(bound)) {
+            // Inline point
+            vertices.push(bound);
+        }
+        else {
+            // Curve reference
+            const ref = parse_curve_ref(bound);
+            let points = curves[ref.name];
+            if (!points) {
+                console.warn(`Unknown curve: ${ref.name}`);
+                continue;
+            }
+            // Apply reverse first (to match Python's `reversed(curve)[1:]` pattern)
+            if (ref.reverse) {
+                points = points.toReversed();
+            }
+            // Then apply slice
+            points = apply_slice(points, ref.start, ref.end);
+            vertices.push(...points);
+        }
+    }
+    return vertices;
+}
+// Remove consecutive duplicate vertices
+function dedupe_consecutive_vertices(vertices) {
+    if (vertices.length <= 1)
+        return vertices;
+    const result = [vertices[0]];
+    for (let idx = 1; idx < vertices.length; idx++) {
+        const prev = result[result.length - 1];
+        const curr = vertices[idx];
+        if (curr[0] !== prev[0] || curr[1] !== prev[1]) {
+            result.push(curr);
+        }
+    }
+    // Remove redundant closing vertex if polygon is explicitly closed
+    if (result.length > 1) {
+        const first = result[0];
+        const last = result[result.length - 1];
+        if (first[0] === last[0] && first[1] === last[1]) {
+            result.pop();
+        }
+    }
+    return result;
+}
+// Infer boundary type from curve name
+function infer_boundary_type(curve_name) {
+    const lower = curve_name.toLowerCase();
+    if (lower.startsWith(`liquidus`))
+        return `liquidus`;
+    if (lower.startsWith(`solidus`))
+        return `solidus`;
+    if (lower.startsWith(`solvus`))
+        return `solvus`;
+    if (lower.startsWith(`eutectic`))
+        return `eutectic`;
+    if (lower.startsWith(`peritectic`))
+        return `peritectic`;
+    return `custom`;
+}
+// Get default boundary style based on type
+function get_boundary_style(btype) {
+    if (btype === `liquidus`)
+        return { color: `#1565c0`, width: 2.5 };
+    if (btype === `solidus`)
+        return { color: `#2e7d32`, width: 2, dash: `4,2` };
+    if (btype === `solvus`)
+        return { color: `#7b1fa2`, width: 1.5, dash: `2,2` };
+    if (btype === `eutectic` || btype === `peritectic`) {
+        return { color: `#d32f2f`, width: 2 };
+    }
+    return { color: `#333`, width: 1.5 };
+}
+// Build full PhaseDiagramData from compact DiagramInput JSON format
+// Expands curve references in region bounds to full vertex lists
+// and applies default styling based on boundary type names
+export function build_diagram(input) {
+    const { meta, curves, regions, special_points } = input;
+    // Build regions by expanding bounds to vertices
+    const built_regions = regions.map((region) => {
+        const vertices = dedupe_consecutive_vertices(expand_bounds(region.bounds, curves));
+        return {
+            id: region.id,
+            name: region.name,
+            vertices,
+            color: resolve_diagram_color(region.color),
+            ...(region.label_position && { label_position: region.label_position }),
+        };
+    });
+    // Build boundaries from all curves
+    const boundaries = Object.entries(curves).map(([name, points]) => {
+        const btype = infer_boundary_type(name);
+        const style = get_boundary_style(btype);
+        return { id: name, type: btype, points, style };
+    });
+    // Build the full diagram data (spread optional fields conditionally)
+    return {
+        components: meta.components,
+        temperature_range: meta.temp_range,
+        temperature_unit: meta.temp_unit,
+        composition_unit: meta.comp_unit,
+        title: meta.title,
+        regions: built_regions,
+        boundaries,
+        special_points: special_points?.map((sp) => ({
+            id: sp.id,
+            type: sp.type,
+            position: sp.position,
+            label: sp.label,
+        })),
+        ...(meta.pseudo_binary && { pseudo_binary: meta.pseudo_binary }),
+        ...(meta.x_axis_label && { x_axis_label: meta.x_axis_label }),
+        ...(meta.y_axis_label && { y_axis_label: meta.y_axis_label }),
+    };
+}

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

@@ -0,0 +1,35 @@
+export declare const DIAGRAM_COLORS: {
+    readonly liquid: string;
+    readonly fcc_a1: string;
+    readonly fcc_cu: string;
+    readonly bcc_a2: string;
+    readonly hcp_a3: string;
+    readonly diamond: string;
+    readonly intermetallic: string;
+    readonly intermetallic_alt: string;
+    readonly intermetallic_blue: string;
+    readonly gold: string;
+    readonly two_phase: string;
+    readonly two_phase_fcc_liquid: string;
+    readonly two_phase_fcc_alt: string;
+    readonly two_phase_bcc_liquid: string;
+    readonly two_phase_hcp_liquid: string;
+    readonly two_phase_intermetallic: string;
+    readonly two_phase_intermetallic_alt: string;
+    readonly two_phase_theta_liquid: string;
+    readonly two_phase_theta_cu: string;
+    readonly two_phase_alt: string;
+    readonly two_phase_mixed: string;
+    readonly two_phase_gamma: string;
+    readonly two_phase_gamma_hcp: string;
+    readonly two_phase_ausn: string;
+    readonly two_phase_si: string;
+    readonly two_phase_au_liquid: string;
+    readonly two_phase_au_ausn: string;
+    readonly two_phase_eta: string;
+    readonly two_phase_alfe: string;
+    readonly two_phase_alfe_bcc: string;
+    readonly two_phase_beta_gamma: string;
+};
+export type DiagramColorKey = keyof typeof DIAGRAM_COLORS;
+export declare function resolve_diagram_color(color: string): string;

package/dist/phase-diagram/colors.js

@@ -0,0 +1,51 @@
+// Phase diagram color palette
+// Keys can be referenced in diagram JSON files
+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)
+    liquid: rgba(135, 206, 250),
+    fcc_a1: rgba(144, 238, 144),
+    fcc_cu: rgba(255, 180, 150),
+    bcc_a2: rgba(255, 182, 193),
+    hcp_a3: rgba(221, 160, 221),
+    diamond: rgba(173, 216, 230),
+    intermetallic: rgba(255, 200, 150),
+    intermetallic_alt: rgba(200, 180, 255),
+    intermetallic_blue: rgba(180, 200, 230),
+    gold: rgba(255, 215, 0),
+    // Two-phase regions (alpha=0.5)
+    two_phase: rgba(255, 235, 156, 0.5),
+    two_phase_fcc_liquid: rgba(180, 230, 180, 0.5),
+    two_phase_fcc_alt: rgba(200, 230, 200, 0.5),
+    two_phase_bcc_liquid: rgba(255, 200, 200, 0.5),
+    two_phase_hcp_liquid: rgba(230, 180, 230, 0.5),
+    two_phase_intermetallic: rgba(255, 220, 180, 0.5),
+    two_phase_intermetallic_alt: rgba(255, 210, 180, 0.5),
+    two_phase_theta_liquid: rgba(255, 235, 200, 0.5),
+    two_phase_theta_cu: rgba(255, 200, 180, 0.5),
+    two_phase_alt: rgba(220, 200, 240, 0.5),
+    two_phase_mixed: rgba(230, 200, 220, 0.5),
+    two_phase_gamma: rgba(180, 200, 250, 0.5),
+    two_phase_gamma_hcp: rgba(230, 230, 180, 0.5),
+    two_phase_ausn: rgba(200, 180, 230, 0.5),
+    two_phase_si: rgba(180, 220, 250, 0.5),
+    two_phase_au_liquid: rgba(255, 235, 150, 0.5),
+    two_phase_au_ausn: rgba(255, 230, 180, 0.5),
+    two_phase_eta: rgba(230, 200, 230, 0.5),
+    two_phase_alfe: rgba(220, 200, 255, 0.5),
+    two_phase_alfe_bcc: rgba(230, 200, 200, 0.5),
+    two_phase_beta_gamma: rgba(230, 200, 180, 0.5),
+};
+// Resolve color from DIAGRAM_COLORS key or pass through raw CSS color string
+export function resolve_diagram_color(color) {
+    const resolved = DIAGRAM_COLORS[color];
+    const is_raw_color = color.startsWith(`rgb`) ||
+        color.startsWith(`hsl`) ||
+        color.startsWith(`#`) ||
+        color.startsWith(`var(`);
+    if (!resolved && !is_raw_color) {
+        console.warn(`Unknown diagram color key: "${color}". Using as raw color value.`);
+    }
+    return resolved ?? color;
+}

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

@@ -0,0 +1,29 @@
+import type { Vec2 } from '../math';
+import type { CompUnit, PseudoBinaryMetadata, SpecialPoint, TempUnit } from './types';
+export type DiagramPoint = Vec2;
+export type TempRange = Vec2;
+export type BoundElement = string | DiagramPoint;
+export interface DiagramInputMeta {
+    components: [string, string];
+    temp_range: TempRange;
+    temp_unit?: TempUnit;
+    comp_unit?: CompUnit;
+    title?: string;
+    pseudo_binary?: PseudoBinaryMetadata;
+    x_axis_label?: string;
+    y_axis_label?: string;
+}
+export interface RegionInput {
+    id: string;
+    name: string;
+    color: string;
+    bounds: BoundElement[];
+    label_position?: DiagramPoint;
+}
+export type SpecialPointInput = SpecialPoint;
+export interface DiagramInput {
+    meta: DiagramInputMeta;
+    curves: Record<string, DiagramPoint[]>;
+    regions: RegionInput[];
+    special_points?: SpecialPointInput[];
+}

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

@@ -0,0 +1,3 @@
+// Input types for compact phase diagram definitions
+// These are transformed by build-diagram.ts into full PhaseDiagramData
+export {};

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

@@ -0,0 +1,13 @@
+export { build_diagram } from './build-diagram';
+export * from './colors';
+export type * 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 type * from './types';
+export * from './utils';

package/dist/phase-diagram/index.js

@@ -0,0 +1,11 @@
+export { build_diagram } from './build-diagram';
+export * from './colors';
+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 './utils';

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

@@ -0,0 +1,55 @@
+export declare const TDB_TEMP_DEFAULTS: {
+    readonly min: 298.15;
+    readonly max_fallback: 3000;
+    readonly max_range: 5000;
+};
+export interface TdbElement {
+    symbol: string;
+    reference_phase: string;
+    mass: number;
+    enthalpy: number;
+    entropy: number;
+}
+export interface TdbPhase {
+    name: string;
+    model_hints: string;
+    sublattice_count: number;
+    sublattice_sites: number[];
+    constituents?: string[][];
+}
+export interface TdbFunction {
+    name: string;
+    expression: string;
+    temperature_ranges: {
+        min: number;
+        max: number;
+        expr: string;
+    }[];
+}
+export interface TdbParameter {
+    type: string;
+    phase: string;
+    constituents: string[];
+    order: number;
+    expression: string;
+}
+export interface TdbData {
+    elements: TdbElement[];
+    phases: TdbPhase[];
+    functions: TdbFunction[];
+    parameters: TdbParameter[];
+    comments: string[];
+    raw_content: string;
+}
+export interface TdbParseResult {
+    success: boolean;
+    data: TdbData | null;
+    error?: string;
+    binary_system?: [string, string];
+    available_phases?: string[];
+    temperature_range?: [number, number];
+}
+export declare function parse_tdb(content: string): TdbParseResult;
+export declare const get_system_name: (elements: string[]) => string;
+export declare const is_binary_system: (tdb_data: TdbData) => boolean;
+export declare function normalize_system_name(input: string): string;