matterviz 0.4.2 → 0.4.3

package/dist/table/HeatmapTable.svelte

@@ -327,11 +327,10 @@
 
   // Normalize export_data config
   type ExportFormat = `csv` | `json`
-  const default_formats: ExportFormat[] = [`csv`, `json`]
   let export_config = $derived(
     export_data
       ? {
-          formats: default_formats,
+          formats: [`csv`, `json`] as ExportFormat[],
           filename: `table-export`,
           ...(typeof export_data === `object` ? export_data : {}),
         }
@@ -381,9 +380,7 @@
   ] as const
 
   // Columns that have a color gradient
-  let colored_columns = $derived(
-    columns.filter((col) => col.color_scale !== null && col.color_scale !== undefined),
-  )
+  let colored_columns = $derived(columns.filter((col) => col.color_scale != null))
 
   // Column resize state
   let resize_col_id = $state<string | null>(null)
@@ -748,22 +745,19 @@
     // Skip client-side sorting when using async onsort callback or sort_data is false
     if (onsort || !sort_data) return filtered_data
 
-    if (!sort_state.column && multi_sort.length === 0) return filtered_data
-
-    // Build sort criteria: multi_sort takes precedence, fallback to single sort
+    // Build sort criteria: multi_sort (Shift+click) takes precedence over single sort
     const sort_criteria =
       multi_sort.length > 0 ? multi_sort : sort_state.column ? [sort_state] : []
-
     if (sort_criteria.length === 0) return filtered_data
 
+    const valid_column_ids = new Set(ordered_columns.map(get_col_id))
     return [...filtered_data].sort((row1, row2) => {
       for (const { column, ascending } of sort_criteria) {
-        const matched_col = ordered_columns.find((col) => get_col_id(col) === column)
-        if (!matched_col) continue
+        // criteria hold column IDs; skip stale entries referencing removed columns
+        if (!valid_column_ids.has(column)) continue
 
-        const col_id = get_col_id(matched_col)
-        const val1 = row1[col_id]
-        const val2 = row2[col_id]
+        const val1 = row1[column]
+        const val2 = row2[column]
 
         if (val1 === val2) continue
 
@@ -934,13 +928,7 @@
         }
       } else {
         // Add to multi-sort
-        multi_sort = [
-          ...multi_sort,
-          {
-            column: col_id,
-            ascending: col.better === `lower`,
-          },
-        ]
+        multi_sort = [...multi_sort, { column: col_id, ascending: col.better === `lower` }]
       }
       // Clear single sort when using multi-sort
       sort = { column: ``, dir: `asc` }
@@ -1047,25 +1035,23 @@
     visible_columns.length + (show_row_select ? 1 : 0) + (show_row_numbers ? 1 : 0),
   )
 
