Merge pull request #217 from plotly/cyleaflet-performance

Cyleaflet performance and mouse position mismatch

CHANGELOG.md

@@ -4,12 +4,14 @@ 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).
 
-## [Unreleased]
+## [1.0.1] - 2024-05-23
 
 ### Fixed
 * [#205](https://github.com/plotly/dash-cytoscape/pull/205) Fixed updating maxZoom via callback in CyLeaflet AIO component.
 * [#207](https://github.com/plotly/dash-cytoscape/pull/207) Allow access to updated lat/lon when Cytoscape nodes in CyLeaflet AIO component are modified via UI.
 * [#208](https://github.com/plotly/dash-cytoscape/pull/208) Allow updating Cytoscape elements in CyLeaflet AIO component via callback.
+* [#210](https://github.com/plotly/dash-cytoscape/pull/210) Performace improvement: added debounce to update elements event.
+* [#212](https://github.com/plotly/dash-cytoscape/pull/212) Added call to `cy.resize` to fix mouse position mismatch on `tapstart` event. 
 
 ## [1.0.0] - 2024-01-26
 

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dashCytoscape
 Title: A Component Library for 'Dash' aimed at facilitating network visualization in R, wrapped around Cytoscape.js.
-Version: 1.0.0
+Version: 1.0.1
 Description: A Component Library for 'Dash' aimed at facilitating network visualization in R, wrapped around Cytoscape.js.
 Depends: R (>= 3.0.2)
 Imports: 

Project.toml

@@ -2,7 +2,7 @@
 name = "DashCytoscape"
 uuid = "1b08a953-4be3-4667-9a23-85cc21bfd5e9"
 authors = ["The Plotly Team <[email protected]>"]
-version = "1.0.0"
+version = "1.0.1"
 
 [deps]
 Dash = "1b08a953-4be3-4667-9a23-3db579824955"

R/internal.R

@@ -1,6 +1,6 @@
 .dashCytoscape_js_metadata <- function() {
 deps_metadata <- list(`dash_cytoscape` = structure(list(name = "dash_cytoscape",
-version = "1.0.0", src = list(href = NULL,
+version = "1.0.1", src = list(href = NULL,
 file = "deps"), meta = NULL,
 script = 'dash_cytoscape.min.js',
 stylesheet = NULL, head = NULL, attachment = NULL, package = "dashCytoscape",

dash_cytoscape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-cytoscape",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js",
   "repository": {
     "type": "git",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-cytoscape",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js",
   "repository": {
     "type": "git",

src/DashCytoscape.jl

@@ -3,7 +3,7 @@ module DashCytoscape
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "1.0.0"
+const version = "1.0.1"
 
 include("jl/cyto_cytoscape.jl")
 
@@ -16,7 +16,7 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "dash_cytoscape.min.js",
-    external_url = "https://unpkg.com/[email protected].0/dash_cytoscape/dash_cytoscape.min.js",
+    external_url = "https://unpkg.com/[email protected].1/dash_cytoscape/dash_cytoscape.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js

src/lib/components/Cytoscape.react.js

@@ -168,6 +168,8 @@ class Cytoscape extends Component {
         // ///////////////////////////////////// CONSTANTS /////////////////////////////////////////
         const SELECT_THRESHOLD = 100;
         const EXTENT_THRESHOLD = 5;
+        const UPDATE_ELEMENTS_THRESHOLD = 100;
+        const RESIZE_THRESHOLD = 50;
 
         const selectedNodes = cy.collection();
         const selectedEdges = cy.collection();
@@ -214,6 +216,27 @@ class Cytoscape extends Component {
             });
         }, EXTENT_THRESHOLD);
 
+        const updateElements = _.debounce(() => {
+            this.props.setProps({
+                elements: cy.elements('').map((item) => {
+                    if (item.json().group === 'nodes') {
+                        return {
+                            data: item.json().data,
+                            position: item.json().position,
+                        };
+                    }
+                    return {
+                        data: item.json().data,
+                        position: void 0,
+                    };
+                }),
+            });
+        }, UPDATE_ELEMENTS_THRESHOLD);
+
+        const resize = _.debounce(() => {
+            cy.resize();
+        }, RESIZE_THRESHOLD);
+
         // Store the original maxZoom and minZoom functions
         const originalMaxZoomFn = cy.maxZoom;
         const originalMinZoomFn = cy.minZoom;
@@ -331,26 +354,17 @@ class Cytoscape extends Component {
         });
 
         cy.on('dragfree add remove', (_) => {
-            this.props.setProps({
-                elements: cy.elements('').map((item) => {
-                    if (item.json().group === 'nodes') {
-                        return {
-                            data: item.json().data,
-                            position: item.json().position,
-                        };
-                    }
-                    return {
-                        data: item.json().data,
-                        position: void 0,
-                    };
-                }),
-            });
+            updateElements();
         });
 
-        cy.on('viewport resize', () => {
+        cy.on('resize viewport', () => {
             setExtent(cy.extent());
         });
 
+        cy.on('tapstart', () => {
+            resize();
+        });
+
         // Refresh layout if current zoom is out of boundaries
         cy.on('minMaxZoomChange', function () {
             const zoom = cy.zoom();