More stuff from molstar (#1151)

nglviewer · Dec 8, 2024 · 1d953bd · 1d953bd
1 parent ee46f07
commit 1d953bd
Show file tree

Hide file tree

Showing 8 changed files with 248 additions and 69 deletions.
diff --git a/js/package.json b/js/package.json
@@ -52,7 +52,7 @@
     "watch": "run-p watch:src watch:labextension",
     "watch:src": "tsc -w",
     "watch:labextension": "jupyter labextension watch .",
-    "watch:install": "nodemon --watch src --watch package.json --exec 'npm install'",
+    "watch:prepublish": "nodemon --watch src --watch package.json --exec 'date && npm run prepublish && date'",
     "test": "mocha"
   },
   "dependencies": {

diff --git a/js/src/molstarview/representation.ts b/js/src/molstarview/representation.ts
@@ -1,6 +1,7 @@
+import { PluginUIContext } from "molstar/lib/mol-plugin-ui/context"
 
 export
-function addRepresentation(plugin, params, modelIndex){
+function addRepresentation(plugin: PluginUIContext, params, modelIndex){
     var st = plugin.managers.structure.hierarchy.current.structures[modelIndex]
     console.log("Calling from addRepresentation", st, params, modelIndex)
     var components = st.components
@@ -13,9 +14,9 @@ function addRepresentation(plugin, params, modelIndex){
 }
 
 export
-function removeRepresentation(){
+function removeRepresentation(plugin: PluginUIContext, modelIndex){
 }
 
-export 
+export
 function clearRepresentation(){
 }
diff --git a/js/src/molstarview/widget.ts b/js/src/molstarview/widget.ts
@@ -9,6 +9,12 @@ 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 { PluginUIContext } from 'molstar/lib/mol-plugin-ui/context';
+import { loadMVS } from 'molstar/lib/extensions/mvs/load';
+import { MVSData } from 'molstar/lib/extensions/mvs/mvs-data';
+import { MolViewSpec } from 'molstar/lib/extensions/mvs/behavior';
+import { PluginUISpec  } from 'molstar/lib/mol-plugin-ui/spec';
+import { DefaultPluginSpec, PluginSpec } from 'molstar/lib/mol-plugin/spec';
 
 
 // import { basicSpec } from "./ui"
@@ -47,7 +53,7 @@ export class MolstarModel extends widgets.DOMWidgetModel {
 
 // Custom View. Renders the widget model.
 export class MolstarView extends widgets.DOMWidgetView  {
-    plugin: any;
+    plugin: PluginUIContext;
     container: any;
     isLeader: boolean;
     _focused: boolean;
@@ -70,12 +76,21 @@ export class MolstarView extends widgets.DOMWidgetView  {
 
     async initializeDisplay() {
         this.setupContainer();
+
+        var defaultSpec = DefaultPluginSpec();
+        var spec: PluginUISpec = {
+            ...defaultSpec,
+            behaviors: [
+            ...defaultSpec.behaviors,
+            PluginSpec.Behavior(MolViewSpec)
+            ]
+        };
         this.plugin = await createPluginUI({
             target: this.container,
             render: (component, container) => {
                 renderReact18(component, container);
             },
-            spec: undefined, // or provide a PluginUISpec object if needed
+            spec: spec,
             onBeforeUIRender: async (ctx) => {
                 // Implement the onBeforeUIRender logic here
             }
@@ -295,7 +310,7 @@ export class MolstarView extends widgets.DOMWidgetView  {
 
     setCamera(params: any) {
         var durationMs = 0.0;
-        this.plugin.canvas3d.requestCameraReset({ durationMs, params });
+        this.plugin.canvas3d.requestCameraReset({ durationMs, ...params });
     }
 
     getCamera() {
@@ -317,6 +332,16 @@ export class MolstarView extends widgets.DOMWidgetView  {
             });
         }
     }
+
+    async loadMolstarSpec(spec_json: string, options: any) {
+        const data = MVSData.fromMVSJ(spec_json);
+        console.log('Loading Molstar spec:', data);
+        try {
+            await loadMVS(this.plugin, data, options);
+        } catch (error) {
+            console.error('Error loading Molstar spec:', error);
+        };
+    }
 };
 
 module.exports = {

diff --git a/nglview/widget_molstar.py b/nglview/widget_molstar.py
@@ -1,13 +1,12 @@
 # Code is copied/adapted from nglview
 import base64
 import ipywidgets as widgets
+from .utils import widget_utils
 from traitlets import (Bool, Dict, Integer,
-                       Unicode, observe)
+                       Unicode)
 from ._frontend import __frontend_version__
 from .widget_base import WidgetBase
-from .utils.py_utils import (FileManager, _camelize_dict, _update_url,
-                             encode_base64, get_repr_names_from_dict,
-                             seq_to_string)
+from .utils.py_utils import (_camelize_dict)
 
 
 
@@ -25,6 +24,7 @@ def __init__(self):
         super().__init__()
         self._molstar_component_ids = []
         self._state = None
+        widget_utils._add_repr_method_shortcut(self, self)
 
     def _handle_nglview_custom_message(self, widget, msg, buffers):
         msg_type = msg.get("type")
@@ -95,4 +95,8 @@ def add_representation(self, **params):
         self._remote_call('addRepresentation',
                           args=[
                               params, model_index
-                          ])
+                          ])
+
+    def load_spec(self, state, **options):
+        self._remote_call('loadMolstarSpec',
+                  args=[state, options])
diff --git a/notebooks/molstarview.ipynb b/notebooks/molstarview.ipynb
diff --git a/notebooks/molstarview_sandbox.ipynb b/notebooks/molstarview_sandbox.ipynb
@@ -0,0 +1,74 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "id": "125daa9e-cce8-4241-8792-9d530da2e144",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "\n"
+     ]
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "08a1061f04434b9aa4998328d2983c9a",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "MolstarView()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import nglview as nv\n",
+    "from nglview.widget_molstar import MolstarView\n",
+    "\n",
+    "view = MolstarView()\n",
+    "st = nv.FileStructure(nv.datafiles.PDB)\n",
+    "view.add_structure(st)\n",
+    "print(view._molstar_version)\n",
+    "view"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 24,
+   "id": "8ee38d57-d961-4371-89f1-96759c2c2a6a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "view.add_hyperball()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/notebooks/molviewspec.ipynb b/notebooks/molviewspec.ipynb
@@ -0,0 +1,77 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "fedefdce-ce21-4c3c-90bd-27909fe17413",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "e74f2c3635cc4b89987bd72f1c25880b",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": []
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "f2dd1db95dca410fa8c99c6839f22ae0",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "MolstarView()"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "from nglview import widget_molstar\n",
+    "import molviewspec as mvs\n",
+    "builder = mvs.create_builder()\n",
+    "# at each step, auto-complete will suggest possible actions depending on the current state of the builder\n",
+    "(\n",
+    "    builder.download(url='https://files.wwpdb.org/download/1cbs.cif')\n",
+    "    .parse(format='mmcif')\n",
+    "    .assembly_structure(assembly_id='1')\n",
+    "    .component()\n",
+    "    .representation()\n",
+    ")\n",
+    "state = builder.get_state()\n",
+    "\n",
+    "view = widget_molstar.MolstarView()\n",
+    "view.load_spec(state)\n",
+    "view"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.7"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}
diff --git a/notebooks/render_image.ipynb b/notebooks/render_image.ipynb
@@ -8,7 +8,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "7e72daa9095544e79a46b6725dcbb108",
+       "model_id": "3e2df05c197a49599a9481a795302d8d",
        "version_major": 2,
        "version_minor": 0
       },
@@ -20,7 +20,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "0fff2ae61f8143e9b891974d78fd6d99",
+       "model_id": "185ff661de334115916eb7787625b3cd",
        "version_major": 2,
        "version_minor": 0
       },