Generic Javascript View for NGL Molecule Viewer

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

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)

2 Likes

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.