matterviz 0.1.12 → 0.1.13

package/dist/phase-diagram/PhaseDiagram2D.svelte

@@ -3,74 +3,34 @@ import { elem_symbol_to_name, get_electro_neg_formula } from '../composition';
 import { format_fractional, format_num } from '../labels';
 import { ScatterPlot } from '../plot';
 import { SvelteMap } from 'svelte/reactivity';
-import { compute_max_energy_threshold, default_controls, parse_pd_entries_from_drop, PD_STYLE, } from './helpers';
+import * as helpers from './helpers';
+import { default_controls, default_pd_config, PD_STYLE } from './index';
 import PhaseDiagramControls from './PhaseDiagramControls.svelte';
 import PhaseDiagramInfoPane from './PhaseDiagramInfoPane.svelte';
 import StructurePopup from './StructurePopup.svelte';
-import { compute_e_form_per_atom, find_lowest_energy_unary_refs, get_phase_diagram_stats, process_pd_entries, } from './thermodynamics';
-let { entries, controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(false), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(undefined), label_threshold = 50, show_stable = $bindable(true), show_unstable = $bindable(true), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), energy_threshold = $bindable(0.1), on_file_drop, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), ...rest } = $props();
-const merged_controls = $derived({
-    ...default_controls,
-    ...controls,
-});
-const default_config = {
-    margin: { top: 40, right: 40, bottom: 60, left: 60 },
-    unstable_threshold: 0.2,
-    show_labels: true,
-    show_hull: true,
-    point_size: 6,
-    line_width: 2,
-    font_size: 12,
-    colors: {
-        stable: `#0072B2`,
-        unstable: `#E69F00`,
-        hull_line: `var(--accent-color, #1976D2)`,
-        background: `transparent`,
-        text: `var(--text-color, #212121)`,
-        edge: `var(--text-color, #212121)`,
-        tooltip_bg: `var(--tooltip-bg, rgba(0, 0, 0, 0.85))`,
-        tooltip_text: `var(--tooltip-text, white)`,
-        annotation: `var(--text-color, #212121)`,
-    },
-};
+import * as thermo from './thermodynamics';
+// Binary phase diagram rendered as energy vs composition (x in [0, 1])
+let { entries, controls = {}, config = {}, on_point_click, on_point_hover, fullscreen = $bindable(false), enable_fullscreen = true, enable_info_pane = true, wrapper = $bindable(undefined), label_threshold = 50, show_stable = $bindable(true), show_unstable = $bindable(true), color_mode = $bindable(`energy`), color_scale = $bindable(`interpolateViridis`), info_pane_open = $bindable(false), legend_pane_open = $bindable(false), max_hull_dist_show_phases = $bindable(0.1), max_hull_dist_show_labels = $bindable(0.1), show_stable_labels = $bindable(true), show_unstable_labels = $bindable(false), on_file_drop, enable_structure_preview = true, energy_source_mode = $bindable(`precomputed`), phase_stats = $bindable(null), x_axis = $bindable({}), y_axis = $bindable({}), ...rest } = $props();
+const merged_controls = $derived({ ...default_controls, ...controls });
 const merged_config = $derived({
-    ...default_config,
+    ...default_pd_config,
+    point_size: 6, // Binary diagrams use slightly smaller points
     ...config,
-    margin: { ...default_config.margin, ...(config.margin || {}) },
-});
-// Decide which energy source to use per entry (consistent with 3D/4D)
-const has_precomputed_e_form = $derived(entries.length > 0 && entries.every((e) => typeof e.e_form_per_atom === `number`));
-const has_precomputed_hull = $derived(entries.length > 0 && entries.every((e) => typeof e.e_above_hull === `number`));
-const unary_refs = $derived.by(() => find_lowest_energy_unary_refs(entries));
-const can_compute_e_form = $derived.by(() => {
-    const elements_in_entries = Array.from(new Set(entries.flatMap((e) => Object.keys(e.composition))));
-    return elements_in_entries.every((el) => Boolean(unary_refs[el]));
-});
-// In 2D we can compute hull distances from formation energies
-const can_compute_hull = $derived(can_compute_e_form);
-const energy_mode = $derived((has_precomputed_e_form && has_precomputed_hull)
-    ? energy_source_mode
-    : ((can_compute_e_form && can_compute_hull) ? `on-the-fly` : `precomputed`));
-const effective_entries = $derived.by(() => {
-    if (energy_mode === `precomputed`)
-        return entries;
-    return entries.map((entry) => {
-        const e_form = compute_e_form_per_atom(entry, unary_refs);
-        if (e_form == null)
-            return entry;
-        return { ...entry, e_form_per_atom: e_form };
-    });
+    colors: { ...default_pd_config.colors, ...(config.colors || {}) },
+    margin: { t: 40, r: 40, b: 60, l: 60, ...(config.margin || {}) },
 });
