Significant speedups of Trajectory and Structure viewers (#96)

* fix missing theme colors in vscode extension + cleanup extension code

* fix apply_theme_to_dom not setting color-scheme attribute, causing light form inputs in dark mode

- Update tests to ensure error handling for unknown themes and verify color-scheme settings

* big performance improvements to StructureScene.svelte (most noticeable in Trajectory.svelte)

- new event handlers for playback, pause, step change, and error handling in Trajectory.svelte
- new playwright/trajectory-performance.test.ts to guard against FPS, load time and mem usage regressions in Trajectory.svelte
- new `performance_mode` prop in `Structure.svelte` to optimize rendering based on structure size
- playwright tests for new performance mode prop of Structure.svelte
- StructureScene.svelte used InstancedMesh for more efficient rendering of same-species atoms

* Trajectory.svelte rename `frame_rate_fps` to `fps`

- trajectory-performance.test.ts wait for spinner visibility during loading
- trajectory.test.ts consolidate setup code and fix outdated class selectors
- structure.test.ts consolidate performance mode tests into parallel running Promise.all()
- refactor index.ts simplify rgb_scheme_to_hex function using Object.fromEntries
- trajectory.test.ts remove failing fps_range

* breaking: rename `Trajectory` to `TrajectoryType` and Svelte component `TrajectoryViewer` to `Trajectory`

- update all imports and type annotations

* fix Trajectory.svelte not passing x-axis label to Histogram.svelte

- remove CSS in HistogramControls.svelte and ScatterPlotControls.svelte, all handled by DraggablePanel.svelte
- fix Histogram.svelte dark text in dark mode

Author: janosh

extensions/vscode/.vscodeignore

@@ -1,6 +1,5 @@
 # Source files
 src/**
-webview/**
 *.ts
 
 # Build files

extensions/vscode/readme.md

@@ -1,4 +1,6 @@
-# MatterViz VS Code Extension
+# [MatterViz VSCode Extension]
+
+[matterviz vscode extension]: https://marketplace.visualstudio.com/items?itemName=janosh.matterviz
 
 **MatterViz** offers a VSCode extension for rendering crystal structures and molecular dynamics (MD) or geometry optimization trajectories directly in the editor to speed up typical materials science/computational chemistry workflows.
 
@@ -61,9 +63,7 @@ MatterViz automatically registers as a custom editor for trajectory files such a
 
 ## ⌨️ Keyboard Shortcuts
 
-| Shortcut                       | Action                          |
-| ------------------------------ | ------------------------------- |
-| `Ctrl+Shift+V` / `Cmd+Shift+V` | Render structure with MatterViz |
+- `Ctrl+Shift+V` / `Cmd+Shift+V` → Render structure/trajectory with MatterViz
 
 ## 📄 License
 
@@ -72,25 +72,17 @@ This extension is [MIT-Licensed](./license).
 ## 🔗 Related Projects
 
 - **✅ MatterViz Web**: [matterviz.janosh.dev](https://matterviz.janosh.dev)
-- **✅ pymatviz**: [Jupyter](https://jupyter.org)/[Marimo](https://marimo.io) extension for Python notebooks. See [`pymatviz` readme](https://github.com/janosh/pymatviz/blob/widgets/readme.md#interactive-widgets) for details.
+- **✅ pymatviz**: [Jupyter](https://jupyter.org)/[Marimo](https://marimo.io) extension for Python notebooks. Read about widgets in [`pymatviz` readme](https://github.com/janosh/pymatviz/blob/main/readme.md#interactive-widgets) for details.
 
 ## 🤝 Contributing
 
 We welcome contributions! Please see our [Contributing Guide](../../contributing.md) for details.
 
 ## 🛠️ Development
 
-This extension is built with:
-
-- **TypeScript** - Main extension logic
-- **Svelte 5** - Modern reactive webview components
-- **Vite** - Fast build tooling
-- **Three.js** - 3D visualization engine
-
-### Building from Source
-
 ```bash
-cd extensions/vscode
+git clone https://github.com/janosh/matterviz
+cd matterviz/extensions/vscode
 pnpm install
 pnpm build
 vsce package

extensions/vscode/src/extension.ts

@@ -1,9 +1,10 @@
-import type { ThemeName } from '$lib/theme/index'
-import { AUTO_THEME, COLOR_THEMES, is_valid_theme_mode } from '$lib/theme/index'
+import type { ThemeName } from '$lib/theme'
+import { AUTO_THEME, COLOR_THEMES, is_valid_theme_mode } from '$lib/theme'
 import { is_trajectory_file } from '$lib/trajectory/parse'
 import * as fs from 'fs'
 import * as path from 'path'
 import * as vscode from 'vscode'
+
 interface FileData {
   filename: string
   content: string
@@ -33,34 +34,27 @@ export const read_file = (file_path: string): FileData => {
   // Binary files that should be read as base64
   const is_binary = /\.(gz|traj|h5|hdf5)$/.test(filename)
 
-  return {
-    filename,
-    content: is_binary
-      ? fs.readFileSync(file_path).toString(`base64`)
-      : fs.readFileSync(file_path, `utf8`),
-    isCompressed: is_binary,
-  }
+  const content = is_binary
+    ? fs.readFileSync(file_path).toString(`base64`)
+    : fs.readFileSync(file_path, `utf8`)
+  return { filename, content, isCompressed: is_binary }
 }
 
 // Get file data from URI or active editor
 export const get_file = (uri?: vscode.Uri): FileData => {
   if (uri) return read_file(uri.fsPath)
 
   if (vscode.window.activeTextEditor) {
-    return {
-      filename: path.basename(vscode.window.activeTextEditor.document.fileName),
-      content: vscode.window.activeTextEditor.document.getText(),
-      isCompressed: false,
-    }
+    const filename = path.basename(vscode.window.activeTextEditor.document.fileName)
+    const content = vscode.window.activeTextEditor.document.getText()
+    return { filename, content, isCompressed: false }
   }
 
   const active_tab = vscode.window.tabGroups.activeTabGroup.activeTab
   if (
     active_tab?.input && typeof active_tab.input === `object` &&
     active_tab.input !== null && `uri` in active_tab.input
-  ) {
-    return read_file((active_tab.input as { uri: vscode.Uri }).uri.fsPath)
-  }
+  ) return read_file(active_tab.input.uri.fsPath)
 
   throw new Error(
     `No file selected. MatterViz needs an active editor to know what to render.`,
@@ -80,13 +74,9 @@ export const get_theme = (): ThemeName => {
     return get_system_theme()
   }
 
-  // Handle manual theme selection
-  if (theme_setting !== AUTO_THEME) {
-    return theme_setting as ThemeName
-  }
+  if (theme_setting !== AUTO_THEME) return theme_setting // Handle manual theme selection
 
-  // Auto-detect from VSCode color theme
-  return get_system_theme()
+  return get_system_theme() // Auto-detect from VSCode color theme
 }
 
 // Get system theme based on VSCode's current color theme
@@ -113,17 +103,12 @@ export const create_html = (
   const js_uri = webview.asWebviewUri(
     vscode.Uri.joinPath(context.extensionUri, `dist`, `webview.js`),
   )
-  const themes_uri = webview.asWebviewUri(
-    vscode.Uri.joinPath(context.extensionUri, `../../static`, `themes.js`),
-  )
 
   return `<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
     <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}' 'unsafe-eval' ${webview.cspSource}; style-src 'unsafe-inline' ${webview.cspSource}; img-src ${webview.cspSource} data:; connect-src ${webview.cspSource}; worker-src blob:;">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script nonce="${nonce}" src="${themes_uri}"></script>
     <script nonce="${nonce}">window.mattervizData=${JSON.stringify(data)}</script>
   </head>
   <body>

extensions/vscode/webview/src/main.ts renamed to extensions/vscode/src/webview/main.ts

@@ -3,6 +3,7 @@ import '$lib/app.css'
 import { parse_structure_file } from '$lib/io/parse'
 import Structure from '$lib/structure/Structure.svelte'
 import { is_valid_theme_name, type ThemeName } from '$lib/theme/index'
+import '$lib/theme/themes'
 import { is_trajectory_file, parse_trajectory_data } from '$lib/trajectory/parse'
 import Trajectory from '$lib/trajectory/Trajectory.svelte'
 import { mount } from 'svelte'
@@ -103,24 +104,20 @@ const handle_file_change = async (message: FileChangeMessage): Promise<void> =>
       const container = document.getElementById(`matterviz-app`)
       if (container && current_app) {
         current_app.destroy()
-        current_app = create_display(container, result, result.filename) as MatterVizApp
+        current_app = create_display(container, result, result.filename)
       }
 
       const vscode = get_vscode_api()
       if (vscode) {
-        vscode.postMessage({
-          command: `info`,
-          text: `File reloaded successfully`,
-        })
+        const text = `File reloaded successfully`
+        vscode.postMessage({ command: `info`, text })
       }
     } catch (error) {
       console.error(`Failed to reload file:`, error)
       const vscode = get_vscode_api()
       if (vscode) {
-        vscode.postMessage({
-          command: `error`,
-          text: `Failed to reload file: ${error}`,
-        })
+        const text = `Failed to reload file: ${error}`
+        vscode.postMessage({ command: `error`, text })
       }
     }
   }
@@ -139,22 +136,19 @@ export function base64_to_array_buffer(base64: string): ArrayBuffer {
 // Apply theme to the webview DOM
 const apply_theme = (theme: ThemeName): void => {
   const root = document.documentElement
-
   root.setAttribute(`data-theme`, theme)
 
-  // Apply MatterViz theme if available
-  if (typeof globalThis !== `undefined` && globalThis.MATTERVIZ_THEMES) {
-    const matterviz_theme = globalThis.MATTERVIZ_THEMES[theme]
-    const css_map = globalThis.MATTERVIZ_CSS_MAP || {}
+  if (!globalThis.MATTERVIZ_THEMES) throw new Error(`No themes found`)
 
-    if (matterviz_theme) {
-      for (const [key, value] of Object.entries(matterviz_theme)) {
-        const css_var = css_map[key as keyof typeof css_map]
-        if (css_var && value) {
-          root.style.setProperty(css_var, value as string)
-        }
-      }
-    }
+  const matterviz_theme = globalThis.MATTERVIZ_THEMES[theme]
+  if (!matterviz_theme) throw new Error(`Theme ${theme} not found`)
+
+  const css_map = globalThis.MATTERVIZ_CSS_MAP || {}
+
+  // Apply MatterViz theme CSS variables to root element
+  for (const [key, value] of Object.entries(matterviz_theme)) {
+    const css_var = css_map[key]
+    if (css_var && value) root.style.setProperty(css_var, value)
   }
 }
 
@@ -260,16 +254,10 @@ const create_display = (
   const is_trajectory = result.type === `trajectory`
   const Component = is_trajectory ? Trajectory : Structure
   const props = is_trajectory
-    ? {
-      trajectory: result.data,
-      show_fullscreen_button: false,
-      layout: `horizontal`,
-    }
+    ? { trajectory: result.data, show_fullscreen_button: false, layout: `horizontal` }
     : { structure: result.data, fullscreen_toggle: false }
 
-  if (!is_trajectory) {
-    container.style.setProperty(`--struct-height`, `100vh`)
-  }
+  if (!is_trajectory) container.style.setProperty(`--struct-height`, `100vh`)
 
   const component = mount(Component, { target: container, props })
 
@@ -318,9 +306,8 @@ const initialize_app = async (): Promise<MatterVizApp> => {
     if (vscode) {
       // Listen for file change messages from extension
       globalThis.addEventListener(`message`, (event) => {
-        const message = event.data as FileChangeMessage
-        if (message.command === `fileUpdated` || message.command === `fileDeleted`) {
-          handle_file_change(message)
+        if ([`fileUpdated`, `fileDeleted`].includes(event.data.command)) {
+          handle_file_change(event.data)
         }
       })
     } else {