plotly / dash-cytoscape Goto Github PK
View Code? Open in Web Editor NEWInteractive network visualization in Python and Dash, powered by Cytoscape.js
Home Page: https://dash.plot.ly/cytoscape
License: MIT License
Interactive network visualization in Python and Dash, powered by Cytoscape.js
Home Page: https://dash.plot.ly/cytoscape
License: MIT License
Right now, it's not clear in contributing.md
whether yarn or npm should be used. Since yarn
was chosen to be the package manager, we should more clearly indicate that in contributing.
First off, thanks for this awesome repo. Was wondering what the best way is to use a yFiles layout in dash-cyto. In particular, I find their hierarchic layout really useful but can't seem to find anything that comes close among the builtins or the "external layouts".
I'm open to any hacks that you would suggest/endorse perhaps using cytoscape's API or py2cytoscape that would facilitate this in the meantime?
Are there any guidelines for how to go about implementing a custom "external layout" somewhere?
Thanks again!
Receiving a SyntaxError when importing dash_cytoscape
H:\>python
Python 2.7.16 (v2.7.16:413a49145e, Mar 4 2019, 01:37:19) [MSC v.1500 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import dash
>>> import dash_cytoscape
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "C:\Python27\lib\site-packages\dash_cytoscape\__init__.py", line 12, in <module>
from . import utils
File "C:\Python27\lib\site-packages\dash_cytoscape\utils\__init__.py", line 1, in <module>
from .Tree import Tree
File "C:\Python27\lib\site-packages\dash_cytoscape\utils\Tree.py", line 85
**self.edge_data
^
SyntaxError: invalid syntax
>>>
Documentation about distance from node: http://js.cytoscape.org/#style/edge-endpoints
source-distance-from-node
and target-distance-from-node
don't seem to be updating correctly in Dash. Further exploration in React is planned before furthering this issue.
Some initialization options are not available: http://js.cytoscape.org/#core/initialisation
Specifically, the rendering options are not offered right now. This should be fairly fast, preferably released with 0.0.4
This is a feature request. Currently, it is possible to obtain complete node or edge dictionary interactively:
tapNode (dict; optional): The complete node dictionary returned when you tap or click it
It would be nice to be able to also do that programmatically (e.g. if one wants to store new rendered positions for the nodes).
Thanks a lot for Dash Cytoscape!
When pip installing from master and importing it an ImportError arises
pip install git+https://github.com/plotly/dash-cytoscape.git@master
import dash_cytoscape as cyto
No error
import dash_cytoscape as cyto
File "/venv/lib/python3.6/site-packages/dash_cytoscape/init.py", line 12, in
from . import utils
ImportError: cannot import name 'utils'
Python 3.6.8 (default, Apr 2 2020, 13:34:55)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux
Dash 1.9.1
Dash Core Components 1.0.2
Dash HTML Components 1.8.1
! Cytoscape errors out
! import dash_renderer; print("Dash Renderer", dash_renderer.__version)
AttributeError: module 'dash_renderer' has no attribute '__version'
IvoLeist@aaed204#diff-2eeaed663bd0d25b7e608891384b7298
@xhlulu Should I do a short PR or do you want to quickly fix that line?
With all necessary parameters it is still "jumping behaviour".
I've quickly made simple illustration using guide example:
import dash
import dash_cytoscape as cyto
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
nodes = [
{
'data': {'id': short, 'label': label},
'position': {'x': 20*lat, 'y': -20*long}
}
for short, label, long, lat in (
('la', 'Los Angeles', 34.03, -118.25),
('nyc', 'New York', 40.71, -74)
)
]
edges = [
{'data': {'source': source, 'target': target}}
for source, target in (
('van', 'la'),
('la', 'chi')
)
]
elements = nodes + edges
default_stylesheet = [
{
'selector': 'node',
'style': {
'background-color': 'BFD7B5',
'label': 'data(label)'
}
},
{
'selector': 'edge',
'style': {
'line-color': '#A3C4BC'
}
}
]
app.layout = html.Div([
html.Div(html.Button('Change elements', id='button'),),
cyto.Cytoscape(
id='cytoscape-elements-callbacks',
layout={
'name': 'preset',
'animate': True,
'animationDuration': 1000
},
autoRefreshLayout=True,
stylesheet=default_stylesheet,
style={'width': '100%', 'height': '450px'},
elements=elements
)
])
@app.callback(Output('cytoscape-elements-callbacks', 'elements'),
[Input('button', 'n_clicks')])
def update_elements(n_clicks):
nodes = [
{
'data': {'id': short, 'label': label},
'position': {'x': 20*lat, 'y': -20*long}
}
for short, label, long, lat in (
('la', 'Los Angeles', 34.03, -118.25+10*n_clicks),
('nyc', 'New York', 40.71, -74)
)
]
edges = [
{'data': {'source': source, 'target': target}}
for source, target in (
('van', 'la'),
('la', 'chi')
)
]
elements = nodes + edges
return elements
if __name__ == '__main__':
app.run_server(debug=False)
I am unable to pass options to the klay layout. The options relate to a nested option, specifically the klay.direction
option. I am able to pass options that aren't nested e.g. padding. Is there a way to pass nested options using dash cytoscape?
app.layout = html.Div([
cyto.Cytoscape(
id='cytoscape-two-nodes',
layout={'padding': 0, 'klay.direction': 'UP', 'name': 'klay'},
style={'width': '100%', 'height': '450px'},
elements=graph,
stylesheet=[
{
'selector': 'node',
'style': {
'label': 'data(id)'
}
},
{
'selector': 'edge',
'style': {
# The default curve style does not work with certain arrows
'curve-style': 'bezier',
'source-arrow-shape': 'triangle',
}
}]
)
])
#### Expected Results
The direction of the graph to change.
#### Actual Results
Nothing, no error. The graph looks the same.
#### Versions
Python 3.7.3 (default, Mar 27 2019, 22:11:17)
[GCC 7.3.0] :: Anaconda, Inc. on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from __future__ import print_function
>>> import dash; print("Dash", dash.__version__)
Dash 1.0.2
>>> import dash_html_components; print("Dash Core Components", dash_html_components.__version__)
Dash Core Components 1.0.0
>>> import dash_core_components; print("Dash HTML Components", dash_core_components.__version__)
Dash HTML Components 1.0.0
>>> import dash_renderer; print("Dash Renderer", dash_renderer.__version)
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
AttributeError: module 'dash_renderer' has no attribute '__version'
>>> import dash_cytoscape; print("Dash HTML Components", dash_cytoscape.__version__)
Dash HTML Components 0.1.1
This list will link to all the open issues related to porting cytoscape into Dash. They will be removed as the issues are solved.
Link: #2
Description: Element prop of the react version only accepts an array of objects, whereas the original implementation accepts both arrays and objects. Particularly, objects contain specifications for nodes and edges.
Link: #5
Description: Many layouts are shown as example in the gallery, but a lot of those layouts are not included by default in Cytoscape.js. Adding them to Dash might be an issue.
Link: #6
Frames-like animation feature would be nice addition. Currently it is possible to simulate, for example, node movement by changing its position incrementally, but that is possible only by changing all elements for dcc. Animation made this way not as smooth as layout change animation, and leads to constant app update.
Please consider this addition:
https://github.com/cytoscape/cytoscape.js-cxtmenu
Enables a lot of interactivity (yet I got a feeling that it is challenging to implement)
Anyway, are there any plans about cytoscape addons in near future?Lots of precious functions there.
Thanks!
I tried to work through a few examples, and one problem that came up was that the element prop of the react version only accepts an array of objects, whereas the original implementation accepts both arrays and objects. Particularly, objects contain specifications for nodes
and edges
, for example:
{
"nodes": [{...}, {...}, ..., {...}],
"edges": [{...}, {...}, ..., {...}]
}
Whereas the only format accepted (for the element prop) is the following:
[
{"data": {...}, "position": {...}, ...},
{"data": {...}, "position": {...}, ...},
...
{"data": {...}, "position": {...}, ...}
]
Currently is:
setup(
name=package_name,
version=package["version"],
author=package['author'],
packages=[package_name],
include_package_data=True,
license=package['license'],
description=package['description'] if 'description' in package else package_name,
install_requires=[
'colour==0.1.5'
]
)
Should become:
setup(
name=package_name,
version=package["version"],
author=package['author'],
packages=[package_name],
include_package_data=True,
license=package['license'],
description=package['description'] if 'description' in package else package_name,
install_requires=[
'dash',
'dash_html_components',
'dash_renderer',
]
)
For example, the following layout can't be implemented in Dash:
layout: {
name: 'concentric',
concentric: function( node ){
return node.degree();
},
levelWidth: function( nodes ){
return 2;
}
},
because it contains JavaScript functions.
Hi,
Taking the example code: usage-reset-button.py and setting animate=True with the dagre layout results in the layout not resetting its position with the pushbutton.
Thanks,
Vivek
layout = {
"name": "dagre",
"spacingFactor": 0.8,
"nodeSep": 60,
"rankSep": 50,
"rankDir": "TB", # TB or LR
"ranker": "tight-tree",
"nodeDimensionsIncludeLabels": True,
"animate": True,
"fit": True,
"zoom": 0.5,
"animationDuration": 50,
"selectionType": "single",
}
Layout reset (zoom and position when the elements and zoom vars are set through a callback
The position and zoom are overridden somehow while using animate=True
dash==0.41.0
dash-cytoscape==0.1.1
Feature request - it would be amazing to have access to the selectionType argument available in cytoscape.js (https://js.cytoscape.org/#init-opts/selectionType) that allows additive selection of nodes, rather than having to shift+click to select all nodes at once.
Thanks for the great work - this is an awesome library!
Hi.
So imagine that the user does a combination of zooming, moving around and nodes dragging. And then they want to reestablish the network to its original display.
We are missing for an incorporated control that would redraw the cytoscape component to the original place, size and shape that it had before any user interaction was made.
Similarly to this, plotly graphs has this feature of double-clicking on them to reset them to their original configuration.
Currently, a few event handlers and methods are not available through Dash Cytoscape due to the declarative nature of the library. Notably, the eles.breadthFirstSearch()
method (link here) can be easily used with cytoscape.js, and react-cytoscapejs (more limited, but still doable through the cy
global handler). However, since we can't modify the cy
global handler directly in Dash, there's no easy way to add the bfs method to a Dash Cytoscape model. Although this is not crucial for
To handle this, we would need a unified way for dash users to use those methods and event handlers while keeping the API declarative. By design, Dash components are updated using callbacks (which modifies the react component props), so the solution will need to involve interactions with Cytoscape
props.
I would like to propose a very simple paradigm (sorry for the word, couldn't come up with a better term). The idea would revolve around those concepts (which already exist in multiple Dash projects, here i'm just assigning names for clarity):
null
, and whenever they are changed to a non-null
value, they are set back to null
during the next render()
cycle.clickData
, exemplified here. In this context, it could be updated as a result of a request callback. In any case, event props should not be updated by callbacks, and should always be used as an input of a callback (if at all).The proposition would be to handle all methods and event handlers useful for Dash by assigning an ephemeral prop as the input of each of those methods, and an event prop that will receive the output of those methods. Those methods will all be run every time the component is rendered, only if the ephemeral prop is not null
.
Note here that, instead of ephemeral props, we could check whether the prop has been changed. This method could probably work as well (maybe would be better from a design and efficiency perspective). However, I could see limitations such as sending the same request multiple time, and expecting the same response, or different response (if elements has changed). For the latter, it could be handled by verifying if the cy
object has changed, which could work as well. I'm glad to discuss about this if you want.
Obviously, this will not cover all use cases, but expand the current event and method handling.
Hi,
It would be nice to have the capability to expand/collapse nodes similar to https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse.
Thanks.
Hi
Unfortunately, I did not find Panzoom integration with Dash.
This extension creates a widget that lets the user pan and zoom/
It would be nice to add this feature.
If someone has already integrated this extension, please share a solution.
Thanks,
Vasyl
Certain layout contains options that accept functions. For example, the grid layout:
let options = {
name: 'grid',
fit: true, // whether to fit the viewport to the graph
padding: 30, // padding used on fit
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
condense: false, // uses all available space on false, uses minimal space on true
rows: undefined, // force num of rows in the grid
cols: undefined, // force num of columns in the grid
position: function( node ){}, // returns { row, col } for element
sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts
};
Obviously, position
is not accepted in Python, since it accepts input that is a function mapping from a node object to a {row,col}
object.
Optionally accept dictionary input instead of a function on the Dash/Python side. On the react side, the function will simply look up the object's names (i.e. dictionary keys) and return the corresponding value.
Hi,
I've found a bug related with the layout, when the graph has been loaded if you put the mouse over any node, the graph's layout will start to move, it seems like the layout is constantly refreshing with onHover event. It happens in dash-cytoscape==0.0.5 and 0.0.4 but not in 0.0.3 version.
I've tried to make an example but i couldn't reproduce it, but you can check it in this page.
Click the link and when the graph is loaded try to put the mouse over a node.
A static layout.
No error in the console log, but constantly layout initialization.
We are using 0.0.5 version.
I am trying to show a graph with parent and child nodes (representing clusters) and have a menu or button callback to remove/hide the parent nodes and leave the children (and appropriate edges.)
I've tried various approaches, but essentially, they seem to all return the same error.
The callback(s) return a whole new "elements" to Cytoscape and they inevitably result in a JS error in the browser like this example:
Can not create edge 7cf808c5-c6a2-4937-8ca8-8b43d1bd8893
with nonexistant source nyc
I have put together a small test/demo to show the problem, based directly on some of the examples from the documentation.
As far as I can see from the documentation examples, this should do what I want, but I still get the errors. I don't think I'm missing anything (this is pretty straightforwardly copying and pasting from the examples...) so I suspect there's a but here.
In my debugging efforts, I noticed that if one changes the IDs of the nodes in the callback instead of leaving them the same as the originals, then it seems to work. But that would be somewhat kludgey and cumbersome to do for a graph with lots of actual data.
(Note: I did try looking at the JS in the browser console tool. if I followed it correctly, it looks like it's removing all the nodes and edges, then trying to add back edges before creating the nodes... maybe...)
Thanks in advance for your help!
-Al
My Example CODE:
import dash
import dash_cytoscape as cyto
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(name)
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
cyto.Cytoscape(
id='cytoscape-compound',
layout={'name': 'preset'},
style={'width': '100%', 'height': '450px'},
stylesheet=[
{
'selector': 'node',
'style': {'content': 'data(label)'}
},
{
'selector': '.countries',
'style': {'width': 5, 'visible': 'false' }
},
{
'selector': '.cities',
'style': {'line-style': 'dashed'}
}
],
elements=[
# Parent Nodes
{
'data': {'id': 'us', 'label': 'United States'}
},
{
'data': {'id': 'can', 'label': 'Canada'}
},
# Children Nodes
{
'data': {'id': 'nyc', 'label': 'New York', 'parent': 'us'},
'position': {'x': 100, 'y': 100}
},
{
'data': {'id': 'sf', 'label': 'San Francisco', 'parent': 'us'},
'position': {'x': 100, 'y': 200}
},
{
'data': {'id': 'mtl', 'label': 'Montreal', 'parent': 'can'},
'position': {'x': 400, 'y': 100}
},
# Edges
{
'data': {'source': 'can', 'target': 'us'},
'classes': 'countries'
},
{
'data': {'source': 'nyc', 'target': 'sf'},
'classes': 'cities'
},
{
'data': {'source': 'sf', 'target': 'mtl'},
'classes': 'cities'
}
]
),
html.Div([
html.Button('Add', id='btn-add-node-example', n_clicks_timestamp=0),
html.Button('Remove', id='btn-remove-node-example', n_clicks_timestamp=0)
])
])
@app.callback(Output('cytoscape-compound', 'elements'),
[Input('btn-add-node-example', 'n_clicks_timestamp'),
Input('btn-remove-node-example', 'n_clicks_timestamp')],
[State('cytoscape-compound', 'elements')])
def update_elements(btn_add, btn_remove, elements):
if int(btn_add) > int(btn_remove):
elements = [
# Children Nodes
{
'data': {'id': 'nyc', 'label': 'New York', 'parent': 'us'},
'position': {'x': 100, 'y': 100}
},
{
'data': {'id': 'sf', 'label': 'San Francisco', 'parent': 'us'},
'position': {'x': 100, 'y': 200}
},
{
'data': {'id': 'mtl', 'label': 'Montreal', 'parent': 'can'},
'position': {'x': 400, 'y': 100}
},
# Parent Nodes
{
'data': {'id': 'us', 'label': 'United States'}
},
{
'data': {'id': 'can', 'label': 'Canada'}
},
# Edges
{
'data': {'source': 'can', 'target': 'us'},
'classes': 'countries'
},
{
'data': {'source': 'nyc', 'target': 'sf'},
'classes': 'cities'
},
{
'data': {'source': 'sf', 'target': 'mtl'},
'classes': 'cities'
}
]
return elements
elif int(btn_remove) > int(btn_add):
elements = [
{
'data': {'id': 'nyc', 'label': 'New York'},
'position': {'x': 100, 'y': 100}
},
{
'data': {'id': 'sf', 'label': 'San Francisco'},
'position': {'x': 100, 'y': 200}
},
{
'data': {'id': 'mtl', 'label': 'Montreal'},
'position': {'x': 400, 'y': 100}
},
# Edges
{
'data': {'source': 'nyc', 'target': 'sf'},
'classes': 'cities'
},
{
'data': {'source': 'sf', 'target': 'mtl'},
'classes': 'cities'
}
]
return elements
return elements
if name == 'main':
app.run_server(debug=True)
There have been changes to Tree.py
that have not been published. Some of these changes fix import issues with Python 2.7.
Is it possible to show edge properties/attributes (relationship description) in cytoscape?
In Dash there is a way to show the edge properties when hover, but it will be good if it can just show like node label.
Hi,
I want to use cytoscape for a company dashboard, but one of our requirements it is viewable on mobile. So far I have had no issues making dash look good on mobile using some css hacks/media queries etc.
But I am struggling to make cytoscape responsive. It seems that the layout is fit to the viewport on initial render but any change to the viewport size does not fire the appropriate fit callback.
Is this intended or configurable?
On resize (not fit to viewport):
On refresh (fits now):
At the moment, the proptypes docstring are vaguely described, and are too much inspired from Cytoscape.js (which is unintuitive for Python users). For the next release, this will be an important focus.
Hi, I could not find a way to use "curve-style": "taxi"
for the edges. Is there a way to do so? I was unable to find where in react-cytoscape
I should be looking if its present.
Hi Cytoscape team. First of all: Great work!
It would also be great if there was an easy way to overlay cytoscape elements on a map, e.g. like the integration of Mapbox with Plotly Scatter plots.
Or is there already a documented or undocumented way to do this?
Hello,
I need to control the scroll wheel sensitivity to zoom on canvas and change the scale of graphs. I noticed that cytoscape.js and react-cytoscapejs have supported the wheel-sensitivity property in their last updates to control the scroll to zoom in/out on graphs. I was wondering if there is a way to limit the fast scroll behavior in dash-cytoscape?
Thanks,
tests.test_interactions
renderedPositions
of the nodes, rather than hardcoded.Those suggestions do not currently affect the testing procedures, but shall we add supplementary tests or make substantial changes to the dash-cytoscape API, they could end up becoming useful. They might take substantial effort to implement.
At the moment, conversion between networkX graphs and Dash Cytoscape networks have to be done manually. In order to make it easier for everyone to integrate networkX in their Dash workflow, we would like to improve support for the library. Please let us know your thoughts, and we highly appreciate if you would like to contribute!
Many great external and 3rd party layouts exist for Cytoscape.js, for example:
In order to be used, they need to be added as a dependency to the Dash Cytoscape package, i.e. modify the source code located at src/lib/Cytoscape.react.js
. If we do this, the distribution will become heavier, but worth it if many people use those.
Is this a feature that the community would be interested in? Please let us know in this thread!
Many layouts are shown as example in the gallery, but a lot of those layouts are not included by default in Cytoscape.js. Adding them to Dash might be an issue.
The following quote describes layout in cytoscape.js:
The function of a layout is to set the positions on the nodes in the graph. Layouts are extensions of Cytoscape.js such that it is possible for anyone to write a layout without modifying the library itself.
To accomplish this, we need to yarn add
the external layouts extension, then write something like this in react:
import Cytoscape from 'cytoscape';
import COSEBilkent from 'cytoscape-cose-bilkent';
import React from 'react';
import CytoscapeComponent from 'cytoscape-reactjs';
Cytoscape.use(COSEBilkent);
class MyApp extends React.Component {
render() {
const elements = [
{ data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
{ data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } },
{ data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } }
];
const layout = { name: 'cose-bilkent' };
return <CytoscapeComponent elements={elements} layout={layout}>;
}
}
However, including the packages at run time in Dash is impossible since Dash runs a bundle.js
version of the Cytoscape.react.js
, which means that all the packages have to be added beforehand, and included inside the bundle.js
.
Including the layouts risks increasing the size of bundle.js
, create more dependencies. Not including the layouts will severely limit the possibility of Dash-cytoscape.
This issue will serve as a discussion around how we should approach this layout problem.
Currently, the usage-phylogeny.py
demo provides a great example for converting Phylo objects (phylogeny trees) into Cytoscape graphs. It would be interesting to have full-fledge support to convert from and to biopython.Phylo
, as well as other graphical data structure in biopython.
Hello,
Love the library.
Had a app running perfectly on 0.0.5
. But when I updated to 0.1.1
I get
Cannot read property 'length' of undefined
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read property 'length' of undefined
at Function.value (webpack-internal:///./node_modules/react-cytoscapejs/dist/react-cytoscape.js:1:3406)
at Cytoscape.render (webpack-internal:///./src/lib/components/Cytoscape.react.js:350:54)
at ce (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:98:136)
at qg (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:97:440)
at hi (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:104:285)
at Qg (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:144:293)
at Rg (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:145:168)
at Sc (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:158:109)
at Z (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:156:492)
at Kc (http://127.0.0.1:8050/hh-networks/_dash-component-suites/dash_renderer/[email protected]?v=0.24.0&m=1559931493:155:69)
The app itself may be found here
Downgrading back to 0.0.5
allows the app to run perfectly fine.
Hi,
When I try to update the selected nodes using a callback to modify either 'selectedNodeData
' or 'tapNode
' or 'tapNodeData
' is not reflecting on the front-end. i.e. the selection highlight is not changing automatically.
Thanks,
Vivek
When using the selected
attribute of nodes, the selected nodes are not contained in the selectedNodeData
attribute after adding more nodes to the selection via ctrl + click
.
import dash
import dash_cytoscape as cyto
import dash_html_components as html
from dash.dependencies import Output, Input
app = dash.Dash(__name__)
app.layout = html.Div([
cyto.Cytoscape(
elements=[
{
'data': {
'id': 1,
'label': 1
},
'selected': True
},
{
'data': {
'id': 2,
'label': 2
}
}
],
id='graph'
),
html.Pre(id='node-data')
])
@app.callback(Output('node-data', 'children'), [Input('graph', 'selectedNodeData')])
def print_selected_node_data(selected_node_data):
return str(selected_node_data)
if __name__ == "__main__":
app.run_server(port=8051, debug=True)
After opening the page, node 1
is selected by default. Ctrl + click
on node 2
.
Ctrl + click
on node 2
-> selectedNodeData
contains [{'id': '1', 'label': 1}, {'id': '2', 'label': 2}]
.
After opening the page, node 1
is selected by default. Ctrl + click
on node 2
-> selectedNodeData
contains just [{'id': '2', 'label': 2}]
.
Dash 1.8.0
Dash Core Components 1.0.2
Dash HTML Components 1.7.0
Dash Renderer 1.2.3
Dash HTML Components 0.1.1
Follows this: plotly/react-cytoscapejs#1
At the moment, the files needed to run the app, i.e. Procfile
, runtime.txt
, config.py
, etc. are stored inside this project directory. However, they are only needed to run the usage-advanced.py
demo on DDS/Heroku, and are not necessary for developing this project.
What is everyone's thoughts on whether to keep those files in this project (and basically push the whole repo to DDS every time it is updated), or have it in a separate repo (which will use the latest release version of dash-cytoscape instead of dev version)?
At the moment, the elements, styles and layouts are specified using dictionaries. In fact, the syntax is closer to CSS and JS than Pythonic (although dictionaries are inherently pythonic, an object-oriented approach would be intuitive for long-time python users). I still believe dictionary declaration should stay for those who come from Cytoscape.js background, or those who are familiar with CSS selectors.
In fact, the learning curve for dictionary declaration is higher, but it is faster to write and less verbose, as well as being JSON-compatible (in other words, it's easier to import/export graphs from cytoscape.js).
Add object declaration for:
Node
and Edge
objects, with flat declaration (remove data parameter).Style
object with well-documented selectors. Instead of giving a value for a selector
key, we would replace it with name
and type
parameters, respectively the name we are trying to match and the type of matching method (could be by group, by class, by ID, or by a specific entry of data
dictionary.Circle
, Grid
, Concentric
, etc.A bunch of nice examples are available in demos
. Some of them might be good example of specific use cases for Cytoscape. It would be nice to have someone add them either to the official dash gallery or at the end of the Dash Cytoscape Docs. Possibly, we could even add them to the DDS.
Hi,
What would be the way to set the mouse wheel sonesitivy for zooming? I see that cytoscape.js has wheelSensitivity
parameter to adjust the sensitivity. I couldn't get that to work in Dash-Cytoscape
Thanks,
Vivek
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.