Link configuration

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

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

 popoto.provider.link.Provider = {}

All links configuration are listed below:

• getTextValue
• getDistance
• getColor
• getCSSClass
• getSemanticValue

Get text value

Function used to return the text representation of a link.

The default behavior is to return the internal relation name as text for relation links.

And return the target node text value for links between a node and its expanded values but only if text is not displayed on value node.

"getTextValue": function (link) {
    if (link.type === graph.link.LinkTypes.VALUE) {
        // Links between node and list of values.

        if (provider.node.isTextDisplayed(link.target)) {
            // Don't display text on link if text is displayed on target node.
            return "";
        } else {
            // No text is displayed on target node then the text is displayed on link.
            return provider.node.getTextValue(link.target);
        }

    } else {
        var targetName = "";
        if (link.type === graph.link.LinkTypes.SEGMENT) {
            targetName = " " + provider.node.getTextValue(link.target);
        }
        return link.label + targetName;
    }
}

Get distance

"getDistance": function (link) {
    if (link.type === graph.link.LinkTypes.VALUE) {
        return (13 / 8) * (provider.node.getSize(link.source) + provider.node.getSize(link.target));
    } else {
        return (20 / 8) * (provider.node.getSize(link.source) + provider.node.getSize(link.target));
    }
}

Get color

Return the color to use on links and relation donut segments.

Return null or undefined

"getColor": function (link, element, attribute) {
    if (link.type === graph.link.LinkTypes.VALUE) {
        return "#525863";
    } else {
        var colorId = link.source.label + link.label + link.target.label;

        var color = provider.colorScale(colorId);
        if (attribute === "stroke") {
            return provider.colorLuminance(color, -0.2);
        }
        return color;
    }
}

Get CSS class

"getCSSClass": function (link, element) {
    var cssClass = "ppt-link__" + element;

    if (link.type === graph.link.LinkTypes.VALUE) {
        cssClass = cssClass + "--value";
    } else {
        var labelAsCSSName = "ppt-" + link.label.replace(/[^0-9a-z\-_]/gi, '');
        if (link.type === graph.link.LinkTypes.RELATION) {
            cssClass = cssClass + "--relation";

            if (link.target.count === 0) {
                cssClass = cssClass + "--disabled";
            }

            cssClass = cssClass + " " + labelAsCSSName
        }
    }

    return cssClass;
}

Get semantic value

Function used to return a descriptive text representation of a link.

This representation should be more complete than getLinkTextValue 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 getLinkTextValue.

"getSemanticValue": function (link) {
    return provider.link.getTextValue(link);
}