Skip to content

Commit 1d64612

Browse files
author
Shammamah Hossain
authored
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.
1 parent 9db739f commit 1d64612

30 files changed

+1783
-230
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## Unreleased
4+
5+
### Added
6+
7+
* Added FornaContainer component for RNA secondary structure analysis.
8+
39
## [0.2.0] - 2019-10-18
410

511
### Fixed

‎assets/forna-style.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
#forna-container {
2+
display: inline-block;
3+
padding: 20px;
4+
margin-top: 50px;
5+
}
6+
7+
#forna-body ::-webkit-scrollbar-thumb {
8+
background-color: #85002D !important;
9+
}
10+
11+
#forna-control-tabs .tab--selected {
12+
color: #85002D !important;
13+
}
14+
15+
#forna-body .rc-slider-track {
16+
background-color: #85002D !important;
17+
}
18+
19+
#forna-body .rc-slider-handle, #forna-body .rc-slider-dot-active {
20+
border-color: #85002D !important;
21+
}
22+
23+
#forna-sequence, #forna-structure, #forna-id {
24+
width: 100%;
25+
margin-top: 15px;
26+
}
27+
28+
#forna-body #forna-bond-length {
29+
display: inline-block;
30+
width: 150px;
31+
margin-top: 10px;
32+
}
33+
34+
#forna-control-tabs .app-controls-block {
35+
margin-bottom: 20px;
36+
}
37+
38+
#forna-submit-sequence, #forna-submit-custom-colors {
39+
width: 100%;
40+
}
41+
42+
#forna-apply-force, #forna-circularize-external,
43+
#forna-avoid-others, #forna-label-interval,
44+
#forna-color-scheme, #forna-custom-colors-molecule,
45+
#forna-color-range {
46+
display: inline-block !important;
47+
text-align: right;
48+
position: relative;
49+
top: 5px;
50+
float: right;
51+
}
52+
53+
#forna-label-interval, #forna-color-scheme,
54+
#forna-custom-colors-molecule, #forna-color-range {
55+
width: 150px;
56+
position: relative;
57+
text-align: left;
58+
}
59+
60+
#forna-color-range {
61+
position: relative;
62+
top: 10px;
63+
}
64+
65+
#forna-color-domain-low, #forna-color-domain-high,
66+
#forna-color-map-nucleotide, #forna-color-map-color,
67+
#forna-custom-colorscheme > #forna-color-low,
68+
#forna-custom-colorscheme > #forna-color-high {
69+
display: inline-block;
70+
width: 48%;
71+
}
72+
73+
#forna-custom-colorscheme > #forna-color-low,
74+
#forna-custom-colorscheme > #forna-color-high {
75+
margin-bottom: 20px;
76+
}
77+
#forna-custom-colorscheme > #forna-color-low,
78+
#forna-color-domain-low,
79+
#forna-color-map-nucleotide {
80+
margin-right: 2%;
81+
}
82+
#forna-custom-colorscheme > #forna-color-high,
83+
#forna-color-domain-high,
84+
#forna-color-map-color {
85+
margin-left: 2%;
86+
}
87+
88+
#forna-custom-colorscheme .chrome-picker {
89+
width: 100% !important;
90+
border: none !important;
91+
}
92+
93+
#forna-sequence-info {
94+
font-size: 10pt;
95+
}
96+
97+
#forna-color-scheme, #forna-custom-colors-molecule {
98+
position: relative;
99+
top: 0px;
100+
}
101+
102+
#forna-error-message {
103+
text-align: center;
104+
}
105+
106+
#forna-color-scheme-desc {
107+
margin-top: 20px;
108+
}

