badge on nodes

by sundaramkumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.5.5/cytoscape.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
<body>
    <div>Click on a node to annotate it with a yellow circle. Once annotated, the node's position will freeze to prevent situation where node and it's circle would depart</div>
    <div id="cy"></div>
    
    
    <!-- ref: https://stackoverflow.com/questions/27799220/adding-extra-information-above-the-node-in-cytoscape-js -->
</body>

CSS

body {
	font: 14px helvetica neue, helvetica, arial, sans-serif;
    background-color: #D9D9D9;
}

#cy {
	height: 500px;
	width: 100%px;
	left: 0;
	top: 0;
	border-style: solid;
	border-width: 2px;
	background-color: white;
}

JavaScript

function addCircle(nodeId, circleText){
    var parentNode = cy.$('#' + nodeId);
    if (parentNode.data('isCircle') || parentNode.data('circleId'))
        return;
    parentNode.lock();
    var px = parentNode.position('x') + 20;
    var py = parentNode.position('y') - 20;    
    var circleId = (cy.nodes().size() + 1).toString();
    parentNode.data('circleId', circleId);
    cy.add({
        group: 'nodes',
        data: { weight: 75, id: circleId, name: circleText, isCircle: true },
        position: { x: px, y: py },
        //locked: true
    }).css({
        'background-color': '#F8A65F',
        'shape': 'ellipse',
        'color':'#000'
        //'background-opacity': 0.5
    }).unselectify();
}

$(function() { // on dom ready
    
    $('#cy').cytoscape({
        style : cytoscape.stylesheet().selector('node').css({
            'content' : 'data(name)',
            'text-valign' : 'center',
            'color' : 'white',
            'shape' : 'rectangle',
            //'text-outline-width' : 2,
            //'text-outline-color' : '#888',
        }).selector('edge').css({
            'target-arrow-shape' : 'triangle',
            'target-arrow-color' : 'blue',
            'line-color' : 'blue',
            'line-style' : 'solid',
            'source-arrow-color' : 'blue',
            'source-arrow-fill' : 'filled'
            
        }).selector(':selected').css({
            'background-color' : 'black',
            'line-color' : 'black',
            'target-arrow-color' : 'black',
            'source-arrow-color' : 'black'
        }).selector('.faded').css({
            'opacity' : 0.25,
            'text-opacity' : 0
        }).selector(":active").css({
            "overlay-color" : "black",
            "overlay-padding" : 10,
            "overlay-opacity" : 0.25
        }),
        
        elements : {
            nodes : [ {
                data : {
                    id : '1',
                    name : 'A'
                }
            }, {
...