Add auto-render setting to VSCode extension (#97)

* vscode extension add auto-render setting

- powered by `should_auto_render()` to determine if file-type is auto-renderable
- `package.json` offers new configuration option `matterviz.autoRender`
- `activate()` listens for document openings and triggers auto-rendering when applicable
- `create_webview_panel` is refactored for better code organization and clarity
- tests for auto-render functionality, ensuring correct behavior across various file types and edge cases
- add `is_structure_file()` helper function in `lib/io/parse.ts`
- fix several failing playwright tests

* fix vscode extension not setting color-scheme CSS attribute, causing white form inputs in dark mode

- `Trajectory.svelte` use responsive container query font sizes, gaps and padding in controls bar

Author: janosh

extensions/vscode/package.json

@@ -15,6 +15,7 @@
   ],
   "engines": { "vscode": "^1.96.0" },
   "main": "./dist/extension.cjs",
+  "activationEvents": ["onStartupFinished"],
   "contributes": {
     "commands": [{
       "command": "matterviz.renderStructure",
@@ -50,6 +51,11 @@
           "enum": ["auto", "light", "dark", "white", "black"],
           "default": "auto",
           "description": "Theme for MatterViz visualizations. 'auto' follows VSCode's theme (selecting either 'light' or 'dark'), other options override it."
+        },
+        "matterviz.autoRender": {
+          "type": "boolean",
+          "default": true,
+          "description": "Automatically render supported file types (structures and trajectories) when opening them. If rendering fails, falls back to regular editor."
         }
       }
     }

extensions/vscode/src/extension.ts

@@ -1,3 +1,4 @@
+import { is_structure_file } from '$lib/io/parse'
 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'
@@ -17,7 +18,7 @@ interface WebviewData {
   theme: ThemeName
 }
 
