# UI - add labels inside the switch node

**URL:** <https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206>\
**Category:** Core Development\
**Created:** [24 January 2019 11:45 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206 "2019-01-24T11:45:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![elbriga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/elbriga/32/5372_2.png) [@elbriga](https://discourse.nodered.org/u/elbriga)\
**Post date:** [24 January 2019 11:45 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206/1 "2019-01-24T11:45:10Z")

</div>

Hi,  
I've added labels inside a custom switch node I wrote. The problem is that when I edit de node the redraw function does not call an annonymous function to get the new labels texts.  
I'm new to the enter(),append(),exit() paradigm, so I'm a bit lost!

Here is my code:

```auto
var output_group = d._ports.enter().append("g").attr("class","port_output");
output_group.append("rect").attr("class","port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
                                    .on("mousedown",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("touchstart",(function(){var node = d; return function(d,i){portMouseDown(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("mouseup",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("touchend",(function(){var node = d; return function(d,i){portMouseUp(node,PORT_TYPE_OUTPUT,i);}})() )
                                    .on("mouseover",(function(){var node = d; return function(d,i){portMouseOver(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})())
                                    .on("mouseout",(function(){var node = d; return function(d,i) {portMouseOut(d3.select(this),node,PORT_TYPE_OUTPUT,i);}})());`

                                // NxC Add label nos outputs
                                if(d.type == "Pergunta") {
    	                            output_group.append("svg:text").attr("class", "outport_label").attr("x", -8).attr("y", 5)
    	                            	.style("font-size","10px").style("stroke", "#000").style("stroke-width", "0")
    	                            	.text(function(idx) {
    	                            		return d.rules[idx].v;
    	                            	});
                                }

```

The function in bold only gets called on the 1st redraw() call, not on the next ones.  
Any ideas?

Thanks!

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [24 January 2019 11:50 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206/2 "2019-01-24T11:50:56Z")

</div>

This looks like you are customising nodered itself rather than just a creating a node... Is that right?

A node is only redraw if it's `dirty` property is set to true. The property is reset when it gets drawn. Not sure if thats what you're hitting, but I'm not totally clear on what you are trying.

---

<div class="post-metadata">

**Author:** ![elbriga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/elbriga/32/5372_2.png) [@elbriga](https://discourse.nodered.org/u/elbriga)\
**Post date:** [24 January 2019 12:37 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206/3 "2019-01-24T12:37:35Z")

</div>

Yes, customising node.

The thing is that de node is getting redrawn, the "output\_group.append(..." is getting called, but the anonymous func inside the "tex()" not.  
I think that the "dirty" flag is set, because I need the redraw after editing the node.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [24 January 2019 13:23 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206/4 "2019-01-24T13:23:00Z")

</div>

The `output_group` selection is the result of `d._ports.enter()`. The `enter()` selection causes `d3` to look at `d._ports` and identify any elements in that array that do not already have visual elements. That means it is the list of outputs that have been added since it was last called. So it will only get called once.

If you want to refresh the labels on every redraw, then need to do that outside of the `output_group` selection.

A bit later down in the redraw function is the code:

```auto
if (d._ports) {
    numOutputs = d.outputs || 1;
    y = (d.h/2)-((numOutputs-1)/2)*13;
    var x = d.w - 5;
    d._ports.each(function(d,i) {
            var port = d3.select(this);
            //port.attr("y",(y+13*i)-5).attr("x",x);
            port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
    });
}

```

Inside the `each` loop you could do something like:

```auto
port.selectAll(".outport_label").text(function(idx) { return d.rules[idx].v; });

```

---

<div class="post-metadata">

**Author:** ![elbriga](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/elbriga/32/5372_2.png) [@elbriga](https://discourse.nodered.org/u/elbriga)\
**Post date:** [24 January 2019 16:43 UTC](https://discourse.nodered.org/t/ui-add-labels-inside-the-switch-node/7206/5 "2019-01-24T16:43:06Z")

</div>

Thank you so much. Since I'm in the foreach I did like this:

> port.selectAll(".outport\_label").text(d.rules[i].v);

works!