matterviz 0.4.1 → 0.4.3

package/dist/trajectory/Trajectory.svelte.d.ts

@@ -61,6 +61,6 @@ type $$ComponentProps = EventHandlers & HTMLAttributes<HTMLDivElement> & {
     wrapper?: HTMLDivElement;
     fullscreen?: boolean;
 };
-declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "trajectory" | "fullscreen" | "wrapper" | "hovered" | "controls_open" | "fps" | "info_pane_open" | "display_mode" | "current_step_idx" | "visible_properties">;
+declare const Trajectory: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "wrapper" | "hovered" | "controls_open" | "trajectory" | "fps" | "info_pane_open" | "display_mode" | "current_step_idx" | "visible_properties">;
 type Trajectory = ReturnType<typeof Trajectory>;
 export default Trajectory;

package/dist/trajectory/TrajectoryError.svelte

@@ -3,21 +3,24 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  let { error_msg, on_dismiss, error_snippet, ...rest }:
-    & HTMLAttributes<HTMLDivElement>
-    & {
-      error_msg: string
-      on_dismiss: () => void
-      // Custom error snippet for advanced error handling
-      error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
-    } = $props()
+  let {
+    error_msg,
+    on_dismiss,
+    error_snippet,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    error_msg: string
+    on_dismiss: () => void
+    // Custom error snippet for advanced error handling
+    error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
+  } = $props()
 </script>
 
 <div {...rest}>
   {#if error_snippet}
     {@render error_snippet({ error_msg, on_dismiss })}
   {:else if error_msg.startsWith(`<`)}
-    <!-- Render HTML content for unsupported format messages -->
+    <!-- Render HTML error messages (sanitized) -->
     {@html sanitize_html(error_msg)}
     <button onclick={on_dismiss}>Dismiss</button>
   {:else}
@@ -60,69 +63,4 @@
   div button:hover {
     background: var(--error-btn-bg-hover);
   }
-  /* Styles for unsupported format messages */
-  div :global(.unsupported-format) {
-    text-align: left;
-    max-width: 90%;
-    max-height: 70vh;
-    margin: 0 auto;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  div :global(.unsupported-format h4) {
-    color: var(--error-color);
-    margin: 0 0 1rem 0;
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  div :global(.unsupported-format h5) {
-    margin: 0.75rem 0 0.25rem 0;
-    font-size: 0.9rem;
-    font-weight: 600;
-  }
-  div :global(.unsupported-format p) {
-    margin: 0.25rem 0;
-    text-align: left;
-    font-size: 0.85rem;
-  }
-  div :global(.unsupported-format ul) {
-    text-align: left;
-    margin: 0.5rem 0;
-    padding-left: 1.5rem;
-  }
-  div :global(.unsupported-format li) {
-    margin: 0.25rem 0;
-  }
-  div :global(.unsupported-format .code-options) {
-    margin: 1rem 0 0 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 1.5rem;
-  }
-  div :global(.unsupported-format .code-options > div) {
-    margin: 0;
-  }
-  div :global(.unsupported-format .code-options strong) {
-    display: block;
-    margin-bottom: 0.25rem;
-    font-size: 0.85rem;
-    font-weight: 600;
-  }
-  div :global(.unsupported-format pre) {
-    padding: 0.5rem;
-    margin: 0;
-    overflow-x: auto;
-    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
-    font-size: 0.75rem;
-    line-height: 1.2;
-    max-height: 150px;
-    overflow-y: auto;
-  }
-  div :global(.unsupported-format p code) {
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
-  }
 </style>

package/dist/trajectory/TrajectoryExportPane.svelte

@@ -9,7 +9,6 @@
   import ExportPane from '../io/ExportPane.svelte'
   import SettingsSection from '../layout/SettingsSection.svelte'
   import type { TrajectoryType } from './'
-  import type { ComponentProps } from 'svelte'
   import { tooltip } from 'svelte-multiselect/attachments'
   import { to_error } from '../utils'
 
@@ -62,7 +61,7 @@
     if (!canvas) return 0
     const pixels = canvas.width * canvas.height * resolution_multiplier ** 2
     const bitrate = estimate_video_bitrate(pixels, video_fps)
-    return (bitrate * export_frame_count / video_fps) / 8 / 1024 / 1024
+    return (bitrate * export_frame_count) / video_fps / 8 / 1024 / 1024
   })
 
   // Initialize end_frame when trajectory changes
@@ -84,9 +83,7 @@
     }
   })
 
