switched to styled html table

src/main/resources/WEB-INF/cypher.html

@@ -42,6 +42,7 @@
     require([ 'gcli/index', 'cypher/index' ], function(gcli) {
       settings = require('gcli/settings');
       settings.getAll('hideIntro')[0].value = true;
+      settings.getAll('cypherUrl')[0].value = "http://localhost:5000/cypher"
       gcli.createDisplay();
     });
   </script>

src/main/resources/WEB-INF/lib/cypher/commands/cypher-table.html

@@ -0,0 +1,18 @@
+
+<div>
+  <table class="cypher-result">
+    <thead>
+      <tr>
+        <th foreach="cell in ${rows[0]}">
+          ${cell}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr foreach="row in ${rows}">
+        <td foreach="col in ${row}">${JSON.stringify(row[col])}</td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>

src/main/resources/WEB-INF/lib/cypher/commands/cypher_result.css

@@ -0,0 +1,28 @@
+table.cypher-result
+{
+	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
+	font-size: 12px;
+	margin: 45px;
+	width: 480px;
+	text-align: left;
+	border-collapse: collapse;
+	border: 1px solid #69c;
+}
+table.cypher-result th
+{
+	padding: 12px 17px 12px 17px;
+	font-weight: normal;
+	font-size: 14px;
+	color: #039;
+	border-bottom: 1px dashed #69c;
+}
+table.cypher-result td
+{
+	padding: 7px 17px 7px 17px;
+	color: #669;
+}
+table.cypher-result tbody tr:hover
+{
+	color: #339;
+	background: #aadbe9;
+}

src/main/resources/WEB-INF/lib/cypher/commands/start.js

@@ -10,7 +10,7 @@ define(function(require, exports, module) {
   var gcli = require('gcli/index');
   var util = require('gcli/util');
 
-  var cypherHtml = require('text!cypher/commands/cypher.html');
+  var cypherHtml = require('text!cypher/commands/cypher-table.html');
 
   var cypherUrlSettingSpec = {
     name: 'cypherUrl',
@@ -54,10 +54,13 @@ var cypherStartcCommandSpec = {
 
     var query = "START " + args.query;
 
-    queryCypher(query, function(text) {
+    queryCypher(query, function(json) {
       promise.resolve(context.createView({
         html: cypherHtml,
-        data: { "text": text }
+        data: { "rows": json },
+        options: { allowEval:true },
+        css: require('text!cypher/commands/cypher_result.css'),
+        cssId: 'cypher-result-table'
       }));
     }, onFailure);
 
@@ -70,15 +73,31 @@ function queryCypher(query, onSuccess, onFailure) {
 
   var req = new XMLHttpRequest();
   req.open('POST', url, true);
-  req.setRequestHeader('Accept', 'text/plain');
+  req.setRequestHeader('Accept', 'application/json');
   req.setRequestHeader('Content-type', 'text/plain');
   req.onreadystatechange = function(event) {
     if (req.readyState == 4) {
       if (req.status >= 300 || req.status < 200) {
         onFailure('Error: ' + JSON.stringify(req));
         return;
       }
-      onSuccess(req.responseText);
+
+      var json;
+      try {
+        json = JSON.parse(req.responseText);
+      }
+      catch (ex) {
+        onFailure('Invalid response: ' + ex + ': ' + req.responseText);
+        return;
+      }
+
+      if (json.error) {
+        onFailure('Error: ' + json.error.message);
+        return;
+      }
+
+      onSuccess(json);
+
     }
   }.bind(this);
   req.send(query);