matterviz 0.4.0 → 0.4.2

package/dist/convex-hull/ConvexHull2D.svelte

@@ -8,7 +8,8 @@
   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 { FullscreenButton, set_fullscreen_bg, setup_fullscreen_effect } from '../layout'
+  import type { Point2D, Vec2 } from '../math'
   import type {
     AxisConfig,
     PointStyle,
@@ -25,38 +26,36 @@
   import ConvexHullTooltip from './ConvexHullTooltip.svelte'
   import GasPressureControls from './GasPressureControls.svelte'
   import * as helpers from './helpers'
+  import { create_hull_data_pipeline } from './hull-state.svelte'
   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'
+  import type { ConvexHullEntry, HighlightStyle, HoverData3D, PhaseData } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
 
   // Binary convex hull rendered as energy vs composition (x in [0, 1])
   let {
     entries = [],
     controls = {},
     config = {},
+    show_controls,
     on_point_click,
     on_point_hover,
     fullscreen = $bindable(DEFAULTS.convex_hull.binary.fullscreen),
+    fullscreen_toggle = true,
     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),
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = $bindable([]),
     color_mode = $bindable(DEFAULTS.convex_hull.binary.color_mode),
-    color_scale = $bindable(
-      DEFAULTS.convex_hull.binary.color_scale as D3InterpolateName,
-    ),
+    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),
+    controls_open = $bindable(DEFAULTS.convex_hull.binary.legend_pane_open),
     max_hull_dist_show_phases = $bindable(
       DEFAULTS.convex_hull.binary.max_hull_dist_show_phases,
     ),
@@ -64,9 +63,7 @@
       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,
-    ),
+    show_unstable_labels = $bindable(DEFAULTS.convex_hull.binary.show_unstable_labels),
     on_file_drop,
     enable_click_selection = true,
     enable_structure_preview = true,
@@ -95,7 +92,7 @@
   } = $props()
 
   const merged_controls = $derived({ ...default_controls, ...controls })
-  const controls_config = $derived(normalize_show_controls(merged_controls.show))
+  const controls_config = $derived(normalize_show_controls(show_controls))
   const merged_config = $derived({
     ...default_hull_config,
     point_size: 6, // Binary diagrams use slightly smaller points
@@ -104,95 +101,47 @@
     margin: { t: 40, r: 40, b: 60, l: 60, ...config.margin },
   })
 
+  // Narrow deriveds to primitive fields so heavy downstream deriveds (scatter series,
+  // hull segments) don't recompute whenever the broad merged_config object is recreated.
+  const stable_color = $derived(merged_config.colors?.stable)
+  const unstable_color = $derived(merged_config.colors?.unstable)
+  const show_hull_line = $derived(merged_config.show_hull)
+
   // Merge highlight style with defaults (consistent with 3D/4D)
-  const merged_highlight_style = $derived(
-    helpers.merge_highlight_style(highlight_style),
-  )
+  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
+  // Shared reactive data pipeline (temperature → gas → energy mode → hull data → threshold)
+  // Explicit generic breaks the circular type inference through the all_enriched_entries thunk
+  const hull_data = create_hull_data_pipeline<ConvexHullEntry>({
+    dim: 2,
+    entries: () => entries,
+    temperature: () => temperature,
+    interpolate_temperature: () => interpolate_temperature,
+    max_interpolation_gap: () => max_interpolation_gap,
+    gas_config: () => gas_config,
+    gas_pressures: () => gas_pressures,
+    energy_source_mode: () => energy_source_mode,
+    all_enriched_entries: () => all_enriched_entries,
+    max_hull_dist_show_phases: () => max_hull_dist_show_phases,
+    show_stable: () => show_stable,
+    show_unstable: () => show_unstable,
+    entry_category: () => entry_category,
+    hidden_categories: () => hidden_categories,
+    keep_plot_entry: helpers.entry_within_hull_dist,
+    set_temperature: (next_temp) => (temperature = next_temp),
+    set_max_hull_dist_show_phases: (value) => (max_hull_dist_show_phases = value),
+    set_stable_entries: (value) => (stable_entries = value),
+    set_unstable_entries: (value) => (unstable_entries = value),
   })
+  const merged_gas_config = $derived(hull_data.merged_gas_config)
+  const elements = $derived(hull_data.elements)
+  const auto_default_threshold = $derived(hull_data.auto_default_threshold)
+  const plot_entries = $derived(hull_data.plot_entries)
+  const visible_entries = $derived(hull_data.visible_entries)
 
   // Coordinate computation ----------------------------------------------------
   function compute_binary_coordinates(
@@ -209,7 +158,7 @@
       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)
