How to add ellipsis to textbox that does not have a set size

GoJS
1

I am having issues aligning items to the correct place.
Here is my main panel that contains some list of template instances.

goMake(
				go.Panel,
				go.Panel.Position,
				{
					desiredSize: new go.Size(112, tooltipHeight),
					alignment: alignment,
					alignmentFocus: go.Spot.Top,
				},
				
				...
				goMake(
					go.Panel,
					go.Panel.Position,
					{
						background: transparentFillColor,
						alignment: new go.Spot(0.5, 1, 0, -24),
						alignmentFocus: go.Spot.Top,
					},
					...
					goMake(
			                        go.Panel,
			                        goObjectTypes.Flow,
			                        {
				                name: 'tooltip-content-flow-panel',
				                 stretch: go.GraphObject.Fill,
				               position: position,
			                       },
			                     new go.Binding('itemArray', '', buildItemArray).ofObject(),
			                    {itemTemplateMap: itemsTemplateMap}
		                      );
				)
			)
		);

ItemTemplateMap contains 2 different kinds of templates. We show an unknown number of instances of each template.
First template:

goMake(
				go.Panel,
				{
					margin: new go.Margin(0, 4, 0, 0),
				},
				goMake(
					go.Shape,
					goObjectTypes.Rectangle,
					{
						desiredSize: new go.Size(4, 14),
						strokeWidth: 0,
					},
					new go.Binding('fill', 'status', (status) => {
								return  '#1AA364';
					})
				)
			);

Second template:

goMake(
				go.Panel,
				go.Panel.Spot,
				{
					margin: new go.Margin(0, 0, 0, 4),
				},

				goMake(
					go.Picture,
					{
						desiredSize: new go.Size(12, 12),
						alignment: go.Spot.LeftCenter,
					},
					new go.Binding('source', 'logical_name', (logical_name) => {
						return mySource;
					})
				),
				goMake(
					go.TextBlock,
					{
						alignment: new go.Spot(0.5, 0.5, 26, 1),
						editable: false,
						font: '400 10px Roboto, Arial, sans-serif',
						stroke: '#323435',
						overflow: go.TextBlock.OverflowEllipsis,
						text:"This text can be long or short",
					},
				)
			);

The desired look is something like this
image

Where T1 represents the first template and T2 represents the second template.
There are an unknown number of instances of the first template. Then there is one instance of the second template. I want the second template to take up all the space that is left and I want the textBox in the second template to use ellipsis if the text is to long. I also want the image to be next to the textBox and not on it.
I understand that in order to use ellipsis I need a width limit. But on the other hand I want the textbox and therefore also t2 to take up as much room as is left.

2

Does this do what you want?

image

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="go.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { resizable: true, width: 300 },
    $(go.Shape,
      { fill: "lightgray" }),
    $(go.Panel, "Table",
      { stretch: go.GraphObject.Horizontal },
      $(go.Panel, "Table",
        new go.Binding("itemArray", "items"),
        {
          column: 0,
          stretch: go.GraphObject.Horizontal,
          margin: 4,
          columnSizing: go.RowColumnDefinition.None,
          defaultColumnSeparatorStroke: "transparent",
          defaultColumnSeparatorStrokeWidth: 4,
          itemTemplate:
            $(go.Panel, "TableColumn",
              $(go.Shape, { width: 20, height: 20 },
                new go.Binding("fill"))
            )
        }),
      $(go.Panel, "Auto",
        {
          column: 1,
          margin: 4,
          stretch: go.GraphObject.Horizontal
        },
        $(go.Shape, { fill: "lightblue" }),
        $(go.Panel, "Table",
          { stretch: go.GraphObject.Horizontal },
          $(go.Shape, "Circle", { column: 0, fill: "yellow", width: 50, height: 50 }),
          $(go.Panel, "Auto",
            { column: 1, stretch: go.GraphObject.Horizontal },
            $(go.Shape, { fill: "lightgreen" }),
            $(go.TextBlock, "lasdjfkljasd;fl jadfjadfjd;lasfj ;lasdjf adsjfklaj sdf;ljasdfj",
              { margin: 4, maxLines: 1, overflow: go.TextBlock.OverflowEllipsis, wrap: go.TextBlock.WrapBreakAll })
          )
        )
      )
    )
  );


myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha",
    items: [
      { },
      { fill: "green" },
      { fill: "blue" },
      { fill: "red" },
    ] },
]);
  </script>
</body>
</html>