abv/templates/doc.md

# 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

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

The URL contains a unique ID such as `oranges-arkansas-mexico-fish`. 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](https://peteshadbolt.co.uk/static/abp/).

## API

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

    :::python
    import requests, json, abp
    
    # Make a new graph and position the nodes
    g = abp.NXGraphState(range(10))
    g.layout()
    
    # Serialize
    data = json.dumps(test_graph().to_json())
    
    # Post to the server
    URL = "https://abv.peteshadbolt.co.uk/oranges-arkansas-mexico-fish"
    requests.post("{}/graph".format(URL), data=data)

### Endpoints

- `/<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.

    :::bash
    $ curl https://abv.peteshadbolt.co.uk/<uuid>/graph

outputs

    :::python
    {"node": 
        {"30": 
            {"position": 
                {"y": 3.245091885135617, "x": -1.0335390368621762, "z": 0.12485495696298532}, "vop": 0}, "28": 
            {"position": 
                {"y": 0.1811335599620998, "x": 3.7102305790943295, "z": 0.3375519427305571}, "vop": 0}, "29": 
            {"position": 
                {"y": -1.834182888403804, "x": 1.5968911365745622, "z": 2.8585980299131886 
    ...

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)`:

    :::python
    {'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}}}