Mercurial > hg > NetworkVis

view 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
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");
									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>