Together with @Marc I’m working on adding a PDBeMolstar pane to panel-chemistry.
This pane can 3D render (bio)molecules and users can apply custom colors to these molecules.
What I’m trying to do now is subscribe to and event from the plugin to trigger applying of colors after the plugin (re)rendered a molecule.
API docs of the PDBeMolstar plugin are here.
We use a ReactiveHTML and the color function I’m using is:
state.viewerInstance.visual.select(color_dict)
Where viewerInstance is the instance of the PDBeMolstarPlugin
The pdbe docs desribe a loadComplete event:
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 });
I’ve tried to use this but I’m unfamiliar with the synthax. When I test with:
state.viewerInstance.events.loadComplete.subscribe(() => console.log("test");
It works fine but when I now try to apply the colors:
state.viewerInstance.events.loadComplete.subscribe(() => state.viewerInstance.visual.select(color_dict));
I get an error: Uncaught (in promise) Error: Could not find node 'undefined'.
I suspect that I’m doing something wrong in passing the arguments. How can I get this to work?
I have a PR with some test code here
Additionally, is there a way to get the event (trigger) back to python? For example, give a command which rerenders the molecule, and then (asynchronously) wait in python for the event to trigger?