Add node color "pill" to right hand info area

[naourass]

I'm trying to add a small pill showing the node color beside every node label in the connections bar, I tried this in the file "main.js" line 513:

"c.colour" shows the color of the connected edge and not the one of the node, I don't really have a javascript experience, how can I fix this please?

[computermacgyver]

sigInst is the copy of sigma.js available. Calling its getNodes method with the id of the node you want will return that node. Then you can get the color property.

So, something like the following should do want you want:

        f.push('<li class="membership"><div class="smallpill" style="background: ' + sigInst.getNodes(c.id)["color"] + ';"></div><a href="#' + c.name + '" onmouseover="sigInst._core.plotter.drawHoverNode(sigInst._core.graph.nodesIndex[\'' + c.id + '\'])\" onclick=\"nodeActive(\'' + c.id + '\')" onmouseout="sigInst.refresh()">' + c.name + "</a></li>");

[naourass]

That's working fine, thank you very much.

[novastra]

This is quite helpful to bring more meaning through colors.

I tried to add a 'Title' to this that would be the name of an attribute. I tried many ways, through 'getnodes' or adding variables to get this attribute which is also the 'groupSelectorAttribute' mentionned in config.json How would you proceed if you wanted to do this?

One more time thank you.

I think a title with the name of the Group of the node or some other information will help the user to know some information without looking at the chart of color.

[computermacgyver]

Hi @princeN ,

Sigma.js stores the user-defined attributes in an "attributes" object. So, if you have an attribute called 'yo', you could access it using the following at this point in the code:

     sigInst.getNodes(c.id)["attr"]["attributes"]["yo"]

updated per below

[novastra]

I tried this but it doesn't work for me, am I doing something wrong?

sigInst.getNodes(c.id)["attributes"]["yo"] > breaks the graph sigInst.getNodes(c.id)["attr"]["yo"] > returns 'undefined' sigInst.getNodes(c.id)["attr"] > returns 'object Object' sigInst.getNodes(c.id)["size"] > works with this and other value in l.388 of sigma.js but I was unable to get an attribute through this.

[novastra]

If someone wants to add the color pill to the search results, add this to line 404 of main.js :

sigInst.getNodes(c[d].id)["color"]

[computermacgyver]

Opps, forgot the core of sigma wraps everything a second time. Try:

     sigInst.getNodes(c.id)["attr"]["attributes"]["yo"]

[novastra]

Works great! Thanks a lot I use this css code for tooltips with the color from the node and the text from an attribute.