matterviz 0.4.1 → 0.4.3

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" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "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

@@ -1,7 +1,8 @@
 <script lang="ts">
   import Icon from '../Icon.svelte'
+  import { portal } from '../overlays/portal'
   import { sanitize_html } from '../sanitize'
-  import type { Label } from './'
+  import { type Label, strip_html } from './'
   import { click_outside, tooltip } from 'svelte-multiselect/attachments'
   import { slide } from 'svelte/transition'
 
@@ -14,7 +15,7 @@
   }: {
     columns: Label[]
     column_panel_open?: boolean
-    // Number of grid columns for toggle layout
+    // Maximum number of grid columns for toggle layout
     n_columns?: number
     collapsed_sections?: string[]
     // Called after reset with the section name (or undefined for global reset)
@@ -22,6 +23,24 @@
   } = $props()
 
   const col_id = (col: Label) => col.key ?? col.label
+  const toggle_menu_id = $props.id()
+  const dropdown_selector = `[data-toggle-menu-id="${toggle_menu_id}"]`
+  const COLUMN_FILTER_THRESHOLD = 20
+  const DEFAULT_MAX_MENU_COLUMNS = 3
+  const PREFERRED_MAX_MENU_ROWS = 10
+  let column_filter = $state(``)
+  let show_column_filter = $derived(columns.length > COLUMN_FILTER_THRESHOLD)
+  let normalized_column_filter = $derived(
+    show_column_filter ? column_filter.trim().toLowerCase() : ``,
+  )
+  const column_matches_filter = (col: Label): boolean =>
+    !normalized_column_filter ||
+    [col.key, strip_html(col.label), col.description, col.group]
+      .filter(Boolean)
+      .join(` `)
+      .toLowerCase()
+      .includes(normalized_column_filter)
+  let filtered_columns = $derived(columns.filter(column_matches_filter))
 
   // Snapshot default visibility when column set changes (new dataset).
   // Compare by keys and visibility defaults. Internal updates opt out below.
@@ -96,6 +115,14 @@
     if (ungrouped.length > 0) result.push({ name: ``, items: ungrouped })
     return result
   })
+  let filtered_sections = $derived(
+    sections
+      .map((section) => ({
+        ...section,
+        items: section.items.filter(column_matches_filter),
+      }))
+      .filter((section) => section.items.length > 0),
+  )
 
   // Check if any column defines a group (to decide whether to show sections)
   let has_sections = $derived(columns.some((col) => col.group))
@@ -113,35 +140,56 @@
     columns = [...columns] // trigger reactivity on parent binding
   }
 
-  // Grid template for section items
-  let grid_template = $derived(
-    n_columns
-      ? `repeat(${n_columns}, max-content)`
-      : `repeat(auto-fill, minmax(135px, 1fr))`,
-  )
+  // Prefer two tall columns, adding more only when the item count would make them unwieldy.
+  // n_columns caps large menus rather than forcing sparse menus to fill every column.
+  const grid_column_count = (item_count: number): number => {
+    const preferred_column_count =
+      item_count <= 1 ? 1 : Math.max(2, Math.ceil(item_count / PREFERRED_MAX_MENU_ROWS))
+    return Math.min(Math.max(1, n_columns ?? DEFAULT_MAX_MENU_COLUMNS), preferred_column_count)
+  }
+  const grid_template = (item_count: number): string =>
+    `repeat(${grid_column_count(item_count)}, max-content)`
 
