matterviz 0.4.0 → 0.4.2

package/dist/table/HeatmapTable.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CellSnippet, ExportData, InitialSort, Label, Pagination, RowData, Search, SortHint, SpecialCells } from './';
+import type { CellSnippet, ExportData, InitialSort, Label, Pagination, VirtualScroll, RowData, Search, SortHint, SpecialCells } from './';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
@@ -17,14 +17,24 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     default_num_format?: string;
     show_heatmap?: boolean;
     heatmap_class?: string;
+    onrowpointerdown?: (event: PointerEvent, row: RowData) => void;
     onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void;
     onrowdblclick?: (event: MouseEvent, row: RowData) => void;
+    row_title?: (row: RowData) => string | null | undefined;
     column_order?: string[];
     export_data?: ExportData;
     show_column_toggle?: boolean;
     search?: Search;
+    search_query?: string;
     show_row_select?: boolean;
     pagination?: Pagination;
+    virtual?: VirtualScroll;
+    on_visible_range?: (range: {
+        start: number;
+        end: number;
+        total: number;
+    }) => void;
+    controls_target?: HTMLElement | null;
     selected_rows?: RowData[];
     hidden_columns?: string[];
     scroll_style?: string;
@@ -44,6 +54,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     }]>;
     footer?: Snippet;
 };
-declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "loading" | "heatmap_opacity">;
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "show_controls" | "data" | "controls_open" | "loading" | "show_heatmap" | "column_order" | "search_query" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -115,9 +115,7 @@
 
   // Grid template for section items
   let grid_template = $derived(
-    n_columns
-      ? `repeat(${n_columns}, max-content)`
-      : `repeat(auto-fill, minmax(135px, 1fr))`,
+    n_columns ? `repeat(${n_columns}, max-content)` : `repeat(auto-fill, minmax(135px, 1fr))`,
   )
 
   // Reposition dropdown: left-aligned by default, switch to right if it overflows viewport
@@ -128,9 +126,7 @@
     void n_columns
     void collapsed_sections
     void sections
-    const dropdown = details_el.querySelector<HTMLElement>(
-      `.column-menu, .sections-container`,
-    )
+    const dropdown = details_el.querySelector<HTMLElement>(`.column-menu, .sections-container`)
     if (!dropdown) return
     // Reset to left-aligned
     dropdown.style.left = `0`
