diff 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
line wrap: on
line diff
--- a/query_builder/ismi.html	Wed Dec 02 00:53:02 2015 -0500
+++ b/query_builder/ismi.html	Thu Dec 10 07:26:40 2015 -0500
@@ -45,14 +45,14 @@
 
                 <section>
                 <div class="s2-example">
-                    <div class="row">
-                        <div class="col-sm-4 col-md-4">
+                    <div id="filter" class="row">
+                        <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>
@@ -69,35 +69,6 @@
 </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 = [];
@@ -115,11 +86,18 @@
         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",
@@ -146,7 +124,7 @@
                 };
             },
             success: function (res, textStatus, jqXHR) {
-                console.log(textStatus);
+                console.log(res);
                 ajaxCheck(res, textStatus);
             },
             error: function (jqXHR, textStatus, errorThrown) {
@@ -167,6 +145,7 @@
         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 });
@@ -177,8 +156,9 @@
         });
         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
@@ -196,7 +176,72 @@
         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>