Node label provider

This example is based on previous result list example. The node label providers are updated to customize displayed nodes.

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>

Provider customization

The next step is to customize the provides to use images.

This can be done in the label providers configuration for "Person" and "Movie" providers using "popoto.provider.NodeDisplayTypes.IMAGE" as returned type in "getDisplayType" function.

The "getImagePath" function also need to be provided with the right image path to use for nodes like below:

// 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",
        "getDisplayType": function (node) {
            return popoto.provider.NodeDisplayTypes.IMAGE;
        },
        "getImagePath": function (node) {
            if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                return "movies/" +
                node.attributes.title.replace("/", " ") + ".jpg";
            } else {
                if (node.value !== undefined) {
                    return "movies/" +
                    node.value.attributes.title.replace("/", " ") + ".jpg";
                } else {
                    if (node.type === popoto.graph.node.NodeTypes.ROOT) {
                        return "movies/movie_blue.svg";
                    } else {
                        return "movies/movie_green.svg";
                    }
                }
            }
        },
        // Disable text on nodes as images are used instead.
        "getIsTextDisplayed": function (node) {
            return false;
        }
    },
    "Person": {
        "returnAttributes": ["name", "born"],
        "constraintAttribute": "name",
        "getDisplayType": function (node) {
            return popoto.provider.NodeDisplayTypes.IMAGE;
        },
        "getImagePath": function (node) {
            var path;

            if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                path = "persons/" + node.attributes.name + ".jpg";
            } else {
                if (node.value !== undefined) {
                    path = "persons/" + node.value.attributes.name + ".jpg";
                } else {
                    if (node.type === popoto.graph.node.NodeTypes.ROOT) {
                        path = "persons/person_blue.svg";
                    } else {
                        path = "persons/person_green.svg";
                    }
                }
            }
            return path;
        },
        // Disable text on nodes
        "getIsTextDisplayed": function (node) {
            return false;
        },

        // 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

            var div1 = pResultElmt.append("div")
                .attr("style", "display: flex;");
            div1.append("img")
                    .attr("height", "100")
                    .attr("width", "68")
                    .attr("src", function (result) {
                        return "persons/" + result.attributes.name + ".jpg";
                    });

            var div = div1.append("div").attr("style", "margin-left: 20px;");
            // An <h3> element containing the person name
            div.append("h3")
                    .text(function (result) {
                        return result.attributes.name;
                    });

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

        }
    }
};

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 using images in provider

See live example using GrapheneDB.

This example can be downloaded here: node-images.zip.

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