Add first draft of FornaContainer component. (#418)

* Add first draft of FornaContainer component.

* Add first version of demo app.

* Fix Speck demo application argument names.

Change checklist 'values' to 'value'.

* Change parameter names in demo apps.

Ensure that there is compatibility with the latest version of Dash.

* Add image for Forna Container.

* Update version in package.

* Update auto-generated files.

* Update version in requirements.

* Update Dash requirement.

* Add fornac library to package.json requirements.

* Restructure shouldComponentUpdate code.

Flatten clauses, use Ramda, and check for existence using booleans.

* Fix pylint errors.

* Fix flake8 errors.

* Change PropTypes.shape to PropTypes.exact.

* Avoid directly modifying 'options' object.

* Add support for custom color schemes.

* Remove outline.

* Add more detailed prop descriptions for custom color scheme.

* Add custom colors to FornaContainer demo app.

* Update style for FornaContainer app.

* Update Dash DAQ requirement.

* Update requirements to latest version.

* Add auto-generated files and linted FornaContainer code.

* Update package.json.

* Always update color scheme.

* Small changes to the app.
Change color map input to two input boxes instead of Textarea; remove error message.

* Update version in package.

* Add auto-generated files.

* Update version in requirements.

* Fix width and height being backwards.

* Small changes and improvements.

* Add better description of app and different initial colors.

* Check for existence of options before comparing them.

* Remove unnecessary comma

* Add tests for FornaContainer.

* Use Ramda equals.

* Move new sequence rendering to componentDidUpdate.

* Update tests/dashbio_demos/app_forna_container.py

Co-Authored-By: alexcjohnson <[email protected]>

* Use dcc.Markdown.

* Add back renderNewSequences to componentDidMount.

* Use ref instead of ID.

* Change callbacks argument name and remove pylint statement.

* Fix arguments for Circos app table.

* Use React.createRef().

* Update version.

* Update autogenerated files.

* Update CHANGELOG.

* Update description of FornaContainer component.

* Ensure that colors are updated on initial render.

* Add test for initial color scheme.

* Update version.

* Update autogenerated files.

* Fix ordering and logic for color scheme changes.

* Fix typo and correctly pass in allowPanningAndZooming option.

* Update version and add auto-generated files.

* Fix more bugs related to nodeFillColor behaviour.

* Update version of react-docgen.

This fixes issues with PropTypes.exact when generating docstrings.

* Update package version and all autogenerated files.

* Update version of package.

* Add new app to list of remotes.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Added
+
+* Added FornaContainer component for RNA secondary structure analysis.
+
 ## [0.2.0] - 2019-10-18
 
 ### Fixed

assets/forna-style.css

@@ -0,0 +1,108 @@
+#forna-container {
+    display: inline-block;
+    padding: 20px;
+    margin-top: 50px;
+}
+
+#forna-body ::-webkit-scrollbar-thumb {
+    background-color: #85002D !important;
+}
+
+#forna-control-tabs .tab--selected {
+    color: #85002D !important;
+}
+
+#forna-body .rc-slider-track {
+    background-color: #85002D !important;
+}
+
+#forna-body .rc-slider-handle, #forna-body .rc-slider-dot-active {
+    border-color: #85002D !important;
+}
+
+#forna-sequence, #forna-structure, #forna-id {
+    width: 100%;
+    margin-top: 15px;
+}
+
+#forna-body #forna-bond-length {
+    display: inline-block;
+    width: 150px;
+    margin-top: 10px;
+}
+
+#forna-control-tabs .app-controls-block {
+    margin-bottom: 20px;
+}
+
+#forna-submit-sequence, #forna-submit-custom-colors {
+    width: 100%;
+}
+
+#forna-apply-force, #forna-circularize-external,
+#forna-avoid-others, #forna-label-interval,
+#forna-color-scheme, #forna-custom-colors-molecule,
+#forna-color-range {
+    display: inline-block !important;
+    text-align: right;
+    position: relative;
+    top: 5px;
+    float: right;
+}
+
+#forna-label-interval, #forna-color-scheme,
+#forna-custom-colors-molecule, #forna-color-range {
+    width: 150px;
+    position: relative;
+    text-align: left;
+}
+
+#forna-color-range {
+    position: relative;
+    top: 10px;
+}
+
+#forna-color-domain-low, #forna-color-domain-high,
+#forna-color-map-nucleotide, #forna-color-map-color,
+#forna-custom-colorscheme > #forna-color-low,
+#forna-custom-colorscheme > #forna-color-high {
+    display: inline-block;
+    width: 48%;
+}
+
+#forna-custom-colorscheme > #forna-color-low,
+#forna-custom-colorscheme > #forna-color-high {
+    margin-bottom: 20px;
+}
+#forna-custom-colorscheme > #forna-color-low,
+#forna-color-domain-low,
+#forna-color-map-nucleotide {
+    margin-right: 2%;
+}
+#forna-custom-colorscheme > #forna-color-high,
+#forna-color-domain-high,
+#forna-color-map-color {
+    margin-left: 2%;
+}
+
+#forna-custom-colorscheme .chrome-picker {
+    width: 100% !important;
+    border: none !important;
+}
+
+#forna-sequence-info {
+    font-size: 10pt;
+}
+
+#forna-color-scheme, #forna-custom-colors-molecule {
+    position: relative;
+    top: 0px;
+}
+
+#forna-error-message {
+    text-align: center;
+}
+
+#forna-color-scheme-desc {
+    margin-top: 20px;
+}

