matterviz 0.3.4 → 0.3.6

package/dist/src/lib/convex-hull/ConvexHullTooltip.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" generics="EntryT extends PhaseData = PhaseData">
+  // Unified tooltip component for convex hull diagrams
+  import { ELEM_SYMBOL_TO_NAME, get_electro_neg_formula } from '$lib/composition'
+  import type { ElementSymbol } from '$lib/element'
+  import { format_num } from '$lib/labels'
+  import { sanitize_html } from '$lib/sanitize'
+  import { TooltipContent } from '$lib/tooltip'
+  import type { PolymorphStats } from './helpers'
+  import type { ConvexHullTooltipProp, TooltipSnippetProps } from './index'
+  import type { HighlightStyle, PhaseData } from './types'
+  import { is_unary_entry } from './helpers'
+
+  let {
+    entry,
+    polymorph_stats_map,
+    highlight_style,
+    tooltip,
+    show_fractional = true,
+  }: {
+    entry: EntryT
+    polymorph_stats_map?: Map<string, PolymorphStats>
+    highlight_style?: HighlightStyle
+    tooltip?: ConvexHullTooltipProp<EntryT>
+    show_fractional?: boolean
+  } = $props()
+
+  const is_element = $derived(is_unary_entry(entry))
+  const elem_symbol = $derived(
+    is_element
+      ? (Object.entries(entry.composition).find(([, n]) => n > 0)?.[0] ?? ``)
+      : ``,
+  ) as ElementSymbol | ``
+  const elem_name = $derived(elem_symbol && ELEM_SYMBOL_TO_NAME[elem_symbol])
+  const polymorph_stats = $derived(
+    entry.entry_id && polymorph_stats_map
+      ? polymorph_stats_map.get(entry.entry_id)
+      : null,
+  )
+</script>
+
+<TooltipContent
+  data={entry}
+  snippet_arg={{ entry, highlight_style } as TooltipSnippetProps<EntryT>}
+  {tooltip}
+>
+  <div class="tooltip-content" style:--highlight-color={highlight_style?.color}>
+    {#if highlight_style}
+      <span class="highlight-badge">★ Highlighted</span>
+    {/if}
+
+    <div class="tooltip-title">
+      {#if entry.entry_id}
+        <strong style="display: block">
+          {entry.entry_id}{is_element && elem_name ? ` (${elem_name})` : ``}
+        </strong>
+      {/if}
+      {#if !is_element || !entry.entry_id}
+        <strong style="display: block">
+          {@html sanitize_html(get_electro_neg_formula(entry.composition))}
+        </strong>
+      {/if}
+    </div>
+
+    {#if entry.e_above_hull != null}
+      <div>
+        E<sub>above hull</sub>: {format_num(entry.e_above_hull, `.3~`)} eV/atom
+      </div>
+    {/if}
+    {#if entry.e_form_per_atom != null}
+      <div>E<sub>form</sub>: {format_num(entry.e_form_per_atom, `.3~`)} eV/atom</div>
+    {/if}
+
+    {#if show_fractional && !is_element}
+      {@const total = Object.values(entry.composition).reduce(
+        (sum, amt) => sum + amt,
+        0,
+      )}
+      {#if total > 0}
+        {@const fractions = Object.entries(entry.composition)
+        .filter(([, amt]) => amt > 0)
+        .map(([el, amt]) => `${el}<sub>${format_num(amt / total, `.2~`)}</sub>`)}
+        {#if fractions.length > 1}
+          <div>Fractional: {@html sanitize_html(fractions.join(` `))}</div>
+        {/if}
+      {/if}
+    {/if}
+
+    {#if polymorph_stats}
+      {@const { total, higher, lower, equal } = polymorph_stats}
+      <div
+        class="polymorphs"
+        title="Total structures with same fractional composition. ↑ = higher energy (less stable), ↓ = lower energy (more stable), = equal energy"
+      >
+        Polymorphs:
+        {total}
+        {#if total > 0}
+          <span title="{higher} higher in energy">↑{higher}</span>
+          <span title="{lower} lower in energy">↓{lower}</span>
+          {#if equal > 0}
+            <span title="{equal} equal in energy">={equal}</span>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+  </div>
+</TooltipContent>
+
+<style>
+  .tooltip-content {
+    max-width: var(--tooltip-max-width, 200px);
+    text-align: left;
+  }
+  .tooltip-content > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .highlight-badge {
+    display: block;
+    font-size: 0.75em;
+    font-weight: 600;
+    color: var(--highlight-color, #ff2222);
+    margin-bottom: 4px;
+  }
+  .tooltip-title {
+    margin-bottom: 2px;
+  }
+  .polymorphs span {
+    margin-left: 3px;
+  }
+</style>

package/dist/src/lib/convex-hull/GasPressureControls.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+  import type {
+    GasControlPosition,
+    GasSpecies,
+    GasThermodynamicsConfig,
+  } from '$lib/convex-hull/types'
+  import { sanitize_html } from '$lib/sanitize'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import {
+    compute_gas_chemical_potential,
+    format_chemical_potential,
+    get_default_gas_provider,
+    get_effective_pressures,
+  } from './gas-thermodynamics'
+
+  let {
+    config,
+    pressures = $bindable({}),
+    temperature,
+    position = `top-right`,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    config: GasThermodynamicsConfig
+    pressures: Partial<Record<GasSpecies, number>>
+    temperature: number
+    position?: GasControlPosition
+  } = $props()
+
+  // Log scale range for pressure slider: 10^-10 to 10^2 bar
+  const LOG_P_MIN = -10
+  const LOG_P_MAX = 2
+  const LOG_P_RANGE = LOG_P_MAX - LOG_P_MIN
+  const MIN_PRESSURE = 1e-15 // Safe minimum to avoid log(0) or NaN
+  const THROTTLE_MS = 100
+
+  // Local preview state for smooth slider interaction without causing full hull re-renders
+  let preview_pressures = $state<Partial<Record<GasSpecies, number>>>({})
+  let last_update_time = 0
+
+  // Get provider for chemical potential calculations
+  const provider = $derived(config.provider ?? get_default_gas_provider())
+
+  // Get enabled gases from config
+  const enabled_gases = $derived(config.enabled_gases ?? [])
+
+  // Effective pressures including defaults
+  const effective_pressures = $derived(get_effective_pressures(config))
+
+  // Get current pressure for a gas (preview during drag, committed, or default)
+  function get_pressure(gas: GasSpecies): number {
+    const P = preview_pressures[gas] ?? pressures[gas] ?? effective_pressures[gas]
+    return Number.isFinite(P) && P > 0 ? P : MIN_PRESSURE
+  }
+
+  // Compute chemical potential μ(T,P) for a gas at current temperature and pressure
+  const get_mu = (gas: GasSpecies): number =>
+    compute_gas_chemical_potential(provider, gas, temperature, get_pressure(gas))
+
+  // Convert pressure to log scale slider position (0-100)
+  const pressure_to_slider = (P: number): number =>
+    ((Math.max(LOG_P_MIN, Math.min(LOG_P_MAX, Math.log10(P))) - LOG_P_MIN) /
+      LOG_P_RANGE) * 100
+
+  // Convert slider position (0-100) to pressure
+  const slider_to_pressure = (value: number): number =>
+    Math.pow(10, LOG_P_MIN + (value / 100) * LOG_P_RANGE)
+
+  // Format gas name for display (subscript numbers)
+  const format_gas_name = (gas: GasSpecies): string =>
+    gas.replaceAll(/(\d+)/g, `<sub>$1</sub>`)
+
+  // Format pressure as plain text (no HTML) for the number input
+  function format_pressure(P: number): string {
+    const log_P = Math.log10(P)
+    const exp = Math.round(log_P)
+    if (Math.abs(log_P - exp) < 0.1) return `1e${exp}`
+    if (P >= 0.01 && P < 100) return P.toPrecision(2)
+    return P.toExponential(1)
+  }
+
+  function set_pressure(gas: GasSpecies, value: number): void {
+    const P = slider_to_pressure(value)
+    preview_pressures = { ...preview_pressures, [gas]: P }
+    // Throttle parent updates during drag to prevent hull recomputation on every pixel
+    const now = Date.now()
+    if (now - last_update_time >= THROTTLE_MS) {
+      last_update_time = now
+      pressures = { ...pressures, [gas]: P }
+    }
+  }
+
+  function handle_slider_end(
+    gas: GasSpecies,
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const P = slider_to_pressure(+event.currentTarget.value)
+    pressures = { ...pressures, [gas]: P }
+    // Clear only this gas's preview (don't reset other sliders being dragged simultaneously)
+    const { [gas]: _removed_preview, ...remaining_previews } = preview_pressures
+    preview_pressures = remaining_previews
+  }
+
+  function set_pressure_direct(gas: GasSpecies, value: number): void {
+    const clamped = Math.max(
+      Math.pow(10, LOG_P_MIN),
+      Math.min(Math.pow(10, LOG_P_MAX), value),
+    )
+    pressures = { ...pressures, [gas]: clamped }
+  }
+</script>
+
+{#if enabled_gases.length > 0}
+  <div {...rest} class="pressure-controls {position} {rest.class ?? ``}">
+    {#each enabled_gases as gas (gas)}
+      {@const P = get_pressure(gas)}
+      {@const mu = get_mu(gas)}
+      {@const tooltip_content = `${gas} partial pressure for μ(T,P)\nμ = ${format_chemical_potential(mu, 3)}`}
+      <div
+        class="pressure-slider"
+        {@attach tooltip({ content: tooltip_content })}
+      >
+        <label class="pressure-label">
+          <input
+            type="text"
+            class="pressure-input"
+            value={format_pressure(P)}
+            onchange={(evt) => {
+              const val = Number(evt.currentTarget.value)
+              if (Number.isFinite(val) && val > 0) set_pressure_direct(gas, val)
+              else evt.currentTarget.value = format_pressure(P)
+            }}
+            aria-label="{gas} pressure (bar)"
+          />
+          <span class="gas-name">{@html sanitize_html(format_gas_name(gas))}</span>
+        </label>
+        <div class="slider-wrapper">
+          <span class="pressure-range">
+            10<sup>{LOG_P_MIN}</sup>–10<sup>{LOG_P_MAX}</sup>
+          </span>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="0.5"
+            value={pressure_to_slider(P)}
+            oninput={(evt) => set_pressure(gas, +evt.currentTarget.value)}
+            onchange={(evt) => handle_slider_end(gas, evt)}
+            onmouseup={(evt) => handle_slider_end(gas, evt)}
+            ontouchend={(evt) => handle_slider_end(gas, evt)}
+            aria-label="{gas} partial pressure"
+          />
+        </div>
+        <span class="sr-only" aria-live="polite">
+          {gas} chemical potential: {format_chemical_potential(mu, 2)}
+        </span>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .pressure-controls {
+    position: absolute;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .pressure-controls.top-left {
+    top: calc(1ex + 50px);
+    left: calc(1ex + 10px);
+  }
+  .pressure-controls.top-right {
+    top: calc(1ex + 50px);
+    right: calc(1ex + 75px);
+  }
+  .pressure-controls.bottom-left {
+    bottom: calc(1ex + 50px);
+    left: calc(1ex + 10px);
+  }
+  .pressure-controls.bottom-right {
+    bottom: calc(1ex + 50px);
+    right: calc(1ex + 75px);
+  }
+  .pressure-slider {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--pressure-slider-align, center);
+    gap: 4px;
+    background: color-mix(in srgb, var(--hull-bg, transparent) 80%, transparent);
+    padding: 3px 5px;
+    border-radius: var(--border-radius, 6pt);
+    backdrop-filter: blur(2px);
+  }
+  .slider-wrapper {
+    display: flex;
+    place-items: center;
+    justify-content: var(--slider-justify, center);
+    line-height: 1;
+  }
+  .pressure-slider input[type='range'] {
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  .pressure-label {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .pressure-input {
+    width: 5.5ch;
+    border: 1px solid color-mix(in srgb, currentColor 5%, transparent);
+    border-radius: 3px;
+    background: transparent;
+    text-align: center;
+  }
+  .pressure-input::-webkit-outer-spin-button,
+  .pressure-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .gas-name {
+    font-size: 0.9em;
+  }
+  .gas-name :global(sub) {
+    font-size: 0.7em;
+    vertical-align: sub;
+  }
+  .pressure-range {
+    font-size: 0.7em;
+    opacity: 0.7;
+    white-space: nowrap;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+</style>

package/dist/src/lib/convex-hull/StructurePopup.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type { AnyStructure } from '$lib/structure'
+  import { get_electro_neg_formula } from '$lib/composition'
+  import Icon from '$lib/Icon.svelte'
+  import { format_num } from '$lib/labels'
+  import { DragControlTab } from '$lib/overlays'
+  import { sanitize_formula } from '$lib/sanitize'
+  import { Structure } from '$lib/structure'
+  import type { StructurePopupContext, StructurePopupStats } from './types'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { draggable } from 'svelte-multiselect/attachments'
+
+  let {
+    structure,
+    place_right = true,
+    width = 500,
+    height = 400,
+    onclose,
+    stats,
+    top_left,
+    children,
+    popup_div = $bindable(),
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    structure: AnyStructure
+    place_right?: boolean
+    width?: number
+    height?: number
+    onclose?: () => void
+    stats?: StructurePopupStats
+    top_left?: Snippet<[StructurePopupContext]>
+    children?: Snippet<[StructurePopupContext]>
+    popup_div?: HTMLDivElement
+  } = $props()
+
+  const formula_html = $derived.by(() =>
+    sanitize_formula(get_electro_neg_formula(stats?.formula ?? structure, true)))
+  const context = $derived({ structure, stats, formula_html })
+</script>
+
+{#snippet close_button()}
+  <button class="close-btn" onclick={() => onclose?.()} title="Close (Esc)">
+    <Icon icon="Cross" />
+  </button>
+{/snippet}
+
+<svelte:window
+  onkeydown={(event) => event.key === `Escape` && onclose?.()}
+  onmousedown={(event) => {
+    if (!popup_div || !(event.target instanceof Node)) return
+    if (!popup_div.contains(event.target)) onclose?.()
+  }}
+/>
+
+<div
+  {@attach draggable({
+    handle_selector: `.drag-handle`,
+  })}
+  {...rest}
+  class="structure-popup {place_right ? `right` : `left`} {rest.class ?? ``}"
+  role="dialog"
+  aria-modal="true"
+  tabindex="-1"
+  bind:this={popup_div}
+>
+  <DragControlTab />
+  <div class="structure-popup-content">
+    {#if top_left || stats}
+      <div class="structure-stats">
+        {#if top_left}
+          {@render top_left(context)}
+        {:else if stats}
+          {#if stats.id}
+            ID = {stats.id}<br>
+          {/if}
+          {#if formula_html}
+            {@html formula_html}<br>
+          {/if}
+          {#if stats.e_above_hull != null}
+            E<sub>above hull</sub> = {format_num(stats.e_above_hull, `.3~`)} eV/atom<br>
+          {/if}
+          {#if stats.e_form != null}
+            E<sub>form</sub> = {format_num(stats.e_form, `.3~`)}
+            eV/atom
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    <Structure
+      {structure}
+      {width}
+      {height}
+      top_right_controls={close_button}
+      show_controls="hover"
+      style="--struct-width: {width}px; --struct-height: {height}px; --struct-min-width: 0"
+    />
+    {@render children?.(context)}
+  </div>
+</div>
+
+<style>
+  .structure-popup {
+    position: absolute;
+    box-sizing: border-box;
+    width: max-content;
+    z-index: 10000;
+    overflow: visible;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .structure-popup-content {
+    display: flex;
+    gap: 8px;
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+  }
+  .structure-popup.right {
+    left: calc(100% + var(--structure-popup-gap, 1em));
+  }
+  .structure-popup.left {
+    right: calc(100% + var(--structure-popup-gap, 1em));
+  }
+  .close-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+    font-size: inherit;
+  }
+  .close-btn:hover {
+    background: var(--pane-btn-bg-hover);
+  }
+  .structure-stats {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: transparent;
+    backdrop-filter: blur(8px);
+    color: var(--text-color);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.85em;
+    z-index: 2;
+  }
+</style>

package/dist/src/lib/convex-hull/TemperatureSlider.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    available_temperatures,
+    temperature = $bindable(),
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    available_temperatures: number[]
+    temperature: number
+  } = $props()
+
+  // Local preview state for smooth slider interaction without causing full re-renders
+  let preview_index = $state<number | null>(null)
+  let last_update_time = 0
+  const THROTTLE_MS = 100
+
+  const temp_index = $derived(
+    Math.max(0, available_temperatures.indexOf(temperature)),
+  )
+  const display_index = $derived(preview_index ?? temp_index)
+  const display_temp = $derived(available_temperatures[display_index] ?? temperature)
+
+  function handle_slider_input(
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const new_index = +event.currentTarget.value
+    preview_index = new_index
+    // Throttle parent updates during drag to prevent scene flashing
+    const now = Date.now()
+    if (now - last_update_time >= THROTTLE_MS) {
+      last_update_time = now
+      temperature = available_temperatures[new_index] ?? temperature
+    }
+  }
+
+  function handle_slider_end(
+    event: Event & { currentTarget: HTMLInputElement },
+  ): void {
+    const new_temp = available_temperatures[+event.currentTarget.value]
+    if (new_temp !== undefined) temperature = new_temp
+    preview_index = null
+  }
+
+  function set_closest_temp(value: number): void {
+    temperature = available_temperatures.reduce(
+      (prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev),
+      temperature,
+    )
+  }
+</script>
+
+<div
+  {...rest}
+  class="temperature-slider {rest.class ?? ``}"
+  {@attach tooltip({ content: `Temperature for G(T) free energies` })}
+>
+  <label class="temp-label">
+    <input
+      type="number"
+      class="temp-input"
+      value={display_temp}
+      min={available_temperatures[0] ?? 0}
+      max={available_temperatures.at(-1) ?? 1000}
+      onchange={(evt) => set_closest_temp(+evt.currentTarget.value)}
+      aria-label="Temperature (Kelvin)"
+    />
+    <span>K</span>
+  </label>
+  {#if available_temperatures.length > 0}
+    <div class="slider-wrapper">
+      <span class="temp-range">
+        {available_temperatures[0]}–{available_temperatures.at(-1)} K
+      </span>
+      <input
+        type="range"
+        min="0"
+        max={available_temperatures.length - 1}
+        value={display_index}
+        oninput={handle_slider_input}
+        onchange={handle_slider_end}
+        onmouseup={handle_slider_end}
+        ontouchend={handle_slider_end}
+        aria-label="Temperature (Kelvin)"
+      />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .temperature-slider {
+    position: absolute;
+    top: calc(1ex + 50px);
+    right: 1ex;
+    z-index: 2;
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    background: color-mix(in srgb, var(--hull-bg, transparent) 80%, transparent);
+    padding: 3px 5px;
+    border-radius: var(--border-radius, 6pt);
+    backdrop-filter: blur(2px);
+  }
+  .slider-wrapper {
+    display: flex;
+    place-items: center;
+    justify-content: var(--slider-justify, center);
+    line-height: 1;
+  }
+  .temperature-slider input[type='range'] {
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  .temp-label {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .temp-input {
+    border: 1px solid color-mix(in srgb, currentColor 5%, transparent);
+    border-radius: 3px;
+    background: transparent;
+    text-align: center;
+  }
+  .temp-input::-webkit-outer-spin-button,
+  .temp-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  .temp-range {
+    font-size: 0.7em;
+    opacity: 0.7;
+    white-space: nowrap;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+</style>