Show color legend in the Speck component (#641)

* Show color legend in the Speck component

* Specify commit for speck package

* Change validation function for the speck legend test

* Update callback in the speck legend test

* Adding style props to mol3d and speck

Co-authored-by: Hammad Khan <[email protected]>

CHANGELOG.md

@@ -10,7 +10,8 @@
 * [#628](https://github.com/plotly/dash-bio/pull/628) Added option to add colored labels to rows and columns on Clustergram.
 * [#640](https://github.com/plotly/dash-bio/pull/640) Added loading states to each component to support custom loading css with `dash-data-is-loading`.
 * [#642](https://github.com/plotly/dash-bio/pull/642) Added `scrollZoom` property to Molecule2dViewer.
-
+* [#641](https://github.com/plotly/dash-bio/pull/641) Added `showLegend` property to Speck viewer, which allows users to show a color legend for atoms shown on the canvas.
+* [#641](https://github.com/plotly/dash-bio/pull/641) Added `style` property to Speck and Molecule3dViewer to enable generic style overrides on the plot div.
 
 ### Changed
 * [#589](https://github.com/plotly/dash-bio/pull/589) Removed hardcoded clustergram linkage method, added parameter `link_method` instead.

R/dashbioMolecule3dViewer.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-dashbioMolecule3dViewer <- function(id=NULL, atomLabelsShown=NULL, backgroundColor=NULL, backgroundOpacity=NULL, labels=NULL, loading_state=NULL, modelData=NULL, onChangeSelection=NULL, onRenderNewData=NULL, orbital=NULL, selectedAtomIds=NULL, selectionType=NULL, shapes=NULL, styles=NULL, zoom=NULL, zoomTo=NULL) {
+dashbioMolecule3dViewer <- function(id=NULL, atomLabelsShown=NULL, backgroundColor=NULL, backgroundOpacity=NULL, height=NULL, labels=NULL, loading_state=NULL, modelData=NULL, onChangeSelection=NULL, onRenderNewData=NULL, orbital=NULL, selectedAtomIds=NULL, selectionType=NULL, shapes=NULL, style=NULL, styles=NULL, width=NULL, zoom=NULL, zoomTo=NULL) {
 
-    props <- list(id=id, atomLabelsShown=atomLabelsShown, backgroundColor=backgroundColor, backgroundOpacity=backgroundOpacity, labels=labels, loading_state=loading_state, modelData=modelData, onChangeSelection=onChangeSelection, onRenderNewData=onRenderNewData, orbital=orbital, selectedAtomIds=selectedAtomIds, selectionType=selectionType, shapes=shapes, styles=styles, zoom=zoom, zoomTo=zoomTo)
+    props <- list(id=id, atomLabelsShown=atomLabelsShown, backgroundColor=backgroundColor, backgroundOpacity=backgroundOpacity, height=height, labels=labels, loading_state=loading_state, modelData=modelData, onChangeSelection=onChangeSelection, onRenderNewData=onRenderNewData, orbital=orbital, selectedAtomIds=selectedAtomIds, selectionType=selectionType, shapes=shapes, style=style, styles=styles, width=width, zoom=zoom, zoomTo=zoomTo)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Molecule3dViewer',
         namespace = 'dash_bio',
-        propNames = c('id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'labels', 'loading_state', 'modelData', 'onChangeSelection', 'onRenderNewData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'styles', 'zoom', 'zoomTo'),
+        propNames = c('id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'height', 'labels', 'loading_state', 'modelData', 'onChangeSelection', 'onRenderNewData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'style', 'styles', 'width', 'zoom', 'zoomTo'),
         package = 'dashBio'
         )
 

R/dashbioSpeck.R

@@ -1,16 +1,16 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
-dashbioSpeck <- function(id=NULL, data=NULL, loading_state=NULL, presetView=NULL, scrollZoom=NULL, view=NULL) {
+dashbioSpeck <- function(id=NULL, data=NULL, loading_state=NULL, presetView=NULL, scrollZoom=NULL, showLegend=NULL, style=NULL, view=NULL) {
 
-    props <- list(id=id, data=data, loading_state=loading_state, presetView=presetView, scrollZoom=scrollZoom, view=view)
+    props <- list(id=id, data=data, loading_state=loading_state, presetView=presetView, scrollZoom=scrollZoom, showLegend=showLegend, style=style, view=view)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Speck',
         namespace = 'dash_bio',
-        propNames = c('id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'view'),
+        propNames = c('id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'showLegend', 'style', 'view'),
         package = 'dashBio'
         )
 

dash_bio/Molecule3dViewer.py

@@ -25,6 +25,9 @@ class Molecule3dViewer(Component):
 - backgroundOpacity (number; default 0):
     Property to change the background opacity - ranges from 0 to 1.
 
+- height (number; optional):
+    The height (in px) of the container.
+
 - labels (list of dicts; optional):
     Labels corresponding to the atoms of the molecule. Each label has
     a `text` field, a string containing the label content, and can
@@ -89,6 +92,9 @@ class Molecule3dViewer(Component):
     Add a predefined renderable shape objects to the molecule. Valid
     shape types are Arrow, Sphere, and Cylinder.
 
+- style (dict; default {    height: 500,    width: 500,}):
+    Generic style overrides on the plot div.
+
 - styles (list of dicts; optional):
     Property that can be used to change the representation of the
     molecule. Options include sticks, cartoon and sphere.
@@ -99,6 +105,9 @@ class Molecule3dViewer(Component):
 
     - visualization_type (a value equal to: 'cartoon', 'sphere', 'stick'; optional)
 
+- width (number; optional):
+    The width (in px) of the container.
+
 - zoom (dict; default {    factor: 0.8,    animationDuration: 0,    fixedPath: False,}):
     Zoom the current view by a constant factor, with optional
     parameters to modify the duration and motion of the zoom
@@ -144,12 +153,12 @@ class Molecule3dViewer(Component):
             The index value used to identify the residue; residues are
             numbered sequentially starting from 1."""
     @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, selectionType=Component.UNDEFINED, backgroundColor=Component.UNDEFINED, backgroundOpacity=Component.UNDEFINED, styles=Component.UNDEFINED, modelData=Component.UNDEFINED, atomLabelsShown=Component.UNDEFINED, selectedAtomIds=Component.UNDEFINED, labels=Component.UNDEFINED, orbital=Component.UNDEFINED, zoom=Component.UNDEFINED, zoomTo=Component.UNDEFINED, shapes=Component.UNDEFINED, onRenderNewData=Component.UNDEFINED, onChangeSelection=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'labels', 'loading_state', 'modelData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'styles', 'zoom', 'zoomTo']
+    def __init__(self, id=Component.UNDEFINED, selectionType=Component.UNDEFINED, backgroundColor=Component.UNDEFINED, backgroundOpacity=Component.UNDEFINED, styles=Component.UNDEFINED, modelData=Component.UNDEFINED, atomLabelsShown=Component.UNDEFINED, selectedAtomIds=Component.UNDEFINED, labels=Component.UNDEFINED, orbital=Component.UNDEFINED, zoom=Component.UNDEFINED, zoomTo=Component.UNDEFINED, shapes=Component.UNDEFINED, height=Component.UNDEFINED, width=Component.UNDEFINED, style=Component.UNDEFINED, onRenderNewData=Component.UNDEFINED, onChangeSelection=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'height', 'labels', 'loading_state', 'modelData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'style', 'styles', 'width', 'zoom', 'zoomTo']
         self._type = 'Molecule3dViewer'
         self._namespace = 'dash_bio'
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'labels', 'loading_state', 'modelData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'styles', 'zoom', 'zoomTo']
+        self.available_properties = ['id', 'atomLabelsShown', 'backgroundColor', 'backgroundOpacity', 'height', 'labels', 'loading_state', 'modelData', 'orbital', 'selectedAtomIds', 'selectionType', 'shapes', 'style', 'styles', 'width', 'zoom', 'zoomTo']
         self.available_wildcard_properties =            []
         _explicit_args = kwargs.pop('_explicit_args')
         _locals = locals()

dash_bio/Speck.py

@@ -52,6 +52,12 @@ class Speck(Component):
     The option of whether or not to allow scrolling to control the
     zoom.
 
+- showLegend (boolean; default False):
+    The option of whether to show color legend.
+
+- style (dict; default {    height: '600px',    width: '600px',    position: 'relative',}):
+    Generic style overrides on the plot div.
+
 - view (dict; default speckView.new()):
     An object that determines and controls various parameters related
     to how the molecule is displayed.
@@ -107,12 +113,12 @@ class Speck(Component):
 
     - zoom (number; optional)"""
     @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, data=Component.UNDEFINED, scrollZoom=Component.UNDEFINED, view=Component.UNDEFINED, presetView=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'view']
+    def __init__(self, id=Component.UNDEFINED, data=Component.UNDEFINED, scrollZoom=Component.UNDEFINED, view=Component.UNDEFINED, presetView=Component.UNDEFINED, style=Component.UNDEFINED, loading_state=Component.UNDEFINED, showLegend=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'showLegend', 'style', 'view']
         self._type = 'Speck'
         self._namespace = 'dash_bio'
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'view']
+        self.available_properties = ['id', 'data', 'loading_state', 'presetView', 'scrollZoom', 'showLegend', 'style', 'view']
         self.available_wildcard_properties =            []
         _explicit_args = kwargs.pop('_explicit_args')
         _locals = locals()