sankey: node labels do not render HTML tags

[antoinerg]

As reported on plotly.py: plotly/plotly.py#1499

Note that in hover labels, HTML tags are rendered properly.

See Codepen: https://codepen.io/antoinerg/pen/XQNjNE

[etpinard]

Related: #2859 (might be nice to tackle these two bugs at the same time)

[JMante1]

This seems similar to the issue reported and solved here: #1792
I am rather new to this but I think by adding the .call(svgTextUtils.convertToTspans, gd) line (as in 198 of https://github.com/plotly/plotly.js/blob/e5b8c7197aa68cd919a5c517226206cdefbbbcb1/src/traces/bar/plot.js which does allow html tags to work) after line 1035 of https://github.com/plotly/plotly.js/blob/e5b8c7197aa68cd919a5c517226206cdefbbbcb1/src/traces/sankey/render.js should fix the issue?

[etpinard]

@JMante1 your hypothesis sounds right to me. Wanna try making a PR for us? Thanks!

[JMante1]

Hi, I am having trouble compiling the plotly library on my computer to test the hypothesis. I do have a forked branch with the edits that I think should work though.

[antmoreau]

Any news on that issue ?

[mallikkommaraju]

Hi, I am also eagerly waiting the bug fix. Any news??

Thank you in advance!

[Raimondo-M]

Same issue here, there is any news about it?

[JMante1]

I had a look at it but couldn't get it to work. The same solution doesn't work as I proposed above. I think that is because for the bar you have text append whereas for sankey it is just node label. I can get something that looks somewhat right if you change 1047 in render.js in sankey as shown below. However, this only fixes the display of links and not breaks, additionally links do not appear to be clickable though if you right click and say open in a new tab then it does take you to the correct website.

nodeLabelTextPath.enter()
        .append('tspan')
        .classed(c.cn.nodeLabelTextPath, true)
        .attr('alignment-baseline', 'middle')
		.attr('xlink:href', function(d) {return '#' + d.uniqueNodeLabelPathId;})
        .attr('startOffset', nodeTextOffset)
        .style('fill', nodeTextColor);

    nodeLabelTextPath
        .html(function(d) {return d.horizontal || d.node.dy > 5 ? d.node.label : '';})
        .attr('text-anchor', function(d) {return d.horizontal && d.left ? 'end' : 'start';});

[alexcjohnson]

FYI we cannot use .html - this presents a security risk in some contexts, notably Chart Studio. One way or another it needs to go through svgTextUtils.convertToTspans.