def tree_to_cytoscape(visualized_object): nodes, edges, root_ids = dict_to_tree(visualized_object) cyto_fig = html.Div(children=[ cyto.Cytoscape(id='cytoscape-tree-result', layout={ 'name': 'breadthfirst', 'roots': root_ids }, style={ 'width': '100%', 'margin': '0 auto', 'height': '900px', 'backgroundColor': '#f8f7ed' }, elements=nodes + edges, stylesheet=[{ 'selector': 'node', 'style': { 'content': 'data(label)', 'color': 'black' } }, { 'selector': 'edge', 'style': { 'color': 'black', 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }]), html.Br(), html.Pre(id='output-tree-as-json', style={'display': 'none'}), html.Br(), html.Button(id="show-json", children="SHOW TREE AS JSON") ]) return cyto_fig
def cytoscape_component(): cytoscape = dash_cytoscape.Cytoscape( id='cytoscape', elements=[], layout={ 'name': 'cose', 'idealEdgeLength': 100, 'nodeOverlap': 20, 'refresh': 20, 'fit': True, 'padding': 30, 'randomize': False, 'componentSpacing': 100, 'nodeRepulsion': 400000, 'edgeElasticity': 100, 'nestingFactor': 5, 'gravity': 80, 'numIter': 1000, 'initialTemp': 200, 'coolingFactor': 0.95, 'minTemp': 1.0 }, style={ 'height': '65vh', 'width': 'calc(100% - 300px)' }, stylesheet=BaseStylesheet().cy_stylesheet) return html.Div(style={'display': 'flex'}, children=[cytoscape])
def update_layout(rows, derived_virtual_selected_rows): if derived_virtual_selected_rows is None: derived_virtual_selected_rows = [] if rows is None: dff = df else: dff = pd.DataFrame(rows) colors = [] for i in range(len(dff)): if i in derived_virtual_selected_rows: colors.append("#7FDBFF") else: colors.append("#0074D9") return html.Div([ cyto.Cytoscape( id="cyto", layout={'name': 'circle'}, zoomingEnabled=False, elements=elements, # stylesheet=[ # { # 'selector':'node', # 'style':colors # } # ] ) ])
def model_category_nx_grah_to_cytoscape(join_result): model_category_join = join_result.get_model_category_join() G = model_category_join.get_commutative_triangle() nodes, edges = parse_cytoscape_nodes_edges(G) cyto_fig = html.Div(children=[ cyto.Cytoscape(id='cytoscape-model-category', layout={'name': 'circle'}, style={ 'width': '90%', 'margin': '0 auto', 'height': '800px', 'backgroundColor': '#f8f7ed' }, elements=nodes + edges, stylesheet=[{ 'selector': 'node', 'style': { 'content': 'data(label)', 'color': 'black' } }, { 'selector': 'edge', 'style': { 'content': 'data(label)', 'color': 'black', 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } }]), ]) return cyto_fig
def render_content(tab): if tab == 'tab-1': return html.Div([ cyto.Cytoscape(id='cytoscape', layout={'name': 'cose'}, style={'width': '1100px', 'height': '500px'}, stylesheet=[{ 'selector': '.terminal', 'style': { 'content': 'data(label)', 'background-fit': 'cover', 'background-image': 'data(url)' }, }, { 'selector': '.people', 'style': { 'content': 'data(label)', }, }], elements=elements, ) ]) elif tab == 'tab-2': return html.Div([ html.H3('Tab content 2') ])
def ensemble_selector_view(parent: WebvizPluginABC) -> List[Component]: return [ html.Div( [ cyto.Cytoscape( id=parent.uuid("ensemble-selector"), layout={"name": "grid"}, className="ert-ensemble-selector-large", stylesheet=assets.ERTSTYLE["ensemble-selector"]["stylesheet"], responsive=False, ), html.Button( id=parent.uuid("ensemble-selector-button"), className="ert-ensemble-selector-view-toggle", children=("Minimize"), ), ], id=parent.uuid("ensemble-selector-container"), className="ert-ensemble-selector-container-large", ), dcc.Store(id=parent.uuid("ensemble-selection-store"), storage_type="session"), dcc.Store( id=parent.uuid("ensemble-view-store"), storage_type="session", data=True ), ]
def initLayout(self): self.myapp.layout = html.Div([ html.Div([ html.Div(style={'width': '50%', 'display': 'inline'}, children=[ 'Edge Color:', dcc.Input(id='input-line-color', type='text') ]), html.Div(style={'width': '50%', 'display': 'inline'}, children=[ 'Node Color:', dcc.Input(id='input-bg-color', type='text') ]), dcc.Dropdown( id="dp_tables", options=[{"label": str(nom_table), "value": str(nom_table)} for nom_table in self.listeTables], multi=True, value=list(self.listeTables), className="dcc_control", ), ]), cyto.Cytoscape( id='lesTables', layout={'name': 'circle', 'radius': 20}, stylesheet=self.default_stylesheet, style={'width': '100%', 'height': '450px'}, elements=self.listeElements ) ])
def cytoscape_component(): no_data = html.Div(children=[html.P()], id='no-data', className='non-show') cytoscape = dash_cytoscape.Cytoscape( id='cytoscape', className='show', elements=[], maxZoom=1.75, minZoom=0.35, layout={ 'name': 'cose', 'idealEdgeLength': 100, 'nodeOverlap': 20, 'refresh': 20, 'fit': True, 'padding': 30, 'randomize': False, 'componentSpacing': 100, 'nodeRepulsion': 400000, 'edgeElasticity': 100, 'nestingFactor': 5, 'gravity': 80, 'numIter': 1000, 'initialTemp': 200, 'coolingFactor': 0.95, 'minTemp': 1.0 }, stylesheet=CytoscapeStylesheet.make_basic_stylesheet()) return html.Div(children=[cytoscape, no_data], className='cyto-dim')
def toDash(self, t=0): elements = [] stylesheet = [] for n in self.nodes: e, s = n.toDash() elements.append(e) stylesheet.append(s) for i in range(self.n + 1): for j in range(self.n + 1): if (i != j): elements.append( {'data': { 'source': str(i), 'target': str(j) }}) return cyto.Cytoscape(id='cytoscape-two-nodes', layout={'name': 'preset'}, style={ 'width': '100%', 'height': '400px' }, elements=elements, stylesheet=stylesheet)
def render(self): dag = cyto.Cytoscape( id='indicator-graph', layout={ 'name': 'dagre', 'ranker': 'longest-path', 'nodeDimensionsIncludeLabels': True, 'avoidOverlap': True, 'fit': True, 'nodeSep': 300, }, # stylesheet=default_stylesheet, style={ 'width': '100%', 'height': '1000px' }, elements=self.make_elements(), stylesheet=STYLES, zoomingEnabled=True, maxZoom=2, minZoom=0.1, ) self.make_elements() ret = html.Div([ self._make_navbar(), dbc.Container( [dbc.Row([dag]), dbc.Row(html.Div(id='indicator-output'))], className="app-content", fluid=True) ]) return ret
def cytolegendablock(title='legenda', id='id-legenda:', width='300px', height='100px'): return html.Div( children=[ #html.P(title), cyto.Cytoscape( id=id, layout={ 'name': 'grid', 'animate': False, 'fit': True }, style={ 'width': width, 'height': height, 'border-style': 'solid', 'border-width': 'thin', 'background-color': 'Cornsilk' }, boxSelectionEnabled=False, zoom=1, zoomingEnabled=True, elements=[], stylesheet=[], ) ], style={ 'padding': '3px', 'width': width, 'display': 'inline-block' }) #
def getMainMenuLayout(): htmlEls = [ html.H1( [ 'Select a Board', dcc.Link( html.Button( '+', style={ 'backgroundColor': 'blue', 'color': 'white', 'border': 'none', 'height': '30px', 'width': '30px', 'margin-left': '80px' } ), href='/createBoard' ) ], id='mainMenu', style={ 'textAlign': 'center', 'display': 'block' if AppControl.page == 'HOME' else 'hidden' } ), ] # Add board as option on main menu for board in boardList: graph = board.getGraph() cytoscapeEdges = graph.getCytoscapeGraphEdges() htmlEls.append( dcc.Link( html.Div( [ html.H2( board.boardName, id=board.boardName+'Name', style={'textAlign': 'center'} ), cyto.Cytoscape( id=board.boardName+'Preview', layout={'name': 'preset'}, style={'width': '100%', 'height': '200px'}, stylesheet=board.getCytoscapeStylesheet(), elements=board.getCytoscapeNodes() + cytoscapeEdges, userZoomingEnabled=False, userPanningEnabled=False ), ], id=board.boardName, style={'border': '2px solid gray', 'margin': '5px'} ), href="/game/"+board.boardName ), ) return htmlEls
def main(): """First method called when ran as script""" rpc = GoBGPQueryWrapper("192.168.242.132", "50051") lsdb = rpc.get_lsdb() nx_graph = graphing.build_nx_from_lsdb(lsdb) elements = [] for node in nx_graph.nodes(): elements.append({ "data": { "id": node, "label": node }, }, ) for source_edge, target_edge in nx_graph.edges(): elements.append({ "data": { "source": source_edge, "target": target_edge, "cost": nx_graph[source_edge][target_edge][0]["cost"], } }) app = dash.Dash(__name__) app.layout = html.Div([ html.P("Mad topology:"), cyto.Cytoscape( id="cytoscape", elements=elements, layout={"name": "cose"}, style={ "width": "100%", "height": "700px", }, stylesheet=[ { "selector": "node", "style": { "label": "data(id)" }, }, { "selector": "edge", "style": { "source-label": "data(cost)", "source-text-offset": 40, }, }, ], ), ]) app.run_server(debug=True)
def model_category_building_tool(new_model_category): global nodes, edges, model_categories model_categories.append(new_model_category) added_graph = new_model_category.get_nx_graph() added_nodes, added_edges = parse_cytoscape_nodes_edges(added_graph) nodes, edges = nodes + added_nodes, edges + added_edges #print(nodes, edges) cyto_fig = html.Div(children=[ html.Label([ "Give a name for this converged data model", html.Br(), dcc.Input( id="object-name-input", type="text", value="", placeholder="name", style={'width': '90%', "display": "inline-block"}, )]), html.Br(), cyto.Cytoscape( id='cytoscape-result', layout={'name': 'circle'}, style={'width': '90%', 'margin': '0 auto', 'height': '800px', 'backgroundColor': '#f8f7ed'}, elements=nodes + edges, stylesheet=[ { 'selector': 'node', 'style': { 'content': 'data(label)', 'color': 'black' } }, { 'selector': 'edge', 'style': { 'content': 'data(label)', 'color': 'black', 'curve-style': 'bezier', 'target-arrow-shape': 'triangle' } } ] ), html.Div(style={"border": "1px solid white", "padding": "10px", "margin": "10px"}, children=[ html.Pre(id='cytoscape-tapNodeData-domain', style={ 'border': 'thin lightgrey solid', 'margin': '0 auto', 'overflowX': 'scroll', 'width': '90%'}, children="Select domain node")]), html.Div(style={"border": "1px solid white", "padding": "10px", "margin": "10px"}, children=[ html.Pre(id='cytoscape-tapNodeData-target', style={ 'border': 'thin lightgrey solid', 'margin': '0 auto', 'overflowX': 'scroll', 'width': '90%'}, children="Select target node")]), html.Button(id="combine-domain-target", children="COMBINE SELECTED DOMAIN AND TARGET"), html.Br(), html.Button(id = "submit-final-model-category", children = "SUBMIT FINAL MODEL CATEGORY"), html.Div(id = "create-object-notification")]) return cyto_fig
def __init__(self, graph, weight='weight', **attr): """ :param graph: is the networkx graph object """ super().__init__(**attr) # The networkx graph object self.G = graph # the weight attribute in the edge tuples data dictionary self.weight = weight # The dictionary of the nodes coordinates self.pos = nx.layout.spring_layout(self.G) # The edges and nodes graph data self.elements = [] # Keeps track of the number of nodes in graph self.num_of_nodes = len(self.G.nodes) # Make elements self._make_elements() # The nodes graph data self.dash_layout = html.Div([ cyto.Cytoscape(id='MST', layout={'name': 'preset'}, style={ 'width': '100%', 'height': '400px' }, elements=self.elements, stylesheet=[{ 'selector': 'node', 'style': { 'label': 'data(label)', 'text-valign': 'center', 'background-color': '#F1B40E', 'color': '', 'font-family': 'sans-serif', 'font-size': '12', 'font-weight': 'bold', 'border-width': 1.5, 'border-color': '#161615' } }, { 'selector': 'edge', 'style': { 'line-color': '#6F5306', } }]), html.Pre(id='cytoscape-tapNodeData-json', style={ 'border': 'thin lightgrey solid', 'overflowX': 'scroll' }) ])
def __create_empty_network(self): size_stylesheet = [ # Group selectors { 'selector': 'node', 'style': { 'content': 'data(label)', 'fontSize': '10px', 'width': "8px", 'height': "8px" } }, { 'selector': 'edge', 'style': { 'width': 1 } }, { 'selector': '.small', 'style': { 'width': 10, 'height': 10, } }, { 'selector': '.bind', 'style': { 'width': 1 } }, { 'selector': '.internal', 'style': { 'line-style': 'dashed' } } ] elements = [] return cyto.Cytoscape(id='fig_network', layout={ 'name': 'preset', 'fit': True }, style={ 'width': '100%', 'height': '500px', 'textValign': 'center', 'textHalign': 'center' }, stylesheet=size_stylesheet, elements=elements)
def get_solution_routing_cytoscape(solution: Solution) -> cyto.Cytoscape: """ Returns a cytoscape object showing the network topology and stream routing """ # elements elements = [] nodes = [] edges = [] for n in solution.tc.N.values(): el = {} el["data"] = {"id": n.id, "label": n.id} if isinstance(n, end_system): el["classes"] = "ES" else: el["classes"] = "SW" nodes.append(el) for l in solution.tc.L.values(): el = {} el["data"] = {"source": l.src.id, "target": l.dest.id} el["classes"] = "link" edges.append(el) for f_id, mtree in solution.tc.R.items(): for l in mtree.get_all_links(solution.tc): el = {} el["data"] = {"source": l.src.id, "target": l.dest.id} el["classes"] = f_id edges.append(el) elements = flatten([nodes, edges]) # stylesheet stylesheet = flatten( [ _cytoscape_base_stylesheet(), _cytoscape_base_stream_selectors(solution.tc.F_routed.keys()), ] ) cyto.load_extra_layouts() graph = cyto.Cytoscape( id="cytoscape-routing-graph", layout={"name": "cose"}, style={"width": "100%", "height": "800px"}, elements=elements, stylesheet=stylesheet, ) return graph
def schemaGraph(): return html.Div([ cyto.Cytoscape( id='schema-graph', layout={'name': 'cose'}, stylesheet=base_cyto_stylesheet, style={'width': '100%', 'height': '100%'}, elements=[] )], style=schema_holder_style, id="schema-holder" )
def render_content(tab): if tab == 'tab-1': return html.Div([ cyto.Cytoscape(id='cytoscape', elements=elements, layout={'name': 'cose'}, style={'width': '1100px', 'height': '500px'}, stylesheet=stylesheet) ]) elif tab == 'tab-2': return html.Div([ html.H3('Tab content 2') ])
def _set_cyto_graph(self): """ Sets the cytoscape graph elements. """ self.cyto_graph = cyto.Cytoscape( id="cytoscape", layout={'name': self.layout_options[0]}, style={ 'width': '100%', 'height': '600px', 'padding': '5px 3px 5px 3px' }, elements=self.elements, stylesheet=self.stylesheet)
def _set_cyto_graph(self): """ Updates and sets the two cytoscape graphs using the corresponding components. """ layout = {'name': 'cose-bilkent'} style = { 'width': '100%', 'height': '600px', 'padding': '5px 3px 5px 3px' } self.cyto_one = cyto.Cytoscape( id="cytoscape", layout=layout, style=style, elements=self.one_components[1], stylesheet=DualDashGraph._get_default_stylesheet( self.one_components[0])) self.cyto_two = cyto.Cytoscape( id="cytoscape_two", layout=layout, style=style, elements=self.two_components[1], stylesheet=DualDashGraph._get_default_stylesheet( self.two_components[0]))
def __create_cyto_graph(self): graph = html.Div( [ # Div to upload the graph via callback cyto.Cytoscape(id='cytoscape-era-model', stylesheet=styleERA.get_stylesheet_cyto(), style={ 'width': '1px%', 'height': '1px' }, elements=[]) ], id='graph-div', style={'border': '1px solid rgba(0, 0, 0, 0.08)'}) return graph
def create_traceroute_graph(elements, stylesheet): children = [ cyto.Cytoscape(id='traceroute-cytoscape', style={ 'width': '1720px', 'height': '500px', }, elements=elements, stylesheet=stylesheet, layout={ 'name': 'preset', 'padding': 60, }), ] return children
def getpatientSubgraph(n_clicks, userID): if n_clicks != 0: try: elements = getPatientSubgraph(userID) graph = cyto.Cytoscape( id='patient-infection-subgraph', elements=elements, style={'width': '100%', 'height': '100%'}, layout={ 'name': 'cose' } ) return graph except Exception as e: return [html.Br(), html.P("Error", style={'color': 'red'})]
def __get_cytoscape(self, elements): return cyto.Cytoscape( id='cytoscape-container', elements=elements, style={ 'width': self.screen_size[0] - 300, 'height': self.screen_size[1] }, layout={ 'name': self.__DEFAULT_LAYOUT, }, stylesheet=self.stylesheetProvider.get_stylesheet( self.__DEFAULT_LAYOUT), maxZoom=10, minZoom=0.5)
def get_course_path_graph(show_preq=False): course_path_graph = cyto.Cytoscape( id='course_path_graph', layout={'name':'cose'}, style={ 'width': '100%', 'height': '650px', }, zoom= 1.2, minZoom= 0.3, maxZoom= 1.5, stylesheet=course_path_stylesheet, # If we're asking for the preq graph, use graph.preq_tree instead of graph.dfs_tree elements=graph.get_elements(graph.learning_path( 'comp 302', (graph.preq_tree if show_preq else graph.dfs_tree))) ) return course_path_graph
def create_graph(gr): # Create the graph app.layout = html.Div([ html.P("Neossins - TypeRefHash/GUID graph:"), cyto.Cytoscape( id='cytoscape-layout-2', elements=gr, #layout={'name': 'circle', 'radius': 500}, layout={ 'name': 'cose', 'animate': 'true' }, style={ 'width': '100%', 'height': '1000px' }, stylesheet=[ # Group selectors { 'selector': 'node', 'style': { 'content': 'data(label)' } }, { 'selector': '.red', 'style': { 'background-color': 'red', 'shape': 'rectangle' } }, { 'selector': '.pink', 'style': { 'background-color': '#dea4d4' } }, { 'selector': '.blue', 'style': { 'background-color': '#32CBDF' } } ]) ]) app.run_server(host='%s' % (config["server"]["ip"]), debug=True)
def TopLevelGraph(elements): return cyto.Cytoscape( id='cytoscape-toplevel', elements=elements, layout={'name': 'circle'}, stylesheet=[ normal_node_style['style'], parent_node_style['style'], normal_edge_style['style'], factor_edge_style['style'], temporal_edge_style['style'], cycle_node_style['style'], root_node_style['style'], leaf_node_style['style'], isolate_node_style['style'], standard_node_style['style'], hidden_node_style['style'] ])
def create_graph(G): cytoscape_data_format = nx.cytoscape_data(G) nodes = cytoscape_data_format["elements"]["nodes"] edges = cytoscape_data_format["elements"]["edges"] app = dash.Dash(__name__) app.layout = html.Div([ cyto.Cytoscape(id='cytoscape-two-nodes', layout={'name': 'circle'}, style={ 'width': '100%', 'height': '1400px' }, elements=nodes + edges) ]) app.run_server(debug=True)
def render(): return html.Div([ dcc.Store(id=STORE_ID, storage_type='local'), scenario_modal(), campaign_modal(), event_modal(), dbc.NavbarSimple( [ daq.BooleanSwitch( id=MAP_TOGGLE_ID, children=html.I(className="fas fa-map-marked"), className="m-1"), dbc.Button(id=OPEN_CAMPAIGN_MODAL_ID, children=html.I(className="fas fa-book-open"), className="m-1", color="info"), html.A(id=DOWNLOAD_DATA_ID, children=html.I(className="fas fa-cloud-download-alt"), download="gloomhaven-campaign-manager-data.json", href="", target="_blank", className="btn btn-success m-1"), dbc.Button(id=CLEAR_DATA_ID, children=[html.I(className="fas fa-trash-alt")], color="danger", className="m-1"), ], expand=True, brand="GCM", ), banners(), cyto.Cytoscape(id=CYTO_GRAPH_ID, layout={ 'name': 'cose', 'roots': '[id = "1"]', 'animate': 'True' }, style={}, elements=[], minZoom=0.5, maxZoom=2, stylesheet=CYTO_STYLESHEET), html.Div(toasts()) ])