matterviz 0.3.1 → 0.3.2

package/dist/convex-hull/ConvexHullStats.svelte

@@ -1,12 +1,16 @@
-<script lang="ts">import { get_alphabetical_formula } from '../composition/format';
+<script lang="ts">import { get_alphabetical_formula, get_electro_neg_formula, get_reduced_formula, } from '../composition';
 import Icon from '../Icon.svelte';
 import { format_num } from '../labels';
 import Histogram from '../plot/Histogram.svelte';
 import HeatmapTable from '../table/HeatmapTable.svelte';
-import { SvelteSet } from 'svelte/reactivity';
-let { phase_stats, stable_entries, unstable_entries, ...rest } = $props();
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { get_arity, is_on_hull } from './types';
+let { phase_stats, stable_entries, unstable_entries, layout = `toggle`, on_entry_click, highlighted_entry_id, min_n_elements = $bindable(1), entry_href, ...rest } = $props();
 let copied_items = new SvelteSet();
 let view_mode = $state(`stats`);
+// Formula filter: when set, table shows only entries with this reduced formula
+let formula_filter = $state(``);
+let show_export_dropdown = $state(false);
 async function copy_to_clipboard(label, value, key) {
     try {
         await navigator.clipboard.writeText(`${label}: ${value}`);
@@ -17,258 +21,595 @@ async function copy_to_clipboard(label, value, key) {
         console.error(`Failed to copy to clipboard:`, error);
     }
 }
+function handle_copy_keydown(event, label, value, key) {
+    if (event.key !== `Enter` && event.key !== ` `)
+        return;
+    event.preventDefault();
+    copy_to_clipboard(label, value, key);
+}
 // Shared concatenation of stable + unstable for histograms
 let all_entries = $derived([...stable_entries, ...unstable_entries]);
+// Static arity labels for phase breakdown display
+const arity_types = [
+    [`Unary`, `unary`, 1],
+    [`Binary`, `binary`, 2],
+    [`Ternary`, `ternary`, 3],
+    [`Quaternary`, `quaternary`, 4],
+    [`Quinary+`, `quinary_plus`, 5],
+];
+const histogram_props = {
+    bins: 50,
+    y_axis: { label: ``, ticks: 3 },
+    show_legend: false,
+    show_controls: false,
+    padding: { t: 5, b: 22, l: 35, r: 5 },
+    style: `height: 100px; --histogram-min-height: 100px`,
+};
 // Prepare histogram data for formation energies and hull distances
-let e_form_data = $derived.by(() => {
-    const energies = all_entries
-        .map((entry) => entry.e_form_per_atom ?? entry.energy_per_atom)
-        .filter((val) => val !== undefined && isFinite(val));
-    return [{
-            x: [],
-            y: energies,
-            label: `Formation Energy`,
-            line_style: { stroke: `steelblue` },
-        }];
-});
-let hull_distance_data = $derived.by(() => {
-    const distances = all_entries
-        .map((entry) => entry.e_above_hull)
-        .filter((val) => val !== undefined && isFinite(val));
-    return [{
-            x: [],
-            y: distances,
-            label: `E above hull`,
-            line_style: { stroke: `coral` },
-        }];
-});
+let e_form_data = $derived([{
+        x: [],
+        y: all_entries
+            .map((entry) => entry.e_form_per_atom ?? entry.energy_per_atom)
+            .filter((val) => val !== undefined && isFinite(val)),
+        label: `Formation Energy`,
+    }]);
+let hull_distance_data = $derived([{
+        x: [],
+        y: all_entries
+            .map((entry) => entry.e_above_hull)
+            .filter((val) => val !== undefined && isFinite(val)),
+        label: `E above hull`,
+    }]);
 let pane_data = $derived.by(() => {
     if (!phase_stats)
         return [];
-    const sections = [];
-    // Determine system dimensionality from chemical_system string (count elements)
-    const num_elements = phase_stats.chemical_system.split(`-`).length;
-    const max_arity = Math.max(num_elements, phase_stats.quaternary > 0
-        ? 4
-        : phase_stats.ternary > 0
-            ? 3
-            : phase_stats.binary > 0
-                ? 2
-                : 1);
-    const phase_items = [
+    const pct = (count) => phase_stats.total > 0 ? format_num(count / phase_stats.total, `.1~%`) : `0%`;
+    return [
         {
-            label: `Total entries in ${phase_stats.chemical_system}`,
-            value: format_num(phase_stats.total),
-            key: `total-entries`,
+            title: ``,
+            items: [
+                {
+                    label: `Total entries in ${phase_stats.chemical_system}`,
+                    value: format_num(phase_stats.total),
+                    key: `total-entries`,
+                },
+                // Only show phase types that exist or are within the max_arity
+                // used when computing stats (respects zeroed-out counts)
+                ...arity_types
+                    .filter(([, field, arity]) => phase_stats[field] > 0 || phase_stats.max_arity >= arity)
+                    .map(([display, field]) => ({
+                    label: `${display} phases`,
+                    value: `${format_num(phase_stats[field])} (${pct(phase_stats[field])})`,
+                    key: `${field}-phases`,
+                })),
+            ],
+        },
+        {
+            title: `Stability`,
+            items: [
+                {
+                    label: `Stable phases`,
+                    value: `${format_num(phase_stats.stable)} (${pct(phase_stats.stable)})`,
+                    key: `stable-phases`,
+                },
+                {
+                    label: `Unstable phases`,
+                    value: `${format_num(phase_stats.unstable)} (${pct(phase_stats.unstable)})`,
+                    key: `unstable-phases`,
+                },
+            ],
+        },
+        {
+            title: `E<sub>form</sub> distribution`,
+            items: [{
+                    label: `Min / avg / max (eV/atom)`,
+                    value: [
+                        phase_stats.energy_range.min,
+                        phase_stats.energy_range.avg,
+                        phase_stats.energy_range.max,
+                    ]
+                        .map((val) => format_num(val, `.3f`)).join(` / `),
+                    key: `formation-energy`,
+                }],
+        },
+        {
+            title: `E<sub>above hull</sub> distribution`,
+            items: [{
+                    label: `Max / avg (eV/atom)`,
+                    value: [phase_stats.hull_distance.max, phase_stats.hull_distance.avg]
+                        .map((val) => format_num(val, `.3f`)).join(` / `),
+                    key: `hull-distance`,
+                }],
         },
     ];
-    // Only show phase types that exist or are within expected dimensionality
-    const arity_types = [
-        [`Unary`, `unary`, 1],
-        [`Binary`, `binary`, 2],
-        [`Ternary`, `ternary`, 3],
-        [`Quaternary`, `quaternary`, 4],
-    ];
-    for (const [display, field, min_arity] of arity_types) {
-        const count = phase_stats[field];
-        if (count > 0 || max_arity >= min_arity) {
-            phase_items.push({
-                label: `${display} phases`,
-                value: `${format_num(count)} (${format_num(count / phase_stats.total, `.1~%`)})`,
-                key: `${field}-phases`,
-            });
+});
+// Subsystem coverage: count entries per element pair for the stats pane
+let subsystem_coverage = $derived.by(() => {
+    if (!phase_stats)
+        return null;
+    const elements = phase_stats.chemical_system.split(`-`);
+    if (elements.length < 3 || elements.length > 10)
+        return null;
+    // Count entries containing each pair
+    const pair_counts = new SvelteMap();
+    for (const entry of all_entries) {
+        const active = Object.keys(entry.composition)
+            .filter((el) => (entry.composition[el] ?? 0) > 0);
+        // Count all pairs present in this entry
+        for (let idx_a = 0; idx_a < active.length; idx_a++) {
+            for (let idx_b = idx_a + 1; idx_b < active.length; idx_b++) {
+                const key = [active[idx_a], active[idx_b]].sort().join(`-`);
+                pair_counts.set(key, (pair_counts.get(key) ?? 0) + 1);
+            }
         }
     }
-    sections.push({ title: ``, items: phase_items });
-    // Stability
-    const stable_item = {
-        label: `Stable phases`,
-        value: `${format_num(phase_stats.stable)} (${format_num(phase_stats.stable / phase_stats.total, `.1~%`)})`,
-        key: `stable-phases`,
-    };
-    const unstable_item = {
-        label: `Unstable phases`,
-        value: `${format_num(phase_stats.unstable)} (${format_num(phase_stats.unstable / phase_stats.total, `.1~%`)})`,
-        key: `unstable-phases`,
-    };
-    sections.push({ title: `Stability`, items: [stable_item, unstable_item] });
-    // Energy Statistics
-    const energy_item = {
-        label: `Min / avg / max (eV/atom)`,
-        value: `${format_num(phase_stats.energy_range.min, `.3f`)} / ${format_num(phase_stats.energy_range.avg, `.3f`)} / ${format_num(phase_stats.energy_range.max, `.3f`)}`,
-        key: `formation-energy`,
-    };
-    sections.push({
-        title: `E<sub>form</sub> distribution`,
-        items: [energy_item],
-    });
-    // Hull Distance
-    const hull_distance_item = {
-        label: `Max / avg (eV/atom)`,
-        value: `${format_num(phase_stats.hull_distance.max, `.3f`)} / ${format_num(phase_stats.hull_distance.avg, `.3f`)}`,
-        key: `hull-distance`,
-    };
-    sections.push({
-        title: `E<sub>above hull</sub> distribution`,
-        items: [hull_distance_item],
-    });
-    return sections;
+    // Build pairs list sorted by element order in chemical_system
+    return elements.flatMap((el_a, idx_a) => elements.slice(idx_a + 1).map((el_b) => {
+        const key = [el_a, el_b].sort().join(`-`);
+        return { pair: key, count: pair_counts.get(key) ?? 0 };
+    }));
 });
-// Table view: visible entries and feature flags
-let visible_entries = $derived(all_entries.filter((entry) => entry.visible));
+let subsystem_coverage_summary = $derived(subsystem_coverage?.map(({ pair, count }) => `${pair}: ${count}`).join(` | `) ??
+    null);
+// Table view: visible entries filtered by min element count and formula
+let visible_entries = $derived(all_entries.filter((entry) => {
+    if (!entry.visible)
+        return false;
+    if (min_n_elements > 1 && get_arity(entry) < min_n_elements)
+        return false;
+    if (active_formula_filter &&
+        composition_key(entry.composition) !== active_formula_filter)
+        return false;
+    return true;
+}));
 let has_raw = $derived(visible_entries.some((entry) => entry.energy_per_atom !== undefined));
 let has_ids = $derived(visible_entries.some((entry) => entry.entry_id));
-let table_data = $derived(visible_entries.map((entry) => {
-    const counts = Object.values(entry.composition);
-    const n_atoms = counts.reduce((sum, count) => sum + count, 0);
-    const row = {
-        Formula: entry.reduced_formula ?? entry.name ??
-            get_alphabetical_formula(entry.composition, true, ``),
-        'E<sub>hull</sub>': entry.e_above_hull ?? null,
-        'E<sub>form</sub>': entry.e_form_per_atom ?? entry.energy_per_atom ?? null,
-    };
-    if (has_raw)
-        row[`E<sub>raw</sub>`] = entry.energy_per_atom;
-    if (has_ids)
-        row.ID = entry.entry_id;
-    row[`N<sub>el</sub>`] = counts.filter((count) => count > 0).length;
-    row[`N<sub>at</sub>`] = n_atoms;
-    return row;
-}));
-let table_columns = $derived.by(() => {
-    const cols = [
-        { label: `Formula`, color_scale: null },
-        {
-            label: `E<sub>hull</sub>`,
-            better: `lower`,
-            color_scale: `interpolateRdYlGn`,
-            format: `.4f`,
-            description: `Energy above convex hull (eV/atom)`,
-        },
-        {
-            label: `E<sub>form</sub>`,
-            better: `lower`,
-            color_scale: `interpolateBlues`,
-            format: `.4f`,
-            description: `Formation energy (eV/atom)`,
-        },
-    ];
-    if (has_raw) {
-        cols.push({
-            label: `E<sub>raw</sub>`,
-            color_scale: `interpolateCool`,
-            format: `.4f`,
-            description: `Raw energy per atom (eV/atom)`,
-        });
+let max_n_el = $derived(all_entries.reduce((max, entry) => Math.max(max, get_arity(entry)), 1));
+// Sortable HTML cell with a hidden data-sort-value for HeatmapTable sorting
+const sort_span = (sort_val, display, attrs = ``) => `<span data-sort-value="${sort_val}"${attrs ? ` ${attrs}` : ``}>${display}</span>`;
+// Escape HTML special chars to prevent XSS when rendering user-supplied strings via {@html}
+const escape_html = (str) => str
+    .replace(/&/g, `&amp;`)
+    .replace(/</g, `&lt;`)
+    .replace(/>/g, `&gt;`)
+    .replace(/"/g, `&quot;`)
+    .replace(/'/g, `&#39;`);
+const unescape_html = (str, max_rounds = 5) => {
+    let decoded = str;
+    for (let round_idx = 0; round_idx < max_rounds; round_idx++) {
+        const next_decoded = decoded
+            .replace(/&amp;/g, `&`)
+            .replace(/&lt;/g, `<`)
+            .replace(/&gt;/g, `>`)
+            .replace(/&quot;/g, `"`)
+            .replace(/&#39;/g, `'`);
+        if (next_decoded === decoded)
+            break;
+        decoded = next_decoded;
     }
-    if (has_ids) {
-        cols.push({ label: `ID`, color_scale: null, description: `Entry identifier` });
+    return decoded;
+};
+// Convert legacy/html formula strings like Fe<sub>2</sub>O<sub>3</sub> back to plain
+// stoichiometric input before parsing/reordering.
+const normalize_formula_markup = (formula) => unescape_html(formula)
+    .replaceAll(/<sub>\s*([^<]+?)\s*<\/sub>/gi, `$1`)
+    .replaceAll(/<[^>]+>/g, ``)
+    .replaceAll(/\s+/g, ``);
+const sanitize_href = (href) => {
+    const trimmed_href = href?.trim();
+    if (!trimmed_href)
+        return null;
+    const lower_href = trimmed_href.toLowerCase();
+    const blocked_schemes = [`javascript:`, `data:`, `vbscript:`];
+    if (blocked_schemes.some((scheme) => lower_href.startsWith(scheme)))
+        return null;
+    return trimmed_href;
+};
+// Serialize reduced composition to a stable string key for polymorph counting
+const composition_key = (comp) => get_alphabetical_formula(get_reduced_formula(comp), true, ``);
+// Count polymorphs per reduced formula across all entries
+let polymorph_counts = $derived.by(() => {
+    const counts = new SvelteMap();
+    for (const entry of all_entries) {
+        const key = composition_key(entry.composition);
+        counts.set(key, (counts.get(key) ?? 0) + 1);
     }
-    cols.push({
+    return counts;
+});
+let poly_formulas = $derived([...polymorph_counts.entries()]
+    .filter(([, count]) => count > 1)
+    .sort(([, count_a], [, count_b]) => count_b - count_a));
+let has_polymorphs = $derived(poly_formulas.length > 0);
+let active_formula_filter = $derived.by(() => {
+    if (!formula_filter || !has_polymorphs)
+        return ``;
+    return poly_formulas.some(([formula]) => formula === formula_filter)
+        ? formula_filter
+        : ``;
+});
+$effect(() => {
+    if (formula_filter && formula_filter !== active_formula_filter) {
+        formula_filter = ``;
+    }
+});
+// Build table rows and a WeakMap from row→entry for the click handler
+let { table_data, entry_by_row } = $derived.by(() => {
+    const map = new WeakMap();
+    const rows = visible_entries.map((entry, idx) => {
+        const n_atoms = Object.values(entry.composition).reduce((sum, count) => sum + count, 0);
+        const on_hull = is_on_hull(entry);
+        const formula_source = entry.reduced_formula ?? entry.name ??
+            get_alphabetical_formula(entry.composition, true, ``);
+        const normalized_formula = normalize_formula_markup(formula_source);
+        const formatted_formula = get_electro_neg_formula(normalized_formula);
+        const formula_html = formatted_formula || escape_html(normalized_formula);
+        // Match by entry_id or common data fields (mat_id, structure_id)
+        // since entry_id may be wrapped in HTML (e.g. <a> tags)
+        const entry_data = entry.data;
+        const is_highlighted = !!(highlighted_entry_id && (entry.entry_id === highlighted_entry_id ||
+            entry_data?.mat_id === highlighted_entry_id ||
+            entry_data?.structure_id === highlighted_entry_id));
+        const row = {
+            '#': sort_span(idx + 1, `${idx + 1}`),
+            Formula: on_hull ? `<strong>${formula_html}</strong>` : formula_html,
+            'E<sub>hull</sub>': entry.e_above_hull ?? null,
+            'E<sub>form</sub>': entry.e_form_per_atom ?? entry.energy_per_atom ?? null,
+        };
+        if (has_raw)
+            row[`E<sub>raw</sub>`] = entry.energy_per_atom;
+        if (has_ids) {
+            const safe_href = sanitize_href(entry_href?.(entry));
+            const safe_id = entry.entry_id ? escape_html(entry.entry_id) : undefined;
+            row.ID = safe_href && safe_id
+                ? `<a href="${escape_html(safe_href)}" target="_blank" rel="noopener">${safe_id}</a>`
+                : safe_id;
+        }
+        if (has_polymorphs) {
+            const comp_key = composition_key(entry.composition);
+            const poly_count = polymorph_counts.get(comp_key) ?? 1;
+            row.Poly = poly_count;
+        }
+        row[`N<sub>el</sub>`] = get_arity(entry);
+        row[`N<sub>at</sub>`] = n_atoms;
+        // Highlight row for current material
+        if (is_highlighted) {
+            row.style =
+                `background: color-mix(in srgb, var(--hull-stable-color, #22c55e) 15%, transparent)`;
+        }
+        map.set(row, entry);
+        return row;
+    });
+    return { table_data: rows, entry_by_row: map };
+});
+function handle_row_click(_event, row) {
+    const entry = entry_by_row.get(row);
+    if (entry)
+        on_entry_click?.(entry);
+}
+let table_columns = $derived([
+    { label: `#`, color_scale: null, description: `Row number` },
+    { label: `Formula`, color_scale: null },
+    {
+        label: `E<sub>hull</sub>`,
+        better: `lower`,
+        color_scale: `interpolateRdYlGn`,
+        format: `.4f`,
+        description: `Energy above convex hull (eV/atom)`,
+    },
+    {
+        label: `E<sub>form</sub>`,
+        better: `lower`,
+        color_scale: `interpolateBlues`,
+        format: `.4f`,
+        description: `Formation energy (eV/atom)`,
+    },
+    ...(has_raw
+        ? [{
+                label: `E<sub>raw</sub>`,
+                color_scale: `interpolateCool`,
+                format: `.4f`,
+                description: `Raw energy per atom (eV/atom)`,
+            }]
+        : []),
+    ...(has_ids
+        ? [{ label: `ID`, color_scale: null, description: `Entry identifier` }]
+        : []),
+    ...(has_polymorphs
+        ? [{
+                label: `Poly`,
+                color_scale: null,
+                description: `Number of polymorphs (same reduced formula)`,
+            }]
+        : []),
+    {
         label: `N<sub>el</sub>`,
         color_scale: null,
         description: `Number of elements`,
-    }, {
+    },
+    {
         label: `N<sub>at</sub>`,
         color_scale: null,
         format: `d`,
         description: `Number of atoms in unit cell`,
-    });
-    return cols;
-});
+    },
+]);
+const html_to_text = (val) => {
+    if (val == null)
+        return ``;
+    if (typeof val !== `string`)
+        return String(val);
+    const temp_el = document.createElement(`div`);
+    temp_el.innerHTML = val;
+    return temp_el.textContent?.trim() ?? ``;
+};
+const csv_escape = (val) => /[",\n]/.test(val) ? `"${val.replaceAll(`"`, `""`)}"` : val;
+const get_export_filename = (format) => {
+    const system = (phase_stats?.chemical_system ?? `convex-hull-stats`)
+        .toLowerCase()
+        .replaceAll(/\s+/g, `-`);
+    return `${system}.${format}`;
+};
+const build_export_rows = () => {
+    const column_labels = table_columns.map((col) => col.label);
+    return table_data.map((row) => Object.fromEntries(column_labels.map((label) => [html_to_text(label), html_to_text(row[label])])));
+};
+const download_file = (content, filename, mime_type) => {
+    const blob = new Blob([content], { type: mime_type });
+    const object_url = URL.createObjectURL(blob);
+    const link_el = document.createElement(`a`);
+    link_el.href = object_url;
+    link_el.download = filename;
+    document.body.append(link_el);
+    link_el.click();
+    link_el.remove();
+    URL.revokeObjectURL(object_url);
+};
+function export_table(format) {
+    const rows = build_export_rows();
+    if (format === `json`) {
+        download_file(JSON.stringify(rows, null, 2), get_export_filename(`json`), `application/json;charset=utf-8`);
+        return;
+    }
+    const headers = rows.length > 0 ? Object.keys(rows[0]) : [];
+    const csv_lines = [
+        headers.map(csv_escape).join(`,`),
+        ...rows.map((row) => headers.map((header) => csv_escape(row[header] ?? ``)).join(`,`)),
+    ];
+    download_file(csv_lines.join(`\n`), get_export_filename(`csv`), `text/csv;charset=utf-8`);
+}
 </script>
 
-<div {...rest} class="convex-hull-stats {rest.class ?? ``}">
-  <div class="view-toggle">
-    <button class:active={view_mode === `stats`} onclick={() => view_mode = `stats`}>
-      Stats
-    </button>
-    <button class:active={view_mode === `table`} onclick={() => view_mode = `table`}>
-      Table
-    </button>
-  </div>
-  {#if view_mode === `stats`}
-    {#each pane_data as section, sec_idx (sec_idx)}
-      {#if sec_idx > 0}<hr />{/if}
-      <section>
-        {#if section.title}
-          <h5>{@html section.title}</h5>
-        {/if}
-        {#each section.items as item (item.key ?? item.label)}
-          {@const { key, label, value } = item}
-          <div
-            class="clickable stat-item"
-            data-testid={key ? `pd-${key}` : undefined}
-            title="Click to copy: {label}: {value}"
-            onclick={() => copy_to_clipboard(item.label, String(item.value), key ?? item.label)}
-            role="button"
-            tabindex="0"
-            onkeydown={(event) => {
-              if (event.key === `Enter` || event.key === ` `) {
-                event.preventDefault()
-                copy_to_clipboard(item.label, String(item.value), key ?? item.label)
-              }
+{#snippet stats_panel()}
+  {#each pane_data as section, sec_idx (sec_idx)}
+    {#if sec_idx > 0}<hr />{/if}
+    <section>
+      {#if section.title}
+        <h5>{@html section.title}</h5>
+      {/if}
+      {#each section.items as item (item.key ?? item.label)}
+        {@const { key, label, value } = item}
+        <div
+          class="clickable stat-item"
+          data-testid={key ? `pd-${key}` : undefined}
+          title="Click to copy: {label}: {value}"
+          onclick={() => copy_to_clipboard(item.label, String(item.value), key ?? item.label)}
+          role="button"
+          tabindex="0"
+          onkeydown={(event) =>
+          handle_copy_keydown(
+            event,
+            item.label,
+            String(item.value),
+            key ?? item.label,
+          )}
+        >
+          <span>{@html label}:</span>
+          <span>{@html value}</span>
+          {#if key && copied_items.has(key)}
+            <Icon
+              icon="Check"
+              style="color: var(--success-color, #10b981); width: 12px; height: 12px"
+              class="copy-checkmark"
+            />
+          {/if}
+        </div>
+      {/each}
+
+      {#if sec_idx === 0 && subsystem_coverage}
+        <div
+          class="clickable stat-item subsystem-coverage-row"
+          data-testid="pd-binary-subsystem-coverage"
+          title="Click to copy: Binary subsystem coverage: {subsystem_coverage_summary ?? ``}"
+          onclick={() =>
+          copy_to_clipboard(
+            `Binary subsystem coverage`,
+            subsystem_coverage_summary ?? ``,
+            `binary-subsystem-coverage`,
+          )}
+          role="button"
+          tabindex="0"
+          onkeydown={(event) =>
+          handle_copy_keydown(
+            event,
+            `Binary subsystem coverage`,
+            subsystem_coverage_summary ?? ``,
+            `binary-subsystem-coverage`,
+          )}
+        >
+          <span class="subsystem-label"
+          >Binary subsystem coverage ({subsystem_coverage.length} pairs)</span>
+          <span class="subsystem-chips">
+            {#each subsystem_coverage as { pair, count } (pair)}
+              <span class="subsystem-chip" class:has-entries={count > 0}>
+                <span class="pair">{pair}</span>
+                <span class="count">{count}</span>
+              </span>
+            {/each}
+          </span>
+          {#if copied_items.has(`binary-subsystem-coverage`)}
+            <Icon
+              icon="Check"
+              style="color: var(--success-color, #10b981); width: 12px; height: 12px"
+              class="copy-checkmark"
+            />
+          {/if}
+        </div>
+      {/if}
+
+      {#if section.title === `E<sub>form</sub> distribution` &&
+      e_form_data[0].y.length > 0}
+        <Histogram
+          {...histogram_props}
+          series={e_form_data}
+          x_axis={{ label: ``, format: `.2f` }}
+          bar={{ color: `steelblue`, opacity: 0.7 }}
+        />
+      {/if}
+
+      {#if section.title === `E<sub>above hull</sub> distribution` &&
+      hull_distance_data[0].y.length > 0}
+        <Histogram
+          {...histogram_props}
+          series={hull_distance_data}
+          x_axis={{ label: ``, format: `.2f`, range: [0, null] }}
+          bar={{ color: `coral`, opacity: 0.7 }}
+        />
+      {/if}
+    </section>
+  {/each}
+{/snippet}
+
+{#snippet table_panel()}
+  <div class="table-filters">
+    {#if max_n_el > 2}
+      <label>
+        Min N<sub>el</sub>:
+        <select bind:value={min_n_elements}>
+          {#each Array.from({ length: max_n_el }, (_, idx) => idx + 1) as nel (nel)}
+            <option value={nel}>{nel}{nel === 1 ? ` (all)` : ``}</option>
+          {/each}
+        </select>
+      </label>
+    {/if}
+    {#if has_polymorphs}
+      <label>
+        Polymorphs:
+        <select bind:value={formula_filter}>
+          <option value="">all</option>
+          {#each poly_formulas as [formula, count] (formula)}
+            <option value={formula}>{formula} ({count})</option>
+          {/each}
+        </select>
+      </label>
+    {/if}
+    <span class="filter-count">{visible_entries.length} entries</span>
+    <span class="filter-spacer"></span>
+    <div class="export-actions">
+      <button
+        class="icon-btn"
+        class:active={show_export_dropdown}
+        title="Export"
+        onclick={() => show_export_dropdown = !show_export_dropdown}
+      >
+        <Icon icon="Export" style="width: 14px" />
+      </button>
+      {#if show_export_dropdown}
+        <div class="export-dropdown">
+          <button
+            class="dropdown-option"
+            onclick={() => {
+              export_table(`csv`)
+              show_export_dropdown = false
             }}
           >
-            <span>{@html label}:</span>
-            <span>{@html value}</span>
-            {#if key && copied_items.has(key)}
-              <Icon
-                icon="Check"
-                style="color: var(--success-color, #10b981); width: 12px; height: 12px"
-                class="copy-checkmark"
-              />
-            {/if}
-          </div>
-        {/each}
-
-        {#if section.title === `E<sub>form</sub> distribution` &&
-        e_form_data[0].y.length > 0}
-          <Histogram
-            series={e_form_data}
-            bins={50}
-            x_axis={{ label: ``, format: `.2f` }}
-            y_axis={{ label: ``, ticks: 3 }}
-            show_legend={false}
-            show_controls={false}
-            padding={{ t: 5, b: 22, l: 35, r: 5 }}
-            style="height: 100px; --histogram-min-height: 100px"
-            bar={{ color: `steelblue`, opacity: 0.7 }}
-          />
-        {/if}
+            <Icon icon="Download" style="width: 12px" /> CSV
+          </button>
+          <button
+            class="dropdown-option"
+            onclick={() => {
+              export_table(`json`)
+              show_export_dropdown = false
+            }}
+          >
+            <Icon icon="Download" style="width: 12px" /> JSON
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+  <HeatmapTable
+    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)`}
+    style="width: 100%"
+    root_style={layout === `side-by-side`
+    ? `flex: 1 1 0; min-height: 0; margin-inline: 0`
+    : undefined}
+    onrowclick={on_entry_click ? handle_row_click : undefined}
+    export_data={false}
+  />
+{/snippet}
 
-        {#if section.title === `E<sub>above hull</sub> distribution` &&
-        hull_distance_data[0].y.length > 0}
-          <Histogram
-            series={hull_distance_data}
-            bins={50}
-            x_axis={{ label: ``, format: `.2f`, range: [0, null] }}
-            y_axis={{ label: ``, ticks: 3 }}
-            show_legend={false}
-            show_controls={false}
-            padding={{ t: 5, b: 22, l: 35, r: 5 }}
-            style="height: 100px; --histogram-min-height: 100px"
-            bar={{ color: `coral`, opacity: 0.7 }}
-          />
-        {/if}
-      </section>
-    {/each}
-  {:else}
-    <HeatmapTable
-      data={table_data}
-      columns={table_columns}
-      initial_sort={{ column: `E<sub>hull</sub>`, direction: `asc` }}
-      scroll_style="max-height: var(--hull-stats-max-height, 500px)"
-      style="width: 100%"
-    />
-  {/if}
-</div>
+{#if layout === `side-by-side`}
+  <div {...rest} class="convex-hull-stats side-by-side {rest.class ?? ``}">
+    <div class="stats-pane">
+      {@render stats_panel()}
+    </div>
+    <div class="table-pane">
+      {@render table_panel()}
+    </div>
+  </div>
+{:else}
+  <div {...rest} class="convex-hull-stats {rest.class ?? ``}">
+    <div class="view-toggle">
+      <button class:active={view_mode === `stats`} onclick={() => view_mode = `stats`}>
+        Stats
+      </button>
+      <button class:active={view_mode === `table`} onclick={() => view_mode = `table`}>
+        Table
+      </button>
+    </div>
+    {#if view_mode === `stats`}
+      {@render stats_panel()}
+    {:else}
+      {@render table_panel()}
+    {/if}
+  </div>
+{/if}
 
 <style>
   .convex-hull-stats {
     background: var(--hull-stats-bg, var(--hull-bg));
     border-radius: var(--hull-border-radius, var(--border-radius, 3pt));
-    padding: 1em;
+    padding: var(--hull-stats-padding, 1em);
+  }
+  .convex-hull-stats.side-by-side {
+    display: flex;
+    gap: var(--hull-stats-gap, 1.5em);
+    align-items: stretch;
+    width: fit-content;
+    max-width: 100%;
+    margin-inline: auto;
+  }
+  .stats-pane {
+    flex: 0 0 auto;
+    width: fit-content;
+    min-width: var(--hull-stats-pane-min-width, 200px);
+    max-width: var(--hull-stats-pane-max-width, 320px);
+  }
+  .table-pane {
+    flex: 1 1 0;
+    max-width: 100%;
+    min-width: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+  }
+  .convex-hull-stats :global(tbody tr[onclick]) {
+    cursor: pointer;
   }
   section div {
     display: flex;
@@ -301,7 +642,7 @@ let table_columns = $derived.by(() => {
     }
   }
   .stat-item span:first-child {
-    color: var(--text-color-muted, #666);
+    color: var(--text-color-muted, light-dark(#666, #bbb));
   }
   section h5 {
     margin: 0 0 6px 0;
@@ -312,8 +653,9 @@ let table_columns = $derived.by(() => {
   }
   .view-toggle button {
     flex: 1;
-    padding: 4pt 8pt;
-    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    padding: 2pt 8pt;
+    border: 1px solid
+      var(--hull-stats-border-color, color-mix(in srgb, currentColor 20%, transparent));
     background: transparent;
     color: inherit;
     cursor: pointer;
@@ -327,7 +669,140 @@ let table_columns = $derived.by(() => {
     border-left: none;
   }
   .view-toggle button.active {
-    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
+    background: var(
+      --hull-stats-toggle-active-bg,
+      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15))
+    );
     font-weight: 500;
   }
+  .table-filters {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.75em;
+    margin-bottom: 6pt;
+    font-size: 0.85em;
+    label {
+      display: flex;
+      align-items: center;
+      gap: 0.4em;
+      sub {
+        margin-left: -0.2em;
+        font-size: 0.72em;
+        line-height: 0;
+        vertical-align: baseline;
+        position: relative;
+        top: 0.33em;
+      }
+    }
+    select {
+      padding: 2pt 4pt;
+      border: 1px solid
+        var(--hull-stats-border-color, color-mix(in srgb, currentColor 20%, transparent));
+      border-radius: 3pt;
+      background: transparent;
+      color: inherit;
+      font-size: inherit;
+    }
+  }
+  .filter-spacer {
+    flex: 1 1 auto;
+  }
+  .export-actions {
+    position: relative;
+    .icon-btn {
+      padding: 2pt 6pt;
+      border: 1px solid
+        var(--hull-stats-border-color, color-mix(in srgb, currentColor 20%, transparent));
+      border-radius: 3pt;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .icon-btn:hover {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+    .icon-btn.active {
+      background: color-mix(in srgb, currentColor 12%, transparent);
+    }
+  }
+  .export-dropdown {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 4px);
+    display: flex;
+    flex-direction: column;
+    min-width: 88px;
+    padding: 3pt;
+    border: 1px solid
+      var(--hull-stats-border-color, color-mix(in srgb, currentColor 20%, transparent));
+    border-radius: 4pt;
+    background: var(--page-bg, Canvas);
+    z-index: 4;
+    box-shadow: 0 2px 8px color-mix(in srgb, black 20%, transparent);
+    .dropdown-option {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      border: none;
+      border-radius: 3pt;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      padding: 3pt 6pt;
+    }
+    .dropdown-option:hover {
+      background: color-mix(in srgb, currentColor 8%, transparent);
+    }
+  }
+  .table-pane :global(.control-buttons) {
+    display: none;
+    margin: 0;
+  }
+  .filter-count {
+    color: var(--text-color-muted, light-dark(#666, #bbb));
+    font-size: 0.9em;
+  }
+  .subsystem-coverage-row {
+    flex-wrap: wrap;
+    gap: 4pt 1em;
+    justify-content: flex-start;
+    .subsystem-label {
+      color: var(--text-color-muted, light-dark(#666, #bbb));
+      font-size: 0.9em;
+    }
+    .subsystem-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4pt;
+    }
+  }
+  .subsystem-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    padding: 1pt 5pt;
+    border-radius: 3pt;
+    font-size: 0.78em;
+    line-height: 1.2;
+    background: color-mix(in srgb, currentColor 5%, transparent);
+    color: var(--text-color-muted, light-dark(#666, #bbb));
+    .pair {
+      font-weight: 500;
+    }
+    .count {
+      margin-left: 3pt;
+      font-size: 0.9em;
+      font-weight: 600;
+      color: color-mix(in srgb, currentColor 70%, transparent);
+    }
+  }
+  .subsystem-chip.has-entries {
+    background: color-mix(in srgb, var(--hull-stable-color, #22c55e) 15%, transparent);
+    color: inherit;
+  }
 </style>