Add tests for callbacks and user interactions

.circleci/config.yml

@@ -59,23 +59,39 @@ jobs:
                 name: Run pylint
                 command: |
                     . venv/bin/activate
-                    pylint usage.py tests
+                    pylint usage.py usage-advanced.py usage-elements.py usage-events.py usage-stylesheet.py
+                    pylint demos tests
                 when: always
 
             - run:
                 name: Run flake8
                 command: |
                     . venv/bin/activate
-                    flake8 usage.py tests
+                    flake8 --max-line-length=100 usage.py usage-advanced.py usage-elements.py usage-events.py usage-stylesheet.py
+                    flake8 --max-line-length=100 demos tests
                 when: always
 
             - run:
-                name: Integration Tests - Usage
+                name: Integration Tests - Usage Apps Rendering
                 command: |
                     . venv/bin/activate
                     python -m unittest tests.test_usage
                 when: always
 
+            - run:
+                name: Integration Tests - Interactions
+                command: |
+                    . venv/bin/activate
+                    python -m unittest tests.test_interactions
+                when: always
+
+            - run:
+                name: Integration Tests - Callbacks
+                command: |
+                    . venv/bin/activate
+                    python -m unittest tests.test_callbacks
+                when: always
+
             - run:
                 name: Capture Percy Snapshots
                 command: |

.gitignore

@@ -37,6 +37,7 @@
 .idea/**/gradle.xml
 .idea/**/libraries
 tests/screenshots/*.png
+tests/screenshots/**/*.png
 
 # misc
 .DS_Store

CHANGELOG.md

@@ -6,6 +6,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## Added
+* `tests.test_usage`: Tests for rendering usage files.
+* `tests.test_callbacks`: Tests for updating `Cytoscape` with callbacks.
+* `tests.test_interactions`: Tests for interacting with `Cytoscape`, and evaluating its event callbacks.
+* `tests.test_percy_snapshot`: Creates a Percy build using screenshots from other tests.
+
+## Changed
+* `config.yml`: Added steps to run the new tests. Added coverage for Python 3.7. Included `demos` and all usage examples in `pylint` and `flake8`. Increased line limit to 100.
+* `demos/usage-*`: Formatted all demo apps in order to respect pylint and flake8.
+* `usage-*`: Formatted all demo apps in order to respect pylint and flake8.
+* `package.json`: Removed `"prepublish": "npm run validate-init"` due to conflict with CircleCI build. This script will be deprecated in favor of the upcoming Dash Component CLI.
+* `tests/IntegrationTests.py`: Moved the `percy_snapshot` method to `test_percy_snapshot` in order to avoid duplicate (failing) builds on Percy. Decrease the number of processes to 1.
+
+## Removed
+* `tests.test_render`: Removed unused test
+
 ## Added
 * Two new demos: `usage-grid-social-network.py` and `usage-concentric-social-network.py`
 * Add Issue and PR templates for Github (located in `.github`)

demos/dash_reusable_components.py

@@ -1,5 +1,3 @@
-from textwrap import dedent
-
 import dash_core_components as dcc
 import dash_html_components as html
 

demos/editor/callbacks.py

@@ -1,3 +1,4 @@
+# pylint: disable=W0612,R1705
 import json
 from colour import Color
 
@@ -41,10 +42,19 @@ def validate_color(color, default='#999999'):
     try:
         # Converting 'deep sky blue' to 'deepskyblue'
         color = color.replace(" ", "")
+
+        if color.startswith('rgb'):
+            values = color.replace('rgb(', '').replace(')', '').split(',')
+
+            if len(values) == 3 and all(0 <= int(v) <= 255 for v in values):
+                return color
+
+            return default
+
         Color(color)
         # if everything goes fine then return True
         return color
-    except:  # The color code was not found
+    except:  # noqa
         return default
 
 
@@ -225,7 +235,6 @@ def disable_side_endpoint_width(value):
         def disable_side_endpoint_height(value):
             return value != 'other'
 
-
     # ############################## CYTOSCAPE ################################
     @app.callback(Output('cytoscape', 'elements'),
                   [Input('dropdown-select-element-list', 'value')])

demos/editor/layout.py

