undefined in v3.1.2

[kenietz]

Hi,

i have the following error in v3.1.2: this.plugin is undefined, in function update. I use it to load a second structure(chain). This problem is not existing in v1.2.1 however. I can load 2 structures through the update function.

I checked for similar issues before posting this one and found one. According to that thread it looked like it was solved:

"Mol* core dependency update to v3.8.2 is now available without the above mentioned issue"

Not sure what it means tho :) So i installed nodejs 18.17.0 and build the latest version of the plugin with the hope the error to be gone. But no such luck :)

Any ideas or hints on how to solve the issue will be appreciated!
Thank you for time and help in advance!

Cheers
Dimitar

[midlik]

Hi,

I'm thinking this issue could be caused by calling the update function before the plugin is fully initialized (i.e. before the asynchronous render function has completed).

I expect your javascript code looks something like this:

const viewerContainer = document.getElementById('myViewer')!;
const viewerInstance = new PDBeMolstarPlugin();
viewerInstance.render(viewerContainer, initOptions);
viewerInstance.visual.update(newOptions, false);

Try to change it to something more like this:

const viewerContainer = document.getElementById('myViewer')!;
const viewerInstance = new PDBeMolstarPlugin();
viewerInstance.render(viewerContainer, initOptions).then(() => viewerInstance.visual.update(newOptions, false));

Also, updating to version 3.1.3 could help.

[midlik]

Or alternatively

const viewerContainer = document.getElementById('myViewer')!;
const viewerInstance = new PDBeMolstarPlugin();
viewerInstance.render(viewerContainer, initOptions);
viewerInstance.events.loadComplete.subscribe(() => viewerInstance.visual.update(newOptions, false));

[kenietz]

Hi,
thank you very much for your reply. I tried both solutions which you provided including using v3.1.3. The following kinda worked:

viewerInstance.render(viewerContainer, initOptions);
viewerInstance.events.loadComplete.subscribe(() => viewerInstance.visual.update(newOptions, false));

Both structures got loaded but then the coloring was weird. The colors of the chains we jumping and changing by themselves :) I guess i would have to change my coloring functions as well in order to make them work with the new version of the plugin. Too much work to do tho haha. So for now i will stick with v1.2.1 of the plugin as everything works well with it.

Thank you again for your time and help!

[midlik]

Oh, sorry. Loading the second structure actually triggers the loadComplete event again and creates an infinite loop. The jumping chains you saw were probably the same structure being loaded again and again and again and again...

Fortunately, there is an easy fix for this. Just unsubscribe as soon as the event fires for the first time:

const viewerContainer = document.getElementById('myViewer')!;
const viewerInstance = new PDBeMolstarPlugin();
viewerInstance.render(viewerContainer, initOptions);
const subscription = viewerInstance.events.loadComplete.subscribe(() => {
    subscription.unsubscribe();
    viewerInstance.visual.update(newOptions, false);
});