'float': 'left'
})
]),
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.NamedDropdown(
name='Node Shape',
id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=drc.DropdownOptionsList(
'ellipse',
'triangle',
'rectangle',
'diamond',
'pentagon',
'hexagon',
})
]),
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'],
'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='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=[
import dash_reusable_components as drc
from .constants import LABEL_ELEMENT_TYPES, 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",
def get_tab_cytoscape_layout():
styles = {
'json-output': {
'overflow-y': 'scroll',
'height': 'calc(50% - 25px)',
'border': 'thin lightgrey solid'
},
'tab': {
'height': 'calc(98vh - 105px)'
}
}
component = dcc.Tab(
label='cytoscape',
children=[
html.Div([
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='grid',
clearable=False),
drc.NamedDropdown(
name='Node Shape',
id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=drc.DropdownOptionsList(
'ellipse',
'triangle',
'rectangle',
'diamond',
'pentagon',
'hexagon',
'heptagon',
'octagon',
'star',
'polygon',
)),
drc.NamedInput(
name='Followers Color',
id='input-follower-color',
type='text',
value='#0074D9',
),
drc.NamedInput(
name='Following Color',
id='input-following-color',
type='text',
value='#FF4136',
),
]),
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']
)
])
])
]),
]),
html.Div(
className='eight columns',
children=[
cyto.Cytoscape(
id='cytoscape',
# elements=cy_edges + cy_nodes,
style={
'height': '95vh',
'width': '100%'
})
]),
])
])
return component