matterviz 0.3.3 → 0.3.5

package/dist/convex-hull/ConvexHullInfoPane.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
+  import InfoPaneCards from '../overlays/InfoPaneCards.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { format_num } from '../labels'
   import type { ComponentProps } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import ConvexHullStats from './ConvexHullStats.svelte'
   import type { ConvexHullEntry, PhaseStats } from './types'
 
+  const usage_tips = [
+    { label: `Single click`, value: `Select point`, key: `tip-click` },
+    { label: `Double click`, value: `Copy info`, key: `tip-double-click` },
+    { label: `Drag`, value: `Rotate view`, key: `tip-drag` },
+    { label: `Scroll`, value: `Zoom in/out`, key: `tip-scroll` },
+    { label: `Key r`, value: `Reset camera`, key: `tip-reset` },
+    { label: `Key b`, value: `Toggle color mode`, key: `tip-color-mode` },
+    { label: `Key s`, value: `Toggle stable points`, key: `tip-stable` },
+    { label: `Key u`, value: `Toggle unstable points`, key: `tip-unstable` },
+    { label: `Key l`, value: `Toggle labels`, key: `tip-labels` },
+  ]
+
   let {
     phase_stats,
     stable_entries,
@@ -27,6 +41,51 @@
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
   } = $props()
+
+  const count_visible = (entries: ConvexHullEntry[]): number =>
+    entries.reduce((count, entry) => count + Number(entry.visible), 0)
+
+  let settings_rows = $derived([
+    {
+      label: `Visible stable`,
+      value: `${count_visible(stable_entries)} / ${stable_entries.length}`,
+      key: `hull-visible-stable`,
+    },
+    {
+      label: `Visible unstable`,
+      value: `${count_visible(unstable_entries)} / ${unstable_entries.length}`,
+      key: `hull-visible-unstable`,
+    },
+    {
+      label: `Points threshold`,
+      value: `${format_num(max_hull_dist_show_phases, `.3~f`)} eV/atom`,
+      key: `hull-show-threshold`,
+    },
+    {
+      label: `Label threshold`,
+      value: `${format_num(max_hull_dist_show_labels, `.3~f`)} eV/atom`,
+      key: `hull-label-threshold`,
+    },
+    {
+      label: `Entry limit for labels`,
+      value: `${label_threshold} entries`,
+      key: `hull-entry-limit-labels`,
+    },
+  ])
+
+  let info_cards = $derived([
+    { title: `Visualization Settings`, rows: settings_rows },
+    { title: `Usage Tips`, rows: usage_tips },
+  ])
+
+  const info_card_style = [
+    `--info-card-padding: 3pt`,
+    `--info-card-bg: var(--pane-bg, white)`,
+    `--info-card-heading-gap: 6px`,
+    `--info-row-padding: 1pt`,
+    `--row-label-max: 1fr`,
+    `--info-row-label-color: var(--text-color-muted, #666)`,
+  ].join(`; `)
 </script>
 
 <DraggablePane
@@ -49,67 +108,15 @@
     {phase_stats}
     {stable_entries}
     {unstable_entries}
-    style="padding: 3pt; background: var(--pane-bg)"
+    style="padding: 3pt; background: var(--pane-bg); --hull-stats-table-height: 30rem"
   />
 
-  <section class="vis-settings">
-    <h5 id="visualization-settings">Visualization Settings</h5>
-    <div class="setting-item" data-testid="hull-visible-stable">
-      <span>Visible stable:</span>
-      <span>{stable_entries.filter((entry) => entry.visible).length} / {
-          stable_entries.length
-        }</span>
-    </div>
-    <div class="setting-item" data-testid="hull-visible-unstable">
-      <span>Visible unstable:</span>
-      <span>{unstable_entries.filter((entry) => entry.visible).length} / {
-          unstable_entries.length
-        }</span>
-    </div>
-    <div class="setting-item" data-testid="hull-show-threshold">
-      <span>Points threshold:</span>
-      <span>{max_hull_dist_show_phases.toFixed(3)} eV/atom</span>
-    </div>
-    <div class="setting-item" data-testid="hull-label-threshold">
-      <span>Label threshold:</span>
-      <span>{max_hull_dist_show_labels.toFixed(3)} eV/atom</span>
-    </div>
-    <div class="setting-item" data-testid="hull-entry-limit-labels">
-      <span>Entry limit for labels:</span>
-      <span>{label_threshold} entries</span>
-    </div>
-  </section>
-
-  <section class="usage-tips">
-    <h5 id="usage-tips">Usage Tips</h5>
-    <div class="tips-item"><span>Single click:</span><span>Select point</span></div>
-    <div class="tips-item"><span>Double click:</span><span>Copy info</span></div>
-    <div class="tips-item"><span>Drag:</span><span>Rotate view</span></div>
-    <div class="tips-item"><span>Scroll:</span><span>Zoom in/out</span></div>
-    <div class="tips-item"><span>Key 'r':</span><span>Reset camera</span></div>
-    <div class="tips-item"><span>Key 'b':</span><span>Toggle color mode</span></div>
-    <div class="tips-item"><span>Key 's':</span><span>Toggle stable points</span></div>
-    <div class="tips-item"><span>Key 'u':</span><span>Toggle unstable points</span></div>
-    <div class="tips-item"><span>Key 'l':</span><span>Toggle labels</span></div>
-  </section>
+  <InfoPaneCards
+    cards={info_cards}
+    filter_placeholder="Filter hull info"
+    empty_label="hull info"
+    heading_level={5}
+    row_label_min="7em"
+    style={info_card_style}
+  />
 </DraggablePane>
