v0.1.2

- fix ASE ULM trajectory file handling in VSCode extension
- add tests for trajectory viewer FPS slider + Structure canvas resizing
- more extension file pattern matching and webview tests

Author: janosh

changelog.md

@@ -1,5 +1,25 @@
 # Changelog
 
+#### [v0.1.2](https://github.com/janosh/matterviz/compare/v0.1.2...v0.1.2)
+
+> 4 July 2025
+
+### 🛠 Enhancements
+
+- Allow toggling between histogram and line plot of properties in Trajectory viewer by @janosh in https://github.com/janosh/matterviz/pull/85
+- VSCode extension for rendering structures and trajectories with MatterViz directly in editor tabs by @janosh in https://github.com/janosh/matterviz/pull/82
+
+**Full Changelog**: https://github.com/janosh/matterviz/compare/v0.1.0...v0.1.2
+
+#### [v0.1.1](https://github.com/janosh/matterviz/compare/v0.1.1...v0.1.2)
+
+> 19 June 2025
+
+### 🛠 Enhancements
+
+- Big speedup of binary trajectory parsing by avoiding data-URI conversion, use ArrayBuffer directly by @janosh in https://github.com/janosh/matterviz/pull/81
+- Force vectors by @janosh in https://github.com/janosh/matterviz/pull/80
+
 ## [v0.1.0](https://github.com/janosh/matterviz/compare/v0.1.0...v0.1.0)
 
 > 19 June 2025

extensions/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "matterviz",
   "displayName": "MatterViz",
   "description": "Visualize crystal structures and MD trajectories in VSCode",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "publisher": "janosh",
   "type": "module",
   "icon": "icon.png",
