Query viewer

Create HTML page structure

The HTML page structure defined in previous example is reused with new elements to generate a query viewer in the page and also customize the displayed links labels

This page contains a div for the graph and a div for the query viewer.

<!DOCTYPE html>
<html>
<head>
    <title>Popoto Search</title>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../../css/popoto.min.css">
</head>
<body class="ppt-body">

<header class="ppt-header">
    <span class="ppt-header-span">POPOTO JS</span>
</header>

<section class="ppt-section-main" style="height: 800px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Query viewer example</span>
    </div>

    <!-- By default the graph is generated on the HTML element with
            ID "popoto-graph" If needed this id can be modified with
            property "popoto.graph.containerId" -->

    <div id="popoto-graph" class="ppt-div-graph">
        <!-- Graph is generated here -->
    </div>

    <!-- By default the query viewer is generated on the HTML element with
            ID "popoto-query" If needed this id can be modified with
            property "popoto.queryviewer.containerId" -->

    <div id="popoto-query" class="ppt-container-query">
        <!-- Query viewer is generated here -->
    </div>

</section>

<!-- Required scripts -->
<script src="../../js/jquery-2.1.0.min.js" charset="utf-8"></script>
<script src="../../js/d3.v3.min.js" charset="utf-8"></script>
<script src="../../js/popoto.min.js" charset="utf-8"></script>
<script>
    // detailed below
</script>
</body>
</html>

Configure Popoto.js

All the configuration is done in JavaScript.

The query builder doesn't need configuration by default but it is possible to customize the labels displayed for links or nodes.

In this example the link labels are customized. To do this a new "popoto.provider.linkProvider" is defined replacing the default one.

The link label provider only contains two function "getLinkTextValue" and "getLinkSemanticValue". The first one is used to render the link labels in the graph and the second one in query viewer.

For this example "getLinkTextValue" is customized as follows:

// Define the label provider used to customize the link displayed text:
popoto.provider.linkProvider = {
    // Customize the text displayed on links:
    "getLinkTextValue": function (link) {

        // The links labels are just changed in lower case in this example.
        // But it is possible to use a localization mechanism instead.
        if (link.type === popoto.graph.link.LinkTypes.RELATION) {
            switch (link.label) {
                case "ACTED_IN":
                    return "Acted in";
                case "DIRECTED":
                    return "Directed";
                case "PRODUCED":
                    return "Produced";
                case "WROTE":
                    return "Wrote";
                case "FOLLOWS":
                    return "Follows";
                case "REVIEWED":
                    return "Reviewed";
                default :
                    return "Unexpected relation"
            }
        } else { // Value links

            // It is also possible to use data from link source or target nodes.
            // Here if the target node of a link is a Movie, the tagline attribute
            // of the movie is displayed on link.
            if (link.target.label == "Movie") {
                return link.target.attributes.tagline;
            }
        }
    }
};

Run the page

With this JavaScript configuration the page looks like this:

Video example of Popoto.js application on Neo4j Movie Graph

See live example using GrapheneDB.

This example can be downloaded here: query-viewer.zip.

The full set of examples can also be downloaded at once on the download page.

Next example: Add a result list