-  let export_frame_count = $derived(
-    end_frame >= start_frame ? end_frame - start_frame + 1 : 0,
-  )
+  let export_frame_count = $derived(end_frame >= start_frame ? end_frame - start_frame + 1 : 0)
 
   async function handle_video_export(format: `webm` | `mp4` = `webm`) {
     export_error = null
@@ -96,8 +93,8 @@
       export_error = !trajectory
         ? `No trajectory`
         : !canvas
-        ? `Canvas not ready`
-        : `Invalid frame range`
+          ? `Canvas not ready`
+          : `Invalid frame range`
       return
     }
 
@@ -172,13 +169,7 @@
       <label>
         Frame Rate (FPS)
         <input type="number" min={10} max={60} bind:value={video_fps} />
-        <input
-          type="range"
-          min={10}
-          max={60}
-          bind:value={video_fps}
-          style="accent-color: var(--accent-color)"
-        />
+        <input type="range" min={10} max={60} bind:value={video_fps} />
       </label>
 
       <span class="field-label">
@@ -192,7 +183,9 @@
               class:active={resolution_multiplier === multiplier}
               onclick={() => (resolution_multiplier = multiplier)}
               {@attach tooltip({
-                content: canvas ? `${multiplier}x (${width_px}×${height_px})` : `${multiplier}x`,
+                content: canvas
+                  ? `${multiplier}x (${width_px}×${height_px})`
+                  : `${multiplier}x`,
               })}
             >
               {multiplier}x
@@ -214,7 +207,6 @@
           min={0}
           max={Math.max(0, total_frames_available - 1)}
           bind:value={start_frame}
-          style="accent-color: var(--accent-color)"
         />
       </label>
 
@@ -231,7 +223,6 @@
           min={start_frame}
           max={Math.max(0, total_frames_available - 1)}
           bind:value={end_frame}
-          style="accent-color: var(--accent-color)"
         />
       </label>
     </SettingsSection>
@@ -243,13 +234,7 @@
     {/if}
 
     <div class="export-buttons">
