Possible to add "id" field to the SVG string?

[nextgenusfs]

Thanks for the nice and simple implementation, looks like it will be useful for me to draw some DAGs from a workflow. I'm wondering if it would be a simple to add an "id" tag to the SVG circle features, ie:

<circle cx="75.0" cy="15.0" fill="#c65353" r="6.0" stroke="black" stroke-width="2.0" />
<text dominant-baseline="middle" font-family="sans-serif" x="95.0" y="15.0">node1</text>
<circle cx="55.0" cy="35.0" fill="#c6c653" r="6.0" stroke="black" stroke-width="2.0" />
<text dominant-baseline="middle" font-family="sans-serif" x="95.0" y="35.0">node2</text>

In the two nodes that I've shown above, if the circle feature had an id="node1" than it would be possible to just use these SVG images in a web application and easily make the image "clickable" with javascript.

<circle id="node1" cx="75.0" cy="15.0" fill="#c65353" r="6.0" stroke="black" stroke-width="2.0" />

For example then you'd just need some JS like this to make the node1 a link:

document.getElementById("node1").addEventListener("click", function() {
  window.open('www.the-best-link-ever.com')
});

I'm able to do sort of a work-around where can find the node with some python regex and then wrap an html link around the tag which does work. But would perhaps be a little easier if the nodes had ids or some distinguishing field.

[nextgenusfs]

Looks like I can modify the existing SVG with the following function to add id="node" tags:

def add_node_id_tags(svg):
    for rep in [x for x in re.findall(r"<text.*?>(.+?)</text>", svg)]:
        svg = re.sub(r"<circle cx", f'<circle id="{rep}" cx', svg, count=1)
    return svg

It works by finding a list of ordered node names from the svg string and then adding id="node" to each circle tag sequentially.

This is of course a workaround/hack.

[WimYedema]

Good idea! Shouldn't be too hard to add.

[WimYedema]

I made the change in a PR. Could you check if this suits your needs? Let me know if you need more changes, I'll bundle those in a new release...

[nextgenusfs]

Hi @WimYedema, mostly this is perfect. Just made a comment on the PR about there being an additional N character added to each of the node id=, seems like not necessary to prepend that N to each node label.

[WimYedema]

@nextgenusfs The reason for that is that the node label can be anything and the CSS id should start with a non-digit. This is an easy way to guarantee that. I could change this by only adding a letter when the first character is a digit though.

[nextgenusfs]

Would be preferable to only add if it is a digit I guess, to use as a link to another section/etc in JS I need to name in the id= field to be accurate. But if I need to modify it in my particular use case that is okay as well. Perhaps another solution would be to catch/warn/exit if node labels start with digits?

[WimYedema]

I opted for the "n" prefix anyway, it means there are no exceptions and so requires least explanation.

[WimYedema]

It took some time, but I finally released this with 0.4.