Merge pull request #195 from Farkites/add-timestamp-to-events

Add timestamp to events, update positions on drag, and add `clearOnUnhover` prop.

Author: Farkites

CHANGELOG.md

@@ -4,18 +4,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.3.1] - 2023-09-27 
+## [UNRELEASED]
 
 ### Added
 * `prettier` and `black` lint/format scripts have been added.
 * React 18 job has been added to circleCI workflow.
+* [#195](https://github.com/plotly/dash-cytoscape/pull/195)
+  - Add `clearOnUnhover` property.
+  - Add timestamp to `tapNodeData`, `tapEdgeData`, `mouseoverNodeData`, and `mouseoverEdgeData` properties.
 
 ### Changed
 * Dash has been upgraded to 2.* in requirements.txt and tests/requirements.txt.
 * Dependencies have been upgraded to lastest versions.
 * CircleCI workflow has been updated to version 2.1.
 * Python version in CircleCI workflow has been updated to 3.11.
 * Node version in CircleCI workflow has been updated to 20.5.1.
+* [#195](https://github.com/plotly/dash-cytoscape/pull/195) Update `elements` positions when nodes are dragged.
 
 ### Fixed
 * CircleCI workflow has been fixed. 

CONTRIBUTING.md

@@ -7,11 +7,14 @@ Thank you for your interesting in contributing to this open-source project! Make
 Please follow the following steps for local testing:
 
 1. Clone the repo
+
 ```commandline
 git clone https://github.com/plotly/dash-cytoscape.git
 ```
-2. In order to run the Python builds (`npm run build:backends`) you need to create a 
-venv for this project. Make sure you have `virtualenv` correctly installed and run this:
+
+2. In order to run the Python builds (`npm run build:all`) you need to create a
+   venv for this project. Make sure you have `virtualenv` correctly installed and run this:
+
 ```commandline
 mkdir dash_cytoscape_dev
 cd dash_cytoscape_dev
@@ -21,14 +24,16 @@ pip install -r requirements.txt  # Install the requirements
 ```
 
 To activate in windows, replace the 4th line with this:
+
 ```commandline
-venv\Scripts\activate 
+venv\Scripts\activate
 ```
 
 3. Install the JavaScript dependencies and build the code:
+
 ```commandline
 npm install
-npm run build:backends
+npm run build:all
 ```
 
 #### Package manager
@@ -37,12 +42,10 @@ Before v0.2.0, our preferred package manager for this project is Yarn. Starting
 
 ## Coding Style
 
-Please lint any additions to Python code with `pylint` and `flake8`:
+Please lint any additions to Python and JS code with `pylint`, `flake8`, `black`, `eslint`, and `prettier`:
+
 ```commandline
-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
-pylint usage.py usage-advanced.py usage-elements.py usage-events.py usage-stylesheet.py
-pylint demos tests
+npm run lint:all
 ```
 
 ## Code quality & design
@@ -63,37 +66,41 @@ pylint demos tests
 *   Scan your code for expensive operations (large computations, DOM queries, React re-renders). Have you done your possible to limit their impact? If not, it is going to slow your app down.
 *   Can you think of cases where your current code will break? How are you handling errors? Should the user see them as notifications? Should your app try to auto-correct them for them?
 
-
 ## Tests
 
 ### Running the tests
 
 Activate your virtualenv:
+
 ```commandline
 source venv/bin/activate
 ```
 
 If needed, install the requirements:
+
 ```commandline
 pip install -r tests/requirements.txt
 ```
 
-Run the following tests:
+Install ChromeDriver following the instructions [here (Mac)](https://www.kenst.com/2015/03/installing-chromedriver-on-mac-osx/) or [here (Windows)](http://jonathansoma.com/lede/foundations-2018/classes/selenium/selenium-windows-install/). You must install the version of ChromeDriver that matches your Chrome version.
+
+Run the tests using the following command:
+
 ```commandline
-python -m unittest tests.test_callbacks
-python -m unittest tests.test_interactions
-python -m unittest tests.test_usage
+pytest --headless
 ```
 
 Look inside the `tests/screenshots` directory to find the images created by the tests. If you have
 Percy configured, run the following test:
+
 ```commandline
 python -m unittest tests.test_percy_snapshot
-``` 
+```
 
 ### Percy
 
 Make sure to configure your Percy environment variables correctly:
+
 ```commandline
 PERCY_BRANCH=local
 PERCY_ENABLED=1
@@ -103,10 +110,12 @@ PERCY_TOKEN=***************
 You can find the token in the [project settings of the Percy project](https://percy.io/plotly/dash-cytoscape/settings). Only members of the Plotly organizations have access to this token.
 
 ### About the tests
+
 The tests are broken down in 3 categories:
-* Callbacks: Tests if the `elements`, `stylesheet` and `layout` properties can be updated correctly by other Dash components using callbacks.
-* Interactions: Tests user interactions such as dragging, clicking, and hovering over nodes, as well as the associated event callbacks.
-* Usage: Tests if all of the usage apps render correctly on start. This does not test callbacks.
+
+-   Callbacks: Tests if the `elements`, `stylesheet` and `layout` properties can be updated correctly by other Dash components using callbacks.
+-   Interactions: Tests user interactions such as dragging, clicking, and hovering over nodes, as well as the associated event callbacks.
+-   Usage: Tests if all of the usage apps render correctly on start. This does not test callbacks.
 
 Those tests are rendered into images located inside `tests/screenshots`, which are then sent to a Percy build using `tests.test_percy_snapshot`, which creates a Dash app that only serves the content of `tests/screenshots` at different routes, which are then captured by the Percy runner.
 
@@ -122,14 +131,19 @@ To publish or create a prerelease:
 2. Bump version numbers in `package.json`, update the [CHANGELOG](CHANGELOG.md), and make a pull request
 3. Once the pull request is merged into master:
 4. Build
+
 ```
-npm run build:backends
+npm run build:all
 ```
+
 5. Create distribution tarball
+
 ```
 python setup.py sdist
 ```
+
 6. Copy the tarball into a separate folder and try to install it and run the examples:
+
 ```
 cp dist/dash_cytoscape-x.x.x.tar.gz ../temp
 cp usage.py ../temp
@@ -138,64 +152,77 @@ source venv/bin/activate
 pip install dash_cytoscape-x.x.x.tar.gz
 python usage.py
 ```
+
 7. If the examples work, then publish:
+
 ```
 npm publish
 twine upload dist/dash_cytoscape-x.x.x.tar.gz
 ```
+
 8. Tag your release with git:
+
 ```
 git tag -a 'vx.x.x' -m 'vx.x.x'
 git push origin master --follow-tags
 ```
+
 9. Verify that the publish worked by installing it:
+
 ```
 cd ../temp
 pip install dash-cytoscape==x.x.x
 python usage.py
 ```
 
-
 Make a post in the [Dash Community Forum](https://community.plotly.com/c/dash)
-* Title it `":mega: Announcement! New <Your Feature> - Feedback Welcome"`
-* In the description, link to the PR and any relevant issue(s)
-* Pin the topic so that it appears at the top of the forum for two weeks
+
+-   Title it `":mega: Announcement! New <Your Feature> - Feedback Welcome"`
+-   In the description, link to the PR and any relevant issue(s)
+-   Pin the topic so that it appears at the top of the forum for two weeks
 
 ## [Checklists](http://rs.io/unreasonable-effectiveness-of-checklists/)
+
 **Beginner tip:** _Copy and paste this section as a comment in your PR, then check off the boxes as you go!_
+
 ### Pre-Merge checklist
-- [ ] The project was correctly built with `npm run build:backends`.
-- [ ] If there was any conflict, it was solved correctly
-- [ ] All changes were documented in CHANGELOG.md.
-- [ ] All tests on CircleCI have passed.
-- [ ] All Percy visual changes have been approved.
-- [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash Cytoscape core contributor.
+
+-   [ ] The project was correctly built with `npm run build:all`.
+-   [ ] If there was any conflict, it was solved correctly
+-   [ ] All changes were documented in CHANGELOG.md.
+-   [ ] All tests on CircleCI have passed.
+-   [ ] All Percy visual changes have been approved.
+-   [ ] Two people have :dancer:'d the pull request. You can be one of these people if you are a Dash Cytoscape core contributor.
 
 ### Merge step
-1. Make sure to *Squash and Merge* your contribution if you have created multiple commits to change a specific feature.
-2. Make sure to *Rebase and Merge* if you added many different features, and need to contribute multiple different commits.
+
+1. Make sure to _Squash and Merge_ your contribution if you have created multiple commits to change a specific feature.
+2. Make sure to _Rebase and Merge_ if you added many different features, and need to contribute multiple different commits.
 
 ### Post-Merge checklist
-- [ ] You have tagged the release using `git tag v<version_number>` _(for the contributor merging the PR)_.
-- [ ] You have pushed this tag using `git push <tag_name>` _(for the contributor merging the PR)_.
-- [ ] You have deleted the branch.
+
+-   [ ] You have tagged the release using `git tag v<version_number>` _(for the contributor merging the PR)_.
+-   [ ] You have pushed this tag using `git push <tag_name>` _(for the contributor merging the PR)_.
+-   [ ] You have deleted the branch.
 
 ### Pre-Release checklist
-- [ ] Everything in the Pre-Merge checklist is completed.
-- [ ] `git remote show origin` shows you are in the correct repository.
-- [ ] `git branch` shows that you are on the expected branch.
-- [ ] `git status` shows that there are no unexpected changes.
-- [ ] Both `package.json` and `dash_cytoscape/package.json` versions have been correctly updated.
+
+-   [ ] Everything in the Pre-Merge checklist is completed.
+-   [ ] `git remote show origin` shows you are in the correct repository.
+-   [ ] `git branch` shows that you are on the expected branch.
+-   [ ] `git status` shows that there are no unexpected changes.
+-   [ ] Both `package.json` and `dash_cytoscape/package.json` versions have been correctly updated.
 
 ### Release Step
+
 Complete the "Publishing" section.
 
 ### Post-Release checklist
-- [ ] Step 1 and 2 of Post-merge checklist are completed.
-- [ ] You have closed all issues that this pull request solves, and commented the new version number users should install.
-- [ ] If significant enough, you have created an issue about documenting the new feature or change and you have added it to the [Documentation] project.
-- [ ] You have created a pull request in [Dash Docs] with the new release of your feature by editing that project's [`requirements.txt` file](https://github.com/plotly/dash-docs/blob/master/requirements.txt).
 
+-   [ ] Step 1 and 2 of Post-merge checklist are completed.
+-   [ ] You have closed all issues that this pull request solves, and commented the new version number users should install.
+-   [ ] If significant enough, you have created an issue about documenting the new feature or change and you have added it to the [Documentation] project.
+-   [ ] You have created a pull request in [Dash Docs] with the new release of your feature by editing that project's [`requirements.txt` file](https://github.com/plotly/dash-docs/blob/master/requirements.txt).
 
 ## Financial Contributions
 
@@ -205,7 +232,7 @@ Dash, and many of Plotly's open source products, have been funded through direct
 [Dash HTML Components]: https://github.com/plotly/dash-html-components
 [write your own components]: https://dash.plotly.com/plugins
 [Dash Component Biolerplate]: https://github.com/plotly/dash-component-boilerplate
-[issues]: https://github.com/plotly/dash-core-components/issues 
+[issues]: https://github.com/plotly/dash-core-components/issues
 [GitHub flow]: https://guides.github.com/introduction/flow/
 [eslintrc-react.json]: https://github.com/plotly/dash-components-archetype/blob/master/config/eslint/eslintrc-react.json
 [contributors]: https://github.com/plotly/dash-core-components/graphs/contributors

R/cytoCytoscape.R

@@ -1,17 +1,17 @@
 # AUTO GENERATED FILE - DO NOT EDIT
 
 #' @export
-cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoungrabify=NULL, autounselectify=NULL, boxSelectionEnabled=NULL, className=NULL, elements=NULL, generateImage=NULL, imageData=NULL, layout=NULL, maxZoom=NULL, minZoom=NULL, mouseoverEdgeData=NULL, mouseoverNodeData=NULL, pan=NULL, panningEnabled=NULL, responsive=NULL, selectedEdgeData=NULL, selectedNodeData=NULL, style=NULL, stylesheet=NULL, tapEdge=NULL, tapEdgeData=NULL, tapNode=NULL, tapNodeData=NULL, userPanningEnabled=NULL, userZoomingEnabled=NULL, zoom=NULL, zoomingEnabled=NULL) {
+cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoungrabify=NULL, autounselectify=NULL, boxSelectionEnabled=NULL, className=NULL, clearOnUnhover=NULL, elements=NULL, generateImage=NULL, imageData=NULL, layout=NULL, maxZoom=NULL, minZoom=NULL, mouseoverEdgeData=NULL, mouseoverNodeData=NULL, pan=NULL, panningEnabled=NULL, responsive=NULL, selectedEdgeData=NULL, selectedNodeData=NULL, style=NULL, stylesheet=NULL, tapEdge=NULL, tapEdgeData=NULL, tapNode=NULL, tapNodeData=NULL, userPanningEnabled=NULL, userZoomingEnabled=NULL, zoom=NULL, zoomingEnabled=NULL) {
 
-    props <- list(id=id, autoRefreshLayout=autoRefreshLayout, autolock=autolock, autoungrabify=autoungrabify, autounselectify=autounselectify, boxSelectionEnabled=boxSelectionEnabled, className=className, elements=elements, generateImage=generateImage, imageData=imageData, layout=layout, maxZoom=maxZoom, minZoom=minZoom, mouseoverEdgeData=mouseoverEdgeData, mouseoverNodeData=mouseoverNodeData, pan=pan, panningEnabled=panningEnabled, responsive=responsive, selectedEdgeData=selectedEdgeData, selectedNodeData=selectedNodeData, style=style, stylesheet=stylesheet, tapEdge=tapEdge, tapEdgeData=tapEdgeData, tapNode=tapNode, tapNodeData=tapNodeData, userPanningEnabled=userPanningEnabled, userZoomingEnabled=userZoomingEnabled, zoom=zoom, zoomingEnabled=zoomingEnabled)
+    props <- list(id=id, autoRefreshLayout=autoRefreshLayout, autolock=autolock, autoungrabify=autoungrabify, autounselectify=autounselectify, boxSelectionEnabled=boxSelectionEnabled, className=className, clearOnUnhover=clearOnUnhover, elements=elements, generateImage=generateImage, imageData=imageData, layout=layout, maxZoom=maxZoom, minZoom=minZoom, mouseoverEdgeData=mouseoverEdgeData, mouseoverNodeData=mouseoverNodeData, pan=pan, panningEnabled=panningEnabled, responsive=responsive, selectedEdgeData=selectedEdgeData, selectedNodeData=selectedNodeData, style=style, stylesheet=stylesheet, tapEdge=tapEdge, tapEdgeData=tapEdgeData, tapNode=tapNode, tapNodeData=tapNodeData, userPanningEnabled=userPanningEnabled, userZoomingEnabled=userZoomingEnabled, zoom=zoom, zoomingEnabled=zoomingEnabled)
     if (length(props) > 0) {
         props <- props[!vapply(props, is.null, logical(1))]
     }
     component <- list(
         props = props,
         type = 'Cytoscape',
         namespace = 'dash_cytoscape',
-        propNames = c('id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'elements', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'),
+        propNames = c('id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'clearOnUnhover', 'elements', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'),
         package = 'dashCytoscape'
         )
 

dash_cytoscape/Cytoscape.py

@@ -38,6 +38,12 @@ class Cytoscape(Component):
         Sets the class name of the element (the value of an element's html
         class attribute).
 
+    - clearOnUnhover (boolean; default False):
+        If set to True, mouseoverNodeData and mouseoverEdgeData will be
+        cleared on unhover. If set to False, the value of
+        mouseoverNodeData and mouseoverEdgeData will be the last Node or
+        Edge hovered over.
+
     - elements (list of dicts; optional):
         A list of dictionaries representing the elements of the networks.
         Each dictionary describes an element, and specifies its purpose.
@@ -467,6 +473,7 @@ def __init__(
         generateImage=Component.UNDEFINED,
         imageData=Component.UNDEFINED,
         responsive=Component.UNDEFINED,
+        clearOnUnhover=Component.UNDEFINED,
         **kwargs
     ):
         self._prop_names = [
@@ -477,6 +484,7 @@ def __init__(
             "autounselectify",
             "boxSelectionEnabled",
             "className",
+            "clearOnUnhover",
             "elements",
             "generateImage",
             "imageData",
@@ -510,6 +518,7 @@ def __init__(
             "autounselectify",
             "boxSelectionEnabled",
             "className",
+            "clearOnUnhover",
             "elements",
             "generateImage",
             "imageData",

dash_cytoscape/dash_cytoscape.dev.js

@@ -880,6 +880,17 @@
           "value": "false",
           "computed": false
         }
+      },
+      "clearOnUnhover": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "If set to True, mouseoverNodeData and mouseoverEdgeData will be cleared on unhover.\nIf set to False, the value of mouseoverNodeData and mouseoverEdgeData will be the last\nNode or Edge hovered over",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
       }
     }
   }