This documents explains how to use the Graph Editor web application.
The easiest way to use this application is to pull the docker image on DockerHub using the following command:
docker pull glynfinck/graph-editor-react
After pulling the image, run the following command and the application should be available at localhost:80:
docker run -p 80:80 -d glynfinck/graph-editor-react
- The graph is treated as un-directed by default (no support for directed graph so far, this will be added in the future)
- If edge (A -> B) exists then edge (B -> A) exists and vice versa.
- There currently is no support for mobile devices at the moment (this feature will come in the future)
Setting the current node will give a red border around the node chosen using id and will make the fill of the node blue. Setting the current node will automatically un-set the previous current node/edge removing the red border. This alows the user to automatically keep track of visited nodes/edges while also showing the current node as well.
If the optional parameter peek is set to True then the node with id equal to id will not be set to blue and will remain white.
If the optional parameter path is set to True the node with id equal to id will be set to yellow instead of blue. This is used to indicate a path being found instead of one of the visited nodes/edges.
The following string of commands showcases how the method can be used.
g = Graph()
g.setCurrentNode("A")
g.setCurrentNode("B", peek=True)
g.setCurrentNode("C", path=True)
g.setCurrentNode("D", peek=True, path=True)
Producing the following result in our graph:
Setting the current edge will give a red border around the edge chosen using source_id and target_id and will make the fill of the edge blue. Setting the current node will automatically un-set the previous current node/edge removing the red border. This alows the user to automatically keep track of visited nodes/edges while also showing the current edge as well.
If the optional parameter peek is set to True then the edge chosen using source_id and target_id will not be set to blue and will remain white.
If the optional parameter path is set to True the edge chosen using source_id and target_id will be set to yellow instead of blue. This is used to indicate a path being found instead of one of the visited nodes/edges.
The following string of commands showcases how the method can be used.
g = Graph()
g.setCurrentEdge("A","B")
g.setCurrentEdge("B","C", peek=True)
g.setCurrentEdge("C","D", path=True)
g.setCurrentEdge("D","A", peek=True, path=True)
Producing the following result in our graph:
Returns all neighbors for a node with id.
For the following graph and input:
g = Graph()
neighbors = g.getNeighbors("A")
print(neighbors)
We get the following output:
{'C': {}, 'B': {}, 'D': {}}
Returns all nodes in the graph.
For the following graph and input:
g = Graph()
nodes = g.getNodes()
print(nodes)
We get the following output:
[('A', {}), ('B', {}), ('C', {}), ('D', {})]
Returns all edges in the graph.
For the following graph and input:
g = Graph()
edges = g.getEdges()
print(edges)
We get the following output:
[('A', 'C', {}), ('A', 'B', {}), ('A', 'D', {}), ('B', 'C', {}), ('B', 'D', {})]
Will return True if the node with id equal to id is in the graph and False otherwise.
Will return True if the node with source id equal to source_id and target id equal to target_id and False otherwise.
To create a node hold down SHIFT and then click on an empty area of the graph as shown above.
To create an edge between two nodes hold down SHIFT and drag from the source node to the target node as shown above.
To delete nodes CLICK on the node you want to delete and press the DELETE the key. Edges connected to the deleted node will automatically be deleted as well.
To delete edges CLICK on the edge you want to delete and press the DELETE the key.
- Rebass: https://rebassjs.org/
- React Splitter: https://github.com/GeoffCox/react-splitter
- Material UI: https://material-ui.com/
- React Digraph: https://github.com/uber/react-digraph
- Monaco Editor: https://github.com/suren-atoyan/monaco-react
- Worker Loader: https://github.com/webpack-contrib/worker-loader
- Pyodide: https://pyodide.org/en/stable/