Updating JSMEEditor to work with Panel 1 / Bokeh 3

[hoxbro]

import panel as pn
from panel_chemistry.widgets import JSMEEditor

pn.extension("jsme")
smiles = "N[C@@H](CCC(=O)N[C@@H](CS)C(=O)NCC(=O)O)C(=O)O"

pn.panel(f"Panel: {pn.__version__}").servable()
JSMEEditor(value=smiles, height=500, width=500).servable()

The document.body.appendChild(this.container) is not usually needed but is here so JSME can find the element.

[hoxbro]

Don't have time to look into NGLViewer, these are the diff I made so far:

diff --git a/src/panel_chemistry/bokeh_extensions/ngl_viewer.py b/src/panel_chemistry/bokeh_extensions/ngl_viewer.py
index b15adce..2db7b9b 100644
--- a/src/panel_chemistry/bokeh_extensions/ngl_viewer.py
+++ b/src/panel_chemistry/bokeh_extensions/ngl_viewer.py
@@ -7,16 +7,16 @@ class NGLViewer(LayoutDOM):  # pylint: disable=too-many-ancestors
     """The [NGL Viewer](https://github.com/nglviewer/ngl) can be used
     to show and analyse pdb molecule structures"""
 
-    object = String()
-    background_color = String()
-    extension = String()
-    representation = String()
-    color_scheme = String()
-    effect = String()
-    custom_color_scheme = List(List(String))
+    object = String(default="")
+    background_color = String(default="")
+    extension = String(default="")
+    representation = String(default="ribbon")
+    color_scheme = String(default="chainid")
+    effect = String(default="")
+    custom_color_scheme = List(List(String), default=[["white", "*"]])
 
     __javascript__ = [
-        "https://unpkg.com/[email protected]/dist/ngl.js",
+        "https://unpkg.com/[email protected]/dist/ngl.js",
     ]
 
     __js_skip__ = {
@@ -25,7 +25,7 @@ class NGLViewer(LayoutDOM):  # pylint: disable=too-many-ancestors
 
     __js_require__ = {
         "paths": {
-            "NGL": "https://unpkg.com/[email protected]/dist/ngl",
+            "NGL": "https://unpkg.com/[email protected]/dist/ngl",
         },
         "exports": {"NGL": "NGL"},
     }
diff --git a/src/panel_chemistry/bokeh_extensions/ngl_viewer.ts b/src/panel_chemistry/bokeh_extensions/ngl_viewer.ts
index 0790ddf..4d7a3f0 100644
--- a/src/panel_chemistry/bokeh_extensions/ngl_viewer.ts
+++ b/src/panel_chemistry/bokeh_extensions/ngl_viewer.ts
@@ -189,6 +189,7 @@ export namespace NGLViewer {
 export interface NGLViewer extends NGLViewer.Attrs { }
 export class NGLViewer extends HTMLBox {
     properties: NGLViewer.Props
+    __view_type__: NGLViewerView
 
     constructor(attrs?: Partial<NGLViewer.Attrs>) {
       super(attrs)
@@ -196,7 +197,7 @@ export class NGLViewer extends HTMLBox {
 
     static __module__ = "panel_chemistry.bokeh_extensions.ngl_viewer"
 
-    static init_NGLViewer(): void {
+    static {
       this.prototype.default_view = NGLViewerView;
 
       this.define<NGLViewer.Props>(({ String, Any }) => ({
@@ -205,7 +206,7 @@ export class NGLViewer extends HTMLBox {
         background_color:             [ String, ""],
         representation:              [ String, "ribbon"],
         color_scheme:               [ String, "chainid"],
-        custom_color_scheme:               [ Any, "chainid"],
+        custom_color_scheme:               [ Any, [["white", "*"]]],
         effect:               [ String, ""],
       }))
 
@@ -214,4 +215,4 @@ export class NGLViewer extends HTMLBox {
         width: 600
       });
     }
-  }
\ No newline at end of file
+  }
diff --git a/src/panel_chemistry/pane/ngl_viewer.py b/src/panel_chemistry/pane/ngl_viewer.py
index addbd42..35370c4 100644
--- a/src/panel_chemistry/pane/ngl_viewer.py
+++ b/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"""
+        You can also specify a extension string if you define the extension
+        in the extension parameter""",
     )
     background_color = param.Color(
         doc="""

[MarcSkovMadsen]

Thanks @hoxbro . This one works for me now.

Let me try to do another one my self using the changes you applied here.

[hoxbro]

Glad to hear 👍

The problem where I stopped at was I got the following console logs:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mmtf.rcsb.org/v1.0/full/1CRN. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 301.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mmtf.rcsb.org/v1.0/full/1CRN. (Reason: CORS request did not succeed). Status code: (null).
STAGE LOG error loading file: 'network error' stage.ts:279:12
Uncaught (in promise) error loading file: 'network error'

Being emitted from this line:

panel-chemistry/src/panel_chemistry/bokeh_extensions/ngl_viewer.ts

Line 169 in da0f009

this._stage.loadFile("rcsb://" + model.object).then(finish)