From 249467b55ad1c141ae665508d5055ec75fffde47 Mon Sep 17 00:00:00 2001
From: Hai Nguyen <hainm@users.noreply.github.com>
Date: Tue, 3 Dec 2024 20:11:20 -0500
Subject: [PATCH] molstar 4.9.0 (#1147)

---
 js/package.json              |  2 +-
 js/src/molstarview/widget.ts | 14 ++++++++++++--
 notebooks/molstarview.ipynb  | 18 +++++++++---------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/js/package.json b/js/package.json
index a7bab0c0..23648445 100644
--- a/js/package.json
+++ b/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": {
diff --git a/js/src/molstarview/widget.ts b/js/src/molstarview/widget.ts
index 6252a275..4560215b 100644
--- a/js/src/molstarview/widget.ts
+++ b/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
-};
\ No newline at end of file
+};
diff --git a/notebooks/molstarview.ipynb b/notebooks/molstarview.ipynb
index dc0faccc..0f03c4ff 100644
--- a/notebooks/molstarview.ipynb
+++ b/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
       },