+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(entries, thermo.find_lowest_energy_unary_refs, energy_source_mode));
+const effective_entries = $derived(helpers.get_effective_entries(entries, energy_mode, unary_refs, thermo.compute_e_form_per_atom));
 // Process data and element set
 const processed_entries = $derived(effective_entries);
-const pd_data = $derived(process_pd_entries(processed_entries));
+const pd_data = $derived(thermo.process_pd_entries(processed_entries));
 const elements = $derived.by(() => {
-    const all_elements = pd_data.elements;
-    if (all_elements.length > 2) {
-        console.error(`PhaseDiagram2D: Dataset contains ${all_elements.length} elements, but binary diagrams require exactly 2. Found: [${all_elements.join(`, `)}]`);
+    if (pd_data.elements.length > 2) {
+        console.error(`PhaseDiagram2D: Dataset contains ${pd_data.elements.length} elements, but binary diagrams require exactly 2. Found: [${pd_data.elements.join(`, `)}]`);
         return [];
     }
-    return all_elements;
+    return pd_data.elements;
 });
 // Coordinate computation ----------------------------------------------------
 function compute_binary_coordinates(raw_entries, elems) {
@@ -181,10 +141,10 @@ const plot_entries = $derived.by(() => {
         const above = y_hull == null ? 0 : Math.max(0, e.y - y_hull);
         const is_stable = above <= 1e-9;
         const visible = (is_stable && show_stable) ||
-            (!is_stable && show_unstable && above <= energy_threshold);
+            (!is_stable && show_unstable && above <= max_hull_dist_show_phases);
         return { ...e, e_above_hull: above, is_stable, visible };
     });
-    return enriched.filter((e) => (e.is_stable || (e.e_above_hull ?? 0) <= energy_threshold));
+    return enriched.filter((e) => (e.is_stable || (e.e_above_hull ?? 0) <= max_hull_dist_show_phases));
 });
 const stable_entries = $derived(plot_entries.filter((entry) => entry.is_stable || entry.e_above_hull === 0));
 const unstable_entries = $derived(plot_entries.filter((entry) => (entry.e_above_hull ?? 0) > 0 && !entry.is_stable));
@@ -262,15 +222,11 @@ const hull_segments_series = $derived.by(() => {
     return segments;
 });
 const scatter_series = $derived([scatter_points_series, ...hull_segments_series]);
-const max_energy_threshold = $derived(compute_max_energy_threshold(processed_entries));
+const max_hull_dist_in_data = $derived(helpers.calc_max_hull_dist_in_data(processed_entries));
 // Phase diagram statistics - compute internally and expose via bindable prop
 $effect(() => {
-    phase_stats = get_phase_diagram_stats(processed_entries, elements, 3);
+    phase_stats = thermo.get_phase_diagram_stats(processed_entries, elements, 3);
 });
