Jsme integration (#587)

* Integrate jsme component in dash_bio library

* Start working on tests

* Fixed dash python imports.

* Added tests for default component buttons

* Added tests for depict, export, button options

* Added tests for style, width, height and other options

* Fixed popup window move bug

* Improving the jsme scrolling function

* Changes to match the style guide

* Update jsme dependencie

* Fixed test wait component

* Rollback lint:test script

* Minor changes to defaults and demo app

* Linting fix

* Updating dev requirements

* updating config

* Updating tests

* Reverting dash bio utils update

* Re-running tests

* Re-running tests

* Re-running tests

* Changing flaky test

Co-authored-by: Hammad Khan <hammadtheone@gmail.com>

.circleci/config.yml

@@ -26,6 +26,7 @@ jobs:
                 command: |
                     sudo pip install virtualenv --upgrade
                     python -m venv venv || virtualenv venv && . venv/bin/activate
+                    python -m pip install --upgrade pip
                     pip install --progress-bar off --no-cache-dir -r dev-requirements.txt
             - save_cache:
                 key: dep-{{ checksum ".circleci/config.yml" }}-{{ checksum "ver.txt" }}-{{ checksum "dev-requirements.txt" }}

CHANGELOG.md

@@ -2,8 +2,11 @@
 
 ## Unreleased - ???
 
+### Added
+* [#587](https://github.com/plotly/dash-bio/pull/587) Added JSME component.
+
 ### Changed
-* [#589](https://github.com/plotly/dash-bio/pull/589) Removed hardcoded clustergram linkage method, added parameter `link_method` instead. 
+* [#589](https://github.com/plotly/dash-bio/pull/589) Removed hardcoded clustergram linkage method, added parameter `link_method` instead.
 
 ## [0.8.0] - 2021-09-27
 

NAMESPACE

@@ -5,6 +5,7 @@ export(dashbioCircos)
 export(dashbioFornaContainer)
 export(dashbioIdeogram)
 export(dashbioIgv)
+export(dashbioJsme)
 export(dashbioMolecule2dViewer)
 export(dashbioMolecule3dViewer)
 export(dashbioNeedlePlot)

R/dashbioJsme.R

@@ -0,0 +1,18 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+dashbioJsme <- function(id=NULL, eventSmiles=NULL, height=NULL, options=NULL, smiles=NULL, style=NULL, width=NULL) {
+
+    props <- list(id=id, eventSmiles=eventSmiles, height=height, options=options, smiles=smiles, style=style, width=width)
+    if (length(props) > 0) {
+        props <- props[!vapply(props, is.null, logical(1))]
+    }
+    component <- list(
+        props = props,
+        type = 'Jsme',
+        namespace = 'dash_bio',
+        propNames = c('id', 'eventSmiles', 'height', 'options', 'smiles', 'style', 'width'),
+        package = 'dashBio'
+        )
+
+    structure(component, class = c('dash_component', 'list'))
+}

R/internal.R

@@ -74,6 +74,12 @@ all_files = FALSE, async = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
 version = "0.8.0", src = list(href = NULL,
 file = "deps"), meta = NULL,
+script = 'async-jsme.js',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
+all_files = FALSE, async = TRUE), class = "html_dependency"),
+`dash_bio` = structure(list(name = "dash_bio",
+version = "0.8.0", src = list(href = NULL,
+file = "deps"), meta = NULL,
 script = 'async-alignment.js.map',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
@@ -146,6 +152,12 @@ all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
 `dash_bio` = structure(list(name = "dash_bio",
 version = "0.8.0", src = list(href = NULL,
 file = "deps"), meta = NULL,
+script = 'async-jsme.js.map',
+stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
+all_files = FALSE, dynamic = TRUE), class = "html_dependency"),
+`dash_bio` = structure(list(name = "dash_bio",
+version = "0.8.0", src = list(href = NULL,
+file = "deps"), meta = NULL,
 script = 'bundle.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashBio",
 all_files = FALSE), class = "html_dependency"),

dash_bio/Jsme.py

@@ -0,0 +1,63 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+from dash.development.base_component import Component, _explicitize_args
+
+
+class Jsme(Component):
+    """A Jsme component.
+JSME is a molecule editor that supports drawing and
+editing of molecules and reactions on in a web app,
+supporting both desktop and mobile devices. A built-in
+substituent menu and several keyboard shortcuts
+provide speedy access to the most common editing features and allow easy
+and fast creation of even large and complex molecules. The editor
+is able to export molecules as SMILES, MDL/Symyx/Accelrys Molfile or
+in its own compact format (one line textual representation of a molecule or
+reaction including also atomic 2D coordinates). The SMILES code generated by the JSME
+is canonical, i.e. independent on the way how the molecule was drawn.
+
+See more detailed documentation here: https://jsme-editor.github.io/help.html
+
+Keyword arguments:
+
+- id (string; default 'jsme'):
+    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.
+
+- eventSmiles (string; optional):
+    A Dash prop that returns data when SMILE will be changed.
+
+- height (string; default '600px'):
+    The height of the JSME container. Can be set in px, % etc.
+
+- options (string; default 'newLook'):
+    String that is a comma separated string of JSME options. The
+    available options are described on the
+    https://wiki.jmol.org/index.php/Jmol_JavaScript_Object/JME/Options.
+
+- smiles (string; optional):
+    The molecule SMILE to display.
+
+- style (dict; optional):
+    Generic style overrides on the plot div.
+
+- width (string; default '600px'):
+    The width of the JSME container. Can be set in px, % etc."""
+    @_explicitize_args
+    def __init__(self, id=Component.UNDEFINED, style=Component.UNDEFINED, options=Component.UNDEFINED, height=Component.UNDEFINED, width=Component.UNDEFINED, eventSmiles=Component.UNDEFINED, smiles=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'eventSmiles', 'height', 'options', 'smiles', 'style', 'width']
+        self._type = 'Jsme'
+        self._namespace = 'dash_bio'
+        self._valid_wildcard_attributes =            []
+        self.available_properties = ['id', 'eventSmiles', 'height', 'options', 'smiles', 'style', 'width']
+        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(Jsme, self).__init__(**args)

dash_bio/__init__.py

@@ -40,7 +40,8 @@
     'nglmoleculeviewer',
     'onco',
     'sequence',
-    'speck'
+    'speck',
+    'jsme'
 ]
 
 _js_dist = []

dash_bio/_imports_.py

@@ -3,6 +3,7 @@
 from .FornaContainer import FornaContainer
 from .Ideogram import Ideogram
 from .Igv import Igv
+from .Jsme import Jsme
 from .Molecule2dViewer import Molecule2dViewer
 from .Molecule3dViewer import Molecule3dViewer
 from .NeedlePlot import NeedlePlot
@@ -18,6 +19,7 @@
     "FornaContainer",
     "Ideogram",
     "Igv",
+    "Jsme",
     "Molecule2dViewer",
     "Molecule3dViewer",
     "NeedlePlot",