plotly / dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js

Dash Cytoscape

A Dash component library for creating interactive and customizable networks in Python, wrapped around Cytoscape.js.

• 🌟 Medium Article
• 📣 Community Announcement
• 💻 Github Repository
• 📚 User Guide
• 🗺 Component Reference
• 📺 Webinar Recording

Getting Started in Python

Prerequisites

Make sure that dash and its dependent libraries are correctly installed:

pip install dash

If you want to install the latest versions, check out the Dash docs on installation.

Usage

Install the library using pip:

pip install dash-cytoscape

If you wish to use the CyLeaflet mapping extension, you must install the optional leaflet dependencies:

pip install dash-cytoscape[leaflet]

Create the following example inside an app.py file:

import dash
import dash_cytoscape as cyto
from dash import html

app = dash.Dash(__name__)
app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}
        ],
        layout={'name': 'preset'}
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

External layouts

You can also add external layouts. Use the cyto.load_extra_layouts() function to get started:

import dash
import dash_cytoscape as cyto
from dash import html

cyto.load_extra_layouts()

app = dash.Dash(__name__)
app.layout = html.Div([
    cyto.Cytoscape(...)
])

Calling cyto.load_extra_layouts() also enables generating SVG images.

Getting Started in R

Prerequisites

install.packages(c("devtools", "dash"))

Usage

Install the library using devtools:

devtools::install_github("plotly/dash-cytoscape")

Create the following example inside an app.R file:

library(dash)
library(dashHtmlComponents)
library(dashCytoscape)

app <- Dash$new()

app$layout(
  htmlDiv(
    list(
      cytoCytoscape(
        id = 'cytoscape-two-nodes',
        layout = list('name' = 'preset'),
        style = list('width' = '100%', 'height' = '400px'),
        elements = list(
          list('data' = list('id' = 'one', 'label' = 'Node 1'), 'position' = list('x' = 75, 'y' = 75)),
          list('data' = list('id' = 'two', 'label' = 'Node 2'), 'position' = list('x' = 200, 'y' = 200)),
          list('data' = list('source' = 'one', 'target' = 'two'))
        )
      )
    )
  )
)

app$run_server()

Documentation

The Dash Cytoscape User Guide contains everything you need to know about the library. It contains useful examples, functioning code, and is fully interactive. You can also use the component reference for a complete and concise specification of the API.

To learn more about the core Dash components and how to use callbacks, view the Dash documentation.

For supplementary information about the underlying Javascript API, view the Cytoscape.js documentation.

Contributing

Make sure that you have read and understood our code of conduct, then head over to CONTRIBUTING to get started.

Testing

Instructions on how to run tests are given in CONTRIBUTING.md.

License

Dash, Cytoscape.js and Dash Cytoscape are licensed under MIT. Please view LICENSE for more details.

Contact and Support

See https://plotly.com/dash/support for ways to get in touch.

Acknowledgments

Huge thanks to the Cytoscape Consortium and the Cytoscape.js team for their contribution in making such a complete API for creating interactive networks. This library would not have been possible without their massive work!

The Pull Request and Issue Templates were inspired from the scikit-learn project.

Gallery

Dynamically expand elements

Code | Demo

Interactively update stylesheet

Code | Demo

Automatically generate interactive phylogeny trees

Code | Demo

Create your own stylesheet

Code | Demo

Use event callbacks

Code | Demo

Use external layouts

Code

Use export graph as image

Code

Make graph responsive

Code

For an extended gallery, visit the demos' readme.

dash-cytoscape's Issues

Adding the demos to the dash gallery

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.

Object Oriented Approach for Elements, Styling and Layouts

Description

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).

Recommendations

Add object declaration for:

• Elements: Node and Edge objects, with flat declaration (remove data parameter).
• Styles: 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.
• Layout: Layout objects such as Circle, Grid, Concentric, etc.

Links

• Cytoscape.js section on selectors for stylesheet: here

Viewport Responsiveness

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):

Unable to Pass Nested Options to Klay layout

Description

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?

Steps/Code to Reproduce

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

Cannot read property of 'length' of undefined when updating from 0.0.5 to 0.1.1

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.

Element Props is unable to accept objects

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": {...}, ...}
]

Here's an example of elements in the object (1st) format

Here's an example of elements in the list (2nd) format.

CI: Test against Python 2.7

Transitions animation doesn't work for preset layout when changing elements

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)

Reset layout does not work when animate=True

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

Description

Steps/Code to Reproduce

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",

}

Expected Results

Layout reset (zoom and position when the elements and zoom vars are set through a callback

Actual Results

The position and zoom are overridden somehow while using animate=True

Versions

dash==0.41.0
dash-cytoscape==0.1.1

Can't Change Layout to Preset

Include correct installrequires

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',
    ]
)

[Feature Request] expand/collapse of nodes

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.

[Discussion] Incorporating external layout extensions with the official cytoscape release

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.

selectedNodeData does not contain pre-selected nodes

Description

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.

Steps/Code to Reproduce

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.

Expected Results

