Dash Cytoscape Frequently Crashing

Dash Python
1

Hello everyone,
I’m building a Dash app with a cytoscape network graph. I’m finding the app frequently crashes while running on my laptop with a small toy dataset. No warnings or error messages are given, the app just restarts. Restarting my python environment and/or Windows seems to help, but doesn’t fix the problem. I’ve also tried stripping down my Dash app to the following code, which just contains a basic cytoscape graph and a dropdown list. Even this app will crash and restart without any user interaction. I’ve never seen this problem with any other common Dash components, so I’m suspect cytoscape is the culprit somehow.

# import base python packages
import datetime as dt

# Dash visualization packages
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
from plotly.subplots import make_subplots
from plotly import graph_objects as go

print(f"App booted up at {dt.datetime.now()}")

# define test datasets
test1 = [{"data": {"id": 24, "label": "bIaGc7x0"}}, {"data": {"id": 44, "label": "cgwpl4wQ"}}, {"data": {"id": 17, "label": "jxrZ5kJk"}}, {"data": {"id": 25, "label": "xoqmzR3v"}}, {"data": {"source": 24, "target": 25}}]
test2 = [{"data": {"id": 4, "label": "nFqO6IoA"}}, {"data": {"id": 3, "label": "nHhGeD1A"}}, {"data": {"id": 1, "label": "UdHzx1yh"}}, {"data": {"id": 2, "label": "vMdkdi7Q"}}, {"data": {"id": 0, "label": "YHCziBvD"}}, {"data": {"source": 2, "target": 3}}, {"data": {"source": 0, "target": 4}}]
test3 = [{"data": {"id": 0, "label": "7ztomkZn"}}]
test4 = [{"data": {"id": 2, "label": "0mzK5lka"}}, {"data": {"id": 0, "label": "D1APS1m6"}}, {"data": {"id": 4, "label": "KyAWV7z9"}}, {"data": {"id": 1, "label": "uHjEm2rH"}}, {"data": {"id": 3, "label": "zCxBz7uC"}}, {"data": {"source": 0, "target": 2}}]

# define test mode options
test_opt_ls = [{"label": "Test #1", "value": 1},
               {"label": "Test #2", "value": 2},
               {"label": "Test #3", "value": 3},
               {"label": "Test #4", "value": 4}]

# Basic setup of Dash app
# custom bootstrap css created with: https://pikock.github.io/bootstrap-magic/app/index.html#!/editor
external_stylesheets = [dbc.themes.FLATLY]
cyto.load_extra_layouts()
vis_height = 800

# dash instantiation
app = dash.Dash(__name__, external_stylesheets=[external_stylesheets])
server = app.server

# Overall app layout
app.layout = html.Div([

    # toolbar
    dbc.Row([
        dbc.Col(
            html.Div([
                dcc.Dropdown(id="test-mode", options=test_opt_ls, value=[], multi=False, placeholder="Select a test scenario")
            ]),
            md=2
        ),
    ], justify="center"),

    # graph
    dcc.Loading(html.Div(id="vis"), type="cube")
])

@app.callback(
    Output("vis", "children"),
    Input("test-mode", "value")
)
def vis_update(test_mode):
    
    if test_mode == []:
        # App just booted up, leave figure blank
        return dash.no_update
    
    # set fake data
    if test_mode == 1:
        elements = test1
    elif test_mode == 2:
        elements = test2
    elif test_mode == 3:
        elements = test3
    elif test_mode == 4:
        elements = test4

    # relationship graph figure
    relationship_graph = cyto.Cytoscape(
        id='relationship-graph',
        elements=elements,
        style={'width': '100%', 'height': f"{vis_height}px"},
        layout={
            'name': 'cose-bilkent' #'random','grid','circle','concentric','breadthfirst','cose','cose-bilkent','dagre','cola','klay','spread','euler'
        }
    )

    return relationship_graph


if __name__ == '__main__':
    app.run_server(port="8050", debug=True) # host="0.0.0.0"

I’m having trouble diagnosing what the cause might be. I’ve tried different layouts in the cytoscape graph and they all seem to have the same problem. Can you offer any suggestions on how I can diagnose this problem?

2

For posterity’s sake, I wanted to explain how I resolved my issue. As far as I can tell Cytoscape had nothing to do with my problem, I just happened to be developing with it when I ran into this problem. The culprit was Dash’s debugging feature for reloading the website when the development files change. For some reason reload events were being triggered when I hadn’t saved a file (the intended use) or even while I wasn’t modifying the files. I could walk away from my machine and when I returned I’d see that the server had restarted a few times. I’m using VScode as my IDE. Perhaps some new feature in it is triggering these reload events?

Anyway, the fix was to disable reloading with: app.run_server(port="8050", debug=True, use_reloader=False)

1 Like
3

This is a lifesaver, so thank you for following up on your own issue!