Adding pop-up boxes to nodes

[ery010]

Is there a way to add a text-box containing clickable urls to a node with json? Specifically, I want to be able to click on any node on my graph, and have some kind of box that contains a link. I see this feature on the cytoscape.js cola example, but I cannot replicate this on ipycytoscape.

[ianhi]

You can do this using the tooltip, which you can put arbitrary html into. On the released version whatever you set the name attribute of the node data will show up on clicking the node. While on the master branch this has changed to be the tooltip attribute.

For example if you look at the Text on Node example then on the released version you could make the lines look like this:

    { 'data': { 'id': 'desktop', 'name': '<a href="https://github.com/QuantStack/ipycytoscape/issues/82">whatever text you want</a>'} }

And on the master branch you could accomplish this like this:

    { 'data': { 'id': 'desktop', 'name': 'Cytoscape', 'tooltip'="https://github.com/QuantStack/ipycytoscape/issues/82">whatever text you want</a>'} }

[marimeireles]

Yep, I think the solution by @ianhi is the only one I know too.
@ianhi created a method to make easier to deal with tips the set_tooltip_source() method.
You can see an example of its use on the DataFrame interaction example.

[shinokada]

When I use the set_tooltip_source() method, I get the following error.

AttributeError: 'CytoscapeWidget' object has no attribute 'set_tooltip_source'

So I tried the following, the tooltip is not working.
I used the following but did not render at Binder.

data = {
    'nodes': [
        { 'data': { 'id': 'desktop', 'name': 'Cytoscape', 'tooltip':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 1</a>' } },
        { 'data': { 'id': 'a', 'name': 'Grid', 'tooltip':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 2</a>' } },
        { 'data': { 'id': 'b', 'name': 'Cola', 'tooltip':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My 3</a>' } },
        { 'data': { 'id': 'c', 'name': 'Popper', 'tooltip':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My 4</a>' } },
        { 'data': { 'id': 'js', 'name': 'Cytoscape.js', 'tooltip':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My 5</a>' } }
    ],
    'edges': [
        {'data': { 'source': 'desktop', 'target': 'js' }},
        {'data': { 'source': 'a', 'target': 'b' }},
        {'data': { 'source': 'a', 'target': 'c' }},
        {'data': { 'source': 'b', 'target': 'c' }},
        {'data': { 'source': 'js', 'target': 'b' }}
    ]
}

[ery010]

I would put the content in 'tooltip' in 'name' instead. Then add another attribute to display what you originally put in name.
{ 'data': { 'id': 'desktop', 'display_name': 'Cytoscape', 'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 1</a>' } }

You can use the attribute set_style to accomplish this. Check out the Text on Node example. Just change 'content' in 'css' from 'data(name)' to 'data(display_name)' or whatever you decide to name it.

[shinokada]

I used this code as ery010 suggested.

data = {
    'nodes': [
        { 'data': { 'id': 'desktop', 'display_name': 'Cytoscape',  'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 1</a>' } },
        { 'data': { 'id': 'a',  'display_name': 'Cytoscape2', 'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 2</a>' } },
        { 'data': { 'id': 'b', 'display_name': 'Cytoscape3', 'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 3</a>' } },
        { 'data': { 'id': 'c',  'display_name': 'Cytoscape4', 'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 4</a>' } },
        { 'data': { 'id': 'js', 'display_name': 'Cytoscape5',  'name':'<a href="https://github.com/QuantStack/ipycytoscape/issues/82">My text 5</a>' } }
    ],
    'edges': [
        {'data': { 'source': 'desktop', 'target': 'js' }},
        {'data': { 'source': 'a', 'target': 'b' }},
        {'data': { 'source': 'a', 'target': 'c' }},
        {'data': { 'source': 'b', 'target': 'c' }},
        {'data': { 'source': 'js', 'target': 'b' }}
    ]
}

Then I got this image.

It seems that display_name is not rendered.

[ery010]

You'll have to change the style. Here is the code from the Text on Node example I mentioned, but I changed the content to display the 'display_name'

cytoscapeobj.set_style([{ 'selector': 'node', 'css': { 'content': 'data(display_name)', 'text-valign': 'center', 'color': 'white', 'text-outline-width': 2, 'text-outline-color': 'green', 'background-color': 'green' } }, { 'selector': ':selected', 'css': { 'background-color': 'black', 'line-color': 'black', 'target-arrow-color': 'black', 'source-arrow-color': 'black', 'text-outline-color': 'black' }} ])

I'm assuming you are looking for this output.

[ianhi]

I used the following but did not render at Binder.

This is because the Binder is using the most recent release (no set_tooltip_source) instead of the master branch:
https://github.com/QuantStack/ipycytoscape/blob/c51378ff624e0572d6e05657f253bcdcce22edfc/postBuild#L1
https://github.com/QuantStack/ipycytoscape/blob/c51378ff624e0572d6e05657f253bcdcce22edfc/environment.yml#L5

I'm not sure if its desirable but I think the binder could be made to use the master branch by removing ipycytoscape from the installs and adding a python setup.py install to postBuild

content to display the 'display_name

Nice! That's clever

[ianhi]

The tooltip_source is present in the most recent release 0.2.3 and should be working on binder as well now

[SvenSchiffner]

Can be closed?

[marimeireles]

Yes. Thanks @sven5s