dash-cytoscape

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

Create the following example inside an app.py file:

import dash
import dash_cytoscape as cyto
import dash_html_components as 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
import dash_html_components as 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.

Changelog

[0.2.0] - 2020-07-09

Added

• Contributed initial build of R package.
• Added access to cytoscape.js PNG and JPG image generation API through generateImage and imageData properties (PR #88).
• Added ability to download image files generated with generateImage client-side without sending data to the server (PR #88).
• Used the newly added generateImage and imageData properties to enable svg generation using cytoscape-svg.
• Added responsive cytoscape.js graph feature toggled using the responsive property (PR #93).
• One new demo:
  • demos/usage-responsive-graph.py: Example of graph with the ability to toggle the responsive feature on and off.
  • demos/usage-image-export.py: Shows how to export images as JPG, PNG or SVG.

Changed

• Changed the official package manager from yarn to npm.
• utils.Tree: v0.1.1 broke compatibility with Python 2. Therefore, modified code to be compatible with Python 2. Added props and edge_props properties to accept arguments passed directly to the node's and edge's dictionaries, respectively (e.g., 'classes', 'positions', etc.).
• Removed Tree's method add_child, because it is redundant with add_children called with an argument of length 1.
• setup.py: Remove dash-html-components and dash_renderer from install_requires.
• usage-events.py: Fix the size of the cytoscape graph to 500px by 500px.
• Upgrade react-cytoscape.js to latest.

Fixed

• setup.py: Use packages=find_packages(include=[package_name, package_name + ".*"]) so that all subpackages like utils will be included when you pip install dash-cytoscape.
• Issue where dash-cytoscape cannot read property of 'length' of undefined when elements is not specified.
• tests.test_interactions.