HTML in edge label not rendering

[hahla]

Using latest version from bower.

Got a nice graph displayed, want to add tooltips or other label components, starting with a simple html test though and it's rendering as plain-text.

label = { label: 'click me im so

clickable

'}; g.setEdge(srcIdx, targetIdx, label);

Here's a screenshot what it looks like zoomed in by the edge in question.

[Loxos]

As far as I know, the HTML detection is based on the first few characters. dagre treats your label as HTML label if it starts with a HTML tag, so simply change it to something like this:

label = { label: '<div> click me im so <div onclick="alert(123);"> clickable </div> </div>'};

[alienrobotwizard]

When setting the node label you can also specify a "labelType" as "html". Take a look here: https://github.com/Netflix/Lipstick/blob/master/lipstick-server/app/public/js/workflow/graph/graph.js#L227

[hahla]

@thedatachef Thanks I'll take a look at that. Note I'm referring to edge labels not node labels

[alienrobotwizard]

It's the same for both. https://github.com/Netflix/Lipstick/blob/master/lipstick-server/app/public/js/workflow/graph/graph.js#L247

[Lathrisk]

Just for posterity, I was having this problem (5 years later). The solution for this was that the labelType is an attribute of the node itself, while in the case of edges, the labelType attribute is a property of the config object.

e.g.

        node: {
        id: "4321",
        label: "<div>this is an html label</div>,
        labelType: "html",
        class: "nodeWithHTML",
        config: {}
        }

        edge: {
        id: "1234",
        source: "4321",
        target: "9876",
        label: "<div>this is an html label</div>,
        config: { labelType: "html" },
        }

[terrencekuo]

is there documentation somewhere on all the different attributes of the node itself and also for the edge? or pointers to source code I could read?

for example in the dagre-d3/demo/style-attrs.html i see:

g.setEdge("A", "E", {
  label: "Arrowhead class",
  arrowheadClass: 'arrowhead'
});

but I do not see a reference to arrowheadClass anywhere in the source code