Graph Node Transformer

Allows extensions to adjust the data attribute of Cytoscape nodes.

Tutorial

This tutorial will adjust the size of graph nodes based on how many properties they have.

Web Plugin

Register the plugin script in a web plugin.

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

Register Extension

Register the transformer extension that just places a property count into the data object.

visallo.registry.registerExtension('org.visallo.graph.node.transformer', function(vertex, data) {
    data.numProperties = vertex.properties.length;
});

Register a style extension to test the transformer. The selector checks for the data property and adjusts the size of the node depending on numProperties.

visallo.registry.registerExtension('org.visallo.graph.style', function(cytoscapeStylesheet) {
    var pixelRatio = 'devicePixelRatio' in window ? window.devicePixelRatio : 1;
    cytoscapeStylesheet.selector('node[numProperties]')
        .style({
            'width': 'mapData(numProperties, 4, 15, ' + 30 * pixelRatio + ', ' + 75 * pixelRatio + ')',
            'height': 'mapData(numProperties, 4, 15, ' + 30 * pixelRatio + ', ' + 75 * pixelRatio + ')'
        })
});

The function uses devicePixelRatio to be the same perceived size on hidpi and normal displays. The default Cytoscape stylesheet does something similar.

height: GENERIC_SIZE * pixelRatio,
shape: 'roundrectangle',
width: GENERIC_SIZE * pixelRatio

results matching ""

    No results matching ""