value='0px'),
drc.NamedDropdown(name='Node Padding Relative To',
id='dropdown-node-padding-relative-to',
value='width',
clearable=False,
options=drc.DropdownOptionsList(
'width', 'height', 'average', 'min',
'max'))
]),
drc.NamedCard(
title='Compound parent size',
size=4,
children=[
drc.NamedRadioItems(name='Compound Sizing w.r.t. labels',
id='radio-node-compound-sizing',
value='include',
options=drc.DropdownOptionsList(
'include', 'exclude')),
drc.NamedInput(name='Parent Node Min Width (px)',
id='input-node-compound-min-width',
type='number',
min=0,
placeholder='Input value in px...',
value=0),
drc.NamedInput(name='Extra width on left side (%)',
id='input-node-compound-min-width-bias-left',
type='number',
min=0,
placeholder='Input value in px...',
value=0),
drc.NamedInput(name='Extra width on right side (%)',
def getAppLayout(elements, nodeWidth, nodeHeight, putLabelInsideNode):
textHalignValue = ''
textValignValue = ''
if putLabelInsideNode:
textHalignValue = 'center'
textValignValue = 'center'
return html.Div([
html.Div(className='a', children=[
dcc.Dropdown(
id='dropdown-update-layout',
value='circle',
clearable=False,
options=[
{'label': name.capitalize(), 'value': name}
for name in ['grid', 'random', 'circle', 'cose', 'concentric']
]
)]),
drc.NamedRadioItems(
name='Select',
id='radio-option',
options=drc.DropdownOptionsList(
'Show Neighbors',
'Hide Node'
),
value='Show Neighbors'
),
html.Div(className='b', children=[
cyto.Cytoscape(
id='cytoscape-update-layout',
layout={'name': 'circle'},
style={'width': '100%', 'height': '60vh'},
elements=elements,
stylesheet=[
{
'selector': 'node',
'style': {
'content': 'data(label)',
'background-color': 'data(color)',
'width': nodeWidth,
'height': nodeHeight,
'text-halign': textHalignValue,
'text-valign': textValignValue
}
},
{
'selector': 'edge',
'style': {
'content': 'data(labelLabel)',
'curve-style': 'bezier',
'target-arrow-color': 'black',
'target-arrow-shape': 'triangle',
'line-color': 'black'
}
}
]
)]),
html.P(id='cytoscape-tapNodeData-output'),
html.P(id='cytoscape-tapEdgeData-output'),
html.Div(style=styles['tab'], children=[
html.P('Node Data JSON:'),
html.Pre(
id='selected-node-data-json-output',
style=styles['json-output']
)
])
])
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose',
'cose-bilkent', 'dagre', 'cola',
'klay', 'spread', 'euler'),
value='grid',
clearable=False),
drc.NamedRadioItems(
name='Expand',
id='radio-expand',
options=drc.DropdownOptionsList(
'followers', 'following'),
value='followers')
]),
dcc.Tab(
label='JSON',
children=[
html.Div(style=styles['tab'],
children=[
html.P('Node Object JSON:'),
html.Pre(id='tap-node-json-output',
style=styles['json-output']),
html.P('Edge Object JSON:'),
html.Pre(id='tap-edge-json-output',
style=styles['json-output'])
])
"breadthfirst",
"cose",
"cose-bilkent",
"dagre",
"cola",
"klay",
"spread",
"euler",
),
value="grid",
clearable=False,
),
drc.NamedRadioItems(
name="Expand",
id="radio-expand",
options=drc.DropdownOptionsList(
"followers", "following"),
value="followers",
),
],
),
dcc.Tab(
label="JSON",
children=[
html.Div(
style=styles["tab"],
children=[
html.P("Node Object JSON:"),
html.Pre(
id="tap-node-json-output",
style=styles["json-output"],