Mercurial > hg > NetworkVis

comparison query_builder/index.html @ 26:22be4ea663a7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Trying to work out having json request from neo4j display properly in drop down selectize box
author arussell
date Tue, 01 Dec 2015 02:07:13 -0500
parents f82512502b31
children ed8b4e3f2a73
comparison
equal deleted inserted replaced
25:f82512502b31 26:22be4ea663a7
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="bootstrap/bootstrap-slider/css/bootstrap-slider.css">
8 <link rel="stylesheet" href="selectize/dist/css/selectize.default.css">
9 <link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css">
10 <link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.css">
8 <link rel="stylesheet" href="css/query-builder.default.min.css"> 11 <link rel="stylesheet" href="css/query-builder.default.min.css">
9 12
10 13
11 </head> 14 </head>
12 <body style="background:none;"> 15 <body style="background:none;">
34 <div class="row" style="width: 95%"> 37 <div class="row" style="width: 95%">
35 <div class="col-md-12"> 38 <div class="col-md-12">
36 <div class="panel panel-default"> 39 <div class="panel panel-default">
37 <div class="panel-heading" id="title">Query Builder</div> 40 <div class="panel-heading" id="title">Query Builder</div>
38 41
39 <div id="builder"></div> 42 <div id="builder-widgets"></div>
40 43
41 </div> 44 </div>
42 </div> 45 </div>
43 </div> 46 </div>
44 </div> 47 </div>
45 48
46 49
47 50
48 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 51 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
49 <script type="text/javascript" src="js/d3.min.js"></script> 52 <script type="text/javascript" src="js/d3.min.js"></script>
53 <script type="text/javascript" src="moment/min/moment.min.js"></script>
50 <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 54 <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
51 <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script> 55 <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script>
56 <script type="text/javascript" src="selectize/dist/js/standalone/selectize.min.js"></script>
57 <script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script>
52 <script type="text/javascript" src="js/query-builder.standalone.min.js"></script> 58 <script type="text/javascript" src="js/query-builder.standalone.min.js"></script>
53 59
54 <script> 60 <script>
55 var rules_widgets = { 61 var rules_widgets = {
56 condition: 'OR', 62 condition: 'OR',
57 rules: [{ 63 rules: [{
58 id: 'date', 64 id: 'codex',
59 operator: 'equal', 65 operator: 'equal',
60 value: '1991/11/17' 66 values: [],
61 }, {
62 id: 'commentaries',
63 operator: 'equal',
64 value: 2
65 }, {
66 id: 'author',
67 operator: 'equal',
68 value: 'Šaraf al-Dīn Maḥmūd ibn Muḥammad ibn ʿUmar al-Jaġmīnī al-Ḫwārizmī'
69 }, {
70 condition: 'AND',
71 rules: [{
72 id: 'coord',
73 operator: 'equal',
74 value: 'B.3'
75 }]
76 }] 67 }]
77 }; 68 };
78 69
79 $('#builder').queryBuilder({ 70 // Fix for Selectize
80 71 $('#builder-widgets').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
72 if (rule.filter.plugin == 'selectize') {
73 rule.$el.find('.rule-value-container').css('min-width', '200px')
74 .find('.selectize-control').removeClass('form-control');
75 }
76 });
77
78 $('#builder-widgets').queryBuilder({
79 //plugins: ['bt-tooltip-errors'],
81 filters: [{ 80 filters: [{
82 id: 'date', 81 id: 'name',
83 label: 'Date', 82 label: 'Name',
84 type: 'date', 83 type: 'string'
85 validation: { 84 }, {
86 format: 'YYYY/MM/DD' 85 id: 'codex',
87 }, 86 label: 'Codex',
88 plugin: 'datepicker', 87 type: 'string',
89 plugin_config: { 88 plugin: 'selectize',
90 format: 'yyyy/mm/dd', 89 plugin_config: {
91 todayBtn: 'linked', 90 valueField: 'id',
92 todayHighlight: true, 91 labelField: 'name',
93 autoclose: true 92 searchField: 'name',
94 } 93 sortField: 'name',
95 }, { 94 create: true,
96 id: 'commentaries', 95 maxItems: 1,
97 label: 'Number of Commentaries', 96 plugins: ['remove_button'],
98 type: 'integer', 97 onInitialize: function() {
99 validation: { 98 var that = this;
100 min: 0, 99 function ajax1() {
101 max: 15 100 return $.ajax({
102 }, 101 type: "POST",
103 plugin: 'slider', 102 url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
104 plugin_config: { 103 accepts: "application/json",
105 min: 0, 104 dataType: "json",
106 max: 15, 105 data: {
107 value: 0 106 "query": "match (codex:CODEX) return codex limit 25",
108 }, 107 "params": {}
109 valueSetter: function(rule, value) { 108 },
110 rule.$el.find('.rule-value-container input').slider('setValue', value); 109 beforeSend: function (xhr) {
111 }, 110 xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j'));
112 valueGetter: function(rule) { 111 },
113 return rule.$el.find('.rule-value-container input').slider('getValue'); 112 success: function (res, textStatus, jqXHR) {
114 } 113 console.log("success");
115 }, { 114 return res.data;
116 id: 'author', 115 },
117 label: 'Author', 116 error: function (jqXHR, textStatus, errorThrown) {
118 alias: 'Witness', 117 console.log("error");
119 type: 'string', 118 return null;
120 plugin: 'selectize', 119 }
121 plugin_config: { 120 });
122 valueField: 'id', 121 }
123 labelField: 'name', 122 $.when(ajax1()).done(function(a1){
124 searchField: 'name', 123
125 sortField: 'name', 124 var d = a1.data;
126 create: true, 125 if (localStorage.demoData === undefined) {
127 maxItems: 1, 126 console.log(localStorage.demoData);
128 plugins: ['remove_button'], 127 localStorage.demoData = JSON.stringify(a1);
129 onInitialize: function() { 128 for (var i= 0; i<d.length; i++) {
130 var that = this; 129 //that.clearOptions(); // clear the data
131 130 //that.renderCache = {};
132 if (localStorage.demoData === undefined) { 131 console.log("addOption = " + d[i][0].data.label);
133 $.getJSON(baseurl + '/assets/demo-data.json', function(data) { 132 that.addOption(d[i][0].data.label);
134 localStorage.demoData = JSON.stringify(data); 133 }
135 data.forEach(function(item) { 134 }
136 that.addOption(item); 135 else {
137 }); 136 var obj = JSON.parse(localStorage.demoData).data;
138 }); 137 for(i=0; i<obj.length; i++) {
139 } 138 //that.clearOptions(); // clear the data
140 else { 139 //that.renderCache = {};
141 JSON.parse(localStorage.demoData).forEach(function(item) { 140 console.log("addOption = " + d[i][0].data.label);
142 that.addOption(item); 141 that.addOption(obj[i][0].data.label);
143 }); 142 //that.values.push(d[i][0].data.label);
144 } 143 }
145 } 144 }
146 }, 145 });
147 valueSetter: function(rule, value) { 146 },
148 rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); 147
149 } 148 },
150 }, { 149 valueSetter: function(rule, value) {
151 id: 'coord', 150 console.log('SETTER EXECUTED');
152 label: 'Coordinates', 151 rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
153 type: 'string', 152 },
154 validation: { 153 }],
155 format: /^[A-C]{1}.[1-6]{1}$/ 154 rules: rules_widgets
156 },
157 input: function(rule, name) {
158 var $container = rule.$el.find('.rule-value-container');
159
160 $container.on('change', '[name='+ name +'_1]', function(){
161 var h = '';
162
163 switch ($(this).val()) {
164 case 'A':
165 h = '<option value="-1">-</option> <option value="1">1</option> <option value="2">2</option>';
166 break;
167 case 'B':
168 h = '<option value="-1">-</option> <option value="3">3</option> <option value="4">4</option>';
169 break;
170 case 'C':
171 h = '<option value="-1">-</option> <option value="5">5</option> <option value="6">6</option>';
172 break;
173 }
174
175 $container.find('[name='+ name +'_2]').html(h).toggle(h!='');
176 });
177
178 return '\
179 <select name="'+ name +'_1"> \
180 <option value="-1">-</option> \
181 <option value="A">A</option> \
182 <option value="B">B</option> \
183 <option value="C">C</option> \
184 </select> \
185 <select name="'+ name +'_2" style="display:none;"></select>';
186 },
187 valueGetter: function(rule) {
188 return rule.$el.find('.rule-value-container [name$=_1]').val()
189 +'.'+ rule.$el.find('.rule-value-container [name$=_2]').val();
190 },
191 valueSetter: function(rule, value) {
192 if (rule.operator.nb_inputs > 0) {
193 var val = value.split('.');
194
195 rule.$el.find('.rule-value-container [name$=_1]').val(val[0]).trigger('change');
196 rule.$el.find('.rule-value-container [name$=_2]').val(val[1]).trigger('change');
197 }
198 }
199 }],
200
201 rules: rules_widgets
202 }); 155 });
203 156
204 $('#btn-reset').on('click', function() { 157 $('#btn-reset').on('click', function() {
205 $('#builder-widgets').queryBuilder('reset'); 158 $('#builder-widgets').queryBuilder('reset');
206 }); 159 });
214 167
215 if (!$.isEmptyObject(result)) { 168 if (!$.isEmptyObject(result)) {
216 alert(JSON.stringify(result, null, 2)); 169 alert(JSON.stringify(result, null, 2));
217 } 170 }
218 }); 171 });
219 </script> 172 </script>
220 <!-- <script type="text/javascript">
221 111 // make panels roll-up
222 112 $(".panel-heading").on("click", function() {
223 113 $(this).find(".clickhide").toggle();
224 114 $(this).next().slideToggle();
225 115 });
226 116 // provide search and graph
227 117 backendApiPrefix = "/netvis-ismi";
228 118 searchApi = {};
229 119 $(function () {
230 120 function showText(text_id) {
231 121 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id),
232 122 function (data) {
233 123 if (!data) return;
234 124 $("#title").text("Title: "+data.title);
235 125 var $list = $("#info").empty();
236 126 $list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>")
237 127 .click(function() {
238 128 search(data.author.ismi_id, true);
239 129 }));
240 130 for (var key in data.attrs) {
241 131 var val = data.attrs[key];
242 132 if (key === "link") {
243 133 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>";
244 134 }
245 135 $list.append($("<li>" + key + ": " + val + "</li>"));
246 136 };
247 137 // re-set selected
248 138 $("#graph .selected").each(function(){this.classList.remove("selected")});
249 139 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")});
250 140 // add commentaries
251 141 var $commentaries = $("#commentaries").empty();
252 142 for (var key in data.commentaries) {
253 143 var val = data.commentaries[key];
254 144 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
255 145 .click(function() { showText($(this).find("span.text_id").text());}));
256 146 }
257 147 var $commenting = $("#commenting").empty();
258 148 for (var key in data.commenting) {
259 149 var val = data.commenting[key];
260 150 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>")
261 151 .click(function() { showText($(this).find("span.text_id").text());}));
262 152 }
263 153 }, "json");
264 154 return false;
265 155 }
266 156 function search(query, keep_detail_view) {
267 157 console.log("search query=", typeof query);
268 158 if (query == null || typeof query === "object") {
269 159 query=$("#search").find("input[name=search]").val();
270 160 }
271 161 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query),
272 162 function (data) {
273 163 var t = $("table#results tbody").empty();
274 164 if (!data || data.length == 0) return;
275 165 // clear all marks
276 166 $("#graph .marked").each(function(){this.classList.remove("marked")});
277 167 // fill table of titles
278 168 data.forEach(function (row) {
279 169 var text = row.text;
280 170 var author = row.author;
281 171 $("#author").text("Titles by Author: "+author.label+" ["+author.ismi_id+"]");
282 172 var comm = row.is_commentary || row.has_commentaries;
283 173 var $row = $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t)
284 174 .click(function() { showText($(this).find("td.text_id").text());});
285 175 if (comm) {
286 176 $row.addClass("marked");
287 177 }
288 178 // set mark
289 179 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")});
290 180 });
291 181 if (!keep_detail_view) {
292 182 // show first title
293 183 showText(data[0].text.ismi_id);
294 184 }
295 185 }, "json");
296 186 return false;
297 187 }
298 188 // export API
299 189 searchApi.showText = showText;
300 190 searchApi.search = search;
301 191 // start search
302 192 $("#search").submit(search);
303 193 search();
304 194 });
305 195 </script>
306 -->
307 173
308 <script type="text/javascript"> 174 <script type="text/javascript">
309 var width = 1400, height = 1400; 175 var width = 1400, height = 1400;
310 176
311 var force = d3.layout.force() 177 var force = d3.layout.force()