Viewport does not work if div id is not "viewport"

[CharlesSiqiLiang]

When using multiLoader to load structures, it doesn't seem to work if the id of my div is not "viewport", even if I pass a different id to multiLoader. It seems that if a stage with custom id does not exist, it is not created either.

In NGL.specialOps.load, below the comment "- check if there is a stage", changing
NGL.stageIds[myData.id] = new NGL.Stage('viewport', {backgroundColor: myData.backgroundColor}); to NGL.stageIds[myData.id] = new NGL.Stage(myData.id, {backgroundColor: myData.backgroundColor}); seems to solve this issue.

[matteoferla]

Thanks (and fixed)! To be honest I have not tested the alternative NGL viewport name option since early development, so there may be other oddities. One I can see is NGL.specialOps.prolink which when no data-target attribute is specified will default to 'viewport'.

The major issues however may be with the case of multiple viewports, as myData is the this of a class that never was (for reasons I honestly do not recall, that is why it has such a poor variable name), so two stages would interfere by altering the info of the protein that is loaded (as they would be running of the same myData). Is this a problem relevant to you?

This mess is fixable, but would change the public methods and may break a few of the monitored pages that have wackier code (e.g. P450), so I would not be able to do this for a while.

[CharlesSiqiLiang]

I was trying to put two viewports on the same page so I had different ids for them, but currently I'm thinking of changing my design so things may get a bit easier. Thanks for the heads up!

[matteoferla]

Okay. I have just done some major code tweaks as I needed to implement multicolored residue selections.

I changed myData to be more flexible with multiviewport situations and there is only one major issue I could find that eludes me. As I need to work with legacy code in user pages I may not be aware of, the code still works as before, but behind the scenes is working differently, i.e. is making currentIndex match currentIndices etc.

window.myData = {
        currentIndex: -1,
        currentIndices: {},
        proteins: proteins,
        id: id,
        ids: [id],
        backgroundColor: 'white',
        backgroundColors: {}
    };
window.myData.currentIndices[id] = -1;
window.myData.backgroundColors[id] = backgroundColor || 'white';

NGL.specialOps.load was a major issue as it did not have an id. Now as a third optional argument ( after index-in-myData.proteins/4-letter code/protein-name-in-myData.proteins, and bool of whether to change representations) it accepts id. I really want to make it the first but I would have to change legacy user pages and that could be a GDPR violation (??).

The script is okay with a second role="NGL" HTML element attribute or second call to the Jquery extension .viewport();, however, the protein that gets loaded is not the one it should be.

I have not received automated notifications that pages are behaving differently, but I am sure there will be some drama, so I might need to tweak it further...

[CharlesSiqiLiang]

Thanks a lot! I just implemented a page with two viewports and your modification worked well at least in my case. I only had one structure for each viewport so there wasn't the problem of tracking which structures were displayed in which viewport.