matterviz 0.3.1 → 0.3.3

package/dist/trajectory/Trajectory.svelte

@@ -1,636 +1,840 @@
-<script lang="ts">import { normalize_show_controls } from '../controls';
-import EmptyState from '../EmptyState.svelte';
-import Spinner from '../feedback/Spinner.svelte';
-import Icon from '../Icon.svelte';
-import { handle_url_drop, load_from_url } from '../io';
-import { format_num, trajectory_property_config } from '../labels';
-import { toggle_fullscreen } from '../layout';
-import { Histogram, ScatterPlot } from '../plot';
-import { toggle_series_visibility } from '../plot/utils/series-visibility';
-import { DEFAULTS } from '../settings';
-import Structure from '../structure/Structure.svelte';
-import { scaleLinear } from 'd3-scale';
-import { untrack } from 'svelte';
-import { tooltip } from 'svelte-multiselect/attachments';
-import { full_data_extractor } from './extract';
-import { TrajectoryError, TrajectoryExportPane, TrajectoryInfoPane } from './index';
-import { create_frame_loader, get_unsupported_format_message, MAX_BIN_FILE_SIZE, MAX_TEXT_FILE_SIZE, parse_trajectory_async, } from './parse';
-import { generate_axis_labels, generate_plot_series, generate_streaming_plot_series, should_hide_plot, } from './plotting';
-let { trajectory = $bindable(), data_url, current_step_idx = $bindable(0), data_extractor = full_data_extractor, allow_file_drop = true, layout = `auto`, structure_props = {}, scatter_props = {}, histogram_props = {}, spinner_props = {}, trajectory_controls, error_snippet, show_controls, fullscreen_toggle = DEFAULTS.trajectory.fullscreen_toggle, auto_play = false, display_mode = $bindable(`structure+scatter`), step_labels = 5, visible_properties = $bindable(), ELEM_PROPERTY_LABELS, on_play, on_pause, on_step_change, on_end, on_loop, on_frame_rate_change, on_display_mode_change, on_fullscreen_change, on_file_load, on_error, fps_range = DEFAULTS.trajectory.fps_range, fps = $bindable(5), loading_options = {}, atom_type_mapping, plot_skimming = true, ...rest } = $props();
-let dragover = $state(false);
-let loading = $state(false);
-let error_msg = $state(null);
-let is_playing = $state(false);
-let play_interval = $state(undefined);
-// Ensure fps is within the allowed range
-$effect(() => {
-    if (fps < fps_range[0]) {
-        fps = fps_range[0];
+<script lang="ts">
+  import type { ShowControlsProp } from '../controls'
+  import { normalize_show_controls } from '../controls'
+  import type { ElementSymbol } from '../element'
+  import EmptyState from '../EmptyState.svelte'
+  import Spinner from '../feedback/Spinner.svelte'
+  import Icon from '../Icon.svelte'
+  import { handle_url_drop, load_from_url } from '../io'
+  import { format_num, trajectory_property_config } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import { toggle_fullscreen } from '../layout'
+  import type { ControlsConfig, DataSeries, Orientation, Point } from '../plot'
+  import { Histogram, ScatterPlot } from '../plot'
+  import { toggle_series_visibility } from '../plot/utils/series-visibility'
+  import { DEFAULTS } from '../settings'
+  import Structure from '../structure/Structure.svelte'
+  import { scaleLinear } from 'd3-scale'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { full_data_extractor } from './extract'
+  import type {
+    ParseProgress,
+    TrajectoryDataExtractor,
+    TrajectoryFrame,
+    TrajectoryType,
+    TrajHandlerData,
+  } from './index'
+  import { TrajectoryError, TrajectoryExportPane, TrajectoryInfoPane } from './index'
+  import type { AtomTypeMapping, LoadingOptions } from './parse'
+  import {
+    create_frame_loader,
+    get_unsupported_format_message,
+    MAX_BIN_FILE_SIZE,
+    MAX_TEXT_FILE_SIZE,
+    parse_trajectory_async,
+  } from './parse'
+  import {
+    generate_axis_labels,
+    generate_plot_series,
+    generate_streaming_plot_series,
+    should_hide_plot,
+  } from './plotting'
+
+  type EventHandlers = {
+    on_play?: (data: TrajHandlerData) => void
+    on_pause?: (data: TrajHandlerData) => void
+    on_step_change?: (data: TrajHandlerData) => void
+    on_end?: (data: TrajHandlerData) => void
+    on_loop?: (data: TrajHandlerData) => void
+    on_frame_rate_change?: (data: TrajHandlerData) => void
+    on_display_mode_change?: (data: TrajHandlerData) => void
+    on_fullscreen_change?: (data: TrajHandlerData) => void
+    on_file_load?: (data: TrajHandlerData) => void
+    on_error?: (data: TrajHandlerData) => void
+  }
+  type ControlsProps = {
+    trajectory: TrajectoryType
+    current_step_idx: number
+    total_frames: number
+    on_step_change: (idx: number) => void
+  }
+
+  let {
+    trajectory = $bindable(),
+    data_url,
+    current_step_idx = $bindable(0),
+    data_extractor = full_data_extractor,
+    allow_file_drop = true,
+    layout = `auto`,
+    structure_props = {},
+    scatter_props = {},
+    histogram_props = {},
+    spinner_props = {},
+    trajectory_controls,
+    error_snippet,
+    show_controls,
+    fullscreen_toggle = DEFAULTS.trajectory.fullscreen_toggle,
+    auto_play = false,
+    display_mode = $bindable(`structure+scatter`),
+    step_labels = 5,
+    visible_properties = $bindable(),
+    ELEM_PROPERTY_LABELS,
+    on_play,
+    on_pause,
+    on_step_change,
+    on_end,
+    on_loop,
+    on_frame_rate_change,
+    on_display_mode_change,
+    on_fullscreen_change,
+    on_file_load,
+    on_error,
+    fps_range = DEFAULTS.trajectory.fps_range,
+    fps = $bindable(5),
+    loading_options = {},
+    atom_type_mapping,
+    plot_skimming = true,
+    ...rest
+  }: EventHandlers & HTMLAttributes<HTMLDivElement> & {
+    // trajectory data - can be provided directly or loaded from file
+    trajectory?: TrajectoryType
+    // URL to load trajectory from (alternative to providing trajectory directly)
+    data_url?: string
+    // current step index being displayed
+    current_step_idx?: number
+    // custom function to extract plot data from trajectory frames
+    data_extractor?: TrajectoryDataExtractor
+
+    // file drop handlers
+    allow_file_drop?: boolean
+    // layout configuration - 'auto' (default) adapts to element size, 'horizontal'/'vertical' forces layout
+    layout?: `auto` | Orientation
+    // structure viewer props (passed to Structure component)
+    structure_props?: ComponentProps<typeof Structure>
+    // plot props (passed to ScatterPlot component)
+    scatter_props?: ComponentProps<typeof ScatterPlot>
+    // histogram props (passed to Histogram component, excluding series which is handled separately)
+    histogram_props?: Omit<ComponentProps<typeof Histogram>, `series`>
+    // spinner props (passed to Spinner component)
+    spinner_props?: ComponentProps<typeof Spinner>
+    // custom snippets for additional UI elements
+    trajectory_controls?: Snippet<[ControlsProps]>
+    // Custom error snippet for advanced error handling
+    error_snippet?: Snippet<[{ error_msg: string; on_dismiss: () => void }]>
+    // Controls visibility configuration.
+    // - 'always': controls always visible
+    // - 'hover': controls visible on component hover (default)
+    // - 'never': controls never visible
+    // - object: { mode, hidden, style } for fine-grained control
+    // Control names: 'filename', 'nav', 'step', 'fps', 'info-pane', 'export-pane', 'view-mode', 'fullscreen'
+    show_controls?: ShowControlsProp
+    // show/hide the fullscreen button
+    fullscreen_toggle?: Snippet<[{ fullscreen: boolean }]> | boolean
+    // automatically start playing when trajectory data is loaded
+    auto_play?: boolean
+    // display mode: 'structure+scatter' (default), 'structure' (only structure), 'scatter' (only scatter), 'histogram' (only histogram), 'structure+histogram' (structure with histogram)
+    display_mode?:
+      | `structure+scatter`
+      | `structure`
+      | `scatter`
+      | `histogram`
+      | `structure+histogram`
+    // step labels configuration for slider
+    // - positive number: number of evenly spaced ticks
+    // - negative number: spacing between ticks (e.g. -10 = every 10th step)
+    // - array: exact step indices to label
+    // - undefined: no labels
+    step_labels?: number | number[]
+    // visible properties - bindable array of property keys currently shown in the plot
+    // - controls which trajectory properties are plotted (e.g. ['energy', 'volume', 'force_max'])
+    // - bindable: reflects current visibility state and can be used for external control
+    // - if not provided, uses default visible properties (energy, force_max, stress_frobenius)
+    // - if specified properties don't exist in data, falls back to automatic selection
+    visible_properties?: string[]
+    // custom labels for trajectory properties - maps property keys to display labels
+    // - e.g. {energy: 'Total Energy', volume: 'Cell Volume', force_max: 'Max Force'}
+    // - merged with built-in trajectory_property_config
+    ELEM_PROPERTY_LABELS?: Record<string, string>
+    // units configuration - developers can override these (deprecated - use ELEM_PROPERTY_LABELS instead)
+    units?: {
+      energy?: string
+      energy_per_atom?: string
+      force_max?: string
+      force_norm?: string
+      stress_max?: string
+      volume?: string
+      density?: string
+      temperature?: string
+      pressure?: string
+      length?: string
+      a?: string
+      b?: string
+      c?: string
+      [key: string]: string | undefined
     }
-    else if (fps > fps_range[1]) {
-        fps = fps_range[1];
+    fps_range?: [number, number] // allowed FPS range [min_fps, max_fps]
+    fps?: number // frame rate for playback
+    // Loading options for large files
+    loading_options?: LoadingOptions
+    // Map LAMMPS atom types to element symbols (e.g. {1: 'Na', 2: 'Cl'})
+    atom_type_mapping?: AtomTypeMapping
+    // Disable plot skimming (mouse over plot doesn't update structure/step slider)
+    plot_skimming?: boolean
+  } = $props()
+
+  let dragover = $state(false)
+  let loading = $state(false)
+  let error_msg = $state<string | null>(null)
+  let is_playing = $state(false)
+  let play_interval: ReturnType<typeof setInterval> | undefined = $state(undefined)
+
+  // Ensure fps is within the allowed range
+  $effect(() => {
+    if (fps < fps_range[0]) {
+      fps = fps_range[0]
+    } else if (fps > fps_range[1]) {
+      fps = fps_range[1]
     }
-});
-let current_filename = $state(undefined);
-let current_file_path = $state(null);
-let file_size = $state(undefined);
-let file_object = $state(null);
-let wrapper = $state(undefined);
-let info_pane_open = $state(false);
-let parsing_progress = $state(null);
-let element_size = $state({ width: 0, height: 0 });
-let filename_copied = $state(false);
-let orig_data = $state(null);
-let controls_config = $derived(normalize_show_controls(show_controls));
-// Reactive layout based on element aspect ratio (for auto mode)
-let actual_layout = $derived.by(() => {
-    if (layout === `horizontal` || layout === `vertical`)
-        return layout;
+  })
+  let current_filename = $state<string | undefined>(undefined)
+  let current_file_path = $state<string | null>(null)
+  let file_size = $state<number | undefined>(undefined)
+  let file_object = $state<File | null>(null)
+  let wrapper = $state<HTMLDivElement | undefined>(undefined)
+  let info_pane_open = $state(false)
+  let parsing_progress = $state<ParseProgress | null>(null)
+  let element_size = $state({ width: 0, height: 0 })
+  let filename_copied = $state(false)
+  let orig_data = $state<string | ArrayBuffer | null>(null)
+
+  let controls_config = $derived(normalize_show_controls(show_controls))
+
+  // Reactive layout based on element aspect ratio (for auto mode)
+  let actual_layout = $derived.by(() => {
+    if (layout === `horizontal` || layout === `vertical`) return layout
     // For auto layout, use element dimensions to determine orientation
     if (element_size.width > 0 && element_size.height > 0) {
-        return element_size.width > element_size.height ? `horizontal` : `vertical`;
+      return element_size.width > element_size.height ? `horizontal` : `vertical`
     }
-    return `horizontal`; // Fallback to horizontal if dimensions not available yet
-});
-// Get total frame count (supports both regular and indexed trajectories)
-let total_frames = $derived(trajectory?.total_frames || trajectory?.frames.length || 0);
-// Current frame - load on demand for indexed trajectories
-let current_frame = $state(null);
-// Auto-play when trajectory changes (handles both props and file loading)
-$effect(() => {
+    return `horizontal` // Fallback to horizontal if dimensions not available yet
+  })
+
+  // Get total frame count (supports both regular and indexed trajectories)
+  let total_frames = $derived(
+    trajectory?.total_frames || trajectory?.frames.length || 0,
+  )
+
+  // Current frame - load on demand for indexed trajectories
+  let current_frame = $state<TrajectoryFrame | null>(null)
+
+  // Auto-play when trajectory changes (handles both props and file loading)
+  $effect(() => {
     if (auto_play && trajectory && !untrack(() => is_playing) && total_frames > 1) {
-        start_playback();
+      start_playback()
     }
-});
-// Update current frame when step changes
-$effect(() => {
+  })
+
+  // Update current frame when step changes
+  $effect(() => {
     if (trajectory && current_step_idx >= 0 && current_step_idx < total_frames) {
-        if (trajectory.frame_loader) {
-            // Load frame on demand (works for both indexed files and external streaming)
-            load_frame_on_demand(current_step_idx);
-        }
-        else {
-            // Use in-memory frame for regular trajectories
-            current_frame = trajectory.frames[current_step_idx] || null;
-        }
-    }
-    else {
-        current_frame = null;
+      if (trajectory.frame_loader) {
+        // Load frame on demand (works for both indexed files and external streaming)
+        load_frame_on_demand(current_step_idx)
+      } else {
+        // Use in-memory frame for regular trajectories
+        current_frame = trajectory.frames[current_step_idx] || null
+      }
+    } else {
+      current_frame = null
     }
-});
-// Load frame on demand - works for both indexed files and external streaming
-async function load_frame_on_demand(frame_idx) {
-    if (!trajectory?.frame_loader)
-        return;
+  })
+
+  // Load frame on demand - works for both indexed files and external streaming
+  async function load_frame_on_demand(frame_idx: number) {
+    if (!trajectory?.frame_loader) return
+
     try {
-        const frame = await trajectory.frame_loader.load_frame(orig_data || ``, // Use original_data for indexed files, empty string for external streaming
-        frame_idx);
-        current_frame = frame;
-    }
-    catch (error) {
-        console.error(`Failed to load frame ${frame_idx}:`, error);
-        current_frame = null;
-        on_error?.({
-            error_msg: `Failed to load frame ${frame_idx}: ${error}`,
-            filename: current_filename,
-            file_size,
-            step_idx: frame_idx,
-            frame_count: total_frames,
-        });
+      const frame = await trajectory.frame_loader.load_frame(
+        orig_data || ``, // Use original_data for indexed files, empty string for external streaming
+        frame_idx,
+      )
+      current_frame = frame
+    } catch (error) {
+      console.error(`Failed to load frame ${frame_idx}:`, error)
+      current_frame = null
+      on_error?.({
+        error_msg: `Failed to load frame ${frame_idx}: ${error}`,
+        filename: current_filename,
+        file_size,
+        step_idx: frame_idx,
+        frame_count: total_frames,
+      })
     }
-}
-// Current frame structure for display
-let current_structure = $derived(current_frame?.structure);
-// Track hidden elements (persists across frame changes)
-let hidden_elements = $state(new Set());
-let step_label_positions = $derived.by(() => {
-    if (!step_labels || total_frames <= 1)
-        return [];
+  }
+
+  // Current frame structure for display
+  let current_structure = $derived(current_frame?.structure)
+
+  // Track hidden elements (persists across frame changes)
+  let hidden_elements = $state(new Set<ElementSymbol>())
+
+  let step_label_positions = $derived.by((): number[] => {
+    if (!step_labels || total_frames <= 1) return []
+
     if (Array.isArray(step_labels)) {
-        return step_labels.filter((idx) => idx >= 0 && idx < total_frames);
+      return step_labels.filter((idx) => idx >= 0 && idx < total_frames)
     }
+
     if (typeof step_labels === `number`) {
-        if (step_labels > 0) {
-            return scaleLinear().domain([0, total_frames - 1]).nice()
-                .ticks(Math.min(step_labels, total_frames))
-                .map((t) => Math.round(t))
-                .filter((t, i, arr) => t >= 0 && t < total_frames && arr.indexOf(t) === i);
-        }
-        if (step_labels < 0) {
-            const spacing = Math.abs(step_labels);
-            const positions = Array.from({ length: Math.ceil(total_frames / spacing) }, (_, idx) => idx * spacing);
-            return positions.at(-1) === total_frames - 1
-                ? positions
-                : [...positions, total_frames - 1];
-        }
+      if (step_labels > 0) {
+        return scaleLinear().domain([0, total_frames - 1]).nice()
+          .ticks(Math.min(step_labels, total_frames))
+          .map((t) => Math.round(t))
+          .filter((t, i, arr) => t >= 0 && t < total_frames && arr.indexOf(t) === i)
+      }
+      if (step_labels < 0) {
+        const spacing = Math.abs(step_labels)
+        const positions = Array.from(
+          { length: Math.ceil(total_frames / spacing) },
+          (_, idx) => idx * spacing,
+        )
+        return positions.at(-1) === total_frames - 1
+          ? positions
+          : [...positions, total_frames - 1]
+      }
     }
-    return [];
-});
-// Build extended property config with custom labels if provided
-let extended_config = $derived.by(() => {
-    if (!ELEM_PROPERTY_LABELS)
-        return trajectory_property_config;
-    const custom_config = {};
+    return []
+  })
+
+  // Build extended property config with custom labels if provided
+  let extended_config = $derived.by(() => {
+    if (!ELEM_PROPERTY_LABELS) return trajectory_property_config
+
+    const custom_config: Record<string, { label: string; unit: string }> = {}
     for (const [key, label] of Object.entries(ELEM_PROPERTY_LABELS)) {
-        const existing = trajectory_property_config[key] ||
-            trajectory_property_config[key.toLowerCase()];
-        custom_config[key] = { label, unit: existing?.unit || `` };
+      const existing = trajectory_property_config[key] ||
+        trajectory_property_config[key.toLowerCase()]
+      custom_config[key] = { label, unit: existing?.unit || `` }
     }
-    return { ...trajectory_property_config, ...custom_config };
-});
-// Plot series state (not derived so we can update on legend toggle)
-let plot_series = $state([]);
-// Regenerate plot series when trajectory, config, or visible_properties change
-$effect(() => {
-    const keys_set = visible_properties ? new Set(visible_properties) : undefined;
+    return { ...trajectory_property_config, ...custom_config }
+  })
+
+  // Plot series state (not derived so we can update on legend toggle)
+  let plot_series = $state<DataSeries[]>([])
+  // Prevent circular updates when syncing legend toggles back to bindable visible_properties.
+  let syncing_visible_properties = false
+
+  // Regenerate plot series when trajectory, config, or visible_properties change
+  $effect(() => {
+    if (syncing_visible_properties) return
+    const keys_set = visible_properties ? new Set(visible_properties) : undefined
+
     if (trajectory?.plot_metadata) {
-        plot_series = generate_streaming_plot_series(trajectory.plot_metadata, {
-            property_config: extended_config,
-            default_visible_properties: keys_set,
-        });
+      plot_series = generate_streaming_plot_series(trajectory.plot_metadata, {
+        property_config: extended_config,
+        default_visible_properties: keys_set,
+      })
+    } else if (trajectory) {
+      plot_series = generate_plot_series(trajectory, data_extractor, {
+        property_config: extended_config,
+        default_visible_properties: keys_set,
+      })
+    } else {
+      plot_series = []
     }
-    else if (trajectory) {
-        plot_series = generate_plot_series(trajectory, data_extractor, {
-            property_config: extended_config,
-            default_visible_properties: keys_set,
-        });
-    }
-    else {
-        plot_series = [];
-    }
-});
-// Update visible_properties binding when user toggles series visibility in legend
-$effect(() => {
-    if (!plot_series.length)
-        return;
+  })
+
+  // Update visible_properties binding when user toggles series visibility in legend
+  $effect(() => {
+    if (!plot_series.length) return
+
     // Extract property keys from visible series metadata
-    const visible_keys = plot_series
-        .filter((srs) => srs.visible)
-        // Get property key from series metadata (stored during series generation)
-        .map((srs) => {
-        const metadata = Array.isArray(srs.metadata) ? srs.metadata[0] : srs.metadata;
-        return metadata?.property_key;
+    const visible_keys = plot_series.flatMap((srs) => {
+      if (!srs.visible) return []
+      const metadata = Array.isArray(srs.metadata) ? srs.metadata[0] : srs.metadata
+      const key = metadata?.property_key
+      return key ? [key as string] : []
     })
-        .filter((key) => Boolean(key));
+
     // Only update if changed (use untrack to avoid circular dependency)
-    const current = untrack(() => visible_properties) || [];
+    const current = untrack(() => visible_properties) || []
     const has_changed = visible_keys.length !== current.length ||
-        !visible_keys.every((key, idx) => key === current[idx]);
+      !visible_keys.every((key, idx) => key === current[idx])
+
     if (has_changed) {
-        visible_properties = visible_keys;
+      syncing_visible_properties = true
+      visible_properties = visible_keys
+      queueMicrotask(() => (syncing_visible_properties = false))
     }
-});
-// Handler for legend toggle - updates plot_series state
-function handle_legend_toggle(series_idx) {
-    plot_series = toggle_series_visibility(plot_series, series_idx);
-}
-let x_axis = $derived({
+  })
+
+  // Handler for legend toggle - updates plot_series state
+  function handle_legend_toggle(series_idx: number) {
+    plot_series = toggle_series_visibility(plot_series, series_idx)
+  }
+
+  let x_axis = $derived({
     label: `Step`,
     format: `.3~s`,
     ticks: step_label_positions,
-});
-// Generate axis labels based on first visible series on each axis
-let y_axis_labels = $derived(generate_axis_labels(plot_series));
-let y_axis = $derived({
+  })
+  // Generate axis labels based on first visible series on each axis
+  let y_axis_labels = $derived(generate_axis_labels(plot_series))
+  let y_axis = $derived({
     label: y_axis_labels.y1,
     format: `.2~s`,
-    label_shift: { y: 20 },
-});
-let y2_axis = $derived({
+    label_shift: { y: 10 },
+  })
+  let y2_axis = $derived({
     label: y_axis_labels.y2,
     format: `.2~s`,
     label_shift: { y: 80 },
-});
-// hide plot if all plotted values are constant (no variation)
-let show_plot = $derived(display_mode !== `structure` && !should_hide_plot(trajectory, plot_series));
-// Determine what to show based on display mode
-let show_structure = $derived(![`scatter`, `histogram`].includes(display_mode));
-let actual_show_plot = $derived(display_mode !== `structure` && show_plot);
-// Check if there are any Y2 series to determine padding
-let has_y2_series = $derived(plot_series.some((srs) => srs.y_axis === `y2` && srs.visible));
-// Step navigation functions
-function next_step() {
+  })
+
+  // hide plot if all plotted values are constant (no variation)
+  let show_plot = $derived(
+    display_mode !== `structure` && !should_hide_plot(trajectory, plot_series),
+  )
+
+  // Determine what to show based on display mode
+  let show_structure = $derived(![`scatter`, `histogram`].includes(display_mode))
+  let actual_show_plot = $derived(display_mode !== `structure` && show_plot)
+
+  // Check if there are any Y2 series to determine padding
+  let has_y2_series = $derived(
+    plot_series.some((srs) => srs.y_axis === `y2` && srs.visible),
+  )
+
+  // Step navigation functions
+  function next_step() {
     if (current_step_idx < total_frames - 1) {
-        current_step_idx++;
-        // Streaming frame loading handled by reactive effect
-        if (trajectory) {
-            on_step_change?.({
-                trajectory,
-                step_idx: current_step_idx,
-                frame_count: total_frames,
-                frame: current_frame || undefined,
-            });
-        }
+      current_step_idx++
+      // Streaming frame loading handled by reactive effect
+      if (trajectory) {
+        on_step_change?.({
+          trajectory,
+          step_idx: current_step_idx,
+          frame_count: total_frames,
+          frame: current_frame || undefined,
+        })
+      }
     }
-}
-function prev_step() {
+  }
+
+  function prev_step() {
     if (current_step_idx > 0) {
-        current_step_idx--;
-        // Streaming frame loading handled by reactive effect
-        if (trajectory) {
-            on_step_change?.({
-                trajectory,
-                step_idx: current_step_idx,
-                frame_count: total_frames,
-                frame: current_frame || undefined,
-            });
-        }
+      current_step_idx--
+      // Streaming frame loading handled by reactive effect
+      if (trajectory) {
+        on_step_change?.({
+          trajectory,
+          step_idx: current_step_idx,
+          frame_count: total_frames,
+          frame: current_frame || undefined,
+        })
+      }
     }
-}
-function go_to_step(idx) {
+  }
+
+  function go_to_step(idx: number) {
     if (idx >= 0 && idx < total_frames) {
-        current_step_idx = idx;
-        // Note: streaming frame loading is handled by reactive effect
-        // Handle callbacks for both traditional and streaming modes
-        if (trajectory) {
-            on_step_change?.({
-                trajectory,
-                step_idx: current_step_idx,
-                frame_count: total_frames,
-                frame: current_frame || undefined,
-            });
-        }
+      current_step_idx = idx
+      // Note: streaming frame loading is handled by reactive effect
+      // Handle callbacks for both traditional and streaming modes
+      if (trajectory) {
+        on_step_change?.({
+          trajectory,
+          step_idx: current_step_idx,
+          frame_count: total_frames,
+          frame: current_frame || undefined,
+        })
+      }
     }
-}
-// Handle plot point clicks to jump to that step
-function handle_plot_change(data) {
+  }
+
+  // Handle plot point clicks to jump to that step
+  function handle_plot_change(data: (Point & { series: DataSeries }) | null) {
     if (data?.x !== undefined && typeof data.x === `number`) {
-        go_to_step(Math.round(data.x));
+      go_to_step(Math.round(data.x))
     }
-}
-// Helper function to read file content
-async function read_file_content(file) {
+  }
+
+  // Helper function to read file content
+  async function read_file_content(file: File): Promise<string | ArrayBuffer> {
     return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(reader.result);
-        reader.onerror = () => reject(new Error(`Failed to read file`));
-        // Read as text for text-based formats, binary for others
-        if (file.name.toLowerCase().match(/\.(xyz|json|extxyz|lammpstrj)$/)) {
-            reader.readAsText(file);
-        }
-        else
-            reader.readAsArrayBuffer(file);
-    });
-}
-// Play/pause functionality
-function toggle_play() {
-    if (is_playing)
-        pause_playback();
-    else
-        start_playback();
-}
-function start_playback() {
-    if (total_frames <= 1)
-        return;
-    is_playing = true;
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result as string | ArrayBuffer)
+      reader.onerror = () => reject(new Error(`Failed to read file`))
+
+      // Read as text for text-based formats, binary for others
+      if (file.name.toLowerCase().match(/\.(xyz|json|extxyz|lammpstrj)$/)) {
+        reader.readAsText(file)
+      } else reader.readAsArrayBuffer(file)
+    })
+  }
+
+  // Play/pause functionality
+  function toggle_play() {
+    if (is_playing) pause_playback()
+    else start_playback()
+  }
+  function start_playback() {
+    if (total_frames <= 1) return
+    is_playing = true
     if (trajectory) {
-        on_play?.({ trajectory, step_idx: current_step_idx, frame_count: total_frames });
+      on_play?.({ trajectory, step_idx: current_step_idx, frame_count: total_frames })
     }
-}
-function pause_playback() {
-    is_playing = false;
+  }
+  function pause_playback() {
+    is_playing = false
     if (trajectory) {
-        on_pause?.({
-            trajectory: trajectory,
-            step_idx: current_step_idx,
-            frame_count: total_frames,
-        });
+      on_pause?.({
+        trajectory: trajectory,
+        step_idx: current_step_idx,
+        frame_count: total_frames,
+      })
     }
-}
-$effect(() => {
+  }
+  $effect(() => { // Effect to manage playback interval
     // Only watch is_playing and frame_rate_ms, not play_interval itself
-    const playing = is_playing;
-    const rate_ms = 1000 / fps;
+    const playing = is_playing
+    const rate_ms = 1000 / fps
+
     if (playing) {
-        // Clear existing interval if it exists - use untrack to avoid circular dependency
-        const current_interval = untrack(() => play_interval);
-        if (current_interval !== undefined)
-            clearInterval(current_interval);
-        // Create new interval with current frame rate
-        play_interval = setInterval(() => {
-            if (current_step_idx >= total_frames - 1) {
-                if (trajectory) {
-                    on_end?.({
-                        trajectory,
-                        step_idx: current_step_idx,
-                        frame_count: total_frames,
-                        frame: current_frame || undefined,
-                    });
-                }
-                go_to_step(0); // Loop back to 1st step
-                if (trajectory) {
-                    on_loop?.({ trajectory, frame_count: total_frames });
-                }
-            }
-            else
-                next_step();
-        }, rate_ms);
-    }
-    else {
-        // Clear interval when not playing - use untrack to avoid circular dependency
-        const current_interval = untrack(() => play_interval);
-        if (current_interval !== undefined) {
-            clearInterval(current_interval);
-            play_interval = undefined;
-        }
+      // Clear existing interval if it exists - use untrack to avoid circular dependency
+      const current_interval = untrack(() => play_interval)
+      if (current_interval !== undefined) clearInterval(current_interval)
+
+      // Create new interval with current frame rate
+      play_interval = setInterval(() => {
+        if (current_step_idx >= total_frames - 1) {
+          if (trajectory) {
+            on_end?.({
+              trajectory,
+              step_idx: current_step_idx,
+              frame_count: total_frames,
+              frame: current_frame || undefined,
+            })
+          }
+          go_to_step(0) // Loop back to 1st step
+          if (trajectory) {
+            on_loop?.({ trajectory, frame_count: total_frames })
+          }
+        } else next_step()
+      }, rate_ms)
+    } else {
+      // Clear interval when not playing - use untrack to avoid circular dependency
+      const current_interval = untrack(() => play_interval)
+      if (current_interval !== undefined) {
+        clearInterval(current_interval)
+        play_interval = undefined
+      }
     }
-});
-// Cleanup interval on component destroy
-$effect(() => () => {
-    if (play_interval !== undefined)
-        clearInterval(play_interval);
-});
-// Handle internal file format drops
-async function handle_internal_file_drop(internal_data) {
+  })
+
+  // Cleanup interval on component destroy
+  $effect(() => () => {
+    if (play_interval !== undefined) clearInterval(play_interval)
+  })
+
+  // Handle internal file format drops
+  async function handle_internal_file_drop(internal_data: string): Promise<boolean> {
     try {
-        const file_info = JSON.parse(internal_data);
-        // Check if this is a binary file
-        if (file_info.is_binary) {
-            if (file_info.content instanceof ArrayBuffer) {
-                await load_trajectory_data(file_info.content, file_info.name);
-            }
-            else if (file_info.content_url) {
-                const response = await fetch(file_info.content_url);
-                const array_buffer = await response.arrayBuffer();
-                await load_trajectory_data(array_buffer, file_info.name);
-            }
-            else {
-                console.warn(`Binary file without ArrayBuffer or blob URL:`, file_info.name);
-            }
-        }
-        else {
-            await load_trajectory_data(file_info.content, file_info.name);
+      const file_info = JSON.parse(internal_data)
+
+      // Check if this is a binary file
+      if (file_info.is_binary) {
+        if (file_info.content instanceof ArrayBuffer) {
+          await load_trajectory_data(file_info.content, file_info.name)
+        } else if (file_info.content_url) {
+          const response = await fetch(file_info.content_url)
+          const array_buffer = await response.arrayBuffer()
+          await load_trajectory_data(array_buffer, file_info.name)
+        } else {
+          console.warn(
+            `Binary file without ArrayBuffer or blob URL:`,
+            file_info.name,
+          )
         }
-        return true;
-    }
-    catch (error) {
-        console.warn(`Failed to parse internal file data:`, error);
-        return false;
+      } else {
+        await load_trajectory_data(file_info.content, file_info.name)
+      }
+      return true
+    } catch (error) {
+      console.warn(`Failed to parse internal file data:`, error)
+      return false
     }
-}
-// Handle file drop events with optimized large file support
-async function handle_file_drop(event) {
-    event.preventDefault();
-    dragover = false;
-    if (!allow_file_drop)
-        return;
-    loading = true;
+  }
+
+  // Handle file drop events with optimized large file support
+  async function handle_file_drop(event: DragEvent) {
+    event.preventDefault()
+    dragover = false
+    if (!allow_file_drop) return
+
+    loading = true
+
     try {
-        // Check for our custom internal file format first
-        const internal_data = event.dataTransfer?.getData(`application/x-matterviz-file`);
-        if (internal_data) {
-            const handled = await handle_internal_file_drop(internal_data);
-            if (handled)
-                return;
-        }
-        // Handle URL-based files (e.g. from FilePicker)
-        const handled = await handle_url_drop(event, async (content, filename) => {
-            current_filename = filename;
-            file_size = content instanceof ArrayBuffer
-                ? content.byteLength
-                : new Blob([content]).size;
-            await load_trajectory_data(content, filename);
-        }).catch(() => false);
-        if (handled) {
-            return;
-        }
-        // Handle file system drops with optimized large file support
-        const file = event.dataTransfer?.files[0];
-        if (file) {
-            file_size = file.size;
-            current_file_path = file.webkitRelativePath || file.name;
-            file_object = file;
-            // Read file content directly
-            const content = await read_file_content(file);
-            await load_trajectory_data(content, file.name);
-        }
-        // Check for plain text data (fallback)
-        const text_data = event.dataTransfer?.getData(`text/plain`);
-        if (text_data) {
-            file_size = new Blob([text_data]).size; // Calculate byte size of text data
-            await load_trajectory_data(text_data, `trajectory.json`);
-            return;
-        }
-    }
-    catch (error) {
-        console.error(`File drop failed:`, error);
-        error_msg = `Failed to load file: ${error}`;
-        on_error?.({ error_msg, filename: current_filename, file_size });
-    }
-    finally {
-        loading = false;
+      // Check for our custom internal file format first
+      const internal_data = event.dataTransfer?.getData(
+        `application/x-matterviz-file`,
+      )
+      if (internal_data) {
+        const handled = await handle_internal_file_drop(internal_data)
+        if (handled) return
+      }
+
+      // Handle URL-based files (e.g. from FilePicker)
+      const handled = await handle_url_drop(event, async (content, filename) => {
+        current_filename = filename
+        file_size = content instanceof ArrayBuffer
+          ? content.byteLength
+          : new Blob([content]).size
+        await load_trajectory_data(content, filename)
+      }).catch(() => false)
+
+      if (handled) {
+        return
+      }
+
+      // Handle file system drops with optimized large file support
+      const file = event.dataTransfer?.files[0]
+      if (file) {
+        file_size = file.size
+        current_file_path = file.webkitRelativePath || file.name
+        file_object = file
+
+        // Read file content directly
+        const content = await read_file_content(file)
+        await load_trajectory_data(content, file.name)
+      }
+
+      // Check for plain text data (fallback)
+      const text_data = event.dataTransfer?.getData(`text/plain`)
+      if (text_data) {
+        file_size = new Blob([text_data]).size // Calculate byte size of text data
+        await load_trajectory_data(text_data, `trajectory.json`)
+        return
+      }
+    } catch (error) {
+      console.error(`File drop failed:`, error)
+      error_msg = `Failed to load file: ${error}`
+      on_error?.({ error_msg, filename: current_filename, file_size })
+    } finally {
+      loading = false
     }
-}
-$effect(() => {
+  }
+
+  $effect(() => { // Load trajectory from URL when data_url is provided
     if (data_url && !trajectory) {
-        loading = true;
-        error_msg = null;
-        load_from_url(data_url, async (content, filename) => {
-            current_filename = filename;
-            file_size = content instanceof ArrayBuffer
-                ? content.byteLength
-                : new Blob([content]).size;
-            await load_trajectory_data(content, filename);
-        })
-            .then(() => {
-            loading = false;
+      loading = true
+      error_msg = null
+
+      load_from_url(data_url, async (content, filename) => {
+        current_filename = filename
+        file_size = content instanceof ArrayBuffer
+          ? content.byteLength
+          : new Blob([content]).size
+        await load_trajectory_data(content, filename)
+      })
+        .then(() => {
+          loading = false
         })
-            .catch((err) => {
-            console.error(`Failed to load trajectory from URL:`, err);
-            error_msg = `Failed to load trajectory: ${err.message}`;
-            current_filename = undefined;
-            file_size = undefined;
-            loading = false;
-            on_error?.({
-                error_msg,
-                filename: current_filename || undefined,
-                file_size: file_size || undefined,
-            });
-        });
-    }
-});
-// Watch for frame rate changes
-$effect(() => {
-    on_frame_rate_change?.({ trajectory, fps: fps });
-});
-async function load_trajectory_data(data, filename) {
-    loading = true;
-    error_msg = null;
-    parsing_progress = null;
-    // Reset previous loading state
-    orig_data = null;
-    try {
-        const data_size = data instanceof ArrayBuffer ? data.byteLength : data.length;
-        // Determine loading strategy based on file size
-        const bin_file_threshold = loading_options.bin_file_threshold ??
-            MAX_BIN_FILE_SIZE;
-        const text_file_threshold = loading_options.text_file_threshold ??
-            MAX_TEXT_FILE_SIZE;
-        if ((data instanceof ArrayBuffer && data_size > bin_file_threshold) ||
-            (typeof data === `string` && data_size > text_file_threshold)) { // Large files: Use indexed loading
-            await load_with_indexing(data, filename);
-        }
-        else {
-            // Small files: Use regular loading
-            const merged_options = { ...loading_options, atom_type_mapping };
-            trajectory = await parse_trajectory_async(data, filename, (progress) => {
-                parsing_progress = progress;
-            }, merged_options);
-        }
-        current_step_idx = 0;
-        current_filename = filename;
-        const file_size_bytes = data instanceof ArrayBuffer
-            ? data.byteLength
-            : new Blob([data]).size;
-        on_file_load?.({
-            trajectory,
-            frame_count: trajectory?.frames.length ?? 0,
-            total_atoms: trajectory?.frames[0]?.structure.sites.length ?? 0,
-            filename,
-            file_size: file_size_bytes,
-        });
-    }
-    catch (err) {
-        const unsupported_message = get_unsupported_format_message(filename, typeof data === `string` ? data : ``);
-        error_msg = unsupported_message || `Failed to parse trajectory: ${err}`;
-        current_filename = undefined;
-        file_size = undefined;
-        on_error?.({
+        .catch((err: Error) => {
+          console.error(`Failed to load trajectory from URL:`, err)
+          error_msg = `Failed to load trajectory: ${err.message}`
+          current_filename = undefined
+          file_size = undefined
+          loading = false
+          on_error?.({
             error_msg,
             filename: current_filename || undefined,
             file_size: file_size || undefined,
-        });
-    }
-    finally {
-        parsing_progress = null;
-        loading = false;
+          })
+        })
     }
-}
-// Load using indexed parsing for large files
-async function load_with_indexing(data, filename) {
-    try { // Use indexed parsing for efficient large file handling
-        const merged_options = {
-            use_indexing: true,
-            ...loading_options,
-            atom_type_mapping,
-        };
+  })
+
+  // Watch for frame rate changes
+  $effect(() => {
+    on_frame_rate_change?.({ trajectory, fps: fps })
+  })
+
+  async function load_trajectory_data(data: string | ArrayBuffer, filename: string) {
+    loading = true
+    error_msg = null
+    parsing_progress = null
+
+    // Reset previous loading state
+    orig_data = null
+
+    try {
+      const data_size = data instanceof ArrayBuffer ? data.byteLength : data.length
+
+      // Determine loading strategy based on file size
+      const bin_file_threshold = loading_options.bin_file_threshold ??
+        MAX_BIN_FILE_SIZE
+      const text_file_threshold = loading_options.text_file_threshold ??
+        MAX_TEXT_FILE_SIZE
+      if (
+        (data instanceof ArrayBuffer && data_size > bin_file_threshold) ||
+        (typeof data === `string` && data_size > text_file_threshold)
+      ) { // Large files: Use indexed loading
+        await load_with_indexing(data, filename)
+      } else {
+        // Small files: Use regular loading
+        const merged_options = { ...loading_options, atom_type_mapping }
         trajectory = await parse_trajectory_async(data, filename, (progress) => {
-            parsing_progress = progress;
-        }, merged_options);
-        // Attach frame loader and original data directly to trajectory for unified access
-        orig_data = data;
-        trajectory.frame_loader = create_frame_loader(filename);
+          parsing_progress = progress
+        }, merged_options)
+      }
+
+      current_step_idx = 0
+      current_filename = filename
+
+      const file_size_bytes = data instanceof ArrayBuffer
+        ? data.byteLength
+        : new Blob([data]).size
+      on_file_load?.({ // emit file load event
+        trajectory,
+        frame_count: trajectory?.frames.length ?? 0,
+        total_atoms: trajectory?.frames[0]?.structure.sites.length ?? 0,
+        filename,
+        file_size: file_size_bytes,
+      })
+    } catch (err) {
+      const unsupported_message = get_unsupported_format_message(
+        filename,
+        typeof data === `string` ? data : ``,
+      )
+      error_msg = unsupported_message || `Failed to parse trajectory: ${err}`
+      current_filename = undefined
+      file_size = undefined
+
+      on_error?.({ // emit error event
+        error_msg,
+        filename: current_filename || undefined,
+        file_size: file_size || undefined,
+      })
+    } finally {
+      parsing_progress = null
+      loading = false
     }
-    catch (error) {
-        console.error(`Indexed loading failed:`, error);
-        throw error;
+  }
+
+  // Load using indexed parsing for large files
+  async function load_with_indexing(data: string | ArrayBuffer, filename: string) {
+    try { // Use indexed parsing for efficient large file handling
+      const merged_options = {
+        use_indexing: true,
+        ...loading_options,
+        atom_type_mapping,
+      }
+      trajectory = await parse_trajectory_async(data, filename, (progress) => {
+        parsing_progress = progress
+      }, merged_options)
+
+      // Attach frame loader and original data directly to trajectory for unified access
+      orig_data = data
+      trajectory.frame_loader = create_frame_loader(filename)
+    } catch (error) {
+      console.error(`Indexed loading failed:`, error)
+      throw error
     }
-}
-// Get current view mode label
-let current_view_label = $derived.by(() => {
-    if (display_mode === `structure`)
-        return `Structure Only`;
-    if (display_mode === `scatter`)
-        return `Scatter Only`;
-    if (display_mode === `histogram`)
-        return `Histogram Only`;
-    if (display_mode === `structure+histogram`)
-        return `Structure + Histogram`;
-    if (display_mode === `structure+scatter`)
-        return `Structure + Scatter`;
-    throw new Error(`Unexpected display mode: ${display_mode}`);
-});
-let view_mode_dropdown_open = $state(false);
-// Handle click outside to close dropdowns
-function handle_click_outside(event) {
-    const target = event.target;
+  }
+
+  // Get current view mode label
+  let current_view_label = $derived.by(() => {
+    if (display_mode === `structure`) return `Structure Only`
+    if (display_mode === `scatter`) return `Scatter Only`
+    if (display_mode === `histogram`) return `Histogram Only`
+    if (display_mode === `structure+histogram`) return `Structure + Histogram`
+    if (display_mode === `structure+scatter`) return `Structure + Scatter`
+    throw new Error(`Unexpected display mode: ${display_mode}`)
+  })
+
+  let view_mode_dropdown_open = $state(false)
+
+  // Handle click outside to close dropdowns
+  function handle_click_outside(event: MouseEvent) {
+    const target = event.target as Element
     if (view_mode_dropdown_open) {
-        const dropdown_wrapper = target.closest(`.view-mode-dropdown-wrapper`);
-        // Don't close if clicking on dropdown wrapper (contains both button and menu)
-        if (!dropdown_wrapper)
-            view_mode_dropdown_open = false;
+      const dropdown_wrapper = target.closest(`.view-mode-dropdown-wrapper`)
+      // Don't close if clicking on dropdown wrapper (contains both button and menu)
+      if (!dropdown_wrapper) view_mode_dropdown_open = false
     }
-}
-// Handle keyboard shortcuts
-function onkeydown(event) {
-    if (!trajectory)
-        return;
+  }
+
+  // Handle keyboard shortcuts
+  function onkeydown(event: KeyboardEvent) {
+    if (!trajectory) return
+
     // Don't handle shortcuts if user is typing in an input field (but allow if it's our step input and not focused)
-    const target = event.target;
-    const is_step_input = target.classList.contains(`step-input`);
+    const target = event.target as HTMLElement
+    const is_step_input = target.classList.contains(`step-input`)
     const is_input_focused = target.tagName === `INPUT` ||
-        target.tagName === `TEXTAREA`;
+      target.tagName === `TEXTAREA`
+
     // Skip if typing in an input that's not our step input
-    if (is_input_focused && !is_step_input)
-        return;
+    if (is_input_focused && !is_step_input) return
+
     // If typing in step input, only handle certain navigation keys
     if (is_step_input && is_input_focused) {
-        // Allow normal typing, but handle special navigation keys
-        if ([`Escape`, `Enter`].includes(event.key))
-            target.blur(); // Remove focus from input
-        return;
+      // Allow normal typing, but handle special navigation keys
+      if ([`Escape`, `Enter`].includes(event.key)) target.blur() // Remove focus from input
+      return
     }
-    const is_cmd_or_ctrl = event.metaKey || event.ctrlKey;
+
+    const is_cmd_or_ctrl = event.metaKey || event.ctrlKey
+
     // Navigation shortcuts
-    if (event.key === ` `)
-        toggle_play();
+    if (event.key === ` `) toggle_play()
     else if (event.key === `ArrowLeft`) {
-        if (is_cmd_or_ctrl)
-            go_to_step(0);
-        else
-            prev_step();
-    }
-    else if (event.key === `ArrowRight`) {
-        if (is_cmd_or_ctrl)
-            go_to_step(total_frames - 1);
-        else
-            next_step();
-    }
-    else if (event.key === `Home`)
-        go_to_step(0);
-    else if (event.key === `End`)
-        go_to_step(total_frames - 1);
+      if (is_cmd_or_ctrl) go_to_step(0)
+      else prev_step()
+    } else if (event.key === `ArrowRight`) {
+      if (is_cmd_or_ctrl) go_to_step(total_frames - 1)
+      else next_step()
+    } else if (event.key === `Home`) go_to_step(0)
+    else if (event.key === `End`) go_to_step(total_frames - 1)
     else if (event.key === `j`) {
-        go_to_step(Math.max(0, current_step_idx - 10));
-    }
-    else if (event.key === `l`) {
-        go_to_step(Math.min(total_frames - 1, current_step_idx + 10));
-    }
-    else if (event.key === `PageUp`) {
-        go_to_step(Math.max(0, current_step_idx - 25));
-    }
-    else if (event.key === `PageDown`) {
-        go_to_step(Math.min(total_frames - 1, current_step_idx + 25));
+      go_to_step(Math.max(0, current_step_idx - 10))
+    } else if (event.key === `l`) {
+      go_to_step(Math.min(total_frames - 1, current_step_idx + 10))
+    } else if (event.key === `PageUp`) {
+      go_to_step(Math.max(0, current_step_idx - 25))
+    } else if (event.key === `PageDown`) {
+      go_to_step(Math.min(total_frames - 1, current_step_idx + 25))
     } // Interface shortcuts
-    else if (event.key === `f` && fullscreen_toggle)
-        toggle_fullscreen(wrapper);
+    else if (event.key === `f` && fullscreen_toggle) toggle_fullscreen(wrapper)
     // 'i' key handled by the TrajectoryInfoPane's built-in toggle
     // Playback speed shortcuts (only when playing)
     else if ((event.key === `=` || event.key === `+`) && is_playing) {
-        fps = Math.min(fps_range[1], fps + 0.2);
-        on_frame_rate_change?.({ trajectory, fps: fps });
-    }
-    else if (event.key === `-` && is_playing) {
-        fps = Math.max(fps_range[0], fps - 0.2);
-        on_frame_rate_change?.({ trajectory, fps: fps });
+      fps = Math.min(fps_range[1], fps + 0.2)
+      on_frame_rate_change?.({ trajectory, fps: fps })
+    } else if (event.key === `-` && is_playing) {
+      fps = Math.max(fps_range[0], fps - 0.2)
+      on_frame_rate_change?.({ trajectory, fps: fps })
     } // System shortcuts
     else if (event.key === `Escape`) {
-        if (document.fullscreenElement)
-            document.exitFullscreen();
-        else if (view_mode_dropdown_open)
-            view_mode_dropdown_open = false;
-        // Escape key for info pane handled by DraggablePane
+      if (document.fullscreenElement) document.exitFullscreen()
+      else if (view_mode_dropdown_open) view_mode_dropdown_open = false
+      // Escape key for info pane handled by DraggablePane
     } // Number keys 0-9 - jump to percentage of trajectory
     else if (event.key >= `0` && event.key <= `9`) {
-        go_to_step(Math.floor((parseInt(event.key, 10) / 10) * (total_frames - 1)));
+      go_to_step(Math.floor((parseInt(event.key, 10) / 10) * (total_frames - 1)))
     }
-}
-// Separate state variables for each pane to match component prop types
-let structure_info_open = $state(false);
-let structure_controls_open = $state(false);
-let scatter_controls = $state({ open: false });
-let trajectory_export_open = $state(false);
-let fullscreen = $state(false);
+  }
+
+  // Separate state variables for each pane to match component prop types
+  let structure_info_open = $state(false)
+  let structure_controls_open = $state(false)
+  let scatter_controls = $state<ControlsConfig>({ open: false })
+  let trajectory_export_open = $state(false)
+  let fullscreen = $state(false)
 </script>
 
 <svelte:document
@@ -960,7 +1164,7 @@ let fullscreen = $state(false);
             controls={scatter_controls}
             current_x_value={current_step_idx}
             change={plot_skimming ? handle_plot_change : undefined}
-            padding={{ t: 20, b: 60, l: 100, r: has_y2_series ? 100 : 20 }}
+            padding={{ t: 20, b: 60, l: 52, r: has_y2_series ? 100 : 20 }}
             range_padding={0}
             style="height: 100%"
             {...scatter_props}
@@ -973,14 +1177,10 @@ let fullscreen = $state(false);
             }}
             class="plot {scatter_props.class ?? ``}"
           >
