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: 105px;">
                <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-md-12">
            <div class="panel panel-default">
                <div class="panel-heading" id="title">Query Builder</div>

                <section>
                <div class="s2-example">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <select class="js-example-data-array form-control"></select>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <select class="js-example-data-array2 form-control"></select>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <select class="js-example-data-array3 form-control">
                                <option value="" disabled selected>Loading...</option>
                            </select>
                        </div>
                    </div>
                </div>

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

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

<script type="text/javascript" class="js-code-data-array">
    // Code to interrupt ajax calls if object box switched, currently doesnt work...
    (function($) {
        var xhrPool = [];
        $(document).ajaxSend(function(e, jqXHR, options){
            xhrPool.push(jqXHR);
        });
        $(document).ajaxComplete(function(e, jqXHR, options) {
            xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
        });
        var abort = function() {
            $.each(xhrPool, function(idx, jqXHR) {
                jqXHR.abort();
                console.log("aborted");
            });
        };

        var oldbeforeunload = window.onbeforeunload;
        window.onbeforeunload = function() {
            var r = oldbeforeunload ? oldbeforeunload() : undefined;
            if (r == undefined) {
                // only cancel requests if there is no prompt to stay on the page
                // if there is a prompt, it will likely give the requests enough time to finish
                abort();
                console.log("aborted");
            }
            return r;
        }
    })(jQuery);


    var queryData = [];

    var data = [{ id: 0, text: 'TEXT' }, { id: 1, text: 'CODEX' }, { id: 2, text: 'WITNESS' }, { id: 3, text: 'COLLECTION' }, { id: 4, text: 'PERSON' }];

    var relations = [{ id: 0, text: 'equal' }, { id: 1, text: 'in' }];

    $(".js-example-data-array").select2({
        data: data
    });
    ajax1("TEXT");

    $(".js-example-data-array2").select2({
        data: relations
    });

    // Ajax request function
    function ajax1(q) {
        var combinedQuery = "match (n:TEXT) return n";
        if (q !== undefined) combinedQuery = "match (n:" + q + ") return n";
        console.log(combinedQuery);
        return $.ajax({
            type: "POST",
            url: "https://ismi-dev.mpiwg-berlin.mpg.de/neo4j-ismi/db/data/cypher",
            accepts: "application/json",
            dataType: "json",
            data: {
                "query": combinedQuery,
                "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;
                console.log(data.length);
                return {
                    pagination: {
                        more: (params.page * 30) < data.length
                    }
                };
            },
            success: function (res, textStatus, jqXHR) {
                console.log(textStatus);
                ajaxCheck(res, textStatus);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
    }

    // Check if request was successful
    function ajaxCheck(a1, status){
        if (status === 'error') console.log("error: bad ajax request");
        else dataGen(a1);
    }

    // On success, generate new data
    function dataGen(a1){
        console.log("next started");
        var d = a1.data;
        // Consider implementing localStorage to avoid reloading every time
        queryData = [];
        for (var i= 0; i<d.length; i++) {
            var j = d[i][0].data.ismi_id;
            queryData.push({ id: j, text: d[i][0].data.label });
        }
        // Now that queryData array has been defined we will sort it by its label value and initialize the option.
        queryData.sort(function(a,b){
            return a.text.localeCompare(b.text);
        });
        console.log(queryData);

        // TODO: currently the queryData is being added onto the previous query data, need to remove old.


        $(".js-example-data-array3").select2({
            data: queryData
        });
        $(".js-example-data-array3").select2('val', "Select an option");
    }

    // If first box is changed generates new queryData with updated query
    $('body').on('change', ".js-example-data-array", function(e){
        var query = '' + data[$(this).val()].text;
        //for(var i=0, n=queryData.length; i<n; i++) {
        // FIXME: Trying to get the data in the drop down menu to be erased when first menu changed. Not quite working...
        $(".js-example-data-array3").select2('data',[]);
        //}
        ajax1(query);
    });

    // TODO: ^^^^^ extend this to make a listener that will build the query dynamically


</script>

</body>
</html>
author	arussell
date	Wed, 02 Dec 2015 00:53:02 -0500
parents	22be4ea663a7
children	5384b71df52a