Graph Style

Apply additional Cytoscape styles to the graph. This is used to adjust the styling of all graph elements: Nodes, Edges, Decorations, etc.

All style extensions have precedence over the built-in style if the selectors are similar specificity. The Visallo stylesheet is defined as:

function getDefaultStyles() {
    return [
        {
            selector: 'core',
            css: {
                'outside-texture-bg-color': '#efefef'
            }
        },
        {
            selector: 'node',
            css: {
                // 18 lines hidden…
            }
        },
        // 160 lines hidden…
        {
            selector: 'edge',
            css: {
                // 9 lines hidden…
            }
        },
        // 49 lines hidden…
    ];
}

Examples

Graph Node Class Example Code

Change the opacity of a node based on a class.

visallo.registry.registerExtension('org.visallo.graph.style', function(cytoscapeStylesheet) {
     cytoscapeStylesheet.selector('node.unknownName')
         .style({
             'opacity': '0.75'
         })
});

Graph Edge Class Example Code

Change the line color and thickness of an edge.

visallo.registry.registerExtension('org.visallo.graph.style', function(cytoscapeStylesheet) {
     cytoscapeStylesheet.selector('edge.hasComment')
         .style({
             color: '#ff0000',
             'line-color': '#ff0000',
             'target-arrow-color': '#ff0000',
             width: 5
         })

Graph Edge Transformer Example Code

Change the color of an edge (and edge arrow) based on value of data attribute.

visallo.registry.registerExtension('org.visallo.graph.style', function(cytoscapeStylesheet) {
     cytoscapeStylesheet.selector('edge[numProperties]')
         .style({
             'line-color': 'mapData(numProperties, 4, 10, blue, red)',
             'target-arrow-color': 'mapData(numProperties, 4, 10, blue, red)'
         })
});

Graph Node Transformer Example Code

Change the size of a node based on the value of a data attribute

require(['public/v1/api'], function(visallo) {

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

    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 + ')'
            })
    });
});

Graph Node Decoration Example Code

Add multiple entries for decorations.

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
        })
        .selector('.decoration.customAll')
        .css({
            shape: 'roundrectangle',
            'background-color': 'blue',
            'border-color': 'darkblue',
            'padding-left': 10,
            'padding-right': 10,
            'font-size': 19 * retina.devicePixelRatio,
            width: 15 * retina.devicePixelRatio,
            height: 15 * retina.devicePixelRatio
        })

results matching ""

    No results matching ""