matterviz 0.3.7 → 0.4.1

package/dist/table/HeatmapTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { luminance, watch_dark_mode } from '../colors'
   import Icon from '../Icon.svelte'
+  import { download } from '../io/fetch'
   import { format_num } from '../labels'
   import { SettingsSection } from '../layout'
   import ContextMenu from '../overlays/ContextMenu.svelte'
@@ -32,6 +33,57 @@
   const is_invalid = (val: unknown) =>
     val == null || (typeof val === `number` && Number.isNaN(val))
 
+  // tooltip() wires [title]/[aria-label]/[data-title] elements once when it runs.
+  // Table cells are replaced when the table re-renders (sort, filter, data or
+  // pagination changes), which would silently drop their tooltips. Observe the
+  // container and incrementally wire newly added elements / unwire removed ones,
+  // instead of tearing down and rebuilding every tooltip on each unrelated DOM
+  // mutation (dropdowns, panes, pagination, context menu).
+  const tooltip_selector = `[title], [aria-label], [data-title]`
+  function table_tooltips(node: HTMLElement) {
+    const options = { allow_html: true } as const
+    // Per-element cleanups so individual nodes can be unwired as they leave the DOM.
+    const wired = new SvelteMap<Element, () => void>()
+
+    const wire = (root: Element) => {
+      const targets = root.matches(tooltip_selector)
+        ? [root, ...root.querySelectorAll(tooltip_selector)]
+        : [...root.querySelectorAll(tooltip_selector)]
+      for (const el of targets) {
+        if (!(el instanceof HTMLElement) || wired.has(el)) continue
+        // tooltip() only mutates attributes (title -> data-original-title), never
+        // childList, so wiring here can't re-trigger the childList observer below.
+        const cleanup = tooltip(options)(el)
+        if (cleanup) wired.set(el, cleanup)
+      }
+    }
+
+    wire(node)
+    const observer = new MutationObserver((mutations) => {
+      // Unwire elements that left the DOM. isConnected stays true for moved nodes
+      // (e.g. row reordering on sort), so those keep their tooltips without churn.
+      // Deleting the current entry mid-iteration is safe for Map.
+      for (const [el, cleanup] of wired) {
+        if (!el.isConnected) {
+          cleanup()
+          wired.delete(el)
+        }
+      }
+      // Wire only the freshly added subtrees, not the whole container.
+      for (const { addedNodes } of mutations) {
+        for (const added of addedNodes) {
+          if (added instanceof Element) wire(added)
+        }
+      }
+    })
+    observer.observe(node, { childList: true, subtree: true })
+    return () => {
+      observer.disconnect()
+      for (const cleanup of wired.values()) cleanup()
+      wired.clear()
+    }
+  }
+
   const NUMERIC_WITH_ERROR_RE =
     /^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/
 
@@ -484,7 +536,7 @@
 
         // Push invalid values to bottom
         if (is_invalid(val1) || is_invalid(val2)) {
-          return +is_invalid(val1) - +is_invalid(val2)
+          return Number(is_invalid(val1)) - Number(is_invalid(val2))
         }
 
         const sort_val1 = get_sort_val(val1)
@@ -497,10 +549,11 @@
             sensitivity: `base`,
           })
           if (cmp !== 0) return cmp * modifier
-        } else {
-          if (sort_val1 !== sort_val2) {
-            return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
-          }
+        } else if (typeof sort_val1 !== typeof sort_val2) {
+          // number<string is false both ways, breaking the comparator: numbers sort first
+          return (typeof sort_val1 === `number` ? -1 : 1) * modifier
+        } else if (sort_val1 !== sort_val2) {
+          return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
         }
       }
       return 0
@@ -558,7 +611,7 @@
     // Shift+click for multi-column sort
     if (event.shiftKey) {
       const existing_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-      if (existing_idx >= 0) {
+      if (existing_idx !== -1) {
         // Toggle direction or remove if clicked again
         const existing = multi_sort[existing_idx]
         if (existing.ascending === (col.better === `lower`)) {
@@ -684,7 +737,7 @@
 
     // Check multi-sort first
     const multi_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-    if (multi_idx >= 0) {
+    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>`
@@ -716,8 +769,8 @@
   function toggle_row_select(row: RowData) {
     const row_id = get_row_id(row)
     const idx = selected_rows.findIndex((selected_row) => get_row_id(selected_row) === row_id)
-    if (idx >= 0) {
-      selected_rows = selected_rows.filter((_, i) => i !== idx)
+    if (idx !== -1) {
+      selected_rows = selected_rows.filter((_, row_idx) => row_idx !== idx)
     } else {
       selected_rows = [...selected_rows, row]
     }
@@ -755,7 +808,7 @@
     const quote = (str: string) => {
       if (!csv_quote) return str
       if (str.includes(`,`) || str.includes(`"`) || str.includes(`\n`)) {
-        return `"${str.replace(/"/g, `""`)}"`
+        return `"${str.replaceAll('"', `""`)}"`
       }
       return str
     }
@@ -771,7 +824,7 @@
   }
 
   function export_csv(filename = `table-export`) {
-    download_file(serialize_table(`,`, true), `${filename}.csv`, `text/csv`)
+    download(serialize_table(`,`, true), `${filename}.csv`, `text/csv`)
   }
 
   function export_json(filename = `table-export`) {
@@ -786,25 +839,13 @@
       }
       return clean_row
     })
