update litemol to molstar #351
Draft
+3,164
−4,431
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This replaces the legacy LiteMol viewer with the modern Mol* (pdbe-molstar) molecular visualization library. ## Changes **Frontend:** - Install [email protected] via npm - Create new my-molstar.js integration using PDBeMolstarPlugin API - Update Vite config to bundle molstar entry point - Update index.js to lazy-load molstar bundle - Remove old LiteMol files (1.4MB prebuilt bundle, CSS) - Create new _molstar.scss with minimal styling **Templates:** - Update _structure_section.html to use molstar data attribute - Change viewer container ID from #litemol-viewer to #molstar-viewer **Configuration:** - Update biome.json to remove LiteMol file exclusions ## Preserved Functionality - PDB structure visualization with CIF format - Multiple PDB dropdown selector - RCSB metadata display (title, authors, date, resolution) - Chromophore structure diagram from RCSB - Cascading fallback for PDB file fetching (wwPDB → RCSB → EBI) - Lazy loading when scrolling to structure section - Caching of PDB data and metadata ## Benefits - Modern, actively maintained viewer (Mol* 5.0.0) - Better performance and features - Smaller bundle size when gzipped (1.4MB vs ~1.4MB for old LiteMol) - Official PDBe implementation - Better TypeScript support and documentation
Remove unsupported options that were causing 'Invalid PDBeMolstarPlugin options' error: - expanded - reactive - selectInteraction - hideCanvasControls Keep only documented pdbe-molstar plugin options: - customData (with data and format) - bgColor - hideControls - sequencePanel
The pdbe-molstar plugin expects either: - moleculeId: PDB ID string (plugin fetches from PDB) - customData: Object with 'url' property (not raw data) Changed approach: - Use moleculeId parameter directly - Let pdbe-molstar fetch structures from PDB (it handles this internally) - Remove manual CIF data fetching and caching - Simplify code by removing async/await complexity This fixes the 'Invalid PDBeMolstarPlugin options' error. Note: We lose the custom cascading fallback (wwPDB → RCSB → EBI) but pdbe-molstar likely has its own fallback mechanisms.
This function was used to fetch CIF data from multiple mirrors, but is no longer needed since we're using moleculeId parameter and letting pdbe-molstar handle fetching internally.
Fix CORS and 404 errors by using customData.url instead of moleculeId. The moleculeId approach failed because: - pdbe-molstar tried to fetch from https://www.ebi.ac.uk/pdbe/entry-files/download/4EUL.bcif - That URL returned 404 (file doesn't exist) - EBI's server doesn't send CORS headers for cross-origin requests Solution: - Create getPDBUrl() function that tests URLs with HEAD requests - Try URLs in order: wwPDB → RCSB → EBI (all have CORS enabled) - Use customData.url to pass the working URL to pdbe-molstar - pdbe-molstar will fetch from the URL we provide This restores the cascading fallback behavior from the original LiteMol implementation.
for more information, see https://pre-commit.ci
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #351 +/- ##
==========================================
- Coverage 60.92% 59.68% -1.24%
==========================================
Files 104 104
Lines 8561 8561
==========================================
- Hits 5216 5110 -106
- Misses 3345 3451 +106 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.