-
-<style>
-  .vis-settings, .usage-tips {
-    padding: 3pt;
-    background: var(--pane-bg, white);
-  }
-  .vis-settings h5, .usage-tips h5 {
-    margin: 0 0 6px 0;
-  }
-  .setting-item, .tips-item {
-    display: flex;
-    justify-content: space-between;
-    gap: 6pt;
-    padding: 1pt;
-    line-height: 1.5;
-  }
-  .setting-item span:first-child, .tips-item span:first-child {
-    color: var(--text-color-muted, #666);
-  }
-</style>

package/dist/convex-hull/ConvexHullStats.svelte

@@ -49,6 +49,16 @@
   // Formula filter: when set, table shows only entries with this reduced formula
   let formula_filter = $state(``)
   let show_export_dropdown = $state(false)
+  const table_scroll_height =
+    `var(--hull-stats-table-height, calc(var(--hull-stats-table-row-height, 2.35rem) * 10 + var(--hull-stats-table-header-height, 3.5rem)))`
+  const table_scroll_style = $derived(layout === `side-by-side`
+    ? `flex: 1 1 0; height: ${table_scroll_height}; min-height: ${table_scroll_height}; max-width: 100%; overflow: auto`
+    : `height: ${table_scroll_height}; min-height: ${table_scroll_height}; max-height: var(--hull-stats-max-height, 70vh); max-width: 100%; overflow: auto`
+  )
+  const table_root_style = $derived(layout === `side-by-side`
+    ? `flex: 1 1 0; min-height: ${table_scroll_height}; margin-inline: 0`
+    : `min-width: 0; margin-inline: 0`
+  )
 
   async function copy_to_clipboard(label: string, value: string, key: string) {
     try {
@@ -638,13 +648,9 @@
     data={table_data}
     columns={table_columns}
     initial_sort={{ column: `E<sub>hull</sub>`, direction: `asc` }}
-    scroll_style={layout === `side-by-side`
-    ? `flex: 1 1 0; max-width: 100%; overflow: auto`
-    : `max-height: var(--hull-stats-max-height, 500px)`}
+    scroll_style={table_scroll_style}
     style="width: 100%"
-    root_style={layout === `side-by-side`
-    ? `flex: 1 1 0; min-height: 0; margin-inline: 0`
-    : undefined}
+    root_style={table_root_style}
     onrowclick={on_entry_click ? handle_row_click : undefined}
     export_data={false}
   />
@@ -681,6 +687,9 @@
   .convex-hull-stats {
     background: var(--hull-stats-bg, var(--hull-bg));
     border-radius: var(--hull-border-radius, var(--border-radius, 3pt));
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
     padding: var(--hull-stats-padding, 1em);
   }
   .convex-hull-stats.side-by-side {
@@ -700,6 +709,7 @@
   .table-pane {
     flex: 1 1 0;
     max-width: 100%;
+    min-height: var(--hull-stats-table-height, calc(var(--hull-stats-table-row-height, 2.35rem) * 10 + var(--hull-stats-table-header-height, 3.5rem)));
     min-width: 0;
     overflow: auto;
     display: flex;
@@ -747,9 +757,15 @@
   .view-toggle {
     display: flex;
     margin-bottom: 8pt;
+    max-width: 100%;
+    min-width: 0;
   }
   .view-toggle button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     flex: 1;
+    min-width: 0;
     padding: 2pt 8pt;
     border: 1px solid
       var(--hull-stats-border-color, color-mix(in srgb, currentColor 20%, transparent));
@@ -757,6 +773,7 @@
     color: inherit;
     cursor: pointer;
     font-size: 0.85em;
+    text-align: center;
   }
   .view-toggle button:first-child {
     border-radius: 4pt 0 0 4pt;

package/dist/convex-hull/GasPressureControls.svelte

@@ -5,7 +5,7 @@
     GasThermodynamicsConfig,
   } from './types'
   import { sanitize_html } from '../sanitize'
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import {
     compute_gas_chemical_potential,
@@ -94,8 +94,8 @@
     const P = slider_to_pressure(+(event.currentTarget as HTMLInputElement).value)
     pressures = { ...pressures, [gas]: P }
     // Clear only this gas's preview (don't reset other sliders being dragged simultaneously)
-    const { [gas]: _, ...rest } = preview_pressures
-    preview_pressures = rest
+    const { [gas]: _removed_preview, ...remaining_previews } = preview_pressures
+    preview_pressures = remaining_previews
   }
 
   function set_pressure_direct(gas: GasSpecies, value: number): void {

package/dist/convex-hull/TemperatureSlider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
 
   let {

package/dist/convex-hull/barycentric-coords.js

@@ -144,7 +144,7 @@ export const TETRAHEDRON_VERTICES = [
 ];
 export function composition_to_barycentric_4d(composition, elements) {
     if (elements.length !== 4) {
-        throw new Error(`Quaternary barycentric coordinates require exactly ${4} elements`);
+        throw new Error(`Quaternary barycentric coordinates require exactly 4 elements`);
     }
     const amounts = elements.map((el) => composition[el] || 0);
     const total = amounts.reduce((sum, amount) => sum + amount, 0);
@@ -168,7 +168,7 @@ export function barycentric_to_tetrahedral(barycentric) {
 }
 export function compute_4d_coords(entries, elements) {
     if (elements.length !== 4) {
-        throw new Error(`Quaternary convex hull requires exactly ${4} elements`);
+        throw new Error(`Quaternary convex hull requires exactly 4 elements`);
     }
     // Use Set for O(1) lookups instead of O(n) includes
     const element_set = new Set(elements);

package/dist/convex-hull/helpers.js

@@ -26,13 +26,17 @@ export const is_unary_entry = (entry) => get_arity(entry) === 1;
 export function get_energy_color_scale(color_mode, color_scale, plot_entries) {
     if (color_mode !== `energy` || plot_entries.length === 0)
         return null;
-    const hull_distances = plot_entries
-        .map((entry) => entry.e_above_hull)
-        .filter((val) => typeof val === `number`);
-    if (hull_distances.length === 0)
+    let lo = Number.POSITIVE_INFINITY;
+    let hi_raw = 0.1;
+    for (const entry of plot_entries) {
+        const val = entry.e_above_hull;
+        if (typeof val !== `number` || !Number.isFinite(val))
+            continue;
+        lo = Math.min(lo, val);
+        hi_raw = Math.max(hi_raw, val);
+    }
+    if (!Number.isFinite(lo))
         return null;
-    const lo = Math.min(...hull_distances);
-    const hi_raw = Math.max(...hull_distances, 0.1);
     const hi = Math.max(hi_raw, lo + 1e-6);
     const interpolator = get_d3_interpolator(color_scale);
     return scaleSequential(interpolator).domain([lo, hi]);
@@ -70,10 +74,14 @@ export async function parse_hull_entries_from_drop(event) {
 export function calc_max_hull_dist_in_data(processed_entries) {
     if (processed_entries.length === 0)
         return 0.5;
-    const hull_distances = processed_entries
-        .map((entry) => entry.e_above_hull)
-        .filter((val) => typeof val === `number` && Number.isFinite(val));
-    const max_val = (hull_distances.length ? Math.max(...hull_distances) : 0) + 0.001;
+    let max_hull_dist = 0;
+    for (const entry of processed_entries) {
+        const val = entry.e_above_hull;
+        if (typeof val === `number` && Number.isFinite(val)) {
+            max_hull_dist = Math.max(max_hull_dist, val);
+        }
+    }
+    const max_val = max_hull_dist + 0.001;
     return Math.max(0.1, max_val);
 }
 // Smart threshold for showing unstable entries based on entry count.
@@ -157,8 +165,18 @@ energy_source_mode) {
     const has_precomputed_e_form = entries.length > 0 && entries.every((entry) => typeof entry.e_form_per_atom === `number`);
     const has_precomputed_hull = entries.length > 0 && entries.every((entry) => typeof entry.e_above_hull === `number`);
     const unary_refs = find_lowest_energy_unary_refs_fn(entries);
-    const elements_in_entries = Array.from(new Set(entries.flatMap((entry) => Object.keys(entry.composition))));
-    const can_compute_e_form = elements_in_entries.every((el) => Boolean(unary_refs[el]));
+    const elements_in_entries = new Set();
+    for (const entry of entries) {
+        for (const el of Object.keys(entry.composition))
+            elements_in_entries.add(el);
+    }
+    let can_compute_e_form = true;
+    for (const el of elements_in_entries) {
+        if (!unary_refs[el]) {
+            can_compute_e_form = false;
+            break;
+        }
+    }
     const can_compute_hull = can_compute_e_form;
     // Resolve mode to avoid inconsistent states:
     // - If full precomputed available, honor user toggle
@@ -467,30 +485,30 @@ export function get_canvas_text_color(dark_mode, element) {
 }
 // Create a Path2D for a marker symbol. Uses d3-shape for consistent rendering with ScatterPlot.
 export function create_marker_path(size, marker = `circle`) {
+    const safe_size = Number.isFinite(size) ? size : 0;
+    const rounded_size = Math.max(0, Number(safe_size.toFixed(3)));
     // Capitalize first letter to get D3 symbol name (e.g. 'circle' -> 'Circle')
     const d3_name = marker.charAt(0).toUpperCase() + marker.slice(1);
     const symbol_type = symbol_map[d3_name];
-    if (!symbol_type) {
-        const path = new Path2D();
-        path.arc(0, 0, size, 0, 2 * Math.PI);
-        return path;
-    }
-    const symbol_area = Math.PI * size * size;
-    const path_data = symbol().type(symbol_type).size(symbol_area)();
+    const symbol_area = Math.PI * rounded_size * rounded_size;
+    const path_data = symbol_type ? symbol().type(symbol_type).size(symbol_area)() : null;
+    const path = new Path2D(path_data ?? undefined);
     if (!path_data) {
-        const path = new Path2D();
-        path.arc(0, 0, size, 0, 2 * Math.PI);
-        return path;
+        path.arc(0, 0, rounded_size, 0, 2 * Math.PI);
     }
-    return new Path2D(path_data);
+    return path;
 }
 // Analyze entries for temperature-dependent free energy data.
 // Returns available temperatures (union of all T values across entries) if any entries have temp data.
 export function analyze_temperature_data(entries) {
-    const valid_temps = entries
-        .filter(entry_has_temp_data)
-        .flatMap((entry) => entry.temperatures ?? []);
-    const available_temperatures = [...new Set(valid_temps)].sort((a, b) => a - b);
+    const unique_temperatures = new Set();
+    for (const entry of entries) {
+        if (!entry_has_temp_data(entry))
+            continue;
+        for (const temperature of entry.temperatures ?? [])
+            unique_temperatures.add(temperature);
+    }
+    const available_temperatures = [...unique_temperatures].sort((a, b) => a - b);
     return {
         has_temp_data: available_temperatures.length > 0,
         available_temperatures,

package/dist/convex-hull/thermodynamics.js

@@ -311,7 +311,7 @@ export function calculate_e_above_hull(input, reference_entries) {
         }
         // Ensure corner points (pure elements default to e_form = 0)
         for (let el_idx = 0; el_idx < arity; el_idx++) {
-            const corner = new Array(arity + 1).fill(0);
+            const corner = Array(arity + 1).fill(0);
             corner[el_idx] = 1; // ith barycentric coord = 1
             if (!ref_points.some((pt) => norm_nd(subtract_nd(pt, corner)) < EPS)) {
                 ref_points.push(corner);
@@ -1511,7 +1511,7 @@ function solve_linear_system(matrix_a, vec_b) {
         }
     }
     // Back substitution
-    const result = new Array(n).fill(0);
+    const result = Array(n).fill(0);
     for (let row = n - 1; row >= 0; row--) {
         let sum = aug[row][n];
         for (let col = row + 1; col < n; col++) {

package/dist/element/BohrAtom.svelte

@@ -1,7 +1,23 @@
 <script lang="ts">
   import type { SVGAttributes } from 'svelte/elements'
 
-  type Props = SVGAttributes<SVGSVGElement> & {
+  let {
+    symbol = ``,
+    name = ``,
+    shells,
+    adapt_size = true,
+    shell_width = 20,
+    size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270,
+    base_fill = `var(--text-color)`,
+    orbital_period = 3,
+    nucleus_props = {},
+    shell_props = {},
+    electron_props = {},
+    highlight_shell = null,
+    number_electrons = false,
+    electron_label_props = {},
+    ...rest
+  }: SVGAttributes<SVGSVGElement> & {
     // https://svelte.dev/repl/17d71b590f554b5a9eba6e04023dd41c
     symbol?: string // usually H, He, etc. but can be anything
     name?: string // usually Hydrogen, Helium, etc. but can be anything
@@ -23,41 +39,23 @@
       | `sequential`
       | ((idx: number) => string)
     electron_label_props?: Record<string, string | number>
-  }
-
-  let {
-    symbol = ``,
-    name = ``,
-    shells,
-    adapt_size = true,
-    shell_width = 20,
-    size = adapt_size ? (shells.length + 1) * 2 * shell_width + 30 : 270,
-    base_fill = `var(--text-color)`,
-    orbital_period = 3,
-    nucleus_props = {},
-    shell_props = {},
-    electron_props = {},
-    highlight_shell = null,
-    number_electrons = false,
-    electron_label_props = {},
-    ...rest
-  }: Props = $props()
+  } = $props()
 
   // Bohr atom electron orbital period is given by
   // T = (n^3 h^3) / (4pi^2 m K e^4 Z^2) = 1.52 * 10^-16 * n^3 / Z^2 s
   // with n the shell number, Z the atomic number, m the mass of the electron
-  let _nucleus_props = $derived({
+  let nucleus_svg_props = $derived({
     r: 20,
     fill: base_fill,
     'fill-opacity': `0.3`,
     ...nucleus_props,
   })
-  let _shell_props = $derived({
+  let shell_svg_props = $derived({
     stroke: base_fill,
     fill: `none`,
     ...shell_props,
   })
-  let _electron_props = $derived({
+  let electron_svg_props = $derived({
     r: 3,
     stroke: base_fill,
     fill: `blue`,
@@ -75,7 +73,7 @@
   {...rest}
 >
   <!-- nucleus -->
-  <circle class="nucleus" {..._nucleus_props}>
+  <circle class="nucleus" {...nucleus_svg_props}>
     {#if name}
       <title>{name}</title>
     {/if}
@@ -87,12 +85,12 @@
   <!-- electron orbitals -->
   {#each shells as electrons, shell_idx (`${shell_idx}-${electrons}`)}
     {@const n = shell_idx + 1}
-    {@const shell_radius = _nucleus_props.r + n * shell_width}
+    {@const shell_radius = nucleus_svg_props.r + n * shell_width}
     {@const active = n === highlight_shell}
     <g class="shell" style:animation-duration="{orbital_period * n ** 1.5}s">
       <circle
         r={shell_radius}
-        {..._shell_props}
+        {...shell_svg_props}
         style:stroke-width={active ? 2 : 1}
         style:stroke={active ? `yellow` : base_fill}
       />
@@ -101,7 +99,7 @@
       {#each Array(electrons) as _, elec_idx (elec_idx)}
         {@const elec_x = Math.cos((2 * Math.PI * elec_idx) / electrons) * shell_radius}
         {@const elec_y = Math.sin((2 * Math.PI * elec_idx) / electrons) * shell_radius}
-        <circle class="electron" cx={elec_x} cy={elec_y} {..._electron_props}>
+        <circle class="electron" cx={elec_x} cy={elec_y} {...electron_svg_props}>
           <title>Electron {elec_idx + 1}</title>
         </circle>
         {#if number_electrons}

package/dist/element/BohrAtom.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SVGAttributes } from 'svelte/elements';
-type Props = SVGAttributes<SVGSVGElement> & {
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
     symbol?: string;
     name?: string;
     shells: number[];
@@ -15,6 +15,6 @@ type Props = SVGAttributes<SVGSVGElement> & {
     number_electrons?: boolean | `hierarchical` | `sequential` | ((idx: number) => string);
     electron_label_props?: Record<string, string | number>;
 };
-declare const BohrAtom: import("svelte").Component<Props, {}, "">;
+declare const BohrAtom: import("svelte").Component<$$ComponentProps, {}, "">;
 type BohrAtom = ReturnType<typeof BohrAtom>;
 export default BohrAtom;

package/dist/element/data.d.ts

@@ -1,3 +1,2 @@
-import type { ChemicalElement } from './types';
-declare const _default: ChemicalElement[];
-export default _default;
+import data from './data.json.gz';
+export default data;