matterviz 0.3.6 → 0.3.7

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

@@ -0,0 +1,49 @@
+import type { CellSnippet, ExportData, InitialSort, Label, Pagination, RowData, Search, SortHint, SpecialCells } from './';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    data: RowData[];
+    columns?: Label[];
+    sort_hint?: SortHint;
+    cell?: CellSnippet;
+    special_cells?: SpecialCells;
+    controls?: Snippet;
+    initial_sort?: InitialSort;
+    sort?: {
+        column: string;
+        dir: `asc` | `desc`;
+    };
+    fixed_header?: boolean;
+    default_num_format?: string;
+    show_heatmap?: boolean;
+    heatmap_class?: string;
+    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void;
+    onrowdblclick?: (event: MouseEvent, row: RowData) => void;
+    column_order?: string[];
+    export_data?: ExportData;
+    show_column_toggle?: boolean;
+    search?: Search;
+    show_row_select?: boolean;
+    pagination?: Pagination;
+    selected_rows?: RowData[];
+    hidden_columns?: string[];
+    scroll_style?: string;
+    root_style?: string;
+    onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
+    onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void;
+    loading?: boolean;
+    sort_data?: boolean;
+    heatmap_opacity?: number;
+    empty_message?: string;
+    show_row_numbers?: boolean;
+    allow_better_toggle?: boolean;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    header_cell?: Snippet<[{
+        col: Label;
+    }]>;
+    footer?: Snippet;
+};
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "loading" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
+type HeatmapTable = ReturnType<typeof HeatmapTable>;
+export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { Label } from './'
+  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
+  import { slide } from 'svelte/transition'
+
+  let {
+    columns = $bindable([]),
+    column_panel_open = $bindable(false),
+    n_columns,
+    collapsed_sections = $bindable<string[]>([]),
+    on_reset,
+  }: {
+    columns: Label[]
+    column_panel_open?: boolean
+    // 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)
+    on_reset?: (section?: string) => void
+  } = $props()
+
+  const col_id = (col: Label) => col.key ?? col.label
+
+  // Snapshot default visibility when column set changes (new dataset).
+  // Compare by keys and visibility defaults. Internal updates opt out below.
+  // Signature state is non-reactive; default visibility is state so reset UI updates after snapshots.
+  let prev_default_signature = ``
+  let internal_default_signature: string | undefined
+  let default_visibility = $state<Record<string, boolean>>({})
+  const default_signature = () =>
+    columns.map((col) => `${col_id(col)}:${col.visible !== false}`).join(`\0`)
+
+  function snapshot_defaults() {
+    default_visibility = {}
+    for (const col of columns) {
+      default_visibility[col_id(col)] = col.visible !== false
+    }
+    prev_default_signature = default_signature()
+  }
+  snapshot_defaults()
+
+  $effect(() => {
+    const current_signature = default_signature()
+    if (current_signature === internal_default_signature) {
+      internal_default_signature = undefined
+      return
+    }
+    if (current_signature === prev_default_signature) return
+    snapshot_defaults()
+  })
+
+  // Check if a column's visibility differs from its default
+  const is_changed = (col: Label) =>
+    (col.visible !== false) !== (default_visibility[col_id(col)] ?? true)
+
+  let has_any_changes = $derived(columns.some(is_changed))
+
+  // Reset columns to default visibility
+  function reset_columns(items: Label[]): void {
+    for (const col of items) {
+      col.visible = default_visibility[col_id(col)] ?? true
+    }
+    internal_default_signature = default_signature()
+    columns = [...columns]
+  }
+
+  function reset_all(): void {
+    reset_columns(columns)
+    on_reset?.()
+  }
+
+  function reset_section(section_name: string): void {
+    const section = sections.find((sec) => sec.name === section_name)
+    if (!section) return
+    reset_columns(section.items)
+    on_reset?.(section_name)
+  }
+
+  // Group columns by their group property
+  let sections = $derived.by(() => {
+    const grouped: Record<string, Label[]> = {}
+    const ungrouped: Label[] = []
+
+    for (const col of columns) {
+      if (col.group) {
+        grouped[col.group] ??= []
+        grouped[col.group].push(col)
+      } else {
+        ungrouped.push(col)
+      }
+    }
+
+    const result = Object.entries(grouped).map(([name, items]) => ({ name, items }))
+    if (ungrouped.length > 0) result.push({ name: ``, items: ungrouped })
+    return result
+  })
+
+  // Check if any column defines a group (to decide whether to show sections)
+  let has_sections = $derived(columns.some((col) => col.group))
+
+  function toggle_section(name: string) {
+    collapsed_sections = collapsed_sections.includes(name)
+      ? collapsed_sections.filter((section) => section !== name)
+      : [...collapsed_sections, name]
+  }
+
+  function toggle_column_visibility(col: Label, event: Event) {
+    if (!(event.target instanceof HTMLInputElement)) return
+    col.visible = event.target.checked
+    internal_default_signature = default_signature()
+    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))`,
+  )
+
+  // Reposition dropdown: left-aligned by default, switch to right if it overflows viewport
+  let details_el: HTMLElement | undefined = undefined
+  $effect(() => {
+    if (!column_panel_open || !details_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`
+      }
+    })
+  })
+</script>
+
+{#snippet toggle_item(col: Label)}
+  <label
+    class="toggle-label"
+    class:disabled={col.disabled}
+    {@attach tooltip({ allow_html: true, content: sanitize_html(col.description ?? ``) })}
+  >
+    <input
+      type="checkbox"
+      checked={col.visible !== false}
+      disabled={col.disabled}
+      onchange={(event) => toggle_column_visibility(col, event)}
+    />
+    {@html sanitize_html(col.label)}
+  </label>
+{/snippet}
+
+<svelte:window
+  onkeydown={(event) => {
+    if (event.key === `Escape` && column_panel_open) {
+      column_panel_open = false
+      event.preventDefault()
+    }
+  }}
+/>
+
+<details
+  class="column-toggles"
+  bind:this={details_el}
+  bind:open={column_panel_open}
+  {@attach click_outside({ callback: () => (column_panel_open = false) })}
+>
+  <summary aria-expanded={column_panel_open}>
+    Columns <Icon icon="Columns" />
+    {#if has_any_changes}
+      <button
+        class="reset-btn"
+        onclick={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          reset_all()
+        }}
+        type="button"
+        aria-label="Reset all columns to defaults"
+        {@attach tooltip()}
+      >
+        <Icon icon="Reset" width="12px" />
+      </button>
+    {/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 class="section">
+          {#if section.name}
+            <div class="section-header-row">
+              <button
+                class="section-header"
+                aria-expanded={!is_collapsed}
+                onclick={() => toggle_section(section.name)}
+                type="button"
+              >
+                <span class="collapse-icon">{is_collapsed ? `▶` : `▼`}</span>
+                {section.name}
+              </button>
+              {#if section.items.some(is_changed)}
+                <button
+                  class="reset-btn"
+                  onclick={() => reset_section(section.name)}
+                  type="button"
+                  aria-label="Reset {section.name} to defaults"
+                  {@attach tooltip()}
+                >
+                  <Icon icon="Reset" width="12px" />
+                </button>
+              {/if}
+            </div>
+          {/if}
+          {#if !is_collapsed}
+            <div
+              class="section-items"
+              style:grid-template-columns={grid_template}
+              transition:slide={{ duration: 200 }}
+            >
+              {#each section.items as col, idx (col.key ?? col.label ?? idx)}
+                {@render toggle_item(col)}
+              {/each}
+            </div>
+          {/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)}
+        {@render toggle_item(col)}
+      {/each}
+    </div>
+  {/if}
+</details>
+
+<style>
+  .column-toggles {
+    position: relative;
+    summary {
+      background: var(--tgl-btn-bg, var(--btn-bg));
+      padding: 0 6pt;
+      margin: 4pt 0;
+      border-radius: var(--tgl-border-radius, 4pt);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      &:hover {
+        background: var(--tgl-hover-bg, var(--nav-bg));
+      }
+      &::-webkit-details-marker {
+        display: none;
+      }
+    }
+  }
+  /* Shared dropdown styling */
+  .column-menu,
+  .sections-container {
+    font-size: var(--tgl-font-size, 1.1em);
+    position: absolute;
+    left: 0;
+    top: calc(100% + 1pt);
+    background: var(--tgl-dropdown-bg, var(--page-bg));
+    border: 1px solid
+      var(--tgl-dropdown-border, color-mix(in srgb, currentColor 10%, transparent));
+    border-radius: var(--tgl-border-radius, 4pt);
+    box-shadow: var(
+      --tgl-dropdown-shadow,
+      0 4px 12px color-mix(in srgb, currentColor 8%, transparent)
+    );
+    min-width: 150px;
+    max-height: var(--tgl-dropdown-max-height, min(70vh, 600px));
+    overflow-y: auto;
+    z-index: 1;
+  }
+  .column-menu {
+    padding: 3pt 5pt;
+    display: grid;
+  }
+  .sections-container {
+    padding: 6pt 8pt;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .reset-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2pt;
+    border: none;
+    border-radius: var(--tgl-border-radius, 3pt);
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.5;
+    flex-shrink: 0;
+    &:hover {
+      background: color-mix(in srgb, currentColor 12%, transparent);
+      opacity: 1;
+    }
+  }
+  summary .reset-btn {
+    margin-left: auto;
+  }
+  .section-header-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    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)
+    );
+    &:hover {
+      background: var(
+        --tgl-section-header-hover-bg,
+        color-mix(in srgb, currentColor 12%, transparent)
+      );
+    }
+  }
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: 600;
+    font-size: 0.9em;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    flex: 1;
+    text-align: left;
+    color: inherit;
+  }
+  .collapse-icon {
+    font-size: 0.7em;
+    width: 1em;
+    flex-shrink: 0;
+  }
+  .section-items {
+    display: grid;
+  }
+  .toggle-label {
+    display: inline-block;
+    margin: 1px 2px;
+    border-radius: 3px;
+    line-height: 1.3em;
+    height: 1.3em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:hover:not(.disabled) {
+      background: var(--tgl-hover-bg, var(--nav-bg));
+    }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      input {
+        cursor: not-allowed;
+      }
+    }
+  }
+  details :global(:is(sub, sup)) {
+    transform: translate(-3pt, 6pt);
+    font-size: 0.7em;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Label } from './';
+type $$ComponentProps = {
+    columns: Label[];
+    column_panel_open?: boolean;
+    n_columns?: number;
+    collapsed_sections?: string[];
+    on_reset?: (section?: string) => void;
+};
+declare const ToggleMenu: import("svelte").Component<$$ComponentProps, {}, "columns" | "column_panel_open" | "collapsed_sections">;
+type ToggleMenu = ReturnType<typeof ToggleMenu>;
+export default ToggleMenu;