@@ -437,7 +437,6 @@
                 id='dropdown-edge-curve-style',
                 value='haystack',
                 clearable=False,
-                searchable=False,
                 options=drc.DropdownOptionsList(
                     'haystack',
                     'bezier',
@@ -610,8 +609,7 @@
                         placeholder='Input value in % or px...',
                         value='0px'
                     )
-                ]) for side in
-                ['source', 'target']],
+                ]) for side in ['source', 'target']],
 
             drc.NamedInput(
                 name='Source Distance from node',
@@ -637,8 +635,7 @@
             drc.NamedRadioItems(
                 name='Use Labels',
                 id='radio-use-labels',
-                options=drc.DropdownOptionsList('yes',
-                                                'no'),
+                options=drc.DropdownOptionsList('yes', 'no'),
                 value='no'
             ),
 
@@ -682,8 +679,7 @@
                 options=[{
                     'label': element.capitalize(),
                     'value': f'div-label-{element}'
-                } for element in
-                    LABEL_ELEMENT_TYPES],
+                } for element in LABEL_ELEMENT_TYPES],
                 clearable=False,
                 value='div-label-node'
             ),
@@ -760,8 +756,7 @@
                         searchable=False,
                         value='none'
                     )
-                ]) for element in
-                LABEL_ELEMENT_TYPES],
+                ]) for element in LABEL_ELEMENT_TYPES],
         ]),
         drc.NamedCard(title='Text Wrapping', size=4, children=[
             drc.NamedDropdown(
@@ -770,8 +765,7 @@
                 options=[{
                     'label': element.capitalize(),
                     'value': f'div-text-wrapping-{element}'
-                } for element in
-                    LABEL_ELEMENT_TYPES],
+                } for element in LABEL_ELEMENT_TYPES],
                 clearable=False,
                 value='div-text-wrapping-node'
             ),
@@ -796,8 +790,7 @@
                         type='number',
                         placeholder='Enter the maximum width in px...'
                     )
-                ]) for element in
-                LABEL_ELEMENT_TYPES],
+                ]) for element in LABEL_ELEMENT_TYPES],
         ]),
         drc.NamedCard(title='Label Alignment', size=4, children=[
             drc.NamedRadioItems(
@@ -848,23 +841,24 @@
                 value='div-text-margins-node'
             ),
 
-            *[html.Div(id=f'div-text-margins-{element}',
-                       children=[
-                           drc.NamedInput(
-                               name=f"{element.capitalize()} Margin X (px)",
-                               id=f'input-{element}-text-margin-x',
-                               type='number',
-                               placeholder='Enter a value in px...'
-                           ),
-
-                           drc.NamedInput(
-                               name=f"{element.capitalize()} Margin Y(px)",
-                               id=f'input-{element}-text-margin-y',
-                               type='number',
-                               placeholder='Enter a value in px...'
-                           )
-                       ]) for element in
-              LABEL_ELEMENT_TYPES_ALL],
+            *[html.Div(
+                id=f'div-text-margins-{element}',
+                children=[
+                    drc.NamedInput(
+                        name=f"{element.capitalize()} Margin X (px)",
+                        id=f'input-{element}-text-margin-x',
+                        type='number',
+                        placeholder='Enter a value in px...'
+                    ),
+
+                    drc.NamedInput(
+                        name=f"{element.capitalize()} Margin Y(px)",
+                        id=f'input-{element}-text-margin-y',
+                        type='number',
+                        placeholder='Enter a value in px...'
+                    )
+                ]
+            ) for element in LABEL_ELEMENT_TYPES_ALL],
         ])
     ]
 )

demos/usage-animated-bfs.py

@@ -1,6 +1,6 @@
 """
 Original Demo: http://js.cytoscape.org/demos/animated-bfs/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/animated-bfs
+Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/animated-bfs
 
 Note: Animation Not Implemented yet, please refer to code.
 """

demos/usage-breadthfirst-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/images-breadthfirst-layout/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/images-breadthfirst-layout
 
 Note: Click Animation is not implemented.
 """

demos/usage-circle-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/circle-layout/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/circle-layout
 """
 import json
 