@@ -55,7 +55,8 @@
   "scripts": {
     "build": "rm -rf dist && tsc && mv dist/extension.{,c}js && vite build",
     "dev": "tsc --watch & vite build --watch & mv dist/extension.{,c}js",
-    "vitest": "vitest"
+    "vitest": "vitest",
+    "package": "rm -rf dist && tsc && mv dist/extension.{,c}js && vite build && vsce package"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.1.0",

extensions/vscode/src/extension.ts

@@ -24,23 +24,29 @@ interface MessageData {
 export function is_trajectory_file(filename: string): boolean {
   const name = filename.toLowerCase()
   return (
+    // Standard trajectory file extensions
     name.match(/\.(traj|xyz|extxyz|h5|hdf5)$/) !== null ||
-    /(xdatcar|trajectory|traj|md|relax)/.test(name) ||
+    // Files with trajectory-related keywords
+    /(xdatcar|trajectory|traj|md|relax|npt|nvt|nve)/.test(name) ||
+    // Compressed trajectory files
     /\.(xyz|extxyz|traj)\.gz$/.test(name) ||
-    (name.endsWith(`.gz`) && /(traj|xdatcar|trajectory|relax|xyz)/.test(name))
+    (name.endsWith(`.gz`) &&
+      /(traj|xdatcar|trajectory|relax|xyz|md|npt|nvt|nve)/.test(name))
   )
 }
 
 // Read file from filesystem
 export const read_file = (file_path: string): FileData => {
   const filename = path.basename(file_path)
-  const compressed = /\.(gz|traj|h5|hdf5)$/.test(filename)
+  // Binary files that should be read as base64
+  const is_binary = /\.(gz|traj|h5|hdf5)$/.test(filename)
+
   return {
     filename,
-    content: compressed
+    content: is_binary
       ? fs.readFileSync(file_path).toString(`base64`)
       : fs.readFileSync(file_path, `utf8`),
-    isCompressed: compressed,
+    isCompressed: is_binary,
   }
 }
 

extensions/vscode/tests/extension.test.ts

@@ -69,6 +69,7 @@ describe(`MatterViz Extension`, () => {
   }
   const mock_context = { extensionUri: { fsPath: `/test` }, subscriptions: [] }
 
+  // only checking filename recognition, files don't need to exist
   test.each([
     // Basic trajectory files
     [`test.traj`, true],
@@ -81,6 +82,13 @@ describe(`MatterViz Extension`, () => {
     [`trajectory.dat`, true],
     [`md.xyz.gz`, true],
     [`relax.extxyz`, true],
+    // ASE ULM binary trajectory files (specific to this fix)
+    [`md_npt_300K.traj`, true],
+    [`ase-LiMnO2-chgnet-relax.traj`, true],
+    [`simulation_nvt_250K.traj`, true],
+    [`molecular_dynamics_nve.traj`, true],
+    [`water_cluster_md.traj`, true],
+    [`optimization_relax.traj`, true],
     // Case insensitive
     [`FILE.TRAJ`, true],
     [`TrAjEcToRy.XyZ`, true],
@@ -110,8 +118,10 @@ describe(`MatterViz Extension`, () => {
   test.each([
     [`test.gz`, true],
     [`test.h5`, true],
-    [`test.traj`, true],
+    [`test.traj`, true], // ASE binary files should be treated as compressed
     [`test.hdf5`, true],
+    [`md_npt_300K.traj`, true], // Specific ASE ULM binary file
+    [`ase-LiMnO2-chgnet-relax.traj`, true], // Another ASE ULM binary file
     [`test.cif`, false],
     [`test.xyz`, false],
     [`test.json`, false],
@@ -129,6 +139,67 @@ describe(`MatterViz Extension`, () => {
     }
   })
 
+  test.each([
+    [`md_npt_300K.traj`, true, true], // ASE binary trajectory
+    [`ase-LiMnO2-chgnet-relax.traj`, true, true], // ASE binary trajectory
+    [`simulation_nvt_250K.traj`, true, true], // ASE binary trajectory
+    [`water_cluster_md.traj`, true, true], // ASE binary trajectory
+    [`optimization_relax.traj`, true, true], // ASE binary trajectory
+    [`regular_text.traj`, true, true], // .traj files are always binary
+    [`test.xyz`, true, false], // Text trajectory file
+    [`test.extxyz`, true, false], // Text trajectory file
+    [`test.cif`, false, false], // Not a trajectory file
+  ])(
+    `ASE trajectory file handling: "%s" → trajectory:%s, binary:%s`,
+    (filename, is_trajectory, is_binary) => {
+      expect(is_trajectory_file(filename)).toBe(is_trajectory)
+
+      if (is_trajectory) {
+        const result = read_file(`/test/${filename}`)
+        expect(result.isCompressed).toBe(is_binary)
+      }
+    },
+  )
+
+  // Integration test for ASE trajectory file processing (simulates the exact failing scenario)
+  test(`ASE trajectory file end-to-end processing`, () => {
+    const ase_filename = `ase-LiMnO2-chgnet-relax.traj`
+
+    // Step 1: Extension should detect this as a trajectory file
+    expect(is_trajectory_file(ase_filename)).toBe(true)
+
+    // Step 2: Extension should read this as binary (compressed)
+    const file_result = read_file(`/test/${ase_filename}`)
+    expect(file_result.filename).toBe(ase_filename)
+    expect(file_result.isCompressed).toBe(true)
+    expect(file_result.content).toBe(`mock content`) // base64 encoded binary data
+
+    // Step 3: Verify webview data structure matches expected format
+    const webview_data = {
+      type: `trajectory` as const,
+      data: file_result,
+    }
+
+    // Step 4: HTML generation should work with this data
+    const html = create_html(
+      mock_webview as unknown as vscode.Webview,
+      mock_context as unknown as vscode.ExtensionContext,
+      webview_data,
+    )
+
+    expect(html).toContain(`<!DOCTYPE html>`)
+    expect(html).toContain(JSON.stringify(webview_data))
+
+    // Step 5: Verify the exact data structure that would be sent to webview
+    const parsed_data = JSON.parse(
+      html.match(/mattervizData=(.+?)</s)?.[1] || `{}`,
+    )
+    expect(parsed_data.type).toBe(`trajectory`)
+    expect(parsed_data.data.filename).toBe(ase_filename)
+    expect(parsed_data.data.isCompressed).toBe(true)
+    expect(parsed_data.data.content).toBe(`mock content`)
+  })
+
   test.each([
     [{ fsPath: `/test/file.cif` }, `file.cif`],
     [{ fsPath: `/test/structure.xyz` }, `structure.xyz`],

extensions/vscode/tests/webview.test.ts

@@ -0,0 +1,147 @@
+import { describe, expect, test } from 'vitest'
+
+// Local implementation of base64_to_array_buffer for testing
+// This matches the implementation in webview/src/main.ts
+function base64_to_array_buffer(base64: string): ArrayBuffer {
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let idx = 0; idx < binary.length; idx++) {
+    bytes[idx] = binary.charCodeAt(idx)
+  }
+  return bytes.buffer
+}
+
+describe(`Webview Integration - ASE Binary Trajectory Support`, () => {
+  test.each([
+    [`SGVsbG8gV29ybGQ=`, `Hello World`, 11], // Basic ASCII
+    [`QUJDREVGR0g=`, `ABCDEFGH`, 8], // Another ASCII
+    [``, ``, 0], // Empty string
+    [`QQ==`, `A`, 1], // Single character
+    [`QUI=`, `AB`, 2], // Two characters
+  ])(
+    `base64_to_array_buffer: %s → %s (%i bytes)`,
+    (base64, expected, byte_length) => {
+      const result = base64_to_array_buffer(base64)
+      expect(result).toBeInstanceOf(ArrayBuffer)
+      expect(result.byteLength).toBe(byte_length)
+      expect(new TextDecoder().decode(result)).toBe(expected)
+    },
+  )
+
+  test(`base64_to_array_buffer handles ASE trajectory file header correctly`, () => {
+    const ase_header = new Uint8Array([
+      0x2d,
+      0x20,
+      0x6f,
+      0x66,
+      0x20,
+      0x55,
+      0x6c,
+      0x6d,
+      0x41,
+      0x53,
+      0x45,
+      0x2d,
+      0x54,
+      0x72,
+      0x61,
+      0x6a,
+    ])
+    const base64 = btoa(String.fromCharCode(...ase_header))
+    const result = base64_to_array_buffer(base64)
+
+    expect(result.byteLength).toBe(ase_header.length)
+    expect(Array.from(new Uint8Array(result))).toEqual(Array.from(ase_header))
+    expect(new TextDecoder().decode(result.slice(0, 8))).toBe(`- of Ulm`)
+  })
+
+  test(`base64_to_array_buffer preserves byte order and handles performance`, () => {
+    // Test byte order preservation
+    const test_bytes = new Uint8Array([
+      0x00,
+      0x01,
+      0x02,
+      0x03,
+      0xFF,
+      0xFE,
+      0xFD,
+      0xFC,
+    ])
+    const base64 = btoa(String.fromCharCode(...test_bytes))
+    const result = base64_to_array_buffer(base64)
+    expect(Array.from(new Uint8Array(result))).toEqual(Array.from(test_bytes))
+
+    // Test performance with large data
+    const large_data = new Uint8Array(10000).fill(42)
+    const large_base64 = btoa(String.fromCharCode(...large_data))
+    const start = performance.now()
+    const large_result = base64_to_array_buffer(large_base64)
+    expect(performance.now() - start).toBeLessThan(100)
+    expect(large_result.byteLength).toBe(large_data.length)
+    const result_array = new Uint8Array(large_result)
+    expect(result_array[0]).toBe(42)
+    expect(result_array[result_array.length - 1]).toBe(42)
+  })
+
+  test.each([1024, 8192, 32768])(
+    `handles typical ASE trajectory file size: %i bytes`,
+    (size) => {
+      const data = new Uint8Array(size)
+      for (let i = 0; i < size; i++) data[i] = i % 256
+
+      const base64 = btoa(String.fromCharCode(...data))
+      const result = base64_to_array_buffer(base64)
+      const result_array = new Uint8Array(result)
+
+      expect(result.byteLength).toBe(size)
+      expect(result_array[0]).toBe(0)
+      expect(result_array[255]).toBe(255)
+      expect(result_array[size - 1]).toBe((size - 1) % 256)
+    },
+  )
+
+  test(`ASE trajectory file regression test - simulates VS Code extension flow`, () => {
+    // ASE signature + tag
+    const ase_data = new Uint8Array([
+      0x2d,
+      0x20,
+      0x6f,
+      0x66,
+      0x20,
+      0x55,
+      0x6c,
+      0x6d, // "- of Ulm"
+      0x41,
+      0x53,
+      0x45,
+      0x2d,
+      0x54,
+      0x72,
+      0x61,
+      0x6a,
+      0x65,
+      0x63,
+      0x74,
+      0x6f,
+      0x72,
+      0x79,
+      0x00,
+      0x00, // "ASE-Trajectory"
+      ...new Array(176).fill(0), // Mock trajectory data
+    ])
+
+    const base64_content = btoa(String.fromCharCode(...ase_data))
+    const result = base64_to_array_buffer(base64_content)
+    const result_array = new Uint8Array(result)
+
+    expect(result.byteLength).toBe(ase_data.length)
+    expect(new TextDecoder().decode(result_array.slice(0, 8))).toBe(`- of Ulm`)
+    expect(
+      new TextDecoder().decode(result_array.slice(8, 24)).replace(/\0/g, ``),
+    ).toBe(`ASE-Trajectory`)
+
+    console.log(
+      `✅ ASE trajectory file regression test passed - binary conversion works correctly`,
+    )
+  })
+})

extensions/vscode/webview/src/main.ts

@@ -62,7 +62,7 @@ const parse_file_content = async (
   filename: string,
   is_compressed: boolean = false,
 ): Promise<ParseResult> => {
-  // Handle compressed files by decompressing first
+  // Handle compressed/binary files by converting from base64 first
   if (is_compressed) {
     const buffer = base64_to_array_buffer(content)
 
@@ -72,6 +72,12 @@ const parse_file_content = async (
       return { type: `trajectory`, filename, data }
     }
 
+    // For ASE .traj files, pass buffer directly to trajectory parser
+    if (/\.traj$/i.test(filename)) {
+      const data = await parse_trajectory_data(buffer, filename)
+      return { type: `trajectory`, filename, data }
+    }
+
     // For .gz files, decompress first
     if (filename.endsWith(`.gz`)) {
       const { decompress_data } = await import(`$lib/io/decompress`)

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/matterviz",
   "repository": "https://github.com/janosh/matterviz",
   "license": "MIT",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/matterviz/issues",

readme.md

@@ -1,15 +1,15 @@
 <h1 align="center">
-  <sub><img src="static/favicon.svg" alt="Logo" height="40"></sub> MatterViz
+  <sub><img src="static/favicon.svg" alt="Logo" width="40px"></sub> MatterViz
 </h1>
 
 <h4 align="center">
 
 [![Tests](https://github.com/janosh/matterviz/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/matterviz/actions/workflows/test.yml)
 [![GH Pages](https://github.com/janosh/matterviz/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/matterviz/actions/workflows/gh-pages.yml)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/matterviz/main.svg?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)](https://results.pre-commit.ci/latest/github/janosh/matterviz/main?badge_token=nUqJfPCFS4uyMwcFSDIfdQ)
-[![VSCode Extension](https://img.shields.io/badge/Install%20VSCode-Extension-blue)](https://marketplace.visualstudio.com/items?itemName=janosh.matterviz)
-[![Docs](https://img.shields.io/badge/View-interactive%20docs-blue)](https://matterviz.janosh.dev)
-[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/matterviz)
+[![VSCode Extension](https://img.shields.io/badge/Install%20VSCode-Extension-blue?logo=typescript&logoColor=white)](https://marketplace.visualstudio.com/items?itemName=janosh.matterviz)
+[![Docs](https://img.shields.io/badge/Read-the%20docs-blue?logo=googledocs&logoColor=white)](https://matterviz.janosh.dev)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz&logoColor=white)](https://stackblitz.com/github/janosh/matterviz)
 
 </h4>