Mercurial > hg > NetworkVis

<!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="select2-4.0.1/dist/css/select2.min.css">

    <script type="text/javascript" src="js/d3.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="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" style="height: auto;">
                <div class="col-md-6">
                    <div class="navbar-brand">
                        <div class="brand">ISMI Query Builder</div>
                    </div>
                </div>
                <div class="col-md-offset-6">
                    <div class="logo-well" style="height: 60%; width: 60%;">
                        <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" style="max-height: 50%; width: 50%">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row" style="width: 95%">
        <div class="col-lg">
            <div class="panel panel-default">
                <div class="panel-heading" id="title">Query Builder</div>

                <section>
                    <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>
                                    </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>
                                    </select>
                                </div>
                            </div>
                            <div class="row" id="row1" style="margin-top: 15px">
                                <div class="col-sm-4 col-md-4" id="1filter-col1">
                                    <select class="filter-box1 form-control">
                                        <option value="" disabled selected>Choose filter...</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div align="left" style="margin-top: 30px"><button id="minus_filter_button" class="btn btn-warning btn-md" type="button"> - </button>
                            <button id="plus_filter_button" class="btn btn-warning btn-md" type="button">  +  </button>
                        </div>
                    </div>


                    <div class="container-fluid" style="margin-top: 15px">
                        <form role="form">
                            <div class="form-group">
                                <label for="results-container">Results list</label>
                                <select multiple class="form-control" id="results-container" style="min-height: 300px;">
                                </select>
                            </div>
                        </form>

                    </div>

                    <!--    <pre data-fill-from=".js-code-data-array"></pre> -->
                </section>

            </div>
        </div>
    </div>
</div>


<script type="text/javascript" class="js-code-data-array">
    //var queryData = [];

    // Defining initial variables and helper functions
    var sourceType = "TEXT";
    var targets = [];
    var targetTypes = [];
    var listTolerance = 100;
    var numFilters = 1;
    var filters = [
        { id: 0, text: 'has relation' },
        { id: 1, text: 'attribute contains' }
    ];
    $(".filter-box"+numFilters).select2({
        // Initialize first filter box
        data: filters,
        minimumResultsForSearch: Infinity
    });
    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>' +
                '</select>' +
                '</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>' +
                '</div>';
    }
    function submit_html(classn) {
        return '<div class="col-sm-4 col-md-4" id="'+classn+'filter-col2">' +
                '<div class="form-group'+classn+'">' +
                '<textarea class="form-control" rows="1" id="attribute-text-search'+classn+'">' +
                '</textarea>' +
                '</div>' +
                '</div>';
    }
    function select_html(selection) {
        return '<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> ' +
                '</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> ' +
                '</select> ' +
                '</div> ' +
                '</div>';
    }


    // Button filters
    $("#plus_filter_button").click(function() {
        console.log("add filter");
        numFilters++;
        $("#filters").append(filter_html(numFilters));
        $(".filter-box"+numFilters).select2({
            data: filters,
            minimumResultsForSearch: Infinity
        });
    });
    $("#minus_filter_button").click(function() {
        console.log("minus filter");
        $("#row"+numFilters).remove();
        numFilters--;
    });
    $("#results-container").dblclick(function() {
        if ($("#results-container option:selected").length == 1) {
            var selection = $(this).text();
            console.log("add filter");
            numFilters++;
            $("#filters").append(select_html(selection, numFilters));
            // Generate inner relation list
            genRelations(sourceType, ".constraint-box"+classnum);

        }
        console.log("add filter");
    });


    // For use in the onchange events below
    function genRelations(sourceNodeType, constraintBox) {
        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) || [] )
                .map(function (v) {return +v;}).shift();
        var selectedOption = $('.'+classname+' option:selected').text();

        // 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);
            }
            if (selectedOption === "attribute contains") {
                $("#"+classnum+"filter-col2").remove();
                $("#row"+classnum).append(submit_html(classnum));
                //genAttributes(sourceType, ".constraint-box"+classnum);
            }
            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) {
            //$().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 subject scope
        if (classname.indexOf("select-object") > -1) {

            //ajax1(query, "results-container")
        }
    });


    // Ajax request function
    function ajax1(q, resBox) {
        console.log(q);
        $.ajaxSetup({
            headers: {
                "Authorization": 'Basic ' + window.btoa("neo4j"+":"+"neo5j")
            }
        });
        return $.ajax({
            type: "POST",
            url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
            accepts: "application/json",
            dataType: "json",
            data: {
                "query": q,
                "params": {}
            },
            beforeSend: function (xhr) {
                xhr.setRequestHeader ("Authorization", "Basic " + btoa('neo4j'+":"+'neo5j'));
            },
            processResults: function (data, params) {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;
                return {
                    pagination: {
                        more: (params.page * 30) < data.length
                    }
                };
            },
            success: function (res, textStatus, jqXHR) {
                ajaxCheck(res, resBox, textStatus);
                console.log(textStatus);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
    }
    // Check if request was successful
    function ajaxCheck(a1, resBox, status){
        if (status === 'error') console.log("error: bad ajax request");
        //else dataGen(a1);
        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 = [];
        for (var i= 0; i<d.length; i++) {
            var j = d[i];
            queryData.push({ id: j, text: j[0] });
            targets.push(j[1]);
        }
        // Now that queryData array has been defined we will sort it by its label value and initialize the option.
        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);
        }
        else {
            $(resBox).select2({
                data: queryData
            });
        }
    }
    function process_display_results(queryData) {
        var weights = [];
        var resultLength = queryData.length;
        targetTypes = [];

        $('#results-container')
                .find('option')
                .remove()
                .end()
        ;
        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.
                $('#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] + " ]"));
            }
        }
    }

</script>

</body>
</html>
author	arussell
date	Thu, 10 Dec 2015 07:26:40 -0500
parents
children	acc60a20582c