+  // Arrow (plus a numbered badge under multi-sort) for actively sorted columns
   const sort_indicator = (col: Label, current_sort_state: SortState) => {
-    const hide_sort_indicator =
-      col.show_sort_indicator === false || col.style?.includes(`--hide-sort-indicator`)
-    if (hide_sort_indicator) return ``
-
+    if (col.show_sort_indicator === false || col.style?.includes(`--hide-sort-indicator`)) {
+      return ``
+    }
     const col_id = get_col_id(col)
-
-    // Check multi-sort first
     const multi_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-    if (multi_idx !== -1) {
-      const arrow = multi_sort[multi_idx].ascending ? `↓` : `↑`
-      const badge = multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
-      return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`
-    }
-
-    // Show indicator only for actively sorted columns.
-    if (current_sort_state.column !== col_id) return ``
-    const arrow = current_sort_state.ascending ? `↓` : `↑`
-    return `<span style="font-size: 0.8em;">${arrow}</span>`
+    const active =
+      multi_idx !== -1
+        ? multi_sort[multi_idx]
+        : current_sort_state.column === col_id
+          ? current_sort_state
+          : null
+    if (!active) return ``
+    const badge =
+      multi_idx !== -1 && multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
+    return `<span style="font-size: 0.8em;">${active.ascending ? `↓` : `↑`}${badge}</span>`
   }
 
   // Context menu state for column right-click (headers and body cells)
@@ -1200,7 +1186,7 @@
   // Raw cell value as clipboard text (numbers keep full precision, dates go
   // ISO, HTML cells lose their markup)
   const cell_copy_text = (val: CellVal): string => {
-    if (val == null || (typeof val === `number` && Number.isNaN(val))) return ``
+    if (is_invalid(val)) return ``
     if (val instanceof Date) return val.toISOString()
     if (typeof val === `object`) return JSON.stringify(val)
     return strip_html(String(val)).trim()
@@ -1367,6 +1353,11 @@
     download(JSON.stringify(rows, null, 2), `${filename}.json`, `application/json`)
   }
 
+  const export_actions = [
+    [`csv`, export_csv],
+    [`json`, export_json],
+  ] as const
+
   function copy_to_clipboard() {
     navigator.clipboard.writeText(serialize_table(`\t`))
   }
@@ -1532,28 +1523,20 @@
         </button>
         {#if show_export_dropdown}
           <div class="dropdown-pane">
-            {#if export_config.formats.includes(`csv`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_csv(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> CSV
-              </button>
-            {/if}
-            {#if export_config.formats.includes(`json`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_json(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> JSON
-              </button>
-            {/if}
+            {#each export_actions as [format, export_fn] (format)}
+              {#if export_config.formats.includes(format)}
+                <button
+                  class="dropdown-option"
+                  onclick={() => {
+                    export_fn(export_config.filename)
+                    show_export_dropdown = false
+                  }}
+                >
+                  <Icon icon="Download" style="width: 12px" />
+                  {format.toUpperCase()}
+                </button>
+              {/if}
+            {/each}
             <button
               class="dropdown-option"
               onclick={() => {
@@ -1710,12 +1693,13 @@
               {#if !col.group}
                 <th class:sticky-col={col.sticky}></th>
               {:else}
-                {@const group_cols = visible_columns.filter(
-                  (column) => column.group === col.group,
-                )}
-                <!-- Only render the group header once for each group by checking if this is the first column of this group -->
-                {#if visible_columns.findIndex((column) => column.group === col.group) === visible_columns.findIndex((column) => column.group === col.group && column.label === col.label)}
-                  <th title={col.description} colspan={group_cols.length}>
+                <!-- Only render the group header once per group (on its first column) -->
+                {#if visible_columns.find((column) => column.group === col.group) === col}
+                  <th
+                    title={col.description}
+                    colspan={visible_columns.filter((column) => column.group === col.group)
+                      .length}
+                  >
                     {@html sanitize_html(col.group)}
                   </th>
                 {/if}
@@ -1967,7 +1951,7 @@
                   {date_val}
                 {:else if typeof val === `number` && !Number.isNaN(val)}
                   {format_num(val, col.format ?? default_num_format)}
-                {:else if val === undefined || val === null || Number.isNaN(val)}
+                {:else if is_invalid(val)}
                   <span {@attach tooltip({ content: `Not available` })}> n/a </span>
                 {:else}
                   {@html sanitize_html(val)}
@@ -2000,24 +1984,16 @@
     </div>
   {/if}
 
+  {#snippet page_btn(label: string, title: string, target_page: number, disabled: boolean)}
+    <button class="page-btn" {disabled} onclick={() => (current_page = target_page)} {title}>
+      {label}
+    </button>
+  {/snippet}
+
   {#if pagination_config && total_pages > 1}
     <div class="pagination">
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => (current_page = 1)}
-        title="First page"
-      >
-        «
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => current_page--}
-        title="Previous page"
-      >
-        ‹
-      </button>
+      {@render page_btn(`«`, `First page`, 1, current_page === 1)}
+      {@render page_btn(`‹`, `Previous page`, current_page - 1, current_page === 1)}
       <span class="page-info">
         Page
         <input
@@ -2035,22 +2011,8 @@
         of {total_pages}
         <span class="row-count">({sorted_data.length} rows)</span>
       </span>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => current_page++}
-        title="Next page"
-      >
-        ›
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => (current_page = total_pages)}
-        title="Last page"
-      >
-        »
-      </button>
+      {@render page_btn(`›`, `Next page`, current_page + 1, current_page === total_pages)}
+      {@render page_btn(`»`, `Last page`, total_pages, current_page === total_pages)}
       {#if pagination_config.page_sizes}
         <select
           class="page-size-select"
@@ -2450,10 +2412,6 @@
     vertical-align: middle;
     padding: 2px !important;
   }
-  .select-col :global(svg) {
-    display: block;
-    margin: auto;
-  }
   tr.selected {
     background: var(--highlight-bg, rgba(74, 158, 255, 0.15)) !important;
   }

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,31 +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>
 
@@ -169,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
@@ -191,11 +252,32 @@
     {/if}
   </summary>
 
-  {#if has_sections}
-    <div class="sections-container" role="group">
-      {#each sections as section (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 =
-          section.name !== `` && collapsed_sections.includes(section.name)}
+          !normalized_column_filter &&
+          section.name !== `` &&
+          collapsed_sections.includes(section.name)}
         <div class="section">
           {#if section.name}
             <div class="section-header-row">
@@ -224,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)}
@@ -234,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>
@@ -268,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));
@@ -280,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;
@@ -294,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;
@@ -348,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/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 {};