1.1.2 update

CHANGELOG.md

@@ -1,5 +1,9 @@
 # dash-molstar Changelog
 
+## [1.1.2] - 2024-02-22
+### Bug fixes
+- Fixed the problem when loading multiple structures with components.
+
 ## [1.1.1] - 2023-09-30
 ### Bug fixes
 - Fixed the problem when selected only one target, the plugin would fail.

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dashMolstar
 Title: The molstar plugin for plotly dash framework
-Version: 1.1.1
+Version: 1.1.2
 Description: The molstar plugin for plotly dash framework
 Depends: R (>= 3.0.2)
 Imports: 

Project.toml

@@ -2,7 +2,7 @@
 name = "DashMolstar"
 uuid = "1b08a953-4be3-4667-9a23-14ed597df146"
 authors = ["SimonSun <[email protected]>"]
-version = "1.1.1"
+version = "1.1.2"
 
 [deps]
 Dash = "1b08a953-4be3-4667-9a23-3db579824955"

R/internal.R

@@ -1,18 +1,18 @@
 .dashMolstar_js_metadata <- function() {
 deps_metadata <- list(`dash_molstar` = structure(list(name = "dash_molstar",
-version = "1.1.1", src = list(href = NULL,
+version = "1.1.2", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'rcsb-molstar.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashMolstar",
 all_files = FALSE), class = "html_dependency"),
 `dash_molstar` = structure(list(name = "dash_molstar",
-version = "1.1.1", src = list(href = NULL,
+version = "1.1.2", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_molstar.min.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashMolstar",
 all_files = FALSE), class = "html_dependency"),
 `dash_molstar` = structure(list(name = "dash_molstar",
-version = "1.1.1", src = list(href = NULL,
+version = "1.1.2", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_molstar.min.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashMolstar",

dash_molstar/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "dash_molstar",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "The molstar plugin for plotly dash framework",
   "repository": {
     "type": "git",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash_molstar",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "The molstar plugin for plotly dash framework",
   "repository": {
     "type": "git",

src/DashMolstar.jl

@@ -3,7 +3,7 @@ module DashMolstar
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "1.1.1"
+const version = "1.1.2"
 
 include("jl/molstarviewer.jl")
 

src/lib/components/MolstarViewer.react.js

@@ -95,7 +95,7 @@ export default class MolstarViewer extends Component {
         if (model_index >= 0) {
             const id = this.viewer._plugin.managers.structure.hierarchy.current.structures[model_index].cell.obj.data.units[0].model.id;
             const targets = [];
-            if (selection.targets) {
+            if (selection.targets && selection.targets[0] !== null) {
                 // convert data from python to molstar data structure
                 for (let target of selection.targets) {
                     const newTarget = {
@@ -122,7 +122,7 @@ export default class MolstarViewer extends Component {
         if (model_index >= 0) {
             const id = this.viewer._plugin.managers.structure.hierarchy.current.structures[model_index].cell.obj.data.units[0].model.id;
             const targets = [];
-            if (focus.targets) {
+            if (focus.targets && focus.targets[0] !== null) {
                 // convert data from python to molstar data structure
                 for (let target of focus.targets) {
                     const newTarget = {
@@ -146,24 +146,47 @@ export default class MolstarViewer extends Component {
     }
     loadData(data) {
         if (typeof data === "object") {
-            if (data.type === "mol") {
-                // first load the structure into viewer
-                this.viewer.loadStructureFromData(data.data, data.format, false).then(() => {
+            if (data.type === "mol") { // loading a structure
+                const model_index = Object.keys(this.loadedStructures).length + 1;
+                this.loadedStructures[model_index] = null;
+                this.viewer.loadStructureFromData(data.data, data.format, false).then((result) => {
+                    // add the structure ID to this.loadedStructures
+                    this.loadedStructures[model_index] = result.structure.cell.obj.data.units[0].model.id;
                     // if user specified component(s), add them to the structure
                     if (data.hasOwnProperty('component')) {
+                        // binding structure ID to component
+                        if (Array.isArray(data.component)) {
+                            data.component.forEach((component) => {
+                                component.modelId = this.loadedStructures[model_index];
+                            });
+                        } else if (typeof data.component === "object") {
+                            data.component.modelId = this.loadedStructures[model_index];
+                        }
+                        console.log(data.component)
                         this.handleComponentChange(data.component);
                     }
                 });
-            } else if (data.type === 'url') {
+            } else if (data.type === 'url') { // loading a URL
                 // load url for molecules
-                if (data.urlfor === 'mol') {
-                    this.viewer.loadStructureFromUrl(data.data, data.format, false).then(() => {
+                if (data.urlfor === 'mol') { // loading a structure from URL
+                    const model_index = Object.keys(this.loadedStructures).length + 1;
+                    this.loadedStructures[model_index] = null;
+                    this.viewer.loadStructureFromUrl(data.data, data.format, false).then((result) => {
+                        // add the structure ID to this.loadedStructures
+                        this.loadedStructures[model_index] = result.structure.cell.obj.data.units[0].model.id;
                         if (data.hasOwnProperty('component')) {
+                            // binding structure ID to component
+                            if (Array.isArray(data.component)) {
+                                data.component.forEach((component) => {
+                                    component.modelId = this.loadedStructures[model_index];
+                                });
+                            } else if (typeof data.component === "object") {
+                                data.component.modelId = this.loadedStructures[model_index];
+                            }
                             this.handleComponentChange(data.component);
                         }
                     });
-                } else {
-                    // load url for molstar snapshot file
+                } else { // load url for molstar snapshot file
                     this.viewer.loadSnapshotFromUrl(data.data, data.format);
                 }
             } else if (data.type === 'shape') {
@@ -188,30 +211,24 @@ export default class MolstarViewer extends Component {
         }//);
     }
     addComponent(component) {
-        // check if there was any structure loaded in the viewer
-        const model_index = this.viewer._plugin.managers.structure.hierarchy.current.structures.length - 1;
-        if (model_index >= 0) {
-            // get molstar internal structure ID for the last loaded model
-            const id = this.viewer._plugin.managers.structure.hierarchy.current.structures[model_index].cell.obj.data.units[0].model.id;
-            // construct molstar target object from python helper data
-            const targets = [];
-            for (let target of component.targets) {
-                const newTarget = {
-                    modelId: id,
-                    ...target.author ? {authAsymId: target.chain_name} : {labelAsymId: target.chain_name},
-                }
-                // check if any residue number has been selected
-                if (target.hasOwnProperty('residue_numbers')) {
-                    if (target.author) {
-                        newTarget.authSeqId = target.residue_numbers;
-                    } else {
-                        newTarget.labelSeqId = target.residue_numbers;
-                    }
+        // construct molstar target object from python helper data
+        const targets = [];
+        for (let target of component.targets) {
+            const newTarget = {
+                modelId: component.modelId,
+                ...target.auth ? {authAsymId: target.chain_name} : {labelAsymId: target.chain_name},
+            }
+            // check if any residue number has been selected
+            if (target.hasOwnProperty('residue_numbers')) {
+                if (target.auth) {
+                    newTarget.authSeqId = target.residue_numbers;
+                } else {
+                    newTarget.labelSeqId = target.residue_numbers;
                 }
-                targets.push(newTarget);
             }
-            this.viewer.createComponent(component.label, targets, component.representation);
+            targets.push(newTarget);
         }
+        this.viewer.createComponent(component.label, targets, component.representation);
     }
     componentDidMount() {
         if (this.viewerRef.current) {