-      {#each [
-        { label: `WebM`, format: `webm`, hint: `Export as WebM video` },
-        { label: `MP4`, format: `mp4`, hint: `WebM + ffmpeg command` },
-      ] as const as
-        { label, format, hint }
-        (format)
-      }
+      {#each [{ label: `WebM`, format: `webm`, hint: `Export as WebM video` }, { label: `MP4`, format: `mp4`, hint: `WebM + ffmpeg command` }] as const as { label, format, hint } (format)}
         <div style="display: flex; align-items: center; gap: 4pt">
           {label}
           <button
@@ -267,15 +252,11 @@
     </div>
 
     <div class="export-info">
-      {(export_frame_count / video_fps).toFixed(1)}s ({export_frame_count} frames: {
-        start_frame
-      }–{end_frame})
+      {(export_frame_count / video_fps).toFixed(1)}s ({export_frame_count} frames: {start_frame}–{end_frame})
       {#if file_size_mb > 0}
-        • ~{
-          file_size_mb < 1
+        • ~{file_size_mb < 1
           ? `${(file_size_mb * 1024).toFixed(0)} KB`
-          : `${file_size_mb.toFixed(1)} MB`
-        }
+          : `${file_size_mb.toFixed(1)} MB`}
       {/if}
     </div>
 
@@ -292,7 +273,8 @@
     gap: 6pt;
     white-space: nowrap;
   }
-  .warning, .error-message {
+  .warning,
+  .error-message {
     padding: 1ex;
     border-radius: var(--traj-border-radius, var(--border-radius, 3pt));
     font-size: 0.9em;

package/dist/trajectory/TrajectoryInfoPane.svelte

@@ -2,17 +2,18 @@
   import type { PaneProps, PaneToggleProps } from '../overlays'
   import type { InfoItem } from '../layout'
   import InfoPaneCards from '../overlays/InfoPaneCards.svelte'
-  import { format_num } from '../labels'
+  import { format_bytes, format_num } from '../labels'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import { get_electro_neg_formula } from '../composition'
   import { SETTINGS_CONFIG } from '../settings'
   import type { AnyStructure } from '../structure'
   import type { ComponentProps } from 'svelte'
-  import type { TrajectoryType } from './index'
+  import type { TrajectoryFrame, TrajectoryType } from './index'
 
   let {
     trajectory,
     current_step_idx,
+    current_frame = null,
     current_filename,
     current_file_path,
     file_size,
@@ -24,6 +25,7 @@
   }: Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     trajectory: TrajectoryType
     current_step_idx: number
+    current_frame?: TrajectoryFrame | null
     current_filename?: string | null
     current_file_path?: string | null
     file_size?: number | null
@@ -34,11 +36,6 @@
   } = $props()
 
   // Helper functions
-  const format_size = (bytes: number) =>
-    bytes > 1024 * 1024
-      ? `${format_num(bytes / (1024 * 1024), `.2~f`)} MB`
-      : `${format_num(bytes / 1024, `.2~f`)} KB`
-
   const is_valid_number = (val: unknown): val is number =>
     typeof val === `number` && isFinite(val)
 
@@ -51,8 +48,7 @@
       return `${format_num(values[0], decimals)} ${unit}`.trim()
     }
     const [min, max] = [Math.min(...values), Math.max(...values)]
-    return `${format_num(min, decimals)} - ${format_num(max, decimals)} ${unit}`
-      .trim()
+    return `${format_num(min, decimals)} - ${format_num(max, decimals)} ${unit}`.trim()
   }
 
   const safe_item = (
@@ -60,7 +56,7 @@
     value: string | null,
     key?: string,
     tooltip?: string,
-  ): InfoItem | null => value ? { label, value, key, tooltip } : null
+  ): InfoItem | null => (value ? { label, value, key, tooltip } : null)
 
   // oxlint-disable-next-line eslint-plugin-unicorn/prefer-native-coercion-functions -- type predicate needed for narrowing
   const is_info_item = (item: unknown): item is InfoItem => Boolean(item)
@@ -79,204 +75,173 @@
       (!trajectory?.frames?.length && !trajectory?.total_frames) ||
       current_step_idx < 0 ||
       current_step_idx >= (trajectory.total_frames ?? trajectory.frames?.length ?? 0)
-    ) return []
+    )
+      return []
 
-    // For indexed trajectories, we might not have the current frame loaded
-    const current_frame = trajectory.frames?.[current_step_idx]
+    // For indexed trajectories, the resolved frame may live outside sparse frame arrays.
+    const displayed_frame = current_frame ?? trajectory.frames?.[current_step_idx]
     const total_frames = trajectory.total_frames ?? trajectory.frames?.length ?? 0
 
     const sections: { title: string; items: InfoItem[] }[] = []
+    // Append a section unless every item filtered out as falsy
+    const push_section = (title: string, items: unknown[]) => {
+      const valid_items = items.filter(is_info_item)
+      if (valid_items.length > 0) sections.push({ title, items: valid_items })
+    }
 
