matterviz 0.3.2 → 0.3.3

package/dist/chempot-diagram/ChemPotDiagram2D.svelte

@@ -1,323 +1,480 @@
-<script lang="ts">import {} from '../colors';
-import { get_hill_formula } from '../composition/format';
-import { extract_formula_elements } from '../composition/parse';
-import TemperatureSlider from '../convex-hull/TemperatureSlider.svelte';
-import { export_svg_as_png, export_svg_as_svg } from '../io/export';
-import { download } from '../io/fetch';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { ColorBar, ScatterPlot } from '../plot';
-import { onDestroy } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
-import { get_chempot_color_bar_config, make_chempot_color_scale } from './color';
-import { apply_element_padding, best_form_energy_for_formula, build_axis_ranges, compute_chempot_diagram, formula_key_from_composition, get_energy_per_atom, get_min_entries_and_el_refs, orthonormal_2d, pad_domain_points, } from './compute';
-import { with_hover_pointer } from './pointer';
-import { get_temp_filter_payload, get_valid_temperature } from './temperature';
-import { CHEMPOT_DEFAULTS } from './types';
-let { entries = [], config = {}, width = $bindable(800), height = $bindable(600), 
-// Auto-corrected to a valid available temperature when needed.
-temperature = $bindable(undefined), interpolate_temperature = CHEMPOT_DEFAULTS.interpolate_temperature, max_interpolation_gap = CHEMPOT_DEFAULTS.max_interpolation_gap, hover_info = $bindable(null), render_local_tooltip = true, } = $props();
-let container_width = $state(0);
-const base_aspect_ratio = $derived(height > 0 && width > 0 ? height / width : 1);
-const render_width = $derived(container_width > 0 ? container_width : width);
-const render_height = $derived(Math.round(render_width * base_aspect_ratio));
-// === Control overrides ===
-let formal_chempots_override = $state(null);
-let label_stable_override = $state(null);
-let element_padding_override = $state(null);
-let default_min_limit_override = $state(null);
-const formal_chempots = $derived(formal_chempots_override ??
-    (config.formal_chempots ?? CHEMPOT_DEFAULTS.formal_chempots));
-const label_stable = $derived(label_stable_override ?? (config.label_stable ?? CHEMPOT_DEFAULTS.label_stable));
-const element_padding = $derived(element_padding_override ??
-    (config.element_padding ?? CHEMPOT_DEFAULTS.element_padding));
-const default_min_limit = $derived(default_min_limit_override ??
-    (config.default_min_limit ?? CHEMPOT_DEFAULTS.default_min_limit));
-let color_mode_override = $state(null);
-let color_scale_override = $state(null);
-let reverse_color_scale_override = $state(null);
-const color_mode = $derived(color_mode_override ?? (config.color_mode ?? CHEMPOT_DEFAULTS.color_mode));
-const color_scale = $derived(color_scale_override ?? (config.color_scale ?? CHEMPOT_DEFAULTS.color_scale));
-const reverse_color_scale = $derived(reverse_color_scale_override ??
-    (config.reverse_color_scale ?? CHEMPOT_DEFAULTS.reverse_color_scale));
-const arity_colors = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`];
-const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip);
-const effective_config = $derived({
+<script lang="ts">
+  import { type D3InterpolateName } from '../colors'
+  import { get_electro_neg_formula } from '../composition/format'
+  import { extract_formula_elements } from '../composition/parse'
+  import TemperatureSlider from '../convex-hull/TemperatureSlider.svelte'
+  import type { PhaseData } from '../convex-hull/types'
+  import Spinner from '../feedback/Spinner.svelte'
+  import { export_svg_as_png, export_svg_as_svg } from '../io/export'
+  import { download } from '../io/fetch'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { ColorBar, ScatterPlot } from '../plot'
+  import { constrain_tooltip_position } from '../plot/layout'
+  import type { DataSeries, UserContentProps } from '../plot/types'
+  import { sanitize_html } from '../sanitize'
+  import { onDestroy } from 'svelte'
+  import { SvelteMap } from 'svelte/reactivity'
+  import { compute_chempot_async } from './async-compute.svelte'
+  import { get_chempot_color_bar_config, make_chempot_color_scale } from './color'
+  import {
+    apply_element_padding,
+    best_form_energy_for_formula,
+    build_axis_ranges,
+    formula_key_from_composition,
+    get_energy_per_atom,
+    get_min_entries_and_el_refs,
+    orthonormal_2d,
+    pad_domain_points,
+  } from './compute'
+  import { with_hover_pointer } from './pointer'
+  import { get_temp_filter_payload, get_valid_temperature } from './temperature'
+  import type { ChemPotDiagramConfig, ChemPotDiagramData, ChemPotHoverInfo } from './types'
+  import { CHEMPOT_DEFAULTS } from './types'
+
+  let {
+    entries = [],
+    config = {},
+    width = $bindable(800),
+    height = $bindable(600),
+    // Auto-corrected to a valid available temperature when needed.
+    temperature = $bindable<number | undefined>(undefined),
+    interpolate_temperature = CHEMPOT_DEFAULTS.interpolate_temperature,
+    max_interpolation_gap = CHEMPOT_DEFAULTS.max_interpolation_gap,
+    hover_info = $bindable<ChemPotHoverInfo | null>(null),
+    render_local_tooltip = true,
+  }: {
+    entries: PhaseData[]
+    config?: ChemPotDiagramConfig
+    width?: number
+    height?: number
+    temperature?: number
+    interpolate_temperature?: boolean
+    max_interpolation_gap?: number
+    hover_info?: ChemPotHoverInfo | null
+    render_local_tooltip?: boolean
+  } = $props()
+  let container_width = $state(0)
+  const base_aspect_ratio = $derived(height > 0 && width > 0 ? height / width : 1)
+  const render_width = $derived(container_width > 0 ? container_width : width)
+  const render_height = $derived(Math.round(render_width * base_aspect_ratio))
+
+  // === Control overrides ===
+  let formal_chempots_override = $state<boolean | null>(null)
+  let label_stable_override = $state<boolean | null>(null)
+  let element_padding_override = $state<number | null>(null)
+  let default_min_limit_override = $state<number | null>(null)
+  const formal_chempots = $derived(
+    formal_chempots_override ??
+      (config.formal_chempots ?? CHEMPOT_DEFAULTS.formal_chempots),
+  )
+  const label_stable = $derived(
+    label_stable_override ?? (config.label_stable ?? CHEMPOT_DEFAULTS.label_stable),
+  )
+  const element_padding = $derived(
+    element_padding_override ??
+      (config.element_padding ?? CHEMPOT_DEFAULTS.element_padding),
+  )
+  const default_min_limit = $derived(
+    default_min_limit_override ??
+      (config.default_min_limit ?? CHEMPOT_DEFAULTS.default_min_limit),
+  )
+  let color_mode_override = $state<
+    NonNullable<ChemPotDiagramConfig[`color_mode`]> | null
+  >(
+    null,
+  )
+  let color_scale_override = $state<D3InterpolateName | null>(null)
+  let reverse_color_scale_override = $state<boolean | null>(null)
+  const color_mode = $derived(
+    color_mode_override ?? (config.color_mode ?? CHEMPOT_DEFAULTS.color_mode),
+  )
+  const color_scale = $derived(
+    color_scale_override ?? (config.color_scale ?? CHEMPOT_DEFAULTS.color_scale),
+  )
+  const reverse_color_scale = $derived(
+    reverse_color_scale_override ??
+      (config.reverse_color_scale ?? CHEMPOT_DEFAULTS.reverse_color_scale),
+  )
+  const arity_colors = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`] as const
+  const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip)
+  const effective_config = $derived({
     ...config,
     formal_chempots,
     label_stable,
     element_padding,
     default_min_limit,
-});
-const { has_temp_data, available_temperatures, temp_filtered_entries } = $derived(get_temp_filter_payload(entries, temperature, config, {
-    interpolate_temperature,
-    max_interpolation_gap,
-}));
-$effect(() => {
+  })
+  const { has_temp_data, available_temperatures, temp_filtered_entries } = $derived(
+    get_temp_filter_payload(entries, temperature, config, {
+      interpolate_temperature,
+      max_interpolation_gap,
+    }),
+  )
+
+  $effect(() => {
     // Keep bound temperature aligned with available data points.
-    const next_temperature = get_valid_temperature(temperature, has_temp_data, available_temperatures);
-    if (next_temperature !== temperature)
-        temperature = next_temperature;
-});
-const show_temperature_slider = $derived(has_temp_data && available_temperatures.length > 0);
-function reset_controls() {
-    formal_chempots_override = null;
-    label_stable_override = null;
-    element_padding_override = null;
-    default_min_limit_override = null;
-    color_mode_override = null;
-    color_scale_override = null;
-    reverse_color_scale_override = null;
-}
-// === Diagram computation ===
-const diagram_data = $derived.by(() => {
-    if (temp_filtered_entries.length < 2)
-        return null;
-    try {
-        return compute_chempot_diagram(temp_filtered_entries, effective_config);
-    }
-    catch (err) {
-        console.error(`ChemPotDiagram2D:`, err);
-        return null;
+    const next_temperature = get_valid_temperature(
+      temperature,
+      has_temp_data,
+      available_temperatures,
+    )
+    if (next_temperature !== temperature) temperature = next_temperature
+  })
+
+  const show_temperature_slider = $derived(
+    has_temp_data && available_temperatures.length > 0,
+  )
+
+  function reset_controls(): void {
+    formal_chempots_override = null
+    label_stable_override = null
+    element_padding_override = null
+    default_min_limit_override = null
+    color_mode_override = null
+    color_scale_override = null
+    reverse_color_scale_override = null
+  }
+
+  // === Diagram computation (off main thread via Web Worker) ===
+  let diagram_data = $state<ChemPotDiagramData | null>(null)
+  let diagram_computing = $state(false)
+  $effect(() => {
+    if (temp_filtered_entries.length < 2) {
+      diagram_data = null
+      diagram_computing = false
+      return
     }
-});
-const plot_elements = $derived((diagram_data?.elements ?? config.elements ?? []).slice(0, 2));
-const draw_domains = $derived.by(() => {
-    if (!diagram_data || plot_elements.length < 2)
-        return {};
-    const indices = [0, 1];
+    let cancelled = false
+    diagram_computing = true
+    compute_chempot_async(temp_filtered_entries, effective_config)
+      .then((data) => {
+        if (cancelled) return
+        diagram_data = data
+        diagram_computing = false
+      })
+      .catch((err) => {
+        if (cancelled) return
+        console.error(`ChemPotDiagram2D:`, err)
+        diagram_data = null
+        diagram_computing = false
+      })
+    return () => { cancelled = true }
+  })
+
+  const plot_elements = $derived(
+    (diagram_data?.elements ?? config.elements ?? []).slice(0, 2),
+  )
+
+  const draw_domains = $derived.by(() => {
+    if (!diagram_data || plot_elements.length < 2) return {}
+    const indices = [0, 1]
     if (element_padding <= 0) {
-        return Object.fromEntries(Object.entries(diagram_data.domains).filter(([, pts]) => pts.length > 0));
+      return Object.fromEntries(
+        Object.entries(diagram_data.domains).filter(([, pts]) => pts.length > 0),
+      )
     }
-    const new_lims = apply_element_padding(diagram_data.domains, indices, element_padding, default_min_limit);
-    const result = {};
+    const new_lims = apply_element_padding(
+      diagram_data.domains,
+      indices,
+      element_padding,
+      default_min_limit,
+    )
+    const result: Record<string, number[][]> = {}
     for (const [formula, pts] of Object.entries(diagram_data.domains)) {
-        const padded = pad_domain_points(pts, indices, new_lims, default_min_limit, element_padding);
-        if (padded.length > 0)
-            result[formula] = padded;
+      const padded = pad_domain_points(
+        pts,
+        indices,
+        new_lims,
+        default_min_limit,
+        element_padding,
+      )
+      if (padded.length > 0) result[formula] = padded
     }
-    return result;
-});
-const domain_entries = $derived(Object.entries(draw_domains));
-const domain_formulas = $derived(Object.keys(draw_domains));
-const raw_el_refs = $derived(get_min_entries_and_el_refs(temp_filtered_entries).el_refs);
-const entry_energy_stats_by_formula = $derived.by(() => {
-    const stats = new SvelteMap();
-    for (const entry of temp_filtered_entries) {
-        const formula_key = formula_key_from_composition(entry.composition);
-        const epa = get_energy_per_atom(entry);
-        const prev_stats = stats.get(formula_key);
+    return result
+  })
+  const domain_entries = $derived(Object.entries(draw_domains))
+  const domain_formulas = $derived(Object.keys(draw_domains))
+
+  interface FormulaEnergyStats {
+    matching_entry_count: number
+    min_energy_per_atom: number | null
+  }
+  type NumericColorMode = Exclude<
+    NonNullable<ChemPotDiagramConfig[`color_mode`]>,
+    `none` | `arity`
+  >
+
+  const raw_el_refs = $derived(
+    get_min_entries_and_el_refs(temp_filtered_entries).el_refs,
+  )
+  const entry_energy_stats_by_formula = $derived.by(
+    (): SvelteMap<string, FormulaEnergyStats> => {
+      const stats = new SvelteMap<string, FormulaEnergyStats>()
+      for (const entry of temp_filtered_entries) {
+        const formula_key = formula_key_from_composition(entry.composition)
+        const epa = get_energy_per_atom(entry)
+        const prev_stats = stats.get(formula_key)
         if (!prev_stats) {
-            stats.set(formula_key, {
-                matching_entry_count: 1,
-                min_energy_per_atom: epa,
-            });
-            continue;
+          stats.set(formula_key, {
+            matching_entry_count: 1,
+            min_energy_per_atom: epa,
+          })
+          continue
         }
         stats.set(formula_key, {
-            matching_entry_count: prev_stats.matching_entry_count + 1,
-            min_energy_per_atom: Math.min(prev_stats.min_energy_per_atom ?? epa, epa),
-        });
-    }
-    return stats;
-});
-const color_mode_labels = {
+          matching_entry_count: prev_stats.matching_entry_count + 1,
+          min_energy_per_atom: Math.min(prev_stats.min_energy_per_atom ?? epa, epa),
+        })
+      }
+      return stats
+    },
+  )
+  const color_mode_labels: Record<NumericColorMode, string> = {
     energy: `Energy per atom (eV)`,
     formation_energy: `Formation energy (eV/atom)`,
     entries: `Entry count`,
-};
-function get_numeric_color_value(formula, active_color_mode) {
+  }
+  function get_numeric_color_value(
+    formula: string,
+    active_color_mode: NumericColorMode,
+  ): number | null {
     if (active_color_mode === `energy`) {
-        return entry_energy_stats_by_formula.get(formula)?.min_energy_per_atom ?? null;
+      return entry_energy_stats_by_formula.get(formula)?.min_energy_per_atom ?? null
     }
     if (active_color_mode === `formation_energy`) {
-        return best_form_energy_for_formula(temp_filtered_entries, formula, raw_el_refs) ?? null;
-    }
-    return entry_energy_stats_by_formula.get(formula)?.matching_entry_count ?? 0;
-}
-const domain_color_values = $derived.by(() => {
-    if (color_mode === `none` || color_mode === `arity`)
-        return null;
-    const active_color_mode = color_mode;
-    const value_by_formula = new SvelteMap();
-    const values = [];
-    for (const formula of domain_formulas) {
-        const value = get_numeric_color_value(formula, active_color_mode);
-        if (value == null || !Number.isFinite(value))
-            continue;
-        values.push(value);
-        value_by_formula.set(formula, value);
+      return best_form_energy_for_formula(
+        temp_filtered_entries,
+        formula,
+        raw_el_refs,
+      ) ?? null
     }
-    return { value_by_formula, values };
-});
-const domain_colors = $derived.by(() => {
-    const colors = new SvelteMap();
-    if (color_mode === `none`)
-        return colors;
+    return entry_energy_stats_by_formula.get(formula)?.matching_entry_count ?? 0
+  }
+  const domain_color_values = $derived.by(
+    (): { value_by_formula: SvelteMap<string, number>; values: number[] } | null => {
+      if (color_mode === `none` || color_mode === `arity`) return null
+      const active_color_mode = color_mode as NumericColorMode
+      const value_by_formula = new SvelteMap<string, number>()
+      const values: number[] = []
+      for (const formula of domain_formulas) {
+        const value = get_numeric_color_value(formula, active_color_mode)
+        if (value == null || !Number.isFinite(value)) continue
+        values.push(value)
+        value_by_formula.set(formula, value)
+      }
+      return { value_by_formula, values }
+    },
+  )
+  const domain_colors = $derived.by((): SvelteMap<string, string> => {
+    const colors = new SvelteMap<string, string>()
+    if (color_mode === `none`) return colors
     if (color_mode === `arity`) {
-        for (const formula of domain_formulas) {
-            const n_elements = extract_formula_elements(formula).length;
-            const color_idx = Math.min(n_elements, arity_colors.length) - 1;
-            colors.set(formula, arity_colors[Math.max(0, color_idx)]);
-        }
-        return colors;
+      for (const formula of domain_formulas) {
+        const n_elements = extract_formula_elements(formula).length
+        const color_idx = Math.min(n_elements, arity_colors.length) - 1
+        colors.set(formula, arity_colors[Math.max(0, color_idx)])
+      }
+      return colors
     }
-    const values_payload = domain_color_values;
-    const scale = make_chempot_color_scale(values_payload?.values ?? [], color_scale, reverse_color_scale);
+    const values_payload = domain_color_values
+    const scale = make_chempot_color_scale(
+      values_payload?.values ?? [],
+      color_scale,
+      reverse_color_scale,
+    )
     for (const formula of domain_formulas) {
-        const color_val = values_payload?.value_by_formula.get(formula);
-        colors.set(formula, color_val != null && scale ? scale(color_val) : `#999`);
+      const color_val = values_payload?.value_by_formula.get(formula)
+      colors.set(formula, color_val != null && scale ? scale(color_val) : `#999`)
     }
-    return colors;
-});
-const color_range = $derived.by(() => {
-    const values = domain_color_values?.values ?? [];
-    if (values.length === 0)
-        return null;
-    let min_val = values[0], max_val = values[0];
-    for (let idx = 1; idx < values.length; idx++) {
-        if (values[idx] < min_val)
-            min_val = values[idx];
-        if (values[idx] > max_val)
-            max_val = values[idx];
-    }
-    return {
+    return colors
+  })
+  const color_range = $derived.by(
+    (): { min: number; max: number; label: string } | null => {
+      const values = domain_color_values?.values ?? []
+      if (values.length === 0) return null
+      let min_val = values[0], max_val = values[0]
+      for (let idx = 1; idx < values.length; idx++) {
+        if (values[idx] < min_val) min_val = values[idx]
+        if (values[idx] > max_val) max_val = values[idx]
+      }
+      return {
         min: min_val,
         max: Math.max(max_val, min_val + 1e-6),
         label: color_mode === `none` || color_mode === `arity`
-            ? ``
-            : color_mode_labels[color_mode],
-    };
-});
-// === Convert domains to ScatterPlot DataSeries ===
-const series = $derived(domain_entries.map(([formula, pts]) => ({
-    id: formula,
-    label: formula,
-    x: pts.map((pt) => pt[0]),
-    y: pts.map((pt) => pt[1]),
-    markers: `line+points`,
-    line_style: { stroke: domain_colors.get(formula) ?? `black`, stroke_width: 3 },
-    point_style: { fill: domain_colors.get(formula) ?? `black`, radius: 3 },
-})));
-// Axis label text
-function axis_label(element) {
-    if (formal_chempots)
-        return `\u0394\u03BC(${element}) (eV)`;
-    return `\u03BC(${element}) (eV)`;
-}
-let x_axis = $state({ label: `` });
-let y_axis = $state({ label: `` });
-$effect(() => {
-    const next_x_label = axis_label(plot_elements[0] ?? ``);
-    const next_y_label = axis_label(plot_elements[1] ?? ``);
-    if (x_axis.label !== next_x_label)
-        x_axis = { ...x_axis, label: next_x_label };
-    if (y_axis.label !== next_y_label)
-        y_axis = { ...y_axis, label: next_y_label };
-});
-// === Domain label annotations (in data coordinates) ===
-const annotations = $derived.by(() => {
-    if (!label_stable)
-        return [];
-    const result = [];
+          ? ``
+          : color_mode_labels[color_mode],
+      }
+    },
+  )
+
+  // === Convert domains to ScatterPlot DataSeries ===
+  const series = $derived<DataSeries[]>(
+    domain_entries.map(([formula, pts]) => ({
+      id: formula,
+      label: formula,
+      x: pts.map((pt) => pt[0]),
+      y: pts.map((pt) => pt[1]),
+      markers: `line+points` as const,
+      line_style: { stroke: domain_colors.get(formula) ?? `black`, stroke_width: 3 },
+      point_style: { fill: domain_colors.get(formula) ?? `black`, radius: 3 },
+    })),
+  )
+
+  // Axis label text
+  function axis_label(element: string): string {
+    const prefix = formal_chempots ? `\u0394` : ``
+    return `${prefix}\u03BC<sub>${element}</sub> <span style="font-weight:300;opacity:0.7">(eV)</span>`
+  }
+
+  let x_axis = $state({ label: ``, label_shift: { y: -45 } })
+  let y_axis = $state({ label: `` })
+
+  $effect(() => {
+    const next_x_label = axis_label(plot_elements[0] ?? ``)
+    const next_y_label = axis_label(plot_elements[1] ?? ``)
+    if (x_axis.label !== next_x_label) x_axis = { ...x_axis, label: next_x_label }
+    if (y_axis.label !== next_y_label) y_axis = { ...y_axis, label: next_y_label }
+  })
+
+  // === Domain label annotations (in data coordinates) ===
+  const annotations = $derived.by(() => {
+    if (!label_stable) return []
+    const result: { formula: string; data_x: number; data_y: number }[] = []
     for (const [formula, pts] of Object.entries(draw_domains)) {
-        if (pts.length === 0)
-            continue;
-        const center_x = pts.reduce((s, p) => s + p[0], 0) / pts.length;
-        const center_y = pts.reduce((s, p) => s + p[1], 0) / pts.length;
-        let offset_x = 0;
-        let offset_y = 0;
-        if (pts.length >= 2) {
-            const [nx, ny] = orthonormal_2d(pts);
-            offset_x = nx * 0.25;
-            offset_y = ny * 0.25;
-        }
-        result.push({
-            formula,
-            data_x: center_x + offset_x,
-            data_y: center_y + offset_y,
-        });
+      if (pts.length === 0) continue
+      const center_x = pts.reduce((s, p) => s + p[0], 0) / pts.length
+      const center_y = pts.reduce((s, p) => s + p[1], 0) / pts.length
+      let offset_x = 0
+      let offset_y = 0
+      if (pts.length >= 2) {
+        const [nx, ny] = orthonormal_2d(pts)
+        offset_x = nx * 0.25
+        offset_y = ny * 0.25
+      }
+      result.push({
+        formula,
+        data_x: center_x + offset_x,
+        data_y: center_y + offset_y,
+      })
     }
-    return result;
-});
-// === Hover info for external consumers ===
-let locked_hover_formula = $state(null);
-function set_hover_info(formula, pts, event) {
-    const bounds = scatter_wrapper?.getBoundingClientRect();
-    hover_info = with_hover_pointer({
+    return result
+  })
+
+  // === Hover info for external consumers ===
+  let locked_hover_formula = $state<string | null>(null)
+
+  function set_hover_info(
+    formula: string,
+    pts: number[][],
+    event: MouseEvent,
+  ): void {
+    const bounds = scatter_wrapper?.getBoundingClientRect()
+    hover_info = with_hover_pointer<ChemPotHoverInfo>(
+      {
         formula,
         view: `2d`,
         n_points: pts.length,
         axis_ranges: build_axis_ranges(pts, plot_elements),
-    }, event, bounds);
-}
-function clear_hover_lock() {
-    locked_hover_formula = null;
-    hover_info = null;
-}
-function handle_hover(data) {
+      },
+      event,
+      bounds,
+    )
+  }
+
+  function clear_hover_lock(): void {
+    locked_hover_formula = null
+    hover_info = null
+  }
+
+  function handle_hover(
+    data: { point: { series_idx: number }; event: MouseEvent } | null,
+  ): void {
     if (!data) {
-        if (!locked_hover_formula)
-            hover_info = null;
-        return;
+      if (!locked_hover_formula) hover_info = null
+      return
     }
-    const entry = domain_entries[data.point.series_idx];
-    if (!entry)
-        return;
-    const [formula, pts] = entry;
-    if (locked_hover_formula && locked_hover_formula !== formula)
-        return;
-    set_hover_info(formula, pts, data.event);
-}
-function handle_click(data) {
-    const entry = domain_entries[data.point.series_idx];
-    if (!entry)
-        return;
-    const [formula, pts] = entry;
+    const entry = domain_entries[data.point.series_idx]
+    if (!entry) return
+    const [formula, pts] = entry
+    if (locked_hover_formula && locked_hover_formula !== formula) return
+    set_hover_info(formula, pts, data.event)
+  }
+
+  function handle_click(
+    data: { point: { series_idx: number }; event: MouseEvent },
+  ): void {
+    const entry = domain_entries[data.point.series_idx]
+    if (!entry) return
+    const [formula, pts] = entry
     if (locked_hover_formula === formula) {
-        clear_hover_lock();
-        return;
+      clear_hover_lock()
+      return
     }
-    locked_hover_formula = formula;
-    set_hover_info(formula, pts, data.event);
-}
-// === Export ===
-let scatter_wrapper = $state();
-let export_pane_open = $state(false);
-let copy_status = $state(false);
-let copy_timeout_id = null;
-function get_svg_element() {
-    return scatter_wrapper?.querySelector(`svg`) ?? null;
-}
-function get_json_string() {
-    return JSON.stringify({
+    locked_hover_formula = formula
+    set_hover_info(formula, pts, data.event)
+  }
+
+  let tooltip_el = $state<HTMLElement>()
+  const tooltip_pos = $derived.by(() => {
+    const pointer = hover_info?.pointer
+    if (!pointer) return { x: 4, y: 4 }
+    return constrain_tooltip_position(
+      pointer.x, pointer.y,
+      tooltip_el?.offsetWidth ?? 150,
+      tooltip_el?.offsetHeight ?? 40,
+      render_width, render_height,
+      { offset: 0 },
+    )
+  })
+
+  // === Export ===
+  let scatter_wrapper = $state<HTMLDivElement>()
+  let export_pane_open = $state(false)
+  let copy_status = $state(false)
+  let copy_timeout_id: ReturnType<typeof setTimeout> | null = null
+
+  function get_svg_element(): SVGSVGElement | null {
+    return scatter_wrapper?.querySelector<SVGSVGElement>(`svg`) ?? null
+  }
+
+  function get_json_string(): string {
+    return JSON.stringify(
+      {
         elements: diagram_data?.elements ?? [],
         domains: draw_domains,
         lims: diagram_data?.lims ?? [],
-    }, null, 2);
-}
-function export_json_file() {
-    download(get_json_string(), `chempot-${plot_elements.join(`-`)}.json`, `application/json`);
-}
-async function copy_json() {
+      },
+      null,
+      2,
+    )
+  }
+
+  function export_json_file(): void {
+    download(
+      get_json_string(),
+      `chempot-${plot_elements.join(`-`)}.json`,
+      `application/json`,
+    )
+  }
+
+  async function copy_json(): Promise<void> {
     try {
-        await navigator.clipboard.writeText(get_json_string());
-        copy_status = true;
+      await navigator.clipboard.writeText(get_json_string())
+      copy_status = true
+    } catch (err) {
+      copy_status = false
+      console.error(`Failed to copy JSON to clipboard:`, err)
     }
-    catch (err) {
-        copy_status = false;
-        console.error(`Failed to copy JSON to clipboard:`, err);
-    }
-    if (copy_timeout_id !== null)
-        clearTimeout(copy_timeout_id);
+    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
     copy_timeout_id = setTimeout(() => {
-        copy_status = false;
-        copy_timeout_id = null;
-    }, 1000);
-}
-onDestroy(() => {
-    if (copy_timeout_id !== null)
-        clearTimeout(copy_timeout_id);
-});
+      copy_status = false
+      copy_timeout_id = null
+    }, 1000)
+  }
+
+  onDestroy(() => {
+    if (copy_timeout_id !== null) clearTimeout(copy_timeout_id)
+  })
 </script>
 
 {#snippet domain_labels(props: UserContentProps)}
@@ -328,7 +485,7 @@ onDestroy(() => {
       text-anchor="middle"
       class="domain-label"
     >
-      {get_hill_formula(formula, true, ``)}
+      {get_electro_neg_formula(formula, true, ``, `.3~s`)}
     </text>
   {/each}
 {/snippet}
@@ -496,7 +653,11 @@ onDestroy(() => {
   <button type="button" onclick={reset_controls}>Reset defaults</button>
 {/snippet}
 
-{#if !diagram_data}
+{#if diagram_computing}
+  <div class="computing-state">
+    <Spinner text="Computing chemical potential domains..." style="--spinner-size: 1.2em" />
+  </div>
+{:else if !diagram_data}
   <div class="error-state" role="alert" aria-live="polite">
     <p>Cannot compute chemical potential diagram.</p>
     <p>Need at least 2 elements with elemental reference entries.</p>
@@ -564,11 +725,14 @@ onDestroy(() => {
     {/if}
     {#if render_local_tooltip && show_tooltip && hover_info?.view === `2d`}
       <aside
+        bind:this={tooltip_el}
         class="tooltip"
-        style:left="{hover_info.pointer?.x ?? 4}px"
-        style:top="{hover_info.pointer?.y ?? 4}px"
+        style:left="{tooltip_pos.x}px"
+        style:top="{tooltip_pos.y}px"
       >
-        <strong>{@html get_hill_formula(hover_info.formula, false, ``)}</strong>
+        <strong>
+          {@html sanitize_html(get_electro_neg_formula(hover_info.formula, false, ``, `.3~s`))}
+        </strong>
         {#if locked_hover_formula === hover_info.formula}
           <div>Pinned · Press Esc to unlock</div>
         {/if}
@@ -625,6 +789,12 @@ onDestroy(() => {
     gap: 4pt;
     margin-left: 4pt;
   }
+  .computing-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+  }
   .error-state {
     display: flex;
     flex-direction: column;