org.visallo.graph.node.decoration

Add decoration text/images around the node

Graph decorations are additional detail to display around a vertex when displayed in a graph. These decorations are implemented as cytoscape.js nodes inside of compound nodes. That allows them to be styled just like vertices using org.visallo.graph.style extensions.

Example

registry.registerExtension('org.visallo.graph.node.decoration', {
    applyTo: function(v) { return true; },
    alignment: { h: 'left', v: 'top' },
    classes: 'custom',
    data: function(vertex) {
        return {
            label: vertex.properties.length
        }
    }
});

Registration

registry.registerExtension("org.visallo.graph.node.decoration", config)

Source:
Tutorials:
See:
Configuration Properties:
Name Type Attributes Description
alignment object

Where the decoration is attached

Properties
Name Type Description
h string

Where the decoration is attached on the horizontal axis: left, center, right

v string

Where the decoration is attached on the vertical axis: top, center, bottom

data object | data

The cytoscape data object for the decoration node

classes string | classes <optional>

Classes to add to the cytoscape node, useful for styling with org.visallo.graph.style

Include multiple classes using space-separated string

applyTo applyTo <optional>

Whether the decoration should be added to certain nodes.

padding object <optional>

Offset the decoration from the bounds of the node.

Useful when the decoration is styled with known width/height that won't work with defaults 8x8.

Properties
Name Type Attributes Default Description
x number <optional>
8

X offset

y number <optional>
8

Y offset

onClick onClick <optional>

This function is called on click events

onMouseOver onMouseOver <optional>

This function is called on mouseover events

onMouseOut onMouseOut <optional>

This function is called on mouseout events

Validation Function

Extensions registered must pass this validation check to be used.

function extensionValidator(e) {
    if (e.applyTo && !_.isFunction(e.applyTo))
        return false;
    if (!_.isObject(e.alignment))
        return false;
    if (!_.contains([
            'left',
            'center',
            'right'
        ], e.alignment.h))
        return false;
    if (!_.contains([
            'top',
            'center',
            'bottom'
        ], e.alignment.v))
        return false;
    return true;
}

Type Definitions

applyTo(vertex) → {boolean}

Source:
Parameters:
Name Type Description
vertex object
Returns:

Whether the decoration should be added to the node representing the vertex

Type
boolean

classes(vertex) → {array.<string>|string}

Source:
Parameters:
Name Type Description
vertex object
Returns:

The classnames to add to the node, either an array of classname strings, or space-separated string

Type
array.<string> | string

data(vertex) → {object}

Source:

Note: This will be called for every vertex change event (verticesUpdated). Cache/memoize the result if possible.

Parameters:
Name Type Description
vertex object
Returns:

The cytoscape data object for a decoration given a vertex

Type
object

onClick(event, data)

Source:
This:
  • The
Parameters:
Name Type Description
event object

The Cytoscape event object

data object
Properties
Name Type Description
vertex object

The vertex this decoration is attached

cy object

The cytoscape instance

onMouseOut(event, data)

Source:
This:
  • The
Parameters:
Name Type Description
event object

The Cytoscape event object

data object
Properties
Name Type Description
vertex object

The vertex this decoration is attached

cy object

The cytoscape instance

onMouseOver(event, data)

Source:
This:
  • The
Parameters:
Name Type Description
event object

The Cytoscape event object

data object
Properties
Name Type Description
vertex object

The vertex this decoration is attached

cy object

The cytoscape instance