Frontend

This directory contains the frontend TSX components for the Molstar Viewer applications.

Structure

frontend/
├── apps/                           # Individual app components
│   ├── viewer.tsx                  # Standard Mol* viewer
│   ├── docking-viewer.tsx          # Docking viewer
│   ├── mesoscale-explorer.tsx      # Mesoscale explorer
│   └── mvs-stories.tsx             # MVS Stories
└── README.md                       # This file

App Components

Each app is a TSX component that returns a complete HTML document with:

HTML structure - Full <html>, <head>, and <body> tags
Metadata - Character set, viewport, and title
Container div - Where the Molstar viewer will be rendered
Module script - Client-side JavaScript that imports and initializes Molstar

Example Structure

Create val
/** @jsxImportSource https://esm.sh/react@18.2.0 */

export default function ViewerApp() {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Mol* Viewer</title>
      </head>
      <body>
        <h1>Mol* Viewer</h1>
        <div id="molstar-container" style={{ width: "100%", height: "600px" }}>
          Loading...
        </div>
        <script type="module" dangerouslySetInnerHTML={{ __html: `
          import { Viewer } from "jsr:@zachcp/molstar@5.3.4";
          // Initialize viewer here
        `}} />
      </body>
    </html>
  );
}

JSR Imports

All Molstar dependencies are imported from JSR using the jsr: protocol:

import { Viewer } from "jsr:@zachcp/molstar@5.3.4";

Development Notes

All components use React 18.2.0 from esm.sh
JSX pragma is required at the top of each file: /** @jsxImportSource https://esm.sh/react@18.2.0 */
Inline styles use React style objects (camelCase properties)
Client-side scripts use dangerouslySetInnerHTML to inject module code
Each app should have a container div with id molstar-container for consistency

Viewer App URL Parameters

The Viewer app (/viewer) supports the following URL parameters for customization:

Display Options

hide-controls - Hide UI controls (0 or 1)
collapse-left-panel - Start with left panel collapsed (0 or 1)
show-toggle-fullscreen - Show fullscreen toggle button (0 or 1)

Data Providers

pdb-provider - PDB data provider: pdbe (default) or rcsb
emdb-provider - EMDB data provider: pdbe (default) or rcsb
map-provider - Map streaming provider: pdbe (default) or rcsb

Rendering Options

pixel-scale - Pixel scaling factor (default: 1)
pick-scale - Pick scaling factor (default: 0.25)
pick-padding - Pick padding (default: 1)
transparency - Transparency mode
prefer-webgl1 - Use WebGL 1 instead of WebGL 2 (0 or 1)
allow-major-performance-caveat - Allow major performance caveat (0 or 1)
power-preference - Power preference: high-performance (default), low-power, or default
illumination - Enable illumination (0 or 1)
resolution-mode - Resolution mode: auto (default) or other values

Debug Options

debug-mode - Enable debug mode (0 or 1)
timing-mode - Enable timing mode (0 or 1)

Loading Data

pdb - Load PDB structure by ID (e.g., ?pdb=1cbs)
pdb-ihm - Load PDB-IHM/ModelCIF structure by ID
emdb - Load EMDB map by ID
afdb - Load AlphaFold DB structure by ID
model-archive - Load Model Archive entry by ID
structure-url - Load structure from URL
structure-url-format - Format of structure URL (e.g., pdb, cif)
structure-url-is-binary - Whether structure URL is binary (0 or 1)
snapshot-id - Load snapshot by ID
snapshot-url - Load snapshot from URL
snapshot-url-type - Snapshot format: molj (default) or other
mvs-url - Load MolViewSpec from URL
mvs-data - Load MolViewSpec data directly
mvs-format - MolViewSpec format: mvsj (default) or other

Example URLs

Load a PDB structure:

/viewer?pdb=1cbs

Load a structure from URL:

/viewer?structure-url=https://files.rcsb.org/download/1FAP.pdb&structure-url-format=pdb

Load with custom settings:

/viewer?pdb=1cbs&hide-controls=1&pdb-provider=rcsb&illumination=1

Next Steps

✅ Viewer app ported and functional
Port docking-viewer app
Port mesoscale-explorer app
Port mvs-stories app
Add app-specific features and documentation

zcpbx

MolstarViewer