matterviz 0.3.7 → 0.4.1

package/dist/convex-hull/ConvexHullStats.svelte

@@ -7,13 +7,20 @@
   import Icon from '../Icon.svelte'
   import { format_num } from '../labels'
   import { sanitize_html } from '../sanitize'
-  import Histogram from '../plot/Histogram.svelte'
+  import { escape_html } from '../utils'
+  import Histogram from '../plot/histogram/Histogram.svelte'
   import type { Label, RowData } from '../table'
   import HeatmapTable from '../table/HeatmapTable.svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
-  import type { ConvexHullEntry, PhaseArityField, PhaseStats } from './types'
-  import { get_arity, is_on_hull } from './helpers'
+  import type {
+    ConvexHullEntry,
+    EntryCategoryConfig,
+    PhaseArityField,
+    PhaseStats,
+  } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
+  import { get_arity, is_on_hull, visible_entries as filter_visible } from './helpers'
 
   let {
     phase_stats,
@@ -21,6 +28,8 @@
     unstable_entries,
     show_stable = true,
     show_unstable = true,
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
+    hidden_categories = [],
     layout = `toggle`,
     on_entry_click,
     highlighted_entry_id,
@@ -35,6 +44,9 @@
       unstable_entries: ConvexHullEntry[]
       show_stable?: boolean
       show_unstable?: boolean
+      // Categorical classification + hidden values (excluded from shown counts/table)
+      entry_category?: EntryCategoryConfig | null
+      hidden_categories?: string[]
       // 'toggle' shows stats/table with toggle buttons (default)
       // 'side-by-side' shows both stats and table next to each other without toggle
       layout?: `toggle` | `side-by-side`
@@ -52,7 +64,6 @@
   let view_mode = $state<`stats` | `table`>(`stats`)
   // 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`
@@ -86,10 +97,15 @@
 
   // Shared concatenation of stable + unstable for histograms
   let all_entries = $derived([...stable_entries, ...unstable_entries])
-  let shown_entries = $derived([
-    ...(show_stable ? stable_entries : []),
-    ...(show_unstable ? unstable_entries : []),
-  ])
+  // show_stable/show_unstable respect the caller's partition; pass show flags as true
+  // so filter_visible only applies the category filter on top
+  let shown_entries = $derived(filter_visible(
+    [...(show_stable ? stable_entries : []), ...(show_unstable ? unstable_entries : [])],
+    true,
+    true,
+    entry_category,
+    hidden_categories,
+  ))
 
   // Static arity labels for phase breakdown display
   const arity_types: [string, PhaseArityField, number][] = [
@@ -251,23 +267,15 @@
   const sort_span = (sort_val: number | string, display: string, 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: string): string =>
-    str
-      .replace(/&/g, `&amp;`)
-      .replace(/</g, `&lt;`)
-      .replace(/>/g, `&gt;`)
-      .replace(/"/g, `&quot;`)
-      .replace(/'/g, `&#39;`)
   const unescape_html = (str: string, max_rounds = 5): string => {
     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, `'`)
+        .replaceAll('&amp;', `&`)
+        .replaceAll('&lt;', `<`)
+        .replaceAll('&gt;', `>`)
+        .replaceAll('&quot;', `"`)
+        .replaceAll('&#39;', `'`)
       if (next_decoded === decoded) break
       decoded = next_decoded
     }
@@ -336,7 +344,7 @@
       // 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 as Record<string, unknown> | undefined
-      const is_highlighted = !!(highlighted_entry_id && (
+      const is_highlighted = Boolean(highlighted_entry_id && (
         entry.entry_id === highlighted_entry_id ||
         entry_data?.mat_id === highlighted_entry_id ||
         entry_data?.structure_id === highlighted_entry_id
@@ -430,67 +438,11 @@
     ] satisfies Label[],
   )
 
-  const html_to_text = (val: unknown): string => {
-    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: string): string =>
-    /[",\n]/.test(val) ? `"${val.replaceAll(`"`, `""`)}"` : val
-  const get_export_filename = (format: `csv` | `json`): string => {
-    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: string,
-    filename: string,
-    mime_type: string,
-  ): void => {
-    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: `csv` | `json`): void {
-    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`,
-    )
-  }
+  // Filename for HeatmapTable's built-in CSV/JSON export
+  const export_filename = $derived(
+    phase_stats?.chemical_system?.toLowerCase().replaceAll(/\s+/g, `-`) ??
+      `convex-hull-stats`,
+  )
 </script>
 
 {#snippet stats_panel()}
@@ -617,39 +569,6 @@
       </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
-            }}
-          >
-            <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}
@@ -659,7 +578,7 @@
     style="width: 100%"
     root_style={table_root_style}
     onrowclick={on_entry_click ? handle_row_click : undefined}
-    export_data={false}
+    export_data={{ filename: export_filename }}
   />
 {/snippet}
 
@@ -826,64 +745,6 @@
       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;

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

@@ -1,11 +1,13 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ConvexHullEntry, PhaseStats } from './types';
+import type { ConvexHullEntry, EntryCategoryConfig, PhaseStats } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     phase_stats: PhaseStats | null;
     stable_entries: ConvexHullEntry[];
     unstable_entries: ConvexHullEntry[];
     show_stable?: boolean;
     show_unstable?: boolean;
+    entry_category?: EntryCategoryConfig | null;
+    hidden_categories?: string[];
     layout?: `toggle` | `side-by-side`;
     on_entry_click?: (entry: ConvexHullEntry) => void;
     highlighted_entry_id?: string;

package/dist/convex-hull/ConvexHullTooltip.svelte

@@ -7,19 +7,22 @@
   import { TooltipContent } from '../tooltip'
   import type { PolymorphStats } from './helpers'
   import type { ConvexHullTooltipProp, TooltipSnippetProps } from './index'
-  import type { HighlightStyle, PhaseData } from './types'
-  import { is_unary_entry } from './helpers'
+  import type { EntryCategoryConfig, HighlightStyle, PhaseData } from './types'
+  import { MAGNETIC_ORDERING_CATEGORY } from './types'
+  import { get_entry_category, is_unary_entry } from './helpers'
 
   let {
     entry,
     polymorph_stats_map,
     highlight_style,
+    entry_category = MAGNETIC_ORDERING_CATEGORY,
     tooltip,
     show_fractional = true,
   }: {
     entry: EntryT
     polymorph_stats_map?: Map<string, PolymorphStats>
     highlight_style?: HighlightStyle
+    entry_category?: EntryCategoryConfig | null
     tooltip?: ConvexHullTooltipProp<EntryT>
     show_fractional?: boolean
   } = $props()
@@ -36,6 +39,7 @@
       ? polymorph_stats_map.get(entry.entry_id)
       : null,
   )
+  const category_value = $derived(get_entry_category(entry, entry_category))
 </script>
 
 <TooltipContent
@@ -69,6 +73,11 @@
     {#if entry.e_form_per_atom != null}
       <div>E<sub>form</sub>: {format_num(entry.e_form_per_atom, `.3~`)} eV/atom</div>
     {/if}
+    {#if entry_category && category_value}
+      <div title={entry_category.labels?.[category_value]}>
+        {entry_category.label}: {category_value}
+      </div>
+    {/if}
 
     {#if show_fractional && !is_element}
       {@const total = Object.values(entry.composition).reduce(

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

@@ -1,11 +1,12 @@
 import type { PolymorphStats } from './helpers';
 import type { ConvexHullTooltipProp } from './index';
-import type { HighlightStyle, PhaseData } from './types';
+import type { EntryCategoryConfig, HighlightStyle, PhaseData } from './types';
 declare function $$render<EntryT extends PhaseData = PhaseData>(): {
     props: {
         entry: EntryT;
         polymorph_stats_map?: Map<string, PolymorphStats>;
         highlight_style?: HighlightStyle;
+        entry_category?: EntryCategoryConfig | null;
         tooltip?: ConvexHullTooltipProp<EntryT>;
         show_fractional?: boolean;
     };

package/dist/convex-hull/GasPressureControls.svelte

@@ -64,7 +64,7 @@
 
   // Convert slider position (0-100) to pressure
   const slider_to_pressure = (value: number): number =>
-    Math.pow(10, LOG_P_MIN + (value / 100) * LOG_P_RANGE)
+    10 ** (LOG_P_MIN + (value / 100) * LOG_P_RANGE)
 
   // Format gas name for display (subscript numbers)
   const format_gas_name = (gas: GasSpecies): string =>
@@ -94,7 +94,7 @@
     gas: GasSpecies,
     event: Event & { currentTarget: HTMLInputElement },
   ): void {
-    const P = slider_to_pressure(+event.currentTarget.value)
+    const P = slider_to_pressure(Number(event.currentTarget.value))
     pressures = { ...pressures, [gas]: P }
     // Clear only this gas's preview (don't reset other sliders being dragged simultaneously)
     const { [gas]: _removed_preview, ...remaining_previews } = preview_pressures
@@ -103,8 +103,8 @@
 
   function set_pressure_direct(gas: GasSpecies, value: number): void {
     const clamped = Math.max(
-      Math.pow(10, LOG_P_MIN),
-      Math.min(Math.pow(10, LOG_P_MAX), value),
+      10 ** LOG_P_MIN,
+      Math.min(10 ** LOG_P_MAX, value),
     )
     pressures = { ...pressures, [gas]: clamped }
   }

package/dist/convex-hull/TemperatureSlider.svelte

@@ -25,7 +25,7 @@
   function handle_slider_input(
     event: Event & { currentTarget: HTMLInputElement },
   ): void {
-    const new_index = +event.currentTarget.value
+    const new_index = Number(event.currentTarget.value)
     preview_index = new_index
     // Throttle parent updates during drag to prevent scene flashing
     const now = Date.now()
@@ -38,7 +38,7 @@
   function handle_slider_end(
     event: Event & { currentTarget: HTMLInputElement },
   ): void {
-    const new_temp = available_temperatures[+event.currentTarget.value]
+    const new_temp = available_temperatures[Number(event.currentTarget.value)]
     if (new_temp !== undefined) temperature = new_temp
     preview_index = null
   }

package/dist/convex-hull/barycentric-coords.d.ts

@@ -1,13 +1,11 @@
 import type { ElementSymbol } from '../element';
-import type { Point3D, Vec3 } from '../math';
+import type { Point3D, Vec2, Vec3 } from '../math';
 import type { ConvexHullEntry, PhaseData } from './types';
 export declare const TRIANGLE_VERTICES: readonly [readonly [1, 0], readonly [0.5, number], readonly [0, 0]];
 export declare function composition_to_barycentric_3d(composition: Record<string, number>, elements: ElementSymbol[]): Vec3;
-export declare function barycentric_to_ternary_xy(barycentric: Vec3): [number, number];
+export declare function barycentric_to_ternary_xy(barycentric: Vec3): Vec2;
 export declare function barycentric_to_ternary_xyz(barycentric: Vec3, formation_energy: number): Point3D;
 export declare function get_triangle_centroid(): Point3D;
-export declare function calculate_face_normal(p1: Point3D, p2: Point3D, p3: Point3D): Point3D;
-export declare const calculate_face_centroid: (p1: Point3D, p2: Point3D, p3: Point3D) => Point3D;
 export declare function get_ternary_3d_coordinates(entries: PhaseData[], elements: ElementSymbol[], el_refs?: Record<string, PhaseData>): ConvexHullEntry[];
 export declare function get_triangle_edges(): [Point3D, Point3D][];
 export declare function get_triangle_vertical_edges(min_z: number, max_z: number): [Point3D, Point3D][];

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

@@ -10,13 +10,7 @@ export function composition_to_barycentric_3d(composition, elements) {
     if (elements.length !== 3) {
         throw new Error(`Ternary system requires exactly 3 elements, got ${elements.length}`);
     }
-    const amounts = elements.map((el) => composition[el] || 0);
-    const total = amounts.reduce((sum, amt) => sum + amt, 0);
-    if (total === 0) {
-        throw new Error(`Composition has no elements from the ternary system: ${elements.join(`-`)}`);
-    }
-    const normalized = amounts.map((amount) => amount / total);
-    return [normalized[0], normalized[1], normalized[2]];
+    return composition_to_barycentric_nd(composition, elements);
 }
 // map barycentric coordinates to triangular 2D coordinates
 export function barycentric_to_ternary_xy(barycentric) {
@@ -37,22 +31,6 @@ export function get_triangle_centroid() {
     const centroid_y = (v0[1] + v1[1] + v2[1]) / 3;
     return { x: centroid_x, y: centroid_y, z: 0 };
 }
-export function calculate_face_normal(p1, p2, p3) {
-    const edge1 = { x: p2.x - p1.x, y: p2.y - p1.y, z: p2.z - p1.z };
-    const edge2 = { x: p3.x - p1.x, y: p3.y - p1.y, z: p3.z - p1.z };
-    const nx = edge1.y * edge2.z - edge1.z * edge2.y;
-    const ny = edge1.z * edge2.x - edge1.x * edge2.z;
-    const nz = edge1.x * edge2.y - edge1.y * edge2.x;
-    const magnitude = Math.hypot(nx, ny, nz);
-    if (magnitude === 0)
-        return { x: 0, y: 0, z: 1 };
-    return { x: nx / magnitude, y: ny / magnitude, z: nz / magnitude };
-}
-export const calculate_face_centroid = (p1, p2, p3) => ({
-    x: (p1.x + p2.x + p3.x) / 3,
-    y: (p1.y + p2.y + p3.y) / 3,
-    z: (p1.z + p2.z + p3.z) / 3,
-});
 export function get_ternary_3d_coordinates(entries, elements, el_refs) {
     if (elements.length !== 3) {
         throw new Error(`Ternary convex hull requires exactly 3 elements, got ${elements.length}`);
@@ -105,14 +83,14 @@ export function get_triangle_vertical_edges(min_z, max_z) {
         { ...vertex, z: max_z },
     ]);
 }
-// --- N-dimensional barycentric coordinates (for 5+ element systems) ---
+// --- N-dimensional barycentric coordinates (the 3D/4D converters wrap this) ---
 // Convert composition to N-dimensional barycentric coordinates
 // Returns array of length N where coords sum to 1 (all N coords are explicit)
 // The last coordinate represents formation energy when used in hull calculations
 export function composition_to_barycentric_nd(composition, elements) {
-    const n = elements.length;
-    if (n < 2) {
-        throw new Error(`Barycentric coordinates require at least 2 elements, got ${n}`);
+    const n_elems = elements.length;
+    if (n_elems < 2) {
+        throw new Error(`Barycentric coordinates require at least 2 elements, got ${n_elems}`);
     }
     // NaN and undefined/missing elements are treated as 0
     const amounts = elements.map((el) => {
@@ -146,12 +124,7 @@ export function composition_to_barycentric_4d(composition, elements) {
     if (elements.length !== 4) {
         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);
-    if (total === 0) {
-        throw new Error(`Composition has no elements from the quaternary system: ${elements.join(`-`)}`);
-    }
-    return amounts.map((amount) => amount / total);
+    return composition_to_barycentric_nd(composition, elements);
 }
 // map barycentric coordinates to tetrahedral 3D coordinates
 export function barycentric_to_tetrahedral(barycentric) {

package/dist/convex-hull/canvas-interactions.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { AnyStructure } from '../structure';
+import type { ConvexHullEntry, EntryCategoryConfig, HoverData3D, PhaseData } from './types';
+export interface CanvasInteractionInputs {
+    wheel_clamp: [min: number, max: number];
+    fullscreen_bg_var: string;
+    canvas: () => HTMLCanvasElement | undefined;
+    wrapper: () => HTMLDivElement | undefined;
+    ctx: () => CanvasRenderingContext2D | null;
+    set_ctx: (ctx: CanvasRenderingContext2D | null) => void;
+    set_canvas_dims: (dims: {
+        width: number;
+        height: number;
+        scale: number;
+    }) => void;
+    visible_entries: () => ConvexHullEntry[];
+    plot_entries: () => ConvexHullEntry[];
+    selected_entry: () => ConvexHullEntry | null;
+    set_selected_entry: (entry: ConvexHullEntry | null) => void;
+    fullscreen: () => boolean;
+    enable_click_selection: () => boolean;
+    enable_structure_preview: () => boolean;
+    on_point_click: () => ((entry: ConvexHullEntry) => void) | undefined;
+    on_point_hover: () => ((data: HoverData3D | null) => void) | undefined;
+    on_file_drop: () => ((entries: PhaseData[]) => void) | undefined;
+    entry_category: () => EntryCategoryConfig | null;
+    zoom: () => number;
+    set_zoom: (zoom: number) => void;
+    project_point: (x: number, y: number, z: number) => {
+        x: number;
+        y: number;
+        depth: number;
+    };
+    extract_structure: (entry: ConvexHullEntry) => AnyStructure | null;
+    render_frame: () => void;
+    on_drag: (dx: number, dy: number, panning: boolean) => void;
+    on_fullscreen_change: () => void;
+    actions: () => Record<string, () => void>;
+}
+export declare function create_canvas_interactions(inputs: CanvasInteractionInputs): {
+    readonly is_dragging: boolean;
+    readonly hover_data: HoverData3D<ConvexHullEntry> | null;
+    readonly drag_over: boolean;
+    readonly modal_open: boolean;
+    readonly selected_structure: AnyStructure | null;
+    readonly modal_place_right: boolean;
+    readonly sorted_points_cache: {
+        entry: ConvexHullEntry;
+        projected: {
+            x: number;
+            y: number;
+            depth: number;
+        };
+    }[];
+    copy_feedback: {
+        visible: boolean;
+        position: {
+            x: number;
+            y: number;
+        };
+    };
+    canvas_handlers: {
+        onmousedown: (event: MouseEvent) => void;
+        onmousemove: (event: MouseEvent) => void;
+        onclick: (event: MouseEvent) => void;
+        onkeydown: (event: KeyboardEvent) => void;
+        ondblclick: (event: MouseEvent) => void;
+        onwheel: (event: WheelEvent) => void;
+    };
+    wrapper_handlers: {
+        onkeydown: (event: KeyboardEvent) => void;
+        ondrop: (event: DragEvent) => Promise<void>;
+        ondragover: (event: DragEvent) => void;
+        ondragleave: (event: DragEvent) => void;
+    };
+    handle_mouse_move: (event: MouseEvent) => void;
+    handle_mouse_up: () => void;
+    close_structure_popup: () => void;
+    render_once: () => void;
+};