From 66da709494e6396aa155b9da96a4040681f4db8b Mon Sep 17 00:00:00 2001
From: jent-org <irygaev@gmail.com>
Date: Sat, 2 Apr 2016 00:24:42 +0300
Subject: [PATCH] A number of bugfixes, improvements and better support for
 Virtuoso and Blazegraph triplestores

* Fixed encoding problem - now safe to use with russian and other Unicode characters in the query text
* Fixed issue with ASK queries with Virtuoso (they always returned TRUE).
* Added "Send As" dropdown to choose between "query" and "update" parameters. According to SPARQL1.1 specification update queries MUST be send using "update" parameter (not "query" parameter) and Blazegraph does not support update queries in the query parameter (though Virtuoso do support that).
* Added support for non-standard responses (i.e not xml). SPARQL1.1 specification does not regulate response format for update queries. While Virtuoso uses standard SPARQL-XML responses, Blazegraph provides plain html message. In case response is not parsable it is displayed as a whole as plain html.
* Prefixes are displayed one in a row and by default are hidden. Can be shown using [Show Prefixes] button.
* Added support for in-query prefixes -
---
 snorql/index.html |  12 +++-
 snorql/snorql.js  | 166 ++++++++++++++++++++++++++++++++++++----------
 snorql/sparql.js  |  32 ++++++---
 snorql/style.css  |   1 +
 4 files changed, 164 insertions(+), 47 deletions(-)

diff --git a/snorql/index.html b/snorql/index.html
index 2ff03eb..eddef7b 100644
--- a/snorql/index.html
+++ b/snorql/index.html
@@ -43,16 +43,24 @@ <h2 style="display: inline">GRAPH:</h2>
     </div>
 
     <div class="section" style="margin-right: 12em">
-      <h2>SPARQL:</h2>
-      <pre id="prefixestext"></pre>
+      <h2>SPARQL: <input type="button" id="prefixes_button" value="Show Prefixes" onClick="showHidePrefixes();"/></h2>
+      <code id="prefixestext" class="prefixes" style="display:none;"></code>
       <form id="queryform" action="#" method="get"><div>
         <input type="hidden" name="query" value="" id="query" />
+        <input type="hidden" name="update" value="" id="update" disabled="disabled"/>
+        <input type="hidden" name="sendas" value="query" id="sendas" />
         <input type="hidden" name="output" value="json" id="jsonoutput" disabled="disabled" />
+        <input type="hidden" name="format" value="json" id="format" disabled="disabled" />
         <input type="hidden" name="stylesheet" value="" id="stylesheet" disabled="disabled" />
         <input type="hidden" name="graph" value="" id="graph-uri" disabled="disabled" />
       </div></form>
       <div>
         <textarea name="query" rows="9" cols="80" id="querytext"></textarea>
+        Send as:
+        <select id="selectsendas" onchange="snorql.updateOutputMode()">
+          <option selected="selected" value="query">Query</option>
+          <option value="update">Update</option>
+        </select>
         Results:
         <select id="selectoutput" onchange="snorql.updateOutputMode()">
           <option selected="selected" value="browse">Browse</option>
diff --git a/snorql/snorql.js b/snorql/snorql.js
index d80c828..587656e 100644
--- a/snorql/snorql.js
+++ b/snorql/snorql.js
@@ -8,6 +8,23 @@ String.prototype.startsWith = function(str) {
 	return (this.match("^"+str) == str);
 }
 
