Mercurial > hg > NetworkVis
diff query_builder/index.html @ 25:f82512502b31
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/query_builder/index.html Mon Nov 23 02:03:51 2015 -0500 @@ -0,0 +1,341 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> + <title>Query Builder</title> + <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> + <link rel="stylesheet" href="bootstrap/bootstrap-slider/css/bootstrap-slider.css"> + <link rel="stylesheet" href="css/query-builder.default.min.css"> + + +</head> +<body style="background:none;"> +<div role="navigation" class="navbar navbar-default navbar-static-top"> + <div class="container"> + <div class="row"> + <div class="col-sm-6 col-md-6"> + <ul class="nav navbar-nav"> + </ul> + </div> + <div class="navbar-header col-sm-6 col-md-6"> + <div class="logo-well"> + <a href="//neo4j.com/developer-resources"> + <img src="//neo4j-contrib.github.io/developer-resources/language-guides/assets/img/logo-white.svg" alt="Neo4j World's Leading Graph Database" id="logo"> + </a> + </div> + <div class="navbar-brand"> + <div class="brand">ISMI Query Builder</div> + </div> + </div> + </div> + </div> + </div> + <div class="container"> + <div class="row" style="width: 95%"> + <div class="col-md-12"> + <div class="panel panel-default"> + <div class="panel-heading" id="title">Query Builder</div> + + <div id="builder"></div> + + </div> + </div> + </div> + </div> + + + + <script type="text/javascript" src="js/jquery-1.11.3.js"></script> + <script type="text/javascript" src="js/d3.min.js"></script> + <script type="text/javascript" src="bootstrap/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> + <script type="text/javascript" src="bootstrap/bootstrap-slider/js/bootstrap-slider.js"></script> + <script type="text/javascript" src="js/query-builder.standalone.min.js"></script> + + <script> + var rules_widgets = { + condition: 'OR', + rules: [{ + id: 'date', + operator: 'equal', + value: '1991/11/17' + }, { + id: 'commentaries', + operator: 'equal', + value: 2 + }, { + id: 'author', + operator: 'equal', + value: 'Šaraf al-Dīn Maḥmūd ibn Muḥammad ibn ʿUmar al-Jaġmīnī al-Ḫwārizmī' + }, { + condition: 'AND', + rules: [{ + id: 'coord', + operator: 'equal', + value: 'B.3' + }] + }] + }; + + $('#builder').queryBuilder({ + + filters: [{ + id: 'date', + label: 'Date', + type: 'date', + validation: { + format: 'YYYY/MM/DD' + }, + plugin: 'datepicker', + plugin_config: { + format: 'yyyy/mm/dd', + todayBtn: 'linked', + todayHighlight: true, + autoclose: true + } + }, { + id: 'commentaries', + label: 'Number of Commentaries', + type: 'integer', + validation: { + min: 0, + max: 15 + }, + plugin: 'slider', + plugin_config: { + min: 0, + max: 15, + value: 0 + }, + valueSetter: function(rule, value) { + rule.$el.find('.rule-value-container input').slider('setValue', value); + }, + valueGetter: function(rule) { + return rule.$el.find('.rule-value-container input').slider('getValue'); + } + }, { + id: 'author', + label: 'Author', + alias: 'Witness', + type: 'string', + plugin: 'selectize', + plugin_config: { + valueField: 'id', + labelField: 'name', + searchField: 'name', + sortField: 'name', + create: true, + maxItems: 1, + plugins: ['remove_button'], + onInitialize: function() { + var that = this; + + if (localStorage.demoData === undefined) { + $.getJSON(baseurl + '/assets/demo-data.json', function(data) { + localStorage.demoData = JSON.stringify(data); + data.forEach(function(item) { + that.addOption(item); + }); + }); + } + else { + JSON.parse(localStorage.demoData).forEach(function(item) { + that.addOption(item); + }); + } + } + }, + valueSetter: function(rule, value) { + rule.$el.find('.rule-value-container input')[0].selectize.setValue(value); + } + }, { + id: 'coord', + label: 'Coordinates', + type: 'string', + validation: { + format: /^[A-C]{1}.[1-6]{1}$/ + }, + input: function(rule, name) { + var $container = rule.$el.find('.rule-value-container'); + + $container.on('change', '[name='+ name +'_1]', function(){ + var h = ''; + + switch ($(this).val()) { + case 'A': + h = '<option value="-1">-</option> <option value="1">1</option> <option value="2">2</option>'; + break; + case 'B': + h = '<option value="-1">-</option> <option value="3">3</option> <option value="4">4</option>'; + break; + case 'C': + h = '<option value="-1">-</option> <option value="5">5</option> <option value="6">6</option>'; + break; + } + + $container.find('[name='+ name +'_2]').html(h).toggle(h!=''); + }); + + return '\ + <select name="'+ name +'_1"> \ + <option value="-1">-</option> \ + <option value="A">A</option> \ + <option value="B">B</option> \ + <option value="C">C</option> \ + </select> \ + <select name="'+ name +'_2" style="display:none;"></select>'; + }, + valueGetter: function(rule) { + return rule.$el.find('.rule-value-container [name$=_1]').val() + +'.'+ rule.$el.find('.rule-value-container [name$=_2]').val(); + }, + valueSetter: function(rule, value) { + if (rule.operator.nb_inputs > 0) { + var val = value.split('.'); + + rule.$el.find('.rule-value-container [name$=_1]').val(val[0]).trigger('change'); + rule.$el.find('.rule-value-container [name$=_2]').val(val[1]).trigger('change'); + } + } + }], + + rules: rules_widgets + }); + + $('#btn-reset').on('click', function() { + $('#builder-widgets').queryBuilder('reset'); + }); + + $('#btn-set').on('click', function() { + $('#builder-widgets').queryBuilder('setRules', rules_widgets); + }); + + $('#btn-get').on('click', function() { + var result = $('#builder-widgets').queryBuilder('getRules'); + + if (!$.isEmptyObject(result)) { + alert(JSON.stringify(result, null, 2)); + } + }); + </script> +<!-- <script type="text/javascript"> +111 // make panels roll-up +112 $(".panel-heading").on("click", function() { +113 $(this).find(".clickhide").toggle(); +114 $(this).next().slideToggle(); +115 }); +116 // provide search and graph +117 backendApiPrefix = "/netvis-ismi"; +118 searchApi = {}; +119 $(function () { +120 function showText(text_id) { +121 $.get(backendApiPrefix+"/textandcommentaries/" + encodeURIComponent(text_id), +122 function (data) { +123 if (!data) return; +124 $("#title").text("Title: "+data.title); +125 var $list = $("#info").empty(); +126 $list.append($("<li>Author: " + data.author.label + " [" + data.author.ismi_id + "]</li>") +127 .click(function() { +128 search(data.author.ismi_id, true); +129 })); +130 for (var key in data.attrs) { +131 var val = data.attrs[key]; +132 if (key === "link") { +133 val = "<a href=\"" + val + "\" target=\"_blank\">" + val + "</a>"; +134 } +135 $list.append($("<li>" + key + ": " + val + "</li>")); +136 }; +137 // re-set selected +138 $("#graph .selected").each(function(){this.classList.remove("selected")}); +139 $("#graph .ismi-"+data.attrs.ismi_id).each(function(){this.classList.add("selected")}); +140 // add commentaries +141 var $commentaries = $("#commentaries").empty(); +142 for (var key in data.commentaries) { +143 var val = data.commentaries[key]; +144 $commentaries.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>") +145 .click(function() { showText($(this).find("span.text_id").text());})); +146 } +147 var $commenting = $("#commenting").empty(); +148 for (var key in data.commenting) { +149 var val = data.commenting[key]; +150 $commenting.append($("<li>" + val.title + " [<span class=\"text_id\">" + key + "</span>] by " + val.author + "</li>") +151 .click(function() { showText($(this).find("span.text_id").text());})); +152 } +153 }, "json"); +154 return false; +155 } +156 function search(query, keep_detail_view) { +157 console.log("search query=", typeof query); +158 if (query == null || typeof query === "object") { +159 query=$("#search").find("input[name=search]").val(); +160 } +161 $.get(backendApiPrefix+"/search?q=" + encodeURIComponent(query), +162 function (data) { +163 var t = $("table#results tbody").empty(); +164 if (!data || data.length == 0) return; +165 // clear all marks +166 $("#graph .marked").each(function(){this.classList.remove("marked")}); +167 // fill table of titles +168 data.forEach(function (row) { +169 var text = row.text; +170 var author = row.author; +171 $("#author").text("Titles by Author: "+author.label+" ["+author.ismi_id+"]"); +172 var comm = row.is_commentary || row.has_commentaries; +173 var $row = $("<tr><td>" + text.label + "</td><td>" + text.full_title + "</td><td class='text_id'>" + text.ismi_id + "</td></tr>").appendTo(t) +174 .click(function() { showText($(this).find("td.text_id").text());}); +175 if (comm) { +176 $row.addClass("marked"); +177 } +178 // set mark +179 $("#graph .ismi-"+text.ismi_id).each(function(){this.classList.add("marked")}); +180 }); +181 if (!keep_detail_view) { +182 // show first title +183 showText(data[0].text.ismi_id); +184 } +185 }, "json"); +186 return false; +187 } +188 // export API +189 searchApi.showText = showText; +190 searchApi.search = search; +191 // start search +192 $("#search").submit(search); +193 search(); +194 }); +195 </script> +--> + + <script type="text/javascript"> + var width = 1400, height = 1400; + + var force = d3.layout.force() + .charge(-100) // -200 + .linkDistance(30) // 30 + .size([width, height]); + + var svg = d3.select("#graph").append("svg") + .attr("width", "1400px").attr("height", "1400px") + .attr("pointer-events", "all"); + + // arrow head marker + var defs = svg.append("defs").append("marker") + .attr({ + "id":"arrow", + "markerUnits": "strokeWidth", + "viewBox":"0 -5 10 10", + "refX": 20, // 5 + "refY":0, + "markerWidth":4, + "markerHeight":4, + "orient":"auto" + }) + .append("path") + .attr("d", "M0,-5 L10,0 L0,5") + .attr("class","arrowHead"); + + + + + </script> +</body> +</html>