I am trying to obtain a two column layout as shown here https://github.com/plotly/dash-cytoscape/blob/master/usage-stylesheet.py, where the network is on 8 cols and the tabs are on 4 cols. However, even when I copy paste and the provided example the network overflows to more than 8 columns. Is the example code still working with Dash >2?
Description
Steps/Code to Reproduce
Example:
from dash import Dash, html, Output, Input, dcc, dash_table
import json
import pandas as pd
import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
import networkx as nx
app = Dash(__name__)
server = app.server
# ###################### DATA PREPROCESSING ######################
with open('sample.txt', 'r') as f:
network_data = f.read().split('\n')
# We select the first 750 edges and associated nodes for an easier visualization
edges = network_data[:750]
nodes = set()
cy_edges = []
cy_nodes = []
for network_edge in edges:
source, target = network_edge.split(" ")
if source not in nodes:
nodes.add(source)
cy_nodes.append({"data": {"id": source, "label": "User #" + source[-5:]}})
if target not in nodes:
nodes.add(target)
cy_nodes.append({"data": {"id": target, "label": "User #" + target[-5:]}})
cy_edges.append({
'data': {
'source': source,
'target': target
}
})
default_stylesheet = [
{
"selector": 'node',
'style': {
"opacity": 0.65,
}
},
{
"selector": 'edge',
'style': {
"curve-style": "bezier",
"opacity": 0.65
}
},
]
# ################################# APP LAYOUT ################################
styles = {
'json-output': {
'overflow-y': 'scroll',
'height': 'calc(50% - 25px)',
'border': 'thin lightgrey solid'
},
'tab': {'height': 'calc(98vh - 80px)'}
}
app.layout = html.Div([
html.Div(className='eight columns', children=[
cyto.Cytoscape(
id='cytoscape',
elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
}
)
]),
html.Div(className='four columns', children=[
dcc.Tabs(id='tabs', children=[
dcc.Tab(label='Control Panel', children=[
html.H1(
"Something",
className="text-center",
),
]),
dcc.Tab(label='JSON', children=[
html.Div(style=styles['tab'], children=[
html.H1(
"Something else",
className="text-center",
),
])
])
]),
])
])
if __name__ == '__main__':
app.run_server(debug=True)
I removed all callbacks and most of the components to shorten it.
I am trying to obtain a two column layout as shown here https://github.com/plotly/dash-cytoscape/blob/master/usage-stylesheet.py, where the network is on 8 cols and the tabs are on 4 cols. However, even when I copy paste and the provided example the network overflows to more than 8 columns. Is the example code still working with Dash >2?
Description
Steps/Code to Reproduce
Example:
I removed all callbacks and most of the components to shorten it.
Expected Results
Replicate the layout obtained in the example.