Allow toggling between histogram and line plot of properties in Trajectory viewer (#85)

* Histogram.svelte with vitest and playwright tests, to be used in trajectory viewer

- .gitignore exclude large traj test files
- set CSS variables for dark-mode histogram in app.css
- split data transformation, scales, formatting, tooltip positioning helpers in src/lib/plot into separate files

* pymatgen Structure parsing from nested JSON and enhance tests

- add `find_structure_in_json` and `is_valid_structure_object` functions to recursively search for valid structure objects in nested JSON
- update `parse_structure_file` to utilize the new functions for JSON parsing
- add a new compressed JSON structure file for testing
- enhance unit tests in `pbc.test.ts` and `Structure.test.ts` to cover nested JSON handling and validation logic

* add StructureSidebar used by Structure.svelte in place of overlaid modal dialog

- manage sidebar visibility in Structure.svelte
- remove deprecated tips modal from StructureLegend.svelte
- enhance structure interaction with keyboard shortcuts for toggling the sidebar
- update structure tests to reflect changes in component structure

* add Histogram Trajectory.svelte with new display mode dropdown to select between Scatter, Histogram with or without structure + fix trajectory parsing of ASE's binary ULM format

- rename Sidebar to TrajectorySidebar

* vitest/plot/scales.test.ts: use `test.each` for parameterized tests to cover multiple scenarios efficiently

- vitest/plot/ScatterPlot.test.ts: common test data for sample points
- vitest/plot/scales.test.ts: update assertions for log scale handling and time scale creation
- vitest/trajectory/parse.test.ts: add test for torch-sim HDF5 file parsing

* pin deno-version: 2.3.7 in CI

* address coderabbit comments

* clean up histogram examples to use shared sample-data-generation utilities

- move data generation functions from histogram examples to a new `plot-utils.ts`
- add stricter trajectory load progress reporting tests

* address more coderabbit comments

* prevent infinite recursion in nested JSON structure parsing

- `find_structure_in_json` handle circular references using a `WeakSet` to prevent infinite recursion
- `StructureSidebar.svelte` refactor force magnitude calculation use shared math.ts
- `parse.test.ts` add a test for handling deeply nested JSON structures to ensure performance and correctness

* fix vitest erroring on missing Canvas API

* share tick generation logic between Histogram and ScatterPlot extracted to scales.ts

- Histogram.svelte support and test customizable x_ticks and y_ticks props with dynamic updates
- Refactored tick generation logic in ScatterPlot.svelte import generate_ticks from scales.ts

Author: janosh

.github/workflows/gh-pages.yml

@@ -10,3 +10,5 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/deno-gh-pages.yml@main
+    with:
+      deno-version: 2.3.7

.github/workflows/test.yml

@@ -16,3 +16,4 @@ jobs:
       test-cmd: deno task vitest
       e2e-install-cmd: npx playwright install chromium
       e2e-test-cmd: npx playwright test
+      deno-version: 2.3.7

.gitignore

@@ -16,8 +16,9 @@ coverage
 # auto-generated
 src/types
 
-# coverage
-test-results
+# coverage and large test files
+test-results*
+src/site/trajectories/large
 
 # vscode extension
 *.vsix

deno.jsonc

@@ -5,7 +5,7 @@
     "preview": "deno run -A --node-modules-dir npm:vite preview",
     "serve": "deno task build && deno task preview",
     "test": "deno task vitest && deno task e2e",
-    "vitest": "deno run -A --node-modules-dir npm:vitest run tests/vitest/**/*.ts",
+    "vitest": "deno run -A --node-modules-dir npm:vitest",
     "e2e": "npx playwright test",
     "test:install": "npx playwright install chromium",
     "package": "svelte-package",

extensions/vscode/tests/extension.test.ts

@@ -375,7 +375,7 @@ describe(`MatterViz Extension`, () => {
     }
     const nonces = new Set<string>()
 
-    for (let i = 0; i < 1000; i++) {
+    for (let idx = 0; idx < 1000; idx++) {
       const html = create_html(
         mock_webview as vscode.Webview,
         mock_context as vscode.ExtensionContext,

src/app.css

@@ -21,6 +21,13 @@
   /* darken browser form controls like input[type='color'] */
   color-scheme: dark;
   --max-text-width: 40em;
+
+  /* Histogram dark mode colors */
+  --histogram-axis-color: #e5e5e5;
+  --histogram-text-color: #e5e5e5;
+  --histogram-tooltip-bg: rgba(60, 60, 60, 0.95);
+  --histogram-tooltip-color: white;
+  --histogram-tooltip-border: rgba(255, 255, 255, 0.2);
 }
 body {
   background: var(--page-bg);

src/lib/icons.ts

@@ -88,27 +88,13 @@ export const icon_data = {
     path:
       `M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2`,
   },
-  Contact: {
-    viewBox: `0 0 24 24`,
-    width: `24`,
-    height: `24`,
-    path:
-      `M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7`,
-  },
   Changelog: {
     viewBox: `0 0 24 24`,
     width: `24`,
     height: `24`,
     path:
       `M13 3a9 9 0 0 0-9 9H1l4 4l4-4H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z`,
   },
-  GitHubMark: {
-    viewBox: `0 0 16 16`,
-    width: `24`,
-    height: `24`,
-    path:
-      `M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z`,
-  },
   Info: {
     viewBox: `0 0 24 24`,
     width: `24`,
@@ -123,20 +109,6 @@ export const icon_data = {
     path:
       `M14 21v-1.65q0-.2.075-.387t.225-.338l5.225-5.2q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.2 5.2q-.15.15-.337.225T16.65 22H15q-.425 0-.712-.287T14 21m7.5-5.575l-.925-.925zm-6 5.075h.95l3.025-3.05l-.925-.925l-3.05 3.025zM6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762v1.425q0 .425-.288.713T19 11.25t-.712-.288T18 10.25V9h-4q-.425 0-.712-.288T13 8V4H6v16h5q.425 0 .713.288T12 21t-.288.713T11 22zm0-2V4zm13.025-3.025l-.475-.45l.925.925z`,
   },
-  Mail: {
-    viewBox: `0 0 24 24`,
-    width: `24`,
-    height: `24`,
-    path:
-      `M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6l-10 7L2 6`,
-  },
-  Globe: {
-    viewBox: `0 0 24 24`,
-    width: `24`,
-    height: `24`,
-    path:
-      `M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z`,
-  },
   CheckCircle: {
     viewBox: `0 0 24 24`,
     width: `24`,
@@ -498,6 +470,14 @@ export const icon_data = {
     path:
       `M2 2h2v18h18v2H2zm7 8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m4-8a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5 10a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3`,
   },
+  Histogram: { // IconPark Solid by ByteDance
+    viewBox: `0 0 48 48`,
+    width: `24`,
+    height: `24`,
+    stroke: `currentColor`,
+    fill: `currentColor`,
+    path: `M4 42h40z M4 42h40 M8 28h6v14H8zm13-10h6v24h-6zM34 6h6v36h-6z`,
+  },
 } as const
 
 export type IconName = keyof typeof icon_data

src/lib/io/parse.ts

@@ -1,6 +1,7 @@
 import { elem_symbols, type ElementSymbol, type Site, type Vec3 } from '$lib'
 import type { Matrix3x3 } from '$lib/math'
 import * as math from '$lib/math'
+import type { AnyStructure } from '$lib/structure'
 import { load as yaml_load } from 'js-yaml'
 
 // Check if filename indicates a trajectory file
@@ -844,6 +845,74 @@ export function parse_phonopy_yaml(
   }
 }
 
+// Recursively search for a valid structure object in nested JSON
+function find_structure_in_json(
+  obj: unknown,
+  visited = new WeakSet(),
+): ParsedStructure | null {
+  // Check if current object is null or undefined
+  if (obj === null || obj === undefined) {
+    return null
+  }
+
+  // If it's not an object, skip it
+  if (typeof obj !== `object`) {
+    return null
+  }
+
+  // Check for circular references
+  if (visited.has(obj)) return null
+  visited.add(obj)
+
+  // If it's an array, search through each element
+  if (Array.isArray(obj)) {
+    for (const item of obj) {
+      const result = find_structure_in_json(item, visited)
+      if (result) return result
+    }
+    return null
+  }
+
+  // Check if this object looks like a valid structure
+  const potential_structure = obj as Record<string, unknown>
+  if (is_valid_structure_object(potential_structure)) {
+    return potential_structure as unknown as ParsedStructure
+  }
+
+  // Otherwise, recursively search through all properties
+  for (const value of Object.values(potential_structure)) {
+    const result = find_structure_in_json(value, visited)
+    if (result) return result
+  }
+
+  return null
+}
+
+// Check if an object looks like a valid structure
+function is_valid_structure_object(obj: Record<string, unknown>): boolean {
+  // Must have sites array
+  if (!obj.sites || !Array.isArray(obj.sites)) {
+    return false
+  }
+
+  // Sites array must not be empty and contain valid site objects
+  if (obj.sites.length === 0) {
+    return false
+  }
+
+  // Check if first site looks valid (has species and coordinates)
+  const first_site = obj.sites[0] as Record<string, unknown>
+  if (!first_site || typeof first_site !== `object`) {
+    return false
+  }
+
+  // Must have species (array) and either abc or xyz coordinates
+  const has_species = Array.isArray(first_site.species) && first_site.species.length > 0
+  const has_coordinates = Array.isArray(first_site.abc) || Array.isArray(first_site.xyz)
+
+  return has_species && has_coordinates
+}
+
 // Auto-detect file format and parse accordingly
 export function parse_structure_file(
   content: string,
@@ -867,13 +936,13 @@ export function parse_structure_file(
       return parse_cif(content)
     }
 
-    // JSON files (pymatgen structures) - just parse directly
+    // JSON files (pymatgen structures) - parse and search for nested structures
     if (ext === `json`) {
       try {
         const parsed = JSON.parse(content)
-        // Validate that it has the required structure format
-        if (parsed.sites && Array.isArray(parsed.sites)) {
-          return parsed as ParsedStructure
+        const structure = find_structure_in_json(parsed)
+        if (structure) {
+          return structure
         }
         console.error(`JSON file does not contain a valid structure format`)
         return null
@@ -903,9 +972,10 @@ export function parse_structure_file(
   // JSON format detection: try to parse as JSON first
   try {
     const parsed = JSON.parse(content)
-    // If it parses as JSON, validate that it's a structure
-    if (parsed.sites && Array.isArray(parsed.sites)) {
-      return parsed as ParsedStructure
+    // If it parses as JSON, search for a valid structure
+    const structure = find_structure_in_json(parsed)
+    if (structure) {
+      return structure
     }
   } catch {
     // Not JSON, continue with other format detection
@@ -973,3 +1043,44 @@ export function parse_structure_file(
   console.error(`Unable to determine file format`)
   return null
 }
+
+// Universal parser that handles JSON and structure files
+export function parse_any_structure(
+  content: string,
+  filename: string,
+): AnyStructure | null {
+  // Try JSON first, but handle nested structures properly
+  try {
+    const parsed = JSON.parse(content)
+
+    // Check if it's already a valid structure
+    if (parsed.sites && Array.isArray(parsed.sites)) {
+      return parsed as AnyStructure
+    }
+
+    // If not, use parse_structure_file to find nested structures
+    const structure = parse_structure_file(content, filename)
+
+    if (structure) {
+      return {
+        sites: structure.sites,
+        charge: 0,
+        ...(structure.lattice && {
+          lattice: { ...structure.lattice, pbc: [true, true, true] },
+        }),
+      }
+    } else return null
+  } catch {
+    // Try structure file formats
+    const parsed = parse_structure_file(content, filename)
+    return parsed
+      ? {
+        sites: parsed.sites,
+        charge: 0,
+        ...(parsed.lattice && {
+          lattice: { ...parsed.lattice, pbc: [true, true, true] },
+        }),
+      }
+      : null
+  }
+}

src/lib/math.ts

@@ -283,3 +283,5 @@ export function cell_to_lattice_matrix(
     [c1, c2, c3],
   ]
 }
+
+export const LOG_MIN_EPS = 1e-9 // Constants

src/lib/plot/ColorBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { format_num, LOG_MIN_EPS } from '$lib'
+  import { format_num } from '$lib'
   import { luminance } from '$lib/labels'
+  import * as math from '$lib/math'
   import { format } from 'd3-format'
   import * as d3 from 'd3-scale'
   import * as d3_sc from 'd3-scale-chromatic'
@@ -107,9 +108,9 @@
         use_log_for_ticks = false
       } else if (scale_min <= 0) {
         console.warn(
-          `Log scale received non-positive min value (${scale_min}) for ticks. Using epsilon=${LOG_MIN_EPS} instead.`,
+          `Log scale received non-positive min value (${scale_min}) for ticks. Using epsilon=${math.LOG_MIN_EPS} instead.`,
         )
-        scale_min = LOG_MIN_EPS // Substitute with epsilon
+        scale_min = math.LOG_MIN_EPS // Substitute with epsilon
       }
     }
 
@@ -164,13 +165,13 @@
 
         // Ensure domain endpoints are included if they are powers of 10 and missed by loop
         if (
-          Math.abs(Math.log10(nice_min) % 1) < LOG_MIN_EPS &&
+          Math.abs(Math.log10(nice_min) % 1) < math.LOG_MIN_EPS &&
           !power_of_10_ticks.includes(nice_min)
         ) {
           power_of_10_ticks.unshift(nice_min)
         }
         if (
-          Math.abs(Math.log10(nice_max) % 1) < LOG_MIN_EPS &&
+          Math.abs(Math.log10(nice_max) % 1) < math.LOG_MIN_EPS &&
           !power_of_10_ticks.includes(nice_max)
         ) {
           power_of_10_ticks.push(nice_max)
@@ -257,9 +258,9 @@
         use_log_fallback = false
       } else if (min_val <= 0) {
         console.warn(
-          `Log scale received non-positive min value (${min_val}) for fallback scale. Using epsilon=${LOG_MIN_EPS} instead.`,
+          `Log scale received non-positive min value (${min_val}) for fallback scale. Using epsilon=${math.LOG_MIN_EPS} instead.`,
         )
-        min_val = LOG_MIN_EPS // Substitute with epsilon
+        min_val = math.LOG_MIN_EPS // Substitute with epsilon
       }
     }
 
@@ -294,9 +295,9 @@
         use_log_interp = false
       } else if (min_ramp_domain <= 0) {
         console.warn(
-          `Log scale specified for gradient, but min domain value (${min_ramp_domain}) is not positive. Using epsilon=${LOG_MIN_EPS} instead.`,
+          `Log scale specified for gradient, but min domain value (${min_ramp_domain}) is not positive. Using epsilon=${math.LOG_MIN_EPS} instead.`,
         )
-        adjusted_min_ramp = LOG_MIN_EPS // Substitute with epsilon
+        adjusted_min_ramp = math.LOG_MIN_EPS // Substitute with epsilon
       }
     }