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 id="filter" class="row">
                        <div class="col-sm-3 col-md-3">
                            <select class="js-example-data-array form-control"></select>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <select class="js-example-data-array2 form-control"></select>
                        </div>
                        <div class="col-sm-3 col-md-3">
                            <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">


    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
    });

    $(".js-example-data-array3").select2();

    // 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);
        $.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": 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(res);
                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', null);

        $(".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);
    });


    $("#plus_filter_button").click(function() {
        console.log("add filter");
        $("#s2-example").append("<div id='filter'/>");
        //$(".js-example-data-array").select2({
        //    data: filters
        //}, console.log("created"));
    });


    // TODO: **** NOTE, could have each ajax fn be called with an extra parameter of what type of result to return ****
    // TODO: (objects, attributes, attribute, relationships)
    // TODO: in this way you could have each onchange trigger supply the appropriate result of the box it will modify.
    // TODO: this would allow the json to be returned in the same way for each result. and we could also pass
    // TODO: the return type param to the data gen


    /* CURRENT IMPLEMENTATION
       TODO: Make custom dataGen function for each dropdown type: object, attribute, display
       TODO: we need to do this because we need to deal with the returned json differently depending on
       TODO: what we want the dropdown to hold. This will be determined by the body.on(change function
       TODO: and what the type of box is changing. Eg. changing the object type will trigger a change in
       TODO: attributes and clear the display. Change in attribute will combine with object type to form
       TODO: full query and trigger a dataGen of the appropriate info eg. TEXT.label in the display.
       TODO: In this implementation, each box determines the next
       TODO: Also, object changing can be used to update the list of relationships between it and any other object
       TODO: for the next line.


       CYPHER IMPLEMENTATION
       TODO: Implement exactly like a cypher query.
       TODO: first line: MATCH ---- object. relationship. object.
       TODO: first object on choice sends ajax query to determine available relationships --> second box
       TODO: relationship on choice determines the other types of possible objects to relate to.
       TODO: second line: WHERE ---- object. attribute. equals.
       TODO: the object can be either of the ones from line one. the attribute is generated by that object.
       TODO: choose to return

     */


</script>

</body>
</html>
author	casties
date	Thu, 04 Feb 2016 18:56:48 +0100
parents	5384b71df52a
children