Mercurial > hg > NetworkVis

view query_builder/index.html @ 35:9f0d4fd3a412

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cleanup and layout tweaks.
author casties
date Thu, 04 Feb 2016 15:23:15 +0100
parents ed8b4e3f2a73
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>