matterviz 0.4.1 → 0.4.3

package/dist/chempot-diagram/ChemPotDiagram2D.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { D3InterpolateName } from '../colors'
   import { get_electro_neg_formula } from '../composition/format'
-  import { extract_formula_elements } from '../composition/parse'
   import TemperatureSlider from '../convex-hull/TemperatureSlider.svelte'
   import type { PhaseData } from '../convex-hull/types'
   import Spinner from '../feedback/Spinner.svelte'
@@ -12,9 +11,8 @@
   import { constrain_tooltip_position } from '../plot/core/layout'
   import type { DataSeries, UserContentProps } from '../plot/core/types'
   import { sanitize_html } from '../sanitize'
-  import { SvelteMap } from 'svelte/reactivity'
   import { compute_chempot_async } from './async-compute.svelte'
-  import { get_chempot_color_bar_config, make_chempot_color_scale } from './color'
+  import { ARITY_COLORS, get_chempot_color_bar_config, get_domain_color_data } from './color'
   import {
     CHEMPOT_COLOR_MODE_OPTIONS,
     CHEMPOT_COLOR_SCALE_OPTIONS,
@@ -22,10 +20,8 @@
   } from './controls-state.svelte'
   import {
     apply_element_padding,
-    best_form_energy_for_formula,
     build_axis_ranges,
-    formula_key_from_composition,
-    get_energy_per_atom,
+    get_energy_stats_by_formula,
     get_min_entries_and_el_refs,
     orthonormal_2d,
     pad_domain_points,
@@ -33,12 +29,7 @@
   import { export_json_file, get_json_string } from './export'
   import { with_hover_pointer } from './pointer'
   import { get_temp_filter_payload, get_valid_temperature } from './temperature'
-  import type {
-    ChemPotColorMode,
-    ChemPotDiagramConfig,
-    ChemPotDiagramData,
-    ChemPotHoverInfo,
-  } from './types'
+  import type { ChemPotDiagramConfig, ChemPotDiagramData, ChemPotHoverInfo } from './types'
   import { CHEMPOT_DEFAULTS } from './types'
 
   let {
@@ -78,15 +69,18 @@
   const render_height = $derived(Math.round(render_width * base_aspect_ratio))
 
   // === Control overrides (override ?? config ?? default, cleared by Reset) ===
-  const overrides = create_chempot_overrides(() => config, [
-    `formal_chempots`,
-    `label_stable`,
-    `element_padding`,
-    `default_min_limit`,
-    `color_mode`,
-    `color_scale`,
-    `reverse_color_scale`,
-  ])
+  const overrides = create_chempot_overrides(
+    () => config,
+    [
+      `formal_chempots`,
+      `label_stable`,
+      `element_padding`,
+      `default_min_limit`,
+      `color_mode`,
+      `color_scale`,
+      `reverse_color_scale`,
+    ],
+  )
   const formal_chempots = $derived(overrides.resolve(`formal_chempots`))
   const label_stable = $derived(overrides.resolve(`label_stable`))
   const element_padding = $derived(overrides.resolve(`element_padding`))
@@ -94,7 +88,6 @@
   const color_mode = $derived(overrides.resolve(`color_mode`))
   const color_scale = $derived(overrides.resolve(`color_scale`))
   const reverse_color_scale = $derived(overrides.resolve(`reverse_color_scale`))
-  const arity_colors = [`#3498db`, `#2ecc71`, `#e67e22`, `#9b59b6`] as const
   const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip)
   const effective_config = $derived({
     ...config,
@@ -120,10 +113,7 @@
     if (next_temperature !== temperature) temperature = next_temperature
   })
 
-  const show_temperature_slider = $derived(
-    has_temp_data && available_temperatures.length > 0,
-  )
-
+  const show_temperature_slider = $derived(has_temp_data && available_temperatures.length > 0)
 
   // === Diagram computation (off main thread via Web Worker) ===
   let diagram_data = $state<ChemPotDiagramData | null>(null)
@@ -148,12 +138,12 @@
         diagram_data = null
         diagram_computing = false
       })
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   })
 