-            {#snippet tooltip({ x, y, metadata })}
-              {#if metadata?.series_label}
-                Step: {Math.round(x)}<br />
-                {@html metadata.series_label}: {typeof y === `number` ? format_num(y) : y}
-              {:else}
-                Step: {Math.round(x)}<br />
-                Value: {typeof y === `number` ? format_num(y) : y}
-              {/if}
+            {#snippet tooltip({ x, y, metadata, label })}
+              {@const formatted_y = typeof y === `number` ? format_num(y) : y}
+              Step: {Math.round(x)}<br />
+              {@html sanitize_html(metadata?.series_label || label || `Value`)}: {formatted_y}
             {/snippet}
           </ScatterPlot>
         {:else if display_mode === `histogram` || display_mode === `structure+histogram`}
@@ -1004,9 +1204,9 @@ let fullscreen = $state(false);
             --ctrl-btn-top="6ex"
           >
             {#snippet tooltip({ value, count, property })}
+              {#if property}<div><strong>{property}</strong></div>{/if}
               <div>Value: {format_num(value)}</div>
               <div>Count: {count}</div>
-              <div>{property}</div>
             {/snippet}
           </Histogram>
         {/if}
@@ -1049,61 +1249,56 @@ let fullscreen = $state(false);
     contain: layout;
     z-index: var(--traj-z-index, 1);
     container-type: size; /* enable cqh for panes if explicit height is set */
-  }
-  .trajectory :global(.plot) {
-    background: var(--surface-bg);
-  }
-  .trajectory.active {
-    z-index: 2; /* needed so info/control panes from an active viewer overlay those of the next (if there is one) */
-  }
-  .trajectory.active .trajectory-controls {
-    z-index: 5; /* needed so info/control panes from an active viewer its own plot when active, not sure why needed */
-  }
-  .trajectory:fullscreen {
-    height: 100vh !important;
-    width: 100vw !important;
-    border-radius: 0 !important;
-    background: var(--surface-bg);
-    overflow: hidden;
+    :global(.plot) {
+      background: var(--surface-bg);
+    }
+    &.active {
+      z-index: 2; /* needed so info/control panes from an active viewer overlay those of the next (if there is one) */
+      .trajectory-controls {
+        z-index: 5; /* needed so info/control panes from an active viewer its own plot when active, not sure why needed */
+      }
+    }
+    &:fullscreen {
+      height: 100vh !important;
+      width: 100vw !important;
+      border-radius: 0 !important;
+      background: var(--surface-bg);
+      overflow: hidden;
+    }
+    &.horizontal .content-area {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
+    }
+    &.vertical .content-area {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+    }
+    /* Display mode specific layouts */
+    &:is(.horizontal, .vertical) .content-area:is(.show-structure-only, .show-plot-only) {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 1fr !important;
+    }
+    &.dragover {
+      background-color: var(--traj-dragover-bg, var(--dragover-bg));
+      border: var(--traj-dragover-border, var(--dragover-border));
+    }
+    /* Mode: hover - controls visible on component hover */
+    &:hover .trajectory-controls.hover-visible,
+    &:focus-within .trajectory-controls.hover-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
   /* Content area - grid container for equal sizing */
   .content-area {
     display: grid;
     flex: 1;
     min-height: 0; /* important for tall structure viewers not to overflow */
-  }
-  .trajectory.horizontal .content-area {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
-  }
-  .trajectory.vertical .content-area {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-  }
-  /* When plot is hidden, structure takes full space */
-  .content-area.hide-plot {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  /* When structure is hidden, plot takes full space */
-  .content-area.hide-structure {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  /* Display mode specific layouts */
-  .trajectory.horizontal .content-area.show-structure-only,
-  .trajectory.vertical .content-area.show-structure-only {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  .trajectory.horizontal .content-area.show-plot-only,
-  .trajectory.vertical .content-area.show-plot-only {
-    grid-template-columns: 1fr !important;
-    grid-template-rows: 1fr !important;
-  }
-  .trajectory.dragover {
-    background-color: var(--traj-dragover-bg, var(--dragover-bg));
-    border: var(--traj-dragover-border, var(--dragover-border));
+    /* When plot or structure is hidden, the other takes full space */
+    &:is(.hide-plot, .hide-structure) {
+      grid-template-columns: 1fr !important;
+      grid-template-rows: 1fr !important;
+    }
   }
   .trajectory-controls {
     display: flex;
@@ -1117,27 +1312,29 @@ let fullscreen = $state(false);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
-  }
-  /* Mode: always - controls always visible */
-  .trajectory-controls.always-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: hover - controls visible on component hover */
-  .trajectory:hover .trajectory-controls.hover-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  /* Mode: never - stays hidden (default state, no additional CSS needed) */
-  .trajectory-controls:focus-within {
-    z-index: var(--traj-controls-z-index, 999999999);
-  }
-  .trajectory-controls button {
-    background: var(--btn-bg);
-    font-size: clamp(0.8rem, 2cqw, 1rem);
-  }
-  .trajectory-controls button:hover:not(:disabled) {
-    background: var(--btn-bg-hover);
+    /* Mode: always - controls always visible */
+    &.always-visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    /* Mode: never - stays hidden (default state, no additional CSS needed) */
+    &:focus-within {
+      z-index: var(--traj-controls-z-index, 999999999);
+    }
+    button {
+      background: var(--btn-bg);
+      font-size: clamp(0.8rem, 2cqw, 1rem);
+      &:hover:not(:disabled) {
+        background: var(--btn-bg-hover);
+      }
+    }
+    input[type='number'] {
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
   .nav-section {
     display: flex;
@@ -1210,68 +1407,73 @@ let fullscreen = $state(false);
   .fullscreen-button {
     background: transparent !important;
     padding: 0;
-  }
-  .fullscreen-button:hover:not(:disabled) {
-    background: var(--border-color);
+    &:hover:not(:disabled) {
+      background: var(--border-color);
+    }
   }
   .info-section {
     display: flex;
     align-items: center;
-    gap: clamp(6pt, 1cqw, 1.5ex);
+    gap: clamp(3pt, 0.6cqw, 1ex);
     position: relative;
   }
+  .info-section :global(:is(.trajectory-info-toggle, .trajectory-export-toggle)) {
+    font-size: clamp(1rem, 2.2cqw, 1.1rem);
+  }
   .play-button {
     min-width: clamp(32px, 4cqw, 36px);
-  }
-  .play-button:hover:not(:disabled) {
-    background: var(--traj-play-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.2)));
-  }
-  .play-button.playing {
-    background: var(--traj-pause-btn-bg, var(--btn-bg, rgba(0, 0, 0, 0.1)));
-  }
-  .play-button.playing:hover:not(:disabled) {
-    background: var(--traj-pause-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.1)));
+    &:hover:not(:disabled) {
+      background: var(--traj-play-btn-bg-hover, var(--btn-bg-hover, rgba(0, 0, 0, 0.2)));
+    }
+    &.playing {
+      background: var(--traj-pause-btn-bg, var(--btn-bg, rgba(0, 0, 0, 0.1)));
+      &:hover:not(:disabled) {
+        background: var(
+          --traj-pause-btn-bg-hover,
+          var(--btn-bg-hover, rgba(0, 0, 0, 0.1))
+        );
+      }
+    }
   }
   :global(.trajectory-empty-state) {
     padding: 2rem;
     border-radius: var(--border-radius, 3pt);
     background: var(--dropzone-bg);
+    :where(p, ul) {
+      color: var(--text-color-muted);
+    }
+    :where(ul, li, strong) {
+      max-width: var(--trajectory-empty-state-max-width, 500px);
+      margin-inline: auto;
+    }
   }
-  :global(.trajectory-empty-state) :where(p, ul) {
-    color: var(--text-color-muted);
-  }
-  :global(.trajectory-empty-state) :where(ul, li, strong) {
-    max-width: var(--trajectory-empty-state-max-width, 500px);
-    margin-inline: auto;
-  }
-  button:hover:not(:disabled) {
-    background: var(--border-color);
-  }
-  button:disabled {
-    background: var(--btn-disabled-bg);
-    color: var(--text-color-muted);
-    cursor: not-allowed;
-  }
-  .trajectory-controls input[type='number']::-webkit-outer-spin-button,
-  .trajectory-controls input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  button {
+    &:hover:not(:disabled) {
+      background: var(--border-color);
+    }
+    &:disabled {
+      background: var(--btn-disabled-bg);
+      color: var(--text-color-muted);
+      cursor: not-allowed;
+    }
   }
   /* Responsive design */
   @media (orientation: portrait) {
-    /* Fallback class for browsers without :has() support */
-    .trajectory.show-both-views {
-      min-height: calc(var(--min-height) * 2);
-    }
-    /* Modern browsers: use :has() for same effect */
-    @supports selector(:has(.content-area)) {
-      .trajectory:has(.content-area.show-both:not(.hide-plot):not(.hide-structure)) {
+    .trajectory {
+      /* Fallback class for browsers without :has() support */
+      &.show-both-views {
         min-height: calc(var(--min-height) * 2);
       }
-    }
-    .trajectory .content-area.show-both:not(.hide-plot):not(.hide-structure) {
-      grid-template-columns: 1fr !important;
-      grid-template-rows: 1fr 1fr !important;
+      /* Modern browsers: use :has() for same effect */
+      @supports selector(:has(.content-area)) {
+        &:has(.content-area.show-both:not(.hide-plot):not(.hide-structure)) {
+          min-height: calc(var(--min-height) * 2);
+        }
+      }
+      .content-area.show-both:not(.hide-plot):not(.hide-structure) {
+        grid-template-columns: 1fr !important;
+        grid-template-rows: 1fr 1fr !important;
+      }
     }
   }
   .view-mode-dropdown-wrapper {
@@ -1297,19 +1499,19 @@ let fullscreen = $state(false);
     border-radius: 0;
     text-align: left;
     transition: background-color 0.15s ease;
-  }
-  .view-mode-option:first-child {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-  }
-  .view-mode-option.selected {
-    color: var(--accent-color);
-  }
-  .view-mode-option span {
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1;
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+    &.selected {
+      color: var(--accent-color);
+    }
+    span {
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+    }
   }
 </style>