-    // File info section
-    const file_items = [
+    push_section(`File`, [
       current_filename &&
-      safe_item(
-        `Name`,
-        current_filename,
-        `file-name`,
-        current_file_path || undefined,
-      ),
-      file_size && file_size > 0 &&
-      safe_item(`File Size`, format_size(file_size), `file-size`),
+        safe_item(`Name`, current_filename, `file-name`, current_file_path || undefined),
+      file_size &&
+        file_size > 0 &&
+        safe_item(`File Size`, format_bytes(file_size), `file-size`),
       file_object?.lastModified &&
-      safe_item(
-        `Modified`,
-        new Date(file_object.lastModified).toLocaleString(),
-        `file-modified`,
-      ),
+        safe_item(
+          `Modified`,
+          new Date(file_object.lastModified).toLocaleString(),
+          `file-modified`,
+        ),
       trajectory.metadata?.source_format &&
-      safe_item(`Format`, String(trajectory.metadata.source_format), `file-format`),
-    ].filter(is_info_item)
+        safe_item(`Format`, String(trajectory.metadata.source_format), `file-format`),
+    ])
 
-    if (file_items.length > 0) {
-      sections.push({ title: `File`, items: file_items })
-    }
-
-    // Trajectory info section (always show this)
-    const traj_items = [
+    push_section(`Trajectory`, [
       safe_item(
         `Total Frames`,
-        `${format_num(total_frames, `.3~s`)} (current: ${
-          format_num(current_step_idx + 1, `.3~s`)
-        })`,
+        `${format_num(total_frames, `.3~s`)} (current: ${format_num(
+          current_step_idx + 1,
+          `.3~s`,
+        )})`,
         `total-frames`,
       ),
       trajectory.is_indexed &&
-      safe_item(
-        `Indexed`,
-        `Yes`,
-        `indexed-mode`,
-        SETTINGS_CONFIG.trajectory.use_indexing.description,
-      ),
+        safe_item(
+          `Indexed`,
+          `Yes`,
+          `indexed-mode`,
+          SETTINGS_CONFIG.trajectory.use_indexing.description,
+        ),
       trajectory.indexed_frames &&
-      safe_item(
-        `Index Points`,
-        `${trajectory.indexed_frames.length}`,
-        `index-points`,
-        `Number of frames indexed for fast seeking`,
-      ),
+        safe_item(
+          `Index Points`,
+          `${trajectory.indexed_frames.length}`,
+          `index-points`,
+          `Number of frames indexed for fast seeking`,
+        ),
       trajectory.plot_metadata &&
-      safe_item(
-        `Plot Metadata`,
-        `${trajectory.plot_metadata.length} frames`,
-        `plot-metadata`,
-        `Pre-extracted metadata for plotting`,
-      ),
-    ].filter(is_info_item)
-
-    if (traj_items.length > 0) {
-      sections.push({ title: `Trajectory`, items: traj_items })
-    }
+        safe_item(
+          `Plot Metadata`,
+          `${trajectory.plot_metadata.length} frames`,
+          `plot-metadata`,
+          `Pre-extracted metadata for plotting`,
+        ),
+    ])
 
     // Structure info section (only if we have the current frame)
