Results

This example is based on query viewer example structure with a new DIV element to add a result list in the page. The node label providers are also updated to customize displayed results.

Create HTML page structure

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Popoto Search</title>
    <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: 700px">
    <div class="ppt-section-header">
        <span class="ppt-header-span">Neo4j movie graph -</span> Results example
    </div>

    <!-- By default the graph is generated on the HTML element with
            ID "popoto-graph" If needed this id can be changed 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 changed with
            property "popoto.query.containerId" -->

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

    <!-- Add a header with total number of results count -->
    <div class="ppt-section-header">
        RESULTS <span id="rescount" class="ppt-count"></span>
    </div>

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

    <div id="popoto-results" class="ppt-container-results">
        <!-- Results are 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>

Result list customization

The next step is to customize the way the "Person" nodes are displayed in the result list.

This can be done in the label providers configuration for the "Person" provider with the definition of "displayResults" function as follow:

// Define the list of label provider to customize the graph behavior:
// Only two labels are used in Neo4j movie graph example: "Movie" and "Person"
popoto.provider.nodeProviders = {
    "Movie": {
        "returnAttributes": ["title", "released", "tagline"],
        "constraintAttribute": "title"
    },
    "Person": {
        "returnAttributes": ["name", "born"],
        "constraintAttribute": "name",

        // Customize result display for Person nodes:
        "displayResults": function (pResultElmt) {

            // Here D3.js mechanisms is used to generate HTML code.
            // By default Popoto.js generates a <p> element for each result.
            // pResultElmt parameter is the <p> element selected with D3.js
            // So for "Person" result nodes two elements are generated:

            // An <h3> element containing the person name
            pResultElmt.append("h3")
            .text(function (result) {
                return result.attributes.name;
            });

            // A <span> element with the computed age from born attribute
            pResultElmt.append("span")
            .text(function (result) {
                return "Age: " +
                       (new Date().getFullYear() - result.attributes.born);
            });
        }
    }
};

Change number of displayed results

In current version no pagination is available in the result list but it is possible to change the number of displayed results with configuration. In this example the property is set to 10:

// Change the number of displayed results. Default is 100
popoto.query.RESULTS_PAGE_SIZE = 10;

Add a total result count

Popoto.js also introduce event listener on returned result. It is possible for example to add a total result count in the page using these events.

In this example the listener shown below is added to the "onTotalResultCount" event and on each graph modification Popoto.js will notify the listener with the new value.

Here the listener just retrieve the span defined in HTML page with ID "rescount" and update its text with the new count.

// Add a listener on returned result count to update count in page
popoto.result.onTotalResultCount(function (count) {
    d3.select("#rescount").text(function (d) {
        return "(" + count + ")";
    })
});

Run the page

With this new configuration the page is ready to use and the result look like this:

Video example of Popoto.js application on Neo4j Movie Graph with a query viewer and a result list

See live example using GrapheneDB.

This example can be downloaded here: results.zip.

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

Next example: Add images for movies and person nodes.