clearable=False, options=drc.DropdownOptionsList( 'ellipse', 'triangle', 'rectangle', 'diamond', 'pentagon', 'hexagon', 'heptagon', 'octagon', 'star', 'polygon', )), drc.NamedInput( name='Incoming Color', id='input-follower-color', type='text', value='blue', ), drc.NamedInput( name='Outgoing Color', id='input-following-color', type='text', value='red', ), ]), dcc.Tab( label='Data', children=[ html.Div(style=styles['tab'], children=[ html.P('Node Object JSON:'),
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:'),
clearable=False, options=drc.DropdownOptionsList( 'ellipse', 'triangle', 'rectangle', 'diamond', 'pentagon', 'hexagon', 'heptagon', 'octagon', 'star', 'polygon', )), drc.NamedInput( name='Followers Color', id='input_conn_color', type='text', value='#0074D9', ), ]), 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(
"cose", ), value="preset", clearable=False, ), ], ), drc.SectionTitle(title="Node body", size=3, color="white"), drc.NamedCard( title="Content", size=4, children=[ drc.NamedInput( name="Node Display Content", id="input-node-content", type="text", value="data(label)", placeholder="Enter the content you want for node...", ) ], ), drc.NamedCard( title="Shape", size=4, children=[ drc.NamedInput( name="Node Width (px)", id="input-node-width", type="number", min=0, value=25,
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