matterviz 0.3.2 → 0.3.4

package/dist/convex-hull/ConvexHull2D.svelte

@@ -1,409 +1,598 @@
-<script lang="ts">import { normalize_show_controls } from '../controls';
-import { ClickFeedback, DragOverlay } from '../feedback';
-import Icon from '../Icon.svelte';
-import { symbol_map } from '../labels';
-import { set_fullscreen_bg, setup_fullscreen_effect } from '../layout';
-import { ScatterPlot } from '../plot';
-import { DEFAULTS } from '../settings';
-import { SvelteMap } from 'svelte/reactivity';
-import ConvexHullControls from './ConvexHullControls.svelte';
-import ConvexHullInfoPane from './ConvexHullInfoPane.svelte';
-import ConvexHullTooltip from './ConvexHullTooltip.svelte';
-import GasPressureControls from './GasPressureControls.svelte';
-import * as helpers from './helpers';
-import { CONVEX_HULL_STYLE, default_controls, default_hull_config } from './index';
-import StructurePopup from './StructurePopup.svelte';
-import TemperatureSlider from './TemperatureSlider.svelte';
-import * as thermo from './thermodynamics';
-import { HULL_STABILITY_TOL, is_unary_entry } from './types';
-// Binary convex hull rendered as energy vs composition (x in [0, 1])
-let { entries = [], controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(DEFAULTS.convex_hull.binary.fullscreen), enable_info_pane = true, wrapper = $bindable(), label_threshold = 50, show_stable = $bindable(DEFAULTS.convex_hull.binary.show_stable), show_unstable = $bindable(DEFAULTS.convex_hull.binary.show_unstable), color_mode = $bindable(DEFAULTS.convex_hull.binary.color_mode), color_scale = $bindable(DEFAULTS.convex_hull.binary.color_scale), info_pane_open = $bindable(DEFAULTS.convex_hull.binary.info_pane_open), legend_pane_open = $bindable(DEFAULTS.convex_hull.binary.legend_pane_open), max_hull_dist_show_phases = $bindable(DEFAULTS.convex_hull.binary.max_hull_dist_show_phases), max_hull_dist_show_labels = $bindable(DEFAULTS.convex_hull.binary.max_hull_dist_show_labels), show_stable_labels = $bindable(DEFAULTS.convex_hull.binary.show_stable_labels), show_unstable_labels = $bindable(DEFAULTS.convex_hull.binary.show_unstable_labels), on_file_drop, enable_click_selection = true, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), display = $bindable({ x_grid: false, y_grid: false }), stable_entries = $bindable([]), unstable_entries = $bindable([]), highlighted_entries = $bindable([]), highlight_style = {}, x_axis = {}, y_axis = {}, selected_entry = $bindable(null), temperature = $bindable(), interpolate_temperature = true, max_interpolation_gap = 500, gas_config, gas_pressures = $bindable({}), children, tooltip: custom_tooltip, ...rest } = $props();
-const merged_controls = $derived({ ...default_controls, ...controls });
-const controls_config = $derived(normalize_show_controls(merged_controls.show));
-const merged_config = $derived({
+<script lang="ts">
+  import type { D3InterpolateName } from '../colors'
+  import type { CompositionType } from '../composition'
+  import { normalize_show_controls } from '../controls'
+  import { sanitize_html } from '../sanitize'
+  import type { ElementSymbol } from '../element'
+  import { ClickFeedback, DragOverlay } from '../feedback'
+  import Icon from '../Icon.svelte'
+  import type { D3SymbolName } from '../labels'
+  import { symbol_map } from '../labels'
+  import { set_fullscreen_bg, setup_fullscreen_effect } from '../layout'
+  import type {
+    AxisConfig,
+    ScatterHandlerEvent,
+    ScatterHandlerProps,
+    UserContentProps,
+  } from '../plot'
+  import { ScatterPlot } from '../plot'
+  import { DEFAULTS } from '../settings'
+  import type { AnyStructure } from '../structure'
+  import { SvelteMap } from 'svelte/reactivity'
+  import ConvexHullControls from './ConvexHullControls.svelte'
+  import ConvexHullInfoPane from './ConvexHullInfoPane.svelte'
+  import ConvexHullTooltip from './ConvexHullTooltip.svelte'
+  import GasPressureControls from './GasPressureControls.svelte'
+  import * as helpers from './helpers'
+  import type { BaseConvexHullProps } from './index'
+  import { CONVEX_HULL_STYLE, default_controls, default_hull_config } from './index'
+  import StructurePopup from './StructurePopup.svelte'
+  import TemperatureSlider from './TemperatureSlider.svelte'
+  import * as thermo from './thermodynamics'
+  import type {
+    ConvexHullEntry,
+    HighlightStyle,
+    HoverData3D,
+    PhaseData,
+  } from './types'
+  import { compute_hull_stability, is_unary_entry } from './helpers'
+
+  // Binary convex hull rendered as energy vs composition (x in [0, 1])
+  let {
+    entries = [],
+    controls = {},
+    config = {},
+    on_point_click,
+    on_point_hover,
+    fullscreen = $bindable(DEFAULTS.convex_hull.binary.fullscreen),
+    enable_info_pane = true,
+    wrapper = $bindable(),
+    label_threshold = 50,
+    show_stable = $bindable(DEFAULTS.convex_hull.binary.show_stable),
+    show_unstable = $bindable(DEFAULTS.convex_hull.binary.show_unstable),
+    color_mode = $bindable(DEFAULTS.convex_hull.binary.color_mode),
+    color_scale = $bindable(
+      DEFAULTS.convex_hull.binary.color_scale as D3InterpolateName,
+    ),
+    info_pane_open = $bindable(DEFAULTS.convex_hull.binary.info_pane_open),
+    legend_pane_open = $bindable(DEFAULTS.convex_hull.binary.legend_pane_open),
+    max_hull_dist_show_phases = $bindable(
+      DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
+    ),
+    max_hull_dist_show_labels = $bindable(
+      DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
+    ),
+    show_stable_labels = $bindable(DEFAULTS.convex_hull.binary.show_stable_labels),
+    show_unstable_labels = $bindable(
+      DEFAULTS.convex_hull.binary.show_unstable_labels,
+    ),
+    on_file_drop,
+    enable_click_selection = true,
+    enable_structure_preview = true,
+    energy_source_mode = $bindable(`precomputed`),
+    phase_stats = $bindable(null),
+    display = $bindable({ x_grid: false, y_grid: false }),
+    stable_entries = $bindable([]),
+    unstable_entries = $bindable([]),
+    highlighted_entries = $bindable([]),
+    highlight_style = {},
+    x_axis = {},
+    y_axis = {},
+    selected_entry = $bindable(null),
+    temperature = $bindable(),
+    interpolate_temperature = true,
+    max_interpolation_gap = 500,
+    gas_config,
+    gas_pressures = $bindable({}),
+    children,
+    tooltip: custom_tooltip,
+    ...rest
+  }: BaseConvexHullProps<ConvexHullEntry> & {
+    highlight_style?: HighlightStyle
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+  } = $props()
+
+  const merged_controls = $derived({ ...default_controls, ...controls })
+  const controls_config = $derived(normalize_show_controls(merged_controls.show))
+  const merged_config = $derived({
     ...default_hull_config,
     point_size: 6, // Binary diagrams use slightly smaller points
     ...config,
     colors: { ...default_hull_config.colors, ...(config.colors || {}) },
     margin: { t: 40, r: 40, b: 60, l: 60, ...(config.margin || {}) },
-});
-// Merge highlight style with defaults (consistent with 3D/4D)
-const merged_highlight_style = $derived(helpers.merge_highlight_style(highlight_style));
-// Helper to check if entry is highlighted
-const is_highlighted = (entry) => helpers.is_entry_highlighted(entry, highlighted_entries);
-// Temperature-dependent free energy support
-const { has_temp_data, available_temperatures } = $derived(helpers.analyze_temperature_data(entries));
-// Initialize or reset temperature when it's undefined or no longer valid
-$effect(() => {
-    if (has_temp_data &&
-        available_temperatures.length > 0 &&
-        (temperature === undefined || !available_temperatures.includes(temperature)))
-        temperature = available_temperatures[0];
-});
-// Filter entries by temperature when in temperature mode
-const temp_filtered_entries = $derived(has_temp_data && temperature !== undefined
-    ? helpers.filter_entries_at_temperature(entries, temperature, {
+  })
+
+  // Merge highlight style with defaults (consistent with 3D/4D)
+  const merged_highlight_style = $derived(
+    helpers.merge_highlight_style(highlight_style),
+  )
+
+  // Helper to check if entry is highlighted
+  const is_highlighted = (entry: ConvexHullEntry): boolean =>
+    helpers.is_entry_highlighted(entry, highlighted_entries)
+
+  // Temperature-dependent free energy support
+  const { has_temp_data, available_temperatures } = $derived(
+    helpers.analyze_temperature_data(entries),
+  )
+
+  // Initialize or reset temperature when it's undefined or no longer valid
+  $effect(() => {
+    if (
+      has_temp_data &&
+      available_temperatures.length > 0 &&
+      (temperature === undefined || !available_temperatures.includes(temperature))
+    ) temperature = available_temperatures[0]
+  })
+
+  // Filter entries by temperature when in temperature mode
+  const temp_filtered_entries = $derived(
+    has_temp_data && temperature !== undefined
+      ? helpers.filter_entries_at_temperature(entries, temperature, {
         interpolate: interpolate_temperature,
         max_interpolation_gap,
-    })
-    : entries);
-// Gas-dependent chemical potential support (corrections based on T, P)
-const { entries: gas_corrected_entries, analysis: gas_analysis, merged_config: merged_gas_config, } = $derived(helpers.get_gas_corrected_entries(temp_filtered_entries, gas_config, gas_pressures, temperature ?? helpers.DEFAULT_GAS_TEMP));
-let { // Compute energy mode information
-has_precomputed_e_form, has_precomputed_hull, can_compute_e_form, can_compute_hull, energy_mode, unary_refs, } = $derived(helpers.compute_energy_mode_info(gas_corrected_entries, thermo.find_lowest_energy_unary_refs, energy_source_mode));
-const effective_entries = $derived(helpers.get_effective_entries(gas_corrected_entries, energy_mode, unary_refs, thermo.compute_e_form_per_atom));
-// Process data and element set
-const pd_data = $derived(thermo.process_hull_entries(effective_entries));
-const polymorph_stats_map = $derived(helpers.compute_all_polymorph_stats(effective_entries)); // Pre-compute polymorph stats once for O(1) tooltip lookups
-const elements = $derived.by(() => {
+      })
+      : entries,
+  )
+
+  // Gas-dependent chemical potential support (corrections based on T, P)
+  const {
+    entries: gas_corrected_entries,
+    analysis: gas_analysis,
+    merged_config: merged_gas_config,
+  } = $derived(
+    helpers.get_gas_corrected_entries(
+      temp_filtered_entries,
+      gas_config,
+      gas_pressures,
+      temperature ?? helpers.DEFAULT_GAS_TEMP,
+    ),
+  )
+
+  let { // Compute energy mode information
+    has_precomputed_e_form,
+    has_precomputed_hull,
+    can_compute_e_form,
+    can_compute_hull,
+    energy_mode,
+    unary_refs,
+  } = $derived(
+    helpers.compute_energy_mode_info(
+      gas_corrected_entries,
+      thermo.find_lowest_energy_unary_refs,
+      energy_source_mode,
+    ),
+  )
+
+  const effective_entries = $derived(
+    helpers.get_effective_entries(
+      gas_corrected_entries,
+      energy_mode,
+      unary_refs,
+      thermo.compute_e_form_per_atom,
+    ),
+  )
+
+  // Process data and element set
+  const pd_data = $derived(thermo.process_hull_entries(effective_entries))
+
+  const polymorph_stats_map = $derived(
+    helpers.compute_all_polymorph_stats(effective_entries),
+  ) // Pre-compute polymorph stats once for O(1) tooltip lookups
+
+  const elements = $derived.by(() => {
     if (pd_data.elements.length > 2) {
-        console.error(`ConvexHull2D: Dataset contains ${pd_data.elements.length} elements, but binary diagrams require exactly 2. Found: [${pd_data.elements.join(`, `)}]`);
-        return [];
+      console.error(
+        `ConvexHull2D: Dataset contains ${pd_data.elements.length} elements, but binary diagrams require exactly 2. Found: [${
+          pd_data.elements.join(`, `)
+        }]`,
+      )
+      return []
     }
-    return pd_data.elements;
-});
-// Coordinate computation ----------------------------------------------------
-function compute_binary_coordinates(raw_entries, elems) {
-    if (elems.length !== 2)
-        return [];
-    const [el1, el2] = elems;
-    const coords = [];
+    return pd_data.elements
+  })
+
+  // Coordinate computation ----------------------------------------------------
+  function compute_binary_coordinates(
+    raw_entries: PhaseData[],
+    elems: ElementSymbol[],
+  ): ConvexHullEntry[] {
+    if (elems.length !== 2) return []
+    const [el1, el2] = elems
+    const coords: ConvexHullEntry[] = []
     for (const entry of raw_entries) {
-        // Require formation energy per atom to place along y
-        const e_form = entry.e_form_per_atom;
-        if (typeof e_form !== `number`)
-            continue;
-        const total = Object.values(entry.composition).reduce((s, v) => s + v, 0);
-        if (total <= 0)
-            continue;
-        const frac_b = (entry.composition[el2] || 0) / total;
-        const is_element = is_unary_entry(entry);
-        coords.push({ ...entry, x: frac_b, y: e_form, z: 0, is_element, visible: true });
+      // Require formation energy per atom to place along y
+      const e_form = entry.e_form_per_atom
+      if (typeof e_form !== `number`) continue
+      const total = Object.values(entry.composition).reduce((s, v) => s + v, 0)
+      if (total <= 0) continue
+      const frac_b = (entry.composition[el2] || 0) / total
+      const is_element = is_unary_entry(entry)
+      coords.push({ ...entry, x: frac_b, y: e_form, z: 0, is_element, visible: true })
     }
     // Ensure elemental references at x=0 and x=1 with y=0 to close the hull
-    const el_a = coords.find((e) => e.is_element && e.x === 0);
-    const el_b = coords.find((e) => e.is_element && e.x === 1);
+    const el_a: ConvexHullEntry | undefined = coords.find((e) =>
+      e.is_element && e.x === 0
+    )
+    const el_b: ConvexHullEntry | undefined = coords.find((e) =>
+      e.is_element && e.x === 1
+    )
     if (!el_a) {
-        coords.push({
-            composition: { [el1]: 1 },
-            energy: 0,
-            x: 0,
-            y: 0,
-            z: 0,
-            is_element: true,
-            visible: true,
-        });
+      coords.push({
+        composition: { [el1]: 1 } as CompositionType,
+        energy: 0,
+        x: 0,
+        y: 0,
+        z: 0,
+        is_element: true,
+        visible: true,
+      })
     }
     if (!el_b) {
-        coords.push({
-            composition: { [el2]: 1 },
-            energy: 0,
-            x: 1,
-            y: 0,
-            z: 0,
-            is_element: true,
-            visible: true,
-        });
+      coords.push({
+        composition: { [el2]: 1 } as CompositionType,
+        energy: 0,
+        x: 1,
+        y: 0,
+        z: 0,
+        is_element: true,
+        visible: true,
+      })
     }
-    return coords;
-}
-const coords_entries = $derived.by(() => {
-    if (elements.length !== 2)
-        return [];
+    return coords
+  }
+
+  const coords_entries = $derived.by(() => {
+    if (elements.length !== 2) return []
     try {
-        return compute_binary_coordinates(pd_data.entries, elements);
+      return compute_binary_coordinates(pd_data.entries, elements)
+    } catch (error) {
+      console.error(`Error computing binary coordinates:`, error)
+      return []
     }
-    catch (error) {
-        console.error(`Error computing binary coordinates:`, error);
-        return [];
-    }
-});
-// Compute hull and enrich entries with e_above_hull (before filtering)
-const { all_enriched_entries, hull_points } = $derived.by(() => {
+  })
+
+  // Compute hull and enrich entries with e_above_hull (before filtering)
+  const { all_enriched_entries, hull_points } = $derived.by(() => {
     if (coords_entries.length === 0) {
-        return { all_enriched_entries: [], hull_points: [] };
+      return { all_enriched_entries: [], hull_points: [] }
     }
+
     // Build lower hull input: one minimum-energy point per composition x.
-    const min_y_by_x = new SvelteMap();
+    // Excluded entries don't participate in hull construction.
+    const min_y_by_x = new SvelteMap<number, number>()
     for (const entry of coords_entries) {
-        const current_min_y = min_y_by_x.get(entry.x);
-        if (current_min_y === undefined || entry.y < current_min_y) {
-            min_y_by_x.set(entry.x, entry.y);
-        }
+      if (entry.exclude_from_hull) continue
+      const current_min_y = min_y_by_x.get(entry.x)
+      if (current_min_y === undefined || entry.y < current_min_y) {
+        min_y_by_x.set(entry.x, entry.y)
+      }
     }
+
     const hull_input = [...min_y_by_x].map(([x_coord, min_y]) => ({
-        x: x_coord,
-        y: min_y,
-    }));
-    const hull_points = thermo.compute_lower_hull_2d(hull_input);
+      x: x_coord,
+      y: min_y,
+    }))
+    const hull_points = thermo.compute_lower_hull_2d(hull_input)
+
     const all_enriched_entries = coords_entries.map((entry) => {
-        const y_hull = thermo.interpolate_hull_2d(hull_points, entry.x);
-        const e_above_hull = y_hull == null ? 0 : Math.max(0, entry.y - y_hull);
-        return {
-            ...entry,
-            e_above_hull,
-            is_stable: e_above_hull <= HULL_STABILITY_TOL,
-            visible: true,
-        };
-    });
-    return { all_enriched_entries, hull_points };
-});
-// Auto threshold: show all for few entries, use default for many, interpolate between
-const max_hull_dist_in_data = $derived(helpers.calc_max_hull_dist_in_data(all_enriched_entries));
-const auto_default_threshold = $derived(helpers.compute_auto_hull_dist_threshold(all_enriched_entries.length, max_hull_dist_in_data, DEFAULTS.convex_hull.binary.max_hull_dist_show_phases));
-// Initialize threshold to auto value on first load
-let initialized = $state(false);
-$effect(() => {
+      const y_hull = thermo.interpolate_hull_2d(hull_points, entry.x)
+      const raw_dist = y_hull == null ? 0 : entry.y - y_hull
+      return {
+        ...entry, ...compute_hull_stability(raw_dist, entry.exclude_from_hull), visible: true,
+      }
+    })
+    return { all_enriched_entries, hull_points }
+  })
+
+  // Auto threshold: show all for few entries, use default for many, interpolate between
+  const max_hull_dist_in_data = $derived(
+    helpers.calc_max_hull_dist_in_data(all_enriched_entries),
+  )
+  const auto_default_threshold = $derived(helpers.compute_auto_hull_dist_threshold(
+    all_enriched_entries.length,
+    max_hull_dist_in_data,
+    DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
+  ))
+
+  // Initialize threshold to auto value on first load
+  let initialized = $state(false)
+  $effect(() => {
     if (!initialized && all_enriched_entries.length > 0) {
-        initialized = true;
-        max_hull_dist_show_phases = auto_default_threshold;
+      initialized = true
+      max_hull_dist_show_phases = auto_default_threshold
     }
-});
-// Filter by threshold and compute visibility
-const plot_entries = $derived(all_enriched_entries
-    .filter((e) => e.is_stable || (e.e_above_hull ?? 0) <= max_hull_dist_show_phases)
-    .map((e) => ({
-    ...e,
-    visible: (e.is_stable && show_stable) || (!e.is_stable && show_unstable),
-})));
-// Update bindable entries arrays when plot_entries change (single pass)
-$effect(() => {
-    const stable = [];
-    const unstable = [];
+  })
+
+  // Filter by threshold and compute visibility
+  const plot_entries = $derived(
+    all_enriched_entries
+      .filter((e) =>
+        e.is_stable || (e.e_above_hull ?? 0) <= max_hull_dist_show_phases
+      )
+      .map((e) => ({
+        ...e,
+        visible: (e.is_stable && show_stable) || (!e.is_stable && show_unstable),
+      })),
+  )
+
+  // Update bindable entries arrays when plot_entries change (single pass)
+  $effect(() => {
+    const stable: ConvexHullEntry[] = []
+    const unstable: ConvexHullEntry[] = []
     for (const entry of plot_entries) {
-        if (entry.is_stable)
-            stable.push(entry);
-        else
-            unstable.push(entry);
+      if (entry.is_stable) stable.push(entry)
+      else unstable.push(entry)
     }
-    stable_entries = stable;
-    unstable_entries = unstable;
-});
-let reset_counter = $state(0);
-// Drag and drop state (to match 3D/4D components)
-let drag_over = $state(false);
-// Copy feedback state
-let copy_feedback = $state({ visible: false, position: { x: 0, y: 0 } });
-// Structure popup state
-let structure_popup = $state({
+    stable_entries = stable
+    unstable_entries = unstable
+  })
+
+  let reset_counter = $state(0)
+  // Drag and drop state (to match 3D/4D components)
+  let drag_over = $state(false)
+  // Copy feedback state
+  let copy_feedback = $state({ visible: false, position: { x: 0, y: 0 } })
+
+  // Structure popup state
+  let structure_popup = $state<{
+    open: boolean
+    structure: AnyStructure | null
+    entry: ConvexHullEntry | null
+    place_right: boolean
+  }>({
     open: false,
     structure: null,
     entry: null,
     place_right: true,
-});
-// Axis mapping helpers ------------------------------------------------------
-const x_domain = $derived([0, 1]);
-const y_domain = $derived.by(() => {
-    const ys = plot_entries.map((entry) => entry.y);
-    if (ys.length === 0)
-        return [-1, 0];
-    const min_y_data = Math.min(...ys);
-    const max_y_data = Math.max(...ys);
-    const span = Math.max(1e-9, max_y_data - min_y_data);
-    const pad = 0.05 * span;
-    return [min_y_data - pad, max_y_data + pad];
-});
-// Build ScatterPlot series --------------------------------------------------
-// Map MarkerSymbol to D3SymbolName (type-safe via symbol_map lookup)
-const marker_to_d3_symbol = (marker) => {
-    if (!marker)
-        return undefined;
-    const name = marker.charAt(0).toUpperCase() + marker.slice(1);
-    return name in symbol_map ? name : undefined;
-};
-// Pre-compute visible entries to avoid redundant filtering
-const visible_entries = $derived(plot_entries.filter((e) => e.visible));
-const scatter_points_series = $derived.by(() => {
-    const is_energy_mode = color_mode === `energy`;
-    const count = visible_entries.length;
+  })
+
+  // Axis mapping helpers ------------------------------------------------------
+  const x_domain = $derived<[number, number]>([0, 1])
+  const y_domain = $derived.by((): [number, number] => {
+    const ys = plot_entries.map((entry) => entry.y)
+    if (ys.length === 0) return [-1, 0]
+    const min_y_data = Math.min(...ys)
+    const max_y_data = Math.max(...ys)
+    const span = Math.max(1e-9, max_y_data - min_y_data)
+    const pad = 0.05 * span
+    return [min_y_data - pad, max_y_data + pad]
+  })
+
+  // Build ScatterPlot series --------------------------------------------------
+
+  // Map MarkerSymbol to D3SymbolName (type-safe via symbol_map lookup)
+  const marker_to_d3_symbol = (marker?: string): D3SymbolName | undefined => {
+    if (!marker) return undefined
+    const name = marker.charAt(0).toUpperCase() + marker.slice(1)
+    return name in symbol_map ? (name as D3SymbolName) : undefined
+  }
+
+  // Pre-compute visible entries to avoid redundant filtering
+  const visible_entries = $derived(plot_entries.filter((e) => e.visible))
+
+  const scatter_points_series = $derived.by(() => {
+    const is_energy_mode = color_mode === `energy`
+    const count = visible_entries.length
+
     // Single pass: extract x, y, color_values, and point_style simultaneously
-    const x_vals = new Array(count);
-    const y_vals = new Array(count);
-    const color_values = is_energy_mode ? new Array(count) : [];
-    const point_style = new Array(count);
+    const x_vals: number[] = new Array(count)
+    const y_vals: number[] = new Array(count)
+    const color_values: number[] = is_energy_mode ? new Array(count) : []
+    const point_style = new Array(count)
+
     for (let idx = 0; idx < count; idx++) {
-        const entry = visible_entries[idx];
-        x_vals[idx] = entry.x;
-        y_vals[idx] = entry.y;
-        if (is_energy_mode)
-            color_values[idx] = entry.e_above_hull ?? 0;
-        const is_stable = entry.is_stable || entry.e_above_hull === 0;
-        const base_radius = entry.size || (is_stable ? 6 : 4);
-        const hl = is_highlighted(entry) ? merged_highlight_style : null;
-        point_style[idx] = {
-            fill: hl && (hl.effect === `color` || hl.effect === `both`)
-                ? hl.color
-                : is_energy_mode
-                    ? undefined
-                    : merged_config.colors?.[is_stable ? `stable` : `unstable`],
-            stroke: is_stable ? `#ffffff` : `#000000`,
-            radius: hl && (hl.effect === `size` || hl.effect === `both`)
-                ? base_radius * hl.size_multiplier
-                : base_radius,
-            symbol_type: marker_to_d3_symbol(entry.marker),
-            is_highlighted: !!hl,
-            highlight_effect: hl?.effect,
-            highlight_color: hl?.color,
-        };
+      const entry = visible_entries[idx]
+      x_vals[idx] = entry.x
+      y_vals[idx] = entry.y
+      if (is_energy_mode) color_values[idx] = entry.e_above_hull ?? 0
+
+      const is_stable = entry.is_stable || entry.e_above_hull === 0
+      const base_radius = entry.size || (is_stable ? 6 : 4)
+      const hl = is_highlighted(entry) ? merged_highlight_style : null
+
+      point_style[idx] = {
+        fill: hl && (hl.effect === `color` || hl.effect === `both`)
+          ? hl.color
+          : is_energy_mode
+          ? undefined
+          : merged_config.colors?.[is_stable ? `stable` : `unstable`],
+        stroke: is_stable ? `#ffffff` : `#000000`,
+        radius: hl && (hl.effect === `size` || hl.effect === `both`)
+          ? base_radius * hl.size_multiplier
+          : base_radius,
+        symbol_type: marker_to_d3_symbol(entry.marker),
+        is_highlighted: !!hl,
+        highlight_effect: hl?.effect,
+        highlight_color: hl?.color,
+      }
     }
+
     return {
-        x: x_vals,
-        y: y_vals,
-        metadata: visible_entries,
-        markers: `points`,
-        point_style,
-        ...(is_energy_mode ? { color_values } : {}),
-    };
-});
-const hull_segments_series = $derived.by(() => {
-    if (!merged_config.show_hull || hull_points.length < 2)
-        return [];
-    const segments = [];
+      x: x_vals,
+      y: y_vals,
+      metadata: visible_entries,
+      markers: `points` as const,
+      point_style,
+      ...(is_energy_mode ? { color_values } : {}),
+    }
+  })
+
+  const hull_segments_series = $derived.by(() => {
+    if (!merged_config.show_hull || hull_points.length < 2) return []
+    const segments = []
     for (let idx = 0; idx < hull_points.length - 1; idx++) {
-        const p1 = hull_points[idx];
-        const p2 = hull_points[idx + 1];
-        segments.push({
-            x: [p1.x, p2.x],
-            y: [p1.y, p2.y],
-            markers: `line`,
-            line_style: {
-                stroke: CONVEX_HULL_STYLE.structure_line.color,
-                stroke_width: CONVEX_HULL_STYLE.structure_line.line_width,
-                line_dash: `${CONVEX_HULL_STYLE.structure_line.dash[0]},${CONVEX_HULL_STYLE.structure_line.dash[1]}`,
-            },
-        });
+      const p1 = hull_points[idx]
+      const p2 = hull_points[idx + 1]
+      segments.push({
+        x: [p1.x, p2.x] as const,
+        y: [p1.y, p2.y] as const,
+        markers: `line` as const,
+        line_style: {
+          stroke: CONVEX_HULL_STYLE.structure_line.color,
+          stroke_width: CONVEX_HULL_STYLE.structure_line.line_width,
+          line_dash: `${CONVEX_HULL_STYLE.structure_line.dash[0]},${
+            CONVEX_HULL_STYLE.structure_line.dash[1]
+          }`,
+        },
+      })
     }
-    return segments;
-});
-const scatter_series = $derived([scatter_points_series, ...hull_segments_series]);
-// Map selected_entry to ScatterPlot point index (series_idx: 0 = points series)
-// Use object identity comparison (e === entry) instead of entry_id comparison
-// because synthetic elemental entries lack entry_id, and undefined === undefined
-// would incorrectly match the first entry with undefined entry_id
-const selected_scatter_point = $derived.by(() => {
-    const entry = selected_entry;
-    if (!entry)
-        return null;
-    const idx = visible_entries.findIndex((vis_entry) => vis_entry === entry);
-    return idx >= 0 ? { series_idx: 0, point_idx: idx } : null;
-});
-// Convex hull statistics - compute internally and expose via bindable prop
-$effect(() => {
-    phase_stats = thermo.get_convex_hull_stats(plot_entries, elements, 3);
-});
-function extract_structure_from_entry(entry) {
-    if (!entry.entry_id)
-        return null;
-    const orig_entry = entries.find((ent) => ent.entry_id === entry.entry_id);
-    return orig_entry?.structure || null;
-}
-function reset_all() {
-    fullscreen = DEFAULTS.convex_hull.binary.fullscreen;
-    info_pane_open = DEFAULTS.convex_hull.binary.info_pane_open;
-    legend_pane_open = DEFAULTS.convex_hull.binary.legend_pane_open;
-    color_mode = DEFAULTS.convex_hull.binary.color_mode;
-    color_scale = DEFAULTS.convex_hull.binary.color_scale;
-    show_stable = DEFAULTS.convex_hull.binary.show_stable;
-    show_unstable = DEFAULTS.convex_hull.binary.show_unstable;
-    show_stable_labels = DEFAULTS.convex_hull.binary.show_stable_labels;
-    show_unstable_labels = DEFAULTS.convex_hull.binary.show_unstable_labels;
+    return segments
+  })
+
+  const scatter_series = $derived([scatter_points_series, ...hull_segments_series])
+
+  // Map selected_entry to ScatterPlot point index (series_idx: 0 = points series)
+  // Use object identity comparison (e === entry) instead of entry_id comparison
+  // because synthetic elemental entries lack entry_id, and undefined === undefined
+  // would incorrectly match the first entry with undefined entry_id
+  const selected_scatter_point = $derived.by(() => {
+    const entry = selected_entry
+    if (!entry) return null
+    const idx = visible_entries.findIndex((vis_entry) => vis_entry === entry)
+    return idx >= 0 ? { series_idx: 0, point_idx: idx } : null
+  })
+
+  // Convex hull statistics - compute internally and expose via bindable prop
+  $effect(() => {
+    phase_stats = thermo.get_convex_hull_stats(plot_entries, elements, 3)
+  })
+
+  function extract_structure_from_entry(
+    entry: ConvexHullEntry,
+  ): AnyStructure | null {
+    if (!entry.entry_id) return null
+    const orig_entry = entries.find((ent) => ent.entry_id === entry.entry_id)
+    return orig_entry?.structure as AnyStructure || null
+  }
+
+  function reset_all() {
+    fullscreen = DEFAULTS.convex_hull.binary.fullscreen
+    info_pane_open = DEFAULTS.convex_hull.binary.info_pane_open
+    legend_pane_open = DEFAULTS.convex_hull.binary.legend_pane_open
+    color_mode = DEFAULTS.convex_hull.binary.color_mode
+    color_scale = DEFAULTS.convex_hull.binary.color_scale as D3InterpolateName
+    show_stable = DEFAULTS.convex_hull.binary.show_stable
+    show_unstable = DEFAULTS.convex_hull.binary.show_unstable
+    show_stable_labels = DEFAULTS.convex_hull.binary.show_stable_labels
+    show_unstable_labels = DEFAULTS.convex_hull.binary.show_unstable_labels
     // Use auto-computed threshold based on entry count instead of static default
-    max_hull_dist_show_phases = auto_default_threshold;
-    max_hull_dist_show_labels = DEFAULTS.convex_hull.binary.max_hull_dist_show_labels;
-    reset_counter += 1;
-}
-// Track whether any settings differ from defaults (to show/hide reset button)
-// Must match all properties that reset_all() resets
-// Use auto_default_threshold for comparison since that's the effective default
-const has_changes_to_reset = $derived(fullscreen !== DEFAULTS.convex_hull.binary.fullscreen ||
-    info_pane_open !== DEFAULTS.convex_hull.binary.info_pane_open ||
-    legend_pane_open !== DEFAULTS.convex_hull.binary.legend_pane_open ||
-    color_mode !== DEFAULTS.convex_hull.binary.color_mode ||
-    color_scale !== DEFAULTS.convex_hull.binary.color_scale ||
-    show_stable !== DEFAULTS.convex_hull.binary.show_stable ||
-    show_unstable !== DEFAULTS.convex_hull.binary.show_unstable ||
-    show_stable_labels !== DEFAULTS.convex_hull.binary.show_stable_labels ||
-    show_unstable_labels !== DEFAULTS.convex_hull.binary.show_unstable_labels ||
-    // Compare with auto-computed threshold, with small tolerance for floating point
-    Math.abs(max_hull_dist_show_phases - auto_default_threshold) > 0.001 ||
-    max_hull_dist_show_labels !==
-        DEFAULTS.convex_hull.binary.max_hull_dist_show_labels);
-// Custom hover tooltip state used with ScatterPlot events
-let hover_data = $state(null);
-const handle_keydown = (event) => {
-    if (event.target.tagName.match(/INPUT|TEXTAREA/))
-        return;
-    const actions = {
-        b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
-        s: () => show_stable = !show_stable,
-        u: () => show_unstable = !show_unstable,
-        l: () => show_stable_labels = !show_stable_labels,
-    };
-    actions[event.key.toLowerCase()]?.();
-};
-async function handle_file_drop(event) {
-    drag_over = false;
-    const data = await helpers.parse_hull_entries_from_drop(event);
-    if (data)
-        on_file_drop?.(data);
-}
-async function copy_entry_data(entry, position) {
+    max_hull_dist_show_phases = auto_default_threshold
+    max_hull_dist_show_labels = DEFAULTS.convex_hull.binary.max_hull_dist_show_labels
+    reset_counter += 1
+  }
+
+  // Track whether any settings differ from defaults (to show/hide reset button)
+  // Must match all properties that reset_all() resets
+  // Use auto_default_threshold for comparison since that's the effective default
+  const has_changes_to_reset = $derived(
+    fullscreen !== DEFAULTS.convex_hull.binary.fullscreen ||
+      info_pane_open !== DEFAULTS.convex_hull.binary.info_pane_open ||
+      legend_pane_open !== DEFAULTS.convex_hull.binary.legend_pane_open ||
+      color_mode !== DEFAULTS.convex_hull.binary.color_mode ||
+      color_scale !== DEFAULTS.convex_hull.binary.color_scale ||
+      show_stable !== DEFAULTS.convex_hull.binary.show_stable ||
+      show_unstable !== DEFAULTS.convex_hull.binary.show_unstable ||
+      show_stable_labels !== DEFAULTS.convex_hull.binary.show_stable_labels ||
+      show_unstable_labels !== DEFAULTS.convex_hull.binary.show_unstable_labels ||
+      // Compare with auto-computed threshold, with small tolerance for floating point
+      Math.abs(max_hull_dist_show_phases - auto_default_threshold) > 0.001 ||
+      max_hull_dist_show_labels !==
+        DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
+  )
+
+  // Custom hover tooltip state used with ScatterPlot events
+  let hover_data = $state<HoverData3D<ConvexHullEntry> | null>(null)
+
+  const handle_keydown = (event: KeyboardEvent) => {
+    if ((event.target as HTMLElement).tagName.match(/INPUT|TEXTAREA/)) return
+    const actions: Record<string, () => void> = {
+      b: () => color_mode = color_mode === `stability` ? `energy` : `stability`,
+      s: () => show_stable = !show_stable,
+      u: () => show_unstable = !show_unstable,
+      l: () => show_stable_labels = !show_stable_labels,
+    }
+    actions[event.key.toLowerCase()]?.()
+  }
+
+  async function handle_file_drop(event: DragEvent): Promise<void> {
+    drag_over = false
+    const data = await helpers.parse_hull_entries_from_drop(event)
+    if (data) on_file_drop?.(data)
+  }
+
+  async function copy_entry_data(
+    entry: ConvexHullEntry,
+    position: { x: number; y: number },
+  ) {
     await helpers.copy_entry_to_clipboard(entry, position, (visible, pos) => {
-        copy_feedback.visible = visible;
-        copy_feedback.position = pos;
-    });
-}
-function close_structure_popup() {
-    structure_popup = { open: false, structure: null, entry: null, place_right: true };
-    selected_entry = null;
-}
-// Track last clicked entry for double-click detection
-let last_clicked_entry = null;
-let last_click_time = 0;
-function handle_point_click_internal(data) {
-    const { metadata: entry, event } = data;
-    if (!entry)
-        return;
-    const now = Date.now();
+      copy_feedback.visible = visible
+      copy_feedback.position = pos
+    })
+  }
+
+  function close_structure_popup() {
+    structure_popup = { open: false, structure: null, entry: null, place_right: true }
+    selected_entry = null
+  }
+
+  // Track last clicked entry for double-click detection
+  let last_clicked_entry: ConvexHullEntry | null = null
+  let last_click_time = 0
+
+  function handle_point_click_internal(data: ScatterHandlerEvent<ConvexHullEntry>) {
+    const { metadata: entry, event } = data
+    if (!entry) return
+
+    const now = Date.now()
     const is_double_click = last_clicked_entry === entry &&
-        now - last_click_time < 300;
+      now - last_click_time < 300
+
     if (is_double_click) {
-        // Double-click: copy to clipboard
-        copy_entry_data(entry, { x: event.clientX, y: event.clientY });
-        last_clicked_entry = null;
-        last_click_time = 0;
-    }
-    else {
-        // Single click: select entry and optionally show structure preview
-        last_clicked_entry = entry;
-        last_click_time = now;
-        on_point_click?.(entry);
-        if (enable_click_selection) {
-            selected_entry = entry;
-            if (enable_structure_preview) {
-                const structure = extract_structure_from_entry(entry);
-                if (structure) {
-                    const viewport_width = globalThis.innerWidth;
-                    const click_x = event.clientX;
-                    const space_on_right = viewport_width - click_x;
-                    const space_on_left = click_x;
-                    const place_right = space_on_right >= space_on_left;
-                    structure_popup = { open: true, structure, entry, place_right };
-                    event.stopPropagation();
-                }
-            }
+      // Double-click: copy to clipboard
+      copy_entry_data(entry, { x: event.clientX, y: event.clientY })
+      last_clicked_entry = null
+      last_click_time = 0
+    } else {
+      // Single click: select entry and optionally show structure preview
+      last_clicked_entry = entry
+      last_click_time = now
+
+      on_point_click?.(entry)
+      if (enable_click_selection) {
+        selected_entry = entry
+        if (enable_structure_preview) {
+          const structure = extract_structure_from_entry(entry)
+          if (structure) {
+            const viewport_width = globalThis.innerWidth
+            const click_x = event.clientX
+            const space_on_right = viewport_width - click_x
+            const space_on_left = click_x
+            const place_right = space_on_right >= space_on_left
+
+            structure_popup = { open: true, structure, entry, place_right }
+            event.stopPropagation()
+          }
         }
+      }
     }
-}
-// Fullscreen handling
-$effect(() => {
-    setup_fullscreen_effect(fullscreen, wrapper);
-    set_fullscreen_bg(wrapper, fullscreen, `--hull-2d-bg-fullscreen`);
-});
-let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#0072B2`};
+  }
+
+  // Fullscreen handling
+  $effect(() => {
+    setup_fullscreen_effect(fullscreen, wrapper)
+    set_fullscreen_bg(wrapper, fullscreen, `--hull-2d-bg-fullscreen`)
+  })
+
+  let style = $derived(
+    `--hull-stable-color:${merged_config.colors?.stable || `#0072B2`};
     --hull-unstable-color:${merged_config.colors?.unstable || `#E69F00`};
     --hull-edge-color:${merged_config.colors?.edge || `var(--text-color, #212121)`};
-     --hull-text-color:${merged_config.colors?.annotation || `var(--text-color, #212121)`};`);
+     --hull-text-color:${
+      merged_config.colors?.annotation || `var(--text-color, #212121)`
+    };`,
+  )
 </script>
 
 <svelte:document
@@ -561,7 +750,7 @@ let style = $derived(`--hull-stable-color:${merged_config.colors?.stable || `#00
       selected_entry,
     })}
     <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0">
-      {@html merged_controls.title || phase_stats?.chemical_system || ``}
+      {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
     </h3>
 
     <ClickFeedback