Mercurial > hg > NetworkVis

view query_builder/index.html @ 39:88c5232f9d48 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix click on author name.
author casties
date Thu, 04 Feb 2016 18:56:48 +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>