matterviz 0.1.13 → 0.1.14

package/dist/FilePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { tooltip } from 'svelte-multiselect';
-let { files, active_files = [], show_category_filters = false, on_drag_start, on_drag_end, type_mapper, file_type_colors = {
+let { files = [], active_files = [], show_category_filters = false, on_drag_start, on_drag_end, type_mapper, file_type_colors = {
     cif: `rgba(100, 149, 237, 0.8)`,
     xyz: `rgba(50, 205, 50, 0.8)`,
     extxyz: `rgba(50, 205, 50, 0.8)`,

package/dist/FilePicker.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FileInfo } from './';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
-    files: FileInfo[];
+    files?: FileInfo[];
     active_files?: string[];
     show_category_filters?: boolean;
     on_drag_start?: (file: FileInfo, event: DragEvent) => void;

package/dist/bands/Bands.svelte

@@ -1,55 +1,49 @@
 <script lang="ts">import * as helpers from './helpers';
 import { plot_colors } from '../colors';
 import ScatterPlot from '../plot/ScatterPlot.svelte';
-let { band_structs, line_kwargs = {}, path_mode = `strict`, band_type = undefined, show_legend = true, x_axis = {}, y_axis = {}, ...rest } = $props();
+import { SvelteMap } from 'svelte/reactivity';
+let { band_structs, line_kwargs = {}, path_mode = `strict`, band_type = undefined, show_legend = true, x_axis = {}, y_axis = {}, x_positions = $bindable(undefined), reference_frequency = null, ...rest } = $props();
 // Helper function to get line styling for a band
 function get_line_style(color, is_acoustic, mode_type, frequencies, band_idx) {
-    let stroke = color;
-    let stroke_width = is_acoustic ? 1.5 : 1;
+    const defaults = { stroke: color, stroke_width: is_acoustic ? 1.5 : 1 };
     if (typeof line_kwargs === `function`) {
         const custom = line_kwargs(frequencies, band_idx);
         return {
-            stroke: custom.stroke ?? stroke,
-            stroke_width: custom.stroke_width ?? stroke_width,
+            stroke: custom.stroke ?? defaults.stroke,
+            stroke_width: custom.stroke_width ?? defaults.stroke_width,
         };
     }
     if (typeof line_kwargs === `object` && line_kwargs !== null) {
-        const lk = line_kwargs;
-        // Check for mode-specific styling
-        if (`acoustic` in lk || `optical` in lk) {
-            const mode_kwargs = lk[mode_type];
-            if (mode_kwargs) {
-                stroke = mode_kwargs.stroke ?? stroke;
-                stroke_width = mode_kwargs.stroke_width ?? stroke_width;
-            }
-        }
-        else {
-            // Global styling for all bands
-            stroke = lk.stroke ?? stroke;
-            stroke_width = lk.stroke_width ?? stroke_width;
-        }
+        const mode_kwargs = line_kwargs[mode_type];
+        const source = (mode_kwargs ?? line_kwargs);
+        return {
+            stroke: source.stroke ?? defaults.stroke,
+            stroke_width: source.stroke_width ?? defaults.stroke_width,
+        };
     }
-    return { stroke, stroke_width };
+    return defaults;
 }
 // Normalize input to dict format
 let band_structs_dict = $derived.by(() => {
     if (!band_structs)
         return {};
-    const is_single_struct = `qpoints` in band_structs && `branches` in band_structs;
-    if (is_single_struct) {
-        const normalized = helpers.normalize_band_structure(band_structs);
-        return normalized ? { default: normalized } : {};
-    }
-    // Normalize each structure in the dict
+    const is_single = `qpoints` in band_structs && `branches` in band_structs;
     const result = {};
-    for (const [key, bs] of Object.entries(band_structs)) {
-        const normalized = helpers.normalize_band_structure(bs);
+    if (is_single) {
+        const normalized = helpers.normalize_band_structure(band_structs);
         if (normalized)
-            result[key] = normalized;
+            result.default = normalized;
+    }
+    else {
+        for (const [key, bs] of Object.entries(band_structs)) {
+            const normalized = helpers.normalize_band_structure(bs);
+            if (normalized)
+                result[key] = normalized;
+        }
     }
     return result;
 });
-let detected_band_type = $derived.by(() => band_type ?? `phonon`);
+let detected_band_type = $derived(band_type ?? `phonon`);
 // Determine which segments to plot based on path_mode
 let segments_to_plot = $derived.by(() => {
     const all_segments = {};
@@ -79,13 +73,14 @@ let segments_to_plot = $derived.by(() => {
     return new Set(Object.keys(all_segments));
 });
 // Map segments to x-axis positions
-let x_positions = $derived.by(() => {
+$effect(() => {
     const positions = {};
     let current_x = 0;
     // Preserve physical path order using the first available structure
     const canonical = Object.values(band_structs_dict)[0];
     const ordered_segments = helpers.get_ordered_segments(canonical, segments_to_plot);
-    for (const segment_key of ordered_segments) {
+    for (let seg_idx = 0; seg_idx < ordered_segments.length; seg_idx++) {
+        const segment_key = ordered_segments[seg_idx];
         if (positions[segment_key])
             continue;
         const [start_label, end_label] = segment_key.split(`_`);
@@ -97,15 +92,23 @@ let x_positions = $derived.by(() => {
                 return branch_start === start_label && branch_end === end_label;
             });
             if (matching_branch) {
-                const segment_len = bs.distance[matching_branch.end_index] -
-                    bs.distance[matching_branch.start_index];
-                positions[segment_key] = [current_x, current_x + segment_len];
-                current_x += segment_len;
+                // Check if this is a discontinuity: consecutive indices mean no path between points
+                const is_discontinuity = matching_branch.end_index - matching_branch.start_index === 1;
+                if (is_discontinuity) {
+                    // Place at same x position as current, no advancement
+                    positions[segment_key] = [current_x, current_x];
+                }
+                else {
+                    const segment_len = bs.distance[matching_branch.end_index] -
+                        bs.distance[matching_branch.start_index];
+                    positions[segment_key] = [current_x, current_x + segment_len];
+                    current_x += segment_len;
+                }
                 break;
             }
         }
     }
-    return positions;
+    x_positions = positions;
 });
 // Convert band structures to scatter plot series
 let series_data = $derived.by(() => {
@@ -124,14 +127,18 @@ let series_data = $derived.by(() => {
             const segment_key = helpers.get_segment_key(start_label, end_label);
             if (!segments_to_plot.has(segment_key))
                 continue;
-            const [x_start, x_end] = x_positions[segment_key] || [0, 1];
+            // Skip discontinuous segments (consecutive labeled points)
+            const is_discontinuity = branch.end_index - branch.start_index === 1;
+            if (is_discontinuity)
+                continue;
+            const [x_start, x_end] = x_positions?.[segment_key] || [0, 1];
             // Scale distances for this segment
             const segment_distances = bs.distance.slice(start_idx, end_idx);
             const dist_min = segment_distances[0];
             const dist_range = segment_distances[segment_distances.length - 1] - dist_min;
             const scaled_distances = dist_range === 0
                 ? segment_distances.map(() => (x_start + x_end) / 2)
-                : segment_distances.map((d) => x_start + ((d - dist_min) / dist_range) * (x_end - x_start));
+                : segment_distances.map((dist) => x_start + ((dist - dist_min) / dist_range) * (x_end - x_start));
             // Create series for each band
             for (let band_idx = 0; band_idx < bs.nb_bands; band_idx++) {
                 const frequencies = bs.bands[band_idx].slice(start_idx, end_idx);
@@ -145,6 +152,7 @@ let series_data = $derived.by(() => {
                     markers: `line`,
                     label: structure_label,
                     line_style,
+                    metadata: { band_idx },
                 });
             }
         }
@@ -153,31 +161,62 @@ let series_data = $derived.by(() => {
 });
 // Get x-axis tick positions with custom labels for symmetry points
 let x_axis_ticks = $derived.by(() => {
-    const tick_labels = {};
-    const sorted_positions = Object.entries(x_positions).sort(([, [a]], [, [b]]) => a - b);
-    for (const [segment_key, [x_start, x_end]] of sorted_positions) {
-        const [start_label, end_label] = segment_key.split(`_`);
-        // Add start label if not already present
-        if (!(x_start in tick_labels)) {
-            const pretty_start = start_label !== `null`
-                ? helpers.pretty_sym_point(start_label)
-                : ``;
-            if (pretty_start)
-                tick_labels[x_start] = pretty_start;
-        }
-        // Add end label
-        const pretty_end = end_label !== `null`
-            ? helpers.pretty_sym_point(end_label)
+    const tick_map = new SvelteMap();
+    Object.entries(x_positions ?? {})
+        .sort(([, [a]], [, [b]]) => a - b)
+        .forEach(([segment_key, [x_start, x_end]]) => {
+        const [start_lbl, end_lbl] = segment_key.split(`_`);
+        const pretty_start = start_lbl !== `null`
+            ? helpers.pretty_sym_point(start_lbl)
             : ``;
-        if (pretty_end)
-            tick_labels[x_end] = pretty_end;
-    }
-    return tick_labels;
+        const pretty_end = end_lbl !== `null` ? helpers.pretty_sym_point(end_lbl) : ``;
+        // Check if this is a discontinuity (zero-length segment)
+        const is_discontinuity = Math.abs(x_end - x_start) < 1e-6;
+        if (is_discontinuity && pretty_start && pretty_end) {
+            // Combine labels at discontinuity points
+            if (!tick_map.has(x_start))
+                tick_map.set(x_start, []);
+            const labels = tick_map.get(x_start);
+            if (!labels.includes(pretty_start))
+                labels.push(pretty_start);
+            if (!labels.includes(pretty_end))
+                labels.push(pretty_end);
+        }
+        else {
+            // Normal segment with distinct start/end
+            if (pretty_start) {
+                if (!tick_map.has(x_start))
+                    tick_map.set(x_start, []);
+                const labels = tick_map.get(x_start);
+                if (!labels.includes(pretty_start))
+                    labels.push(pretty_start);
+            }
+            if (pretty_end) {
+                if (!tick_map.has(x_end))
+                    tick_map.set(x_end, []);
+                const labels = tick_map.get(x_end);
+                if (!labels.includes(pretty_end))
+                    labels.push(pretty_end);
+            }
+        }
+    });
+    // Merge labels at same position with pipe separator
+    return Object.fromEntries(Array.from(tick_map.entries()).map(([pos, labels]) => [
+        pos,
+        labels.join(` | `),
+    ]));
 });
 let x_range = $derived.by(() => {
-    const all_x = Object.values(x_positions).flat().sort();
-    return [all_x.at(0) ?? 0, all_x.at(-1) ?? 1];
+    const flat = Object.values(x_positions ?? {}).flat();
+    return [flat[0] ?? 0, flat.at(-1) ?? 1];
+});
+let final_y_axis = $derived({
+    label: detected_band_type === `phonon` ? `Frequency (THz)` : `Energy (eV)`,
+    format: `.2f`,
+    label_shift: { y: 15 },
+    ...y_axis,
 });
+let display = $state({ x_grid: false, y_grid: true, y_zero_line: true });
 </script>
 
 <ScatterPlot
@@ -186,22 +225,35 @@ let x_range = $derived.by(() => {
     label: `Wave Vector`,
     ticks: Object.keys(x_axis_ticks).length > 0 ? x_axis_ticks : undefined,
     format: ``,
-    range: x_range, // Explicitly set range to disable padding
+    range: x_range,
     ...x_axis,
   }}
-  y_axis={{
-    label: detected_band_type === `phonon` ? `Frequency (THz)` : `Energy (eV)`,
-    format: `.2f`,
-    ...y_axis,
-  }}
-  display={{ x_grid: false, y_grid: true, y_zero_line: true }}
+  y_axis={final_y_axis}
+  bind:display
   legend={show_legend && Object.keys(band_structs_dict).length > 1 ? {} : null}
+  hover_config={{ threshold_px: 50 }}
   {...rest}
 >
-  {#snippet user_content({ height, x_scale_fn, pad })}
-    <!-- Vertical lines at high-symmetry points -->
-    {@const tick_positions = Object.keys(x_axis_ticks).map(Number).sort((a, b) => a - b)}
-    {#each tick_positions as x_pos (x_pos)}
+  {#snippet tooltip({ x, y_formatted, label, metadata })}
+    {@const y_label_full = final_y_axis.label ?? ``}
+    {@const [, y_label, y_unit] = y_label_full.match(/^(.+?)\s*\(([^)]+)\)$/) ??
+      [, y_label_full, ``]}
+    {@const segment = Object.entries(x_positions ?? {}).find(([, [start, end]]) =>
+      x >= start && x <= end
+    )}
+    {@const path = segment?.[0].split(`_`).map((lbl) =>
+      lbl !== `null` ? helpers.pretty_sym_point(lbl) : ``
+    ).filter(Boolean).join(` → `) || null}
+    {@const band_idx = metadata?.band_idx}
+    {@const num_structs = Object.keys(band_structs_dict).length}
+    {#if num_structs > 1 && label}<strong>{label}</strong><br />{/if}
+    {y_label || `Value`}: {y_formatted}{y_unit ? ` ${y_unit}` : ``}<br />
+    {#if path}Path: {path}<br />{/if}
+    {#if typeof band_idx === `number`}Band: {band_idx + 1}{/if}
+  {/snippet}
+
+  {#snippet user_content({ height, x_scale_fn, y_scale_fn, pad })}
+    {#each Object.keys(x_axis_ticks).map(Number) as x_pos (x_pos)}
       <line
         x1={x_scale_fn(x_pos)}
         x2={x_scale_fn(x_pos)}
@@ -212,5 +264,19 @@ let x_range = $derived.by(() => {
         opacity="var(--bands-symmetry-line-opacity, 0.5)"
       />
     {/each}
+    {#if reference_frequency !== null}
+      {@const y_pos = y_scale_fn(reference_frequency)}
+      {@const x_end = x_scale_fn(Object.values(x_positions ?? {}).flat().at(-1) ?? 1)}
+      <line
+        x1={pad.l}
+        x2={x_end}
+        y1={y_pos}
+        y2={y_pos}
+        stroke="var(--bands-reference-line-color, light-dark(#d48860, #c47850))"
+        stroke-width="var(--bands-reference-line-width, 1)"
+        stroke-dasharray="var(--bands-reference-line-dash, 4,3)"
+        opacity="var(--bands-reference-line-opacity, 0.5)"
+      />
+    {/if}
   {/snippet}
 </ScatterPlot>

package/dist/bands/Bands.svelte.d.ts

@@ -10,7 +10,9 @@ type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
     path_mode?: PathMode;
     band_type?: BandStructureType;
     show_legend?: boolean;
+    x_positions?: Record<string, [number, number]>;
+    reference_frequency?: number | null;
 };
-declare const Bands: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Bands: import("svelte").Component<$$ComponentProps, {}, "x_positions">;
 type Bands = ReturnType<typeof Bands>;
 export default Bands;

package/dist/bands/BandsAndDos.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">import Bands from './Bands.svelte';
 import Dos from './Dos.svelte';
-let { band_structs, doses, bands_props = {}, dos_props = {}, shared_y_axis = true, ...rest } = $props();
+let { band_structs, doses, bands_props = {}, dos_props = {}, shared_y_axis = true, children, ...rest } = $props();
 // Shared y-axis configuration - use single object when shared_y_axis is true
 let shared_y_axis_obj = $state({});
 let bands_y_axis = $derived(shared_y_axis ? shared_y_axis_obj : {});
 let dos_y_axis = $derived(shared_y_axis ? shared_y_axis_obj : {});
-let grid_style = $derived(`display: grid; grid-template-columns: 1fr 200px; gap: 0; ${rest.style ?? ``}`);
+// Track hovered frequency from DOS to show reference line in Bands
+let hovered_frequency = $state(null);
 </script>
 
-<div {...rest} class="bands-and-dos {rest.class ?? ``}" style={grid_style}>
+<div
+  {...rest}
+  class="bands-and-dos {rest.class ?? ``}"
+  style={`display: grid; grid-template-columns: 1fr 200px; gap: 0;` + (rest.style ?? ``)}
+>
+  {@render children?.({ hovered_frequency })}
   <Bands
     {band_structs}
     y_axis={bands_y_axis}
+    reference_frequency={hovered_frequency}
     {...bands_props}
     padding={{ r: 15 }}
   />
@@ -20,6 +27,8 @@ let grid_style = $derived(`display: grid; grid-template-columns: 1fr 200px; gap:
     {doses}
     orientation="horizontal"
     y_axis={{ ...dos_y_axis, label: `` }}
+    bind:hovered_frequency
+    reference_frequency={hovered_frequency}
     padding={{ l: 15 }}
     {...dos_props}
   />

package/dist/bands/BandsAndDos.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentProps } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import Bands from './Bands.svelte';
 import Dos from './Dos.svelte';
-import type { BaseBandStructure, Dos as DosData } from './types';
+import type { BaseBandStructure, DosData, HoveredData } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     band_structs: BaseBandStructure | Record<string, BaseBandStructure>;
     doses: DosData | Record<string, DosData>;
@@ -10,6 +10,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     dos_props?: Partial<ComponentProps<typeof Dos>>;
     shared_y_axis?: boolean;
     class?: string;
+    children?: Snippet<[HoveredData]>;
 };
 declare const BandsAndDos: import("svelte").Component<$$ComponentProps, {}, "">;
 type BandsAndDos = ReturnType<typeof BandsAndDos>;

package/dist/bands/BrillouinBandsDos.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">import { BrillouinZone, reciprocal_lattice } from '../brillouin';
+import Bands from './Bands.svelte';
+import Dos from './Dos.svelte';
+import * as helpers from './helpers';
+let { structure, band_structs, doses, bands_props = {}, dos_props = {}, bz_props = {}, children, ...rest } = $props();
+let first_band_struct = $derived(`qpoints` in band_structs
+    ? band_structs
+    : band_structs[Object.keys(band_structs)[0]]);
+// Convert fractional k-point coordinates to Cartesian reciprocal space
+// using the structure's reciprocal lattice (consistent with BZ computation)
+let k_path_points = $derived.by(() => {
+    if (!first_band_struct?.qpoints || !structure?.lattice?.matrix)
+        return [];
+    const k_lattice = reciprocal_lattice(structure.lattice.matrix);
+    return helpers.extract_k_path_points(first_band_struct, k_lattice);
+});
+let hovered_band_point = $state(null);
+let bands_x_positions = $state({});
+let hovered_qpoint_index = $derived(hovered_band_point && first_band_struct &&
+    Object.keys(bands_x_positions).length > 0
+    ? helpers.find_qpoint_at_rescaled_x(first_band_struct, hovered_band_point.x, bands_x_positions)
+    : null);
+let hovered_k_point = $derived(hovered_qpoint_index !== null
+    ? k_path_points[hovered_qpoint_index]
+    : null);
+const [desktop_width, tablet_width] = [1200, 600];
+let clientWidth = $state(desktop_width);
+let is_desktop = $derived(clientWidth >= desktop_width);
+let is_mobile = $derived(clientWidth < tablet_width);
+let screen_class = $derived(clientWidth >= desktop_width
+    ? `desktop`
+    : clientWidth >= tablet_width
+        ? `tablet`
+        : `phone`);
+let y_axis_dos = $derived({
+    ...(is_desktop ? { label: `` } : {}),
+    ...dos_props.y_axis,
+});
+// Track hovered frequency from DOS to show reference line in Bands
+let hovered_frequency = $state(null);
+</script>
+
+<div
+  {...rest}
+  class="bands-dos-brillouin {screen_class} {rest.class ?? ``}"
+  bind:clientWidth
+>
+  {@render children?.({ hovered_frequency, hovered_band_point, hovered_qpoint_index })}
+  <Bands
+    style="grid-area: bands; min-width: 0; min-height: 0; overflow: hidden"
+    {band_structs}
+    padding={{ r: is_desktop ? 10 : 5, ...bands_props.padding }}
+    bind:x_positions={bands_x_positions}
+    reference_frequency={hovered_frequency}
+    on_point_hover={(event) => {
+      hovered_band_point = event?.point ?? null
+      bands_props.on_point_hover?.(event)
+    }}
+    {...bands_props}
+  />
+
+  <BrillouinZone
+    style="grid-area: bz; min-width: 0; min-height: 0; overflow: hidden; height: 100%"
+    {structure}
+    {k_path_points}
+    k_path_labels={first_band_struct?.qpoints?.flatMap((q, idx) =>
+      k_path_points[idx]
+        ? [{
+          position: k_path_points[idx],
+          label: q.label ? helpers.pretty_sym_point(q.label) : null,
+        }]
+        : []
+    ) ?? []}
+    {hovered_k_point}
+    {hovered_qpoint_index}
+    {...bz_props}
+  />
+
+  <Dos
+    style="grid-area: dos; min-width: 0; min-height: 0; overflow: hidden"
+    {doses}
+    orientation={is_desktop ? `horizontal` : `vertical`}
+    x_axis={{ ticks: 4 }}
+    y_axis={y_axis_dos}
+    bind:hovered_frequency
+    reference_frequency={hovered_frequency}
+    padding={{
+      l: is_desktop ? 20 : undefined,
+      r: is_mobile ? 0 : undefined,
+      ...dos_props.padding,
+    }}
+    {...dos_props}
+  />
+</div>
+
+<style>
+  .bands-dos-brillouin {
+    width: var(--bz-bands-dos-width, 100%);
+    height: var(--bz-bands-dos-height, 600px);
+    min-height: var(--bz-bands-dos-min-height, 400px);
+    display: grid;
+    gap: var(--bz-bands-dos-gap, 1em);
+  }
+  .bands-dos-brillouin.desktop {
+    /* layout: BZ | bands | DOS side by side */
+    grid-template-columns: 30% 55% 15%;
+    grid-template-areas: 'bz bands dos';
+  }
+  .bands-dos-brillouin.tablet {
+    /* layout: bands on top, BZ and DOS below */
+    grid-template-columns: 40% 60%;
+    grid-template-rows: 50% 50%;
+    grid-template-areas:
+      'bands bands'
+      'bz dos';
+  }
+  .bands-dos-brillouin.phone {
+    /* layout: all stacked vertically */
+    grid-template-columns: 1fr;
+    grid-template-areas: 'bands' 'dos' 'bz';
+  }
+</style>

package/dist/bands/BrillouinBandsDos.svelte.d.ts

@@ -0,0 +1,19 @@
+import { BrillouinZone } from '../brillouin';
+import type { PymatgenStructure } from '../structure';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import Bands from './Bands.svelte';
+import Dos from './Dos.svelte';
+import type { BaseBandStructure, DosData, HoveredData } from './types';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    structure: PymatgenStructure;
+    band_structs: BaseBandStructure | Record<string, BaseBandStructure>;
+    doses: DosData | Record<string, DosData>;
+    bands_props?: Partial<ComponentProps<typeof Bands>>;
+    dos_props?: Partial<ComponentProps<typeof Dos>>;
+    bz_props?: Partial<ComponentProps<typeof BrillouinZone>>;
+    children?: Snippet<[HoveredData]>;
+};
+declare const BrillouinBandsDos: import("svelte").Component<$$ComponentProps, {}, "">;
+type BrillouinBandsDos = ReturnType<typeof BrillouinBandsDos>;
+export default BrillouinBandsDos;