Skip to content

Node configuration

Jump to bottom
Zack edited this page May 3, 2018 · 9 revisions

With Popoto you can customize the display of each specific node.

The node providers defines all the functions and properties used to generate nodes on graph or viewers. This provider must contain an entry for each node labels and can be overridden to customize node rendering.

 popoto.provider.node.Provider = {}

If some functions or properties are not set in popoto.provider.node.Provider, the rendering used the default node configuration.

To add configuration you must first define the target type of the configuration, to apply the configuration for all node of that type.

To do that, wrap your configuration into an javascript object with as name the label of the desired type.

For example if we want to customize all Person nodes write:

popoto.provider.node.Provider = {
    "Person": {}
}

Now we can add all the desired configuration for the Person Node

All configuration are listed below:

Label specific parameters

These attributes are specific to a node label and will be used for every node having this label.

Is searchable

Defines whether this label can be used as root element of the graph query builder.

This property is also used to determine whether the label can be displayed in the taxonomy filter.

The default value is true.

"isSearchable": true

Auto expand relations

Defines whether this label will automatically expend its relations when displayed on graph.

If set to true, once displayed additional request will be sent on the database to retrieve its relations.

The default value is false.

"autoExpandRelations": false

Is auto load value

Defines whether this label will automatically load its available data displayed on graph.

If set to true, once displayed additional request will be sent on the database to retrieve its possible values.

The default value is false.

"isAutoLoadValue": false

Return attributes

Defines the list of attribute to return for node of this label. All the attributes listed here will be added in generated cypher queries and available in result list and in node provider's functions.

The default value contains only the Neo4j internal id. This id is used by default because it is a convenient way to identify a node when nothing is known about its attributes.

But you should really consider using your application attributes instead, it is a bad practice to rely on this attribute.

"returnAttributes": [query.NEO4J_INTERNAL_ID]

Value order by attribute

Defines the attribute used to order the value displayed on node.

Default value is "count" attribute.

"valueOrderByAttribute": "count"

Is value order ascending

Defines whether the value query order by is ascending, if false order by will be descending.

Default value is false (descending)

"isValueOrderAscending": false

Result order by attribute

Defines the attribute used to order the results.

Default value is "null" to disable order by.

"resultOrderByAttribute": null

Is result order ascending

Defines whether the result query order by is ascending, if false order by will be descending.

Default value is true (ascending)

"isResultOrderAscending": true

Constraint attribute

Defines the attribute of the node to use in query constraint for nodes of this label.

This attribute is used in the generated cypher query to build the constraints with selected values.

The default value is the Neo4j internal id.

This id is used by default because it is a convenient way to identify a node when nothing is known about its attributes.

But you should really consider using your application attributes instead, it is a bad practice to rely on this attribute.

"constraintAttribute": query.NEO4J_INTERNAL_ID

Display attribute

Defines the attribute of the node to use by default to display the node. This attribute must be present in returnAttributes list.

The default value is undefined.

If undefined the first attribute of the returnAttributes will be used or constraintAttribute if the list is empty.

"displayAttribute": undefined

Get predefined constraints

Return the list of predefined constraints to add for the given label.

These constraints will be added in every generated Cypher query.

For example if the returned list contain ["$identifier.born > 1976"] for "Person" nodes everywhere in popoto.js the generated Cypher query will add the constraint "WHERE person.born > 1976"

@returns {Array}

"getPredefinedConstraints": function () {
    return [];
}

Filter result query

Filters the query generated to retrieve the queries. @param initialQuery contains the query as an object structure. @returns {}

"filterResultQuery": function (initialQuery) {
    return initialQuery;
}

Node specific parameters

These attributes are specific to nodes (in graph or query viewer) for a given label.

But they can be customized for nodes of the same label.

The parameters are defined by a function that will be called with the node as parameter.

In this function the node internal attributes can be used to customize the value to return.

Get display type

Function returning the display type of a node.

This type defines how the node will be drawn in the graph.

The result must be one of the following values:

provider.node.DisplayTypes.IMAGE In this case the node will be drawn as an image and "getImagePath" function is required to return the node image path.

provider.node.DisplayTypes.SVG In this case the node will be drawn as SVG paths and "getSVGPaths"

provider.node.DisplayTypes.TEXT In this case the node will be drawn as a simple circle.

Default value is TEXT.

"getDisplayType": function (node) {
    return provider.node.DisplayTypes.TEXT;
}

Get size

Function defining the size of the node in graph.

The size define the radius of the circle defining the node.

other elements (menu, counts...) will scale on this size.

Default value is 50.

"getSize": function (node) {
    return 50;
}

Get color

Return a color for the node.

"getColor": function (node) {
    if (node.type === graph.node.NodeTypes.VALUE) {
        return provider.node.getColor(node.parent);
    } else {
        var parentLabel = "";
        if (node.hasOwnProperty("parent")) {
            parentLabel = node.parent.label
        }

        var incomingRelation = node.parentRel || "";
        var colorId = parentLabel + incomingRelation + node.label;
		
        return provider.colorScale(colorId);
    }
}

Get CSS class

Generate a CSS class for the node depending on its type.