demos/usage-compound-nodes.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/compound-nodes/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/compound-nodes
 
 Note: The Dash version is also uncentered. Otherwise it works.
 """

demos/usage-concentric-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/concentric-layout/
-Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/concentric-layout/code.js
 
 Note: This example is broken because layout takes a function as input, i.e.
 ```

demos/usage-concentric-social-network.py

@@ -70,4 +70,4 @@
 
 
 if __name__ == '__main__':
-    app.run_server(debug=True)
+    app.run_server(debug=True)

demos/usage-cose-bilkent-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/cose-bilkent-layout-compound/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-bilkent-layout-compound
 
 Note: This implementation DOES NOT work yet, since cose-bilkent hasn't been implemented yet
 
@@ -16,7 +15,8 @@
 server = app.server
 
 app.scripts.append_script({
-    'external_url': 'https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/d810281d/cytoscape-cose-bilkent.js'
+    'external_url': ('https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/d810281d/'
+                     'cytoscape-cose-bilkent.js')
 })
 
 app.scripts.config.serve_locally = True

demos/usage-cose-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/cose-layout/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/cose-layout
 
 Note: This implementation looks different from the original implementation,
 although the input paramters are exactly the same.

demos/usage-edge-types.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/edge-types/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/edge-types
 
 Note: This example is broken because layout takes a function as input:
 ```

demos/usage-grid-layout.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/grid-layout/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/grid-layout
 """
 import json
 

demos/usage-grid-social-network.py

@@ -73,4 +73,4 @@
 
 
 if __name__ == '__main__':
-    app.run_server(debug=True)
+    app.run_server(debug=True)

demos/usage-initialisation.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/initialisation/
-Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/initialisation/code.js
 
 Note: The click-and-drag functionality is broken in this Dash implementation
 because the example requires a function referring to the "cy" property, i.e.

demos/usage-labels.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/labels/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/labels
 
 Note: This example is broken because layout takes a function as input:
 ```
@@ -51,7 +50,8 @@
 
     {'data': {'id': 'ar-src'}},
     {'data': {'id': 'ar-tgt'}},
-    {'data': {'source': 'ar-src', 'target': 'ar-tgt', 'label': 'autorotate (move my nodes)'}, 'classes': 'autorotate'},
+    {'data': {'source': 'ar-src', 'target': 'ar-tgt', 'label': 'autorotate (move my nodes)'},
+     'classes': 'autorotate'},
     {'data': {'label': 'background'}, 'classes': 'background'}
 ]
 

demos/usage-linkout-example.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/linkout-example/
-Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/linkout-example/
 
 Note: Href Links do not work
 

demos/usage-multiple-instances.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/multiple-instances/
-Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/multiple-instances
 """
 import dash
 import dash_html_components as html

demos/usage-phylogeny.py

@@ -1,10 +1,10 @@
+# pylint: disable=W0621
 import math
 
 import dash
-import dash_html_components as html
 from dash.dependencies import Input, Output
-
 import dash_cytoscape as cyto
+import dash_html_components as html
 
 try:
     from Bio import Phylo
@@ -16,13 +16,13 @@
 
 def generate_elements(tree, xlen=30, ylen=30, grabbable=False):
     def get_col_positions(tree, column_width=80):
+        """Create a mapping of each clade to its column position."""
         taxa = tree.get_terminals()
 
         # Some constants for the drawing calculations
         max_label_width = max(len(str(taxon)) for taxon in taxa)
         drawing_width = column_width - max_label_width - 1
 
-        """Create a mapping of each clade to its column position."""
         depths = tree.depths()
         # If there are no branch lengths, assume unit branch lengths
         if not max(depths.values()):
@@ -164,7 +164,6 @@ def add_to_elements(clade, clade_id):
 app = dash.Dash(__name__)
 server = app.server
 
-
 app.layout = html.Div([
     cyto.Cytoscape(
         id='cytoscape',

demos/usage-pie-style.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/pie-style/
-Original Code: https://github.com/cytoscape/cytoscape.js/blob/master/documentation/demos/pie-style
 """
 import dash
 import dash_html_components as html

demos/usage-visual-style.py

@@ -1,6 +1,5 @@
 """
 Original Demo: http://js.cytoscape.org/demos/visual-style/
-Original Code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/visual-style
 """
 import dash
 import dash_html_components as html