add dash-ngl

.gitignore

@@ -41,3 +41,6 @@ __pycache__/
 venv/
 
 .env
+
+# editors
+.vscode/

R/dashbioDashNgl.R

@@ -0,0 +1,18 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+DashNglDashNgl <- function(id=NULL, viewportStyle=NULL, stageParameters=NULL, data=NULL) {
+
+    props <- list(id=id, viewportStyle=viewportStyle, stageParameters=stageParameters, data=data)
+    if (length(props) > 0) {
+        props <- props[!vapply(props, is.null, logical(1))]
+    }
+    component <- list(
+        props = props,
+        type = 'DashNgl',
+        namespace = 'dash_ngl',
+        propNames = c('id', 'viewportStyle', 'stageParameters', 'data'),
+        package = 'dashNgl'
+        )
+
+    structure(component, class = c('dash_component', 'list'))
+}

README.md

@@ -42,6 +42,7 @@ The Dash Bio components each fall into one of three categories:
 - Dash Mol2D
 - Dash Mol3D
 - Dash Speck
+- Dash Ngl (experimental)
 
 ## Dash
 

dash_bio/DashNgl.py

@@ -0,0 +1,52 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+from dash.development.base_component import Component, _explicitize_args
+
+
+class DashNgl(Component):
+    """A DashNgl component.
+The Molecule3dViewer component is used to render schematic diagrams
+of biomolecules. It displays them in ribbon-structure diagrams
+Read more about the component here:
+https://github.com/IvoLeist/dash_ngl
+Read more about the used WebGL protein viewer here:
+https://github.com/arose/ngl
+
+Keyword arguments:
+- id (string; default 'viewport'): 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: '100%',
+    height: '500px',
+}): The height (in px) and the width (in %) of the container
+in which the molecules will be displayed.
+It should be in JSON format
+- stageParameters (dict; default {
+    quality: 'medium',
+    backgroundColor: 'white',
+}): Parameters for the stage object of ngl.
+Currently implemented are the quality of the visualisation
+and the background color.For a full list see:
+http://nglviewer.org/ngl/api/file/src/stage/stage.js.html
+- data (optional): The data that will be used to display the molecule in 3D
+The data will be in JSON format"""
+    @_explicitize_args
+    def __init__(self, id=Component.UNDEFINED, viewportStyle=Component.UNDEFINED, stageParameters=Component.UNDEFINED, data=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'viewportStyle', 'stageParameters', 'data']
+        self._type = 'DashNgl'
+        self._namespace = 'dash_bio'
+        self._valid_wildcard_attributes =            []
+        self.available_properties = ['id', 'viewportStyle', 'stageParameters', 'data']
+        self.available_wildcard_properties =            []
+
+        _explicit_args = kwargs.pop('_explicit_args')
+        _locals = locals()
+        _locals.update(kwargs)  # For wildcard attrs
+        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
+
+        for k in []:
+            if k not in args:
+                raise TypeError(
+                    'Required argument `' + k + '` was not specified.')
+        super(DashNgl, self).__init__(**args)

dash_bio/_imports_.py

@@ -1,5 +1,6 @@
 from .AlignmentChart import AlignmentChart
 from .Circos import Circos
+from .DashNgl import DashNgl
 from .FornaContainer import FornaContainer
 from .Ideogram import Ideogram
 from .Molecule2dViewer import Molecule2dViewer
@@ -12,6 +13,7 @@
 __all__ = [
     "AlignmentChart",
     "Circos",
+    "DashNgl",
     "FornaContainer",
     "Ideogram",
     "Molecule2dViewer",

dash_bio/metadata.json

@@ -665,6 +665,152 @@
       }
     }
   },
+  "src/lib/components/DashNgl.react.js": {
+    "description": "The Molecule3dViewer component is used to render schematic diagrams\nof biomolecules. It displays them in ribbon-structure diagrams\nRead more about the component here:\nhttps://github.com/IvoLeist/dash_ngl\nRead more about the used WebGL protein viewer here:\nhttps://github.com/arose/ngl",
+    "displayName": "DashNgl",
+    "methods": [
+      {
+        "name": "showStructure",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "stageObj",
+            "type": null
+          },
+          {
+            "name": "chain",
+            "type": null
+          },
+          {
+            "name": "color",
+            "type": null
+          },
+          {
+            "name": "xOffset",
+            "type": null
+          },
+          {
+            "name": "stage",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "loadStructure",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "stage",
+            "type": null
+          },
+          {
+            "name": "filename",
+            "type": null
+          },
+          {
+            "name": "chain",
+            "type": null
+          },
+          {
+            "name": "color",
+            "type": null
+          },
+          {
+            "name": "xOffset",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "processDataFromBackend",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "data",
+            "type": null
+          },
+          {
+            "name": "stage",
+            "type": null
+          },
+          {
+            "name": "structuresList",
+            "type": null
+          }
+        ],
+        "returns": null
+      },
+      {
+        "name": "loadData",
+        "docblock": null,
+        "modifiers": [],
+        "params": [
+          {
+            "name": "data",
+            "type": null
+          },
+          {
+            "name": "stage",
+            "type": null
+          },
+          {
+            "name": "xOffset",
+            "type": null
+          }
+        ],
+        "returns": null
+      }
+    ],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The ID of this component, used to identify dash components in\ncallbacks. The ID needs to be unique across all of the\ncomponents in an app.",
+        "defaultValue": {
+          "value": "'viewport'",
+          "computed": false
+        }
+      },
+      "viewportStyle": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "The height (in px) and the width (in %) of the container\nin which the molecules will be displayed.\nIt should be in JSON format",
+        "defaultValue": {
+          "value": "{\n    width: '100%',\n    height: '500px',\n}",
+          "computed": false
+        }
+      },
+      "stageParameters": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "Parameters for the stage object of ngl.\nCurrently implemented are the quality of the visualisation\nand the background color.For a full list see:\nhttp://nglviewer.org/ngl/api/file/src/stage/stage.js.html",
+        "defaultValue": {
+          "value": "{\n    quality: 'medium',\n    backgroundColor: 'white',\n}",
+          "computed": false
+        }
+      },
+      "data": {
+        "type": {
+          "name": "exact",
+          "value": "[\n    PropTypes.arrayOf(PropTypes.shape(dataPropShape)),\n    PropTypes.shape(dataPropShape),\n]",
+          "computed": true
+        },
+        "required": false,
+        "description": "The data that will be used to display the molecule in 3D\nThe data will be in JSON format"
+      }
+    }
+  },
   "src/lib/components/FornaContainer.react.js": {
     "description": "FornaContainer is a force-directed graph that is used to visualize\nthe secondary structure of biomolecules. It is based on the fornac\nlibrary (https://github.com/ViennaRNA/fornac).",
     "displayName": "FornaContainer",