-  // Reposition dropdown: left-aligned by default, switch to right if it overflows viewport
-  let details_el: HTMLElement | undefined = undefined
+  // Portal the dropdown to <body> so ancestor overflow/stacking contexts cannot clip it.
+  const dropdown_target = typeof document === `undefined` ? undefined : document.body
+  let details_el = $state<HTMLElement>()
+  let dropdown_el = $state<HTMLElement>()
+  const position_dropdown = (): void => {
+    const trigger = details_el?.querySelector(`summary`)
+    if (!column_panel_open || !trigger || !dropdown_el) return
+    const trigger_rect = trigger.getBoundingClientRect()
+    const dropdown_rect = dropdown_el.getBoundingClientRect()
+    const viewport_padding = 8
+    const gap = 4
+    const max_left = Math.max(
+      viewport_padding,
+      globalThis.innerWidth - dropdown_rect.width - viewport_padding,
+    )
+    const left = Math.min(
+      Math.max(viewport_padding, trigger_rect.right - dropdown_rect.width),
+      max_left,
+    )
+    const below = trigger_rect.bottom + gap
+    const top =
+      below + dropdown_rect.height <= globalThis.innerHeight - viewport_padding
+        ? below
+        : Math.max(viewport_padding, trigger_rect.top - dropdown_rect.height - gap)
+    Object.assign(dropdown_el.style, {
+      left: `${left}px`,
+      right: `auto`,
+      top: `${top}px`,
+      visibility: `visible`,
+    })
+  }
   $effect(() => {
-    if (!column_panel_open || !details_el) return
+    if (!column_panel_open || !details_el || !dropdown_el) return
     // Re-run when section state changes while open
     void n_columns
     void collapsed_sections
-    void sections
-    const dropdown = details_el.querySelector<HTMLElement>(
-      `.column-menu, .sections-container`,
-    )
-    if (!dropdown) return
-    // Reset to left-aligned
-    dropdown.style.left = `0`
-    dropdown.style.right = `auto`
-    requestAnimationFrame(() => {
-      const rect = dropdown.getBoundingClientRect()
-      if (rect.right > window.innerWidth) {
-        dropdown.style.left = `auto`
-        dropdown.style.right = `0`
-      }
-    })
+    void filtered_columns
+    void filtered_sections
+    const frame = requestAnimationFrame(position_dropdown)
+    return () => cancelAnimationFrame(frame)
   })
 </script>
 
@@ -173,10 +221,19 @@
 <details
   class="column-toggles"
   bind:this={details_el}
-  bind:open={column_panel_open}
-  {@attach click_outside({ callback: () => (column_panel_open = false) })}
+  open={column_panel_open}
+  {@attach click_outside({
+    callback: () => (column_panel_open = false),
+    exclude: [dropdown_selector],
+  })}
 >