package/dist/table/index.d.ts

@@ -0,0 +1,74 @@
+import * 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> | {
+    [key: string]: string | number | null | undefined | boolean;
+}[];
+export type RowData = {
+    style?: string;
+    class?: string;
+    [key: string]: CellVal;
+};
+export type Label = {
+    label: string;
+    key?: string;
+    group?: string;
+    description?: string;
+    format?: string;
+    better?: `higher` | `lower`;
+    color_scale?: keyof typeof d3sc | null;
+    scale_type?: `linear` | `log`;
+    sticky?: boolean;
+    visible?: boolean;
+    sortable?: boolean;
+    show_sort_indicator?: boolean;
+    disabled?: boolean;
+    style?: string;
+    cell_style?: string;
+};
+export type CellSnippetArgs = {
+    row: RowData;
+    col: Label;
+    val: CellVal;
+};
+export type CellSnippet = Snippet<[CellSnippetArgs]>;
+export type SpecialCells = Record<string, CellSnippet>;
+export type SortState = {
+    column: string;
+    ascending: boolean;
+};
+export type MultiSortState = SortState[];
+export type SortHint = string | {
+    text: string;
+    position?: `top` | `bottom`;
+    permanent?: boolean;
+    style?: string;
+    class?: string;
+};
+export type InitialSort = string | {
+    column: string;
+    direction?: `asc` | `desc`;
+};
+export type Pagination = boolean | {
+    page_size?: number;
+    page_sizes?: number[];
+};
+export type Search = boolean | {
+    placeholder?: string;
+    expanded?: boolean;
+};
+export type ExportData = boolean | {
+    formats?: (`csv` | `json`)[];
+    filename?: string;
+};
+export type OnSortCallback = (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
+export declare const strip_html: (str: string) => string;
+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;
+};

