molstar 4.9.0

Author: hainm

js/package.json

@@ -62,7 +62,7 @@
     "jquery-ui": "^1.12.1",
     "lodash": "^4.17.4",
     "ngl": "2.4.0",
-    "molstar": "3.9.0",
+    "molstar": "4.9.0",
     "underscore": "^1.8.3"
   },
   "devDependencies": {

js/src/molstarview/widget.ts

@@ -8,6 +8,7 @@ import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
 import { PLUGIN_VERSION } from 'molstar/lib/mol-plugin/version';
 import './light.css'; // npx sass node_modules/molstar/lib/mol-plugin-ui/skin/light.scss > light.css
 import * as representation from "./representation";
+import { renderReact18 } from "molstar/lib/mol-plugin-ui/react18";
 
 
 // import { basicSpec } from "./ui"
@@ -69,7 +70,16 @@ export class MolstarView extends widgets.DOMWidgetView  {
 
     async initializeDisplay() {
         this.setupContainer();
-        this.plugin = await createPluginUI(this.container);
+        this.plugin = await createPluginUI({
+            target: this.container,
+            render: (component, container) => {
+                renderReact18(component, container);
+            },
+            spec: undefined, // or provide a PluginUISpec object if needed
+            onBeforeUIRender: async (ctx) => {
+                // Implement the onBeforeUIRender logic here
+            }
+        });
         this._focused = false;
         await this.checkLeaderView();
     }
@@ -312,4 +322,4 @@ export class MolstarView extends widgets.DOMWidgetView  {
 module.exports = {
     'MolstarModel': MolstarModel,
     'MolstarView': MolstarView
-};
+};

notebooks/molstarview.ipynb

@@ -9,7 +9,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "9ffbadcecf2c413aa0754e80c9b08b37",
+       "model_id": "9b5586a7f3c243ceb16e803e97db27e5",
        "version_major": 2,
        "version_minor": 0
       },
@@ -21,7 +21,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "1141c093551641e0b45f0b5f2383307d",
+       "model_id": "b71b8c0bdd014221b67768790f63fdb1",
        "version_major": 2,
        "version_minor": 0
       },
@@ -62,7 +62,7 @@
     {
      "data": {
       "text/plain": [
-       "'3.9.0'"
+       "'4.9.0'"
       ]
      },
      "execution_count": 3,
@@ -91,7 +91,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "1141c093551641e0b45f0b5f2383307d",
+       "model_id": "b71b8c0bdd014221b67768790f63fdb1",
        "version_major": 2,
        "version_minor": 0
       },
@@ -118,7 +118,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 25,
+   "execution_count": 5,
    "id": "d3267052-054f-4d51-812d-e0012e8523c9",
    "metadata": {},
    "outputs": [],
@@ -128,7 +128,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 26,
+   "execution_count": 6,
    "id": "5b5e6df6-a3c2-4e31-817e-cd8b4bd344b4",
    "metadata": {},
    "outputs": [],
@@ -138,7 +138,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": 7,
    "id": "9fbe9a38-d165-4636-ab2d-53dd3c83b035",
    "metadata": {},
    "outputs": [],
@@ -148,14 +148,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 28,
+   "execution_count": 8,
    "id": "ebe3e41b-a4cd-4ffe-be1f-a2568fa62144",
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "ff10e43f5a5a48a39f6486e0af7f0d54",
+       "model_id": "df43027d622d48bf837514105f5876c1",
        "version_major": 2,
        "version_minor": 0
       },