Interactive Circuit Graphs¶

Often, a static plot is incomprehensible or unhandy. Fortunately, graphs can be made interactive using Cytoscape. In Python, this is possible via the Dash environment, which provides a Cytoscape wrapper. Of course, Netlist Carpentry provides a way to create such interactive graphs out of a given circuit. Execute the cell below to read the design file as usual and set up the graph so that it can be exported afterwards.

In [ ]:

import netlist_carpentry

FILE_PATH = "../files/decentral_mux.v"
circuit = netlist_carpentry.read(FILE_PATH, top="decentral_mux")
circuit.top.optimize()
GRAPH = circuit.top.graph()

import netlist_carpentry FILE_PATH = "../files/decentral_mux.v" circuit = netlist_carpentry.read(FILE_PATH, top="decentral_mux") circuit.top.optimize() GRAPH = circuit.top.graph()

The visualization package provides a class CytoscapeGraph, which can be used to transform a standard module graph into something that Dash-Cytoscape can display. The CytoscapeGraph class also supports formatting, similar to the Plotting class. Execute the cell below to initialize the Cytoscape graph and format its in and output, before displaying the graph in the output below.

Warning: In the online documentation, the interactive graph will not be shown, since Dash relies on an active Flask Server. The Dash app will only be shown if the Notebook is executed locally.

In [ ]:

from netlist_carpentry.core.graph.visualization import CytoscapeGraph

cyto = CytoscapeGraph(GRAPH)
cyto.set_format("input_format", node_color="#EE0000")
cyto.set_format("output_format", node_color="#00EE00")
cyto.format_in_out(in_format="input_format", out_format="output_format")
cyto.show(jupyter_mode="inline")

from netlist_carpentry.core.graph.visualization import CytoscapeGraph cyto = CytoscapeGraph(GRAPH) cyto.set_format("input_format", node_color="#EE0000") cyto.set_format("output_format", node_color="#00EE00") cyto.format_in_out(in_format="input_format", out_format="output_format") cyto.show(jupyter_mode="inline")

Alternatively, with jupyter_mode="external", the graph will be displayed in a browser window instead. Furthermore, a port can be specified, allowing for multiple graphs to be shown simultaneously. Execute the cell below to view the graph in a browser window on a custom port.

Info: When using VSCode, ports are forwarded automatically by default. However, if a custom port is set, it may be necessary to manually enable the port forwarding.

In [ ]:

cyto.show(jupyter_mode="external", port=42069)

cyto.show(jupyter_mode="external", port=42069)

The graph supports node dragging and zooming as well as user interaction. Click on a node in the graph to show its name. Click the node again to show the type (i.e. "input"/"output" for ports, or the instance type). Click it again to hide the label.

Click on an edge to show the ports that are connected by the edge. A label "A->B" means the source of the edge is Port A of the source instance, and the target of the edge is Port B of the target instance. Click the edge again to hide the label.