Molstar updates

[Jhsmit]

A Panel Pane to wrap the PDBe implementation of the Mol* ('MolStar') viewer.

Check out

• PDBe Mol*
• Mol*
• Mol* GitHub

Cite Mol: David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: Mol Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021; https://doi.org/10.1093/nar/gkab314.

Continuation of #20

Changes:

• Adding a default visual style hides waters by default, set default to None
• Theme default to default (= light)
• Hide structure split per boolean, update via visual.visibility
• Hide canvas button split per boolean, update via rerender (only works for some buttons)
• Added function for coloring a selection (one color)
• Add function for coloring a selection (many colors)

I've changed the theme to 'default' (which is light). Since this is the default in panel I think it makes the most sense. It looks like the CSS theme already updates across PDBeMolStar instances (at least in jupyer notebooks) Ideally we would also couple the background color to the theme. Previously I used bg_color with default=None and set the bg color depending on the theme but that is currently bugged (https://github.com/holoviz/panel/issues/3058). Ideally as you state under 'nice to have' would be nice to have it like that :)

The selection and coloring API has a few more options (color by auth_residue_number,) which I'm not familiar with but I suspect its related to the mmCIF protein structure data format

Current (known) bugs:

• [ ] If you set hide_water is True via __init__ they cannot be switched back to show

Previous:

Todo:

• [x] Test that dynamic updates work

• [x] Decide if light theme should be could default as is custom in Panel.

• [x] Decide if default theme should be dark or default/ light.

• [x] Add/ use utility functions

  • [x] .select() color() function can be used for coloring
  • [x] `.clear_selection()
  • [x] highlight()
  • [x] clear_highlight()
  • [x] reset()

• [x] Add events.

  • [x] hide/show water, het, polymer, etc
  • [x] hide/show some (but not all) canvas buttons

• [ ] Fix that the component get slower and slower on each rerender. (I have not experienced this)

• [x] Reference Notebook

• [x] Add automated tests

• [ ] Test, Test, Test

  • [ ] Test on non-protein molecules
  • [ ] Test other formats than pdb (mmcif, mdtraj?)

• [ ] pypi package

• [ ] conda package

• [ ] Communication

• Nice to have

• Some Gallery notebook showing an example application.

• Some way to update the css file across all PdbeMolstar instances when the theme changes (this seems to happen already, at least in the notebook example).

• Set default theme based on theme=default or them=dark url query args.

[Jhsmit]

Almost forgot the eye candy!

[Jhsmit]

I think its getting to a quite mergeable state now. Only pylint tests fail currently. I'll test it myself in my own use case and see if I run into any issues

[Jhsmit]

A nice addition would be to be able to subscribe to loadComplete events Currently when I reload a molecule in the viewer, I also want to reapply colors but I don't know when its done loading.

Ideally I would like it to reapply colors when its done loading automatically. I'm not sure how to do either in python we would need to subscribe to the loadComplete JS event and then add a callback for this such that colors are added afterwards

OR perhaps we can do it all in javascript? Where we have some custom callback function which triggers upon loadComplete

from the pdbe helper docs:

loadComplete | This is a reactive event available on the viewer instance. It is fired on load/render completion.Example:viewerInstance.events.loadComplete.subscribe(() => { //do something after 3d view is rendered }); -- | --

[MarcSkovMadsen]

Will take a look Sunday. Thanks.

[Jhsmit]

I sometimes have an issue where if I load a panel app with the PDBeMolStar viewer it looks like in the image below. It does not seem to be 100% reproducible.

If I resize the window the problem is fixed. I've tried adding this line:

"resize": "state.viewerInstance.canvas.handleResize()",

But it doesnt seem to do anything

[MarcSkovMadsen]

Looks fine. As I see it we need 3 things

1. [] Get component to react to resizing. https://discourse.holoviz.org/t/how-do-i-trigger-scripts-when-layout-of-reactivehtml-component-changes/3436
2. Update the top picture in the notebook (Says web component)
3. Add a ; to the .servable() in the last cell to not output the template in the notebook.

But we can fix this in my end.

This will be a really, really nice addition.