Mercurial > hg > NetworkVis
comparison query_builder/querybuild.html @ 28:5384b71df52a
querybuild.html added, beginning prototype.
author | arussell |
---|---|
date | Thu, 10 Dec 2015 07:26:40 -0500 |
parents | |
children | acc60a20582c |
comparison
equal
deleted
inserted
replaced
27:ed8b4e3f2a73 | 28:5384b71df52a |
---|---|
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> | |
5 <title>Query Builder</title> | |
6 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> | |
7 <link rel="stylesheet" href="select2-4.0.1/dist/css/select2.min.css"> | |
8 | |
9 <script type="text/javascript" src="js/d3.min.js"></script> | |
10 <script type="text/javascript" src="select2-4.0.1/vendor/jquery-2.1.0.js"></script> | |
11 <script type="text/javascript" src="select2-4.0.1/dist/js/select2.full.min.js"></script> | |
12 | |
13 | |
14 </head> | |
15 <body style="background:none;"> | |
16 <div role="navigation" class="navbar navbar-default navbar-static-top"> | |
17 <div class="container"> | |
18 <div class="row"> | |
19 <div class="col-sm-6 col-md-6"> | |
20 <ul class="nav navbar-nav"> | |
21 </ul> | |
22 </div> | |
23 <div class="navbar-header col-sm-6 col-md-6" style="height: auto;"> | |
24 <div class="col-md-6"> | |
25 <div class="navbar-brand"> | |
26 <div class="brand">ISMI Query Builder</div> | |
27 </div> | |
28 </div> | |
29 <div class="col-md-offset-6"> | |
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> | |
35 </div> | |
36 </div> | |
37 </div> | |
38 </div> | |
39 </div> | |
40 <div class="container"> | |
41 <div class="row" style="width: 95%"> | |
42 <div class="col-lg"> | |
43 <div class="panel panel-default"> | |
44 <div class="panel-heading" id="title">Query Builder</div> | |
45 | |
46 <section> | |
47 <div class="s2-example"> | |
48 <div id="filters"> | |
49 <div class="row" id="startrow" style="margin-top: 15px"> | |
50 <div class="col-sm-4 col-md-4" id="select-col1"> | |
51 <select class="selected-object form-control"> | |
52 <option selected>Selected object is: </option> | |
53 </select> | |
54 </div> | |
55 <div class="col-sm-4 col-md-4" id="select-col2"> | |
56 <select class="select-object1 form-control"> | |
57 <option selected>TEXT</option> | |
58 <option>WITNESS</option> | |
59 <option>PERSON</option> | |
60 </select> | |
61 </div> | |
62 </div> | |
63 <div class="row" id="row1" style="margin-top: 15px"> | |
64 <div class="col-sm-4 col-md-4" id="1filter-col1"> | |
65 <select class="filter-box1 form-control"> | |
66 <option value="" disabled selected>Choose filter...</option> | |
67 </select> | |
68 </div> | |
69 </div> | |
70 </div> | |
71 <div align="left" style="margin-top: 30px"><button id="minus_filter_button" class="btn btn-warning btn-md" type="button"> - </button> | |
72 <button id="plus_filter_button" class="btn btn-warning btn-md" type="button"> + </button> | |
73 </div> | |
74 </div> | |
75 | |
76 | |
77 <div class="container-fluid" style="margin-top: 15px"> | |
78 <form role="form"> | |
79 <div class="form-group"> | |
80 <label for="results-container">Results list</label> | |
81 <select multiple class="form-control" id="results-container" style="min-height: 300px;"> | |
82 </select> | |
83 </div> | |
84 </form> | |
85 | |
86 </div> | |
87 | |
88 <!-- <pre data-fill-from=".js-code-data-array"></pre> --> | |
89 </section> | |
90 | |
91 </div> | |
92 </div> | |
93 </div> | |
94 </div> | |
95 | |
96 | |
97 | |
98 | |
99 | |
100 | |
101 <script type="text/javascript" class="js-code-data-array"> | |
102 //var queryData = []; | |
103 | |
104 // Defining initial variables and helper functions | |
105 var sourceType = "TEXT"; | |
106 var targets = []; | |
107 var targetTypes = []; | |
108 var listTolerance = 100; | |
109 var numFilters = 1; | |
110 var filters = [ | |
111 { id: 0, text: 'has relation' }, | |
112 { id: 1, text: 'attribute contains' } | |
113 ]; | |
114 $(".filter-box"+numFilters).select2({ | |
115 // Initialize first filter box | |
116 data: filters, | |
117 minimumResultsForSearch: Infinity | |
118 }); | |
119 function filter_html(n) { | |
120 return '<div class="row" id="row'+n+'" style="margin-top: 15px">' + | |
121 '<div class="col-sm-4 col-md-4" id="'+n+'filter-col1">' + | |
122 '<select class="filter-box'+n+' form-control">' + | |
123 '<option value="" disabled selected>Choose filter...</option>' + | |
124 '</select>' + | |
125 '</div>' + | |
126 '</div>'; | |
127 } | |
128 function constraint_html(classn) { | |
129 return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' + | |
130 '<select class="constraint-box'+classn+' form-control" >' + | |
131 '</select>' + | |
132 '</div>'; | |
133 } | |
134 function submit_html(classn) { | |
135 return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' + | |
136 '<div class="form-group'+classn+'">' + | |
137 '<textarea class="form-control" rows="1" id="attribute-text-search'+classn+'">' + | |
138 '</textarea>' + | |
139 '</div>' + | |
140 '</div>'; | |
141 } | |
142 function select_html(selection) { | |
143 return '<div class="row" id="startrow" style="margin-top: 15px">' + | |
144 '<div class="col-sm-4 col-md-4" id="select-col1"> ' + | |
145 '<select class="selected-object form-control"> ' + | |
146 '<option selected>Selected object is: </option> ' + | |
147 '</select> ' + | |
148 '</div> ' + | |
149 '<div class="col-sm-4 col-md-4" id="select-col2"> ' + | |
150 '<select class="select-object1 form-control"> ' + | |
151 '<option selected>TEXT</option> ' + | |
152 '<option>WITNESS</option> ' + | |
153 '<option>PERSON</option> ' + | |
154 '</select> ' + | |
155 '</div> ' + | |
156 '</div>'; | |
157 } | |
158 | |
159 | |
160 | |
161 | |
162 // Button filters | |
163 $("#plus_filter_button").click(function() { | |
164 console.log("add filter"); | |
165 numFilters++; | |
166 $("#filters").append(filter_html(numFilters)); | |
167 $(".filter-box"+numFilters).select2({ | |
168 data: filters, | |
169 minimumResultsForSearch: Infinity | |
170 }); | |
171 }); | |
172 $("#minus_filter_button").click(function() { | |
173 console.log("minus filter"); | |
174 $("#row"+numFilters).remove(); | |
175 numFilters--; | |
176 }); | |
177 $("#results-container").dblclick(function() { | |
178 if ($("#results-container option:selected").length == 1) { | |
179 var selection = $(this).text(); | |
180 console.log("add filter"); | |
181 numFilters++; | |
182 $("#filters").append(select_html(selection, numFilters)); | |
183 // Generate inner relation list | |
184 genRelations(sourceType, ".constraint-box"+classnum); | |
185 | |
186 } | |
187 console.log("add filter"); | |
188 }); | |
189 | |
190 | |
191 | |
192 | |
193 // For use in the onchange events below | |
194 function genRelations(sourceNodeType, constraintBox) { | |
195 var query = "match (source:"+sourceNodeType+")-[rel]-target return distinct rel.type"; | |
196 ajax1(query, constraintBox); | |
197 } | |
198 function genResults(sourceNodeType, selected, constraintBox) { | |
199 var query = "match (source:"+sourceNodeType+")-["+selected+"]-(target) return target.label, target.type"; | |
200 ajax1(query, constraintBox); | |
201 } | |
202 // Can be used to return a list of all available attributes | |
203 // TODO: Not implemented | |
204 function genAttributes(sourceNodeType, constraintBox) { | |
205 var query = "match (n:"+sourceNodeType+") with keys(n) as collection unwind collection as attributes return distinct attributes"; | |
206 ajax1(query, constraintBox); | |
207 } | |
208 | |
209 // Change Events | |
210 $('body').on('change', function(event){ | |
211 var classname = (event.target.className).substr(0, (event.target.className).indexOf(" ")); | |
212 var classnum = (event.target.className.match(/\d+\.\d+|\d+\b|\d+(?=\w)/g) || [] ) | |
213 .map(function (v) {return +v;}).shift(); | |
214 var selectedOption = $('.'+classname+' option:selected').text(); | |
215 | |
216 // Change is on the filter box | |
217 if (classname.indexOf("filter-box") > -1) { | |
218 if (selectedOption === "has relation") { | |
219 // Remove any other boxes in the row | |
220 $("#"+classnum+"filter-col2").remove(); | |
221 $("#row"+classnum).append(constraint_html(classnum)); | |
222 // Generate inner relation list | |
223 genRelations(sourceType, ".constraint-box"+classnum); | |
224 } | |
225 if (selectedOption === "attribute contains") { | |
226 $("#"+classnum+"filter-col2").remove(); | |
227 $("#row"+classnum).append(submit_html(classnum)); | |
228 //genAttributes(sourceType, ".constraint-box"+classnum); | |
229 } | |
230 if (selectedOption === "return") { | |
231 $("#"+classnum+"filter-col2").remove(); | |
232 $("#row"+classnum).append(constraint_html(classnum)); | |
233 genAttributes(targetTypes, ".constraint-box"+classnum); | |
234 } | |
235 } | |
236 | |
237 // Change is on the relationship constraint box | |
238 if (classname.indexOf("constraint-box") > -1) { | |
239 //$().remove(); | |
240 genResults(sourceType, selectedOption, "results-container"); | |
241 } | |
242 | |
243 // TODO: if the select object is changed update the sourceType var that we are looking at | |
244 // Change is on subject scope | |
245 if (classname.indexOf("select-object") > -1) { | |
246 | |
247 //ajax1(query, "results-container") | |
248 } | |
249 }); | |
250 | |
251 | |
252 | |
253 | |
254 // Ajax request function | |
255 function ajax1(q, resBox) { | |
256 console.log(q); | |
257 $.ajaxSetup({ | |
258 headers: { | |
259 "Authorization": 'Basic ' + window.btoa("neo4j"+":"+"neo5j") | |
260 } | |
261 }); | |
262 return $.ajax({ | |
263 type: "POST", | |
264 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher", | |
265 accepts: "application/json", | |
266 dataType: "json", | |
267 data: { | |
268 "query": q, | |
269 "params": {} | |
270 }, | |
271 beforeSend: function (xhr) { | |
272 xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j'+":"+'neo5j')); | |
273 }, | |
274 processResults: function (data, params) { | |
275 // parse the results into the format expected by Select2 | |
276 // since we are using custom formatting functions we do not need to | |
277 // alter the remote JSON data, except to indicate that infinite | |
278 // scrolling can be used | |
279 params.page = params.page || 1; | |
280 return { | |
281 pagination: { | |
282 more: (params.page * 30) < data.length | |
283 } | |
284 }; | |
285 }, | |
286 success: function (res, textStatus, jqXHR) { | |
287 ajaxCheck(res, resBox, textStatus); | |
288 console.log(textStatus); | |
289 }, | |
290 error: function (jqXHR, textStatus, errorThrown) { | |
291 console.log(textStatus); | |
292 } | |
293 }); | |
294 } | |
295 // Check if request was successful | |
296 function ajaxCheck(a1, resBox, status){ | |
297 if (status === 'error') console.log("error: bad ajax request"); | |
298 //else dataGen(a1); | |
299 dataGen(a1.data, resBox); | |
300 } | |
301 // On success, generate new data | |
302 // TODO: might want to just always return nodes and then deal with the queryData different for each type of return | |
303 function dataGen(dataArr, resBox) { | |
304 console.log(dataArr); | |
305 var d = dataArr; | |
306 targets = []; | |
307 | |
308 // Consider implementing localStorage to avoid reloading every time | |
309 var queryData = []; | |
310 for (var i= 0; i<d.length; i++) { | |
311 var j = d[i]; | |
312 queryData.push({ id: j, text: j[0] }); | |
313 targets.push(j[1]); | |
314 } | |
315 // Now that queryData array has been defined we will sort it by its label value and initialize the option. | |
316 queryData.sort(function(a,b){ | |
317 var c = a.text.replace(/<|>/g, ''); | |
318 var d = b.text.replace(/<|>/g, ''); | |
319 return c.localeCompare(d); | |
320 }); | |
321 console.log(queryData[0].text); | |
322 | |
323 // Change the displayed results | |
324 if (resBox === "results-container") { | |
325 process_display_results(queryData); | |
326 } | |
327 else { | |
328 $(resBox).select2({ | |
329 data: queryData | |
330 }); | |
331 } | |
332 } | |
333 function process_display_results(queryData) { | |
334 var weights = []; | |
335 var resultLength = queryData.length; | |
336 targetTypes = []; | |
337 | |
338 $('#results-container') | |
339 .find('option') | |
340 .remove() | |
341 .end() | |
342 ; | |
343 if (resultLength < listTolerance) { | |
344 for (var i = 0; i < resultLength; i++) { | |
345 // TODO: put this jQuery call into its own function to be called if the else statement occurs | |
346 // TODO: but the user actually does want to see the entire huge list. | |
347 $('#results-container') | |
348 .append($("<option></option>") | |
349 .attr("value", i) | |
350 .text(queryData[i].text)); | |
351 } | |
352 } | |
353 else { | |
354 for (var i = 0; i < targets.length; i++) { | |
355 if (targetTypes.indexOf(targets[i]) == -1) { | |
356 targetTypes.push(targets[i]); | |
357 weights.push(1); | |
358 } | |
359 else { | |
360 weights[targetTypes.indexOf(targets[i])] += 1; | |
361 } | |
362 } | |
363 for (var i = 0; i < targetTypes.length; i++) { | |
364 $('#results-container') | |
365 .append($("<option></option>") | |
366 .text(targetTypes[i] + " [ " + weights[i] + " ]")); | |
367 } | |
368 } | |
369 } | |
370 | |
371 </script> | |
372 | |
373 </body> | |
374 </html> |