package/dist/table/index.js

@@ -0,0 +1,38 @@
+import { 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.replace(/<[^>]*>/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
+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 };
+    }
+    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 };
+    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);
+    // 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 }) };
+}

package/dist/theme/ThemeControl.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { theme_state } from '../state.svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  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()
+
+  $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
+    save_theme_preference(theme_mode)
+    apply_theme_to_dom(theme_mode)
+    onchange(theme_mode)
+  })
+</script>
+
+<select 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}
+</select>
+
+<style>
+  .theme-control {
+    position: fixed;
+    bottom: 1em;
+    left: 1em;
+    z-index: var(--theme-control-z-index, 2);
+    background: var(--btn-bg);
+    border: var(--pane-border);
+    color: var(--text-color);
+    border-radius: var(--theme-control-border-radius, var(--border-radius, 3pt));
+    padding: var(--theme-control-padding, 1pt 2pt);
+    backdrop-filter: blur(10px);
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  .theme-control:hover {
+    background: var(--btn-bg-hover);
+    border: var(--pane-border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+  .theme-control:focus {
+    outline: 0.5px solid var(--accent-color);
+  }
+</style>

package/dist/theme/ThemeControl.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ThemeMode } from './index';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLSelectElement>, `onchange`> & {
+    theme_mode?: ThemeMode;
+    onchange?: (mode: ThemeMode) => void;
+};
+declare const ThemeControl: import("svelte").Component<$$ComponentProps, {}, "theme_mode">;
+type ThemeControl = ReturnType<typeof ThemeControl>;
+export default ThemeControl;

package/dist/theme/index.d.ts

@@ -0,0 +1,29 @@
+export declare const COLOR_THEMES: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly white: "white";
+    readonly black: "black";
+};
+export declare const AUTO_THEME: "auto";
+export type ThemeType = `light` | `dark`;
+export declare const THEME_TYPE: Record<ThemeName, ThemeType>;
+export type ThemeName = keyof typeof COLOR_THEMES;
+export type ThemeMode = ThemeName | typeof AUTO_THEME;
+export interface ThemeOption {
+    value: ThemeMode;
+    label: string;
+    icon: string;
+}
+export declare const THEME_OPTIONS: ThemeOption[];
+export declare const is_valid_theme_mode: (value: string) => value is ThemeMode;
+export declare const is_valid_theme_name: (value: string) => value is ThemeName;
+export declare const resolve_theme_mode: (mode: ThemeMode, system_preference?: ThemeType) => ThemeName;
+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;