Пример #1
0
                 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:'),
Пример #2
0
                 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:'),
Пример #3
0
                 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(
Пример #4
0
                 "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,
Пример #5
0
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