0.6.1 Patch for NGL fixes (#544)

* Added ref instead of id * Updated package for 0.6.1 release
plotly · Feb 15, 2021 · 43faebe · 43faebe
1 parent 1238023
commit 43faebe
Show file tree

Hide file tree

Showing 14 changed files with 76 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.6.1] - 2021-02-15
+### Fixed
+* [#544](https://github.com/plotly/dash-bio/pull/544) Miscellaneous fixes for NglMoleculeViewer component.
+
 ## [0.6.0] - 2021-01-28
 ### Added
 * [#537](https://github.com/plotly/dash-bio/pull/537) Added Dash-IGV component.

diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: dashBio
 Title: Open-source Bioinformatics Components for Dash
-Version: 0.6.0
+Version: 0.6.1
 Description: A suite of components that makes it simpler to analyze and visualize bioinformatics data and interact with them in a Dash application.
 Depends: R (>= 3.0.2), manhattanly
 Imports: dash

diff --git a/R/internal.R b/R/internal.R
@@ -1,138 +1,138 @@
 .dashBio_js_metadata <- function() {
 deps_metadata <- list(`dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-alignment.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-circos.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-ideogram.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-igv.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-moleculeviewer2.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-moleculeviewer3.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-needle.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-nglmoleculeviewer.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-onco.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-sequence.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-speck.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-alignment.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-circos.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-ideogram.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-igv.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-moleculeviewer2.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-moleculeviewer3.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-needle.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-nglmoleculeviewer.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-onco.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-sequence.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'async-speck.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
-version = "0.6.0", src = list(href = NULL,
+version = "0.6.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'bundle.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",

diff --git a/dash_bio/NglMoleculeViewer.py b/dash_bio/NglMoleculeViewer.py
@@ -15,9 +15,9 @@ class NglMoleculeViewer(Component):
 Keyword arguments:
 - id (string; optional): The ID of this component, used to identify dash components in callbacks.
 The ID needs to be unique across all of the components in an app.
-- width (string | number; default '500px'): The width (in px or as a number) of the container
+- width (string | number; default '600px'): The width (in px or as a number) of the container
 in which the molecules will be displayed.
-- height (string | number; default '500px'): The height (in px or as a number) of the container
+- height (string | number; default '600px'): The height (in px or as a number) of the container
 in which the molecules will be displayed.
 - stageParameters (dict; default {
     quality: 'medium',
@@ -75,7 +75,7 @@ class NglMoleculeViewer(Component):
 ext: file extensions (pdb or cif)
 selectedValue: pdbString
 chain: ALL if the whole molecule shoud be displayed, e.g. A for showing only chain A
-aaRange: ALL if the whole molecule shoud be displayed, e.g. 1:50 for showing only 50 atoms
+aaRange: ALL if the whole molecule should be displayed, e.g. 1:50 for showing only 50 atoms
 color: chain color
 chosen.atoms: string of the chosen Atoms, e.g. 50,100,150
               --> chosen eatoms changed to colored 'ball'

diff --git a/dash_bio/async-nglmoleculeviewer.js b/dash_bio/async-nglmoleculeviewer.js
diff --git a/dash_bio/bundle.js b/dash_bio/bundle.js
diff --git a/dash_bio/metadata.json b/dash_bio/metadata.json
@@ -1933,7 +1933,7 @@
         "required": false,
         "description": "The width (in px or as a number) of the container\nin which the molecules will be displayed.",
         "defaultValue": {
-          "value": "'500px'",
+          "value": "'600px'",
           "computed": false
         }
       },
@@ -1952,7 +1952,7 @@
         "required": false,
         "description": "The height (in px or as a number) of the container\nin which the molecules will be displayed.",
         "defaultValue": {
-          "value": "'500px'",
+          "value": "'600px'",
           "computed": false
         }
       },
@@ -2098,7 +2098,7 @@
           }
         },
         "required": false,
-        "description": "The data (in JSON format) that will be used to display the molecule\nfilename: name of the used pdb/cif file\next: file extensions (pdb or cif)\nselectedValue: pdbString\nchain: ALL if the whole molecule shoud be displayed, e.g. A for showing only chain A\naaRange: ALL if the whole molecule shoud be displayed, e.g. 1:50 for showing only 50 atoms\ncolor: chain color\nchosen.atoms: string of the chosen Atoms, e.g. 50,100,150\n              --> chosen eatoms changed to colored 'ball'\nchosen.residues: string of the chosen residues, e.g. 50,100,150\n                 --> C alpha of chosen residue changed to colored 'ball'\nconfig.input: content of the pdb file\nconfig.type: format of config.input\nuploaded: bool if file from local storage (false) or uploaded by user (true)\nresetView: bool if the selection did not change but the view should be resettet (true)",
+        "description": "The data (in JSON format) that will be used to display the molecule\nfilename: name of the used pdb/cif file\next: file extensions (pdb or cif)\nselectedValue: pdbString\nchain: ALL if the whole molecule shoud be displayed, e.g. A for showing only chain A\naaRange: ALL if the whole molecule should be displayed, e.g. 1:50 for showing only 50 atoms\ncolor: chain color\nchosen.atoms: string of the chosen Atoms, e.g. 50,100,150\n              --> chosen eatoms changed to colored 'ball'\nchosen.residues: string of the chosen residues, e.g. 50,100,150\n                 --> C alpha of chosen residue changed to colored 'ball'\nconfig.input: content of the pdb file\nconfig.type: format of config.input\nuploaded: bool if file from local storage (false) or uploaded by user (true)\nresetView: bool if the selection did not change but the view should be resettet (true)",
         "defaultValue": {
           "value": "[\n    {\n        filename: 'placeholder',\n        ext: '',\n        selectedValue: 'placeholder',\n        chain: 'ALL',\n        aaRange: 'ALL',\n        chosen: {\n            chosenAtoms: '',\n            chosenResidues: '',\n        },\n        color: 'red',\n        config: {\n            input: '',\n            type: 'text/plain',\n        },\n        uploaded: false,\n        resetView: false,\n    },\n]",
           "computed": false

diff --git a/dash_bio/package-info.json b/dash_bio/package-info.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-bio",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Dash components for bioinformatics",
   "repository": {
     "type": "git",

diff --git a/inst/deps/async-nglmoleculeviewer.js b/inst/deps/async-nglmoleculeviewer.js
diff --git a/inst/deps/bundle.js b/inst/deps/bundle.js
diff --git a/man/dashbioNglMoleculeViewer.Rd b/man/dashbioNglMoleculeViewer.Rd
@@ -74,7 +74,7 @@ filename: name of the used pdb/cif file
 ext: file extensions (pdb or cif)
 selectedValue: pdbString
 chain: ALL if the whole molecule shoud be displayed, e.g. A for showing only chain A
-aaRange: ALL if the whole molecule shoud be displayed, e.g. 1:50 for showing only 50 atoms
+aaRange: ALL if the whole molecule should be displayed, e.g. 1:50 for showing only 50 atoms
 color: chain color
 chosen.atoms: string of the chosen Atoms, e.g. 50,100,150
               --> chosen eatoms changed to colored 'ball'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-bio",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Dash components for bioinformatics",
   "repository": {
     "type": "git",

diff --git a/src/lib/components/NglMoleculeViewer.react.js b/src/lib/components/NglMoleculeViewer.react.js
@@ -21,9 +21,9 @@ export default class NglMoleculeViewer extends Component {
     }
 }
 
-const defaultHeight = '500px';
+const defaultHeight = '600px';
 
-const defaultWidth = '500px';
+const defaultWidth = '600px';
 
 const defaultStageParameters = {
     quality: 'medium',
@@ -144,7 +144,7 @@ NglMoleculeViewer.propTypes = {
      * ext: file extensions (pdb or cif)
      * selectedValue: pdbString
      * chain: ALL if the whole molecule shoud be displayed, e.g. A for showing only chain A
-     * aaRange: ALL if the whole molecule shoud be displayed, e.g. 1:50 for showing only 50 atoms
+     * aaRange: ALL if the whole molecule should be displayed, e.g. 1:50 for showing only 50 atoms
      * color: chain color
      * chosen.atoms: string of the chosen Atoms, e.g. 50,100,150
      *               --> chosen eatoms changed to colored 'ball'

diff --git a/src/lib/fragments/NglMoleculeViewer.react.js b/src/lib/fragments/NglMoleculeViewer.react.js
@@ -20,12 +20,13 @@ export default class NglMoleculeViewer extends Component {
             orientationMatrix: null,
             structuresList: [],
         };
+        this.ref = React.createRef();
     }
 
     componentDidMount() {
-        const {id, stageParameters, width, height} = this.props;
+        const {stageParameters, width, height} = this.props;
         const params = {...stageParameters};
-        const stage = new Stage(id, params);
+        const stage = new Stage(this.ref.current, params);
         const orientationMatrix = stage.viewerControls.getOrientation();
 
         const widthStr = isNumeric(width) ? width + 'px' : width;
@@ -36,7 +37,14 @@ export default class NglMoleculeViewer extends Component {
     }
 
     shouldComponentUpdate(prevProps, nextProps) {
-        const {stageParameters, data, downloadImage, molStyles} = this.props;
+        const {
+            stageParameters,
+            data,
+            downloadImage,
+            molStyles,
+            height,
+            width,
+        } = this.props;
 
         // check if data has changed
         if (data !== null && prevProps.data !== null) {
@@ -79,16 +87,35 @@ export default class NglMoleculeViewer extends Component {
             return true;
         }
 
+        // check if Height or Width has been changed
+        if (
+            !equals(prevProps.height, height) ||
+            !equals(prevProps.width, width)
+        ) {
+            return true;
+        }
+
         // no update since neither the data nor the stage paramas have changed
         return false;
     }
 
     componentDidUpdate() {
-        const {data, stageParameters, downloadImage, sideByside} = this.props;
+        const {
+            data,
+            stageParameters,
+            downloadImage,
+            sideByside,
+            height,
+            width,
+        } = this.props;
         const {stage, structuresList} = this.state;
 
+        const widthStr = isNumeric(width) ? width + 'px' : width;
+        const heightStr = isNumeric(height) ? height + 'px' : height;
+
         // update the stage with the new stage params
         stage.setParameters(stageParameters);
+        stage.setSize(widthStr, heightStr);
 
         if (
             downloadImage === undefined ||
@@ -280,7 +307,7 @@ export default class NglMoleculeViewer extends Component {
 
     render() {
         const {id} = this.props;
-        return <div id={id} />;
+        return <div id={id} ref={this.ref} />;
     }
 }