Cytoscape dynamically style last added node only

Question

I'm in the beginning phase of using Cytoscape.js and I'm trying to style the last added node to my dagre-layout tree.

For context, I'm trying to visualize the Git workflow as I make a Git commit. The current nodes on the tree are colored green. When I make a Git commit, a new node will be added to the end of the Git (dagre) tree with a color of red. Once I make another commit, a new red node will be added... but I want the previous node that was red, to be green like the other nodes.

cy.add([
    {
        // Adding Node
        data: {
            id: localGit.SHA
        }
    },
    {
        // Adding Edges
        data: {
            id: localGit.message,
            source: localGit.parent[0],
            target: localGit.SHA
        }
    }
]).style({
    'background-color': 'red'
});

I hooked my Git commit with cy.add() and am adding background color to EVERY new node. Once again, I'd like to style only the newly added node red (or animate some sort of pulsating behavior to indicate it's the newly added node), and have every color before it default to green. I definitely feel like I'm missing something simple... Any help would be appreciated !

Answer 1

Generally, it's more flexible to use classes for styling.

You can set styles for classes in your stylesheet, set at init.

In your example, you could have a head class for the commit corresponding to the git head commit. You can then just cy.nodes().removeClass('head') when you add a new node, and newNode.addClass('head') to mark the new node as the new head.

You can put any style associated with a class in your stylesheet. You can even use transition animations, similar to HTML/CSS, so you could animate newly head nodes.