Same diagram not replicated from below code

[opkeydev]

this is diagram with minimize of group.

this is expandable group.

dataGroup = { “class”: “go.GraphLinksModel”,
“nodeDataArray”: [
{“key”:19, “text”:“Email”, source:‘…/…/…/assets/images/email.png’},
{“key”:20, “text”:“sales-force”, source:‘…/…/…/assets/images/sales-force.png’},
{“key”:21, “text”:“shopify”, source:‘…/…/…/assets/images/shopify.png’},
{“key”:22, “text”:“werhouse”, source:‘…/…/…/assets/images/werhouse.png’},
{“key”:24, “text”:“adp”, source:‘…/…/…/assets/images/adp.png’},
{“key”:25, “text”:“custom-app”, source:‘…/…/…/assets/images/custom-app.png’},
{“key”:1, “isGroup”:true, “text”:“Oracle”, “horiz”:true},
{“key”:3, “isGroup”:true, “text”:“Coupa”, “horiz”:true},
{“key”:4, “isGroup”:true, “text”:“Finanace”, “group”:1},
{“key”:26, “isGroup”:true, “text”:“Ap”, “group”:4},
{“key”:6, “isGroup”:true, “text”:“Inventory Management”, “group”:3},
{“key”:7, “text”:“Invoice”, “group”:26},
{“key”:8, “text”:“Ledger”, “group”:26},
{“key”:12, “text”:“Payroll”, “group”:6},
{“key”:13, “text”:“Payroll-1”, “group”:6},
{“key”:14, “text”:“Payroll-2”, “group”:6},
],
“linkDataArray”: [
{ from: 20, to: 19 },
{ from: 20, to: 22 },
{ from: 21, to: 1 },
{ from: 21, to: 22 },
{ from: 22, to: 1 },
{ from: 22, to: 25 },
{ from: 25, to: 20 },
{ from: 25, to: 20 },
{ from: 1, to: 24 },
{ from: 7, to: 12 },

]
}

groupChartData(){

const $ = go.GraphObject.make;
const myDiagram = new go.Diagram("myDiagramDiv",
{
    initialAutoScale: go.Diagram.Uniform,
    layout: $(go.CircularLayout, {spacing:150, isInitial: true, isOngoing: true}),
  go.GridLayout.Position, cellSize: new go.Size(1, 1) }),
  "commandHandler.archetypeGroupData": { isGroup: true, text: "Group", horiz: false },
  "undoManager.isEnabled": true,
  "LinkRelinked": e => {
    var oldnode = e.parameter.part;
    oldnode.invalidateConnectedLinks();
    var link = e.subject;
    if (e.diagram.toolManager.linkingTool.isForwards) {
      link.toNode.invalidateConnectedLinks();
    } else {
      link.fromNode.invalidateConnectedLinks();
    }
  },
});

myDiagram.groupTemplate =
    new go.Group("Auto",
      {
        fromSpot: go.Spot.AllSides,
        toSpot: go.Spot.AllSides,
        background: "blue",
        ungroupable: true,
        
        isSubGraphExpanded: false,
        layout: $(go.LayeredDigraphLayout,
            { direction: 0, columnSpacing: 10, alignOption: go.LayeredDigraphLayout.AlignAll }),
      })
      .bind(new go.Binding("background", "isHighlighted", h => h ? "rgba(255,0,0,0.2)" : "transparent").ofObject())
      .add(new go.Shape("RoundedRectangle",
        { fill: null, strokeWidth: 2 })
        .bind("stroke", "horiz")
        .bind("fill", "horiz"))
      .add(
        new go.Panel("Vertical")  // title above Placeholder
          .add(new go.Panel("Horizontal",  // button next to TextBlock
            { stretch: go.GraphObject.Horizontal})
            .bind("background", "horiz")
            .add(go.GraphObject.make("SubGraphExpanderButton", { alignment: go.Spot.Right, margin: 5 }))
            .add(new go.TextBlock(
              {
                alignment: go.Spot.Left,
                editable: false,
                margin: 5,
                //font: defaultFont(false),
                opacity: 0.95,  // allow some color to show through
                stroke: "#404040"
              })
              .bind("text", "text", null, null)) // `null` as the fourth argument makes this a two-way binding
          ) 
          .add(new go.Placeholder({ padding: 5, alignment: go.Spot.TopLeft }))
      ) 

      myDiagram.nodeTemplate = $(go.Node, "Auto",
                    { 
                        fromLinkable: true, 
                        toLinkable: true,
                        fromLinkableDuplicates: true, 
                        toLinkableDuplicates: true,
                        fromSpot: go.Spot.AllSides, 
                        toSpot: go.Spot.AllSides
                    },
                  $(go.Shape, "RoundedRectangle", { 
                    strokeWidth: 0, 
                    fill:'lightgreen',
                    name: "SHAPE", 
                    cursor: "pointer",
                    portId: "",
                    fromLinkable: true, toLinkable: true,
                    fromLinkableDuplicates: true, toLinkableDuplicates: true,
                    fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
                },
                     
                      new go.Binding("fill", "white")),
                  $(go.Picture, { margin: 8, width: 55, height: 55 },
                      new go.Binding("source")),
                  $(go.TextBlock,
                      {
                        row: 0, 
                        alignment: go.Spot.Center,
                        font: "16px Roboto, sans-serif",
                        stroke: "#ffffff",
                        maxSize: new go.Size(160, NaN),
                      },
                      new go.Binding("text", "text"),
                      new go.Binding("visible", "source", (source) =>  source == '' )
                  ) 
              );


    myDiagram.linkTemplate = $(go.Link,
      { routing: go.Link.AvoidsNodes, corner: 10,},
      $(go.Shape, { strokeWidth: 2 }),
      $(go.Shape, { toArrow: "RoundedTriangle" })
    );



    myDiagram.model = go.Model.fromJson(this.dataGroup);

}

this is what i get by applying this code

this is expandable group and i want the same diagram which i mentioned above.

[walter]

I don’t understand what you are trying to ask. Could you please be more specific?

[opkeydev]

I created icons representing groups based on the first image. When these icons are clicked, they should expand to groups and subgroups. However, I’m facing an issue where the resulting diagram does not match the second image. Could you review my code and provide guidance on how to correct the linking process to achieve the desired diagram?

[walter]

Well, your Group template doesn’t include a Picture and maybe a TextBlock at the top-right corner. And you added a “SubGraphExpanderButton” and TextBlock at the top-left corner. I’m not sure why you did that if you are trying to reproduce the groups in your second image.

My real question though is how groups are supposed to know how to allocate empty space within their area. Why isn’t the “Oracle” group a lot shorter? Why show so much empty space in the bottom half? The same questions apply to the “financial” group – why is the “AP” node on the right side with so much empty space on the left side?

[opkeydev]

I have given padding to the groups so that another subgroups should also be expand. my concern is not about the shape of the groups but mainly about linking design is not what really image shows without location of x and y in json.

not able to get this design in diagram.

[walter]

Well, if you have the node locations the way that you want, you could try setting Link.routing to be go.Link.AvoidsNodes.

[opkeydev]

not getting similar diagram

[walter]

How is it different?

Perhaps there is a way to get what you want, if we can understand what it is that isn’t what you wanted.