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.

2.2KB

ABP server

This server does a few things:

  • Keeps a graph state in memory using a data structure that is compatible with abp
  • Serves a JSON representation of that object
  • Accepts updates to that object via POST requests
  • Displays a 3D representation of the state
  • Randomly updates the state every five seconds

Endpoints

  • /: Displays the state using Three.js
  • graph/:
    • GET returns JSON representing the state
    • POST accepts JSON in the same format and overwrites the state in memory
  • doc/: Shows this page

Data format

If you do an HTTPS GET against /graph, you will receive some JSON.

:::bash
$ curl https://abv.peteshadbolt.co.uk/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}}}

ABP

The underlying graph library is based on Anders’ and Briegel's method. Full docs for the Python library are here.