fix ngl_viewer

pyproject.toml

@@ -89,6 +89,7 @@ module = [
     "hvplot.*",
     "param",
     "py3Dmol",
+    "pydantic.*",
     "pyviz_comms",
 ]
 ignore_missing_imports = true

script.py

@@ -0,0 +1,49 @@
+import panel as pn 
+from panel_chemistry.pane import NGLViewer # panel_chemistry needs to be imported before you run pn.extension()
+from panel_chemistry.pane.ngl_viewer import EXTENSIONS
+
+pn.extension("ngl_viewer", sizing_mode="stretch_width")
+
+viewer = NGLViewer(object="1CRN", background_color="#F7F7F7", styles={"border": "1px solid lightgray"}, min_height=700, sizing_mode="stretch_both")
+
+settings = pn.Param(
+    viewer,
+    parameters=["object","extension","representation","color_scheme","custom_color_scheme","effect",],
+    name="⚙️ Settings"
+)
+
+file_input = pn.widgets.FileInput(accept=','.join('.' + s for s in EXTENSIONS[1:]))
+
+def filename_callback(target, event):
+    target.extension = event.new.split('.')[1]
+
+def value_callback(target, event):
+    target.object = event.new.decode('utf-8')
+
+file_input.link(viewer, callbacks={'value': value_callback, 'filename': filename_callback})
+
+header = pn.widgets.StaticText(value='<b>{0}</b>'.format("&#128190; File Input"))
+file_column = pn.layout.Column(header, file_input)
+
+layout = pn.Param(
+    viewer,
+    parameters=["sizing_mode", "width", "height", "background_color"],
+    name="&#128208; Layout"
+)
+
+pn.Row(
+    viewer,
+    pn.WidgetBox(settings, layout, width=300, sizing_mode="fixed",),
+)
+
+
+accent="#D2386C"
+
+pn.template.FastListTemplate(
+    site="Panel Chemistry", site_url="./",
+    title="NGLViewer", 
+    sidebar=[file_column, settings, layout],
+    main=[viewer],
+    accent_base_color=accent, header_background=accent,
+).servable();
+

src/panel_chemistry/bokeh_extensions/jsme_editor.py

@@ -23,8 +23,8 @@ class JSMEEditor(HTMLBox):  # pylint: disable=too-few-public-methods,too-many-an
 
     value = String(default="")
     format = String(default="smiles")
-    subscriptions = List(String, default=[]) # type: ignore
-    options = List(String, default=[]) # type: ignore
+    subscriptions = List(String, default=[])  # type: ignore
+    options = List(String, default=[])  # type: ignore
 
     jme = String(default="")
     smiles = String(default="")

src/panel_chemistry/bokeh_extensions/jsme_editor.ts

@@ -1,17 +1,10 @@
 // See https://docs.bokeh.org/en/latest/docs/reference/models/layouts.html
-import { HTMLBox, HTMLBoxView } from "./layout"
+import { uuidv4, HTMLBox, HTMLBoxView } from "./layout"
 
 // See https://docs.bokeh.org/en/latest/docs/reference/core/properties.html
 import * as p from "@bokehjs/core/properties"
 import {div} from "@bokehjs/core/dom"
 
