Instruction on how to build storyboards

[yakomaxa]

Dear developer of mol-view-spec,

I'm a structural bioinformatician, and I was fascinated reading your recent publication (/10.1093/nar/gkaf370).

Especially the storyboard presentations seem quite exciting to build, and I want to replicate your example and make my own storyboards. It would help greatly if you could share how to create storyboards. I have a computational background, so I could follow (even or preferably) if it's detailed. Whether local side experiments or hosting on the server, any will work for me.

I appreciate any help you can provide.

[dsehnal]

Glad you liked it :)

The current storyboards are built as Mol* examples and the source code is at https://github.com/molstar/molstar/tree/master/src/examples/mvs-stories

To get started, you can do

git clone https://github.com/molstar/molstar.git
cd molstar
npm install
npm run dev -- -e mvs-stories

and navigate to http://localhost:1338/build/examples/mvs-stories.

You can either modify the current stories/kinase.ts or tbp.ts or add a new one and add a pointer to it to stories/index.ts. Any modification you make will immediately reflect on the web page after you refresh it.

---

A tip for getting the camera position for your states:

---

You can also build the stories using molviewspec python package, the source code will be similar to the TypeScript version, save it as either .molj or .molx file (the docs show how to do this, and there is now new mvsj_to_mvsx function to include all your assets in a single file).

If you then host this file somewhere publicly available, you can use the mvs-stories app to view it via:

https://molstar.org/demos/mvs-stories/?story-url=url-encoded-path&data-format=mvsj or mvsx

This will allow you to share you stories using the viewer at molstar.org.

It works with the localhost app too as long as file is stored in the molstar folder (which is what is locally hosted by the npm run dev command). For example, I added vs.mvsj file (generated by one of the example at https://molstar.org/mol-view-spec/) to build/examples/mvs-stories and navigated to

http://localhost:1338/build/examples/mvs-stories/?story-url=http%3A%2F%2Flocalhost%3A1338%2Fbuild%2Fexamples%2Fmvs-stories%2Fvs.mvsj&data-format=mvsj

to see

---

@prihoda recently added a great feature to view your states directly in the Jupyter notebook for faster development #65 which we will release to the public package soon (for now you can clone this repo to install this manually using pip install -e .

---

If you figure this out and want to help other people/share your experience, adding docs to https://github.com/molstar/mol-view-spec-docs/ would be a good way to do this!

Let us know if you have more questions.

[yakomaxa]

Thank you very much for your prompt response and detailed instructions. It greatly helps!

I visited the links you suggested, found source files in the repo, and grasped the underlying mechanics. It's a superb effort to visualize structural biological narratives. I also looked into your previous paper: https://doi.org/10.1002/cpz1.1099. Thank you for the pip suggestion too. It’s nice to become able to experiment locally.

Let me play with this for a while, and I hope I can contribute to your documentation repo as I become more familiar with the system. These works are quite interesting and could solve the missing link in my ongoing project, which is also about narratives.