Generic Javascript View for NGL Molecule Viewer

[dnaki]

Hi,
I’m trying to use the Generic Javascript View node to view molecules using the ngl library.
The info on how to embed the viewer is located here: https://nglviewer.org/ngl/api/manual/usage/embedding.html

I tried to mimic the solution given here for the mermaid javascript library: Using external JS libraries via webTemplate folder
In that solution the javascript library is captured in a variable and used inline in the javascript code of the Generic JS View.

My workflow is attached. The API requires to instantiate a ‘stage’ object: var stage = new NGL.Stage("viewport");
However when I execute and view the Generic JS View node I get error: “Reference Error: NGL is not defined”. I also tried instantiating the stage object using a DOMContentLoaded event listener and I get no error, but also no view (I included a separate JS node for that).

I’m a javascript novice and was hoping someone can spot a simple mistake in my code (there are only 13 lines)?
I’m using Windows 10 and KNIME 4.1.1
My workflow: ngl_js_viewer.knwf (310.9 KB)

Thanks,
-Don

[AlexanderFillbrunn]

Hi Don,
I once used NGL in a Generic JS View. Please find attached an example workflow that embeds NGL.
Kind regards,
Alexander

Basic 3D Alignment NGL.knwf (2.1 MB)

[dnaki]

Thanks @AlexanderFillbrunn! This helps a lot.
Kind regards,
Don