matterviz 0.4.1 → 0.4.3

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -3,6 +3,7 @@
   // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
   import { css_color_to_hex } from '../colors'
   import { format_num } from '../labels'
+  import NumberRangeInput from '../layout/NumberRangeInput.svelte'
   import SettingsSection from '../layout/SettingsSection.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import type { AxisConfig } from '../plot'
@@ -78,9 +79,7 @@
   }
 
   // Helper to update nested config properties
-  function update_nested<
-    K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>,
-  >(
+  function update_nested<K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>>(
     key: K,
     prop: string,
     value: string | number,
@@ -101,25 +100,6 @@
   const has_special_points = $derived((data?.special_points?.length ?? 0) > 0)
 </script>
 
-<!-- Reusable snippet for number + range input pairs -->
-{#snippet num_range(
-  label: string,
-  value: number,
-  min: number,
-  max: number,
-  step: number,
-  on_change: (val: number) => void,
-  tip: string,
-)}
-  {@const oninput = (ev: Event & { currentTarget: HTMLInputElement }) =>
-    on_change(Number(ev.currentTarget.value))}
-  <label {@attach tooltip({ content: tip })}>
-    {label}
-    <input type="number" {min} {max} {step} {value} {oninput} />
-    <input type="range" {min} {max} {step} {value} {oninput} />
-  </label>
-{/snippet}
-
 <DraggablePane
   bind:show={controls_open}
   pane_props={{
@@ -177,9 +157,7 @@
           Special Pts
         </label>
       {/if}
-      <label
-        {@attach tooltip({ content: `Show component labels at axes` })}
-      >
+      <label {@attach tooltip({ content: `Show component labels at axes` })}>
         <input type="checkbox" bind:checked={show_component_labels} />
         Comp. Labels
       </label>
@@ -195,43 +173,40 @@
     }}
     on_reset={() => {
       update_config(`font_size`, PHASE_DIAGRAM_DEFAULTS.font_size)
-      update_config(
-        `special_point_radius`,
-        PHASE_DIAGRAM_DEFAULTS.special_point_radius,
-      )
+      update_config(`special_point_radius`, PHASE_DIAGRAM_DEFAULTS.special_point_radius)
     }}
   >
-    {@render num_range(
-        `Font size`,
-        merged_config.font_size,
-        8,
-        20,
-        1,
-        (val) => update_config(`font_size`, val),
-        `Font size for axis labels and tick marks`,
-      )}
+    <NumberRangeInput
+      min={8}
+      max={20}
+      step={1}
+      title="Font size for axis labels and tick marks"
+      bind:value={() => merged_config.font_size, (val) => update_config(`font_size`, val)}
+      >Font size</NumberRangeInput
+    >
     {#if has_special_points}
-      {@render num_range(
-        `Special pt radius`,
-        merged_config.special_point_radius,
-        2,
-        12,
-        1,
-        (val) => update_config(`special_point_radius`, val),
-        `Radius of special point markers (eutectic, peritectic, etc.)`,
-      )}
+      <NumberRangeInput
+        min={2}
+        max={12}
+        step={1}
+        title="Radius of special point markers (eutectic, peritectic, etc.)"
+        bind:value={
+          () => merged_config.special_point_radius,
+          (val) => update_config(`special_point_radius`, val)
+        }>Special pt radius</NumberRangeInput
+      >
     {/if}
   </SettingsSection>
 
   <!-- Colors Section -->
   {@const color_options = [
-      [`background`, `#ffffff`, `Background`, `Background color of the plot area`],
-      [`grid`, `#888888`, `Grid`, `Color of grid lines`],
-      [`boundary`, `#333333`, `Boundaries`, `Color of phase boundary lines`],
-      [`special_point`, `#d32f2f`, `Special Pts`, `Color of special point markers`],
-      [`axis`, `#333333`, `Axis`, `Color of axis lines`],
-      [`text`, `#333333`, `Text`, `Color of text labels`],
-    ] as const}
+    [`background`, `#ffffff`, `Background`, `Background color of the plot area`],
+    [`grid`, `#888888`, `Grid`, `Color of grid lines`],
+    [`boundary`, `#333333`, `Boundaries`, `Color of phase boundary lines`],
+    [`special_point`, `#d32f2f`, `Special Pts`, `Color of special point markers`],
+    [`axis`, `#333333`, `Axis`, `Color of axis lines`],
+    [`text`, `#333333`, `Text`, `Color of text labels`],
+  ] as const}
   <SettingsSection
     title="Colors"
     current_values={{ ...merged_config.colors }}
@@ -281,40 +256,43 @@
         </label>
       </div>
     </span>
