Resize a group based on number of nodes and links


I need to resize a group based on number of nodes & links in the group dynamically.
The user can still drag the placeholder but on first load the group must be displaying nodes and links with a proper spacing between them.
I modified the direction and columnSpacing attribute of Group.layout and it works fine. But I want it to happen dynamically rather than hardcoding it.

$$(go.Group, "Auto",
			   {  layout: $$(go.LayeredDigraphLayout,
					   { direction: 0, columnSpacing: 10 })},
					      $$(go.Shape, "Rectangle", // surrounds everything
					    	{ strokeWidth: },
					    	new go.Binding("fill", "color"),
					    	new go.Binding("stroke", "color")),
					      $$(go.Panel, "Vertical",  // position header above the subgraph
					         { defaultAlignment: go.Spot.Left },
					            $$(go.Panel, "Table",  // the header
					               { height: 50, defaultAlignment: go.Spot.Top, stretch: go.GraphObject.Horizontal },
					                  $$("SubGraphExpanderButton", { margin: new go.Margin(5, 5, 0, 5), column: 0, alignment: go.Spot.TopLeft }),  // this Panel acts as a Button
					                  $$(go.Panel, "Vertical", { column: 1, stretch: go.GraphObject.Horizontal },
					                     $$(go.TextBlock,     // group title near top, next to button
					                        { margin: new go.Margin(5,5,0,0), stroke:, font:, alignment: go.Spot.Left },
					                         new go.Binding("text", "name"))
					                  $$(go.Panel, "Vertical",
					                	 { alignment: go.Spot.Right, column: 2 },
					                	 $$(go.Panel, "Auto",
					                	    { alignment: go.Spot.TopRight },
					                	    $$(go.Shape, "Circle",
					                           { width:, height:, 
					                		     strokeWidth:, fill :, margin:, name:"FABRICCIRCLE" }),
									           { width: 25, height: 25 },
										        new go.Binding("source", "iconUrl")
										     new go.Binding("text", "fabricNodeCount"),
										   		stroke:, font:, alignment: go.Spot.BottomCenter
								  // represents area for all member parts
									 { padding: new go.Margin(40, 40), background: "rgba(249,249,249)" })
						        selectionChanged: function(group) {
						        	 var newLayer = group.isSelected ? "Foreground" : "";
						        	 group.layerName = newLayer;
						        	 group.findSubGraphParts().each( function(member) { 
						        		 member.layerName = newLayer; 

Attaching images for reference. Left one has nodes close to each other and links are not displayed with proper spacing. I needed the right image as the initial load output.
Any suggestions???

So you want the value of LayeredDigraphLayout’s layerSpacing to be dependent on the maximum length of the link labels?

I suppose you could just calculate the longest link label and just set LayeredDigraphLayout.layerSpacing appropriately, but that might mean there would be too much space between some layers. How uniform are the link label lengths? If they vary greatly, you should override a method, but let’s first decide if that is necessary. Do you know the minimum and maximum label lengths?

The link labels with not be of more length than shown in image. If you observer the left image the green link lines are not visible properly, I just want the links to display with labels and green lines shown properly.

OK, so you might just need to increase the value of LayeredDigraphLayout.layerSpacing until you are satisfied with the results. If you run into any problems, just ask.