Adding skeleton to build and render graphs.

.gitignore

+# Local files
+app/static/viz.js
+app/static/lite.render.js
+
 # Created by https://www.gitignore.io/api/python
 
 ### Python ###

Dockerfile

@@ -2,9 +2,9 @@ FROM openjdk:11-jdk
 
 LABEL maintainer="Sebastian Höffner <shoeffner@tzi.de>"
 LABEL description="A small webapp to parse sentences using the DiaSpace grammar (University of Bremen) with OpenCCG."
-LABEL version="2.0"
+LABEL version="2.1"
 
-# EXPOSE 80
+EXPOSE 8080
 
 ENV OPENCCG_HOME /openccg
 ENV PATH "$OPENCCG_HOME/bin:$PATH"
@@ -18,12 +18,16 @@ RUN curl -o openccg-0.9.5.tgz https://datapacket.dl.sourceforge.net/project/open
     && curl -O http://www.diaspace.uni-bremen.de/twiki/pub/DiaSpace/ReSources/english.zip \
     && unzip -d /english english.zip \
     && rm english.zip \
-# Server software: python 3, uwsgi; TatSu to parse the OpenCCG output
     && apt-get update \
-    && apt-get install -y python3 python3-pip \
-    && pip3 install flask uwsgi tatsu
+    && apt-get install -y python3 python3-pip graphviz libgraphviz-dev \
+    && pip3 install flask \
+                    uwsgi \
+                    tatsu \
+                    pygraphviz
+
 
 COPY app /app
+ADD https://github.com/mdaines/viz.js/releases/download/v2.0.0/viz.js https://github.com/mdaines/viz.js/releases/download/v2.0.0/lite.render.js /app/static/
 COPY tests /tests
 
 # Run Flask app behind nginx

Makefile

 app/generated_openccg_parser.py: OpenCCG.ebnf
 	tatsu --generate-parser $< --outfile $@
 
+.PHONY: build
+build:
+	docker build . -t web-openccg
+	# Copy over the viz.js files for the local development server (mounting would otherwise overwrite it)
+	docker run --rm --detach --name web-openccg web-openccg
+	docker cp web-openccg:/app/static ./app/static
+	docker stop web-openccg
+
 .PHONY: run
 run:
 	docker run --rm -p 5000:5000 -v $$(pwd)/app:/app:ro web-openccg python3 /app/ccgapp.py
 
 .PHONY: test
 test:
-	docker run --rm -v $$(pwd)/app:/app:ro -v $$(pwd)/tests:/tests:ro web-openccg python3 -m unittest discover /tests
+	docker run --rm -v $$(pwd)/app:/app -v $$(pwd)/tests:/tests:ro web-openccg python3 -m unittest discover /tests

app/ccgapp.py

 import json
-import os
 import uuid
 
 from flask import Blueprint, Flask, render_template, request, redirect
 
+import graphs
 import wccg
 
 
-bp = Blueprint('openccg', __name__, template_folder='templates')
+bp = Blueprint('openccg', __name__,
+               template_folder='templates')
 
 
 def create_response(sentence):
@@ -29,6 +30,10 @@ def create_response(sentence):
         'uuid': str(uuid.uuid4())
     }
     response.update(content)
+    try:
+        response.update(graphs.create_graphs(content['json_parses']))
+    except KeyError:
+        pass
 
     return response
 

app/graphs.py

+import pygraphviz as pgv
+
+
+def create_graph(key, parse):
+    G = pgv.AGraph()
+    G.graph_attr['label'] = key
+    G.add_edge('b', 'c')
+    return G.string()
+
+
+def create_graphs(json_parses):
+    """Creates graphs for each json_parse.
+
+    Args:
+        json_parses: A dictionary of keys to json_parses as provided from
+                     tatsu's OpenCCG outputs.
+    Returns:
+        A dictionary of identifiers mapped to their graph definitions.
+    """
+    graphs = {}
+    for k, v in json_parses.items():
+        graphs[k] = create_graph(k, v)
+    return {'graphs': graphs}

app/templates/form.html

@@ -32,7 +32,7 @@
             pre.innerHTML = syntaxHighlight(pre.innerHTML);
         }
 
-        window.onload = init_syntax;
+        window.addEventListener('load', init_syntax);
     </script>
     <style>
         pre {
@@ -56,17 +56,79 @@
             color: maroon;
         }
     </style>
+    <script src="{{ url_for('static', filename='viz.js') }}"></script>
+    <script src="{{ url_for('static', filename='lite.render.js') }}"></script>
+    <script>
+        function add_graph(graph_element, key) {
+            var graph = document.getElementById('graphs');
+
+            var card = document.createElement('div');
+            card.className = 'card small';
+
+            var title = document.createElement('div');
+            title.className = 'section';
+            title.innerHTML = '<h3>' + key + '</h3>';
+
+            var graph_section = document.createElement('div');
+            graph_section.className = 'section';
+
+            card.appendChild(title);
+            card.appendChild(graph_section);
+            graph_section.appendChild(graph_element);
+            graph.appendChild(card);
+        }
+
+        function handle_submit(evt) {
+            evt.preventDefault();
+            document.getElementById('response').innerHTML = '<div class="spinner secondary"></div>';
+            document.getElementById('graphs').innerHTML = '<div class="spinner secondary"></div>';
+
+            fetch(evt.target.action, {method: 'POST', body: new FormData(evt.target)})
+                .then(r => r.json())
+                .then(r => {
+                    document.getElementById('response').innerHTML = syntaxHighlight(JSON.stringify(r, null, 4));
+                    return r;
+                })
+                .then(r => {
+                    var viz = new Viz();
+                    var graphs = r['graphs'];
+                    document.getElementById('graphs').innerHTML = '';
+                    for (let key in graphs) {
+                        viz.renderSVGElement(graphs[key]).then(e => add_graph(e, key));
+                    }
+                });
+        }
+
+        function init() {
+            document.getElementById('sentenceform').addEventListener('submit', handle_submit);
+        }
+
+        window.addEventListener('load', init);
+    </script>
 {% endblock head %}
 
 {% block content %}
-<form action="{{ url_for('openccg.index') }}" method="POST">
-    <div class="input-group fluid">
-        <input type="text" name="sentence" value="{{ sentence or '' }}" placeholder="Take the cup off the table." />
-        <input type="submit" value="Go!" />
+<div class="container">
+    <form action="{{ url_for('openccg.parse') }}" method="POST" id="sentenceform">
+        <div class="input-group fluid">
+            <input type="text" name="sentence" value="{{ sentence or '' }}" placeholder="Take the cup off the table." />
+            <input type="submit" value="Go!" />
+        </div>
+    </form>
+</div>
+
+<div class="collapse">
+    <input type="checkbox" id="result-section1" aria-hidden="true" />
+    <label for="result-section1" aria-hidden="true">JSON response</label>
+    <div>
+        <pre id="response">
+        {{ response or '' }}
+        </pre>
     </div>
-</form>
 
-<pre id="response">
-{{ response or '' }}
-</pre>
+    <input type="checkbox" id="result-section2" checked aria-hidden="true" />
+    <label for="result-section2" aria-hidden="true">Graphs</label>
+    <div id="graphs" class="row">
+    </div>
+</div>
 {% endblock content %}