-interface MessageData {
+export interface MessageData {
   command: string
   text?: string
   filename?: string
@@ -28,6 +29,12 @@ interface MessageData {
 // Track active file watchers by file path
 const active_watchers = new Map<string, vscode.FileSystemWatcher>()
 
+// Check if a file should be auto-rendered
+export const should_auto_render = (filename: string): boolean => {
+  if (!filename || typeof filename !== `string`) return false
+  return is_structure_file(filename) || is_trajectory_file(filename)
+}
+
 // Read file from filesystem
 export const read_file = (file_path: string): FileData => {
   const filename = path.basename(file_path)
@@ -242,70 +249,77 @@ function stop_watching_file(file_path: string): void {
   }
 }
 
-// Enhanced render function with file watching
-export const render = (context: vscode.ExtensionContext, uri?: vscode.Uri) => {
-  try {
-    const file = get_file(uri)
-    const file_path = uri?.fsPath ||
-      vscode.window.activeTextEditor?.document.fileName
-
-    const panel = vscode.window.createWebviewPanel(
-      `matterviz`,
-      `MatterViz - ${file.filename}`,
-      vscode.ViewColumn.Beside,
-      {
-        enableScripts: true,
-        retainContextWhenHidden: true,
-        localResourceRoots: [
-          vscode.Uri.joinPath(context.extensionUri, `dist`),
-          vscode.Uri.joinPath(context.extensionUri, `../../static`),
-        ],
-      },
-    )
+// Create webview panel with common setup
+function create_webview_panel(
+  context: vscode.ExtensionContext,
+  file_data: FileData,
+  file_path?: string,
+  view_column: vscode.ViewColumn = vscode.ViewColumn.Beside,
+): vscode.WebviewPanel {
+  const panel = vscode.window.createWebviewPanel(
+    `matterviz`,
+    `MatterViz - ${file_data.filename}`,
+    view_column,
+    {
+      enableScripts: true,
+      retainContextWhenHidden: true,
+      localResourceRoots: [
+        vscode.Uri.joinPath(context.extensionUri, `dist`),
+        vscode.Uri.joinPath(context.extensionUri, `../../static`),
+      ],
+    },
+  )
 
-    if (file_path) start_watching_file(file_path, panel.webview)
+  if (file_path) start_watching_file(file_path, panel.webview)
 
-    panel.webview.html = create_html(panel.webview, context, {
-      type: is_trajectory_file(file.filename) ? `trajectory` : `structure`,
-      data: file,
-      theme: get_theme(),
-    })
+  panel.webview.html = create_html(panel.webview, context, {
+    type: is_trajectory_file(file_data.filename) ? `trajectory` : `structure`,
+    data: file_data,
+    theme: get_theme(),
+  })
 
-    panel.webview.onDidReceiveMessage(
-      (msg: MessageData) => handle_msg(msg, panel.webview),
-      undefined,
-      context.subscriptions,
-    )
+  panel.webview.onDidReceiveMessage(
+    (msg: MessageData) => handle_msg(msg, panel.webview),
+    undefined,
+    context.subscriptions,
+  )
 
-    // Listen for theme changes and update webview
-    const update_theme = () => {
-      if (panel.visible) {
-        const current_file = file_path ? read_file(file_path) : file
-        panel.webview.html = create_html(panel.webview, context, {
-          type: is_trajectory_file(file.filename) ? `trajectory` : `structure`,
-          data: current_file,
-          theme: get_theme(),
-        })
-      }
+  // Theme change handling
+  const update_theme = () => {
+    if (panel.visible) {
+      const current_file = file_path ? read_file(file_path) : file_data
+      panel.webview.html = create_html(panel.webview, context, {
+        type: is_trajectory_file(file_data.filename) ? `trajectory` : `structure`,
+        data: current_file,
+        theme: get_theme(),
+      })
     }
+  }
 
-    const theme_change_listener = vscode.window.onDidChangeActiveColorTheme(
-      update_theme,
-    )
-    const config_change_listener = vscode.workspace.onDidChangeConfiguration(
-      (event: vscode.ConfigurationChangeEvent) => {
-        if (event.affectsConfiguration(`matterviz.theme`)) update_theme()
-      },
-    )
+  const theme_listener = vscode.window.onDidChangeActiveColorTheme(update_theme)
+  const config_listener = vscode.workspace.onDidChangeConfiguration(
+    (event: vscode.ConfigurationChangeEvent) => {
+      if (event.affectsConfiguration(`matterviz.theme`)) update_theme()
+    },
+  )
 
-    // Dispose listeners when panel is closed
-    panel.onDidDispose(() => {
-      theme_change_listener.dispose()
-      config_change_listener.dispose()
+  panel.onDidDispose(() => {
+    theme_listener.dispose()
+    config_listener.dispose()
+    if (file_path) stop_watching_file(file_path)
+  })
 
-      // Clean up file watcher
-      if (file_path) stop_watching_file(file_path)
-    })
+  return panel
+}
+
+// Enhanced render function with file watching
+export const render = (context: vscode.ExtensionContext, uri?: vscode.Uri) => {
+  try {
+    const file = get_file(uri)
+    const file_path = uri?.fsPath ||
+      vscode.window.activeTextEditor?.document.fileName
+
+    create_webview_panel(context, file, file_path)
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : String(error)
     vscode.window.showErrorMessage(`Failed: ${message}`)
@@ -414,6 +428,36 @@ export const activate = (context: vscode.ExtensionContext): void => {
       new Provider(context),
       { webviewOptions: { retainContextWhenHidden: true } },
     ),
+    vscode.workspace.onDidOpenTextDocument((document: vscode.TextDocument) => {
+      if (
+        document.uri.scheme === `file` &&
+        should_auto_render(path.basename(document.uri.fsPath))
+      ) {
+        setTimeout(() => {
+          try {
+            if (
+              !vscode.workspace.getConfiguration(`matterviz`).get<boolean>(
+                `autoRender`,
+                true,
+              )
+            ) return
+            const file_data = read_file(document.uri.fsPath)
+            create_webview_panel(
+              context,
+              file_data,
+              document.uri.fsPath,
+              vscode.ViewColumn.One,
+            )
+          } catch (error: unknown) {
+            vscode.window.showErrorMessage(
+              `MatterViz auto-render failed: ${
+                error instanceof Error ? error.message : String(error)
+              }`,
+            )
+          }
+        }, 100)
+      }
+    }),
   )
 }
 

extensions/vscode/src/webview/main.ts

@@ -2,7 +2,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 { apply_theme_to_dom, 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'
@@ -95,7 +95,9 @@ const handle_file_change = async (message: FileChangeMessage): Promise<void> =>
 
   if (message.command === `fileUpdated` && message.data) {
     try {
-      if (message.theme && is_valid_theme_name(message.theme)) apply_theme(message.theme)
+      if (message.theme && is_valid_theme_name(message.theme)) {
+        apply_theme_to_dom(message.theme)
+      }
 
       const { content, filename, isCompressed } = message.data
       const result = await parse_file_content(content, filename, isCompressed)
@@ -133,25 +135,6 @@ export function base64_to_array_buffer(base64: string): ArrayBuffer {
   return bytes.buffer
 }
 
-// Apply theme to the webview DOM
-const apply_theme = (theme: ThemeName): void => {
-  const root = document.documentElement
-  root.setAttribute(`data-theme`, theme)
-
-  if (!globalThis.MATTERVIZ_THEMES) throw new Error(`No themes found`)
-
-  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)
-  }
-}
-
 // Parse file content and determine if it's a structure or trajectory
 const parse_file_content = async (
   content: string,
@@ -289,7 +272,7 @@ const initialize_app = async (): Promise<MatterVizApp> => {
   }
 
   // Apply theme early
-  if (theme) apply_theme(theme)
+  if (theme) apply_theme_to_dom(theme)
 
   const container = document.getElementById(`matterviz-app`)
   if (!container) throw new Error(`Target container not found in DOM`)