matterviz 0.4.0 → 0.4.1

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,6 +26,7 @@
   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'
@@ -36,27 +38,31 @@
     HoverData3D,
     PhaseData,
   } from './types'
-  import { compute_hull_stability, is_unary_entry } from './helpers'
+  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,
     ),
     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,
     ),
@@ -95,7 +101,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,6 +110,12 @@
     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),
@@ -113,86 +125,35 @@
   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: (entry, max_dist) =>
+      helpers.entry_is_stable(entry) || (entry.e_above_hull ?? 0) <= max_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 +170,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 +195,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,10 +203,12 @@
   })
 
   // 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: [] }
-    }
+  // 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: [] }
+      }
 
     // Build lower hull input: one minimum-energy point per composition x.
     // Excluded entries don't participate in hull construction.
@@ -267,52 +230,11 @@
     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 { ...entry, ...helpers.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)
@@ -333,8 +255,8 @@
   })
 
   // 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)
@@ -353,13 +275,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
@@ -385,7 +300,7 @@
           ? hl?.color
           : is_energy_mode
           ? undefined
-          : merged_config.colors?.[is_stable ? `stable` : `unstable`],
+          : (is_stable ? stable_color : unstable_color),
         stroke: is_stable ? `#ffffff` : `#000000`,
         radius: hl?.effect === `size` || hl?.effect === `both`
           ? base_radius * (hl?.size_multiplier ?? 1)
@@ -400,7 +315,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 +325,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 +364,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,11 +390,12 @@
   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
@@ -541,7 +455,7 @@
     await helpers.copy_entry_to_clipboard(entry, position, (visible, pos) => {
       copy_feedback.visible = visible
       copy_feedback.position = pos
-    })
+    }, entry_category)
   }
 
   function close_structure_popup() {
@@ -597,19 +511,13 @@
     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
   }}
 />
 
@@ -622,8 +530,9 @@
   {#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 +559,8 @@
         {unstable_entries}
         {show_stable}
         {show_unstable}
+        {entry_category}
+        {hidden_categories}
         {max_hull_dist_show_phases}
         {max_hull_dist_show_labels}
         {label_threshold}
@@ -657,27 +568,33 @@
       />
     {/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}
@@ -720,6 +637,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,
@@ -773,11 +691,11 @@
     />
     <DragOverlay visible={drag_over} />
 
-    {#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}
@@ -809,8 +727,9 @@
   :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;
@@ -821,7 +740,7 @@
     display: flex;
     font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
-  :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>

package/dist/convex-hull/ConvexHull2D.svelte.d.ts

@@ -6,6 +6,6 @@ type $$ComponentProps = BaseConvexHullProps<ConvexHullEntry> & {
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
 };
-declare const ConvexHull2D: import("svelte").Component<$$ComponentProps, {}, "temperature" | "display" | "fullscreen" | "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
+declare const ConvexHull2D: import("svelte").Component<$$ComponentProps, {}, "display" | "temperature" | "fullscreen" | "wrapper" | "controls_open" | "color_scale" | "info_pane_open" | "color_mode" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "hidden_categories" | "energy_source_mode" | "stable_entries" | "unstable_entries" | "phase_stats" | "highlighted_entries" | "selected_entry" | "gas_pressures">;
 type ConvexHull2D = ReturnType<typeof ConvexHull2D>;
 export default ConvexHull2D;