Mercurial > hg > NetworkVis

comparison query_builder/index.html @ 25:f82512502b31

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial commit for query builder, still need to tailor for ISMI purposes
author alistair
date Mon, 23 Nov 2015 02:03:51 -0500
parents
children 22be4ea663a7
comparison
equal deleted inserted replaced
24:eb0be386736f 25:f82512502b31
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="bootstrap/bootstrap-slider/css/bootstrap-slider.css">
8 <link rel="stylesheet" href="css/query-builder.default.min.css">
9
10
11 </head>
12 <body style="background:none;">
13 <div role="navigation" class="navbar navbar-default navbar-static-top">
14 <div class="container">
15 <div class="row">
16 <div class="col-sm-6 col-md-6">
17 <ul class="nav navbar-nav">
18 </ul>
19 </div>
20 <div class="navbar-header col-sm-6 col-md-6">
21 <div class="logo-well">
22 <a href="//neo4j.com/developer-resources">
23 <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo">
24 </a>
25 </div>
26 <div class="navbar-brand">
27 <div class="brand">ISMI Query Builder</div>
28 </div>
29 </div>
30 </div>
31 </div>
32 </div>
33 <div class="container">
34 <div class="row" style="width: 95%">
35 <div class="col-md-12">
36 <div class="panel panel-default">
37 <div class="panel-heading" id="title">Query Builder</div>
38
39 <div id="builder"></div>
40
41 </div>
42 </div>
43 </div>
44 </div>
45
46
47
48 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
49 <script type="text/javascript" src="js/d3.min.js"></script>
50 <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>
52 <script type="text/javascript" src="js/query-builder.standalone.min.js"></script>
53
54 <script>
55 var rules_widgets = {
56 condition: 'OR',
57 rules: [{
58 id: 'date',
59 operator: 'equal',
60 value: '1991/11/17'
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 }]
77 };
78
79 $('#builder').queryBuilder({
80
81 filters: [{
82 id: 'date',
83 label: 'Date',
84 type: 'date',
85 validation: {
86 format: 'YYYY/MM/DD'
87 },
88 plugin: 'datepicker',
89 plugin_config: {
90 format: 'yyyy/mm/dd',
91 todayBtn: 'linked',
92 todayHighlight: true,
93 autoclose: true
94 }
95 }, {
96 id: 'commentaries',
97 label: 'Number of Commentaries',
98 type: 'integer',
99 validation: {
100 min: 0,
101 max: 15
102 },
103 plugin: 'slider',
104 plugin_config: {
105 min: 0,
106 max: 15,
107 value: 0
108 },
109 valueSetter: function(rule, value) {
110 rule.$el.find('.rule-value-container input').slider('setValue', value);
111 },
112 valueGetter: function(rule) {
113 return rule.$el.find('.rule-value-container input').slider('getValue');
114 }
115 }, {
116 id: 'author',
117 label: 'Author',
118 alias: 'Witness',
119 type: 'string',
120 plugin: 'selectize',
121 plugin_config: {
122 valueField: 'id',
123 labelField: 'name',
124 searchField: 'name',
125 sortField: 'name',
126 create: true,
127 maxItems: 1,
128 plugins: ['remove_button'],
129 onInitialize: function() {
130 var that = this;
131
132 if (localStorage.demoData === undefined) {
133 $.getJSON(baseurl + '/assets/demo-data.json', function(data) {
134 localStorage.demoData = JSON.stringify(data);
135 data.forEach(function(item) {
136 that.addOption(item);
137 });
138 });
139 }
140 else {
141 JSON.parse(localStorage.demoData).forEach(function(item) {
142 that.addOption(item);
143 });
144 }
145 }
146 },
147 valueSetter: function(rule, value) {
148 rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
149 }
150 }, {
151 id: 'coord',
152 label: 'Coordinates',
153 type: 'string',
154 validation: {
155 format: /^[A-C]{1}.[1-6]{1}$/
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 });
203
204 $('#btn-reset').on('click', function() {
205 $('#builder-widgets').queryBuilder('reset');
206 });
207
208 $('#btn-set').on('click', function() {
209 $('#builder-widgets').queryBuilder('setRules', rules_widgets);
210 });
211
212 $('#btn-get').on('click', function() {
213 var result = $('#builder-widgets').queryBuilder('getRules');
214
215 if (!$.isEmptyObject(result)) {
216 alert(JSON.stringify(result, null, 2));
217 }
218 });
219 </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
308 <script type="text/javascript">
309 var width = 1400, height = 1400;
310
311 var force = d3.layout.force()
312 .charge(-100) // -200
313 .linkDistance(30) // 30
314 .size([width, height]);
315
316 var svg = d3.select("#graph").append("svg")
317 .attr("width", "1400px").attr("height", "1400px")
318 .attr("pointer-events", "all");
319
320 // arrow head marker
321 var defs = svg.append("defs").append("marker")
322 .attr({
323 "id":"arrow",
324 "markerUnits": "strokeWidth",
325 "viewBox":"0 -5 10 10",
326 "refX": 20, // 5
327 "refY":0,
328 "markerWidth":4,
329 "markerHeight":4,
330 "orient":"auto"
331 })
332 .append("path")
333 .attr("d", "M0,-5 L10,0 L0,5")
334 .attr("class","arrowHead");
335
336
337
338
339 </script>
340 </body>
341 </html>