From 2223d2677cf6797bdbc5be23ebaf5a23bdd826ea Mon Sep 17 00:00:00 2001 From: eai-oen <33435648+eai-oen@users.noreply.github.com> Date: Fri, 20 Aug 2021 11:28:39 +0100 Subject: [PATCH 1/2] Fix missing package.json --- dash_cytoscape/{package-info.json => package.json} | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename dash_cytoscape/{package-info.json => package.json} (96%) diff --git a/dash_cytoscape/package-info.json b/dash_cytoscape/package.json similarity index 96% rename from dash_cytoscape/package-info.json rename to dash_cytoscape/package.json index 97f8563f..cb7d0eaa 100644 --- a/dash_cytoscape/package-info.json +++ b/dash_cytoscape/package.json @@ -21,7 +21,7 @@ "build:js-dev-extra": "webpack --config webpack.dev.extra.config.js", "build:js-extra": "webpack --config webpack.prod.extra.config.js", "build:js-all": "npm run build:js && npm run build:js-dev && npm run build:js-dev-extra && npm run build:js-extra", - "build:backends": "dash-generate-components ./src/lib/components dash_cytoscape -p package-info.json --r-prefix 'cyto' --jl-prefix 'cyto'", + "build:backends": "dash-generate-components ./src/lib/components dash_cytoscape --r-prefix 'cyto' --jl-prefix 'cyto'", "build:all": "npm run build:js-all && npm run build:backends", "build:all-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:all)" }, diff --git a/package.json b/package.json index 97f8563f..cb7d0eaa 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "build:js-dev-extra": "webpack --config webpack.dev.extra.config.js", "build:js-extra": "webpack --config webpack.prod.extra.config.js", "build:js-all": "npm run build:js && npm run build:js-dev && npm run build:js-dev-extra && npm run build:js-extra", - "build:backends": "dash-generate-components ./src/lib/components dash_cytoscape -p package-info.json --r-prefix 'cyto' --jl-prefix 'cyto'", + "build:backends": "dash-generate-components ./src/lib/components dash_cytoscape --r-prefix 'cyto' --jl-prefix 'cyto'", "build:all": "npm run build:js-all && npm run build:backends", "build:all-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:all)" }, From af237a993e7fe2b8edb81ffeccb29dbaaab5d9f6 Mon Sep 17 00:00:00 2001 From: eai-oen <33435648+eai-oen@users.noreply.github.com> Date: Fri, 20 Aug 2021 11:36:03 +0100 Subject: [PATCH 2/2] Add cxttap, mouseout events --- R/cytoCytoscape.R | 6 +- dash_cytoscape/Cytoscape.py | 148 +++++++++++++- dash_cytoscape/metadata.json | 276 ++++++++++++++++++++++++++ man/cytoCytoscape.Rd | 64 +++++- src/DashCytoscape.jl | 4 +- src/lib/components/Cytoscape.react.js | 146 ++++++++++++++ 6 files changed, 631 insertions(+), 13 deletions(-) diff --git a/R/cytoCytoscape.R b/R/cytoCytoscape.R index 5c062452..08b2a412 100644 --- a/R/cytoCytoscape.R +++ b/R/cytoCytoscape.R @@ -1,8 +1,8 @@ # AUTO GENERATED FILE - DO NOT EDIT -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, cxtTapEdge=NULL, cxtTapEdgeData=NULL, cxtTapNode=NULL, cxtTapNodeData=NULL, elements=NULL, generateImage=NULL, imageData=NULL, layout=NULL, maxZoom=NULL, minZoom=NULL, mouseoutEdgeData=NULL, mouseoutNodeData=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, cxtTapEdge=cxtTapEdge, cxtTapEdgeData=cxtTapEdgeData, cxtTapNode=cxtTapNode, cxtTapNodeData=cxtTapNodeData, elements=elements, generateImage=generateImage, imageData=imageData, layout=layout, maxZoom=maxZoom, minZoom=minZoom, mouseoutEdgeData=mouseoutEdgeData, mouseoutNodeData=mouseoutNodeData, 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))] } @@ -10,7 +10,7 @@ cytoCytoscape <- function(id=NULL, autoRefreshLayout=NULL, autolock=NULL, autoun 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', 'cxtTapEdge', 'cxtTapEdgeData', 'cxtTapNode', 'cxtTapNodeData', 'elements', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoutEdgeData', 'mouseoutNodeData', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'), package = 'dashCytoscape' ) diff --git a/dash_cytoscape/Cytoscape.py b/dash_cytoscape/Cytoscape.py index 8f71c9ce..a73d50d7 100644 --- a/dash_cytoscape/Cytoscape.py +++ b/dash_cytoscape/Cytoscape.py @@ -38,6 +38,140 @@ class Cytoscape(Component): Sets the class name of the element (the value of an element's html class attribute). +- cxtTapEdge (dict; optional): + The complete edge dictionary returned when you two-finger tap or + right-click it. Read-only. + + `cxtTapEdge` is a dict with keys: + + - classes (string; optional): + General item (for all elements). + + - data (dict; optional): + General item (for all elements). + + - grabbable (boolean; optional): + General item (for all elements). + + - group (string; optional): + General item (for all elements). + + - isLoop (boolean; optional): + Edge-specific item. + + - isSimple (boolean; optional): + Edge-specific item. + + - locked (boolean; optional): + General item (for all elements). + + - midpoint (dict; optional): + Edge-specific item. + + - selectable (boolean; optional): + General item (for all elements). + + - selected (boolean; optional): + General item (for all elements). + + - sourceData (dict; optional): + Edge-specific item. + + - sourceEndpoint (dict; optional): + Edge-specific item. + + - style (dict; optional): + General item (for all elements). + + - targetData (dict; optional): + Edge-specific item. + + - targetEndpoint (dict; optional): + Edge-specific item. + + - timeStamp (number; optional): + Edge-specific item. + +- cxtTapEdgeData (dict; optional): + The data dictionary of an edge returned when you two-finger tap or + right-click it. Read-only. + +- cxtTapNode (dict; optional): + The complete node dictionary returned when you two-finger tap or + right-click it. Read-only. + + `cxtTapNode` is a dict with keys: + + - ancestorsData (dict | list; optional): + Item for compound nodes. + + - childrenData (dict | list; optional): + Item for compound nodes. + + - classes (string; optional): + General item (for all elements). + + - data (dict; optional): + General item (for all elements). + + - descendantsData (dict | list; optional): + Item for compound nodes. + + - edgesData (list; optional): + node specific item. + + - grabbable (boolean; optional): + General item (for all elements). + + - group (string; optional): + General item (for all elements). + + - isChild (boolean; optional): + Item for compound nodes. + + - isChildless (boolean; optional): + Item for compound nodes. + + - isOrphan (boolean; optional): + Item for compound nodes. + + - isParent (boolean; optional): + Item for compound nodes. + + - locked (boolean; optional): + General item (for all elements). + + - parentData (dict | list; optional): + Item for compound nodes. + + - position (dict; optional): + General item (for all elements). + + - relativePosition (dict; optional): + Item for compound nodes. + + - renderedPosition (dict; optional): + node specific item. + + - selectable (boolean; optional): + General item (for all elements). + + - selected (boolean; optional): + General item (for all elements). + + - siblingsData (dict | list; optional): + Item for compound nodes. + + - style (dict; optional): + General item (for all elements). + + - timeStamp (number; optional): + node specific item. + +- cxtTapNodeData (dict; optional): + The data dictionary of a node returned when you two-finger tap or + right-click it. Read-only. + - elements (list of dicts; optional): A list of dictionaries representing the elements of the networks. Each dictionary describes an element, and specifies its purpose. @@ -216,6 +350,14 @@ class attribute). A minimum bound on the zoom level of the graph. The viewport can not be scaled smaller than this zoom level. +- mouseoutEdgeData (dict; optional): + The data dictionary of an edge returned when you hover out of it. + Read-only. + +- mouseoutNodeData (dict; optional): + The data dictionary of a node returned when you hover out of it. + Read-only. + - mouseoverEdgeData (dict; optional): The data dictionary of an edge returned when you hover over it. Read-only. @@ -428,12 +570,12 @@ class attribute). Whether zooming the graph is enabled (i.e., the zoom level of the graph is mutable overall).""" @_explicitize_args - def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, elements=Component.UNDEFINED, stylesheet=Component.UNDEFINED, layout=Component.UNDEFINED, pan=Component.UNDEFINED, zoom=Component.UNDEFINED, panningEnabled=Component.UNDEFINED, userPanningEnabled=Component.UNDEFINED, minZoom=Component.UNDEFINED, maxZoom=Component.UNDEFINED, zoomingEnabled=Component.UNDEFINED, userZoomingEnabled=Component.UNDEFINED, boxSelectionEnabled=Component.UNDEFINED, autoungrabify=Component.UNDEFINED, autolock=Component.UNDEFINED, autounselectify=Component.UNDEFINED, autoRefreshLayout=Component.UNDEFINED, tapNode=Component.UNDEFINED, tapNodeData=Component.UNDEFINED, tapEdge=Component.UNDEFINED, tapEdgeData=Component.UNDEFINED, mouseoverNodeData=Component.UNDEFINED, mouseoverEdgeData=Component.UNDEFINED, selectedNodeData=Component.UNDEFINED, selectedEdgeData=Component.UNDEFINED, generateImage=Component.UNDEFINED, imageData=Component.UNDEFINED, responsive=Component.UNDEFINED, **kwargs): - self._prop_names = ['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'] + def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, elements=Component.UNDEFINED, stylesheet=Component.UNDEFINED, layout=Component.UNDEFINED, pan=Component.UNDEFINED, zoom=Component.UNDEFINED, panningEnabled=Component.UNDEFINED, userPanningEnabled=Component.UNDEFINED, minZoom=Component.UNDEFINED, maxZoom=Component.UNDEFINED, zoomingEnabled=Component.UNDEFINED, userZoomingEnabled=Component.UNDEFINED, boxSelectionEnabled=Component.UNDEFINED, autoungrabify=Component.UNDEFINED, autolock=Component.UNDEFINED, autounselectify=Component.UNDEFINED, autoRefreshLayout=Component.UNDEFINED, tapNode=Component.UNDEFINED, tapNodeData=Component.UNDEFINED, tapEdge=Component.UNDEFINED, tapEdgeData=Component.UNDEFINED, cxtTapNode=Component.UNDEFINED, cxtTapNodeData=Component.UNDEFINED, cxtTapEdge=Component.UNDEFINED, cxtTapEdgeData=Component.UNDEFINED, mouseoverNodeData=Component.UNDEFINED, mouseoverEdgeData=Component.UNDEFINED, mouseoutNodeData=Component.UNDEFINED, mouseoutEdgeData=Component.UNDEFINED, selectedNodeData=Component.UNDEFINED, selectedEdgeData=Component.UNDEFINED, generateImage=Component.UNDEFINED, imageData=Component.UNDEFINED, responsive=Component.UNDEFINED, **kwargs): + self._prop_names = ['id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'cxtTapEdge', 'cxtTapEdgeData', 'cxtTapNode', 'cxtTapNodeData', 'elements', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoutEdgeData', 'mouseoutNodeData', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'] self._type = 'Cytoscape' self._namespace = 'dash_cytoscape' self._valid_wildcard_attributes = [] - self.available_properties = ['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'] + self.available_properties = ['id', 'autoRefreshLayout', 'autolock', 'autoungrabify', 'autounselectify', 'boxSelectionEnabled', 'className', 'cxtTapEdge', 'cxtTapEdgeData', 'cxtTapNode', 'cxtTapNodeData', 'elements', 'generateImage', 'imageData', 'layout', 'maxZoom', 'minZoom', 'mouseoutEdgeData', 'mouseoutNodeData', 'mouseoverEdgeData', 'mouseoverNodeData', 'pan', 'panningEnabled', 'responsive', 'selectedEdgeData', 'selectedNodeData', 'style', 'stylesheet', 'tapEdge', 'tapEdgeData', 'tapNode', 'tapNodeData', 'userPanningEnabled', 'userZoomingEnabled', 'zoom', 'zoomingEnabled'] self.available_wildcard_properties = [] _explicit_args = kwargs.pop('_explicit_args') _locals = locals() diff --git a/dash_cytoscape/metadata.json b/dash_cytoscape/metadata.json index cb7465d0..f53d035c 100644 --- a/dash_cytoscape/metadata.json +++ b/dash_cytoscape/metadata.json @@ -762,6 +762,268 @@ "required": false, "description": "The data dictionary of an edge returned when you tap or click it. Read-only." }, + "cxtTapNode": { + "type": { + "name": "exact", + "value": { + "edgesData": { + "name": "array", + "description": "node specific item", + "required": false + }, + "renderedPosition": { + "name": "object", + "description": "node specific item", + "required": false + }, + "timeStamp": { + "name": "number", + "description": "node specific item", + "required": false + }, + "classes": { + "name": "string", + "description": "General item (for all elements)", + "required": false + }, + "data": { + "name": "object", + "description": "General item (for all elements)", + "required": false + }, + "grabbable": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "group": { + "name": "string", + "description": "General item (for all elements)", + "required": false + }, + "locked": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "position": { + "name": "object", + "description": "General item (for all elements)", + "required": false + }, + "selectable": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "selected": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "style": { + "name": "object", + "description": "General item (for all elements)", + "required": false + }, + "ancestorsData": { + "name": "union", + "value": [ + { + "name": "object" + }, + { + "name": "array" + } + ], + "description": "Item for compound nodes", + "required": false + }, + "childrenData": { + "name": "union", + "value": [ + { + "name": "object" + }, + { + "name": "array" + } + ], + "description": "Item for compound nodes", + "required": false + }, + "descendantsData": { + "name": "union", + "value": [ + { + "name": "object" + }, + { + "name": "array" + } + ], + "description": "Item for compound nodes", + "required": false + }, + "parentData": { + "name": "union", + "value": [ + { + "name": "object" + }, + { + "name": "array" + } + ], + "description": "Item for compound nodes", + "required": false + }, + "siblingsData": { + "name": "union", + "value": [ + { + "name": "object" + }, + { + "name": "array" + } + ], + "description": "Item for compound nodes", + "required": false + }, + "isParent": { + "name": "bool", + "description": "Item for compound nodes", + "required": false + }, + "isChildless": { + "name": "bool", + "description": "Item for compound nodes", + "required": false + }, + "isChild": { + "name": "bool", + "description": "Item for compound nodes", + "required": false + }, + "isOrphan": { + "name": "bool", + "description": "Item for compound nodes", + "required": false + }, + "relativePosition": { + "name": "object", + "description": "Item for compound nodes", + "required": false + } + } + }, + "required": false, + "description": "The complete node dictionary returned when you two-finger tap or right-click it. Read-only." + }, + "cxtTapNodeData": { + "type": { + "name": "object" + }, + "required": false, + "description": "The data dictionary of a node returned when you two-finger tap or right-click it. Read-only." + }, + "cxtTapEdge": { + "type": { + "name": "exact", + "value": { + "isLoop": { + "name": "bool", + "description": "Edge-specific item", + "required": false + }, + "isSimple": { + "name": "bool", + "description": "Edge-specific item", + "required": false + }, + "midpoint": { + "name": "object", + "description": "Edge-specific item", + "required": false + }, + "sourceData": { + "name": "object", + "description": "Edge-specific item", + "required": false + }, + "sourceEndpoint": { + "name": "object", + "description": "Edge-specific item", + "required": false + }, + "targetData": { + "name": "object", + "description": "Edge-specific item", + "required": false + }, + "targetEndpoint": { + "name": "object", + "description": "Edge-specific item", + "required": false + }, + "timeStamp": { + "name": "number", + "description": "Edge-specific item", + "required": false + }, + "classes": { + "name": "string", + "description": "General item (for all elements)", + "required": false + }, + "data": { + "name": "object", + "description": "General item (for all elements)", + "required": false + }, + "grabbable": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "group": { + "name": "string", + "description": "General item (for all elements)", + "required": false + }, + "locked": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "selectable": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "selected": { + "name": "bool", + "description": "General item (for all elements)", + "required": false + }, + "style": { + "name": "object", + "description": "General item (for all elements)", + "required": false + } + } + }, + "required": false, + "description": "The complete edge dictionary returned when you two-finger tap or right-click it. Read-only." + }, + "cxtTapEdgeData": { + "type": { + "name": "object" + }, + "required": false, + "description": "The data dictionary of an edge returned when you two-finger tap or right-click it. Read-only." + }, "mouseoverNodeData": { "type": { "name": "object" @@ -776,6 +1038,20 @@ "required": false, "description": "The data dictionary of an edge returned when you hover over it. Read-only." }, + "mouseoutNodeData": { + "type": { + "name": "object" + }, + "required": false, + "description": "The data dictionary of a node returned when you hover out of it. Read-only." + }, + "mouseoutEdgeData": { + "type": { + "name": "object" + }, + "required": false, + "description": "The data dictionary of an edge returned when you hover out of it. Read-only." + }, "selectedNodeData": { "type": { "name": "array" diff --git a/man/cytoCytoscape.Rd b/man/cytoCytoscape.Rd index 24468021..d264fed7 100644 --- a/man/cytoCytoscape.Rd +++ b/man/cytoCytoscape.Rd @@ -12,11 +12,13 @@ A Component Library for Dash aimed at facilitating network visualization in Pyth \usage{ cytoCytoscape(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, +boxSelectionEnabled=NULL, className=NULL, cxtTapEdge=NULL, +cxtTapEdgeData=NULL, cxtTapNode=NULL, cxtTapNodeData=NULL, +elements=NULL, generateImage=NULL, imageData=NULL, +layout=NULL, maxZoom=NULL, minZoom=NULL, +mouseoutEdgeData=NULL, mouseoutNodeData=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, @@ -43,6 +45,54 @@ to select) is enabled. If enabled, the user must taphold to pan the graph.} \item{className}{Character. Sets the class name of the element (the value of an element's html class attribute).} +\item{cxtTapEdge}{Lists containing elements 'isloop', 'issimple', 'midpoint', 'sourcedata', 'sourceendpoint', 'targetdata', 'targetendpoint', 'timestamp', 'classes', 'data', 'grabbable', 'group', 'locked', 'selectable', 'selected', 'style'. +those elements have the following types: + - isloop (logical; optional): edge-specific item + - issimple (logical; optional): edge-specific item + - midpoint (named list; optional): edge-specific item + - sourcedata (named list; optional): edge-specific item + - sourceendpoint (named list; optional): edge-specific item + - targetdata (named list; optional): edge-specific item + - targetendpoint (named list; optional): edge-specific item + - timestamp (numeric; optional): edge-specific item + - classes (character; optional): general item (for all elements) + - data (named list; optional): general item (for all elements) + - grabbable (logical; optional): general item (for all elements) + - group (character; optional): general item (for all elements) + - locked (logical; optional): general item (for all elements) + - selectable (logical; optional): general item (for all elements) + - selected (logical; optional): general item (for all elements) + - style (named list; optional): general item (for all elements). The complete edge dictionary returned when you two-finger tap or right-click it. Read-only.} + +\item{cxtTapEdgeData}{Named list. The data dictionary of an edge returned when you two-finger tap or right-click it. Read-only.} + +\item{cxtTapNode}{Lists containing elements 'edgesdata', 'renderedposition', 'timestamp', 'classes', 'data', 'grabbable', 'group', 'locked', 'position', 'selectable', 'selected', 'style', 'ancestorsdata', 'childrendata', 'descendantsdata', 'parentdata', 'siblingsdata', 'isparent', 'ischildless', 'ischild', 'isorphan', 'relativeposition'. +those elements have the following types: + - edgesdata (unnamed list; optional): node specific item + - renderedposition (named list; optional): node specific item + - timestamp (numeric; optional): node specific item + - classes (character; optional): general item (for all elements) + - data (named list; optional): general item (for all elements) + - grabbable (logical; optional): general item (for all elements) + - group (character; optional): general item (for all elements) + - locked (logical; optional): general item (for all elements) + - position (named list; optional): general item (for all elements) + - selectable (logical; optional): general item (for all elements) + - selected (logical; optional): general item (for all elements) + - style (named list; optional): general item (for all elements) + - ancestorsdata (named list | unnamed list; optional): item for compound nodes + - childrendata (named list | unnamed list; optional): item for compound nodes + - descendantsdata (named list | unnamed list; optional): item for compound nodes + - parentdata (named list | unnamed list; optional): item for compound nodes + - siblingsdata (named list | unnamed list; optional): item for compound nodes + - isparent (logical; optional): item for compound nodes + - ischildless (logical; optional): item for compound nodes + - ischild (logical; optional): item for compound nodes + - isorphan (logical; optional): item for compound nodes + - relativeposition (named list; optional): item for compound nodes. The complete node dictionary returned when you two-finger tap or right-click it. Read-only.} + +\item{cxtTapNodeData}{Named list. The data dictionary of a node returned when you two-finger tap or right-click it. Read-only.} + \item{elements}{List of lists containing elements 'group', 'data', 'position', 'selected', 'selectable', 'locked', 'grabbable', 'classes'. those elements have the following types: - group (character; optional): either 'nodes' or 'edges'. if not given, it's automatically inferred. @@ -140,6 +190,10 @@ scaled larger than this zoom level.} \item{minZoom}{Numeric. A minimum bound on the zoom level of the graph. The viewport can not be scaled smaller than this zoom level.} +\item{mouseoutEdgeData}{Named list. The data dictionary of an edge returned when you hover out of it. Read-only.} + +\item{mouseoutNodeData}{Named list. The data dictionary of a node returned when you hover out of it. Read-only.} + \item{mouseoverEdgeData}{Named list. The data dictionary of an edge returned when you hover over it. Read-only.} \item{mouseoverNodeData}{Named list. The data dictionary of a node returned when you hover over it. Read-only.} diff --git a/src/DashCytoscape.jl b/src/DashCytoscape.jl index e7b8632c..85e2900a 100644 --- a/src/DashCytoscape.jl +++ b/src/DashCytoscape.jl @@ -5,7 +5,7 @@ using Dash const resources_path = realpath(joinpath( @__DIR__, "..", "deps")) const version = "0.3.0" -include("cyto_cytoscape.jl") +include("jl/cyto_cytoscape.jl") function __init__() DashBase.register_package( @@ -16,7 +16,7 @@ function __init__() [ DashBase.Resource( relative_package_path = "dash_cytoscape.min.js", - external_url = "https://unpkg.com/dash-cytoscape@0.2.0/dash_cytoscape/dash_cytoscape.min.js", + external_url = "https://unpkg.com/dash-cytoscape@0.3.0/dash_cytoscape/dash_cytoscape.min.js", dynamic = nothing, async = nothing, type = :js diff --git a/src/lib/components/Cytoscape.react.js b/src/lib/components/Cytoscape.react.js index 14934313..5104fdf7 100644 --- a/src/lib/components/Cytoscape.react.js +++ b/src/lib/components/Cytoscape.react.js @@ -229,6 +229,28 @@ class Cytoscape extends Component { } }); + cy.on('cxttap', 'node', event => { + const nodeObject = this.generateNode(event); + + if (typeof this.props.setProps === 'function') { + this.props.setProps({ + cxtTapNode: nodeObject, + cxtTapNodeData: nodeObject.data + }); + } + }); + + cy.on('cxttap', 'edge', event => { + const edgeObject = this.generateEdge(event); + + if (typeof this.props.setProps === 'function') { + this.props.setProps({ + cxtTapEdge: edgeObject, + cxtTapEdgeData: edgeObject.data + }); + } + }); + cy.on('mouseover', 'node', event => { if (typeof this.props.setProps === 'function') { this.props.setProps({ @@ -245,6 +267,22 @@ class Cytoscape extends Component { } }); + cy.on('mouseout', 'node', event => { + if (typeof this.props.setProps === 'function') { + this.props.setProps({ + mouseoutNodeData: event.target.data() + }); + } + }); + + cy.on('mouseout', 'edge', event => { + if (typeof this.props.setProps === 'function') { + this.props.setProps({ + mouseoutEdgeData: event.target.data() + }); + } + }); + cy.on('select', 'node', event => { const ele = event.target; @@ -840,6 +878,104 @@ Cytoscape.propTypes = { */ tapEdgeData: PropTypes.object, + /** + * The complete node dictionary returned when you two-finger tap or right-click it. Read-only. + */ + cxtTapNode: PropTypes.exact({ + /** node specific item */ + edgesData: PropTypes.array, + /** node specific item */ + renderedPosition: PropTypes.object, + /** node specific item */ + timeStamp: PropTypes.number, + /** General item (for all elements) */ + classes: PropTypes.string, + /** General item (for all elements) */ + data: PropTypes.object, + /** General item (for all elements) */ + grabbable: PropTypes.bool, + /** General item (for all elements) */ + group: PropTypes.string, + /** General item (for all elements) */ + locked: PropTypes.bool, + /** General item (for all elements) */ + position: PropTypes.object, + /** General item (for all elements) */ + selectable: PropTypes.bool, + /** General item (for all elements) */ + selected: PropTypes.bool, + /** General item (for all elements) */ + style: PropTypes.object, + /** Item for compound nodes */ + ancestorsData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + /** Item for compound nodes */ + childrenData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + /** Item for compound nodes */ + descendantsData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + /** Item for compound nodes */ + parentData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + /** Item for compound nodes */ + siblingsData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + /** Item for compound nodes */ + isParent: PropTypes.bool, + /** Item for compound nodes */ + isChildless: PropTypes.bool, + /** Item for compound nodes */ + isChild: PropTypes.bool, + /** Item for compound nodes */ + isOrphan: PropTypes.bool, + /** Item for compound nodes */ + relativePosition: PropTypes.object + }), + + /** + * The data dictionary of a node returned when you two-finger tap or right-click it. Read-only. + */ + cxtTapNodeData: PropTypes.object, + + /** + * The complete edge dictionary returned when you two-finger tap or right-click it. Read-only. + */ + cxtTapEdge: PropTypes.exact({ + /** Edge-specific item */ + isLoop: PropTypes.bool, + /** Edge-specific item */ + isSimple: PropTypes.bool, + /** Edge-specific item */ + midpoint: PropTypes.object, + /** Edge-specific item */ + sourceData: PropTypes.object, + /** Edge-specific item */ + sourceEndpoint: PropTypes.object, + /** Edge-specific item */ + targetData: PropTypes.object, + /** Edge-specific item */ + targetEndpoint: PropTypes.object, + /** Edge-specific item */ + timeStamp: PropTypes.number, + /** General item (for all elements) */ + classes: PropTypes.string, + /** General item (for all elements) */ + data: PropTypes.object, + /** General item (for all elements) */ + grabbable: PropTypes.bool, + /** General item (for all elements) */ + group: PropTypes.string, + /** General item (for all elements) */ + locked: PropTypes.bool, + /** General item (for all elements) */ + selectable: PropTypes.bool, + /** General item (for all elements) */ + selected: PropTypes.bool, + /** General item (for all elements) */ + style: PropTypes.object + }), + + /** + * The data dictionary of an edge returned when you two-finger tap or right-click it. Read-only. + */ + cxtTapEdgeData: PropTypes.object, + /** * The data dictionary of a node returned when you hover over it. Read-only. */ @@ -850,6 +986,16 @@ Cytoscape.propTypes = { */ mouseoverEdgeData: PropTypes.object, + /** + * The data dictionary of a node returned when you hover out of it. Read-only. + */ + mouseoutNodeData: PropTypes.object, + + /** + * The data dictionary of an edge returned when you hover out of it. Read-only. + */ + mouseoutEdgeData: PropTypes.object, + /** * The list of data dictionaries of all selected nodes (e.g. using * Shift+Click to select multiple nodes, or Shift+Drag to use box selection). Read-only.