-    {@render num_range(
-        `Line width`,
-        merged_config.tie_line.stroke_width,
-        0.5,
-        5,
-        0.5,
-        (val) => update_nested(`tie_line`, `stroke_width`, val),
-        `Thickness of the tie-line`,
-      )}
-    {@render num_range(
-        `Endpoint radius`,
-        merged_config.tie_line.endpoint_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `endpoint_radius`, val),
-        `Radius of phase boundary endpoint markers`,
-      )}
-    {@render num_range(
-        `Cursor radius`,
-        merged_config.tie_line.cursor_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `cursor_radius`, val),
-        `Radius of the cursor position marker`,
-      )}
+    <NumberRangeInput
+      min={0.5}
+      max={5}
+      step={0.5}
+      title="Thickness of the tie-line"
+      bind:value={
+        () => merged_config.tie_line.stroke_width,
+        (val) => update_nested(`tie_line`, `stroke_width`, val)
+      }>Line width</NumberRangeInput
+    >
+    <NumberRangeInput
+      min={2}
+      max={10}
+      step={1}
+      title="Radius of phase boundary endpoint markers"
+      bind:value={
+        () => merged_config.tie_line.endpoint_radius,
+        (val) => update_nested(`tie_line`, `endpoint_radius`, val)
+      }>Endpoint radius</NumberRangeInput
+    >
+    <NumberRangeInput
+      min={2}
+      max={10}
+      step={1}
+      title="Radius of the cursor position marker"
+      bind:value={
+        () => merged_config.tie_line.cursor_radius,
+        (val) => update_nested(`tie_line`, `cursor_radius`, val)
+      }>Cursor radius</NumberRangeInput
+    >
   </SettingsSection>
 
   <!-- Axis Configuration Section -->
   {@const axis_configs = [
-      [x_axis, `x`, comp_unit, `composition`],
-      [y_axis, `y`, temp_unit, `temperature`],
-    ] as const}
+    [x_axis, `x`, comp_unit, `composition`],
+    [y_axis, `y`, temp_unit, `temperature`],
+  ] as const}
   <SettingsSection
     title="Axes"
     current_values={{ x_ticks: x_axis.ticks, y_ticks: y_axis.ticks }}
@@ -353,7 +331,9 @@
       }}
     >
       <label
-        {@attach tooltip({ content: `DPI (dots per inch) for PNG export. Higher values produce larger, higher-quality images.` })}
+        {@attach tooltip({
+          content: `DPI (dots per inch) for PNG export. Higher values produce larger, higher-quality images.`,
+        })}
       >
         PNG DPI
         <input
@@ -364,15 +344,11 @@
           style="width: 3.5em"
           bind:value={png_dpi}
         />
-        <input
-          type="range"
-          min={72}
-          max={600}
-          step={50}
-          bind:value={png_dpi}
-        />
-        <span style="font-size: 0.85em; opacity: 0.7">{format_num(png_dpi, `d`)}
-          dpi</span>
+        <input type="range" min={72} max={600} step={50} bind:value={png_dpi} />
+        <span style="font-size: 0.85em; opacity: 0.7"
+          >{format_num(png_dpi, `d`)}
+          dpi</span
+        >
       </label>
     </SettingsSection>
   {/if}

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

@@ -26,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
         controls_open: boolean;
     }]>;
 };
-declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "controls_open" | "x_axis" | "png_dpi" | "config" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "controls_open" | "x_axis" | "config" | "png_dpi" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -111,7 +111,8 @@
     animation: fade-out 3s ease-out forwards;
   }
   @keyframes fade-out {
-    0%, 80% {
+    0%,
+    80% {
       opacity: 1;
     }
     100% {

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -41,8 +41,7 @@
   )
 
   const svg = $derived(
-    svg_element ??
-      (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
+    svg_element ?? (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
   )
 
   const json_export_data = $derived(json_payload ?? data)
@@ -64,23 +63,24 @@
           label: `PNG`,
           disabled: !svg,
           show_dpi: true,
-          on_download: () =>
-            svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi),
+          on_download: () => svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi),
         },
       ],
     },
     {
       title: `Data`,
       tooltip: `Export phase diagram data as JSON`,
-      items: [{
-        label: `JSON`,
-        disabled: !json_export_data,
-        on_download: () => {
-          const content = json_string()
-          if (content) download(content, `${full_filename}.json`, `application/json`)
+      items: [
+        {
+          label: `JSON`,
+          disabled: !json_export_data,
+          on_download: () => {
+            const content = json_string()
+            if (content) download(content, `${full_filename}.json`, `application/json`)
+          },
+          copy_text: json_string,
         },
-        copy_text: json_string,
-      }],
+      ],
     },
   ])
 </script>

