Styling graph output.

app/graphs.py

@@ -3,22 +3,22 @@ import pygraphviz as pgv
 
 nominal_style = {
     'style': 'filled',
-    'fillcolor': '#bc8f8f'
+    'fillcolor': 'lightskyblue'
 }
 
 variable_style = {
     'style': 'filled',
-    'fillcolor': '#deb887',
+    'fillcolor': 'lightblue',
 }
 
 relation_style = {
     'style': 'filled',
-    'fillcolor': '#dda0dd'
+    'fillcolor': 'honeydew'
 }
 
 property_style = {
     'style': 'filled',
-    'fillcolor': '#dfdfdf'
+    'fillcolor': 'aliceblue'
 }
 
 
@@ -31,7 +31,10 @@ def relation_string(role):
 
 
 def variable_string(variable):
-    return f"{variable['name']}: {variable['type']}"
+    if variable['type']:
+        return f"{variable['name']}: {variable['type']}"
+    else:
+        variable['name']
 
 
 def handle_nominal(tree, graph):

app/static/openccg.css

@@ -13,3 +13,13 @@ pre .null {
 pre .key {
     color: maroon;
 }
+
+
+/* Overwrite settings of mini.css */
+#graphs {
+    max-height: 1000px;
+}
+
+#graphs svg {
+    margin-top: -100px;
+}

app/static/openccg.js

@@ -31,22 +31,13 @@ const viz = new Viz();
  * #graphs element.
  * graph_element is the element returned by Viz's drawing call, title is a title to use. */
 function add_graph(graph_element, title) {
-    var graph = document.getElementById('graphs');
-
-    var card = document.createElement('div');
-    card.className = 'card fluid';
-
-    var title_elem = document.createElement('div');
-    title_elem.className = 'section';
-    title_elem.innerHTML = '<h3>' + title + '</h3>';
+    var graphs = document.getElementById('graphs');
 
-    var graph_section = document.createElement('div');
-    graph_section.className = 'section';
+    var caption = document.createElement('h3');
+    caption.innerHTML = title;
 
-    card.appendChild(title_elem);
-    card.appendChild(graph_section);
-    graph_section.appendChild(graph_element);
-    graph.appendChild(card);
+    graphs.appendChild(caption);
+    graphs.appendChild(graph_element);
 }
 
 /* Should be used as an event listener on the input form. Fetches the result and makes sure