Group layout seems to be ignoring Layout properties

Hi Walter,

I have a graph with LayeredDigraphLayout. And I have set parent of each leaf node to isGroup = true and group of each leaf node to leaf’s parent key. because I’m trying to set TreeLayout to all the leaf nodes. This is all works fine but I wasn’t able to set the aligment of the TreeLayout to AlignmentBottomRightBus. It’s just doesn’t work.

Is it possible to do like that? Or do I need to write a custom layout for that?

node data model:

{ "NodeId": 1, "NodeKey": "A1AEQ001", "Caption": "test", "Tooltip": "test", }

edge data model:
{ "EdgeId": 1, "ParentNodeId": 52, "ChildNodeId": 1, "Caption": "test", "Tooltip": "test", "ParentNodeKey": "I1BAL001", "ChildNodeKey": "A1AEQ001" }

code:

`    function init() {

  var $ = go.GraphObject.make;  // for conciseness in defining templates

  myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    {
      layout: $(go.LayeredDigraphLayout,
        {
          direction: 90,
          layerSpacing: 25,
          columnSpacing: 5,
          setsPortSpots: false,
          cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
          initializeOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
          aggressiveOption: go.LayeredDigraphLayout.InitDepthFirstOut,
          packOption: 7,
          setsPortSpots: true
        })
    });

  // define a simple Node template
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",  
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        new go.Binding("fill", "BackgroundColour")),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
        new go.Binding("text", "NodeKey"))
    );

  myDiagram.groupTemplate =
    $(go.Group, "Auto", 
      {
      //layout: $(OffsetLayout)
        layout: $(go.TreeLayout,
               { angle: 90, nodeSpacing: 110, layerSpacing: 130, alignment: go.TreeLayout.AlignmentBottomRightBus })
      },
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        new go.Binding("fill", "BackgroundColour")),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' }, 
        new go.Binding("text", "NodeKey"))
    );

  let groups = [];
  data.Nodes.forEach((x) => {

    if (!data.Edges.some(y => y.ParentNodeKey === x.NodeKey)) {
      x.Group = data.Edges.filter(y => y.ChildNodeKey === x.NodeKey)[0].ParentNodeKey;
      groups.push(x.Group);
    }
  });

  groups.forEach((x) => {

    data.Nodes.filter(y => y.NodeKey === x)[0]["isGroup"] = true;
  });


  myDiagram.model =
    $(go.GraphLinksModel,
      {
        nodeKeyProperty: "NodeKey",
        linkKeyProperty: "NodeKey",
        linkFromKeyProperty: "ParentNodeKey",
        linkToKeyProperty: "ChildNodeKey",
        nodeGroupKeyProperty: "Group",
        nodeDataArray: data.Nodes,
        linkDataArray: data.Edges,

      });

}`

output:
image

expected output for leaf nodes:

I was following the below thread to implement it.

Thanks in advance!

I’m not sure I understand what you are trying to do. You are trying to use a group as the bottom node in a LayeredDigraphLayout. The group has .layout that is a TreeLayout, so that you can arrange the group’s member nodes in a particular way that LayeredDigraphLayout does not do. But I do not understand how you are organizing your model to meet that expectation.

Do you realize that a Group.layout operates on all of a group’s member nodes and links, but does not operate on the group itself? So the parent node in the tree cannot be the group itself, because it won’t participate in the tree layout. You will need to add a dummy group member to act as the tree parent.

I see that you have set the group template to look like a regular node. That’s an idea, but I am also concerned with how you are going to position the tree relative to the group. Furthermore the LayeredDigraphLayout needs to think of that group as being as large as the tree, not as a simple node, so that it leaves enough room for the subtree. But maybe you’ll get lucky.

I have tried using a dummy group. But still leaf node doesnt get arranged using AlignmentBottomRightBus.
image

function init() {

  var $ = go.GraphObject.make;  // for conciseness in defining templates

  myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    {
      layout: $(go.LayeredDigraphLayout,
        {
          direction: 90,
          layerSpacing: 25,
          columnSpacing: 5,
          setsPortSpots: false,
          cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
          initializeOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
          aggressiveOption: go.LayeredDigraphLayout.InitDepthFirstOut,
          packOption: 17,
          setsPortSpots: true
        })
    });

  // define a simple Node template
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",  // the Shape will go around the TextBlock
      $(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
        // Shape.fill is bound to Node.data.color
        new go.Binding("fill", "BackgroundColour")),
      $(go.TextBlock,
        { margin: 8, font: "bold 14px sans-serif", stroke: '#333' }, // Specify a margin to add some room around the text
        // TextBlock.text is bound to Node.data.key
        new go.Binding("text", "NodeKey"))
    );

  myDiagram.groupTemplate =
    $(go.Group,
      $(go.Placeholder),
      {
        layout: $(go.TreeLayout,
          {
            angle: 90,
            treeStyle: go.TreeLayout.StyleLastParents,
            alternateAlignment: go.TreeLayout.AlignmentBottomRightBus,
          })
      }
    );

  let groups = [];
  data.Nodes.forEach((x) => {

    if (!data.Edges.some(y => y.ParentNodeKey === x.NodeKey)) {
      let group = data.Edges.filter(y => y.ChildNodeKey === x.NodeKey)[0].ParentNodeKey;
      x.Group = "g__" + group;
      data.Nodes.filter(y => y.NodeKey === group)[0]["Group"] = group;

      groups.push(x.Group);
    }
  });

  groups.forEach((x) => {

    data.Nodes.push({ NodeKey: x, isGroup: true });
  });

  myDiagram.model =
    $(go.GraphLinksModel,
      {
        nodeKeyProperty: "NodeKey",
        linkKeyProperty: "NodeKey",
        linkFromKeyProperty: "ParentNodeKey",
        linkToKeyProperty: "ChildNodeKey",
        nodeGroupKeyProperty: "Group",
        nodeDataArray: data.Nodes,
        linkDataArray: data.Edges,

      });

}

Simply I just want to arrange leaf level nodes using AlignmentBottomRightBus while using LayeredDigraph Layout for the overall graph. Graph has nodes with multiple parents so I need to use LayeredDigraph. And there too many nodes in the leaf level. Need to arrange them vertically to increase the readability and the width of the overall graph.

Appreciate your help on this.

Its working now. there was an issue with the group names.