@@ -198,8 +194,8 @@
   {#if has_sections}
     <div class="sections-container" role="group">
       {#each sections as section (section.name)}
-        {@const is_collapsed = section.name !== `` &&
-        collapsed_sections.includes(section.name)}
+        {@const is_collapsed =
+          section.name !== `` && collapsed_sections.includes(section.name)}
         <div class="section">
           {#if section.name}
             <div class="section-header-row">
@@ -325,10 +321,7 @@
     margin-bottom: 4pt;
     padding: 2pt 4pt;
     border-radius: var(--tgl-border-radius, 3pt);
-    background: var(
-      --tgl-section-header-bg,
-      color-mix(in srgb, currentColor 5%, transparent)
-    );
+    background: var(--tgl-section-header-bg, color-mix(in srgb, currentColor 5%, transparent));
     &:hover {
       background: var(
         --tgl-section-header-hover-bg,

package/dist/table/index.d.ts

@@ -1,19 +1,22 @@
-import * as d3sc from 'd3-scale-chromatic';
+import type * as d3sc from 'd3-scale-chromatic';
 import type { Snippet } from 'svelte';
 export { default as HeatmapTable } from './HeatmapTable.svelte';
 export { default as ToggleMenu } from './ToggleMenu.svelte';
-export type CellVal = string | number | boolean | undefined | null | Record<string, unknown> | Record<string, string | number | null | undefined | boolean>[];
+export type CellVal = string | number | boolean | Date | undefined | null | Record<string, unknown> | Record<string, string | number | null | undefined | boolean>[];
 export type RowData = {
     style?: string;
     class?: string;
     [key: string]: CellVal;
 };
+export type DateTimeFormatMode = `date` | `time` | `datetime` | `iso` | `relative`;
 export type Label = {
     label: string;
     key?: string;
     group?: string;
     description?: string;
     format?: string;
+    format_type?: `datetime`;
+    datetime_format?: DateTimeFormatMode;
     better?: `higher` | `lower`;
     color_scale?: keyof typeof d3sc | null;
     scale_type?: `linear` | `log`;
@@ -51,10 +54,17 @@ export type InitialSort = string | {
 export type Pagination = boolean | {
     page_size?: number;
     page_sizes?: number[];
+    on_page_size_change?: (page_size: number) => void;
+};
+export type VirtualScroll = boolean | {
+    overscan?: number;
+    min_window?: number;
 };
 export type Search = boolean | {
     placeholder?: string;
     expanded?: boolean;
+    keys?: string[];
+    fuzzy?: boolean;
 };
 export type ExportData = boolean | {
     formats?: (`csv` | `json`)[];
@@ -62,11 +72,16 @@ export type ExportData = boolean | {
 };
 export type OnSortCallback = (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
 export declare const strip_html: (str: string) => string;
+export type CellColor = {
+    bg: string | null;
+    text: string | null;
+};
+export declare function make_cell_color_scale(all_values: CellVal[], // all values in the column
+better: `higher` | `lower` | undefined, // sort direction
+color_scale?: keyof typeof d3sc | null, // color scale name
+scale_type?: `linear` | `log`): (val: number | null | undefined) => CellColor;
 export declare function calc_cell_color(val: number | null | undefined, // cell value
 all_values: CellVal[], // all values in the column
 better: `higher` | `lower` | undefined, // sort direction
 color_scale?: keyof typeof d3sc | null, // color scale name
-scale_type?: `linear` | `log`): {
-    bg: string | null;
-    text: string | null;
-};
+scale_type?: `linear` | `log`): CellColor;

package/dist/table/index.js

@@ -1,38 +1,51 @@
-import { pick_contrast_color } from '../colors';
+import { get_d3_interpolator, pick_contrast_color } from '../colors';
 import { max, min } from 'd3-array';
 import { scaleLog, scaleSequential } from 'd3-scale';
-import * as d3sc from 'd3-scale-chromatic';
 export { default as HeatmapTable } from './HeatmapTable.svelte';
 export { default as ToggleMenu } from './ToggleMenu.svelte';
 // Strip HTML tags from a string (for search, export, etc.)
 export const strip_html = (str) => str.replaceAll(/<[^>]*>/g, ``);
-// Calculate table cell background color based on its value and column config
-export function calc_cell_color(val, // cell value
-all_values, // all values in the column
+const NULL_CELL_COLOR = { bg: null, text: null };
+// Build a memoized value→color mapper for one column. The O(column-length)
+// work (numeric filter + min/max) and d3 scale construction happen ONCE here;
+// the returned function is O(1) per cell. HeatmapTable derives one mapper per
+// colored column instead of rescanning the full column for every cell render.
+export function make_cell_color_scale(all_values, // all values in the column
 better, // sort direction
 color_scale = `interpolateViridis`, // color scale name
 scale_type = `linear`) {
-    // Skip color calculation for null/undefined/NaN values or if color_scale is null
-    if (val == null || Number.isNaN(val) || color_scale === null) {
-        return { bg: null, text: null };
-    }
-    // Log scale cannot handle non-positive values, return null colors
-    if (scale_type === `log` && val <= 0) {
-        return { bg: null, text: null };
-    }
+    if (color_scale === null)
+        return () => NULL_CELL_COLOR;
     const numeric_vals = all_values.filter((v) => typeof v === `number` && !Number.isNaN(v) && (scale_type === `log` ? v > 0 : true));
     if (numeric_vals.length === 0)
-        return { bg: null, text: null };
+        return () => NULL_CELL_COLOR;
     const range = [min(numeric_vals) ?? 0, max(numeric_vals) ?? 1];
     // Reverse the range if lower values are better
     if (better === `lower`)
         range.reverse();
-    // Get interpolator function, fallback to viridis if not a valid function
-    const scale_fn = d3sc[color_scale];
-    const interpolator = (typeof scale_fn === `function` ? scale_fn : d3sc.interpolateViridis);
+    const interpolator = get_d3_interpolator(color_scale);
     // Use log scale for positive values, otherwise linear/sequential scale
-    const bg = scale_type === `log` && range[0] > 0 && range[1] > 0
-        ? interpolator(scaleLog().domain(range).range([0, 1]).clamp(true)(val))
-        : scaleSequential().domain(range).interpolator(interpolator)(val);
-    return { bg, text: pick_contrast_color({ bg_color: bg }) };
+    const use_log = scale_type === `log` && range[0] > 0 && range[1] > 0;
+    const log_scale = use_log ? scaleLog().domain(range).range([0, 1]).clamp(true) : null;
+    const seq_scale = scaleSequential().domain(range).interpolator(interpolator);
+    return (val) => {
+        // Skip color calculation for null/undefined/NaN values
+        if (val == null || Number.isNaN(val))
+            return NULL_CELL_COLOR;
+        // Log scale cannot handle non-positive values, return null colors
+        if (scale_type === `log` && val <= 0)
+            return NULL_CELL_COLOR;
+        const bg = log_scale ? interpolator(log_scale(val)) : seq_scale(val);
+        return { bg, text: pick_contrast_color({ bg_color: bg }) };
+    };
+}
+// Calculate table cell background color based on its value and column config.
+// One-shot convenience wrapper around make_cell_color_scale — prefer the
+// factory when coloring many cells of the same column.
+export function calc_cell_color(val, // cell value
+all_values, // all values in the column
+better, // sort direction
+color_scale = `interpolateViridis`, // color scale name
+scale_type = `linear`) {
+    return make_cell_color_scale(all_values, better, color_scale, scale_type)(val);
 }

package/dist/theme/ThemeControl.svelte

@@ -4,14 +4,17 @@
   import type { ThemeMode } from './index'
   import { apply_theme_to_dom, save_theme_preference, THEME_OPTIONS } from './index'
 
-  let { theme_mode = $bindable(theme_state.mode), onchange = () => {}, ...rest }:
-    & Omit<HTMLAttributes<HTMLSelectElement>, `onchange`>
-    & {
-      theme_mode?: ThemeMode // Current theme mode (now bindable to global state)
-      onchange?: (mode: ThemeMode) => void // Callback when theme changes
-    } = $props()
+  let {
+    theme_mode = $bindable(theme_state.mode),
+    onchange = () => {},
+    ...rest
+  }: Omit<HTMLAttributes<HTMLSelectElement>, `onchange`> & {
+    theme_mode?: ThemeMode // Current theme mode (now bindable to global state)
+    onchange?: (mode: ThemeMode) => void // Callback when theme changes
+  } = $props()
 
-  $effect(() => { // Sync and save to local storage when theme changes
+  $effect(() => {
+    // Sync and save to local storage when theme changes
     const prev = theme_state.mode
     if (prev === theme_mode) return
     theme_state.mode = theme_mode
@@ -21,7 +24,12 @@
   })
 </script>
 
-<select bind:value={theme_mode} {...rest} class="theme-control {rest.class ?? ``}">
+<select
+  aria-label="Color theme"
+  bind:value={theme_mode}
+  {...rest}
+  class={[`theme-control`, rest.class]}
+>
   {#each THEME_OPTIONS as { label, icon, value } (value)}
     <option {value}>{icon}&ensp;{label}</option>
   {/each}

package/dist/theme/index.d.ts

@@ -1,3 +1,4 @@
+export declare const THEME_STORAGE_KEY = "matterviz-theme";
 export declare const COLOR_THEMES: {
     readonly light: "light";
     readonly dark: "dark";
@@ -22,8 +23,3 @@ export declare const get_theme_preference: () => ThemeMode;
 export declare const save_theme_preference: (mode: ThemeMode) => void;
 export declare const get_system_mode: () => ThemeType;
 export declare const apply_theme_to_dom: (mode: ThemeMode) => void;
-export declare const light_theme: () => any;
-export declare const dark_theme: () => any;
-export declare const white_theme: () => any;
-export declare const black_theme: () => any;
-export declare const get_theme_by_name: (name: ThemeName) => any;

package/dist/theme/index.js

@@ -1,6 +1,6 @@
 // Theme System for MatterViz
 const is_browser = typeof window !== `undefined`;
-const storage_key = `matterviz-theme`;
+export const THEME_STORAGE_KEY = `matterviz-theme`;
 // Core theme constants
 export const COLOR_THEMES = {
     light: `light`,
@@ -32,7 +32,7 @@ export const get_theme_preference = () => {
     if (!is_browser)
         return AUTO_THEME;
     try {
-        const saved = localStorage[storage_key];
+        const saved = localStorage[THEME_STORAGE_KEY];
         return is_valid_theme_mode(saved ?? ``) ? saved : AUTO_THEME;
     }
     catch {
@@ -41,13 +41,13 @@ export const get_theme_preference = () => {
 };
 export const save_theme_preference = (mode) => {
     try {
-        localStorage[storage_key] = mode;
+        localStorage[THEME_STORAGE_KEY] = mode;
     }
     catch {
         // Silently fail if localStorage is unavailable
     }
 };
-export const get_system_mode = () => is_browser && matchMedia(`(prefers-color-scheme: dark)`).matches
+export const get_system_mode = () => is_browser && globalThis.matchMedia?.(`(prefers-color-scheme: dark)`)?.matches
     ? COLOR_THEMES.dark
     : COLOR_THEMES.light;
 export const apply_theme_to_dom = (mode) => {
@@ -71,9 +71,3 @@ export const apply_theme_to_dom = (mode) => {
     const color_scheme = THEME_TYPE[resolved];
     root.style.setProperty(`color-scheme`, color_scheme);
 };
-// Theme getters
-export const light_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.light] ?? {};
-export const dark_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.dark] ?? {};
-export const white_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.white] ?? {};
-export const black_theme = () => globalThis.MATTERVIZ_THEMES?.[COLOR_THEMES.black] ?? {};
-export const get_theme_by_name = (name) => globalThis.MATTERVIZ_THEMES?.[name] ?? {};

package/dist/theme/themes.mjs

@@ -41,6 +41,17 @@ const tooltip_bg = (light_bg, dark_bg, light_op = 0.95, dark_op = 0.95) => ({
   black: `rgba(20, 20, 20, 0.98)`,
 })
 
+// Slight contrast shading drawn behind plot SVGs and structure canvases so they read
+// as panels sitting on top of the page background. Shared so a plot and a structure
+// shown side by side (e.g. trajectory view) get an identical tint. Kept subtle; light
+// modes darken, dark modes lighten.
+const canvas_bg = {
+  light: `rgba(0, 0, 0, 0.03)`,
+  dark: `rgba(255, 255, 255, 0.07)`,
+  white: `rgba(0, 0, 0, 0.025)`,
+  black: `rgba(255, 255, 255, 0.1)`,
+}
+
 const themes = {
   // Core colors
   'page-bg': {
@@ -167,13 +178,9 @@ const themes = {
     black: `1px solid rgba(255, 255, 255, 0.075)`,
   },
 
-  // Structure-specific
-  'struct-bg': {
-    light: `rgba(0, 0, 0, 0.02)`,
-    dark: `rgba(255, 255, 255, 0.07)`,
-    white: `rgba(0, 0, 0, 0.01)`,
-    black: `rgba(255, 255, 255, 0.1)`,
-  },
+  // Plot & structure canvas backgrounds (shared subtle panel shading)
+  'plot-bg': canvas_bg,
+  'struct-bg': canvas_bg,
   'struct-bg-fullscreen': {
     light: page_bg_light,
     dark: page_bg_dark,

package/dist/tooltip/KCoords.svelte

@@ -3,7 +3,10 @@
   import { format_vec3 } from '../labels'
   import type { Vec3 } from '../math'
 
-  let { cartesian, fractional = null }: {
+  let {
+    cartesian,
+    fractional = null,
+  }: {
     cartesian: Vec3
     fractional?: Vec3 | null
   } = $props()

package/dist/tooltip/TooltipContent.svelte

@@ -20,9 +20,7 @@
   } = $props()
 
   const is_snippet = $derived(typeof tooltip === `function`)
-  const config = $derived(
-    !is_snippet && tooltip ? (tooltip as TooltipConfig<T>) : null,
-  )
+  const config = $derived(!is_snippet && tooltip ? (tooltip as TooltipConfig<T>) : null)
   const prefix = $derived(
     typeof config?.prefix === `function` ? config.prefix(data) : config?.prefix,
   )
@@ -47,8 +45,7 @@
   .tooltip-prefix {
     margin-bottom: 6px;
     padding-bottom: 6px;
-    border-bottom: 1px solid
-      var(--tooltip-border, var(--border, rgba(128, 128, 128, 0.3)));
+    border-bottom: 1px solid var(--tooltip-border, var(--border, rgba(128, 128, 128, 0.3)));
   }
   .tooltip-suffix {
     margin-top: 6px;