Mercurial > hg > NetworkVis

view query_builder/index.html @ 27:ed8b4e3f2a73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
ISMI.HTML -- Better implementation of query boxes using Select2 on ismi.html, however when the first drop down is changed the ccorresponding one doesn't delete old data. select2('data', null) and similar methods of deleting has been unsuccessful so far
author arussell
date Wed, 02 Dec 2015 00:53:02 -0500
parents 22be4ea663a7
children
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="selectize/dist/css/selectize.default.css">
	<link rel="stylesheet" href="bootstrap-select/dist/css/bootstrap-select.min.css">
	<link rel="stylesheet" href="selectize/dist/css/selectize.bootstrap3.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-widgets"></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="moment/min/moment.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="selectize/dist/js/standalone/selectize.min.js"></script>
	<script type="text/javascript" src="bootstrap-select/dist/js/bootstrap-select.min.js"></script>
	<script type="text/javascript" src="js/query-builder.standalone.min.js"></script>

	<script>
		var rules_widgets = {
  			condition: 'OR',
  			rules: [{
    			id: 'codex',
    			operator: 'equal',
				values: [],
  			}]
		};

		// Fix for Selectize
		$('#builder-widgets').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
			if (rule.filter.plugin == 'selectize') {
				rule.$el.find('.rule-value-container').css('min-width', '200px')
						.find('.selectize-control').removeClass('form-control');
			}
		});

  		$('#builder-widgets').queryBuilder({
			//plugins: ['bt-tooltip-errors'],
    		filters: [{
					id: 'name',
					label: 'Name',
					type: 'string'
				}, {
				id: 'codex',
				label: 'Codex',
				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;
						function ajax1() {
							return $.ajax({
								type: "POST",
								url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
								accepts: "application/json",
								dataType: "json",
								data: {
									"query": "match (codex:CODEX) return codex limit 25",
									"params": {}
								},
								beforeSend: function (xhr) {
									xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j' + ":" + 'neo5j'));
								},
								success: function (res, textStatus, jqXHR) {
									console.log("success");
									console.log(res.data);
									return res.data;
								},
								error: function (jqXHR, textStatus, errorThrown) {
									console.log("error");
									return null;
								}
							});
						}
						$.when(ajax1()).done(function(a1){

							var d = a1.data;
							if (localStorage.demoData === undefined) {
								console.log(localStorage.demoData);
								localStorage.demoData = JSON.stringify(a1);
								for (var i= 0; i<d.length; i++) {
									//that.clearOptions();        // clear the data
									//that.renderCache = {};
									console.log("addOption = " + d[i][0].data.label);
									that.addOption(d[i][0].data.label);
								}
							}
							else {
								var obj = JSON.parse(localStorage.demoData).data;
								for(i=0; i<obj.length; i++) {
									//that.clearOptions();        // clear the data
									//that.renderCache = {};
									console.log("addOption = " + d[i][0].data.label);
									that.addOption(obj[i][0].data.label);
									//that.values.push(d[i][0].data.label);
								}
							}
						});
					},

				},
				valueSetter: function(rule, value) {
					console.log('SETTER EXECUTED');
					rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
				},
			}],
			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">
	    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>