package/dist/phase-diagram/PhaseDiagramTooltip.svelte

@@ -51,8 +51,7 @@
   const safe_formula = (comp: string) => sanitize_formula(comp, use_subscripts)
 
   // Convert a temperature from data unit to display unit
-  const to_display = (temp: number): number =>
-    convert_temp(temp, data_unit, temperature_unit)
+  const to_display = (temp: number): number => 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(() => {
@@ -136,14 +135,8 @@
         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,
-        ),
+        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) {
@@ -165,10 +158,14 @@
 <TooltipContent data={hover_info} snippet_arg={hover_info} {tooltip}>
   <div class="phase-diagram-tooltip">
     <header>
-      <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}
+      <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}
     </header>
 
     {#if special_point_info?.description}
@@ -178,54 +175,51 @@
     <dl>
       <dt>Temperature</dt>
       <dd>
-        {
-          format_temperature(
-            to_display(hover_info.temperature),
-            temperature_unit,
-          )
-        }
+        {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>
+          <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)}
         {@html safe_formula(component_b)}
-        <small>({format_composition(1 - hover_info.composition, composition_unit)}
-          {@html safe_formula(component_a)})</small>
+        <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`)}%
           {@html safe_formula(component_b)}
-          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
-            {@html safe_formula(component_a)})</small>
+          <small
+            >({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
+            {@html safe_formula(component_a)})</small
+          >
         </dd>
       {/if}
       {#if stability}
-        <dt>Stable</dt><dd>
-          {format_num(to_display(stability.t_min), `.0f`)} – {
-            format_num(to_display(stability.t_max), `.0f`)
-          } {temperature_unit}
+        <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>
+            <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}
@@ -239,22 +233,22 @@
           <div
             style:width="{ld.fraction_a * 100}%"
             title="{ld.phase_a}: {format_num(ld.fraction_a * 100, `.1f`)}%"
-          >
-          </div>
+          ></div>
           <div
             style:width="{ld.fraction_b * 100}%"
             title="{ld.phase_b}: {format_num(ld.fraction_b * 100, `.1f`)}%"
-          >
-          </div>
+          ></div>
           <i style:left="{ld.fraction_a * 100}%"></i>
         </div>
         <div class="phase-info">
-          <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>
+          <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}
@@ -263,11 +257,13 @@
       {@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),
+        to_display(hover_info.temperature) - to_display(hover_info.temperature - delta_t),
       )}
       <div class="boundary-info">
-        {Math.round(display_delta)} {temperature_unit} {label} {type}
+        {Math.round(display_delta)}
+        {temperature_unit}
+        {label}
+        {type}
       </div>
     {/if}
   </div>

package/dist/phase-diagram/TdbInfoPanel.svelte

@@ -20,12 +20,8 @@
     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,
-  )
+  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}>
@@ -38,23 +34,30 @@
       <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}
+      <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>
+        <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}
+      {#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>
+          <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}
@@ -71,16 +74,19 @@
       <div class="notice warning">
         <p>
           ℹ No pre-computed diagram. Use <a href="https://pycalphad.org" target="_blank"
-          >pycalphad</a>:
+            >pycalphad</a
+          >:
         </p>
         <pre>
-<code>from pycalphad import Database, binplot
+<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>
+})</code
+          ></pre>
       </div>
     {/if}
   {:else}

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

@@ -19,11 +19,11 @@ export function parse_curve_ref(ref) {
         name = name.slice(1);
     }
     // Check for slice suffix [start:end]
-    const slice_match = /^(.+)\[(-?\d*):(-?\d*)\]$/.exec(name);
+    const slice_match = /^(?<base>.+)\[(?<start>-?\d*):(?<end>-?\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;
+        start = slice_match[2] ? Number(slice_match[2]) : null;
+        end = slice_match[3] ? Number(slice_match[3]) : null;
     }
     return { name, reverse, start, end };
 }
@@ -147,12 +147,7 @@ export function build_diagram(input) {
         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,
-        })),
+        special_points,
         ...(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/diagram-input.d.ts

@@ -20,10 +20,9 @@ export interface RegionInput {
     bounds: BoundElement[];
     label_position?: DiagramPoint;
 }
-export type SpecialPointInput = SpecialPoint;
 export interface DiagramInput {
     meta: DiagramInputMeta;
     curves: Record<string, DiagramPoint[]>;
     regions: RegionInput[];
-    special_points?: SpecialPointInput[];
+    special_points?: SpecialPoint[];
 }