add dash-ngl

R/dashbioNglMoleculeViewer.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-dashbioNglMoleculeViewer <- function(id=NULL, viewportStyle=NULL, stageParameters=NULL, imageParameters=NULL, downloadImage=NULL, pdbString=NULL, data=NULL, molStyles=NULL) {
+dashbioNglMoleculeViewer <- function(id=NULL, viewportWidth=NULL, viewportHeight=NULL, stageParameters=NULL, imageParameters=NULL, downloadImage=NULL, pdbString=NULL, data=NULL, molStyles=NULL) {
 
-    props <- list(id=id, viewportStyle=viewportStyle, stageParameters=stageParameters, imageParameters=imageParameters, downloadImage=downloadImage, pdbString=pdbString, data=data, molStyles=molStyles)
+    props <- list(id=id, viewportWidth=viewportWidth, viewportHeight=viewportHeight, stageParameters=stageParameters, imageParameters=imageParameters, downloadImage=downloadImage, pdbString=pdbString, data=data, molStyles=molStyles)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'NglMoleculeViewer',
         namespace = 'dash_bio',
-        propNames = c('id', 'viewportStyle', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles'),
+        propNames = c('id', 'viewportWidth', 'viewportHeight', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles'),
         package = 'dashBio'
         )
 

dash_bio/NglMoleculeViewer.py

@@ -15,15 +15,10 @@ 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.
-- viewportStyle (dict; default {
-    width: '500px',
-    height: '500px',
-}): The height and the width (in px) of the container
+- viewportWidth (string | number; default '500px'): The width (in px or as a number) of the container
+in which the molecules will be displayed.
+- viewportHeight (string | number; default '500px'): The height (in px or as a number) of the container
 in which the molecules will be displayed.
-It should be in JSON format. viewportStyle has the following type: dict containing keys 'width', 'height'.
-Those keys have the following types:
-  - width (string; optional)
-  - height (string; optional)
 - stageParameters (dict; default {
     quality: 'medium',
     backgroundColor: 'white',
@@ -130,12 +125,12 @@ class NglMoleculeViewer(Component):
   - molSpacingXaxis (number; required)
   - sideByside (boolean; required)"""
     @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, viewportStyle=Component.UNDEFINED, stageParameters=Component.UNDEFINED, imageParameters=Component.UNDEFINED, downloadImage=Component.UNDEFINED, pdbString=Component.UNDEFINED, data=Component.UNDEFINED, molStyles=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'viewportStyle', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles']
+    def __init__(self, id=Component.UNDEFINED, viewportWidth=Component.UNDEFINED, viewportHeight=Component.UNDEFINED, stageParameters=Component.UNDEFINED, imageParameters=Component.UNDEFINED, downloadImage=Component.UNDEFINED, pdbString=Component.UNDEFINED, data=Component.UNDEFINED, molStyles=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'viewportWidth', 'viewportHeight', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles']
         self._type = 'NglMoleculeViewer'
         self._namespace = 'dash_bio'
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'viewportStyle', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles']
+        self.available_properties = ['id', 'viewportWidth', 'viewportHeight', 'stageParameters', 'imageParameters', 'downloadImage', 'pdbString', 'data', 'molStyles']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')

dash_bio/metadata.json

@@ -1841,24 +1841,48 @@
         "required": false,
         "description": "The ID of this component, used to identify dash components in callbacks.\nThe ID needs to be unique across all of the components in an app."
       },
-      "viewportStyle": {
+      "setProps": {
         "type": {
-          "name": "exact",
-          "value": {
-            "width": {
-              "name": "string",
-              "required": false
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-assigned callback that should be called whenever properties change."
+      },
+      "viewportWidth": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
             },
-            "height": {
-              "name": "string",
-              "required": false
+            {
+              "name": "number"
             }
-          }
+          ]
+        },
+        "required": false,
+        "description": "The width (in px or as a number) of the container\nin which the molecules will be displayed.",
+        "defaultValue": {
+          "value": "'500px'",
+          "computed": false
+        }
+      },
+      "viewportHeight": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            }
+          ]
         },
         "required": false,
-        "description": "The height and the width (in px) of the container\nin which the molecules will be displayed.\nIt should be in JSON format.",
+        "description": "The height (in px or as a number) of the container\nin which the molecules will be displayed.",
         "defaultValue": {
-          "value": "{\n    width: '500px',\n    height: '500px',\n}",
+          "value": "'500px'",
           "computed": false
         }
       },
@@ -2636,4 +2660,4 @@
       }
     }
   }
-}
+}

man/dashbioNglMoleculeViewer.Rd

@@ -10,21 +10,21 @@ The NglMoleculeViewer is used to render schematic diagrams of biomolecules in ri
 }
 
 \usage{
-dashbioNglMoleculeViewer(id=NULL, viewportStyle=NULL, stageParameters=NULL,
-imageParameters=NULL, downloadImage=NULL, pdbString=NULL,
-data=NULL, molStyles=NULL)
+dashbioNglMoleculeViewer(id=NULL, viewportWidth=NULL, viewportHeight=NULL,
+stageParameters=NULL, imageParameters=NULL,
+downloadImage=NULL, pdbString=NULL, data=NULL,
+molStyles=NULL)
 }
 
 \arguments{
 \item{id}{Character. 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.}
 
-\item{viewportStyle}{Lists containing elements 'width', 'height'.
-those elements have the following types:
-  - width (character; optional)
-  - height (character; optional). The height and the width (in px) of the container
-in which the molecules will be displayed.
-It should be in JSON format.}
+\item{viewportWidth}{Character | numeric. The width (in px or as a number) of the container
+in which the molecules will be displayed.}
+
+\item{viewportHeight}{Character | numeric. The height (in px or as a number) of the container
+in which the molecules will be displayed.}
 
 \item{stageParameters}{Lists containing elements 'quality', 'backgroundcolor', 'cameratype'.
 those elements have the following types:

src/lib/components/NglMoleculeViewer.react.js

@@ -21,10 +21,9 @@ export default class NglMoleculeViewer extends Component {
     }
 }
 
-const defaultViewportStyle = {
-    width: '500px',
-    height: '500px',
-};
+const defaultViewportHeight = '500px';
+
+const defaultViewportWidth = '500px';
 
 const defaultStageParameters = {
     quality: 'medium',
@@ -62,7 +61,8 @@ const defaultData = [
 
 NglMoleculeViewer.defaultProps = {
     data: defaultData,
-    viewportStyle: defaultViewportStyle,
+    viewportWidth: defaultViewportWidth,
+    viewportHeight: defaultViewportHeight,
     stageParameters: defaultStageParameters,
     imageParameters: defaultImageParameters,
     downloadImage: false,
@@ -83,14 +83,21 @@ NglMoleculeViewer.propTypes = {
     id: PropTypes.string,
 
     /**
-     * The height and the width (in px) of the container
+     * Dash-assigned callback that should be called whenever properties change.
+     */
+    setProps: PropTypes.func,
+
+    /**
+     * The width (in px or as a number) of the container
      * in which the molecules will be displayed.
-     * It should be in JSON format.
      */
-    viewportStyle: PropTypes.exact({
-        width: PropTypes.string,
-        height: PropTypes.string,
-    }),
+    viewportWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * The height (in px or as a number) of the container
+     * in which the molecules will be displayed.
+     */
+    viewportHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
      * Parameters (in JSON format) for the stage object of ngl.

src/lib/fragments/NglMoleculeViewer.react.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {propTypes, defaultProps} from '../components/NglMoleculeViewer.react';
 import {Stage, Selection, download} from 'ngl';
 import {equals} from 'ramda';
+// import {isNumeric} from 'fast-isnumeric';
 
 /**
  * The NglMoleculeViewer is used to render schematic diagrams
@@ -22,12 +23,19 @@ export default class NglMoleculeViewer extends Component {
     }
 
     componentDidMount() {
-        const {id, stageParameters, viewportStyle} = this.props;
+        const {id, stageParameters, viewportWidth, viewportHeight} = this.props;
         const params = {...stageParameters};
         const stage = new Stage(id, params);
         const orientationMatrix = stage.viewerControls.getOrientation();
 
-        stage.setSize(viewportStyle.width, viewportStyle.height);
+        const widthStr = isNaN(viewportWidth)
+            ? viewportWidth
+            : viewportWidth + 'px';
+        const heightStr = isNaN(viewportHeight)
+            ? viewportHeight
+            : viewportHeight + 'px';
+
+        stage.setSize(widthStr, heightStr);
         this.setState({stage, orientationMatrix});
     }
 

tests/dashbio_demos/dash-ngl-moleculeviewer/app.py

@@ -129,7 +129,7 @@ def description():
     )
 
 
-placeholder = html.Div(id='ngl-placeholder', style={'text-align': 'center', 'font-size': '25px'})
+placeholder = html.Div(id='ngl-placeholder', style={'textAlign': 'center', 'fontSize': '25px'})
 
 
 data_tab = [