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 .

Quickstart

julia>using Pkg
julia>Pkg.add("DashCytoscape")
using Dash, DashCytoscape

app = dash()

app.layout = html_div([
    cyto_cytoscape(
        id="cytoscape-two-nodes",
        layout=Dict("name" =>  "preset"),
        style=Dict("width" =>  "100%", "height" =>  "400px"),
        elements=[
            Dict("data" =>  Dict("id" =>  "one", "label" =>  "Node 1"), "position" =>  ("x" =>  75, "y" =>  75)),
            Dict("data" =>  Dict("id" =>  "two", "label" =>  "Node 2"), "position" =>  ("x" =>  200, "y" =>  200)),
            Dict("data" =>  Dict("source" =>  "one", "target" =>  "two"))
        ]
    )
])

run_server(app, "0.0.0.0", 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.