NetworkVis: query_builder/querybuild.html comparison

comparison query_builder/querybuild.html @ 32:acc60a20582c

Temporary Changes for querybuilder. Selecting attribute and having results list filter not fully working yet. Need 'ALL' option in attributes.

author	arussell
date	Sat, 19 Dec 2015 09:15:43 -0500
parents	5384b71df52a
children	4bbb832c53ac

comparison

equal deleted inserted replaced

-:5384b71df52a
+:acc60a20582c
 <title>Query Builder</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="select2-4.0.1/dist/css/select2.min.css">
 <script type="text/javascript" src="js/d3.min.js"></script>
+<script type="text/javascript" src="js/underscore-min.js"></script>
 <script type="text/javascript" src="select2-4.0.1/vendor/jquery-2.1.0.js"></script>
 <script type="text/javascript" src="select2-4.0.1/dist/js/select2.full.min.js"></script>
 </head>
 <body style="background:none;">
 <div role="navigation" class="navbar navbar-default navbar-static-top">
 <div class="s2-example">
 <div id="filters">
 <div class="row" id="startrow" style="margin-top: 15px">
 <div class="col-sm-4 col-md-4" id="select-col1">
 <select class="selected-object form-control">
-<option selected>Selected object is: </option>
+<option selected>Object type :  </option>
 </select>
 </div>
 <div class="col-sm-4 col-md-4" id="select-col2">
 <select class="select-object1 form-control">
 <option selected>TEXT</option>
 <option>WITNESS</option>
 <option>PERSON</option>
+<option>CODEX</option>
+<option>PLACE</option>
+<option>REPOSITORY</option>
+<option>COLLECTION</option>
 </select>
 </div>
 </div>
 <div class="row" id="row1" style="margin-top: 15px">
 <div class="col-sm-4 col-md-4" id="1filter-col1">
 // Defining initial variables and helper functions
 var sourceType = "TEXT";
 var targets = [];
 var targetTypes = [];
-var listTolerance = 100;
+var targetObj = []; // The current objects on the display box
 var numFilters = 1;
 var filters = [
 { id: 0, text: 'has relation' },
-{ id: 1, text: 'attribute contains' }
+{ id: 1, text: 'attribute' }
 ];
 $(".filter-box"+numFilters).select2({
 // Initialize first filter box
 data: filters,
 minimumResultsForSearch: Infinity
 });
+var listTolerance = 100;
+//$("")
 function filter_html(n) {
 return '<div class="row" id="row'+n+'" style="margin-top: 15px">' +
 '<div class="col-sm-4 col-md-4" id="'+n+'filter-col1">' +
 '<select class="filter-box'+n+' form-control">' +
 '<option value="" disabled selected>Choose filter...</option>' +
 '</div>' +
 '</div>';
 }
 function constraint_html(classn) {
 return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' +
-'<select class="constraint-box'+classn+' form-control" >' +
+'<select class="rel-constraint-box'+classn+' form-control" >' +
 '</select>' +
 '</div>';
 }
+function attr_constraint_html(classn) {
+return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' +
+'<select class="attr-constraint-box'+classn+' form-control" >' +
+'</select>' +
+'</div>';
+}
 function submit_html(classn) {
-return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' +
+return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col3">' +
 '<div class="form-group'+classn+'">' +
-'<textarea class="form-control" rows="1" id="attribute-text-search'+classn+'">' +
+'<form onsubmit="return false;"> ' +
-'</textarea>' +
+'<input type="text" name="attr-field" class="form-control" id="attr-input'+classn+'">' +
+'</input>' +
+'</form>' +
 '</div>' +
 '</div>';
 }