+      const is_element = helpers.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
@@ -234,7 +183,7 @@
   const coords_entries = $derived.by(() => {
     if (elements.length !== 2) return []
     try {
-      return compute_binary_coordinates(pd_data.entries, elements)
+      return compute_binary_coordinates(hull_data.pd_data.entries, elements)
     } catch (error) {
       console.error(`Error computing binary coordinates:`, error)
       return []
@@ -242,77 +191,43 @@
   })
 
   // 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)
+  // Explicit return type breaks circular type inference with the hull_data pipeline
+  const { all_enriched_entries, hull_points } = $derived.by(
+    (): { all_enriched_entries: ConvexHullEntry[]; hull_points: Point2D[] } => {
+      if (coords_entries.length === 0) {
+        return { all_enriched_entries: [], hull_points: [] }
       }
-    }
-
-    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
-  })
+      // 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)
+        }
+      }
 
-  // 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
-    ),
+      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)
+        // degenerate hull (<2 points): y_hull null -> unknown distance (not 0/stable)
+        const raw_dist = y_hull == null ? undefined : entry.y - y_hull
+        return {
+          ...entry,
+          ...helpers.compute_hull_stability(raw_dist, entry.exclude_from_hull),
+        }
+      })
+      return { all_enriched_entries: enriched_entries, hull_points: computed_hull_points }
+    },
   )
 
-  // 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)
@@ -333,17 +248,16 @@
   })
 
   // Axis mapping helpers ------------------------------------------------------
-  const x_domain = $derived<[number, number]>([0, 1])
-  const y_domain = $derived.by((): [number, number] => {
+  const x_domain = $derived<Vec2>([0, 1])
+  const y_domain = $derived.by((): Vec2 => {
     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 min_y_data = helpers.array_min(ys)
+    const max_y_data = helpers.array_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)
@@ -353,13 +267,6 @@
     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
@@ -381,15 +288,19 @@
       const hl = is_highlighted(entry) ? merged_highlight_style : null
 
       point_style[idx] = {
-        fill: hl?.effect === `color` || hl?.effect === `both`
-          ? hl?.color
-          : is_energy_mode
-          ? undefined
-          : merged_config.colors?.[is_stable ? `stable` : `unstable`],
+        fill:
+          hl?.effect === `color` || hl?.effect === `both`
+            ? hl?.color
+            : is_energy_mode
+              ? undefined
+              : is_stable
+                ? stable_color
+                : unstable_color,
         stroke: is_stable ? `#ffffff` : `#000000`,
-        radius: hl?.effect === `size` || hl?.effect === `both`
-          ? base_radius * (hl?.size_multiplier ?? 1)
-          : base_radius,
+        radius:
+          hl?.effect === `size` || hl?.effect === `both`
+            ? base_radius * (hl?.size_multiplier ?? 1)
+            : base_radius,
         symbol_type: marker_to_d3_symbol(entry.marker),
         is_highlighted: Boolean(hl),
         highlight_effect: hl?.effect,
@@ -400,7 +311,9 @@
     return {
       x: x_vals,
       y: y_vals,
-      metadata: visible_entries,
+      // ConvexHullEntry is an interface (no implicit index signature), so cast for
+      // ScatterPlot's Metadata extends Record<string, unknown> constraint
+      metadata: visible_entries as (ConvexHullEntry & Record<string, unknown>)[],
       markers: `points` as const,
       point_style,
       ...(is_energy_mode ? { color_values } : {}),
@@ -408,7 +321,7 @@
   })
 
   const hull_segments_series = $derived.by(() => {
-    if (!merged_config.show_hull || hull_points.length < 2) return []
+    if (!show_hull_line || hull_points.length < 2) return []
     const segments = []
     for (let idx = 0; idx < hull_points.length - 1; idx++) {
       const p1 = hull_points[idx]
@@ -447,22 +360,18 @@
     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
-  }
+  const extract_structure_from_entry = (entry: ConvexHullEntry): AnyStructure | null =>
+    helpers.extract_structure_from_entry(entries, entry)
 
   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
+    controls_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
+    hidden_categories = []
     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
@@ -477,17 +386,17 @@
   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 ||
+      controls_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 ||
+      hidden_categories.length > 0 ||
       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,
+      max_hull_dist_show_labels !== DEFAULTS.convex_hull.binary.max_hull_dist_show_labels,
   )
 
   // Custom hover tooltip state used with ScatterPlot events
@@ -508,11 +417,13 @@
     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 }
+      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 }
+      )
+        structure_popup = { ...structure_popup, entry: current_popup, structure }
     }
   })
 
@@ -520,10 +431,10 @@
     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,
+      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()]?.()
   }
@@ -534,14 +445,16 @@
     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
-    })
+  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
+      },
+      entry_category,
+    )
   }
 
   function close_structure_popup() {
@@ -558,8 +471,7 @@
     if (!entry) return
 
     const now = Date.now()
-    const is_double_click = last_clicked_entry === entry &&
-      now - last_click_time < 300
+    const is_double_click = last_clicked_entry === entry && now - last_click_time < 300
 
     if (is_double_click) {
       // Double-click: copy to clipboard
@@ -597,33 +509,27 @@
     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)`
-    };`,
-  )
+  let style = $derived(helpers.hull_style_css(merged_config.colors))
 </script>
 
 <svelte:document
   onfullscreenchange={() => {
-    fullscreen = Boolean(document.fullscreenElement)
+    // tie fullscreen state to this component's own wrapper, not any fullscreen element
+    fullscreen = document.fullscreenElement === wrapper
   }}
 />
 
 <!-- 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}
