Icon with optional text

GoJS
1

I am trying to build a nodeTemplate that displays an icon with optional text (see image below). If the text attribute is supplied, then it should render a corresponding TextBlock under the icon. If the text attribute is not provided, it should just render the icon only. The code below works fine but requires me to provide an empty string for the text attribute (… text: "" …). It would be cleaner if it worked without having to provide the text attribute at all. Any ideas?

myDiagram.nodeTemplateMap.add("KafkaCluster",
      $(go.Node, "Auto",
        { movable: false, locationSpot: go.Spot.Center },
        $(go.Shape, "RoundedRectangle", 
          { fill: '#ffffff', strokeWidth: 1, stroke: "#CCCCCC", width: 100 }
        ),
        $(go.Panel, "Vertical",
          $(go.Picture, { 
              margin: new go.Margin(0, 0, 5, 0), width: 64, height: 64,
              source: getKafkaClusterImage()
            }
          ),
          $(go.TextBlock, textStyle(),
            { margin: new go.Margin(0, 0, 5, 0) },
            new go.Binding("visible", "text", function(t) { return ((t && t.length > 0) ? true : false); }),
            new go.Binding("text", "text")
          )
        )
      )
    );

    ...

// It would be good to not have to add ( text: "" ) below
myPalette.model.nodeDataArray = [
  { key: "templateKC1", category: "KafkaCluster", text: "" },
  { key: "templateKC2", category: "KafkaCluster", text: "Confluent Cloud" }
];

iconText

2

I was able to solve this by defaulting the TextBlock to be invisible (see visible: false below).

$(go.TextBlock, textStyle(),
  { visible: false, margin: new go.Margin(0, 0, 5, 0) },
  new go.Binding("visible", "text", function(t) { return ((t && t.length > 0) ? true : false); }),
  new go.Binding("text", "text")
)