+function showHidePrefixes()
+{
+	var prefixesButton = document.getElementById('prefixes_button');
+	var prefixesText = document.getElementById('prefixestext');
+	
+	if (prefixesButton.value == 'Show Prefixes')
+	{
+		prefixesText.style.display = 'block';
+		prefixesButton.value = 'Hide Prefixes'
+	}
+	else
+	{
+		prefixesText.style.display = 'none';
+		prefixesButton.value = 'Show Prefixes'
+	}
+}
+
 function Snorql() {
     // modify this._endpoint to point to your SPARQL endpoint
     this._endpoint = document.location.href.match(/^([^?]*)snorql\//)[1] + 'sparql';
@@ -21,6 +38,12 @@ function Snorql() {
     this._graph = null;
     this._xsltDOM = null;
 
+    this.setNamespaces = function(namespaces) {
+        this._namespaces = namespaces;
+        var prefixesElement = document.createTextNode(this._getPrefixes());
+        this._display(prefixesElement, 'prefixestext');
+    }
+
     this.start = function() {
         // TODO: Extract a QueryType class
         this.setBrowserBase(document.location.href.replace(/\?.*/, ''));
@@ -97,7 +120,44 @@ function Snorql() {
         if (queryString.match(/query=/)) {
             var resultTitle = 'SPARQL results:';
             querytext = this._betterUnescape(queryString.match(/query=([^&]*)/)[1]);
-            var query = prefixes + querytext;
+            
+            var this_prefixes = '';
+            
+            var prefix_array = prefixes.split('\n');
+            
+            for (var i = 0; i < prefix_array.length; i++)
+            {
+            	var prefix = prefix_array[i];
+            	
+            	if (querytext.indexOf(prefix) == -1)
+            		this_prefixes += prefix + '\n';
+            }
+			
+			var query_lines = querytext.split('\n');
+			
+			for (var i = 0; i < query_lines.length; i++)
+			{
+				var line = query_lines[i];
+				
+				if (line.match(/prefix/i))
+				{
+					var parts = line.split(' ');
+					
+					if (parts.length > 2 && parts[0].toUpperCase() == 'PREFIX')
+						this._namespaces[parts[1].replace(':', '')] = parts[2].substring(1, parts[2].length - 1);
+				}
+				else
+				{
+					break;
+				}
+			}
+            
+            var query = this_prefixes + querytext;
+        }
+		var sendAsMethod = "query";
+        if (queryString.match(/sendas=/)) {
+            sendAsMethod = queryString.match(/sendas=([^&]*)/)[1];
+			document.getElementById('selectsendas').value = sendAsMethod;
         }
         if (!querytext) {
             querytext = query;
@@ -116,7 +176,7 @@ function Snorql() {
    	    var match = exp.exec(querytext);
    	    if (match) {
 	        if (match[1].toUpperCase() == 'ASK') {
-	        	service.setOutput('boolean');
+	        	service.setOutput('json');
 	        	var successFunc = function(value) {
 	                dummy.displayBooleanResult(value, resultTitle);
 	            };
@@ -134,17 +194,23 @@ function Snorql() {
 	        }
    	    }
    	    
-        service.query(query, {
-            success: successFunc,
-            failure: function(report) {
-                var message = report.responseText.match(/<pre>([\s\S]*)<\/pre>/);
-                if (message) {
-                    dummy.displayErrorMessage(message[1]);
-                } else {
-                    dummy.displayErrorMessage(report.responseText);
-                }
-            }
-        });
+        service.query
+		(
+			query,
+			{
+				success: successFunc,
+				failure: function(report)
+				{
+					var message = report.responseText.match(/<pre>([\s\S]*)<\/pre>/);
+					if (message) {
+						dummy.displayErrorMessage(message[1]);
+					} else {
+						dummy.displayErrorMessage(report.responseText);
+					}
+				}
+			},
+			sendAsMethod
+		);
     }
 
     this.setBrowserBase = function(url) {
@@ -162,11 +228,6 @@ function Snorql() {
         $('poweredby').update(this._poweredByLabel);
     }
 
-    this.setNamespaces = function(namespaces) {
-        this._namespaces = namespaces;
-        this._display(document.createTextNode(this._getPrefixes()), 'prefixestext');
-    }
-
     this.switchToGraph = function(uri) {
         this._updateGraph(uri, true);
     }
@@ -236,10 +297,28 @@ function Snorql() {
         if (mode == 'browse') {
             document.getElementById('queryform').action = this._browserBase;
             document.getElementById('query').value = document.getElementById('querytext').value;
+            document.getElementById('sendas').value = document.getElementById('selectsendas').value;
+	        document.getElementById('format').disabled = true;
         } else {
-            document.getElementById('query').value = this._getPrefixes() + document.getElementById('querytext').value;
+			if (document.getElementById('selectsendas').value == 'update')
+			{
+				document.getElementById('query').disabled = true;
+				document.getElementById('update').disabled = false;
+				document.getElementById('update').value = this._getPrefixes() + document.getElementById('querytext').value;
+				document.getElementById('queryform').method = 'POST';
+			}
+			else
+			{
+				document.getElementById('query').disabled = false;
+				document.getElementById('update').disabled = true;
+				document.getElementById('query').value = this._getPrefixes() + document.getElementById('querytext').value;
+				document.getElementById('queryform').method = 'GET';
+			}
+			document.getElementById('sendas').disabled = true;
             document.getElementById('queryform').action = this._endpoint;
         }
+        document.getElementById('format').disabled = false;
+		document.getElementById('format').value = mode;
         document.getElementById('jsonoutput').disabled = (mode != 'json');
         document.getElementById('stylesheet').disabled = (mode != 'xslt' || !document.getElementById('xsltstylesheet').value);
         if (mode == 'xslt') {
@@ -266,10 +345,7 @@ function Snorql() {
         var title = document.createElement('h2');
         title.appendChild(document.createTextNode(resultTitle));
         div.appendChild(title);
-        if (value)
-        	div.appendChild(document.createTextNode("TRUE"));
-        else
-        	div.appendChild(document.createTextNode("FALSE"));
+		div.appendChild(document.createTextNode(value.boolean));
         this._display(div, 'result');
         this._updateGraph(this._graph); // refresh links in new result
     }
@@ -289,14 +365,27 @@ function Snorql() {
         var title = document.createElement('h2');
         title.appendChild(document.createTextNode(resultTitle));
         div.appendChild(title);
-        if (json.results.bindings.length == 0) {
-            var p = document.createElement('p');
-            p.className = 'empty';
-            p.appendChild(document.createTextNode('[no results]'));
-            div.appendChild(p);
-        } else {
-            div.appendChild(new SPARQLResultFormatter(json, this._namespaces).toDOM());
-        }
+		
+		if (json.results)
+		{
+			if (json.results.bindings.length == 0) {
+				var p = document.createElement('p');
+				p.className = 'empty';
+				p.appendChild(document.createTextNode('[no results]'));
+				div.appendChild(p);
+			} else {
+				var result = new SPARQLResultFormatter(json, this._namespaces).toDOM()
+				div.appendChild(result);
+			}
+		}
+		else
+		{
+			var p = document.createElement('p');
+			p.className = 'empty';
+			p.innerHTML = json;
+			div.appendChild(p);
+		}
+		
         this._display(div, 'result');
         this._updateGraph(this._graph); // refresh links in new result
     }
@@ -318,6 +407,10 @@ function Snorql() {
         return document.getElementById('selectoutput').value;
     }
 
+    this._selectedSendAs = function() {
+        return document.getElementById('selectsendas').value;
+    }
+
     this._getPrefixes = function() {
         prefixes = '';
         for (prefix in this._namespaces) {
@@ -328,7 +421,8 @@ function Snorql() {
     }
 
     this._betterUnescape = function(s) {
-        return unescape(s.replace(/\+/g, ' '));
+        return decodeURIComponent(s.replace(/\+/g, ' '));
+        //return unescape(s.replace(/\+/g, ' '));
     }
 }
 
@@ -359,13 +453,15 @@ function SPARQLResultFormatter(json, namespaces) {
     this._namespaces = namespaces;
 
     this.toDOM = function() {
-        var table = document.createElement('table');
-        table.className = 'queryresults';
+        var tableUp = document.createElement('table');
+        tableUp.className = 'queryresults';
+        var table= document.createElement('tbody');
+        tableUp.appendChild(table);
         table.appendChild(this._createTableHeader());
         for (var i = 0; i < this._results.length; i++) {
             table.appendChild(this._createTableRow(this._results[i], i));
         }
-        return table;
+        return tableUp;
     }
 
     // TODO: Refactor; non-standard link makers should be passed into the class by the caller
diff --git a/snorql/sparql.js b/snorql/sparql.js
index 612ea9f..147dc69 100644
--- a/snorql/sparql.js
+++ b/snorql/sparql.js
@@ -95,7 +95,10 @@ var SPARQL  = {}; // SPARQL namespace
  */
 SPARQL._query_transformations = {
 	query: function (o) { return o; },
-	ask: function (o) { return o["boolean"]; },
+	ask: function (o)
+	{
+		return o["boolean"];
+	},
 	selectValues: function (o) {
 		var v = o.head.vars[0]; // assume one variable
 		var values = [];
@@ -146,7 +149,7 @@ SPARQL.Service = function(endpoint) {
 	var _output = 'json';
 	var _max_simultaneous = 0;
 	var _request_headers = {};
-
+	
 	//----------
 	// accessors
 	this.endpoint = function() { return _endpoint; };
@@ -217,9 +220,9 @@ SPARQL.Service = function(endpoint) {
 	for (var query_form in SPARQL._query_transformations) {
 		// need the extra function to properly scope query_form (qf)
 		this[query_form] = (function(qf) {
-			return function(queryString, callback) {
+			return function(queryString, callback, sendAsMethod) {
 				var q = this.createQuery();
-				q._doQuery(queryString, callback, SPARQL._query_transformations[qf]);
+				q._doQuery(queryString, callback, SPARQL._query_transformations[qf], sendAsMethod);
 			};
 		})(query_form);
 	}
@@ -252,6 +255,7 @@ SPARQL.Query = function(service, priority) {
 	var _output = service.output();
 	var _priority = priority || 0;
 	var _request_headers = clone_obj(service.requestHeaders());
+	var _send_as = 'query';
 
 	//------------------
 	// private functions
@@ -307,9 +311,16 @@ SPARQL.Query = function(service, priority) {
         //alert(xhr.responseText);
 		SPARQL.statistics.successes++;
 		_service._markDone(this);
-		this._doCallback(arg.callback, 'success', arg.transformer(
-			_output == 'json' ? _create_json(xhr.responseText) : xhr.responseText
-		));
+		
+		var parsed_output = null;
+
+		if (_output == 'json')
+			parsed_output = _create_json(xhr.responseText);
+		
+		if (parsed_output == null)
+			parsed_output = xhr.responseText;
+		
+		this._doCallback(arg.callback, 'success', arg.transformer(parsed_output));
 	};
 	
 	function getXmlHttpRequest(url) {
@@ -317,7 +328,8 @@ SPARQL.Query = function(service, priority) {
 		return new XMLHttpRequest();
 	}
 	
-	this._doQuery = function(queryString, callback, transformer) {
+	this._doQuery = function(queryString, callback, transformer, sendAsMethod) {
+		_send_as = sendAsMethod;
 		_user_query = queryString;
 		if (_service._canRun()) {
 			try {
@@ -433,8 +445,8 @@ SPARQL.Query = function(service, priority) {
 		for (i = 0; i < this.namedGraphs().length; i++) urlQueryString += 'named-graph-uri=' + encodeURIComponent(this.namedGraphs()[i]) + '&';
 		
 		// specify JSON output (currently output= supported by latest Joseki) (or other output)
-		urlQueryString += 'output=' + _output + '&';
-		return urlQueryString + 'query=' + encodeURIComponent(this.queryString());
+		urlQueryString += 'output=' + _output + '&format=' + _output + '&';
+		return urlQueryString + _send_as + '=' + encodeURIComponent(this.queryString());
 	}
 	
     /**
diff --git a/snorql/style.css b/snorql/style.css
index fbbc308..e15096d 100644
--- a/snorql/style.css
+++ b/snorql/style.css
@@ -8,6 +8,7 @@ h2 { font-weight: normal; font-size: 120%; margin: 0; padding: 0 0 0.2em 0; }
 form { margin: 0; }
 textarea { width: 100%; }
 #prefixestext { color: #555; margin: 0; }
+.prefixes { white-space: pre-line; }
 ul { margin: 0; padding: 0; }
 li { margin: 0 0 0 1em; padding: 0; }
 img { border: none; }