Mercurial > hg > NetworkVis

comparison query_builder/ismi.html @ 27:ed8b4e3f2a73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
26:22be4ea663a7 27:ed8b4e3f2a73
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
5 <title>Query Builder</title> 5 <title>Query Builder</title>
6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7 <link rel="stylesheet" href="bootstrap/bootstrap-slider/css/bootstrap-slider.css"> 7 <link rel="stylesheet" href="select2-4.0.1/dist/css/select2.min.css">
8 <link rel="stylesheet" href="selectize/dist/css/selectize.default.css"> 8
9 <link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css"> 9 <script type="text/javascript" src="js/d3.min.js"></script>
10 <link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.css"> 10 <script type="text/javascript" src="select2-4.0.1/vendor/jquery-2.1.0.js"></script>
11 <link rel="stylesheet" href="css/query-builder.default.min.css"> 11 <script type="text/javascript" src="select2-4.0.1/dist/js/select2.full.min.js"></script>
12 12
13 13
14 </head> 14 </head>
15 <body style="background:none;"> 15 <body style="background:none;">
16 <div role="navigation" class="navbar navbar-default navbar-static-top"> 16 <div role="navigation" class="navbar navbar-default navbar-static-top">
18 <div class="row"> 18 <div class="row">
19 <div class="col-sm-6 col-md-6"> 19 <div class="col-sm-6 col-md-6">
20 <ul class="nav navbar-nav"> 20 <ul class="nav navbar-nav">
21 </ul> 21 </ul>
22 </div> 22 </div>
23 <div class="navbar-header col-sm-6 col-md-6"> 23 <div class="navbar-header col-sm-6 col-md-6" style="height: 105px;">
24 <div class="logo-well"> 24 <div class="col-md-6">
25 <a href="//neo4j.com/developer-resources"> 25 <div class="navbar-brand">
26 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> 26 <div class="brand">ISMI Query Builder</div>
27 </a> 27 </div>
28 </div> 28 </div>
29 <div class="navbar-brand"> 29 <div class="col-md-offset-6">
30 <div class="brand">ISMI Query Builder</div> 30 <div class="logo-well" style="height: 60%; width: 60%;">
31 <a href="//neo4j.com/developer-resources">
32 <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%">
33 </a>
34 </div>
31 </div> 35 </div>
32 </div> 36 </div>
33 </div> 37 </div>
34 </div> 38 </div>
35 </div> 39 </div>
37 <div class="row" style="width: 95%"> 41 <div class="row" style="width: 95%">
38 <div class="col-md-12"> 42 <div class="col-md-12">
39 <div class="panel panel-default"> 43 <div class="panel panel-default">
40 <div class="panel-heading" id="title">Query Builder</div> 44 <div class="panel-heading" id="title">Query Builder</div>
41 45
42 46 <section>
43 47 <div class="s2-example">
44 48 <div class="row">
45 <div class="sandbox"> 49 <div class="col-sm-4 col-md-4">
46 <label for="select-codex">Codex:</label> 50 <select class="js-example-data-array form-control"></select>
47 <select id="select-codex" class="codices selectized" placeholder="Choose a codex" tabindex="-1" style="display: none;"></select> 51 </div>
52 <div class="col-sm-4 col-md-4">
53 <select class="js-example-data-array2 form-control"></select>
54 </div>
55 <div class="col-sm-4 col-md-4">
56 <select class="js-example-data-array3 form-control">
57 <option value="" disabled selected>Loading...</option>
58 </select>
59 </div>
60 </div>
48 </div> 61 </div>
49 62
50 63 <!-- <pre data-fill-from=".js-code-data-array"></pre> -->
51 64 </section>
52
53
54
55 65
56 </div> 66 </div>
57 </div> 67 </div>
58 </div> 68 </div>
59 </div> 69 </div>
60 70
61 71 <script type="text/javascript" class="js-code-data-array">
62 72 // Code to interrupt ajax calls if object box switched, currently doesnt work...
63 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 73 (function($) {
64 <script type="text/javascript" src="js/d3.min.js"></script> 74 var xhrPool = [];
65 <script type="text/javascript" src="moment/min/moment.min.js"></script> 75 $(document).ajaxSend(function(e, jqXHR, options){
66 <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 76 xhrPool.push(jqXHR);
67 <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script> 77 });
68 <script type="text/javascript" src="selectize/dist/js/standalone/selectize.min.js"></script> 78 $(document).ajaxComplete(function(e, jqXHR, options) {
69 <script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script> 79 xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
70 <script type="text/javascript" src="js/query-builder.standalone.min.js"></script> 80 });
71 81 var abort = function() {
72 <script> 82 $.each(xhrPool, function(idx, jqXHR) {
73 var refreshDropdown = function(query, callback) { 83 jqXHR.abort();
74 $.getJSON('url/suppliers', function (results) { 84 console.log("aborted");
75 if (results) { 85 });
76 var selectOptions = []; 86 };
77 for (var index = 0, length = results.length; index < length; index++) { 87
78 var item = results[index]; 88 var oldbeforeunload = window.onbeforeunload;
79 selectOptions.push({ 89 window.onbeforeunload = function() {
80 text: item.Option, 90 var r = oldbeforeunload ? oldbeforeunload() : undefined;
81 value: item.Id.toString() 91 if (r == undefined) {
82 }); 92 // only cancel requests if there is no prompt to stay on the page
83 } 93 // if there is a prompt, it will likely give the requests enough time to finish
84 94 abort();
85 var selectize = $("#Supplier")[0].selectize; 95 console.log("aborted");
86 selectize.clear();
87 selectize.clearOptions();
88 selectize.load(function (callback) {
89 callback(selectOptions);
90 });
91 } 96 }
92 }) 97 return r;
93 }; 98 }
94 99 })(jQuery);
95 $('#select-codex').selectize({ 100
96 valueField: 'title', 101
97 labelField: 'title', 102
98 searchField: 'title', 103 var queryData = [];
99 options: [], 104
100 create: false, 105 var data = [{ id: 0, text: 'TEXT' }, { id: 1, text: 'CODEX' }, { id: 2, text: 'WITNESS' }, { id: 3, text: 'COLLECTION' }, { id: 4, text: 'PERSON' }];
101 render: { 106
102 option: function(item, escape) { 107 var relations = [{ id: 0, text: 'equal' }, { id: 1, text: 'in' }];
103 console.log(item[0].data.label); 108
104 return '<div>' + 109 $(".js-example-data-array").select2({
105 '<span class="codex">' + escape(item.label) + '</span>' + 110 data: data
106 '</div>'; 111 });
112 ajax1("TEXT");
113
114 $(".js-example-data-array2").select2({
115 data: relations
116 });
117
118 // Ajax request function
119 function ajax1(q) {
120 var combinedQuery = "match (n:TEXT) return n";
121 if (q !== undefined) combinedQuery = "match (n:" + q + ") return n";
122 console.log(combinedQuery);
123 return $.ajax({
124 type: "POST",
125 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
126 accepts: "application/json",
127 dataType: "json",
128 data: {
129 "query": combinedQuery,
130 "params": {}
131 },
132 beforeSend: function (xhr) {
133 xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j'));
134 },
135 processResults: function (data, params) {
136 // parse the results into the format expected by Select2
137 // since we are using custom formatting functions we do not need to
138 // alter the remote JSON data, except to indicate that infinite
139 // scrolling can be used
140 params.page = params.page || 1;
141 console.log(data.length);
142 return {
143 pagination: {
144 more: (params.page * 30) < data.length
145 }
146 };
147 },
148 success: function (res, textStatus, jqXHR) {
149 console.log(textStatus);
150 ajaxCheck(res, textStatus);
151 },
152 error: function (jqXHR, textStatus, errorThrown) {
153 console.log(textStatus);
107 } 154 }
108 }, 155 });
109 load: function(query, callback) { 156 }
110 //if (!query.length) return callback(); 157
111 $.ajax({ 158 // Check if request was successful
112 type: "POST", 159 function ajaxCheck(a1, status){
113 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher", 160 if (status === 'error') console.log("error: bad ajax request");
114 accepts: "application/json", 161 else dataGen(a1);
115 dataType: "json", 162 }
116 data: { 163
117 "query": "match (codex:CODEX) return codex limit 25", 164 // On success, generate new data
118 "params": {} 165 function dataGen(a1){
119 }, 166 console.log("next started");
120 beforeSend: function (xhr) { 167 var d = a1.data;
121 xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j')); 168 // Consider implementing localStorage to avoid reloading every time
122 }, 169 queryData = [];
123 success: function (res, textStatus, jqXHR) { 170 for (var i= 0; i<d.length; i++) {
124 console.log("success"); 171 var j = d[i][0].data.ismi_id;
125 optionArray=[]; 172 queryData.push({ id: j, text: d[i][0].data.label });
126 res.data.forEach(function(arr) {
127 optionArray.push(arr[0].data);
128 });
129 console.log(optionArray);
130 callback(optionArray);
131 },
132 error: function (jqXHR, textStatus, errorThrown) {
133 console.log("error");
134 callback();
135 }
136 });
137
138 } 173 }
174 // Now that queryData array has been defined we will sort it by its label value and initialize the option.
175 queryData.sort(function(a,b){
176 return a.text.localeCompare(b.text);
177 });
178 console.log(queryData);
179
180 // TODO: currently the queryData is being added onto the previous query data, need to remove old.
181
182
183 $(".js-example-data-array3").select2({
184 data: queryData
185 });
186 $(".js-example-data-array3").select2('val', "Select an option");
187 }
188
189 // If first box is changed generates new queryData with updated query
190 $('body').on('change', ".js-example-data-array", function(e){
191 var query = '' + data[$(this).val()].text;
192 //for(var i=0, n=queryData.length; i<n; i++) {
193 // FIXME: Trying to get the data in the drop down menu to be erased when first menu changed. Not quite working...
194 $(".js-example-data-array3").select2('data',[]);
195 //}
196 ajax1(query);
139 }); 197 });
140 198
141 199 // TODO: ^^^^^ extend this to make a listener that will build the query dynamically
142 200
143 201
144 </script> 202 </script>
145 203
146 </body> 204 </body>