Ctrl + click on node 2 -> selectedNodeData contains [{'id': '1', 'label': 1}, {'id': '2', 'label': 2}].

Actual Results

After opening the page, node 1 is selected by default. Ctrl + click on node 2 -> selectedNodeData contains just [{'id': '2', 'label': 2}].

Versions

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

The layout is constantly refreshing with onHover event

Description

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.

Steps/Code to Reproduce

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.

Expected Results

A static layout.

Actual Results

No error in the console log, but constantly layout initialization.

Versions

We are using 0.0.5 version.

[Feature request]: selectionType functionality to enable additive selection

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!

Dash Cytoscape: control the scroll wheel sensitivity for zooming

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,

Support for layout options that accept JS func

Description

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.

Possible Solution

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.

Fails to run example

Follows this: plotly/react-cytoscapejs#1

[Feature request]: New edge type: Circuit

Hi,

It would be great if you add edge type like in the below image.

Thanks,
Rishi

Integration with biopython

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.

Selected Nodes stays in selectedNodeData permanently after being deleted

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

Introducing a new paradigm for handling events and methods

Problem

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

Solution

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.

Proposition

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):

• Ephemeral Props: Properties that are normally set to null, and whenever they are changed to a non-null value, they are set back to null during the next render() cycle.
• Request Callbacks: Callbacks that output to ephemeral props, specifically expecting the component to perform a certain action that might not necessarily related to the visual aspects of the component.
• Event Props: Props that are updated based on a component event. This includes user-interaction events such as 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.

Example

Existing Use Case

More links

• Examples of event handlers: http://js.cytoscape.org/#cy.$
• Examples of concepts enumerated above being used: https://github.com/xhlulu/dash-player/blob/master/src/components/Player.react.js

Wheel sensitivity control for zoom

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

ImportError: cannot import name 'utils'

Description

When pip installing from master and importing it an ImportError arises

Steps/Code to Reproduce

pip install git+https://github.com/plotly/dash-cytoscape.git@master

import dash_cytoscape as cyto

Expected Results

No error

Actual Results

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'

Versions

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'

In order to resolve the issue:

IvoLeist@aaed204#diff-2eeaed663bd0d25b7e608891384b7298

@xhlulu Should I do a short PR or do you want to quickly fix that line?

[Feature request]: Integration with maps

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?

[Future Work] Improving proptypes description

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.

Can't input functions to layout prop in Dash

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.

Improve interactions tests

Future works for tests.test_interactions

• make the nested functions (save_screenshot, perform_dragging, etc.) class methods of Test, and initialize the app in setUpClass (inherited from IntegrationTests).
• break down the interactions tests into separate tests, one for dragging, one for clicking, one for hovering, etc.
• programmatically set the 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.

cytoscape graphs are drawn off screen on first render

Might be related to the latest async changes

[Suggestion] Rendering options

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

Label Text Wrapping with ellipsis leaves "..." after changing layout

When the layout is set to preset, and we set the text-wrap for edge elements to be ellipsis, the "..." stay visually, even when the layout is changed. Here's an example:

When we change to grid layout:

This issue is currently only happening in Dash. Reproduction in React.js will come soon.

Support for ` "curve-style": "taxi"` for edges

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.

Adding Support for networkX

Description

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!

Support for 3rd party layouts

Many great external and 3rd party layouts exist for Cytoscape.js, for example:

• Dagre: https://github.com/cytoscape/cytoscape.js-dagre
• Euler: https://github.com/cytoscape/cytoscape.js-euler
• Spread: https://github.com/cytoscape/cytoscape.js-spread
• Klay: https://github.com/cytoscape/cytoscape.js-klay

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!

Should DDS files be stored in the project repo, or separate repo?

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)?

Publish a new release

There have been changes to Tree.py that have not been published. Some of these changes fix import issues with Python 2.7.

Obtain complete node dictionary programmatically

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!

Callbacks cannot remove and add nodes

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)

List of Issues when porting to Dash

List of Issues

This list will link to all the open issues related to porting cytoscape into Dash. They will be removed as the issues are solved.

Element Props is unable to accept objects

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.

Can't use external layout extensions

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.

Can't Change Layout to Preset

Link: #6

Distance from Node doesn't seem to be updating correctly

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.

exception on import dash_cytoscape

Description

Receiving a SyntaxError when importing dash_cytoscape

Steps/Code to Reproduce

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
>>>

Clarify usage of yarn vs npm in contributing.md

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.

Dash Cytoscape - incorrect fonts display during initial load

Hi,

When I specify the font family for the node labels, they show up incorrectly during initial loadup. Weirdly, clicking on thse nodes seem to fix this to the correct font. Any ideas why or what I am doing wrong? I am attaching a gif for clear understanding:

Feature Request/Question: yFiles Hierarchic layout

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!

[Feature request]: Panzoom extension

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

[Feature request] ctxt menu

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!

[Feature request] animation interface

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.

Edge Attributes/Labels (future work)

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.

[Feature request] Reset cytoscape component to its original display

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.