{"id":7129,"library":"dash-cytoscape","title":"Dash Cytoscape","description":"Dash Cytoscape is a component library for Dash, enabling interactive network visualization in Python applications. It wraps the powerful Cytoscape.js library and offers deep integration with Dash layouts and callbacks, facilitating the creation of sophisticated graphs from data, including those from libraries like NetworkX. The current version is 1.0.2, with active development and regular updates.","status":"active","version":"1.0.2","language":"en","source_language":"en","source_url":"https://github.com/plotly/dash-cytoscape","tags":["dash","cytoscape","networkx","graph visualization","interactive","plotly"],"install":[{"cmd":"pip install dash-cytoscape","lang":"bash","label":"Base Installation"},{"cmd":"pip install dash-cytoscape[leaflet]","lang":"bash","label":"With CyLeaflet for maps"}],"dependencies":[{"reason":"Core Dash framework dependency for component integration and callbacks.","package":"dash","optional":false},{"reason":"Required for the CyLeaflet all-in-one component, which overlays network graphs on Leaflet maps.","package":"dash-leaflet","optional":true}],"imports":[{"note":"The convention is to import `dash_cytoscape` as `cyto` for brevity and consistency with examples.","wrong":"import dash_cytoscape\nfrom dash import Dash, html # then use dash_cytoscape.Cytoscape","symbol":"Cytoscape","correct":"import dash_cytoscape as cyto\nfrom dash import Dash, html"},{"note":"Required to enable external layouts (e.g., COSE-Bilkent, FCose) and SVG image generation.","symbol":"load_extra_layouts","correct":"import dash_cytoscape as cyto\ncyto.load_extra_layouts()"}],"quickstart":{"code":"from dash import Dash, html\nimport dash_cytoscape as cyto\n\napp = Dash(__name__)\n\napp.layout = html.Div([\n    cyto.Cytoscape(\n        id='cytoscape-two-nodes',\n        layout={'name': 'preset'},\n        style={'width': '100%', 'height': '400px'},\n        elements=[\n            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 75, 'y': 75}},\n            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},\n            {'data': {'source': 'one', 'target': 'two', 'label': 'Node 1 to 2'}}\n        ],\n        stylesheet=[\n            {\n                'selector': 'node',\n                'style': {\n                    'background-color': '#BFD7B5',\n                    'label': 'data(label)'\n                }\n            },\n            {\n                'selector': 'edge',\n                'style': {\n                    'line-color': '#A3C4BC',\n                    'label': 'data(label)'\n                }\n            }\n        ]\n    )\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)","lang":"python","description":"This quickstart creates a simple Dash application displaying a two-node, one-edge graph. It demonstrates basic `Cytoscape` component usage with `elements`, `layout`, and `stylesheet` properties. Remember to run `pip install dash` first if not already installed."},"warnings":[{"fix":"Upgrade Python environment to 3.8 or newer. Use `pip install 'dash-cytoscape<1.0.0'` for older Python versions.","message":"Support for Python 3.7 and below was dropped in `dash-cytoscape` version 1.0.0. The new minimum Python version is 3.8.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Generate unique IDs for all nodes and edges across different states or updates of the graph, for example, by adding a prefix or using UUIDs.","message":"When dynamically updating the graph with new `elements` (nodes and edges), ensure that node and edge IDs are unique. Reusing IDs can lead to networks fusing or unexpected behavior due to the underlying Cytoscape.js library not properly cleaning the object.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure all `@app.callback` definitions and their corresponding functions are placed in the main script *before* the `if __name__ == '__main__': app.run_server(debug=True)` block.","message":"Callbacks must be defined *before* `app.run_server()`. If a `@app.callback` decorator and its associated function are placed after `app.run_server()`, the callback will not be registered and will not fire.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Create a copy of the `elements` list/dictionary (`new_elements = elements[:]` or `new_elements = list(elements)`) and modify the copy before returning it from the callback.","message":"When modifying `elements` inside a callback, you should return a *new* list/dictionary of elements rather than mutating the original object passed as `State`. Direct mutation of objects received via `State` can lead to update cycles being broken or inconsistent behavior.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Update imports from `import dash_html_components as html` to `from dash import html` (and similarly for `dcc`).","message":"The `dash_html_components` and `dash_core_components` imports were removed from `install_requires` in older versions. While still usable, components like `html.Div` are now typically imported directly from `dash`.","severity":"deprecated","affected_versions":">=0.1.1 (and later)"}],"env_vars":null,"last_verified":"2026-04-16T00:00:00.000Z","next_check":"2026-07-15T00:00:00.000Z","problems":[{"fix":"Move all `@app.callback` definitions and their functions to appear before the `if __name__ == '__main__': app.run_server(debug=True)` block.","cause":"The callback function was defined after `app.run_server()` or `app.run()` in the script.","error":"Dash Cytoscape callbacks not firing"},{"fix":"Ensure the `elements` property is always a list of nodes and edges, even if empty (`elements=[]`). This issue was fixed in `dash-cytoscape` version 0.1.1 but can still occur with incorrect usage.","cause":"The `elements` property of the `cyto.Cytoscape` component was not provided or was `None`.","error":"TypeError: Cannot read properties of undefined (reading 'length') when elements is not specified"},{"fix":"Ensure all node and edge IDs are unique across all elements present in the graph at any given time, especially when dynamically modifying or replacing the graph content.","cause":"When updating the `elements` property, new nodes or edges were introduced with IDs that already existed in the previous graph state. The underlying Cytoscape.js library can conflate elements with identical IDs, leading to unexpected graph structures.","error":"Graph showing incorrect connections or overlapping nodes after update, networks fused together based on common ID"},{"fix":"Try simplifying the graph, optimizing `stylesheet` definitions, or reducing the number of `elements`. Consider restarting the Python environment or the operating system. Check browser developer console for any JavaScript errors. For very large graphs, consider server-side rendering or pagination if applicable.","cause":"This can sometimes occur with complex or very large graphs, potentially related to memory usage or issues within the underlying JavaScript rendering. It might also be related to specific environment configurations or resource limitations.","error":"Dash app crashes without error message or restarts frequently when using Cytoscape component."}]}