Feat: Convert Molstar Homepage Examples to Mol-view-spec/mol-views-stories

[zachcp]

Description

The molstar homepage has a set of beautiful examples. When you click on these examples you load a Molstar instance that loads a .molx file which is a zip file containing an assets directory and an internal Molstar state tree. Given that we now have mol-view-stories, we should be able to recreate those exact examples via a Story.

Actions

This PR will attempt to convert each of those examples and highlight any potential shortfalls in MVS.

Conversion Approach

# open original in one browser window
# open the WIP in another browser tab using:
 deno run --allow-read --allow-write --allow-env --allow-net \
    main.ts watch examples/molstar-examples/motor-hook/
 
# the initial plan/prompt told claude to inspect the molx/state.json file and conversion to molviewSpec via the JS api.
# interact with claude to update the code as per my description to match target. 
# there are enough examples in the cli folder that claude can often pickup the correct JS patterns.  

Molstar Examples Conversion Status

ID	Title	Comparison	Issues/TODOs	Status
motor-hook	Bacterial Flagellar Motor-Hook Complex		• Differences in lighting/occlusion • Spin/animation not working • Component names missing on right	🟡 Partial
zika-em	Zika Virus Assembly and Cryo-EM Density		• (No specific issues noted)	🟢 Good
1rb8-assembly	PhiX174 DNA Binding Protein Assembly		• State file looks up symmetry groups from RCSB but need to calculate it • Upstream example had symmetry axes in wrong place • Missing cage geometry • Using lines instead of pentagon/triangle	🔴 Major gaps
cytochromes	P-450 Cytochromes Superposition		Polymer coloring: • Need pdbe-structure-quality-report with issue-count type • Change from .color({ color: "#4caf50" }) to .color({ custom: { pdbe_structure_quality_report: "issue-count" } }) Ligand coloring: • Need element-symbol with chain-based carbon coloring • Params: saturation: 0, lightness: 0.2 • Check if MVS supports carbonColor parameter	🟡 Color scheme issues
btub	BtuB in Lipid Bilayer		• No selector for "lipid" • Gaussian surface of proteins excessively coarse	🔴 Major gaps
sars-cov-2-virion	SARS-CoV-2 Virion		• Need to update color profiles	🟡 Color scheme issues
npc	Nuclear Pore Complex		• No putty implementation • Limited surface options • Need to update colors	🔴 Major gaps
gain-md	GAIN Domain Tethered Agonist Exposure		• Need to handle trajectory • Color scheme updates needed	Leaving out of scope
villin-md	Villin Folding Trajectory		• Color by secondary structure needed • Alpha channel on surface not working • Trajectory handling required	🟢 Good - Close match with minor or no issues
alpha-orbitals	Alpha Orbitals and Density of Atorvastatin	(Not yet converted)	• To be assessed	Leaving out of scope
lighting	Lighting and Render Styles	(Not yet converted)	• To be assessed	Leaving out of scope

Status Legend

• 🟢 Good - Close match with minor or no issues
• 🟡 Partial - Functional but with notable visual/feature differences
• 🔴 Major gaps - Missing critical features
• ⚪ Not started - Not yet converted

[zachcp]

cc: @dsehnal

[dsehnal]

That's quite the audit :)

Trajectory handling required

MVS does support trajectory files. What's the issue here?

[zachcp]

MVS does support trajectory files. What's the issue here?

Wonderful. Do you have an example by any chance? I couldn't quite figure out a pure mvs way to load all the frames. If you can point the way I can update these and the docs as well.

[zachcp]

After adding molstar/molstar#1783 and getting it into molstar in 5.8, I updated the NPC example which now looks great. I'm going to accept/merge these.