matterviz 0.3.4 → 0.3.6

package/dist/src/lib/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>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/src/lib/phase-diagram/build-diagram.ts

@@ -0,0 +1,186 @@
+// 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'
+import type { BoundElement, DiagramInput, DiagramPoint } from './diagram-input'
+import type { BoundaryType, PhaseBoundary, PhaseDiagramData, PhaseRegion } from './types'
+
+// Parse curve reference syntax: 'curve_name', '~curve_name', 'curve_name[1:]', etc.
+export interface CurveRef {
+  name: string
+  reverse: boolean
+  start: number | null // null means from beginning
+  end: number | null // null means to end
+}
+
+export function parse_curve_ref(ref: string): CurveRef {
+  let name = ref
+  let reverse = false
+  let start: number | null = null
+  let end: number | null = 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]) : null
+    end = slice_match[3] ? parseInt(slice_match[3]) : null
+  }
+
+  return { name, reverse, start, end }
+}
+
+// Apply slicing to array (Python-style negative indices supported)
+export function apply_slice<T>(arr: T[], start: number | null, end: number | null): T[] {
+  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: BoundElement[],
+  curves: Record<string, DiagramPoint[]>,
+): DiagramPoint[] {
+  const vertices: DiagramPoint[] = []
+
+  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: DiagramPoint[]): DiagramPoint[] {
+  if (vertices.length <= 1) return vertices
+
+  const result: DiagramPoint[] = [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: string): BoundaryType {
+  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: BoundaryType): PhaseBoundary[`style`] {
+  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: DiagramInput): PhaseDiagramData {
+  const { meta, curves, regions, special_points } = input
+
+  // Build regions by expanding bounds to vertices
+  const built_regions: PhaseRegion[] = 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: PhaseBoundary[] = 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/src/lib/phase-diagram/colors.ts

@@ -0,0 +1,58 @@
+// Phase diagram color palette
+// Keys can be referenced in diagram JSON files
+
+const rgba = (r: number, g: number, b: number, a: number = 0.6): string =>
+  `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),
+} as const
+
+export type DiagramColorKey = keyof typeof DIAGRAM_COLORS
+
+// Resolve color from DIAGRAM_COLORS key or pass through raw CSS color string
+export function resolve_diagram_color(color: string): string {
+  const resolved = (DIAGRAM_COLORS as Record<string, string>)[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/src/lib/phase-diagram/diagram-input.ts

@@ -0,0 +1,40 @@
+// Input types for compact phase diagram definitions
+// These are transformed by build-diagram.ts into full PhaseDiagramData
+
+import type { Vec2 } from '$lib/math'
+import type { CompUnit, PseudoBinaryMetadata, SpecialPoint, TempUnit } from './types'
+
+// A point is [composition, temperature] for phase diagram curves
+export type DiagramPoint = Vec2
+export type TempRange = Vec2 // [min, max]
+
+// A bound can be a curve reference (string) or an inline point
+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 // key into DIAGRAM_COLORS or rgba string
+  bounds: BoundElement[] // curve refs or inline [x,t] points
+  label_position?: DiagramPoint
+}
+
+export type SpecialPointInput = SpecialPoint
+
+export interface DiagramInput {
+  meta: DiagramInputMeta
+  curves: Record<string, DiagramPoint[]>
+  regions: RegionInput[]
+  special_points?: SpecialPointInput[]
+}

package/dist/src/lib/phase-diagram/index.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'