Mercurial > hg > NetworkVis
diff query_builder/ismi.html @ 27:ed8b4e3f2a73
ISMI.HTML -- Better implementation of query boxes using Select2 on ismi.html, however when the first drop down is changed the ccorresponding one doesn't delete old data. select2('data', null) and similar methods of deleting has been unsuccessful so far
author | arussell |
---|---|
date | Wed, 02 Dec 2015 00:53:02 -0500 |
parents | 22be4ea663a7 |
children | 5384b71df52a |
line wrap: on
line diff
--- a/query_builder/ismi.html Tue Dec 01 02:07:13 2015 -0500 +++ b/query_builder/ismi.html Wed Dec 02 00:53:02 2015 -0500 @@ -4,11 +4,11 @@ <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title>Query Builder</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> - <link rel="stylesheet" href="bootstrap/bootstrap-slider/css/bootstrap-slider.css"> - <link rel="stylesheet" href="selectize/dist/css/selectize.default.css"> - <link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css"> - <link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.css"> - <link rel="stylesheet" href="css/query-builder.default.min.css"> + <link rel="stylesheet" href="select2-4.0.1/dist/css/select2.min.css"> + + <script type="text/javascript" src="js/d3.min.js"></script> + <script type="text/javascript" src="select2-4.0.1/vendor/jquery-2.1.0.js"></script> + <script type="text/javascript" src="select2-4.0.1/dist/js/select2.full.min.js"></script> </head> @@ -20,14 +20,18 @@ <ul class="nav navbar-nav"> </ul> </div> - <div class="navbar-header col-sm-6 col-md-6"> - <div class="logo-well"> - <a href="//neo4j.com/developer-resources"> - <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> - </a> + <div class="navbar-header col-sm-6 col-md-6" style="height: 105px;"> + <div class="col-md-6"> + <div class="navbar-brand"> + <div class="brand">ISMI Query Builder</div> + </div> </div> - <div class="navbar-brand"> - <div class="brand">ISMI Query Builder</div> + <div class="col-md-offset-6"> + <div class="logo-well" style="height: 60%; width: 60%;"> + <a href="//neo4j.com/developer-resources"> + <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo" style="max-height: 50%; width: 50%"> + </a> + </div> </div> </div> </div> @@ -39,106 +43,160 @@ <div class="panel panel-default"> <div class="panel-heading" id="title">Query Builder</div> - - - - <div class="sandbox"> - <label for="select-codex">Codex:</label> - <select id="select-codex" class="codices selectized" placeholder="Choose a codex" tabindex="-1" style="display: none;"></select> + <section> + <div class="s2-example"> + <div class="row"> + <div class="col-sm-4 col-md-4"> + <select class="js-example-data-array form-control"></select> + </div> + <div class="col-sm-4 col-md-4"> + <select class="js-example-data-array2 form-control"></select> + </div> + <div class="col-sm-4 col-md-4"> + <select class="js-example-data-array3 form-control"> + <option value="" disabled selected>Loading...</option> + </select> + </div> + </div> </div> - - - - - + <!-- <pre data-fill-from=".js-code-data-array"></pre> --> + </section> </div> </div> </div> </div> +<script type="text/javascript" class="js-code-data-array"> + // Code to interrupt ajax calls if object box switched, currently doesnt work... + (function($) { + var xhrPool = []; + $(document).ajaxSend(function(e, jqXHR, options){ + xhrPool.push(jqXHR); + }); + $(document).ajaxComplete(function(e, jqXHR, options) { + xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR}); + }); + var abort = function() { + $.each(xhrPool, function(idx, jqXHR) { + jqXHR.abort(); + console.log("aborted"); + }); + }; + + var oldbeforeunload = window.onbeforeunload; + window.onbeforeunload = function() { + var r = oldbeforeunload ? oldbeforeunload() : undefined; + if (r == undefined) { + // only cancel requests if there is no prompt to stay on the page + // if there is a prompt, it will likely give the requests enough time to finish + abort(); + console.log("aborted"); + } + return r; + } + })(jQuery); + -<script type="text/javascript" src="js/jquery-1.11.3.js"></script> -<script type="text/javascript" src="js/d3.min.js"></script> -<script type="text/javascript" src="moment/min/moment.min.js"></script> -<script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> -<script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script> -<script type="text/javascript" src="selectize/dist/js/standalone/selectize.min.js"></script> -<script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script> -<script type="text/javascript" src="js/query-builder.standalone.min.js"></script> + var queryData = []; -<script> - var refreshDropdown = function(query, callback) { - $.getJSON('url/suppliers', function (results) { - if (results) { - var selectOptions = []; - for (var index = 0, length = results.length; index < length; index++) { - var item = results[index]; - selectOptions.push({ - text: item.Option, - value: item.Id.toString() - }); - } + var data = [{ id: 0, text: 'TEXT' }, { id: 1, text: 'CODEX' }, { id: 2, text: 'WITNESS' }, { id: 3, text: 'COLLECTION' }, { id: 4, text: 'PERSON' }]; - var selectize = $("#Supplier")[0].selectize; - selectize.clear(); - selectize.clearOptions(); - selectize.load(function (callback) { - callback(selectOptions); - }); - } - }) - }; + var relations = [{ id: 0, text: 'equal' }, { id: 1, text: 'in' }]; - $('#select-codex').selectize({ - valueField: 'title', - labelField: 'title', - searchField: 'title', - options: [], - create: false, - render: { - option: function(item, escape) { - console.log(item[0].data.label); - return '<div>' + - '<span class="codex">' + escape(item.label) + '</span>' + - '</div>'; - } - }, - load: function(query, callback) { - //if (!query.length) return callback(); - $.ajax({ - type: "POST", - url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher", - accepts: "application/json", - dataType: "json", - data: { - "query": "match (codex:CODEX) return codex limit 25", - "params": {} - }, - beforeSend: function (xhr) { - xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j')); - }, - success: function (res, textStatus, jqXHR) { - console.log("success"); - optionArray=[]; - res.data.forEach(function(arr) { - optionArray.push(arr[0].data); - }); - console.log(optionArray); - callback(optionArray); - }, - error: function (jqXHR, textStatus, errorThrown) { - console.log("error"); - callback(); - } - }); + $(".js-example-data-array").select2({ + data: data + }); + ajax1("TEXT"); - } + $(".js-example-data-array2").select2({ + data: relations }); + // Ajax request function + function ajax1(q) { + var combinedQuery = "match (n:TEXT) return n"; + if (q !== undefined) combinedQuery = "match (n:" + q + ") return n"; + console.log(combinedQuery); + return $.ajax({ + type: "POST", + url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher", + accepts: "application/json", + dataType: "json", + data: { + "query": combinedQuery, + "params": {} + }, + beforeSend: function (xhr) { + xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j')); + }, + processResults: function (data, params) { + // parse the results into the format expected by Select2 + // since we are using custom formatting functions we do not need to + // alter the remote JSON data, except to indicate that infinite + // scrolling can be used + params.page = params.page || 1; + console.log(data.length); + return { + pagination: { + more: (params.page * 30) < data.length + } + }; + }, + success: function (res, textStatus, jqXHR) { + console.log(textStatus); + ajaxCheck(res, textStatus); + }, + error: function (jqXHR, textStatus, errorThrown) { + console.log(textStatus); + } + }); + } + // Check if request was successful + function ajaxCheck(a1, status){ + if (status === 'error') console.log("error: bad ajax request"); + else dataGen(a1); + } + + // On success, generate new data + function dataGen(a1){ + console.log("next started"); + var d = a1.data; + // Consider implementing localStorage to avoid reloading every time + queryData = []; + for (var i= 0; i<d.length; i++) { + var j = d[i][0].data.ismi_id; + queryData.push({ id: j, text: d[i][0].data.label }); + } + // Now that queryData array has been defined we will sort it by its label value and initialize the option. + queryData.sort(function(a,b){ + return a.text.localeCompare(b.text); + }); + console.log(queryData); + + // TODO: currently the queryData is being added onto the previous query data, need to remove old. + + + $(".js-example-data-array3").select2({ + data: queryData + }); + $(".js-example-data-array3").select2('val', "Select an option"); + } + + // If first box is changed generates new queryData with updated query + $('body').on('change', ".js-example-data-array", function(e){ + var query = '' + data[$(this).val()].text; + //for(var i=0, n=queryData.length; i<n; i++) { + // FIXME: Trying to get the data in the drop down menu to be erased when first menu changed. Not quite working... + $(".js-example-data-array3").select2('data',[]); + //} + ajax1(query); + }); + + // TODO: ^^^^^ extend this to make a listener that will build the query dynamically </script>