Dash fails to load extra layouts: No such layout cola found. #194
Description
Description
I created an app with Cytoscape graph that sometimes throws out the error. It occurs randomly, and sometimes I get rid of it by restarting PyCharm. For some reason it doesn't read cyto.load_extra_layouts() in get_fig_cytoscape(df, layout)
EDIT:
I noticed that problem occurs when I edit this script while it is in use. Re-executing the script doesn't help - then i must restart the PyCharm
Steps/Code to Reproduce
Example:
from my_lib import utils as gu
from dash import Dash, dcc, html, Output, Input, callback, dash_table, callback_context
import dash_bootstrap_components as dbc
df = gu.get_data_about_tbls_n_cols(pdsa)
def get_fig_cytoscape(df, layout):
cyto.load_extra_layouts()
node_elements = df['table_x'].unique().tolist() + df['table_y'].unique().tolist()
node_elements = [{'data': {'id': x, 'label': x}} for x in node_elements]
edge_elements = [{'data': {'source': x, 'target': y}} for x, y in zip(df["table_x"], df["table_y"])]
fig_cyto = cyto.Cytoscape(
id='org-chart',
# zoom=len(node_elements)*2,
boxSelectionEnabled=True,
responsive=True,
layout={
'name': layout,
'clusters': 'clusterInfo',
'animate': False,
'idealInterClusterEdgeLengthCoefficient': 0.5,
'fit': True},
style={'width': '100%', "height": "500pt"},
elements=node_elements + edge_elements,
stylesheet=[
{'selector': 'label',
'style': {'content': 'data(label)',
'color': 'black',
'line-color': 'grey',
'background-color': 'blue'
}},
{"selector": "edge",
"style": {"weight": 1}}
]
)
app = Dash(__name__)
app.layout = html.Div(
children=[
dbc.Row(
children=[
dbc.Col(
style={"float": "left", "width": "50%"},
children=
html.Div(id="my-network",
# children=get_fig_cytoscape(df, layout="cola")
),
width=6
),
dbc.Col(
style={"float": "left", "width": "50%"},
children=
html.Div(
children=[
html.Div(children=[
html.P("Select your layout"),
dcc.Dropdown(id="dropdown-layouts",
options=["random", "preset", "circle", "concentric", "grid",
"breadthfirst", "cose", "close-bilkent",
"cola", "euler", "spread", "dagre", "klay"],
value='cola',
style={"width":"50%"})],
),
html.Div(children=[
html.P("Add list of tables to graph (comma separated)"),
dcc.Input(
id="input-list-tables", style={"width":"100%"})
]),
]
),
width=6
)
]
)
])
@ callback(
Output('my-network', 'children'),
Input("dropdown-layouts", 'value'),
Input("dropdown-tables", 'value'),
Input("input-list-tables","value"),
)
def get_network(layout, selected_dropdown_tables, input_list):
selected_tables = selected_dropdown_tables + input_list
df_filtered = df.loc[ df['table_x'].isin(selected_tables) | df['table_y'].isin(selected_tables), :]
G = get_fig_cytoscape(df_filtered, layout)
return GExpected Results
It should read cyto.load_extra_layouts() in get_fig_cytoscape(df, layout) function and open the network graph of cytoscape.
Actual Results
Instead, I get an error and the graph fails to load and respond to callbacks. I noticed that it occurs when I add a new element in the app layout (e.g. the whole div where input-list-tables resides).
_Error: No such layout `cola` found. Did you forget to import it and `cytoscape.use()` it?
at error (webpack-internal:///./node_modules/cytoscape/dist/cytoscape.cjs.js:828:9)
at Core.layout (webpack-internal:///./node_modules/cytoscape/dist/cytoscape.cjs.js:14250:7)
at l (webpack-internal:///./node_modules/react-cytoscapejs/dist/react-cytoscape.js:1:6814)
at t.patch (webpack-internal:///./node_modules/react-cytoscapejs/dist/react-cytoscape.js:1:6687)
at t.value (webpack-internal:///./node_modules/react-cytoscapejs/dist/react-cytoscape.js:1:4242)
at t.value (webpack-internal:///./node_modules/react-cytoscapejs/dist/react-cytoscape.js:1:4098)
at commitLifeCycles (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_13_0m1694674558.14.0.js:19949:24)
at commitLayoutEffects (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_13_0m1694674558.14.0.js:22938:9)
at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_13_0m1694674558.14.0.js:182:16)
at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_13_0m1694674558.14.0.js:231:18)_
Sometimes it can be fixed by uncommenting get_fig_cytoscape(df, layout="cola") inside div of app layout.
Versions
Dash 2.13.0
Dash Core Components 2.0.14
Dash HTML Components 2.12.0
C:\Users\user\Documents\Projects\PyCharm Projects\pdsa-grapher-git\pdsa-grapher\devs.py:3: UserWarning:
The dash_html_components package is deprecated. Please replace
`import dash_html_components as html` with `from dash import html`
import dash_html_components; print("Dash Core Components", dash_html_components.__version__)
C:\Users\user\Documents\Projects\PyCharm Projects\pdsa-grapher-git\pdsa-grapher\devs.py:4: UserWarning:
The dash_core_components package is deprecated. Please replace
`import dash_core_components as dcc` with `from dash import dcc`
import dash_core_components; print("Dash HTML Components", dash_core_components.__version__)
Traceback (most recent call last):
File "C:\Users\user\Documents\Projects\PyCharm Projects\pdsa-grapher-git\pdsa-grapher\devs.py", line 5, in <module>
import dash_renderer; print("Dash Renderer", dash_renderer.__version)
^^^^^^^^^^^^^^^^^^^^
ModuleNotFoundError: No module named 'dash_renderer'