Mercurial > hg > NetworkVis

view 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
line wrap: on
line source

<!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>