dash-cytoscape

Dash Cytoscape

A Component Library for Dash aimed at facilitating network visualization in Python, wrapped around Cytoscape.js

Interacting with the stylesheet:

Interacting with the elements:

Getting Started

Prerequisites

Make sure that the following python packages are installed:

dash==0.28.5
dash-renderer==0.14.3
dash-html-components==0.13.2
dash-core-components==0.34.0

Older versions are not necessarily incompatible, but have not been extensively tested.

Usage

Install the library using pip:

pip install dash-cytoscape

Create the following example inside an app.py file:

import dash
import dash_cytoscape
import dash_html_components as html

app = dash.Dash(__name__)
app.layout = html.Div([
    dash_cytoscape.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)

Development

Please follow the following steps for local testing:

1. Clone the repo

$ git clone https://github.com/plotly/dash-cytoscape.git

1. Install the dependencies and build the code:

$ yarn
$ yarn run build:all

1. Install the library

$ python setup.py install

It is recommended to install the library and running the examples in a fresh virtualenv in a separate folder:

$ mkdir dash_cytoscape_dev
$ cd dash_cytoscape_dev
$ virtualenv venv  # Create a virtual env
$ source venv/bin/activate  # Activate the venv

To activate in windows:

> venv\Scripts\activate

(and then repeat step 3).

Documentation

For using Dash and for a Python-specific overview of Dash Cytoscape, view the Dash User Guide. It's chock-full of examples, pro tips, and guiding principles.

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

Notes

Package manager

Our preferred package manager for this project is Yarn. Therefore we use yarn.lock rather than package-lock.json. If you decide to start using npm for package management (which will create package-lock.json) and you commit this project to Dokku, make sure to delete yarn.lock.

License

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

Contact and Support

See https://plot.ly/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!

Changelog

[0.0.2] - 2018-11-08

Added

• Author email and improve description
• Data section of demos readme
• Added the components "dash", "dash-html-components", and "dash-renderer" as explicit package requirements.

Changed

• Move grid layout data file
• Change App.js react demo data to be local
• Installation steps in readme to use yarn

Updated

• Cytoscape.js version, correct component import

Fixed

• Correct unpkg link error
• Markdown formatting for CONTRIBUTING.md