‎dash_bio/FornaContainer.py‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# AUTO GENERATED FILE - DO NOT EDIT
2+
3+
from dash.development.base_component import Component, _explicitize_args
4+
5+
6+
class FornaContainer(Component):
7+
"""A FornaContainer component.
8+
FornaContainer is a force-directed graph that is used to visualize
9+
the secondary structure of biomolecules. It is based on the fornac
10+
library (https://github.com/ViennaRNA/fornac).
11+
12+
Keyword arguments:
13+
- id (string; optional): The ID of this component, used to identify dash components in
14+
callbacks. The ID needs to be unique across all of the
15+
components in an app.
16+
- height (number; default 500): The height (in px) of the container in which the molecules will
17+
be displayed.
18+
- width (number; default 300): The width (in px) of the container in which the molecules will
19+
be displayed.
20+
- sequences (dict; optional): The molecules that will be displayed. sequences has the following type: list of dicts containing keys 'sequence', 'structure', 'options'.
21+
Those keys have the following types:
22+
- sequence (string; required): A string representing the RNA nucleotide sequence of
23+
the RNA molecule.
24+
- structure (string; required): A dot-bracket string
25+
(https://software.broadinstitute.org/software/igv/RNAsecStructure)
26+
that specifies the secondary structure of the RNA
27+
molecule.
28+
- options (dict; optional): Additional options to be applied to the rendering of
29+
the RNA molecule. options has the following type: dict containing keys 'applyForce', 'circularizeExternal', 'labelInterval', 'name', 'avoidOthers'.
30+
Those keys have the following types:
31+
- applyForce (boolean; optional): Indicate whether the force-directed layout will be
32+
applied to the displayed molecule. Enabling this
33+
option allows users to change the layout of the
34+
molecule by selecting and dragging the individual
35+
nucleotide nodes. True by default.
36+
- circularizeExternal (boolean; optional): This only makes sense in connection with the
37+
applyForce argument. If it's true, the external
38+
loops will be arranged in a nice circle. If false,
39+
they will be allowed to flop around as the force
40+
layout dictates. True by default.
41+
- labelInterval (number; optional): Change how often nucleotide numbers are labelled
42+
with their number. 10 by default.
43+
- name (string; optional): The molecule name; this is used in custom color
44+
scales.
45+
- avoidOthers (boolean; optional): Whether or not this molecule should "avoid" other
46+
molecules in the map.
47+
- nodeFillColor (string; optional): The fill color for all of the nodes. This will override any
48+
color scheme defined in colorScheme.
49+
- colorScheme (a value equal to: 'sequence', 'structure', 'positions', 'custom'; default 'sequence'): The color scheme that is used to color the nodes.
50+
- customColors (dict; optional): The custom colors used to color the nodes if the 'custom'
51+
option is chosen for the `colorScheme` prop.
52+
For example, if the domain is `[0, 20]`, the range is
53+
`['yellow', 'red']`, and the dictionary specified in
54+
'colorValues' that corresponds to a molecule is `{'6': 10}`,
55+
the sixth nucleotide in that molecule will have a color that is
56+
perfectly in between yellow and red (i.e., orange), since 10 is
57+
perfectly in between 0 and 20. customColors has the following type: dict containing keys 'domain', 'range', 'colorValues'.
58+
Those keys have the following types:
59+
- domain (list of numbers; optional): The limits for the color scale. This is used with the range
60+
specified in `range` to calculate the color of a given
61+
nucleotide, based on the number that it is assigned.
62+
- range (list of strings; optional): The range of colors that will be used in conjunction with
63+
the `domain` prop.
64+
- 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
65+
an empty string (`''`) or the name of a molecule that has
66+
been defined in the `name` prop in the `options` for a
67+
sequence in the `sequences` property.
68+
The value corresponding to the key that is an empty string
69+
(if that key exists) is a "default" color scheme that will
70+
be applied first, and can be overridden by the color
71+
schemes defined for molecule-specific keys. The
72+
aforementioned color schemes each take the form of a
73+
dictionary in which the keys are the nucleotide positions
74+
and the values are either a) numbers to be normalized with
75+
respect to the scale defined in `domain` (so that their
76+
color will be calculated), or b) direct string
77+
representations of colors.
78+
- allowPanningAndZooming (boolean; default True): Allow users to zoom in and pan the display. If this is enabled,
79+
then pressing the 'c' key on the keyboard will center the view."""
80+
@_explicitize_args
81+
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):
82+
self._prop_names = ['id', 'height', 'width', 'sequences', 'nodeFillColor', 'colorScheme', 'customColors', 'allowPanningAndZooming']
83+
self._type = 'FornaContainer'
84+
self._namespace = 'dash_bio'
85+
self._valid_wildcard_attributes = []
86+
self.available_properties = ['id', 'height', 'width', 'sequences', 'nodeFillColor', 'colorScheme', 'customColors', 'allowPanningAndZooming']
87+
self.available_wildcard_properties = []
88+
89+
_explicit_args = kwargs.pop('_explicit_args')
90+
_locals = locals()
91+
_locals.update(kwargs) # For wildcard attrs
92+
args = {k: _locals[k] for k in _explicit_args if k != 'children'}
93+
94+
for k in []:
95+
if k not in args:
96+
raise TypeError(
97+
'Required argument `' + k + '` was not specified.')
98+
super(FornaContainer, self).__init__(**args)

‎dash_bio/_imports_.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
from .AlignmentChart import AlignmentChart
22
from .Circos import Circos
3+
from .FornaContainer import FornaContainer
34
from .Ideogram import Ideogram
45
from .Molecule2dViewer import Molecule2dViewer
56
from .Molecule3dViewer import Molecule3dViewer
@@ -11,6 +12,7 @@
1112
__all__ = [
1213
"AlignmentChart",
1314
"Circos",
15+
"FornaContainer",
1416
"Ideogram",
1517
"Molecule2dViewer",
1618
"Molecule3dViewer",

‎dash_bio/bundle.js‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)