-// Labels with smart defaults
-let show_stable_labels = $state(true);
-let show_unstable_labels = $state(false);
-let label_energy_threshold = $state(0.1);
 $effect(() => {
     const total_entries = processed_entries.length;
     if (total_entries > label_threshold) {
@@ -300,8 +256,8 @@ function reset_all() {
     show_unstable = PD_DEFAULTS.binary.show_unstable;
     show_stable_labels = PD_DEFAULTS.binary.show_stable_labels;
     show_unstable_labels = PD_DEFAULTS.binary.show_unstable_labels;
-    energy_threshold = PD_DEFAULTS.binary.energy_threshold;
-    label_energy_threshold = PD_DEFAULTS.binary.label_energy_threshold;
+    max_hull_dist_show_phases = PD_DEFAULTS.binary.max_hull_dist_show_phases;
+    max_hull_dist_show_labels = PD_DEFAULTS.binary.max_hull_dist_show_labels;
     reset_counter += 1;
 }
 // Custom hover tooltip state used with ScatterPlot events
@@ -320,33 +276,18 @@ const handle_keydown = (event) => {
 };
 async function handle_file_drop(event) {
     drag_over = false;
-    const data = await parse_pd_entries_from_drop(event);
+    const data = await helpers.parse_pd_entries_from_drop(event);
     if (data)
         on_file_drop?.(data);
 }
-function calculate_modal_side() {
-    if (!wrapper)
-        return;
-    const rect = wrapper.getBoundingClientRect();
-    const viewport_width = globalThis.innerWidth;
-    const space_on_right = viewport_width - rect.right;
-    const space_on_left = rect.left;
-    modal_place_right = space_on_right >= space_on_left;
-}
 function close_structure_popup() {
     modal_open = false;
     selected_structure = null;
     selected_entry = null;
 }
+// Fullscreen handling
 $effect(() => {
-    if (typeof window !== `undefined`) {
-        if (fullscreen && !document.fullscreenElement && wrapper) {
-            wrapper.requestFullscreen().catch(console.error);
-        }
-        else if (!fullscreen && document.fullscreenElement) {
-            document.exitFullscreen();
-        }
-    }
+    helpers.setup_fullscreen_effect(fullscreen, wrapper);
 });
 let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072B2`};
     --pd-unstable-color:${merged_config.colors?.unstable || `#E69F00`};
@@ -395,9 +336,9 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
 {/snippet}
 
 {#snippet user_content(
-  { x_scale_fn, pad, height, y_scale_fn, y_min, width }: UserContentProps,
+  { x_scale_fn, pad, height, y_scale_fn, y_range, width }: UserContentProps,
 )}
-  {@const [x1, y0] = [x_scale_fn(1), y_scale_fn(y_min)]}
+  {@const [x1, y0] = [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)`,
@@ -433,14 +374,14 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
   {#key reset_counter}
     <ScatterPlot
       series={scatter_series}
-      x_range={x_domain}
-      y_range={y_domain}
-      x_ticks={4}
-      y_ticks={4}
-      x_grid={false}
-      y_grid={false}
-      x_label={elements.length === 2 ? `x in ${elements[0]}₁₋ₓ ${elements[1]}ₓ` : `x`}
-      y_label="E<sub>form</sub> (eV/atom)"
+      display={{ x_grid: false, y_grid: 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, ...y_axis }}
       legend={null}
       color_bar={{
         title: `E<sub>above hull</sub> (eV/atom)`,
@@ -459,7 +400,7 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
             if (structure) {
               selected_structure = structure
               selected_entry = entry
-              calculate_modal_side()
+              modal_place_right = helpers.calculate_modal_side(wrapper)
               modal_open = true
             }
           }
@@ -516,12 +457,10 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
           {phase_stats}
           {stable_entries}
           {unstable_entries}
-          {energy_threshold}
-          {label_energy_threshold}
+          {max_hull_dist_show_phases}
+          {max_hull_dist_show_labels}
           {label_threshold}
-          toggle_props={{
-            class: `info-btn`,
-          }}
+          toggle_props={{ class: `info-btn` }}
         />
       {/if}
 
@@ -544,17 +483,15 @@ let style = $derived(`--pd-stable-color:${merged_config.colors?.stable || `#0072
         bind:show_unstable
         bind:show_stable_labels
         bind:show_unstable_labels
-        bind:energy_threshold
-        bind:label_energy_threshold
-        {max_energy_threshold}
+        bind:max_hull_dist_show_phases
+        bind:max_hull_dist_show_labels
+        {max_hull_dist_in_data}
         {stable_entries}
         {unstable_entries}
         {total_unstable_count}
         {camera}
         {merged_controls}
-        toggle_props={{
-          class: `legend-controls-btn`,
-        }}
+        toggle_props={{ class: `legend-controls-btn` }}
         bind:energy_source_mode
         {has_precomputed_e_form}
         {can_compute_e_form}

package/dist/phase-diagram/PhaseDiagram2D.svelte.d.ts

@@ -1,29 +1,9 @@
-import type { D3InterpolateName } from '../colors';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { HoverData3D, PDControlsType, PhaseDiagramConfig, PhaseEntry, PhaseStats, PlotEntry3D } from './types';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    entries: PhaseEntry[];
-    controls?: Partial<PDControlsType>;
-    config?: Partial<PhaseDiagramConfig>;
-    on_point_click?: (entry: PlotEntry3D) => void;
-    on_point_hover?: (data: HoverData3D<PlotEntry3D> | null) => void;
-    fullscreen?: boolean;
-    enable_fullscreen?: boolean;
-    enable_info_pane?: boolean;
-    wrapper?: HTMLDivElement;
-    label_threshold?: number;
-    show_stable?: boolean;
-    show_unstable?: boolean;
-    color_mode?: `stability` | `energy`;
-    color_scale?: D3InterpolateName;
-    info_pane_open?: boolean;
-    legend_pane_open?: boolean;
-    energy_threshold?: number;
-    on_file_drop?: (entries: PhaseEntry[]) => void;
-    enable_structure_preview?: boolean;
-    energy_source_mode?: `precomputed` | `on-the-fly`;
-    phase_stats?: PhaseStats | null;
-}
-declare const PhaseDiagram2D: import("svelte").Component<Props, {}, "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "energy_threshold" | "fullscreen" | "info_pane_open" | "legend_pane_open" | "wrapper" | "energy_source_mode" | "phase_stats">;
+import { type AxisConfig } from '../plot';
+import type { BasePhaseDiagramProps } from './index';
+type $$ComponentProps = BasePhaseDiagramProps & {
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+};
+declare const PhaseDiagram2D: import("svelte").Component<$$ComponentProps, {}, "color_mode" | "color_scale" | "show_stable" | "show_unstable" | "show_stable_labels" | "show_unstable_labels" | "max_hull_dist_show_phases" | "max_hull_dist_show_labels" | "fullscreen" | "info_pane_open" | "legend_pane_open" | "y_axis" | "x_axis" | "wrapper" | "energy_source_mode" | "phase_stats">;
 type PhaseDiagram2D = ReturnType<typeof PhaseDiagram2D>;
 export default PhaseDiagram2D;