Edge labels

[psychemedia]

Is is possible to easily display edge labels either:

1. attached to each edge, or
2. in the info box (so for example a list of edge attribute info associated with each node listed in the info box).

What I'd like to do is pass in a graph where the edge labels are descriptive text, and when I search for a node to see the other nodes it's connected to, get a list of those nodes along with the appropriate edge description.

(I guess the general case would be multi-edges with different labels, in which case it would be nice to list each label edge associated with a particular node).

[computermacgyver]

Thanks for writing and suggesting this. I am working on edge labels directly for edges, but it is part of a large overhaul of the underlying sigmajs code to replace the drawing functions with a full canvas library (using kineticjs right now). Links with this issue

The idea of adding labels to the info box is much easier and probably something that could be added fairly quickly. If you have a bit of JavaScript experience, the basic change needs to happen are:

• At line 463 of main.js store whatever attribute is desired temporarily into the data structure 'n' (e.g., attribute: b.myattribute)
• At line 501 to transfer this attribute over to the new per node structure (e.g., attribute: c[g].attribute
• Finally at line 521 adjust the html to actually print out the attribute (e.g., '('+c.attribute+')')

The only issue I can see arising is how to handle parallel edges in multigraphs (e.g., what should happen if edge a-->b has attribute x, but another parallel edge also connecting a-->b has attribute y). As long as this doesn't occur in your graphs the above changes should work fine.

If you can make the changes and contribute back the code that would be great. If you'd prefer, I'm happy to make the changes as well; I just need to find time to do the testing, etc. Cheers.

[vulpessepluv]

Follow up question :
I seem to be stuck with the same question as psychemedia - was the adapted code ever contributed back, or else are the changes that need to be done somehow available?

Greets, v

[computermacgyver]

Hi vulpessepluv, the changes are described above, but this is one variation that I didn't actually code up myself. The version of sigmajs we use in the plugin at the moment makes it very hard to detect edge hover events, but the newest version of sigmajs makes this easier. We are working on a new version of the plugin, but it is not yet ready for release. Until then, the changes above would work if you only have one edge attribute to display. If you have more than one edge attribute, I would recommend a custom interface using the newest version of sigma for now.

[vulpessepluv]

Hi Scott, thanks a lot for the fast answere!
It seems the exact line numbers have changed a bit due to changes over time.

The only problem I experience is to include '('+c.attribute+')' the right way at the right position, I'd be eternally grateful for a hint, since it's really the last thing I need for my project!

f.push('<li class="membership"><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>");

Greets, v

[TianzhuQin]

I guess the code has been changed for long years. But this issue also make me crazy one time. Here is my code for the last step.@vulpessepluv

f.push('<li class="membership"><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> (" + c.group + ")</li>");