dash_bio/FornaContainer.py

@@ -0,0 +1,98 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+from dash.development.base_component import Component, _explicitize_args
+
+
+class FornaContainer(Component):
+    """A FornaContainer component.
+FornaContainer is a force-directed graph that is used to visualize
+the secondary structure of biomolecules. It is based on the fornac
+library (https://github.com/ViennaRNA/fornac).
+
+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.
+- height (number; default 500): The height (in px) of the container in which the molecules will
+be displayed.
+- width (number; default 300): The width (in px) of the container in which the molecules will
+be displayed.
+- sequences (dict; optional): The molecules that will be displayed. sequences has the following type: list of dicts containing keys 'sequence', 'structure', 'options'.
+Those keys have the following types:
+  - sequence (string; required): A string representing the RNA nucleotide sequence of
+the RNA molecule.
+  - structure (string; required): A dot-bracket string
+(https://software.broadinstitute.org/software/igv/RNAsecStructure)
+that specifies the secondary structure of the RNA
+molecule.
+  - options (dict; optional): Additional options to be applied to the rendering of
+the RNA molecule. options has the following type: dict containing keys 'applyForce', 'circularizeExternal', 'labelInterval', 'name', 'avoidOthers'.
+Those keys have the following types:
+  - applyForce (boolean; optional): Indicate whether the force-directed layout will be
+applied to the displayed molecule. Enabling this
+option allows users to change the layout of the
+molecule by selecting and dragging the individual
+nucleotide nodes. True by default.
+  - circularizeExternal (boolean; optional): This only makes sense in connection with the
+applyForce argument. If it's true, the external
+loops will be arranged in a nice circle. If false,
+they will be allowed to flop around as the force
+layout dictates. True by default.
+  - labelInterval (number; optional): Change how often nucleotide numbers are labelled
+with their number. 10 by default.
+  - name (string; optional): The molecule name; this is used in custom color
+scales.
+  - avoidOthers (boolean; optional): Whether or not this molecule should "avoid" other
+molecules in the map.
+- nodeFillColor (string; optional): The fill color for all of the nodes. This will override any
+color scheme defined in colorScheme.
+- colorScheme (a value equal to: 'sequence', 'structure', 'positions', 'custom'; default 'sequence'): The color scheme that is used to color the nodes.
+- customColors (dict; optional): The custom colors used to color the nodes if the 'custom'
+option is chosen for the `colorScheme` prop.
+For example, if the domain is `[0, 20]`, the range is
+`['yellow', 'red']`, and the dictionary specified in
+'colorValues' that corresponds to a molecule is `{'6': 10}`,
+the sixth nucleotide in that molecule will have a color that is
+perfectly in between yellow and red (i.e., orange), since 10 is
+perfectly in between 0 and 20. customColors has the following type: dict containing keys 'domain', 'range', 'colorValues'.
+Those keys have the following types:
+  - domain (list of numbers; optional): The limits for the color scale. This is used with the range
+specified in `range` to calculate the color of a given
+nucleotide, based on the number that it is assigned.
+  - range (list of strings; optional): The range of colors that will be used in conjunction with
+the `domain` prop.
+  - colorValues (dict with strings as keys and values of type dict with strings as keys and values of type string | number; optional): A dictionary which contains keys, each of which are either
+an empty string (`''`) or the name of a molecule that has
+been defined in the `name` prop in the `options` for a
+sequence in the `sequences` property.
+The value corresponding to the key that is an empty string
+(if that key exists) is a "default" color scheme that will
+be applied first, and can be overridden by the color
+schemes defined for molecule-specific keys. The
+aforementioned color schemes each take the form of a
+dictionary in which the keys are the nucleotide positions
+and the values are either a) numbers to be normalized with
+respect to the scale defined in `domain` (so that their
+color will be calculated), or b) direct string
+representations of colors.
+- allowPanningAndZooming (boolean; default True): Allow users to zoom in and pan the display. If this is enabled,
+then pressing the 'c' key on the keyboard will center the view."""
+    @_explicitize_args
+    def __init__(self, id=Component.UNDEFINED, height=Component.UNDEFINED, width=Component.UNDEFINED, sequences=Component.UNDEFINED, nodeFillColor=Component.UNDEFINED, colorScheme=Component.UNDEFINED, customColors=Component.UNDEFINED, allowPanningAndZooming=Component.UNDEFINED, labelInterval=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'height', 'width', 'sequences', 'nodeFillColor', 'colorScheme', 'customColors', 'allowPanningAndZooming']
+        self._type = 'FornaContainer'
+        self._namespace = 'dash_bio'
+        self._valid_wildcard_attributes =            []
+        self.available_properties = ['id', 'height', 'width', 'sequences', 'nodeFillColor', 'colorScheme', 'customColors', 'allowPanningAndZooming']
+        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(FornaContainer, self).__init__(**args)

dash_bio/_imports_.py

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