Simulate graph states in the browser
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Pete Shadbolt a6bac3bef0 README 2 years ago
static Enable big nodes 3 years ago
templates Enable big nodes 3 years ago
.gitignore First commit 3 years ago README 2 years ago Make secure - no more silly hashes 3 years ago Add randomizing test script 3 years ago Update to abp 0.5.0 3 years ago
redis.conf Add redis.conf 3 years ago Finally fixed stupid editing problem 3 years ago

Graph state server

Graph states are a way of efficiently representing the state of a system of qubits. This tool simulates the behaviour of the graph state and shows an interactive 3D representation of the state. Interaction with the simulation is done either by clicking on things in the web browser or through an API.

Using the interface

The state is initialized as a blank canvas without any qubits.

  • Click on the grid to make a new qubit
  • Hold Ctrl and click on a qubit to act a Hadamard gate
  • Click on a qubit to view its properties
  • Select a qubit, then Shift-click another node to act a CZ gate
  • Press Space to rotate the grid
  • Use the up and down arrow keys to move the grid normal to its plane
  • Press C to toggle curved edges

Arbitrary 3D structures can be constructed by rotating the grid.

The URL contains a unique ID such as 1ed6cc3c-65e4-4f6a-ab14-5e8c01d4593b. You can share this URL with other people to share your screen and edit collaboratively.

Python package

The underlying graph state simulator is based on Anders’ and Briegel's method. Full docs for the Python package are here. You can install it like this:

$ pip install abp


Here's a complete example of sending a state from Python to the server:

import abp

# Make a new graph and automatically position the nodes
g = abp.NXGraphState(range(10))

# Post to the server


  • /<uuid>: Displays the state using Three.js
  • /<uuid>/graph:
    • GET returns JSON representing the state
    • POST accepts JSON in the same format and overwrites the state in memory
  • /<uuid>/edit:
    • POST accepts edit commands such as cz, add_node etc.
  • doc/: Shows this page

Data format

An HTTP GET to /<uuid>/graph will return some JSON.

$ curl<uuid>/graph
  "adj": {
    "(0, 0, 1)": {
      "(0, 1, 1)": {}, 
      "(1, 0, 1)": {}
    "(0, 0, 3)": {
      "(0, 1, 3)": {}, 
      "(1, 0, 3)": {}
    "(0, 0, 5)": {
      "(0, 1, 5)": {}, 
      "(1, 0, 5)": {}
    "(0, 1, 0)": {
      "(0, 1, 1)": {}, 
      "(1, 1, 0)": {}
    "(0, 1, 1)": {
      "(0, 0, 1)": {},

The top-level keys are node and adj. These model the node metadata and adjacency matrix respectively.

Each node has

  • a position ({x:<> y:<> z:<>})
  • a vop (integer, ignore for now)
  • and could also have a color, label, etc.

adj uses the same data structure as networkx to efficiently represent sparse adjacency matrices. For each key i in adj, the value of adj[i] is itself a map whose keys j correspond to the ids of nodes connected to i. The value of adj[i][j] is a map which is usually empty but which could be used to store metadata about the edge.

Here's an example of a graph (A-B C):

{'adj': {0: {1: {}}, 1: {0: {}}, 2: {}},
 'node': {
  0: {'position': {'x': 0, 'y': 0, 'z': 0}, 'vop': 0},
  1: {'position': {'x': 1, 'y': 0, 'z': 0}, 'vop': 0},
  2: {'position': {'x': 2, 'y': 0, 'z': 0}, 'vop': 10}}}