Story-Related Libraries

[zachcp]

In creating Mol-View-Stories we put together a nice format for coordinating between code editors and molstar displays. In #97 I refactored the editor code so that I could reuse this code as part of mol-view-stories library. I've made some progress on two downstream libraries that I want to share.

Molstar Components

This library intends to provide some convenient web-based components that can be reused. At the moment there is: 1) MolstarViewer which is a reactive component that accepts molviewspec data and will update on change, and 2) EditorWithViewer which is an editor+Viewer component that is built on top of mol-view-stories/StoryManager and will auto update the viewer based on the execution in the editor.

• repo and webpage

MolViewSpec-Quarto

This packages the EditorWithViewer from above for use in the Markdown-based documentation system. I think this could be useful for writing interactive molviewspec docs.

• repo and webpage

[zachcp]

First Stab at a Conversion of the Mkdocs to Quarto using the MolViewSpec plugin above.

• repo and website
• Example below show markdown based flow leading to interactive docs. I added markdown-based examples to the front page and the selectors but we could add them for each node. I think animation docs will be particularly important.
• I think this is sufficiently good that I would consider replacing mkdocs with quarto. I also think most of what our mol-view-stories users want is a set of easy to use/recombine recipes which interactive vignettes for color schemes, selections, and animations get you most of the way there.

cc: @dsehnal

[dsehnal]

This is great, but there is one crucial thing that is missing in the editor + visualization pair:

The state updates immediately when the editor content changes and there is no feedback when something goes wrong.

What you did looks nice and simple, but deceptively so. How about adding an expandable panel below with the log? And perhaps have a check box with "auto-update" which can be disabled. For small states, the auto-update makes sense, but as the scripts become more complicated, this breaks.

[zachcp]

The state updates immediately when the editor content changes and there is no feedback when something goes wrong.

The auto update toggle already exists and is on by default. I can expose the toggle / contorls

How about adding an expandable panel below with the log?

In terms of feedback, the contents of the text editor goes through StoryManager, gets evaled and produces MVSData (json). Maybe instead of the viewer log we should expose the outputs of a Validation function?

[dsehnal]

Yeah, that sounds good.

[dsehnal]

@zachcp after Ludo's PR is merged, can you please update the use of zachcp/molviewspec-quarto in the docs to point to the molstar org version?

[corredD]

I really liked the Quarto integration. Amazing work. Would it be possible to individually show or hide the editor and the viewer? It would also be great to have show or hide actions to control component visibility, as already available in MolViewSpec, so we could use toggle buttons directly from Markdown.

Finally, what about supporting not only the editor and viewer, but also the Markdown description itself? Just a couple of ideas for future development 🙂

[zachcp]

Very glad to hear you like this @corredD; thank you. I created an issue here; please feel free to update with any further suggestions. The basic flow is:

molstar component. --> [compiled into] --> quarto-molstar --> [used in] --> /docs

So any new component would be developed there.