dynamic node content (label) in cytoscape.js
Asked Answered
H

3

6

I have node labels mapped to the node "name" property, and I need the label to update on the cy canvas when the name is changed. I've been using the style

style: cytoscape.stylesheet()
.selector('node')
  .css({
    'color': '#000000',
    'content': 'data(name)',
    'text-valign': 'center',
    'background-color': '#FFFFFF',
    'border-width': 1,
    'border-color': '#707070'
  })

and a node

cy.add(
    { group: "nodes", data: { id: "n0", name: 'name' }, position: { x: 100, y: 100 } }
);

and updating the node with

cy.$('#n0').data('name', 'newName')

Using 2.2.10, the node label (content) is updated on the canvas as expected. Since upgrading to version 2.3.1, this no longer works. Any suggestions for how to achieve this again would be greatly appreciated!

Edit I don't know why that doesn't work, but for anyone else having this problem, for the time being I'm using eles.flashClass() to very briefly remove the node label for the node. When the temporary class is removed, the correct label is rendered. E.g.

in the css style set on init

.selector('node.nolabel')
    .css({
        'content': ''
})

then to rename a node

cy.$('#n0').data('name', 'newName').flashClass('nolabel',1) //class applied for 1ms then removed

This works but it doesn't seem like it should be necessary, I'd really like to know why

content: 'data(name)'

isn't working - I don't know if it's a bug or I'm doing something wrong, only that it works below version 2.3.0

Hearthstone answered 30/9, 2014 at 14:35 Comment(0)
D
3

Please follow this ticket: https://github.com/cytoscape/cytoscape.js/issues/678

From the ticket:

This is probably due to the performance enhancements on style for 2.3. Now, instead of style being applied cumulatively, a highly performant diff of matching selector contexts is done. And only the properties that need to be applied as a result of the diff are applied. I suspect that because the matching contexts are the same etc, the style is not updated.

Decide answered 1/10, 2014 at 15:50 Comment(1)
Great, thanks! Didn't want to open an issue before I knew I wasn't just using the newest version wrongly.Hearthstone
E
1

I'm not really sure about the quality of my solution, and if it is what you were looking for, but I did this (version >=2.5)

cy.nodes([filter]).on('eventname').css({content:[newLabelvalue]})
example: 
var node = cy.$([selector]);
node.on('grab', function () {
            var field = $("input[id="+ nodeId + "]");
            this.css({content: field.val()});
            field.hide();
        });

I didn't declare an init 'content'-property in cytoscape style

hope this helps

Endosteum answered 7/1, 2016 at 15:46 Comment(1)
Thanks for your comment. FYI my issue was fixed in the snapshot build linked at link and mapping node content to 'data(name)' has been working since then.Hearthstone
I
1

This was added in version 2.5.0, see this ticket: https://github.com/cytoscape/cytoscape.js/issues/1041

To use it, set 'width': 'label', and to get extra space around the text use the padding property, for example 'padding': 5 for 5 pixels.

Ivan answered 26/1, 2017 at 19:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.