-function uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-      return v.toString(16);
-    });
-  }
-
 const notSubscribed = "Not Subscribed"
 
 function readSDFValue(jsmeElement: any) {

src/panel_chemistry/bokeh_extensions/layout.ts

@@ -2,6 +2,13 @@ import {isArray} from "@bokehjs/core/util/types"
 import {LayoutDOM, LayoutDOMView} from "@bokehjs/models/layouts/layout_dom"
 import * as p from "@bokehjs/core/properties"
 
+export function uuidv4() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
 export function set_size(el: HTMLElement, model: HTMLBox, adjustMargin: boolean = true): void {
     let width_policy = model.width != null ? "fixed" : "fit"
     let height_policy = model.height != null ? "fixed" : "fit"

src/panel_chemistry/bokeh_extensions/ngl_viewer.py

@@ -16,7 +16,7 @@ class NGLViewer(LayoutDOM):  # pylint: disable=too-many-ancestors
     effect = String("")
 
     __javascript__ = [
-        "https://unpkg.com/ngl@2.0.0-dev.37/dist/ngl.js",
+        "https://unpkg.com/ngl@2.2.1/dist/ngl.js",
     ]
 
     __js_skip__ = {
@@ -25,7 +25,7 @@ class NGLViewer(LayoutDOM):  # pylint: disable=too-many-ancestors
 
     __js_require__ = {
         "paths": {
-            "NGL": "https://unpkg.com/ngl@2.0.0-dev.37/dist/ngl",
+            "NGL": "https://unpkg.com/ngl@2.2.1/dist/ngl",
         },
         "exports": {"NGL": "NGL"},
     }

src/panel_chemistry/bokeh_extensions/ngl_viewer.ts

@@ -1,5 +1,6 @@
 import * as p from "@bokehjs/core/properties"
-import {HTMLBox, HTMLBoxView} from "./layout"
+import {uuidv4, HTMLBox, HTMLBoxView} from "./layout"
+import {div} from "@bokehjs/core/dom"
 
 declare namespace NGL {
   class AtomProxy{
@@ -86,8 +87,19 @@ declare namespace NGL {
 }
 export class NGLViewerView extends HTMLBoxView {
     model: NGLViewer
+    container: HTMLDivElement;
+    _intialized: boolean = false
     _stage: any
 
+    initialize(): void {
+      super.initialize()
+      this.container = div({
+          class: "ngl-viewer",
+          id: "ngl-viewer-" + uuidv4(),
+          style: {width: "100%", height: "100%"}
+        })
+      }
+
     connect_signals(): void {
       super.connect_signals()
       this.connect(this.model.properties.object.change, this.updateStage)
@@ -101,22 +113,34 @@ export class NGLViewerView extends HTMLBoxView {
 
     render(): void {
         super.render()
-        this.el.id = "viewport"
+        this._intialized = false
+        this.createNGLViewer()
+    }
+    setBackgroundcolor(): void {
+      this._stage.setParameters( { backgroundColor: this.model.background_color} );
+    }
+    createNGLViewer(){
+        if (this._intialized)
+          return
 
+        document.body.appendChild(this.container)
+
         const wn = (window as any)
         const ngl = wn.NGL
-
-        this._stage = new ngl.Stage(this.el);
+        
+        this._stage = new ngl.Stage(this.container.id);
         this.setBackgroundcolor()
         const stage = this._stage
         this.updateStage();
         window.addEventListener( "resize", function(){
             stage.handleResize();
         }, false );
-        }
-    setBackgroundcolor(): void {
-      console.log(this.model.background_color)
-      this._stage.setParameters( { backgroundColor: this.model.background_color} );
+
+        // Remove from document body and add to shadow DOM
+        document.body.removeChild(this.container)
+        this.shadow_el.appendChild(this.container)
+
+        this._intialized = true
     }
     after_layout(): void {
       super.after_layout()

src/panel_chemistry/pane/ngl_viewer.py

@@ -96,10 +96,11 @@ class NGLViewer(PaneBase):  # pylint: disable=too-many-ancestors
     to show and analyse pdb molecule structures"""
 
     object = param.String(
+        default="",
         doc="""
         The object to display. For example an url like 'rcsb://3dqb.pdb', 'rcsb://1NKT', '1NKT'.
         You can also specify a extension string if you define the extension 
-        in the extension parameter"""
+        in the extension parameter""",
     )
     background_color = param.Color(
         doc="""
@@ -163,15 +164,6 @@ def _get_model(self, doc, root=None, parent=None, comm=None):
             props["object"] = self.object
         model = _NGLViewer(**props)
         root = root or model
-        # self._link_props(
-        #     model,
-        #     [
-        #         "event",
-        #     ],
-        #     doc,
-        #     root,
-        #     comm,
-        # )
         self._models[root.ref["id"]] = (model, parent)
         return model