Menu
▾
▴
[Bigdata-commit] SF.net SVN: bigdata:[7883] branches/RDR/bigdata-war/src
|
From: <tob...@us...> - 2014-02-24 19:35:14
|
Revision: 7883
http://sourceforge.net/p/bigdata/code/7883
Author: tobycraig
Date: 2014-02-24 19:35:07 +0000 (Mon, 24 Feb 2014)
Log Message:
-----------
Load/query development on workbench
Modified Paths:
--------------
branches/RDR/bigdata-war/src/html/new.html
branches/RDR/bigdata-war/src/html/style.css
branches/RDR/bigdata-war/src/html/workbench.js
Added Paths:
-----------
branches/RDR/bigdata-war/src/images/logo.png
Modified: branches/RDR/bigdata-war/src/html/new.html
===================================================================
--- branches/RDR/bigdata-war/src/html/new.html 2014-02-24 13:47:27 UTC (rev 7882)
+++ branches/RDR/bigdata-war/src/html/new.html 2014-02-24 19:35:07 UTC (rev 7883)
@@ -7,58 +7,137 @@
</head>
<body>
- <div id="tab-selector">
- <a data-target="load" class="active">Load</a>
- <a data-target="query">Query</a>
- <a data-target="explore">Explore</a>
- <a data-target="status">Status</a>
- <a data-target="namespaces">Namespaces</a>
- </div>
+ <div id="container">
- <div id="current-namespace">
- Current namespace: <span>kb</span>
- </div>
+ <div id="top">
+ <img src="images/logo.png" id="logo">
+ <p><label for="search-text">Search:</label> <input type="text" id="search-text"></p>
+ <p>Current namespace: <span id="current-namespace">kb</span></p>
+ </div>
- <div class="tab" id="load">
- <input id="load-file" type="file" name="file">
- <input id="load-hidden" type="hidden" name="large-file-contents">
- <p id="large-file-message" style="display: none;">Your file is too large to display here, but will be uploaded as normal.</p>
- <br>
- <textarea id="load-box" name="textarea" rows="10" cols="80"></textarea>
- <br>
- Type: <select id="load-type">
- <option value="sparql" selected="selected">SPARQL</option>
- <option value="rdf">RDF</option>
- <option value="path">File path</option>
- </select>
- <select id="rdf-type" style="display: none;">
- <option value="">Select RDF format</option>
- <option value="n-quads">N-Quads</option>
- <option value="n-triples">N-Triples</option>
- <option value="n3">Notation3</option>
- <option value="rdf/xml">RDF/XML</option>
- <option value="trig">TriG</option>
- <option value="trix">TriX</option>
- <option value="turtle">Turtle</option>
- </select>
- <br>
- <button>Load</button>
- <hr>
- <p>Response:</p>
- <pre id="response"></pre>
+ <div id="tab-selector">
+ <a data-target="load" class="active">Load</a>
+ <a data-target="query">Query</a>
+ <a data-target="explore">Explore</a>
+ <a data-target="status">Status</a>
+ <a data-target="namespaces">Namespaces</a>
+ </div>
- </div>
+ <div class="tab" id="load-tab">
- <div class="tab" id="query">query
- </div>
+ <div class="box">
- <div class="tab" id="explore">explore
- </div>
+ <div class="namespace-shortcuts">
+ <ul>
+ <li data-ns="prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>">RDF</li>
+ <li data-ns="prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>">RDFS</li>
+ <li data-ns="prefix owl: <http://www.w3.org/2002/07/owl#>">OWL</li>
+ <li data-ns="prefix bd: <http://www.bigdata.com/rdf#> ">BD</li>
+ <li data-ns="prefix bds: <http://www.bigdata.com/rdf/search#> ">BDS</li>
+ <li data-ns="prefix foaf: <http://xmlns.com/foaf/0.1/>">FOAF</li>
+ <li data-ns="prefix hint: <http://www.bigdata.com/queryHints#>">HINT</li>
+ <li data-ns="prefix dc: <http://purl.org/dc/elements/1.1/>">DC</li>
+ <li data-ns="prefix xsd: <http://www.w3.org/2001/XMLSchema#>">XSD</li>
+ </ul>
+ </div>
- <div class="tab" id="status">status
- </div>
+ <input id="load-hidden" type="hidden" name="large-file-contents">
+ <p id="large-file-message">Your file is too large to display here, but will be uploaded as normal.</p>
+ <textarea id="load-box" placeholder="(Type in or drag a file containing RDF data, a SPARQL update or a file path or URL)"></textarea>
+ <p>
+ <label for="load-type">Type:</label>
+ <select id="load-type">
+ <option value="sparql" selected="selected">SPARQL</option>
+ <option value="rdf">RDF</option>
+ <option value="path">File path</option>
+ </select>
+ <span id="rdf-type-container">
+ <label for="rdf-type">Format:</label>
+ <select id="rdf-type">
+ <option value="">Select RDF format</option>
+ <option value="n-quads">N-Quads</option>
+ <option value="n-triples">N-Triples</option>
+ <option value="n3">Notation3</option>
+ <option value="rdf/xml">RDF/XML</option>
+ <option value="trig">TriG</option>
+ <option value="trix">TriX</option>
+ <option value="turtle">Turtle</option>
+ </select>
+ </span>
+ </p>
+ <hr class="shadow">
+ <button id="load-load">Load</button>
+ </div>
- <div class="tab" id="namespaces">namespaces
+ <div class="box">
+ <pre id="load-response"></pre>
+ </div>
+
+ <div class="bottom">
+ <button id="load-clear">Clear output</button>
+ </div>
+
+ </div>
+
+ <div class="tab" id="query-tab">
+ <div class="box">
+
+ <div class="namespace-shortcuts">
+ <ul>
+ <li data-ns="prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>">RDF</li>
+ <li data-ns="prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>">RDFS</li>
+ <li data-ns="prefix owl: <http://www.w3.org/2002/07/owl#>">OWL</li>
+ <li data-ns="prefix bd: <http://www.bigdata.com/rdf#> ">BD</li>
+ <li data-ns="prefix bds: <http://www.bigdata.com/rdf/search#> ">BDS</li>
+ <li data-ns="prefix foaf: <http://xmlns.com/foaf/0.1/>">FOAF</li>
+ <li data-ns="prefix hint: <http://www.bigdata.com/queryHints#>">HINT</li>
+ <li data-ns="prefix dc: <http://purl.org/dc/elements/1.1/>">DC</li>
+ <li data-ns="prefix xsd: <http://www.w3.org/2001/XMLSchema#>">XSD</li>
+ </ul>
+ </div>
+
+ <form id="query-form">
+ <input type="hidden" class="namespace" name="namespace">
+
+ <textarea id="query-box" name="query" placeholder="(Input a SPARQL query)"></textarea>
+
+ <a href="#" id="advanced-features-toggle">Advanced features</a>
+
+ <div id="advanced-features">
+ <input type="checkbox" name="explain" value="true" id="query-explain"> <label for="query-explain">Explain</label>
+ <input type="checkbox" name="analytic" value="true" id="query-analytic"> <label for="query-analytic">Analytic</label>
+ <input type="checkbox" name="RTO" value="true" id="query-rto"> <label for="query-rto">Runtime Query Optimizer</label>
+ </div>
+
+ <hr class="shadow">
+
+ <div id="load-buttons">
+ <input type="submit" value="Execute">
+ <input type="reset" value="Clear">
+ </div>
+ </form>
+
+ </div>
+
+ <div id="query-response" class="box">
+ </div>
+
+ <div class="bottom">
+ <button id="query-export">Export</button>
+ <button id="query-response-clear">Clear</button>
+ </div>
+
+ </div>
+
+ <div class="tab" id="explore-tab">explore
+ </div>
+
+ <div class="tab" id="status-tab">status
+ </div>
+
+ <div class="tab" id="namespaces-tab">namespaces
+ </div>
+
</div>
<!--[if IE]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Modified: branches/RDR/bigdata-war/src/html/style.css
===================================================================
--- branches/RDR/bigdata-war/src/html/style.css 2014-02-24 13:47:27 UTC (rev 7882)
+++ branches/RDR/bigdata-war/src/html/style.css 2014-02-24 19:35:07 UTC (rev 7883)
@@ -54,6 +54,29 @@
margin: 10px;
}
+#container {
+ /*max-width: 600px;*/
+}
+
+#top {
+ text-align: right;
+ margin-bottom: 20px;
+}
+
+#logo {
+ float: left;
+}
+
+.shadow {
+ -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
+ -moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
+ box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
+}
+
+#tab-selector {
+ clear: both;
+}
+
#tab-selector a {
padding: 10px;
border: 1px solid;
@@ -61,24 +84,90 @@
border-bottom: none;
display: inline-block;
float: left;
+ cursor: pointer;
}
#tab-selector a:last-of-type {
border-right: 1px solid;
}
-#current-namespace {
- float: right;
-}
-
.active {
- text-shadow: 1px 0px 0px black;
- /*font-weight: bold;*/
+ background: lightgrey;
}
.tab {
display: none;
clear: both;
+}
+
+.box {
border: 1px solid;
padding: 10px;
+ border: 1px solid;
+ border-bottom: none;
+ min-height: 100px;
}
+
+.box:last-of-type {
+ border-bottom: 1px solid;
+}
+
+.namespace-shortcuts {
+ text-align: right;
+}
+
+.namespace-shortcuts li {
+ display: inline-block;
+ border: 1px solid;
+ padding: 5px;
+ margin-left: 5px;
+ cursor: pointer;
+}
+
+#large-file-message {
+ display: none;
+ margin: 5px 0;
+}
+
+textarea {
+ margin: 5px 0;
+ width: 100%;
+ height: 200px;
+ box-sizing: border-box;
+}
+
+#rdf-type-container {
+ display: none;
+}
+
+hr {
+ background: #929292;
+ border: none;
+ height: 5px;
+ width: 50%;
+ margin: 20px auto;
+}
+
+#load-load {
+ margin: 0 auto;
+ display: block;
+}
+
+#load-buttons {
+ text-align: center;
+}
+
+.bottom {
+ border-top: 1px solid;
+ text-align: right;
+}
+
+#advanced-features {
+ display: none;
+}
+
+td {
+ border: 1px solid;
+ padding: 2px;
+}
+
Modified: branches/RDR/bigdata-war/src/html/workbench.js
===================================================================
--- branches/RDR/bigdata-war/src/html/workbench.js 2014-02-24 13:47:27 UTC (rev 7882)
+++ branches/RDR/bigdata-war/src/html/workbench.js 2014-02-24 19:35:07 UTC (rev 7883)
@@ -1,24 +1,53 @@
$(function() {
-$('#tab-selector a').click(function() {
- $('.tab').hide();
- $('#' + $(this).data('target')).show();
- $('#tab-selector a').removeClass();
- $(this).addClass('active');
+/* Tab selection */
+
+$('#tab-selector a').click(function(e) {
+ showTab($(this).data('target'));
});
-$('#tab-selector a:first').click();
+if(window.location.hash) {
+ showTab(window.location.hash.substr(1));
+} else {
+ $('#tab-selector a:first').click();
+}
-// TODO: set namespace initially
+function showTab(tab) {
+ $('.tab').hide();
+ $('#' + tab + '-tab').show();
+ $('#tab-selector a').removeClass();
+ $('a[data-target=' + tab + ']').addClass('active');
+ window.location.hash = tab;
+}
/* Namespaces */
function getNamespaces() {
$.get('/namespace', function(data) {
-
+ var namespaces = data.getElementsByTagName('Namespace');
+ for(var i=0; i<namespaces.length; i++) {
+ var namespace = namespaces[i].textContent;
+ }
});
}
+// default namespace
+namespace = 'kb';
+$('.namespace').val(namespace);
+
+/* Namespace shortcuts */
+
+$('.namespace-shortcuts li').click(function() {
+ var textarea = $(this).parents('.tab').find('textarea');
+ var current = textarea.val();
+ var ns = $(this).data('ns');
+
+ if(current.indexOf(ns) == -1) {
+ textarea.val(ns + '\n' + current);
+ }
+});
+
+
/* Load */
function handleDragOver(e) {
@@ -117,16 +146,16 @@
}
function handleTypeChange(e) {
- $('#rdf-type').toggle($(this).val() == 'rdf');
+ $('#rdf-type-container').toggle($(this).val() == 'rdf');
}
function setType(type, format) {
$('#load-type').val(type);
if(type == 'rdf') {
- $('#rdf-type').show();
+ $('#rdf-type-container').show();
$('#rdf-type').val(format);
} else {
- $('#rdf-type').hide();
+ $('#rdf-type-container').hide();
}
}
@@ -162,7 +191,7 @@
$('#load-box').on('paste', handlePaste);
$('#load-type').change(handleTypeChange);
-$('#load button').click(function() {
+$('#load-load').click(function() {
// determine action based on type
var settings = {
type: 'POST',
@@ -191,21 +220,76 @@
$.ajax('/sparql', settings);
});
+$('#load-clear').click(function() {
+ $('#load-response').text('');
+});
+
+$('#advanced-features-toggle').click(function() {
+ $('#advanced-features').toggle();
+ return false;
+});
+
function updateResponseHTML(data) {
- $('#response').html(data);
+ $('#load-response').html(data);
}
function updateResponseXML(data) {
var modified = data.childNodes[0].attributes['modified'].value;
var milliseconds = data.childNodes[0].attributes['milliseconds'].value;
- $('#response').text('Modified: ' + modified + '\nMilliseconds: ' + milliseconds);
+ $('#load-response').text('Modified: ' + modified + '\nMilliseconds: ' + milliseconds);
}
function updateResponseError(jqXHR, textStatus, errorThrown) {
- $('#response').text('Error! ' + textStatus + ' ' + errorThrown);
+ $('#load-response').text('Error! ' + textStatus + ' ' + errorThrown);
}
+/* Query */
+
+$('#query-form').submit(function() {
+ var settings = {
+ type: 'POST',
+ data: $(this).serialize(),
+ dataType: 'json',
+ accepts: {'json': 'application/sparql-results+json'},
+ success: showQueryResults,
+ error: queryResultsError
+ }
+ $.ajax('/sparql', settings);
+ return false;
+});
+
+$('#query-response-clear').click(function() {
+ $('#query-response').html('');
+});
+
+function showQueryResults(data) {
+ $('#query-response').html('');
+ var table = $('<table>').appendTo($('#query-response'));
+ var thead = $('<thead>').appendTo(table);
+ var vars = [];
+ var tr = $('<tr>');
+ for(var i=0; i<data.head.vars.length; i++) {
+ tr.append('<td>' + data.head.vars[i] + '</td>');
+ vars.push(data.head.vars[i]);
+ }
+ thead.append(tr);
+ table.append(thead);
+ for(var i=0; i<data.results.bindings.length; i++) {
+ var tr = $('<tr>');
+ for(var j=0; j<vars.length; j++) {
+ tr.append('<td>' + data.results.bindings[i][vars[j]].value + '</td>');
+ }
+ table.append(tr);
+ }
+
+}
+
+function queryResultsError(jqXHR, textStatus, errorThrown) {
+ $('#query-response').text('Error! ' + textStatus + ' ' + errorThrown);
+}
+
+
/* Navigator */
$('#navigator').submit(function() {
Added: branches/RDR/bigdata-war/src/images/logo.png
===================================================================
(Binary files differ)
Index: branches/RDR/bigdata-war/src/images/logo.png
===================================================================
--- branches/RDR/bigdata-war/src/images/logo.png 2014-02-24 13:47:27 UTC (rev 7882)
+++ branches/RDR/bigdata-war/src/images/logo.png 2014-02-24 19:35:07 UTC (rev 7883)
Property changes on: branches/RDR/bigdata-war/src/images/logo.png
___________________________________________________________________
Added: svn:mime-type
## -0,0 +1 ##
+application/octet-stream
\ No newline at end of property
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
