Only show x number of items in an itemArray

GoJS
1

Each node on my graph has an itemArray with a variable number of items in it (tags), however I only want the first two tags shown with an indicator to show that there are more .
I’m showing a list of all items in a tooltip (this bit is done)

How would I render only the first two items of my array and then optionally show a text label saying “+ x more…” if there are more than two?

Here’s my code so far:

$(
    go.Panel, 'Horizontal', new go.Binding('itemArray', 'tags'),
    {
        itemTemplate: $( go.Panel, 'Auto',
            $(go.Shape, 'RoundedRectangle'),
            $(go.Panel, 'Horizontal', $(go.TextBlock, 'Link Label', new go.Binding('text', 'text')))
        )
    }
)

My model data is along the lines of:

modelData.nodeDataArray = [
  { 
    // ... other properties
    tags: [
      { text: "tag 1", url: "#" },
      { text: "tag 2", url: "#" },
      { text: "tag 3", url: "#" },
      { text: "tag 4", url: "#" },
    ]
  }
]

Desired output:

[tag 1] [tag 2] + x more...
2

There are probably many possible solutions, depending on what other features and behaviors you want.

Perhaps the simplest would be to use a conversion function in your “itemArray” Binding:

const itemTemplate = $(go.Panel, . . .);  // your regular item template

const moreTemplate =
  $(go.Panel, "Horizontal",
    $(go.TextBlock, new go.Binding("text", "length", l => `+ ${l} more`))
  );

function limitItems(arr) {
  if (arr.length <= 2) return arr;
  const a = arr.slice(0, 2);
  a.push({ category: "More", length: arr.length-2 });
  return a;
}

Use it and the moreTemplate:

            $(go.Panel, . . .,
              new go.Binding("itemArray", "someArrayProp", limitItems),
              {
                itemTemplateMap: new go.Map().add("", itemTemplate).add("More", moreTemplate)
              }
            ),
3

Your solution works great in terms of rendering the data exactly how I need it, however I’m getting the following typescript error

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ itemTemplateMap: go.Map<unknown, unknown>; }' is not assignable to parameter of type 'string | GraphObject | EnumValue | Binding | AnimationTrigger | RowColumnDefinition | PanelLayout | HTMLDivElement | (Partial<...> & { ...; }) | (string | ... 6 more ... | (Partial<...> & { ...; }))[]'.
      Types of property 'itemTemplateMap' are incompatible.
        Type 'Map<unknown, unknown>' is not assignable to type 'Map<string, Panel>'.
          Type 'unknown' is not assignable to type 'string'.ts(2769)
go.d.ts(15431, 12): The last overload is declared here.
4

Nevermind, this was just Typescript acting up. I’ve fixed this by adding the templateMap to a variable with a defined type

const linkItemTemplateMap: any = new go.Map().add('', itemTemplate).add('More', moreTemplate);

$( go.Panel, 'Horizontal',
  new go.Binding('itemArray', 'types', limitItems), {
    itemTemplateMap: linkItemTemplateMap
  },
)