-  <summary aria-expanded={column_panel_open}>
+  <summary
+    aria-expanded={column_panel_open}
+    onclick={(event) => {
+      event.preventDefault()
+      column_panel_open = !column_panel_open
+    }}
+  >
     Columns <Icon icon="Columns" />
     {#if has_any_changes}
       <button
@@ -195,11 +252,32 @@
     {/if}
   </summary>
 
-  {#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)}
+  <div
+    bind:this={dropdown_el}
+    class={has_sections ? `sections-container` : `column-menu`}
+    data-toggle-menu-id={toggle_menu_id}
+    hidden={!column_panel_open}
+    role="group"
+    style:grid-template-columns={has_sections
+      ? undefined
+      : grid_template(filtered_columns.length)}
+    {@attach portal(dropdown_target)}
+  >
+    {#if show_column_filter}
+      <input
+        aria-label="Filter columns"
+        bind:value={column_filter}
+        class="column-filter"
+        placeholder="Filter columns…"
+        type="search"
+      />
+    {/if}
+    {#if has_sections}
+      {#each filtered_sections as section (section.name)}
+        {@const is_collapsed =
+          !normalized_column_filter &&
+          section.name !== `` &&
+          collapsed_sections.includes(section.name)}
         <div class="section">
           {#if section.name}
             <div class="section-header-row">
@@ -228,7 +306,7 @@
           {#if !is_collapsed}
             <div
               class="section-items"
-              style:grid-template-columns={grid_template}
+              style:grid-template-columns={grid_template(section.items.length)}
               transition:slide={{ duration: 200 }}
             >
               {#each section.items as col, idx (col.key ?? col.label ?? idx)}
@@ -238,14 +316,15 @@
           {/if}
         </div>
       {/each}
-    </div>
-  {:else}
-    <div class="column-menu" role="group" style:grid-template-columns={grid_template}>
-      {#each columns as col, idx (col.key ?? col.label ?? idx)}
+    {:else}
+      {#each filtered_columns as col, idx (col.key ?? col.label ?? idx)}
         {@render toggle_item(col)}
       {/each}
-    </div>
-  {/if}
+    {/if}
+    {#if filtered_columns.length === 0}
+      <span class="no-matching-columns">No matching columns</span>
+    {/if}
+  </div>
 </details>
 
 <style>
@@ -272,9 +351,12 @@
   .column-menu,
   .sections-container {
     font-size: var(--tgl-font-size, 1.1em);
-    position: absolute;
+    position: fixed;
     left: 0;
-    top: calc(100% + 1pt);
+    top: 0;
+    visibility: hidden;
+    box-sizing: border-box;
+    width: max-content;
     background: var(--tgl-dropdown-bg, var(--page-bg));
     border: 1px solid
       var(--tgl-dropdown-border, color-mix(in srgb, currentColor 10%, transparent));
@@ -284,13 +366,18 @@
       0 4px 12px color-mix(in srgb, currentColor 8%, transparent)
     );
     min-width: 150px;
+    max-width: calc(100vw - 16px);
     max-height: var(--tgl-dropdown-max-height, min(70vh, 600px));
-    overflow-y: auto;
-    z-index: 1;
+    overflow: auto;
+    z-index: var(--tgl-dropdown-z-index, 10000);
+  }
+  .column-menu,
+  .section-items {
+    display: grid;
+    column-gap: var(--tgl-column-gap, 8px);
   }
   .column-menu {
     padding: 3pt 5pt;
-    display: grid;
   }
   .sections-container {
     padding: 6pt 8pt;
@@ -298,6 +385,40 @@
     flex-direction: column;
     gap: 8px;
   }
+  .column-menu[hidden],
+  .sections-container[hidden] {
+    display: none;
+  }
+  .column-filter {
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    grid-column: 1 / -1;
+    box-sizing: border-box;
+    width: 100%;
+    height: 1.35rem;
+    min-height: 0;
+    margin: 0 0 4px;
+    padding: 0 0.35rem;
+    border: 1px solid
+      var(--tgl-dropdown-border, color-mix(in srgb, currentColor 18%, transparent));
+    border-radius: var(--tgl-border-radius, 4pt);
+    outline: none;
+    background: var(--tgl-dropdown-bg, var(--page-bg));
+    color: inherit;
+    font: inherit;
+    font-size: 0.72rem;
+    line-height: 1.2;
+    &:focus {
+      border-color: var(--active-color, #6ea8ff);
+    }
+  }
+  .no-matching-columns {
+    grid-column: 1 / -1;
+    padding: 4px;
+    color: color-mix(in srgb, currentColor 65%, transparent);
+    font-size: 0.9em;
+  }
   .reset-btn {
     display: flex;
     align-items: center;
@@ -325,10 +446,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,
@@ -355,9 +473,6 @@
     width: 1em;
     flex-shrink: 0;
   }
-  .section-items {
-    display: grid;
-  }
   .toggle-label {
     display: inline-block;
     margin: 1px 2px;

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

@@ -1,4 +1,4 @@
-import type { Label } from './';
+import { type Label } from './';
 type $$ComponentProps = {
     columns: Label[];
     column_panel_open?: boolean;

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/embedded.d.ts

@@ -0,0 +1,18 @@
+import { type ThemeType } from './';
+import './themes.mjs';
+declare global {
+    var jupyterlab: {
+        application?: {
+            shell?: {
+                dataset?: {
+                    theme?: string;
+                };
+            };
+        };
+    } | undefined;
+}
+type ThemeCallback = (theme_type: ThemeType) => void;
+export declare function detect_parent_theme(target_element?: HTMLElement): ThemeType;
+export declare function watch_theme(target_element: HTMLElement, callback: ThemeCallback): () => void;
+export declare function get_theme_css(theme_type: ThemeType, is_shadow_dom?: boolean): string;
+export {};