-    download_file(
+    download(
       JSON.stringify(rows, null, 2),
       `${filename}.json`,
       `application/json`,
     )
   }
 
-  function download_file(content: string, filename: string, mime_type: string) {
-    const blob = new Blob([content], { type: mime_type })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-  }
-
   function copy_to_clipboard() {
     navigator.clipboard.writeText(serialize_table(`\t`))
   }
@@ -869,7 +910,7 @@
 {/snippet}
 
 <div
-  {@attach tooltip({ allow_html: true })}
+  {@attach table_tooltips}
   {...rest_props}
   bind:this={container_el}
   class="table-container {rest_props.class ?? ``}"

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" | "loading" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
+declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "loading" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "heatmap_opacity">;
 type HeatmapTable = ReturnType<typeof HeatmapTable>;
 export default HeatmapTable;

package/dist/table/index.d.ts

@@ -2,9 +2,7 @@ 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 CellVal = string | number | boolean | undefined | null | Record<string, unknown> | Record<string, string | number | null | undefined | boolean>[];
 export type RowData = {
     style?: string;
     class?: string;

package/dist/table/index.js

@@ -5,7 +5,7 @@ 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, ``);
+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

package/dist/theme/index.js

@@ -33,7 +33,7 @@ export const get_theme_preference = () => {
         return AUTO_THEME;
     try {
         const saved = localStorage[storage_key];
-        return is_valid_theme_mode(saved || ``) ? saved : AUTO_THEME;
+        return is_valid_theme_mode(saved ?? ``) ? saved : AUTO_THEME;
     }
     catch {
         return AUTO_THEME;
@@ -57,8 +57,8 @@ export const apply_theme_to_dom = (mode) => {
     if (!resolved || !(resolved in THEME_TYPE)) {
         throw new Error(`Invalid theme mode: ${resolved}`);
     }
-    const theme = globalThis.MATTERVIZ_THEMES?.[resolved] || {};
-    const css_vars = globalThis.MATTERVIZ_CSS_MAP || {};
+    const theme = globalThis.MATTERVIZ_THEMES?.[resolved] ?? {};
+    const css_vars = globalThis.MATTERVIZ_CSS_MAP ?? {};
     const root = document.documentElement;
     Object.entries(theme).forEach(([key, value]) => {
         const css_var = css_vars[key];
@@ -72,8 +72,8 @@ export const apply_theme_to_dom = (mode) => {
     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] || {};
+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/tooltip/KCoords.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  // Shared k-point coordinate rows for hover tooltips (Brillouin zone + Fermi surface)
+  import { format_vec3 } from '../labels'
+  import type { Vec3 } from '../math'
+
+  let { cartesian, fractional = null }: {
+    cartesian: Vec3
+    fractional?: Vec3 | null
+  } = $props()
+</script>
+
+<div class="k-coord-row">
+  <span class="k-coord-label"><span class="vec">k</span> (Å⁻¹):</span>
+  <span>{format_vec3(cartesian)}</span>
+</div>
+{#if fractional}
+  <div class="k-coord-row">
+    <span class="k-coord-label"><span class="vec">k</span> (frac):</span>
+    <span>{format_vec3(fractional)}</span>
+  </div>
+{/if}
+
+<style>
+  .k-coord-row {
+    display: flex;
+    gap: 4px;
+  }
+  .k-coord-label {
+    opacity: 0.8;
+    min-width: 50px;
+  }
+  .vec {
+    position: relative;
+    font-style: italic;
+  }
+  .vec::after {
+    content: '→';
+    position: absolute;
+    left: 50%;
+    top: -0.85em;
+    transform: translateX(-50%);
+    font-size: 0.6em;
+    font-style: normal;
+  }
+</style>

package/dist/tooltip/KCoords.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Vec3 } from '../math';
+type $$ComponentProps = {
+    cartesian: Vec3;
+    fractional?: Vec3 | null;
+};
+declare const KCoords: import("svelte").Component<$$ComponentProps, {}, "">;
+type KCoords = ReturnType<typeof KCoords>;
+export default KCoords;

package/dist/tooltip/index.d.ts

@@ -1,2 +1,3 @@
+export { default as KCoords } from './KCoords.svelte';
 export { default as TooltipContent } from './TooltipContent.svelte';
 export type * from './types';

package/dist/tooltip/index.js

@@ -1 +1,2 @@
+export { default as KCoords } from './KCoords.svelte';
 export { default as TooltipContent } from './TooltipContent.svelte';