Dash Cytoscape

Dash Cytoscape is a graph visualization component for creating easily
customizable, high-performance, interactive, and web-based networks. It
extends and renders Cytoscape.js, and
offers deep integration with Dash layouts and callbacks, enabling the
creation of powerful networks in conjunction with the rich collection of Dash components
, as well as established computational biology and network
science libraries such as Biopython and networkX.

Quickstart

pip install dash-cytoscape==0.2.0

from dash import Dash, html
import dash_cytoscape as cyto

app = Dash(__name__)

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-two-nodes',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '400px'},
        elements=[
            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},
            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
            {'data': {'source': 'one', 'target': 'two'}}
        ]
    )
])

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

Dash Cytoscape graphs are interactive! Scroll to zoom and drag on
the canvas to move the entire graph around. You can move nodes by
dragging it, or by clicking, holding, and moving your mouse
to the desired location (and click again to release).

This also work in mobile! Tap-and-hold on a node to move it, or on
the canvas to move the entire graph. Pinch your fingers outwards to
zoom in, or pinch them together to zoom out.

Dash Cytoscape User Guide

Reference

A comprehensive list of all of the Cytoscape properties.

Basic Usage & Elements

Overview of element declaration and manipulation.

Layouts

Description of built-in layouts, and how to modify their properties. These include:

Display Methods
Fine-tuning the Layouts
Physics-based Layouts
Loading External Layout

Styling

Methods to style elements with a CSS-like syntax. These include:

The stylesheet parameter
Basic selectors and styles
Comparing data items using selectors
Styling edges
Displaying Images

Callbacks

Methods to combine Dash callbacks to update your Cytoscape object. These include:

Changing Layouts
Interactively update styles
Adding and removing elements

Events and User Interactions

Overview of user-interaction events that trigger callbacks in Dash, and how to use them to update the Cytoscape component.

Simple callback construction
Click, tap and hover
Selecting multiple elements
Advanced usage of callbacks

Biopython Examples

Examples of applications in bioinformatics using Biopython. These include:

Parsing the Phylo object
Defining layout and stylesheet
Layout and Callbacks

Exporting Images

This example shows how to export your Cytoscape graphs as images (jpg, png, svg).

Making responsive graphs

This example shows how to build a responsive Cytoscape graph.