matterviz 0.3.5 → 0.3.6

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

@@ -0,0 +1,825 @@
+<script lang="ts">
+  import type { D3InterpolateName } from '$lib/colors'
+  import type { CompositionType } from '$lib/composition'
+  import { normalize_show_controls } from '$lib/controls'
+  import { sanitize_html } from '$lib/sanitize'
+  import type { ElementSymbol } from '$lib/element'
+  import { ClickFeedback, DragOverlay } from '$lib/feedback'
+  import Icon from '$lib/Icon.svelte'
+  import type { D3SymbolName } from '$lib/labels'
+  import { symbol_map } from '$lib/labels'
+  import { set_fullscreen_bg, setup_fullscreen_effect } from '$lib/layout'
+  import type {
+    AxisConfig,
+    PointStyle,
+    ScatterHandlerEvent,
+    ScatterHandlerProps,
+    UserContentProps,
+  } from '$lib/plot'
+  import { ScatterPlot } from '$lib/plot'
+  import { DEFAULTS } from '$lib/settings'
+  import type { AnyStructure } from '$lib/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: 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(() => {
+    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 []
+    }
+    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((sum, amount) => sum + amount, 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 })
+    }
+    // Ensure elemental references at x=0 and x=1 with y=0 to close the hull
+    for (const [element, x_coord] of [
+      [el1, 0],
+      [el2, 1],
+    ] as const) {
+      if (coords.some((entry) => entry.is_element && entry.x === x_coord)) continue
+      coords.push({
+        composition: { [element]: 1 } as CompositionType,
+        energy: 0,
+        entry_id: `synthetic-element:${element}`,
+        x: x_coord,
+        y: 0,
+        z: 0,
+        is_element: true,
+      })
+    }
+    return coords
+  }
+
+  const coords_entries = $derived.by(() => {
+    if (elements.length !== 2) return []
+    try {
+      return compute_binary_coordinates(pd_data.entries, elements)
+    } 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(() => {
+    if (coords_entries.length === 0) {
+      return { all_enriched_entries: [], hull_points: [] }
+    }
+
+    // Build lower hull input: one minimum-energy point per composition x.
+    // Excluded entries don't participate in hull construction.
+    const min_y_by_x = new SvelteMap<number, number>()
+    for (const entry of coords_entries) {
+      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 computed_hull_points = thermo.compute_lower_hull_2d(hull_input)
+
+    const enriched_entries = coords_entries.map((entry) => {
+      const y_hull = thermo.interpolate_hull_2d(computed_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) }
+    })
+    return { all_enriched_entries: enriched_entries, hull_points: computed_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,
+  ))
+
+  const next_auto_threshold = helpers.auto_threshold_reset(
+    DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
+  )
+  $effect(() => {
+    max_hull_dist_show_phases = next_auto_threshold(
+      entries,
+      max_hull_dist_show_phases,
+      auto_default_threshold,
+    ) ?? max_hull_dist_show_phases
+  })
+
+  // Filter by threshold; visibility is a view predicate, not entry state.
+  const plot_entries = $derived(
+    all_enriched_entries.filter((entry) =>
+      helpers.entry_is_stable(entry) ||
+      (entry.e_above_hull ?? 0) <= max_hull_dist_show_phases
+    ),
+  )
+
+  // Update bindable entries arrays when plot_entries change (single pass)
+  $effect(() => {
+    const stable: ConvexHullEntry[] = []
+    const unstable: ConvexHullEntry[] = []
+    for (const entry of plot_entries) {
+      if (helpers.entry_is_stable(entry)) 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<{
+    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<[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(helpers.visible_entries(
+    plot_entries,
+    show_stable,
+    show_unstable,
+  ))
+
+  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: number[] = Array(count)
+    const y_vals: number[] = Array(count)
+    const color_values: number[] = is_energy_mode ? Array(count) : []
+    const point_style: PointStyle[] = 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 = helpers.entry_is_stable(entry)
+      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` 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] 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).
+  // current_entry() keeps selections pointing at the current plot entry object.
+  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<HoverData3D<ConvexHullEntry> | null>(null)
+  $effect(() => {
+    const current_selection = helpers.current_entry(selected_entry, plot_entries)
+    if (selected_entry && !current_selection) selected_entry = null
+    else if (current_selection && current_selection !== selected_entry) {
+      selected_entry = current_selection
+    }
+    const current_hover = helpers.current_entry(hover_data?.entry, plot_entries)
+    if (hover_data?.entry && !current_hover) {
+      hover_data = null
+      on_point_hover?.(null)
+    } else if (hover_data && current_hover && current_hover !== hover_data.entry) {
+      hover_data = { ...hover_data, entry: current_hover }
+    }
+    const current_popup = helpers.current_entry(structure_popup.entry, plot_entries)
+    if (structure_popup.open) {
+      const structure = current_popup && extract_structure_from_entry(current_popup)
+      if (!structure) structure_popup = { open: false, structure: null, entry: null, place_right: true }
+      else if (
+        current_popup !== structure_popup.entry ||
+        structure !== structure_popup.structure
+      ) structure_popup = { ...structure_popup, entry: current_popup, structure }
+    }
+  })
+
+  const handle_keydown = (event: KeyboardEvent) => {
+    const target = event.target
+    if (target instanceof HTMLElement && target.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: 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
+
+    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()
+          }
+        }
+      }
+    }
+  }
+
+  // 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)`
+    };`,
+  )
+</script>
+
+<svelte:document
+  onfullscreenchange={() => {
+    fullscreen = Boolean(document.fullscreenElement)
+  }}
+/>
+
+<!-- Hover tooltip matching 3D/4D style (content only; container handled by ScatterPlot) -->
+{#snippet tooltip(point: ScatterHandlerProps<ConvexHullEntry>)}
+  {@const entry = point.metadata}
+  {@const entry_highlight = entry && is_highlighted(entry)
+    ? merged_highlight_style
+    : undefined}
+  {#if entry}
+    <ConvexHullTooltip
+      {entry}
+      {polymorph_stats_map}
+      highlight_style={entry_highlight}
+      tooltip={custom_tooltip}
+    />
+  {/if}
+{/snippet}
+
+{#snippet pd_header_controls()}
+  {#if controls_config.mode !== `never` && !structure_popup.open}
+    {#if has_changes_to_reset && controls_config.visible(`reset`)}
+      <button
+        type="button"
+        onclick={reset_all}
+        title="Reset view and settings"
+        class="control-btn reset-camera-btn"
+      >
+        <Icon icon="Reset" />
+      </button>
+    {/if}
+
+    {#if enable_info_pane && phase_stats && controls_config.visible(`info-pane`)}
+      <ConvexHullInfoPane
+        bind:pane_open={info_pane_open}
+        {phase_stats}
+        {stable_entries}
+        {unstable_entries}
+        {show_stable}
+        {show_unstable}
+        {max_hull_dist_show_phases}
+        {max_hull_dist_show_labels}
+        {label_threshold}
+        toggle_props={{ class: `control-btn info-btn` }}
+      />
+    {/if}
+
+    {#if controls_config.visible(`controls`)}
+      <ConvexHullControls
+        bind:controls_open={legend_pane_open}
+        bind:color_mode
+        bind:color_scale
+        bind:show_stable
+        bind:show_unstable
+        bind:show_stable_labels
+        bind:show_unstable_labels
+        bind:max_hull_dist_show_phases
+        bind:max_hull_dist_show_labels
+        {max_hull_dist_in_data}
+        {stable_entries}
+        {unstable_entries}
+        {merged_controls}
+        toggle_props={{ class: `control-btn legend-controls-btn` }}
+        bind:energy_source_mode
+        {has_precomputed_e_form}
+        {can_compute_e_form}
+        {has_precomputed_hull}
+        {can_compute_hull}
+      />
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet user_content(
+  { x_scale_fn, pad, height, y_scale_fn, y_range, width }: UserContentProps,
+)}
+  {@const [x0, x1, y0] = [x_scale_fn(0), x_scale_fn(1), y_scale_fn(y_range[0])]}
+  {@const stroke = {
+    stroke: `var(--scatter-grid-stroke, gray)`,
+    'stroke-width': `var(--scatter-grid-width, 0.4)`,
+    'stroke-dasharray': `var(--scatter-grid-dash, 4)`,
+  }}
+  <line y1={pad.t} y2={height - pad.b} x1={x0} x2={x0} {...stroke} />
+  <line y1={pad.t} y2={height - pad.b} {x1} x2={x1} {...stroke} />
+  <line x1={pad.l} x2={width - pad.r} y1={y0} y2={y0} {...stroke} />
+{/snippet}
+{#key reset_counter}
+  <ScatterPlot
+    {...rest}
+    class="convex-hull-2d {rest.class ?? ``} {drag_over ? `dragover` : ``}"
+    style={`${style}; ${rest.style ?? ``}`}
+    data-has-selection={selected_entry !== null}
+    bind:wrapper
+    bind:fullscreen
+    role="application"
+    tabindex={-1}
+    onkeydown={handle_keydown}
+    ondrop={handle_file_drop}
+    ondragover={(event: DragEvent) => {
+      event.preventDefault()
+      drag_over = true
+    }}
+    ondragleave={(event: DragEvent) => {
+      event.preventDefault()
+      drag_over = false
+    }}
+    aria-label="Binary convex hull visualization"
+    series={scatter_series}
+    bind:display
+    controls={{ show: false }}
+    x_axis={{
+      label: elements.length === 2 ? `x in ${elements[0]}₁₋ₓ ${elements[1]}ₓ` : `x`,
+      range: x_domain,
+      ticks: 4,
+      ...x_axis,
+    }}
+    y_axis={{
+      label: `E<sub>form</sub> (eV/atom)`,
+      range: y_domain,
+      ticks: 4,
+      label_shift: { y: 15 },
+      ...y_axis,
+    }}
+    legend={null}
+    color_bar={{
+      title: `E<sub>above hull</sub> (eV/atom)`,
+      bar_style: `width: 220px; height: 16px;`,
+    }}
+    {tooltip}
+    {user_content}
+    header_controls={pd_header_controls}
+    selected_point={selected_scatter_point}
+    on_point_click={handle_point_click_internal}
+    on_point_hover={(data: ScatterHandlerEvent<ConvexHullEntry> | null) => {
+      if (!data) {
+        hover_data = null
+        on_point_hover?.(null)
+        return
+      }
+      const { metadata: entry, event } = data
+      hover_data = entry
+        ? { entry, position: { x: event.clientX, y: event.clientY } }
+        : null
+      on_point_hover?.(hover_data)
+    }}
+    padding={{ t: 30, b: 60, l: 60, r: 30 }}
+  >
+    {@render children?.({
+      stable_entries,
+      unstable_entries,
+      highlighted_entries,
+      selected_entry,
+    })}
+    <h3 style="position: absolute; left: 1em; top: 1ex; margin: 0">
+      {@html sanitize_html(merged_controls.title || phase_stats?.chemical_system || ``)}
+    </h3>
+
+    <ClickFeedback
+      bind:visible={copy_feedback.visible}
+      position={copy_feedback.position}
+    />
+    <DragOverlay visible={drag_over} />
+
+    {#if has_temp_data && temperature !== undefined}
+      <TemperatureSlider {available_temperatures} bind:temperature />
+    {/if}
+
+    {#if gas_analysis.has_gas_dependent_elements && merged_gas_config}
+      <GasPressureControls
+        config={merged_gas_config}
+        bind:pressures={gas_pressures}
+        temperature={temperature ?? 300}
+      />
+    {/if}
+
+    {#if structure_popup.open && structure_popup.structure}
+      <StructurePopup
+        structure={structure_popup.structure}
+        place_right={structure_popup.place_right}
+        stats={{
+          id: structure_popup.entry?.entry_id,
+          e_above_hull: structure_popup.entry?.e_above_hull,
+          e_form: structure_popup.entry?.e_form_per_atom,
+        }}
+        onclose={close_structure_popup}
+      />
+    {/if}
+  </ScatterPlot>
+{/key}
+
+<style>
+  :global(.convex-hull-2d:fullscreen) {
+    background: var(--hull-2d-bg-fullscreen, var(--hull-2d-bg, var(--hull-bg)))
+      !important;
+    overflow: hidden;
+  }
+  :global(.convex-hull-2d.dragover) {
+    border: 2px dashed var(--accent-color, #1976d2) !important;
+  }
+  /* Styles for control buttons rendered via header_controls snippet */
+  :global(.convex-hull-2d .control-btn) {
+    background: transparent;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 3px;
+    color: var(--text-color, currentColor);
+    transition: background-color 0.2s, opacity 0.2s;
+    display: flex;
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
+  }
+  :global(.convex-hull-2d .control-btn:hover) {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+</style>