NetworkVis: query_builder/ismi.html comparison

comparison query_builder/ismi.html @ 28:5384b71df52a

querybuild.html added, beginning prototype.

author	arussell
date	Thu, 10 Dec 2015 07:26:40 -0500
parents	ed8b4e3f2a73
children

comparison

equal deleted inserted replaced

-:ed8b4e3f2a73
+:5384b71df52a
 <div class="panel panel-default">
 <div class="panel-heading" id="title">Query Builder</div>
 <section>
 <div class="s2-example">
-<div class="row">
+<div id="filter" class="row">
-<div class="col-sm-4 col-md-4">
+<div class="col-sm-3 col-md-3">
 <select class="js-example-data-array form-control"></select>
 </div>
-<div class="col-sm-4 col-md-4">
+<div class="col-sm-3 col-md-3">
 <select class="js-example-data-array2 form-control"></select>
 </div>
-<div class="col-sm-4 col-md-4">
+<div class="col-sm-3 col-md-3">
 <select class="js-example-data-array3 form-control">
 <option value="" disabled selected>Loading...</option>
 </select>
 </div>
 </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);
 var queryData = [];
 var data = [{ id: 0, text: 'TEXT' }, { id: 1, text: 'CODEX' }, { id: 2, text: 'WITNESS' }, { id: 3, text: 'COLLECTION' }, { id: 4, text: 'PERSON' }];
 ajax1("TEXT");
 $(".js-example-data-array2").select2({
 data: relations
 });
+$(".js-example-data-array3").select2();
 // 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);
+$.ajaxSetup({
+headers: {
+"Authorization": 'Basic ' + window.btoa("neo4j"+":"+"neo5j")
+}
+});
 return $.ajax({
 type: "POST",
 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
 accepts: "application/json",
 dataType: "json",
 more: (params.page * 30) < data.length
 }
 };
 },
 success: function (res, textStatus, jqXHR) {
-console.log(textStatus);
+console.log(res);
 ajaxCheck(res, textStatus);
 },
 error: function (jqXHR, textStatus, errorThrown) {
 console.log(textStatus);
 }
 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.
+// TODO: currently the queryData is being added onto the previous query data, need to REMOVE OLD.
+$(".js-example-data-array3").select2('data', null);
 $(".js-example-data-array3").select2({
 data: queryData
 });
 $(".js-example-data-array3").select2('val', "Select an option");
 $(".js-example-data-array3").select2('data',[]);
 //}
 ajax1(query);
 });
-// TODO: ^^^^^ extend this to make a listener that will build the query dynamically
+$("#plus_filter_button").click(function() {
+console.log("add filter");
+$("#s2-example").append("<div id='filter'/>");
+//$(".js-example-data-array").select2({
+//    data: filters
+//}, console.log("created"));
+});
+// TODO: **** NOTE, could have each ajax fn be called with an extra parameter of what type of result to return ****
+// TODO: (objects, attributes, attribute, relationships)
+// TODO: in this way you could have each onchange trigger supply the appropriate result of the box it will modify.
+// TODO: this would allow the json to be returned in the same way for each result. and we could also pass
+// TODO: the return type param to the data gen
+/* CURRENT IMPLEMENTATION
+TODO: Make custom dataGen function for each dropdown type: object, attribute, display
+TODO: we need to do this because we need to deal with the returned json differently depending on
+TODO: what we want the dropdown to hold. This will be determined by the body.on(change function
+TODO: and what the type of box is changing. Eg. changing the object type will trigger a change in
+TODO: attributes and clear the display. Change in attribute will combine with object type to form
+TODO: full query and trigger a dataGen of the appropriate info eg. TEXT.label in the display.
+TODO: In this implementation, each box determines the next
+TODO: Also, object changing can be used to update the list of relationships between it and any other object
+TODO: for the next line.
+CYPHER IMPLEMENTATION
+TODO: Implement exactly like a cypher query.
+TODO: first line: MATCH ---- object. relationship. object.
+TODO: first object on choice sends ajax query to determine available relationships --> second box
+TODO: relationship on choice determines the other types of possible objects to relate to.
+TODO: second line: WHERE ---- object. attribute. equals.
+TODO: the object can be either of the ones from line one. the attribute is generated by that object.
+TODO: choose to return
+*/
 </script>
 </body>

Mercurial > hg > NetworkVis

comparison query_builder/ismi.html @ 28:5384b71df52a