LABEL_ELEMENT_TYPES_ALL, \
ELEMENTS
user_interface = html.Div(
style={
'height': 'calc(100vh - 90px)',
'overflow-y': 'auto',
'overflow-x': 'hidden',
},
children=[
drc.SectionTitle(title='Elements', size=3, color='white'),
drc.Card([
drc.NamedDropdown(
name='Select an element list',
id='dropdown-select-element-list',
options=drc.DropdownOptionsList(*ELEMENTS.keys()),
value='Basic',
clearable=False)
]),
drc.SectionTitle(title='Layout', size=3, color='white'),
drc.NamedCard(title='Layout',
size=4,
children=[
drc.NamedDropdown(name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'null', 'random', 'preset',
'grid', 'circle', 'concentric',
'breadthfirst', 'cose'),
value='preset',
clearable=False),
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
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'],
app = dash.Dash(__name__)
server = app.server
# Define a tree in the adjacency list format
tree = Tree('a', [
Tree('b', [Tree('c'), Tree('d')]),
Tree('e', [Tree('g')]),
Tree('f'),
Tree('h', [Tree('i', [Tree('j')])])
])
# Start the app
app.layout = html.Div([
dcc.Dropdown(id='dropdown-edge-style',
options=drc.DropdownOptionsList('bezier', 'taxi',
'unbundled-bezier', 'loop',
'haystack', 'segments',
'straight'),
value='bezier',
clearable=False),
cyto.Cytoscape(id='cytoscape',
elements=tree.get_elements(),
layout={
'name': 'breadthfirst',
'roots': ['a']
},
style={
'height': '95vh',
'width': '100%'
})
])
'width': '60%'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose'),
value='cose',
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=[
'width': '100%'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Layout',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'random', 'grid', 'circle',
'concentric', 'breadthfirst', 'cose'),
value='random',
clearable=False),
drc.NamedDropdown(
name='Node Shape',
id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=drc.DropdownOptionsList(
'ellipse',
'triangle',
'rectangle',
'diamond',
'pentagon',
'hexagon',
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']
)
])
])
'width': '100%'
})
]),
html.Div(className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Control Panel',
children=[
drc.NamedDropdown(
name='Visualizer',
id='dropdown-layout',
options=drc.DropdownOptionsList(
'All Topics',
'Education and Awareness',
'Vulnerable Populations',
'Multidisciplinary Initiatives',
),
value='All Topics',
clearable=False),
]),
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:'),
dcc.Tabs(
id="tabs",
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",