+  {@const entry_highlight =
+    entry && is_highlighted(entry) ? merged_highlight_style : undefined}
   {#if entry}
     <ConvexHullTooltip
       {entry}
-      {polymorph_stats_map}
+      polymorph_stats_map={hull_data.polymorph_stats_map}
       highlight_style={entry_highlight}
+      {entry_category}
       tooltip={custom_tooltip}
     />
   {/if}
@@ -650,6 +556,8 @@
         {unstable_entries}
         {show_stable}
         {show_unstable}
+        {entry_category}
+        {hidden_categories}
         {max_hull_dist_show_phases}
         {max_hull_dist_show_labels}
         {label_threshold}
@@ -657,35 +565,46 @@
       />
     {/if}
 
+    {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
+      <FullscreenButton {fullscreen} toggle={fullscreen_toggle} {wrapper} />
+    {/if}
+
     {#if controls_config.visible(`controls`)}
       <ConvexHullControls
-        bind:controls_open={legend_pane_open}
+        bind:controls_open
         bind:color_mode
         bind:color_scale
         bind:show_stable
         bind:show_unstable
+        {entry_category}
+        bind:hidden_categories
         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}
+        max_hull_dist_in_data={hull_data.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}
+        has_precomputed_e_form={hull_data.has_precomputed_e_form}
+        can_compute_e_form={hull_data.can_compute_e_form}
+        has_precomputed_hull={hull_data.has_precomputed_hull}
+        can_compute_hull={hull_data.can_compute_hull}
       />
     {/if}
   {/if}
 {/snippet}
 
-{#snippet user_content(
-  { x_scale_fn, pad, height, y_scale_fn, y_range, width }: UserContentProps,
-)}
+{#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)`,
@@ -699,7 +618,7 @@
 {#key reset_counter}
   <ScatterPlot
     {...rest}
-    class="convex-hull-2d {rest.class ?? ``} {drag_over ? `dragover` : ``}"
+    class={[`convex-hull-2d`, rest.class, drag_over && `dragover`]}
     style={`${style}; ${rest.style ?? ``}`}
     data-has-selection={selected_entry !== null}
     bind:wrapper
@@ -720,6 +639,7 @@
     series={scatter_series}
     bind:display
     controls={{ show: false }}
+    fullscreen_toggle={false}
     x_axis={{
       label: elements.length === 2 ? `x in ${elements[0]}₁₋ₓ ${elements[1]}ₓ` : `x`,
       range: x_domain,
@@ -750,9 +670,7 @@
         return
       }
       const { metadata: entry, event } = data
-      hover_data = entry
-        ? { entry, position: { x: event.clientX, y: event.clientY } }
-        : null
+      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 }}
@@ -767,17 +685,17 @@
       {@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} />
+    <ClickFeedback bind:visible={copy_feedback.visible} position={copy_feedback.position} />
+    <DragOverlay visible={drag_over} message="Drop JSON file to load phase diagram data" />
 
-    {#if has_temp_data && temperature !== undefined}
-      <TemperatureSlider {available_temperatures} bind:temperature />
+    {#if hull_data.has_temp_data && temperature !== undefined}
+      <TemperatureSlider
+        available_temperatures={hull_data.available_temperatures}
+        bind:temperature
+      />
     {/if}
 
-    {#if gas_analysis.has_gas_dependent_elements && merged_gas_config}
+    {#if hull_data.gas_analysis.has_gas_dependent_elements && merged_gas_config}
       <GasPressureControls
         config={merged_gas_config}
         bind:pressures={gas_pressures}
@@ -802,26 +720,28 @@
 
 <style>
   :global(.convex-hull-2d:fullscreen) {
-    background: var(--hull-2d-bg-fullscreen, var(--hull-2d-bg, var(--hull-bg)))
-      !important;
+    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) {
+  /* Styles for control buttons rendered via header_controls snippet
+     (.fullscreen-btn is FullscreenButton's built-in class) */
+  :global(.convex-hull-2d :is(.control-btn, .fullscreen-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;
+    transition:
+      background-color 0.2s,
+      opacity 0.2s;
     display: flex;
-    font-size: clamp(0.85em, 2cqmin, 1.3em);
+    font-size: var(--ctrl-btn-icon-size, clamp(0.7rem, 2cqmin, 0.85rem));
   }
-  :global(.convex-hull-2d .control-btn:hover) {
+  :global(.convex-hull-2d :is(.control-btn, .fullscreen-btn):hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
 </style>