-  const plot_elements = $derived(
-    (diagram_data?.elements ?? config.elements ?? []).slice(0, 2),
-  )
+  const plot_elements = $derived((diagram_data?.elements ?? config.elements ?? []).slice(0, 2))
 
   const draw_domains = $derived.by(() => {
     if (!diagram_data || plot_elements.length < 2) return {}
@@ -183,115 +173,21 @@
     return result
   })
   const domain_entries = $derived(Object.entries(draw_domains))
-  const domain_formulas = $derived(Object.keys(draw_domains))
-
-  interface FormulaEnergyStats {
-    matching_entry_count: number
-    min_energy_per_atom: number | null
-  }
-  type NumericColorMode = Exclude<ChemPotColorMode, `none` | `arity`>
 
-  const raw_el_refs = $derived(
-    get_min_entries_and_el_refs(temp_filtered_entries).el_refs,
-  )
-  const entry_energy_stats_by_formula = $derived.by(
-    (): SvelteMap<string, FormulaEnergyStats> => {
-      const stats = new SvelteMap<string, FormulaEnergyStats>()
-      for (const entry of temp_filtered_entries) {
-        const formula_key = formula_key_from_composition(entry.composition)
-        const epa = get_energy_per_atom(entry)
-        const prev_stats = stats.get(formula_key)
-        if (!prev_stats) {
-          stats.set(formula_key, {
-            matching_entry_count: 1,
-            min_energy_per_atom: epa,
-          })
-          continue
-        }
-        stats.set(formula_key, {
-          matching_entry_count: prev_stats.matching_entry_count + 1,
-          min_energy_per_atom: Math.min(prev_stats.min_energy_per_atom ?? epa, epa),
-        })
-      }
-      return stats
-    },
-  )
-  const color_mode_labels: Record<NumericColorMode, string> = {
-    energy: `Energy per atom (eV)`,
-    formation_energy: `Formation energy (eV/atom)`,
-    entries: `Entry count`,
-  }
-  function get_numeric_color_value(
-    formula: string,
-    active_color_mode: NumericColorMode,
-  ): number | null {
-    if (active_color_mode === `energy`) {
-      return entry_energy_stats_by_formula.get(formula)?.min_energy_per_atom ?? null
-    }
-    if (active_color_mode === `formation_energy`) {
-      return best_form_energy_for_formula(
-        temp_filtered_entries,
-        formula,
-        raw_el_refs,
-      ) ?? null
-    }
-    return entry_energy_stats_by_formula.get(formula)?.matching_entry_count ?? 0
-  }
-  const domain_color_values = $derived.by(
-    (): { value_by_formula: SvelteMap<string, number>; values: number[] } | null => {
-      if (color_mode === `none` || color_mode === `arity`) return null
-      const active_color_mode = color_mode as NumericColorMode
-      const value_by_formula = new SvelteMap<string, number>()
-      const values: number[] = []
-      for (const formula of domain_formulas) {
-        const value = get_numeric_color_value(formula, active_color_mode)
-        if (value == null || !Number.isFinite(value)) continue
-        values.push(value)
-        value_by_formula.set(formula, value)
-      }
-      return { value_by_formula, values }
-    },
-  )
-  const domain_colors = $derived.by((): SvelteMap<string, string> => {
-    const colors = new SvelteMap<string, string>()
-    if (color_mode === `none`) return colors
-    if (color_mode === `arity`) {
-      for (const formula of domain_formulas) {
-        const n_elements = extract_formula_elements(formula).length
-        const color_idx = Math.min(n_elements, arity_colors.length) - 1
-        colors.set(formula, arity_colors[Math.max(0, color_idx)])
-      }
-      return colors
-    }
-    const values_payload = domain_color_values
-    const scale = make_chempot_color_scale(
-      values_payload?.values ?? [],
+  // Raw (non-renormalized) elemental refs for true formation energies
+  const raw_el_refs = $derived(get_min_entries_and_el_refs(temp_filtered_entries).el_refs)
+  // Memoize separately so color-control toggles don't re-scan all entries
+  const energy_stats = $derived(get_energy_stats_by_formula(temp_filtered_entries))
+  const { colors: domain_colors, color_range } = $derived(
+    get_domain_color_data({
+      formulas: Object.keys(draw_domains),
+      color_mode,
       color_scale,
       reverse_color_scale,
-    )
-    for (const formula of domain_formulas) {
-      const color_val = values_payload?.value_by_formula.get(formula)
-      colors.set(formula, color_val != null && scale ? scale(color_val) : `#999`)
-    }
-    return colors
-  })
-  const color_range = $derived.by(
-    (): { min: number; max: number; label: string } | null => {
-      const values = domain_color_values?.values ?? []
-      if (values.length === 0) return null
-      let min_val = values[0], max_val = values[0]
-      for (let idx = 1; idx < values.length; idx++) {
-        if (values[idx] < min_val) min_val = values[idx]
-        if (values[idx] > max_val) max_val = values[idx]
-      }
-      return {
-        min: min_val,
-        max: Math.max(max_val, min_val + 1e-6),
-        label: color_mode === `none` || color_mode === `arity`
-          ? ``
-          : color_mode_labels[color_mode],
-      }
-    },
+      entries: temp_filtered_entries,
+      el_refs: raw_el_refs,
+      energy_stats,
+    }),
   )
 
   // === Convert domains to ScatterPlot DataSeries ===
@@ -350,11 +246,7 @@
   // === Hover info for external consumers ===
   let locked_hover_formula = $state<string | null>(null)
 
-  function set_hover_info(
-    formula: string,
-    pts: number[][],
-    event: MouseEvent,
-  ): void {
+  function set_hover_info(formula: string, pts: number[][], event: MouseEvent): void {
     const bounds = wrapper?.getBoundingClientRect()
     hover_info = with_hover_pointer<ChemPotHoverInfo>(
       {
@@ -387,9 +279,7 @@
     set_hover_info(formula, pts, data.event)
   }
 
-  function handle_click(
-    data: { point: { series_idx: number }; event: MouseEvent },
-  ): void {
+  function handle_click(data: { point: { series_idx: number }; event: MouseEvent }): void {
     const entry = domain_entries[data.point.series_idx]
     if (!entry) return
     const [formula, pts] = entry
@@ -406,10 +296,12 @@
     const pointer = hover_info?.pointer
     if (!pointer) return { x: 4, y: 4 }
     return constrain_tooltip_position(
-      pointer.x, pointer.y,
+      pointer.x,
+      pointer.y,
       tooltip_el?.offsetWidth ?? 150,
       tooltip_el?.offsetHeight ?? 40,
-      render_width, render_height,
+      render_width,
+      render_height,
       { offset: 0 },
     )
   })
@@ -447,11 +339,13 @@
     },
     {
       title: `Export Data`,
-      items: [{
-        label: `JSON`,
-        on_download: () => export_json_file(json_payload, export_basename),
-        copy_text: () => get_json_string(json_payload),
-      }],
+      items: [
+        {
+          label: `JSON`,
+          on_download: () => export_json_file(json_payload, export_basename),
+          copy_text: () => get_json_string(json_payload),
+        },
+      ],
     },
   ])
 </script>
@@ -477,8 +371,7 @@
     toggle_props={{
       class: `chempot-export-toggle`,
       title: `Export chemical potential diagram`,
-      style:
-        `position: absolute; top: var(--ctrl-btn-top, 5pt); right: 36px; z-index: 10`,
+      style: `position: absolute; top: var(--ctrl-btn-top, 5pt); right: 36px; z-index: 10`,
     }}
   />
 {/snippet}
@@ -509,7 +402,7 @@
       step="0.1"
       value={element_padding}
       oninput={(event) =>
-      overrides.set(`element_padding`, Number(event.currentTarget.value) || 0)}
+        overrides.set(`element_padding`, Number(event.currentTarget.value) || 0)}
     />
   </label>
   <label>
