matterviz 0.1.0

package/dist/trajectory/Trajectory.svelte

@@ -0,0 +1,1084 @@
+<script lang="ts">import { Icon, Spinner, Structure } from '..';
+import { decompress_file } from '../io/decompress';
+import { format_num, trajectory_labels } from '../labels';
+import { ScatterPlot } from '../plot';
+import { scaleLinear } from 'd3-scale';
+import { untrack } from 'svelte';
+import { titles_as_tooltips } from 'svelte-zoo';
+import { full_data_extractor } from './extract';
+import { Sidebar, TrajectoryError } from './index';
+import { data_url_to_array_buffer, get_unsupported_format_message, load_trajectory_from_url, parse_trajectory_data, } from './parse';
+import { generate_plot_series, should_hide_plot } from './plotting';
+let { trajectory = $bindable(undefined), trajectory_url, current_step_idx = $bindable(0), data_extractor = full_data_extractor, allow_file_drop = true, on_file_drop = handle_trajectory_file_drop, layout = `horizontal`, structure_props = {}, plot_props = {}, spinner_props = {}, trajectory_controls, error_snippet, show_controls = true, show_fullscreen_button = true, display_mode = $bindable(`both`), property_labels = trajectory_labels, units = {
+    energy: `eV`,
+    energy_per_atom: `eV/atom`,
+    force_max: `eV/Å`,
+    force_norm: `eV/Å`,
+    stress_max: `GPa`,
+    volume: `ų`,
+    density: `g/cm³`,
+    temperature: `K`,
+    pressure: `GPa`,
+    length: `Å`,
+}, step_labels = 5, } = $props();
+let dragover = $state(false);
+let loading = $state(false);
+let error_message = $state(null);
+let is_playing = $state(false);
+let frame_rate_fps = $state(5);
+let play_interval = $state(undefined);
+let current_filename = $state(null);
+let current_file_path = $state(null);
+let file_size = $state(null);
+let file_object = $state(null);
+let wrapper = $state(undefined);
+let sidebar_open = $state(false);
+// Current frame structure for display
+let current_structure = $derived(trajectory && current_step_idx < trajectory.frames.length
+    ? trajectory.frames[current_step_idx]?.structure
+    : undefined);
+// Calculate step label positions using D3's pretty ticks for even distribution
+let step_label_positions = $derived.by(() => {
+    if (!trajectory || !step_labels)
+        return [];
+    const total_frames = trajectory.frames.length;
+    if (total_frames <= 1)
+        return [];
+    if (Array.isArray(step_labels)) {
+        // Exact positions provided as array
+        return step_labels.filter((idx) => idx >= 0 && idx < total_frames);
+    }
+    if (typeof step_labels === `number`) {
+        if (step_labels > 0) {
+            // Use D3's pretty ticks for even distribution
+            const scale = scaleLinear().domain([0, total_frames - 1]);
+            const ticks = scale.nice().ticks(Math.min(step_labels, total_frames));
+            // Round and filter to valid frame indices
+            return ticks
+                .map((t) => Math.round(t))
+                .filter((t) => t >= 0 && t < total_frames)
+                .filter((t, idx, arr) => arr.indexOf(t) === idx); // Remove duplicates
+        }
+        else if (step_labels < 0) {
+            // Negative number: spacing between ticks
+            const spacing = Math.abs(step_labels);
+            const positions = [];
+            for (let idx = 0; idx < total_frames; idx += spacing) {
+                positions.push(idx);
+            }
+            // Always include the last frame if it's not already included
+            if (positions[positions.length - 1] !== total_frames - 1) {
+                positions.push(total_frames - 1);
+            }
+            return positions;
+        }
+    }
+    return [];
+});
+// Generate plot data using extracted plotting utilities
+let plot_series = $derived.by(() => {
+    if (!trajectory)
+        return [];
+    // Filter out undefined values from units
+    const filtered_units = {};
+    for (const [key, value] of Object.entries(units)) {
+        if (value !== undefined) {
+            filtered_units[key] = value;
+        }
+    }
+    return generate_plot_series(trajectory, data_extractor, {
+        property_labels,
+        units: filtered_units,
+    });
+});
+// Check if all plotted values are constant (no variation) using extracted utility
+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(display_mode !== `plot`);
+let actual_show_plot = $derived(display_mode !== `structure` && show_plot);
+// Generate intelligent axis labels based on first series on each axis
+let y_axis_labels = $derived.by(() => {
+    if (plot_series.length === 0)
+        return { y1: `Value`, y2: `Value` };
+    const y1_series = plot_series.filter((s) => (s.y_axis ?? `y1`) === `y1`);
+    const y2_series = plot_series.filter((s) => s.y_axis === `y2`);
+    const get_axis_label = (series) => {
+        if (series.length === 0)
+            return `Value`;
+        // Use the first series label as the axis label
+        const first_series = series[0];
+        return first_series?.label || `Value`;
+    };
+    return {
+        y1: get_axis_label(y1_series),
+        y2: get_axis_label(y2_series),
+    };
+});
+// Check if there are any Y2 series to determine padding
+let has_y2_series = $derived(plot_series.some((s) => s.y_axis === `y2` && s.visible));
+// Handle file drop events
+async function handle_file_drop(event) {
+    event.preventDefault();
+    dragover = false;
+    if (!allow_file_drop)
+        return;
+    // Check for our custom internal file format first
+    const internal_data = event.dataTransfer?.getData(`application/x-matterviz-file`);
+    if (internal_data) {
+        try {
+            const file_info = JSON.parse(internal_data);
+            // Check if this is a binary file
+            if (file_info.is_binary) {
+                const array_buffer = data_url_to_array_buffer(file_info.content);
+                await handle_trajectory_binary_drop(array_buffer, file_info.name);
+            }
+            else {
+                await on_file_drop(file_info.content, file_info.name);
+            }
+            return;
+        }
+        catch (error) {
+            console.warn(`Failed to parse internal file data:`, error);
+            // Fall through to other methods
+        }
+    }
+    // Check for plain text data (fallback)
+    const text_data = event.dataTransfer?.getData(`text/plain`);
+    if (text_data) {
+        file_size = null; // Size not available for text drops
+        await on_file_drop(text_data, `trajectory.json`);
+        return;
+    }
+    // Handle actual file drops from file system
+    const file = event.dataTransfer?.files[0];
+    if (!file)
+        return;
+    loading = true;
+    file_size = file.size; // Capture file size
+    current_file_path = file.webkitRelativePath || file.name; // Capture full path if available
+    file_object = file;
+    try {
+        // Check if this is an HDF5 file (handle as binary)
+        if (file.name.toLowerCase().endsWith(`.h5`) ||
+            file.name.toLowerCase().endsWith(`.hdf5`)) {
+            const buffer = await file.arrayBuffer();
+            await handle_trajectory_binary_drop(buffer, file.name);
+            return;
+        }
+        // Check for known unsupported binary formats before trying to read
+        const unsupported_message = get_unsupported_format_message(file.name, ``);
+        if (unsupported_message) {
+            error_message = unsupported_message;
+            current_filename = null;
+            file_size = null;
+            return;
+        }
+        const { content, filename } = await decompress_file(file);
+        if (content)
+            await on_file_drop(content, filename);
+    }
+    catch (error) {
+        error_message = `Failed to read file: ${error}`;
+        current_filename = null;
+        file_size = null;
+        console.error(`File reading error:`, error);
+    }
+    finally {
+        loading = false;
+    }
+}
+// Step navigation functions
+function next_step() {
+    if (trajectory && current_step_idx < trajectory.frames.length - 1) {
+        current_step_idx++;
+    }
+}
+function prev_step() {
+    if (current_step_idx > 0) {
+        current_step_idx--;
+    }
+}
+function go_to_step(idx) {
+    if (trajectory && idx >= 0 && idx < trajectory.frames.length) {
+        current_step_idx = idx;
+    }
+}
+// Handle plot point clicks to jump to that step
+function handle_plot_change(data) {
+    if (data?.x !== undefined && typeof data.x === `number`) {
+        const step_idx = Math.round(data.x);
+        go_to_step(step_idx);
+    }
+}
+// Play/pause functionality
+function toggle_play() {
+    if (is_playing) {
+        pause_playback();
+    }
+    else {
+        start_playback();
+    }
+}
+function start_playback() {
+    if (!trajectory || trajectory.frames.length <= 1)
+        return;
+    is_playing = true;
+}
+function pause_playback() {
+    is_playing = false;
+}
+// Effect to manage playback interval
+$effect(() => {
+    // Only watch is_playing and frame_rate_ms, not play_interval itself
+    const playing = is_playing;
+    const rate_ms = 1000 / frame_rate_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 >= trajectory.frames.length - 1)
+                go_to_step(0); // Loop back to 1st step
+            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(() => {
+    return () => {
+        if (play_interval !== undefined)
+            clearInterval(play_interval);
+    };
+});
+// Load trajectory from URL when trajectory_url is provided
+$effect(() => {
+    if (trajectory_url && !trajectory) {
+        loading = true;
+        error_message = null;
+        load_trajectory_from_url(trajectory_url)
+            .then((loaded_trajectory) => {
+            trajectory = loaded_trajectory;
+            current_step_idx = 0;
+            // Extract filename from URL
+            current_filename = trajectory_url.split(`/`).pop() || trajectory_url;
+            file_size = null; // Size not available for URL loads
+            loading = false;
+        })
+            .catch((err) => {
+            console.error(`Failed to load trajectory from URL:`, err);
+            error_message = `Failed to load trajectory: ${err.message}`;
+            current_filename = null;
+            file_size = null;
+            loading = false;
+        });
+    }
+});
+async function handle_trajectory_file_drop(content, filename) {
+    loading = true;
+    error_message = null;
+    try {
+        // Check for unsupported formats first
+        const unsupported_message = get_unsupported_format_message(filename, content);
+        if (unsupported_message) {
+            error_message = unsupported_message;
+            current_filename = null;
+            file_size = null;
+            return;
+        }
+        // Use the new parser that can handle multiple formats including XDATCAR
+        trajectory = await parse_trajectory_data(content, filename);
+        current_step_idx = 0;
+        current_filename = filename;
+        // Note: file_size remains as set by the caller (could be null for text drops)
+    }
+    catch (err) {
+        // Check if this might be an unsupported format even if not detected initially
+        const unsupported_message = get_unsupported_format_message(filename, content);
+        if (unsupported_message) {
+            error_message = unsupported_message;
+        }
+        else {
+            error_message = `Failed to parse trajectory file: ${err}`;
+        }
+        current_filename = null;
+        file_size = null;
+        console.error(`Trajectory parsing error:`, err);
+    }
+    finally {
+        loading = false;
+    }
+}
+async function handle_trajectory_binary_drop(buffer, filename) {
+    loading = true;
+    error_message = null;
+    try {
+        // Parse binary data (e.g., HDF5 files)
+        trajectory = await parse_trajectory_data(buffer, filename);
+        current_step_idx = 0;
+        current_filename = filename;
+        // Note: file_size should already be set by the caller
+    }
+    catch (err) {
+        error_message = `Failed to parse binary trajectory file: ${err}`;
+        current_filename = null;
+        file_size = null;
+        console.error(`Binary trajectory parsing error:`, err);
+    }
+    finally {
+        loading = false;
+    }
+}
+// Fullscreen functionality
+function toggle_fullscreen() {
+    if (!document.fullscreenElement && wrapper) {
+        wrapper.requestFullscreen().catch(console.error);
+    }
+    else {
+        document.exitFullscreen();
+    }
+}
+// Display mode cycling
+function cycle_display_mode() {
+    const modes = [`both`, `structure`, `plot`];
+    const current_index = modes.indexOf(display_mode);
+    const next_index = (current_index + 1) % modes.length;
+    display_mode = modes[next_index];
+}
+// Display mode labels and icons
+const display_mode_config = {
+    both: {
+        label: `Show Both`,
+        icon: `TwoColumns`,
+        title: `Show both structure and plot`,
+    },
+    structure: {
+        label: `Structure Only`,
+        icon: `Atom`,
+        title: `Show structure only`,
+    },
+    plot: { label: `Plot Only`, icon: `ScatterPlot`, title: `Show plot only` },
+};
+// Handle click outside sidebar to close it
+function handle_click_outside(event) {
+    if (!sidebar_open)
+        return;
+    const target = event.target;
+    const sidebar = target.closest(`.info-sidebar`);
+    const info_button = target.closest(`.info-button`);
+    // Don't close if clicking on sidebar or info button
+    if (!sidebar && !info_button)
+        sidebar_open = false;
+}
+// Handle keyboard shortcuts
+function onkeydown(event) {
+    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 is_input_focused = target.tagName === `INPUT` ||
+        target.tagName === `TEXTAREA`;
+    // Skip if typing in an input that's not our step input
+    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;
+    }
+    const total_frames = trajectory.frames.length;
+    const is_cmd_or_ctrl = event.metaKey || event.ctrlKey;
+    // Navigation shortcuts
+    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);
+    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));
+    } // Interface shortcuts
+    else if (event.key === `f`)
+        toggle_fullscreen();
+    else if (event.key === `i`)
+        sidebar_open = !sidebar_open;
+    else if (event.key === `d` && plot_series.length > 0) {
+        cycle_display_mode();
+    } // Playback speed shortcuts (only when playing)
+    else if ((event.key === `=` || event.key === `+`) && is_playing) {
+        frame_rate_fps = Math.min(5, frame_rate_fps + 0.2);
+    }
+    else if (event.key === `-` && is_playing) {
+        frame_rate_fps = Math.max(0.2, frame_rate_fps - 0.2);
+    } // System shortcuts
+    else if (event.key === `Escape`) {
+        if (document.fullscreenElement)
+            document.exitFullscreen();
+        else
+            sidebar_open = false;
+    } // 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)));
+    }
+    else if (event.key === `Escape` && sidebar_open) { // Escape key to close sidebar
+        event.stopPropagation();
+        sidebar_open = false;
+    }
+}
+</script>
+
+<div
+  class="trajectory-viewer"
+  class:horizontal={layout === `horizontal`}
+  class:vertical={layout === `vertical`}
+  class:dragover
+  bind:this={wrapper}
+  role="button"
+  tabindex="0"
+  aria-label="Drop trajectory file here to load"
+  ondrop={handle_file_drop}
+  ondragover={(event) => {
+    event.preventDefault()
+    if (!allow_file_drop) return
+    dragover = true
+  }}
+  ondragleave={(event) => {
+    event.preventDefault()
+    dragover = false
+  }}
+  onclick={handle_click_outside}
+  {onkeydown}
+>
+  {#if loading}
+    <Spinner text="Loading trajectory..." {...spinner_props} />
+  {:else if error_message}
+    <TrajectoryError
+      {error_message}
+      on_dismiss={() => (error_message = null)}
+      {error_snippet}
+    />
+  {:else if trajectory}
+    <!-- Trajectory Controls -->
+    {#if show_controls}
+      <div class="trajectory-controls">
+        {#if trajectory_controls}
+          {@render trajectory_controls({
+        trajectory,
+        current_step_idx,
+        total_frames: trajectory.frames.length,
+        on_step_change: go_to_step,
+      })}
+        {:else}
+          {@const input_width = Math.max(25, String(current_step_idx).length * 8 + 6)}
+          {#if current_filename}
+            <div class="filename-section">
+              <button
+                use:titles_as_tooltips
+                title="Click to copy filename"
+                onclick={() => {
+                  if (current_filename) navigator.clipboard.writeText(current_filename)
+                }}
+              >
+                {current_filename}
+              </button>
+            </div>
+          {/if}
+
+          <!-- Navigation controls -->
+          <div class="nav-section">
+            <button
+              onclick={prev_step}
+              disabled={current_step_idx === 0 || is_playing}
+              title="Previous step"
+              class="nav-button"
+            >
+              ⏮
+            </button>
+
+            <button
+              onclick={toggle_play}
+              disabled={trajectory.frames.length <= 1}
+              title={is_playing ? `Pause playback` : `Play trajectory`}
+              class="play-button nav-button"
+              class:playing={is_playing}
+            >
+              {is_playing ? `⏸` : `▶`}
+            </button>
+
+            <button
+              onclick={next_step}
+              disabled={current_step_idx === trajectory.frames.length - 1 || is_playing}
+              title="Next step"
+              class="nav-button"
+            >
+              ⏭
+            </button>
+          </div>
+
+          <!-- Frame slider and counter -->
+          <div class="step-section">
+            <input
+              type="number"
+              min="0"
+              max={trajectory.frames.length - 1}
+              bind:value={current_step_idx}
+              oninput={(event) => {
+                const target = event.target as HTMLInputElement
+                const width = Math.max(25, Math.min(80, target.value.length * 8 + 6))
+                target.style.width = `${width}px`
+              }}
+              style:width="{input_width}px"
+              class="step-input"
+              title="Enter step number to jump to"
+            />
+            <span>/ {trajectory.frames.length}</span>
+            <div class="slider-container">
+              <input
+                type="range"
+                min="0"
+                max={trajectory.frames.length - 1}
+                bind:value={current_step_idx}
+                class="step-slider"
+                title="Drag to navigate steps"
+              />
+              {#if step_label_positions.length > 0}
+                <div class="step-labels">
+                  {#each step_label_positions as step_idx (step_idx)}
+                    {@const position_percent = (step_idx / (trajectory.frames.length - 1)) *
+              100}
+                    {@const adjusted_position = 1.5 + (position_percent * (100 - 2)) / 100}
+                    <div class="step-tick" style:left="{adjusted_position}%"></div>
+                    <div class="step-label" style:left="{adjusted_position}%">
+                      {step_idx}
+                    </div>
+                  {/each}
+                </div>
+              {/if}
+            </div>
+          </div>
+
+          <!-- Frame rate control - only shown when playing -->
+          {#if is_playing}
+            <div class="speed-section">
+              <label for="step-rate-slider" style="font-weight: 500; white-space: nowrap"
+              >Speed:</label>
+              <input
+                id="step-rate-slider"
+                type="range"
+                min="0.2"
+                max="5"
+                step="0.1"
+                bind:value={frame_rate_fps}
+                class="speed-slider"
+                title="Frame rate: {format_num(frame_rate_fps, `.2~s`)} fps"
+              />
+              <input
+                type="number"
+                min="0.2"
+                max="5"
+                step="0.1"
+                bind:value={frame_rate_fps}
+                class="speed-input"
+                title="Enter precise FPS value"
+              />
+              fps
+            </div>
+          {/if}
+
+          <!-- Frame info section -->
+          <div class="info-section">
+            <!-- Info button to open sidebar -->
+            {#if trajectory}
+              <button
+                onclick={() => (sidebar_open = !sidebar_open)}
+                title={sidebar_open ? `Close info panel` : `Open info panel`}
+                aria-label={sidebar_open ? `Close info panel` : `Open info panel`}
+                class="info-button nav-button"
+                class:active={sidebar_open}
+              >
+                <Icon icon="Info" style="width: 22px; height: 22px" />
+              </button>
+            {/if}
+            <!-- Display mode button - after info button -->
+            {#if plot_series.length > 0}
+              <button
+                onclick={cycle_display_mode}
+                title={display_mode_config[display_mode].title}
+                class="display-mode nav-button"
+              >
+                <Icon icon={display_mode_config[display_mode].icon} />
+              </button>
+            {/if}
+            <!-- Fullscreen button - rightmost position -->
+            {#if show_fullscreen_button}
+              <button
+                onclick={toggle_fullscreen}
+                title="Toggle fullscreen"
+                aria-label="Toggle fullscreen"
+                class="fullscreen-button nav-button"
+              >
+                <Icon icon="Fullscreen" />
+              </button>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div
+      class="content-area"
+      class:hide-plot={!actual_show_plot}
+      class:hide-structure={!show_structure}
+      class:show-both={display_mode === `both`}
+      class:show-structure-only={display_mode === `structure`}
+      class:show-plot-only={display_mode === `plot`}
+    >
+      {#if show_structure}
+        <Structure
+          structure={current_structure}
+          allow_file_drop={false}
+          style="height: 100%; border-radius: 0"
+          enable_tips={false}
+          fullscreen_toggle={false}
+          {...{ show_image_atoms: false, ...structure_props }}
+        />
+      {/if}
+
+      {#if actual_show_plot}
+        <ScatterPlot
+          series={plot_series}
+          x_label="Step"
+          y_label={y_axis_labels.y1}
+          y_label_shift={{ y: 20 }}
+          y_format=".2~s"
+          y2_format=".2~s"
+          y2_label={y_axis_labels.y2}
+          y2_label_shift={{ y: 80 }}
+          current_x_value={current_step_idx}
+          change={handle_plot_change}
+          markers="line"
+          x_ticks={step_label_positions}
+          show_controls
+          legend={{
+            responsive: true,
+            layout: `horizontal`,
+            layout_tracks: 3,
+            item_gap: 0,
+            padding: { t: 5, b: 5, l: 5, r: 5 },
+          }}
+          padding={{ t: 20, b: 60, l: 100, r: has_y2_series ? 100 : 20 }}
+          range_padding={0}
+          style="height: 100%"
+          {...plot_props}
+        >
+          {#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}
+        </ScatterPlot>
+      {/if}
+    </div>
+  {:else}
+    <div class="empty-state">
+      <div class="drop-zone">
+        <h3>Load Trajectory</h3>
+        <p>
+          Drop a trajectory file here (.xyz, .extxyz, .json, .json.gz, XDATCAR) or provide
+          trajectory data via props
+        </p>
+        <div class="supported-formats">
+          <strong>Supported formats:</strong>
+          <ul>
+            <li>Multi-frame XYZ trajectory files (.xyz, .extxyz)</li>
+            <li>Pymatgen trajectory JSON</li>
+            <li>Array of structures with metadata</li>
+            <li>VASP XDATCAR files</li>
+            <li>Compressed files (.gz)</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Info Sidebar -->
+  {#if trajectory}
+    <Sidebar
+      {trajectory}
+      {current_step_idx}
+      {current_filename}
+      {current_file_path}
+      {file_size}
+      {file_object}
+      is_open={sidebar_open}
+      onclose={() => (sidebar_open = false)}
+    />
+  {/if}
+</div>
+
+<style>
+  .trajectory-viewer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    min-height: 500px;
+    border-radius: 4px;
+    border: 2px dashed transparent;
+    transition: border-color 0.2s ease;
+    box-sizing: border-box;
+    overflow: hidden;
+    contain: layout;
+  }
+  .trajectory-viewer:fullscreen {
+    height: 100vh !important;
+    width: 100vw !important;
+    border-radius: 0;
+    border: none;
+  }
+  /* Content area - grid container for equal sizing */
+  .content-area {
+    display: grid;
+    flex: 1;
+    min-height: 0;
+    overflow: visible;
+  }
+  .trajectory-viewer.horizontal .content-area {
+    grid-template-columns: 1fr 1fr;
+  }
+  .trajectory-viewer.vertical .content-area {
+    grid-template-rows: 1fr 1fr;
+  }
+  /* When plot is hidden, structure takes full space */
+  .content-area.hide-plot {
+    grid-template-columns: 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 */
+  .content-area.show-structure-only {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: 1fr !important;
+  }
+  .content-area.show-plot-only {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: 1fr !important;
+  }
+  .trajectory-viewer.dragover {
+    border-color: var(--trajectory-dragover-border, #007acc);
+    background-color: var(--trajectory-dragover-bg, rgba(0, 122, 204, 0.1));
+  }
+
+  .trajectory-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem;
+    background: var(--traj-surface, rgba(45, 55, 72, 0.95));
+    backdrop-filter: blur(4px);
+    border-bottom: var(--trajectory-border, 1px solid #e1e4e8);
+    color: var(--trajectory-text-color, #24292e);
+    font-size: 0.8rem;
+  }
+  .nav-section {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .nav-button {
+    min-width: 28px;
+    height: 28px;
+    padding: 0.125rem 0.25rem;
+    font-size: 0.8rem;
+  }
+  .step-section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 0;
+  }
+  .step-input {
+    border: 1px solid rgba(99, 179, 237, 0.3);
+    border-radius: 3px;
+    text-align: center;
+    margin: 1.5px -5px 0 0;
+  }
+  .slider-container {
+    position: relative;
+    flex: 1;
+    min-width: 80px;
+  }
+  .step-slider {
+    width: 100%;
+    accent-color: var(--traj-accent, #63b3ed);
+  }
+  .step-labels {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 16px;
+    pointer-events: none;
+  }
+  .step-tick {
+    position: absolute;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 4px;
+    background: var(--traj-muted, rgba(148, 163, 184, 0.8));
+    top: -10px;
+  }
+  .step-label {
+    position: absolute;
+    transform: translateX(-50%);
+    font-size: 0.65rem;
+    color: var(--traj-muted, rgba(148, 163, 184, 0.85));
+    white-space: nowrap;
+    text-align: center;
+    top: -6px;
+  }
+  .speed-slider {
+    width: 90px;
+    accent-color: var(--traj-accent, #63b3ed);
+  }
+  .speed-input {
+    width: 45px;
+    text-align: center;
+    background: var(--traj-bg, rgba(26, 32, 44, 0.8));
+    border: var(--traj-border, 1px solid rgba(74, 85, 104, 0.5));
+    border-radius: 3px;
+    color: var(--traj-text, #e2e8f0);
+    font-size: 0.8rem;
+    padding: 0.125rem 0.25rem;
+    box-sizing: border-box;
+  }
+  .speed-section {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--traj-text, #e2e8f0);
+  }
+  .filename-section {
+    display: flex;
+    align-items: center;
+    color: var(--traj-text, #e2e8f0);
+  }
+  .filename-section button {
+    white-space: nowrap;
+    padding: 0.125rem 0.375rem;
+    background: var(--traj-bg, rgba(26, 32, 44, 0.8));
+    border-radius: 2px;
+    border: var(--traj-border, 1px solid rgba(74, 85, 104, 0.5));
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    line-height: inherit;
+  }
+  .display-mode {
+    min-width: 28px;
+    height: 28px;
+    background: var(--trajectory-display-mode-bg, rgba(255, 255, 255, 0.05));
+  }
+  .display-mode:hover:not(:disabled) {
+    background: var(--trajectory-display-mode-hover-bg, #6b7280);
+  }
+  .fullscreen-button {
+    min-width: 28px;
+    height: 28px;
+    background: var(--trajectory-fullscreen-bg, rgba(255, 255, 255, 0.05));
+  }
+  .fullscreen-button:hover:not(:disabled) {
+    background: var(--trajectory-fullscreen-hover-bg, rgba(255, 255, 255, 0.1));
+  }
+  .info-button {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    border-radius: 50%;
+    background: var(--trajectory-info-bg, #4b5563);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+  .info-button:hover:not(:disabled) {
+    background: var(--trajectory-info-hover-bg, #6b7280);
+  }
+  .info-button.active {
+    background: var(--trajectory-info-active-bg, #3b82f6);
+  }
+  .info-section {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--traj-text, #e2e8f0);
+    margin-left: auto;
+  }
+
+  .play-button {
+    background: var(--trajectory-play-button-bg, #6b7280);
+    min-width: 36px;
+    font-size: 0.9rem;
+  }
+  .play-button:hover:not(:disabled) {
+    background: var(--trajectory-play-button-hover-bg, #7f8793);
+  }
+  .play-button.playing {
+    background: var(--trajectory-pause-button-bg, #6b7280);
+  }
+  .play-button.playing:hover:not(:disabled) {
+    background: var(--trajectory-pause-button-hover-bg, #9ca3af);
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 2rem;
+    color: var(--trajectory-text-color, #24292e);
+  }
+  .drop-zone {
+    text-align: center;
+    padding: 3rem;
+    border: 2px dashed var(--trajectory-dropzone-border, #ccc);
+    border-radius: 8px;
+    background: var(--trajectory-dropzone-bg, #f9f9f9);
+    color: var(--trajectory-text-color, #24292e);
+    max-width: 500px;
+  }
+  .drop-zone h3 {
+    color: var(--trajectory-heading-color, var(--trajectory-text-color, #24292e));
+    margin-bottom: 1rem;
+  }
+  .supported-formats {
+    margin-top: 1.5rem;
+    text-align: left;
+  }
+  .supported-formats strong {
+    color: var(--trajectory-text-color, #24292e);
+  }
+  .supported-formats ul {
+    margin: 0.5rem 0;
+    padding-left: 1.5rem;
+  }
+  .supported-formats li {
+    color: var(--trajectory-text-muted, #586069);
+  }
+  button {
+    background: var(--traj-border-bg, #4a5568);
+    color: var(--traj-text, #e2e8f0);
+    border: none;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font-size: 0.85rem;
+    min-width: 2rem;
+    transition: background-color 0.2s;
+  }
+  button:hover:not(:disabled) {
+    background: var(--traj-surface-hover, #4a5568);
+  }
+  button:disabled {
+    background: var(--traj-text-muted, #a0aec0);
+    color: var(--traj-border-bg, #4a5568);
+    cursor: not-allowed;
+  }
+  /* Hide number input spinner arrows */
+  .trajectory-controls input[type='number']::-webkit-outer-spin-button,
+  .trajectory-controls input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Responsive design */
+  @media (max-width: 768px) {
+    .trajectory-viewer.horizontal {
+      flex-direction: column;
+    }
+    .trajectory-controls {
+      flex-wrap: wrap;
+      gap: 0.375rem;
+    }
+    .step-section {
+      order: 1;
+      width: 100%;
+      min-width: 0;
+    }
+    .speed-section {
+      justify-content: center;
+    }
+    .filename-section {
+      order: -1;
+      width: 100%;
+      justify-content: center;
+    }
+    .info-section {
+      margin-left: 0;
+      justify-content: center;
+      gap: 0.375rem;
+    }
+  }
+  @media (max-width: 480px) {
+    .trajectory-controls {
+      padding: 0.125rem 0.375rem;
+      font-size: 0.75rem;
+      gap: 0.25rem;
+    }
+    .nav-button {
+      min-width: 24px;
+      height: 24px;
+      font-size: 0.7rem;
+    }
+    .info-section {
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+    .speed-section {
+      font-size: 0.65rem;
+    }
+  }
+</style>