"getCSSClass": function (node, element) {
    var labelAsCSSName = node.label.replace(/[^0-9a-z\-_]/gi, '');

    var cssClass = "ppt-node__" + element;

    if (node.type === graph.node.NodeTypes.ROOT) {
        cssClass = cssClass + "--root";
    }
    if (node.type === graph.node.NodeTypes.CHOOSE) {
        cssClass = cssClass + "--choose";
    }
    if (node.type === graph.node.NodeTypes.GROUP) {
        cssClass = cssClass + "--group";
    }
    if (node.type === graph.node.NodeTypes.VALUE) {
        cssClass = cssClass + "--value";
    }
    if (node.value !== undefined && node.value.length > 0) {
        cssClass = cssClass + "--value-selected";
    }
    if (node.count === 0) {
        cssClass = cssClass + "--disabled";
    }

    return cssClass + " " + labelAsCSSName;
}

Get is group

Function defining whether the node is a group node. In this case no count are displayed and no value can be selected on the node. Default value is false.

"getIsGroup": function (node){
    return false;
}

Get is text displayed

Function defining whether the node text representation must be displayed on graph. If true the value returned for getTextValue on node will be displayed on graph. This text will be added in addition to the getDisplayType representation. It can be displayed on all type of node display, images, SVG or text. Default value is true @param node the node to display on graph. @returns {boolean} true if text must be displayed on graph for the node.

"getIsTextDisplayed": function (node) {
    return true;
}

Get text value

Function used to return the text representation of a node. The default behavior is to return the label of the node or the value of constraint attribute of the node if it contains value. The returned value is truncated using graph.node.NODE_MAX_CHARS property.

"getTextValue": function (node, maxLength) {
    var text = "";
    var displayAttr = provider.node.getDisplayAttribute(node.label);
    if (node.type === graph.node.NodeTypes.VALUE) {
        if (displayAttr === query.NEO4J_INTERNAL_ID) {
            text = "" + node.internalID;
        } else {
            text = "" + node.attributes[displayAttr];
        }
    } else {
        if (node.value !== undefined && node.value.length > 0) {
            if (displayAttr === query.NEO4J_INTERNAL_ID) {
                var separator = "";
                node.value.forEach(function (value) {
                    text += separator + value.internalID;
                    separator = " or ";
                });
            } else {
                var separator = "";
                node.value.forEach(function (value) {
                    text += separator + value.attributes[displayAttr];
                    separator = " or ";
                });
            }
        } else {
            text = node.label;
        }
    }

    return text;
}

Get semantic value

Function used to return a descriptive text representation of a link. This representation should be more complete than getTextValue and can contain semantic data. This function is used for example to generate the label in the query viewer. The default behavior is to return the getTextValue not truncated.

"getSemanticValue": function (node) {
    var text = "";
    var displayAttr = provider.node.getDisplayAttribute(node.label);
    if (node.type === graph.node.NodeTypes.VALUE) {
        if (displayAttr === query.NEO4J_INTERNAL_ID) {
            text = "" + node.internalID;
        } else {
            text = "" + node.attributes[displayAttr];
        }
    } else {
        if (node.value !== undefined && node.value.length > 0) {
            if (displayAttr === query.NEO4J_INTERNAL_ID) {
                var separator = "";
                node.value.forEach(function (value) {
                    text += separator + value.internalID;
                    separator = " or ";
                });
            } else {
                var separator = "";
                node.value.forEach(function (value) {
                    text += separator + value.attributes[displayAttr];
                    separator = " or ";
                });
            }
        } else {
            text = node.label;
        }
    }
    return text;
}

Get image path

Function returning the image file path to use for a node.

This function is only used for provider.node.DisplayTypes.IMAGE type nodes.

"getImagePath": function (node) {
    return "image/node/" + node.label.toLowerCase() + "/" + node.label.toLowerCase() + ".svg";
}

Get SVG paths

Function returning a array of path objects to display in the node.

"getSVGPaths": function (node) {
    var size = provider.node.getSize(node);
    return [
        {
            "d": "M 0, 0 m -" + size + ", 0 a " + size + "," + size + " 0 1,0 " + 2 * size + ",0 a " + size + "," + size + " 0 1,0 -" + 2 * size + ",0",
            "fill": "transparent",
            "stroke": provider.node.getColor(node),
            "stroke-width": "2px"
        }
    ];
}

Get image width

Function returning the image width of the node. This function is only used for provider.node.DisplayTypes.IMAGE type nodes. @param node @returns {number}

"getImageWidth": function (node){
    return provider.node.getSize(node) * 2;
}

Get image height

Function returning the image height of the node.

This function is only used for provider.node.DisplayTypes.IMAGE type nodes.

"getImageHeight": function (node){
    return provider.node.getSize(node) * 2;
}

Filter node value query

Filters the query generated to retrieve the values on a node.

"filterNodeValueQuery": function (node, initialQuery) {
    return initialQuery;
}

Filter node count query

Filters the query generated to retrieve the values on a node.

"filterNodeCountQuery": function (node, initialQuery) {
    return initialQuery;
}

Filter node relation query

Filters the query used to retrieve the values on a node.

"filterNodeRelationQuery": function (node, initialQuery) {
    return initialQuery;
}

Popoto

Popoto-examples

Copyright © 2018 NHOGS Interactive

Home

Getting started

Graph

Taxonomy

Query

Result

Configuration

CSS

Examples

Clone this wiki locally