@@ -534,7 +427,7 @@
     <select
       value={color_mode}
       onchange={(event) =>
-      overrides.set(`color_mode`, event.currentTarget.value as typeof color_mode)}
+        overrides.set(`color_mode`, event.currentTarget.value as typeof color_mode)}
     >
       {#each CHEMPOT_COLOR_MODE_OPTIONS as [value, label] (value)}
         <option {value}>{label}</option>
@@ -547,7 +440,7 @@
       <select
         value={color_scale}
         onchange={(event) =>
-        overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
+          overrides.set(`color_scale`, event.currentTarget.value as D3InterpolateName)}
       >
         {#each CHEMPOT_COLOR_SCALE_OPTIONS as [value, label] (value)}
           <option {value}>{label}</option>
@@ -589,9 +482,9 @@
     onpointerdown={(event) => {
       const target = event.target
       if (!locked_hover_formula) return
-      const is_background_click = target === wrapper ||
-        (target instanceof SVGElement &&
-          target.closest(`g[data-series-id]`) === null)
+      const is_background_click =
+        target === wrapper ||
+        (target instanceof SVGElement && target.closest(`g[data-series-id]`) === null)
       if (is_background_click) {
         clear_hover_lock()
       }
@@ -612,11 +505,11 @@
       on_point_click={handle_click}
       style="--scatter-width: 100%; --scatter-height: {render_height}px; --fullscreen-btn-offset: 68px"
     />
-    {#if color_mode !== `none` && color_mode !== `arity` && color_range}
+    {#if color_range}
       {@const color_bar_config = get_chempot_color_bar_config(
-      color_scale,
-      reverse_color_scale,
-    )}
+        color_scale,
+        reverse_color_scale,
+      )}
       <ColorBar
         title={color_range.label}
         range={[color_range.min, color_range.max]}
@@ -631,7 +524,7 @@
       <div class="arity-legend">
         {#each [`Unary`, `Binary`, `Ternary`, `4+`] as label_text, color_idx (label_text)}
           <span>
-            <span style:background={arity_colors[color_idx]}></span>
+            <span style:background={ARITY_COLORS[color_idx]}></span>
             {label_text}
           </span>
         {/each}
@@ -669,7 +562,9 @@
   }
   .chempot-diagram-2d > :global(.pane-toggle) {
     opacity: 0;
-    transition: opacity 0.2s, background-color 0.2s;
+    transition:
+      opacity 0.2s,
+      background-color 0.2s;
   }
   .chempot-diagram-2d:hover > :global(.pane-toggle),
   .chempot-diagram-2d > :global(.pane-toggle:focus-visible),
@@ -716,10 +611,7 @@
   }
   .tooltip {
     position: absolute;
-    background: var(
-      --tooltip-bg,
-      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
-    );
+    background: var(--tooltip-bg, light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9)));
     color: var(--tooltip-text, var(--text-color, #fff));
     padding: 4px 8px;
     border-radius: 4px;

package/dist/chempot-diagram/ChemPotDiagram2D.svelte.d.ts

@@ -14,6 +14,6 @@ type $$ComponentProps = {
     fullscreen?: boolean;
     export_pane_open?: boolean;
 };
-declare const ChemPotDiagram2D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "temperature" | "fullscreen" | "wrapper" | "export_pane_open" | "hover_info">;
+declare const ChemPotDiagram2D: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "fullscreen" | "wrapper" | "export_pane_open" | "temperature" | "hover_info">;
 type ChemPotDiagram2D = ReturnType<typeof ChemPotDiagram2D>;
 export default ChemPotDiagram2D;