Graph Node Decoration

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

Decorations can have performance impact on the graph.

Once a node displays a decoration, another container node is created that is never removed. Also each decoration is a full cytoscape node.

Alignment Positions

The figure below shows the available positions. The alignment locations are automatically adjusted based on the placement of the text in a node.

Annotated positions and alignment configuration value:

  1. Top left { h: 'left', v: 'top' }
  2. Top center { h: 'center', v: 'top' }
  3. Top right { h: 'right', v: 'top' }
  4. Center left { h: 'left', v: 'center' }
  5. Center center { h: 'center', v: 'center' }
  6. Center right { h: 'right', v: 'center' }
  7. Bottom left { h: 'left', v: 'bottom' }
  8. Bottom center { h: 'center', v: 'bottom' }
  9. Bottom right { h: 'right', v: 'bottom' }

Note: There is no collision detection on decorations with equal alignments.

Tutorial

Web Plugin

Register the plugin script in a web plugin.

app.registerJavaScript("/org/visallo/examples/graph_node_decoration/plugin.js", true);

Register Extension

Register the decoration extension for a new decoration in the top-left corner of nodes. This decoration will apply to all vertices that have a comment, and display the number of comments in the decoration.

visallo.registry.registerExtension('org.visallo.graph.node.decoration', {
    applyTo: function(v) {
        return _.any(v.properties, function(p) {
            return p.name === 'http://visallo.org/comment#entry' &&
                p.value.indexOf(onlyDecorationAlignmentsText) === -1 &&
                p.value.indexOf("popover") === -1;
        })
    },
    alignment: { h: 'left', v: 'top' },
    classes: 'custom',
    data: function(vertex) {
        return {
            label: vertex.properties.reduce(function(sum, p) {
                if (p.name === 'http://visallo.org/comment#entry') {
                    return sum + 1;
                }
                return sum;
            }, 0)
        }
    }
});

The default graph stylesheet defines label as the content of the node.

content: 'data(label)',

Register a style extension to format the decoration. All decorations have the decoration class, so append that to the selector to avoid conflicts with node classes.

visallo.registry.registerExtension('org.visallo.graph.style', function(style) {
    style
        .selector('.decoration.custom')
        .css({
            shape: 'octagon',
            'background-color': 'orange',
            'border-color': 'darkorange',
            'padding-left': 10,
            'padding-right': 10,
            'font-size': 23 * retina.devicePixelRatio,
            width: 20 * retina.devicePixelRatio,
            height: 20 * retina.devicePixelRatio
        })

Popover Tutorial

Decorations can have popovers that are opened when the user clicks on the decoration using the onClick handler.

Web Plugin

Register the popover component and template.

app.registerJavaScript("/org/visallo/examples/graph_node_decoration/popover.js", false);
app.registerJavaScriptTemplate("/org/visallo/examples/graph_node_decoration/template.hbs");

Register Extension

Register the decoration with an onClick handler.

onClick: function(event, data) {
    var id = this.id();
    require(['org/visallo/examples/graph_node_decoration/popover'], function(Popover) {
        Popover.attachTo(data.cy.container(), {
            anchorTo: {
                decorationId: id
            }
        });
    })
}

Popover Component

Create the Flight component to render the popover.

define([
    'public/v1/api',
    'util/popovers/withPopover'
], function(
    api,
    withPopover) {

    return api.defineComponent(DecorationPopover, withPopover);

    function DecorationPopover() {

        this.before('initialize', function(node, config) {
            config.template = '/org/visallo/examples/graph_node_decoration/template'
            this.after('setupWithTemplate', function() {
            })
        });
    }
});

The withPopover mixin provides the popover specific handling to attach to the decoration.

Add the template with the necessary markup for the popover.

<div class="fileImportPopover popover top collapseVisibility">
  <div class="popover-title">Example</div>
  <div class="arrow"></div>
  <div class="popover-content">
    Popover for Graph Node
  </div>
</div>

The popover mixin calls setupWithTemplate to initialize the popover, so if extra work is needed to be done after the template has rendered, use after('setupWithTemplate'). this.dialog and this.popover are instance variables for the popover and the content.

results matching ""

    No results matching ""