-function select_html(selection) {
+function select_html(selection, n) {
-return '<div class="row" id="startrow" style="margin-top: 15px">' +
+return '<div class="row" id="row'+n+'" style="margin-top: 15px">' +
 '<div class="col-sm-4 col-md-4" id="select-col1"> ' +
 '<select class="selected-object form-control"> ' +
 '<option selected>Selected object is: </option> ' +
 '</select> ' +
 '</div> ' +
 '<div class="col-sm-4 col-md-4" id="select-col2"> ' +
-'<select class="select-object1 form-control"> ' +
+'<h4>' + selection +
-'<option selected>TEXT</option> ' +
+'</h4>' +
-'<option>WITNESS</option> ' +
-'<option>PERSON</option> ' +
-'</select> ' +
 '</div> ' +
 '</div>';
 }
 console.log("minus filter");
 $("#row"+numFilters).remove();
 numFilters--;
 });
 $("#results-container").dblclick(function() {
-if ($("#results-container option:selected").length == 1) {
+var displayChoice = $("#results-container").find("option:selected").text();
-var selection = $(this).text();
+console.log(displayChoice + ".........");
-console.log("add filter");
+var selection;
-numFilters++;
-$("#filters").append(select_html(selection, numFilters));
+_.map(targetObj, function(obj){
-// Generate inner relation list
-genRelations(sourceType, ".constraint-box"+classnum);
+if (_.values(_.values(targetObj))[1] === displayChoice) {
+selection = (_.values(_.values(obj))[0])[1];
 }
+else {
+selection = (_.values(_.values(obj))[0])[0];
+}
+});
+numFilters++;
+$("#filters").append(select_html(selection, numFilters));
+// Generate inner relation list
+//genRelations(sourceType, ".constraint-box"+numFilters);
+sourceType = selection;
 console.log("add filter");
 });
+$(function() {
+$("input").submit(function(event, data) {
+console.log($('.form-control').find("option:selected").text());
+console.log(event);
-// For use in the onchange events below
+console.log(data);
-function genRelations(sourceNodeType, constraintBox) {
+event.preventDefault();
-var query = "match (source:"+sourceNodeType+")-[rel]-target return distinct rel.type";
-ajax1(query, constraintBox);
+});
-}
+});
-function genResults(sourceNodeType, selected, constraintBox) {
-var query = "match (source:"+sourceNodeType+")-["+selected+"]-(target) return target.label, target.type";
-ajax1(query, constraintBox);
-}
-// Can be used to return a list of all available attributes
-// TODO: Not implemented
-function genAttributes(sourceNodeType, constraintBox) {
-var query = "match (n:"+sourceNodeType+") with keys(n) as collection unwind collection as attributes return distinct attributes";
-ajax1(query, constraintBox);
-}
 // Change Events
 $('body').on('change', function(event){
 var classname = (event.target.className).substr(0, (event.target.className).indexOf(" "));
-var classnum = (event.target.className.match(/\d+\.\d+|\d+\b|\d+(?=\w)/g) || [] )
+var classnum = (event.target.className.match(/\d+\.\d+|\d+\b|\d+(?=\w)/g) || [] ).map(function (v) {return +v;}).shift();
-.map(function (v) {return +v;}).shift();
+var allclass = '.'+classname;
-var selectedOption = $('.'+classname+' option:selected').text();
+var selectedOption = $(allclass).find('option:selected').text();
+console.log("SEL "+ selectedOption);
 // Change is on the filter box
 if (classname.indexOf("filter-box") > -1) {
 if (selectedOption === "has relation") {
 // Remove any other boxes in the row
 $("#"+classnum+"filter-col2").remove();
 $("#row"+classnum).append(constraint_html(classnum));
 // Generate inner relation list
-genRelations(sourceType, ".constraint-box"+classnum);
+genRelations(sourceType, ".rel-constraint-box"+classnum);
 }
-if (selectedOption === "attribute contains") {
+if (selectedOption === "attribute") {
 $("#"+classnum+"filter-col2").remove();
+$("#row"+classnum).append(attr_constraint_html(classnum));
+genAttributes(sourceType, ".attr-constraint-box"+classnum);
+//$("#row"+classnum).append(submit_html(classnum));
 $("#row"+classnum).append(submit_html(classnum));
-//genAttributes(sourceType, ".constraint-box"+classnum);
 }
+// NOT IMPLEMENTED
+/*
 if (selectedOption === "return") {
 $("#"+classnum+"filter-col2").remove();
 $("#row"+classnum).append(constraint_html(classnum));
 genAttributes(targetTypes, ".constraint-box"+classnum);
 }
+*/
 }
 // Change is on the relationship constraint box
-if (classname.indexOf("constraint-box") > -1) {
+if (classname.indexOf("rel-constraint-box") > -1) {
 //$().remove();
 genResults(sourceType, selectedOption, "results-container");
 }
-// TODO: if the select object is changed update the sourceType var that we are looking at
+// Change is on the attr constraint box
+if (classname.indexOf("attr-constraint-box") > -1) {
+//$().remove();
+console.log("CHANGE ON ATTR");
+console.log("changing currentqueryattr to" + selectedOption);
+currentQueryAttr = selectedOption;
+console.log("currentQueryAttr is" + currentQueryAttr);
+//genResults(sourceType, selectedOption, "results-container");
+}
 // Change is on subject scope
 if (classname.indexOf("select-object") > -1) {
+sourceType = selectedOption;
+console.log("CHANGE ON SCOPE");
+genResults(sourceType, "New Source", "results-container");
 //ajax1(query, "results-container")
 }
 });
+$("#filters").submit(function (event) {
+var inputId = $("input:text[name=attr-field]")[0].id;
+var inputValue = $("input:text[name=attr-field]").val();
+// Alter results list
+console.log("QUERY TYPE IS ATTRIBUTE NOW");
+currentQueryType = "attribute";
+console.log("SUBMITTED");
+genResults(sourceType, inputValue, "results-container")
+});
+// For use in the onchange events above
+function genRelations(sourceNodeType, constraintBox) {
+console.log("GENERATE ALL RELATIONS");
+var query = "match (source:"+sourceNodeType+")-[rel]-target return distinct rel.type";
+console.log("QUERY TYPE IS RELATION NOW");
+currentQueryType = "relation";
+ajax1(query, constraintBox);
+}
+function genAttributes(sourceNodeType, constraintBox) {
+console.log("GENERATE ALL ATTRIBUTES");
+var query = "match (n:"+sourceNodeType+") with keys(n) as collection unwind collection as attributes return distinct attributes";
+ajax1(query, constraintBox);
+}
+function genResults(sourceNodeType, selected, constraintBox) {
+// TODO: Return first the list of current values of the display box
+if (selected === "New Source") {
+console.log("NEW SOURCE - UPDATE RESULTS");
+var query = "match (source:"+sourceNodeType+") return source._n_label, source.type";
+}
+else if (currentQueryType === "attribute") {
+console.log("ATTR CHANGE - UPDATE RESULTS");
+console.log("before update currentQueryAttr is " + currentQueryAttr);
+var qAttr = currentQueryAttr;
+var query = "match (source:"+sourceNodeType+") where "+get_result_labels()+" AND source."+qAttr+"=~\"(?i).*"+selected+".*\" return distinct source._n_label, source.type limit 5";
+console.log(query);
+}
+else if (currentQueryType === "relation") {
+var query = "match (source:" + sourceNodeType + ")-[rel:" + selected + "]->(target) return distinct target._n_label, target.type";
+console.log("REL CHANGE - UPDATE RESULTS");
+}
+else {
+console.log("GENRESULTS IMPROPERLY CALLED");
+return;
+}
+ajax1(query, constraintBox);
+}
+var currentQueryType;
+var currentQueryAttr;
+var resultLabelString = "";
+function get_result_labels() {
+return resultLabelString;
+}
+function set_result_labels(currentResults) {
+resultLabelString = "(";
+for (var i = 0; i < currentResults.length; i++) {
+if (i > 0) resultLabelString += " OR ";
+resultLabelString += 'source._n_label=\"'+currentResults[i].text.substr(1)+'\"';
+}
+resultLabelString += ")"
+}
+// to use contains
+// TODO: start n = node(*) where n.Name =~ '.*SUBSTRING.*' return n.Name, n;
 // Ajax request function
 function ajax1(q, resBox) {
-console.log(q);
 $.ajaxSetup({
 headers: {
 "Authorization": 'Basic ' + window.btoa("neo4j"+":"+"neo5j")
 }
 });
 dataGen(a1.data, resBox);
 }
 // On success, generate new data
 // TODO: might want to just always return nodes and then deal with the queryData different for each type of return
 function dataGen(dataArr, resBox) {
-console.log(dataArr);
 var d = dataArr;
 targets = [];
 // Consider implementing localStorage to avoid reloading every time
 var queryData = [];
 queryData.sort(function(a,b){
 var c = a.text.replace(/<|>/g, '');
 var d = b.text.replace(/<|>/g, '');
 return c.localeCompare(d);
 });
-console.log(queryData[0].text);
 // Change the displayed results
 if (resBox === "results-container") {
 process_display_results(queryData);
 }
+// Or fill any select boxes
 else {
 $(resBox).select2({
 data: queryData
 });
 }
 }
 function process_display_results(queryData) {
 var weights = [];
 var resultLength = queryData.length;
 targetTypes = [];
+targetObj = queryData;
+set_result_labels(queryData);
 $('#results-container')
 .find('option')
 .remove()
 .end()
 ;
+for (var i = 0; i < targets.length; i++) {
+if (targetTypes.indexOf(targets[i]) == -1) {
+targetTypes.push(targets[i]);
+weights.push(1);
+}
+else {
+weights[targetTypes.indexOf(targets[i])] += 1;
+}
+}
 if (resultLength < listTolerance) {
 for (var i = 0; i < resultLength; i++) {
 // TODO: put this jQuery call into its own function to be called if the else statement occurs
 // TODO: but the user actually does want to see the entire huge list.
+// This next bit removes duplicate labels if we want to use that for things like cities
+// would this throw issues with other things??
+//$('#results-container option:contains('+queryData[i].text+')').each(function(){
+//    $(this).remove();
+//});
 $('#results-container')
 .append($("<option></option>")
 .attr("value", i)
 .text(queryData[i].text));
 }
 }
 else {
-for (var i = 0; i < targets.length; i++) {
-if (targetTypes.indexOf(targets[i]) == -1) {
-targetTypes.push(targets[i]);
-weights.push(1);
-}
-else {
-weights[targetTypes.indexOf(targets[i])] += 1;
-}
-}
 for (var i = 0; i < targetTypes.length; i++) {
 $('#results-container')
 .append($("<option></option>")
 .text(targetTypes[i] + " [ " + weights[i] + " ]"));
 }

Mercurial > hg > NetworkVis

comparison query_builder/querybuild.html @ 32:acc60a20582c