-    if (current_frame?.structure?.sites) {
-      const { structure } = current_frame
+    if (displayed_frame?.structure?.sites) {
+      const { structure } = displayed_frame
       const lattice = `lattice` in structure ? structure.lattice : null
       const { volume, a, b, c, alpha, beta, gamma } = lattice || {}
       const formula = safe_formula(structure)
 
-      const structure_items = [
+      push_section(`Structure`, [
         safe_item(`Atoms`, `${structure.sites.length}`, `atoms`),
         formula && safe_item(`Formula`, String(formula), `formula`),
-        is_valid_number(volume) && volume > 0 &&
-        safe_item(`Volume`, `${format_num(volume, `.3~s`)} ų`, `volume`),
-        is_valid_number(volume) && volume > 0 && structure.sites.length > 0 &&
-        safe_item(
-          `Density`,
-          `${format_num(structure.sites.length / volume, `.4~s`)} atoms/ų`,
-          `density`,
-        ),
+        is_valid_number(volume) &&
+          volume > 0 &&
+          safe_item(`Volume`, `${format_num(volume, `.3~s`)} ų`, `volume`),
+        is_valid_number(volume) &&
+          volume > 0 &&
+          structure.sites.length > 0 &&
+          safe_item(
+            `Density`,
+            `${format_num(structure.sites.length / volume, `.3~s`)} atoms/ų`,
+            `density`,
+          ),
         [a, b, c].every(is_valid_number) &&
-        safe_item(
-          `Cell Lengths`,
-          `${format_num(a as number, `.3~f`)}, ${format_num(b as number, `.3~f`)}, ${
-            format_num(c as number, `.3~f`)
-          } Å`,
-          `cell-lengths`,
-        ),
+          safe_item(
+            `Cell Lengths`,
+            `${format_num(a as number, `.3~f`)}, ${format_num(b as number, `.3~f`)}, ${format_num(
+              c as number,
+              `.3~f`,
+            )} Å`,
+            `cell-lengths`,
+          ),
         [alpha, beta, gamma].every(is_valid_number) &&
-        safe_item(
-          `Cell Angles`,
-          `${format_num(alpha as number, `.2~f`)}°, ${
-            format_num(beta as number, `.2~f`)
-          }°, ${format_num(gamma as number, `.2~f`)}°`,
-          `cell-angles`,
-        ),
-      ].filter(is_info_item)
-
-      if (structure_items.length > 0) {
-        sections.push({ title: `Structure`, items: structure_items })
-      }
+          safe_item(
+            `Cell Angles`,
+            `${format_num(alpha as number, `.2~f`)}°, ${format_num(
+              beta as number,
+              `.2~f`,
+            )}°, ${format_num(gamma as number, `.2~f`)}°`,
+            `cell-angles`,
+          ),
+      ])
     } else if (trajectory.is_indexed) {
       // For indexed trajectories, show a note that frame data is loaded on demand
-      const structure_items = [
+      push_section(`Structure`, [
         safe_item(
           `Frame Loading`,
           `On-demand`,
           `frame-loading`,
           `Structure data loaded when frame is accessed`,
         ),
-      ].filter(is_info_item)
-
-      if (structure_items.length > 0) {
-        sections.push({ title: `Structure`, items: structure_items })
-      }
-    }
-
-    // Energy section (only for regular trajectories with multiple frames)
-    if (!trajectory.is_indexed && trajectory.frames.length > 1) {
-      const energies = extract_numeric_array(trajectory.frames, `energy`)
-      if (energies.length > 1) {
-        const current_energy = current_frame?.metadata?.energy
-        const energy_range = format_range(energies, `eV`, `.3~s`)
-
-        const energy_items = [
-          is_valid_number(current_energy) &&
-          safe_item(
-            `Current Energy`,
-            `${format_num(current_energy, `.3~s`)} eV`,
-            `energy-current`,
-          ),
-          energy_range && safe_item(`Energy Range`, energy_range, `energy-range`),
-        ].filter(is_info_item)
-
-        if (energy_items.length > 0) {
-          sections.push({ title: `Energy`, items: energy_items })
-        }
-      }
+      ])
     }
 
-    // Forces section (only for regular trajectories with multiple frames)
+    // Energy/Forces sections (only for regular trajectories with multiple frames)
     if (!trajectory.is_indexed && trajectory.frames.length > 1) {
-      const forces = extract_numeric_array(trajectory.frames, `force_max`)
-      if (forces.length > 1) {
-        const current_force = current_frame?.metadata?.force_max
-        const force_range = format_range(forces, `eV/Å`, `.3~s`)
-
-        const force_items = [
-          is_valid_number(current_force) &&
-          safe_item(
-            `Max Force`,
-            `${format_num(current_force, `.3~s`)} eV/Å`,
-            `force-current`,
-          ),
-          force_range && safe_item(`Force Range`, force_range, `force-range`),
-        ].filter(is_info_item)
-
-        if (force_items.length > 0) {
-          sections.push({ title: `Forces`, items: force_items })
-        }
+      const range_sections = [
+        {
+          title: `Energy`,
+          prop: `energy`,
+          unit: `eV`,
+          key: `energy`,
+          current_label: `Current Energy`,
+          range_label: `Energy Range`,
+        },
+        {
+          title: `Forces`,
+          prop: `force_max`,
+          unit: `eV/Å`,
+          key: `force`,
+          current_label: `Max Force`,
+          range_label: `Force Range`,
+        },
+      ] as const
+      for (const { title, prop, unit, key, current_label, range_label } of range_sections) {
+        const values = extract_numeric_array(trajectory.frames, prop)
+        if (values.length <= 1) continue
+        const current = displayed_frame?.metadata?.[prop]
+        push_section(title, [
+          is_valid_number(current) &&
+            safe_item(
+              current_label,
+              `${format_num(current, `.3~s`)} ${unit}`,
+              `${key}-current`,
+            ),
+          safe_item(range_label, format_range(values, unit, `.3~s`), `${key}-range`),
+        ])
       }
     }
 
     // Volume change section (only for regular trajectories)
-    if (
-      !trajectory.is_indexed && current_frame?.structure &&
-      trajectory.frames.length > 1
-    ) {
-      const lattice = `lattice` in current_frame.structure
-        ? current_frame.structure.lattice
-        : null
+    if (!trajectory.is_indexed && displayed_frame?.structure && trajectory.frames.length > 1) {
+      const lattice =
+        `lattice` in displayed_frame.structure ? displayed_frame.structure.lattice : null
       if (lattice) {
-        const volumes = trajectory.frames.map((
-          { structure },
-        ) => (`lattice` in structure && structure.lattice?.volume))
+        const volumes = trajectory.frames
+          .map(({ structure }) => `lattice` in structure && structure.lattice?.volume)
           .filter(is_valid_number)
           .filter((volume) => volume > 0)
 
         if (volumes.length > 1) {
-          const vol_change = (Math.max(...volumes) - Math.min(...volumes)) /
-            Math.min(...volumes)
+          const vol_change =
+            (Math.max(...volumes) - Math.min(...volumes)) / Math.min(...volumes)
           if (Math.abs(vol_change) > 0.1 && is_valid_number(vol_change)) {
-            const vol_items = [safe_item(
-              `Volume Change`,
-              `${format_num(vol_change, `.2~%`)}`,
-              `vol-change`,
-            )].filter(is_info_item)
-
-            if (vol_items.length > 0) {
-              sections.push({ title: `Volume`, items: vol_items })
-            }
+            push_section(`Volume`, [
+              safe_item(`Volume Change`, `${format_num(vol_change, `.2~%`)}`, `vol-change`),
+            ])
           }
         }
       }
@@ -284,9 +249,7 @@
     return sections
   })
 
-  let info_cards = $derived(
-    info_pane_data.map(({ title, items }) => ({ title, rows: items })),
-  )
+  let info_cards = $derived(info_pane_data.map(({ title, items }) => ({ title, rows: items })))
   let n_info_items = $derived(
     info_pane_data.reduce((count, { items }) => count + items.length, 0),
   )

package/dist/trajectory/TrajectoryInfoPane.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { PaneProps, PaneToggleProps } from '../overlays';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { ComponentProps } from 'svelte';
-import type { TrajectoryType } from './index';
+import type { TrajectoryFrame, TrajectoryType } from './index';
 type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     trajectory: TrajectoryType;
     current_step_idx: number;
+    current_frame?: TrajectoryFrame | null;
     current_filename?: string | null;
     current_file_path?: string | null;
     file_size?: number | null;