matterviz 0.3.2 → 0.3.3

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

@@ -44,6 +44,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" | "data" | "show_controls" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "loading" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -1,106 +1,139 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-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([]), on_reset, } = $props();
-const col_id = (col) => col.key ?? col.label;
-// Snapshot default visibility when column set changes (new dataset).
-// Compare by column keys to avoid re-snapshotting on internal columns = [...columns] reactivity.
-// Intentionally non-reactive: mutated only inside snapshot_defaults() and compared manually.
-let prev_col_keys = ``;
-let default_visibility = {};
-function snapshot_defaults() {
-    default_visibility = {};
+<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 column keys to avoid re-snapshotting on internal columns = [...columns] reactivity.
+  // Intentionally non-reactive: mutated only inside snapshot_defaults() and compared manually.
+  let prev_col_keys = ``
+  let default_visibility: Record<string, boolean> = {}
+  function snapshot_defaults() {
+    default_visibility = {}
     for (const col of columns) {
-        default_visibility[col_id(col)] = col.visible !== false;
+      default_visibility[col_id(col)] = col.visible !== false
     }
-    prev_col_keys = columns.map(col_id).join(`\0`);
-}
-snapshot_defaults();
-$effect(() => {
-    const current_keys = columns.map(col_id).join(`\0`);
+    prev_col_keys = columns.map(col_id).join(`\0`)
+  }
+  snapshot_defaults()
+
+  $effect(() => {
+    const current_keys = columns.map(col_id).join(`\0`)
     if (current_keys !== prev_col_keys) {
-        snapshot_defaults();
+      snapshot_defaults()
     }
-});
-// Check if a column's visibility differs from its default
-const is_changed = (col) => (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) {
+  })
+
+  // 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;
+      col.visible = default_visibility[col_id(col)] ?? true
     }
-    columns = [...columns];
-}
-function reset_all() {
-    reset_columns(columns);
-    on_reset?.();
-}
-function reset_section(section_name) {
-    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 = {};
-    const ungrouped = [];
+    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);
-        }
+      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) {
+
+    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((s) => s !== name)
-        : [...collapsed_sections, name];
-}
-function toggle_column_visibility(col, event) {
-    if (!(event.target instanceof HTMLInputElement))
-        return;
-    col.visible = event.target.checked;
-    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;
-$effect(() => {
-    if (!column_panel_open || !details_el)
-        return;
+      ? collapsed_sections.filter((s) => s !== name)
+      : [...collapsed_sections, name]
+  }
+
+  function toggle_column_visibility(col: Label, event: Event) {
+    if (!(event.target instanceof HTMLInputElement)) return
+    col.visible = event.target.checked
+    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
+  $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(`.column-menu, .sections-container`);
-    if (!dropdown)
-        return;
+    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`;
+    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`;
-        }
-    });
-});
+      const rect = dropdown.getBoundingClientRect()
+      if (rect.right > window.innerWidth) {
+        dropdown.style.left = `auto`
+        dropdown.style.right = `0`
+      }
+    })
+  })
 </script>
 
 {#snippet toggle_item(col: Label)}
@@ -115,7 +148,7 @@ $effect(() => {
       disabled={col.disabled}
       onchange={(event) => toggle_column_visibility(col, event)}
     />
-    {@html col.label}
+    {@html sanitize_html(col.label)}
   </label>
 {/snippet}
 

package/dist/table/index.js

@@ -13,16 +13,14 @@ 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 || val === undefined || Number.isNaN(val) || color_scale === 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));
+    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];

package/dist/theme/ThemeControl.svelte

@@ -1,15 +1,24 @@
-<script lang="ts">import { theme_state } from '../state.svelte';
-import { apply_theme_to_dom, save_theme_preference, THEME_OPTIONS } from './index';
-let { theme_mode = $bindable(theme_state.mode), onchange = () => { }, ...rest } = $props();
-$effect(() => {
-    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 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 ?? ``}">

package/dist/time.js

@@ -39,7 +39,10 @@ export const format_utc_time = (date) => {
     const timestamp = typeof date === `string` ? new Date(date) : date;
     if (isNaN(timestamp.getTime()))
         return `N/A`;
-    return timestamp.toISOString().replace(`T`, ` `).replace(/\.\d+Z$/, ` UTC`);
+    return timestamp
+        .toISOString()
+        .replace(`T`, ` `)
+        .replace(/\.\d+Z$/, ` UTC`);
 };
 // Format duration between two dates: "5h 23m", "2d 3h", "45m".
 export const format_duration = (start, end) => {

package/dist/tooltip/TooltipContent.svelte

@@ -1,20 +1,45 @@
-<script lang="ts" generics="T, SnippetArg = T">let { data, snippet_arg, tooltip, children, } = $props();
-const is_snippet = $derived(typeof tooltip === `function`);
-const config = $derived(!is_snippet && tooltip ? tooltip : null);
-const prefix = $derived(typeof config?.prefix === `function` ? config.prefix(data) : config?.prefix);
-const suffix = $derived(typeof config?.suffix === `function` ? config.suffix(data) : config?.suffix);
-export {};
+<script lang="ts" generics="T, SnippetArg = T">
+  // Wrapper component that handles the common tooltip pattern:
+  // - If tooltip is a snippet function, render it exclusively (replaces default content)
+  // - If tooltip is a config object, render prefix/suffix around the default content
+  // - Otherwise, render just the default content
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import type { TooltipConfig } from './types'
+
+  let {
+    data,
+    snippet_arg,
+    tooltip,
+    children,
+  }: {
+    data: T // Data passed to config prefix/suffix functions
+    snippet_arg: SnippetArg // Single arg passed to custom snippet (can differ from data)
+    tooltip?: Snippet<[SnippetArg]> | TooltipConfig<T>
+    children: Snippet
+  } = $props()
+
+  const is_snippet = $derived(typeof tooltip === `function`)
+  const config = $derived(
+    !is_snippet && tooltip ? (tooltip as TooltipConfig<T>) : null,
+  )
+  const prefix = $derived(
+    typeof config?.prefix === `function` ? config.prefix(data) : config?.prefix,
+  )
+  const suffix = $derived(
+    typeof config?.suffix === `function` ? config.suffix(data) : config?.suffix,
+  )
 </script>
 
 {#if is_snippet}
   {@render (tooltip as Snippet<[SnippetArg]>)(snippet_arg)}
 {:else}
   {#if prefix}
-    <div class="tooltip-prefix">{@html prefix}</div>
+    <div class="tooltip-prefix">{@html sanitize_html(prefix)}</div>
   {/if}
   {@render children()}
   {#if suffix}
-    <div class="tooltip-suffix">{@html suffix}</div>
+    <div class="tooltip-suffix">{@html sanitize_html(suffix)}</div>
   {/if}
 {/if}