Implement full editing interface

app.py

@@ -1,6 +1,7 @@
 from flask import Flask, request, redirect, url_for, make_response, render_template, Markup, send_from_directory, send_file
 from flask_redis import FlaskRedis
 import json, abp, markdown
+from pprint import pprint
 
 app = Flask(__name__)
 redis = FlaskRedis(app)
@@ -28,6 +29,41 @@ def graph():
     else:
         # Get from the database
         return redis.get("graph")
+
+
+@app.route("/edit", methods=["POST"])
+def edit():
+    # Load the graph from the database
+    g = abp.GraphState()
+    g.from_json(json.loads(redis.get("graph")))
+
+    # Apply the edit to the graph
+    edit = json.loads(request.data)
+    action = edit["action"]
+    pprint(edit, indent=2)
+
+    if action == "create":
+        g.add_qubit(edit["name"], position=edit["position"], vop=0)
+    elif action == "cz":
+        g.act_cz(edit["start"], edit["end"])
+    elif action == "hadamard":
+        g.act_hadamard(edit["node"])
+    elif action == "phase":
+        g.act_local_rotation(edit["node"], "phase")
+    elif action == "delete":
+        g._del_node(edit["node"])
+    elif action == "localcomplementation":
+        g.local_complementation(edit["node"])
+    elif action == "measure":
+        g.measure(edit["node"], "p"+edit["basis"])
+    else:
+        pass
+
+    # New state into JSON and database
+    data = json.dumps(g.to_json(stringify=True))
+    redis.execute_command("SET", "graph", data)
+    return data
+        
         
 @app.route("/doc")
 def doc():

static/scripts/api.js

@@ -0,0 +1,41 @@
+var api = {};
+
+api.poll = function() {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+           if (xmlhttp.status == 200) {
+               api.update(xmlhttp.responseText);
+           }
+        }
+    };
+
+    // Send the request
+    xmlhttp.open("GET", "/graph", true);
+    xmlhttp.send();
+};
+
+
+api.update = function(s) {
+    json = JSON.parse(s);
+    graph.update(json);
+}
+
+api.edit = function(edit) {
+    var xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function() {
+        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+           if (xmlhttp.status == 200) {
+               api.update(xmlhttp.responseText);
+           }
+        }
+    };
+
+    // Send the request
+    xmlhttp.open("POST", "/edit", true);
+    xmlhttp.setRequestHeader("Content-Type", "application/json");
+    xmlhttp.send(JSON.stringify(edit));
+}
+
+// Launch the polling loop
+setInterval(api.poll, 1000);

static/scripts/editor.js

@@ -48,7 +48,7 @@ editor.addQubitAtPoint = function(point) {
         gui.serverMessage("Node " + new_node +" already exists.");
         return;
     }
-    websocket.edit({action:"create", name:new_node, position: point});
+    api.edit({action:"create", name:new_node, position: point});
     editor.focus(new_node);
     gui.serverMessage("Created node " + new_node +".");
 };
@@ -77,7 +77,7 @@ editor.onShiftClick = function() {
     if (editor.selection === undefined){ return; }
     if (found === editor.selection){ return; }
     //abj.act_cz(found, editor.selection);
-    websocket.edit({action:"cz", start:found, end:editor.selection});
+    api.edit({action:"cz", start:found, end:editor.selection});
     gui.serverMessage("Acted CZ between " + found + " & " + editor.selection + ".");
     editor.focus(found);
 };
@@ -87,7 +87,7 @@ editor.onCtrlClick = function() {
     if (found === undefined){ return; }
     if (editor.selection === undefined){ return; }
     editor.focus(found);
-    websocket.edit({action:"hadamard", node:found});
+    api.edit({action:"hadamard", node:found});
     gui.serverMessage("Acted H on node " + found + ".");
 };
 
@@ -144,7 +144,7 @@ editor.findNodeOnRay = function(ray) {
 
 editor.deleteNode = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"delete", node:editor.selection});
+    api.edit({action:"delete", node:editor.selection});
     gui.serverMessage("Deleted node " + editor.selection + ".");
     editor.selection = undefined;
     node_data.className = "hidden";
@@ -154,37 +154,37 @@ editor.deleteNode = function() {
 
 editor.hadamard = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"hadamard", node:editor.selection});
+    api.edit({action:"hadamard", node:editor.selection});
     gui.serverMessage("Acted Hadamard on node " + editor.selection + ".");
 };
 
 editor.phase = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"phase", node:editor.selection});
+    api.edit({action:"phase", node:editor.selection});
     gui.serverMessage("Acted phase on node " + editor.selection + ".");
 };
 
 editor.measureX = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"measure", node:editor.selection, basis:"x"});
+    api.edit({action:"measure", node:editor.selection, basis:"x"});
     gui.serverMessage("Measured node " + editor.selection + " in X.");
 };
 
 editor.measureY = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"measure", node:editor.selection, basis:"y"});
+    api.edit({action:"measure", node:editor.selection, basis:"y"});
     gui.serverMessage("Measured node " + editor.selection + " in Y.");
 };
 
 editor.measureZ = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"measure", node:editor.selection, basis:"z"});
+    api.edit({action:"measure", node:editor.selection, basis:"z"});
     gui.serverMessage("Measured node " + editor.selection + " in z.");
 };
 
 editor.localComplementation = function() {
     if (editor.selection === undefined){ return; }
-    websocket.edit({action:"localcomplementation", node:editor.selection});
+    api.edit({action:"localcomplementation", node:editor.selection});
     abj.local_complementation(editor.selection);
     gui.serverMessage("Inverted neighbourhood of " + editor.selection + ".");
 };

static/scripts/graph.js

@@ -48,7 +48,6 @@ graph.update = function(newState) {
     }
 
     if (editor.selection) {
-        console.log(editor.selection);
         var node = editor.selection;
         if (Object.prototype.hasOwnProperty.call(abj.node, node)) {
             editor.grid.position.copy(abj.node[node].position);

static/scripts/poller.js

@@ -1,23 +0,0 @@
-function poll() {
-    var xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = function() {
-        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
-           if (xmlhttp.status == 200) {
-               update(xmlhttp.responseText);
-           }
-        }
-    };
-
-    // Send the request
-    xmlhttp.open("GET", "/graph", true);
-    xmlhttp.send();
-};
-
-
-function update(s) {
-    json = JSON.parse(s);
-    graph.update(json);
-}
-
-// Launch the polling loop
-setInterval(poll, 1000);

templates/index.html

@@ -14,7 +14,7 @@
   <script src="{{ url_for("static", filename="scripts/graph.js") }}"></script>
   <script src="{{ url_for("static", filename="scripts/gui.js") }}"></script>
   <script src="{{ url_for("static", filename="scripts/editor.js") }}"></script>
-  <script src="{{ url_for("static", filename="scripts/poller.js") }}"></script>
+  <script src="{{ url_for("static", filename="scripts/api.js") }}"></script>
   <script src="{{ url_for("static", filename="scripts/main.js") }}"></script>
 </head>
 

test.py

@@ -6,11 +6,11 @@ import json
 import abp
 import random
 
-#URL = "http://localhost:5000"
-URL = "https://abv.peteshadbolt.co.uk/"
+URL = "http://localhost:5000"
+#URL = "https://abv.peteshadbolt.co.uk/"
 
 def test_graph():
-    N = 50
+    N = 10
     g = abp.NXGraphState(range(N))
 
     for i in range(N):