Nodes are Overlapping with each other

Hi,
I am using this sample Regrouping Tree View | GoJS

I have used the wrappingColumn: 3 property to make my graph vertical. After applying this property, the following issues occur:

  • If the node template “Text” is large, the nodes overlap with each other. This issue only arises when the API response is large.

  • When the API response is small, it works fine.

You can check the attached screenshot for your reference, where I have marked the overlapping nodes. If the node template “Text” is small, like 2-3 words, then there is no overlapping.

image

Additionally, I am using a slider to expand and collapse my graph. As seen in the attached screenshot, when the API response is heavy, the nodes overlap with each other. However, if I use the slider to collapse and expand my graph, the graph adjusts well and also nodes are not overlapping with each other.

So, I need guidance on how to fix this issue. Even when the API response is large, I want my graph node template to adjust according to the available space and avoid overlapping.

By “API response”, I assume you just mean the text string.

What is clipping the display? Is it the viewport (i.e. the HTMLDivElement) whose width is too narrow to show everything at the current scale?

If each row (except the last one) always contains at least three nodes, then of course if the sum of the widths of the nodes are too wide. Perhaps you also want to set GridLayout.wrappingWidth to a reasonable value for your situation.

By “API response”, i mean nodeDataArray which we need to show the graph.

So Basically my nodeTemplate is overlapping with each other. For this HTMLDivElement i have added scroll bar horizontal and vertical so that graph will render correctly without overlapping.

You mean to say that if the 3 nodes width is too wide then node template will overlap with each other???

Can you guide me i just want my graph should render without overlapping with each and width or nodes are adjust automatically ? How i can do it please let me know

layout: $(go.GridLayout, {
wrappingColumn: 3,
wrappingWidth: 1500,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(4, 4),
}),
I have set wrappingColumn and wrappingWidth as well but still getting issue

That layout is OK too.

What is your group template?

this.$options.mySimpleDiagram.groupTemplateMap.add(
type,
$(
go.Group,
go.Panel.Auto,
{
background: “transparent”,
mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
computesBoundsAfterDrag: true,
computesBoundsIncludingLocation: true,
mouseDrop: finishDrop,
handlesDragDropForMembers: true,
layout: $(go.GridLayout, {
wrappingColumn: 3,
wrappingWidth: 1500,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(4, 4),
}),
},

can you check my group template

That looks OK too. Precisely which version are you using? Have you tried v3.0.4?

So are you saying that the problem with overlapping groups only happens on initialization? How have you defined your Diagram, excluding all of the templates?

I am using this version “gojs”: “2.1.56”,

Let me tell you when i am facing this issue

You can check the attached screenshot below. On the left side, we have a tree structure, as shown in the screenshot, and on the right side, we have a graph. When I click on any node in the tree, it triggers the graph component. I initialize the graph component in the Vue.js watch method

You can see here how i render graph
watch: {
GraphData(newValue, oldValue) {
if (newValue !== oldValue && newValue != null) {
this.renderGraph();
}
},
},

so you can see below initial code excluding template

this.$options.mySimpleDiagram = $(go.Diagram, “mySimpleDiagramDiv”, {
minScale: 0.8,
maxScale: 3,
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,
scale: go.Diagram.documentBounds,

There isn’t enough information for me to guess what the problem might be.

You don’t observe any problems when running the **regrouping Tree View" sample, Regrouping Tree View | GoJS, do you?

In that sample there two Diagram “ModelChanged” listeners (one for each diagram) that deals with changes to the data . Because the data is in fact shared between the two models of the two diagrams, the “ModelChanged” listener is needed to make sure that changes to the data in one model get propagated to the other model. It does that by finding the corresponding Part in the other model and updating the other diagram. I wonder if that code is causing a problem with initialization, which causes a problem with updating.

Just let me know the solution of overlapping issue which we discusses above. Please ignore **regrouping Tree View". Issue is not because of tree view.

let me know how i can fix my overlapping isssue.

I don’t have enough information to be able to figure out what might be wrong. Your Diagram.layout, Group.layout and group template seem to be OK. But it isn’t clear to me that you have answered my question: “So are you saying that the problem with overlapping groups only happens on initialization?”

Have you tried using go-debug.js or go-debug-module.js or go-debug.mjs to make sure there aren’t any unexplained warnings or errors in the console window?

After that, the next step would be to create a minimal stand-alone example that we can debug.

I am not getting any console warnings or errors.

I am experiencing an overlapping issue when I have a nested nodeDataArray, or you could say complex data that needs to be shown in the graph.
It works fine with small data.

What I observed is that when I use the WrappingWidth: Infinity property, the nodes do not overlap with each other. However, when I use wrappingColumn: 3, the nodes overlap in the case of complex data.

Please guide me on how I can fix this issue, or if you have any properties or examples, share them with me."

You said earlier that you were still having this problem when GridLayout.wrappingColumn is 3 and GridLayout.wrappingWidth is 1500. Is that correct?

Are you now saying that there is no problem when GridLayout.wrappingColumn is 3 and GridLayout.wrappingWidth is Infinity?

And you still haven’t answered my question: “So are you saying that the problem with overlapping groups only happens on initialization?”

You are not getting my answer

  • When i am using both the property GridLayout.wrappingColumn is 3 and GridLayout.wrappingWidth is 1500 in that case i am facing overlapping issue. If i use only this property alone GridLayout.wrappingColumn is 3 in that case also getting issue.

  • But when i am using GridLayout.wrappingWidth is Infinity which makes my graph horizontal so in that case graph is working fine. Nodes are not overlapping with each.

Your Ques: And you still haven’t answered my question: “So are you saying that the problem with overlapping groups only happens on initialization?”

Ans : This overlapping issue occurs always during initialization and after that also for complex nodeDataArray.

OK, here is the modified Regrouping sample that I have tried where GridLayout.wrappingColumn is 3, both for the Diagram.layout and the Group.layout.

I cannot reproduce the problem that you are experiencing. Could you please try this sample and tell me how to reproduce the problem? Feel free to simplify the data or the code as much as you need to. Simplifications would be helpful to both of us, to narrow down the problem.

<!DOCTYPE html>
<html><body>
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {

    myDiagram = new go.Diagram("myDiagramDiv",
      {
        "InitialLayoutCompleted": e => updateTotalGroupDepth(),
        // when a drag-drop occurs in the Diagram's background, make it a top-level node
        mouseDrop: e => finishDrop(e, null),
        layout:  // Diagram has simple horizontal layout
          new go.GridLayout({
              wrappingColumn: 3,
              alignment: go.GridAlignment.Position,
              cellSize: new go.Size(1, 1)
            }),
        "commandHandler.archetypeGroupData": { isGroup: true, text: "Group", horiz: false },
        "undoManager.isEnabled": true
      });

    const colors = {
      white: '#fffcf6',
      blue: '#dfebe5',
      darkblue: '#cae0d8',
      yellow: '#fcdba2',
      gray: '#59524c',
      black: '#000000'
    }

    // The one template for Groups can be configured to either layout out its members
    // horizontally or vertically, each with a different default color.

    function makeLayout(horiz) {  // a Binding conversion function
      return new go.GridLayout({
          wrappingColumn: 3,
          alignment: go.GridAlignment.Position,
          cellSize: new go.Size(1, 1),
          spacing: horiz ? new go.Size(8, 8) : new go.Size(5, 5)
        });
    }

    function defaultColor(horiz) {  // a Binding conversion function
      return horiz ? colors.white : colors.darkblue;
    }

    // this function is used to highlight a Group that the selection may be dropped into
    function highlightGroup(e, grp, show) {
      if (!grp) return;
      e.handled = true;
      if (show) {
        // cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
        // instead depend on the DraggingTool.draggedParts or .copiedParts
        var tool = grp.diagram.toolManager.draggingTool;
        var map = tool.draggedParts || tool.copiedParts;  // this is a Map
        // now we can check to see if the Group will accept membership of the dragged Parts
        if (grp.canAddMembers(map.toKeySet())) {
          grp.isHighlighted = true;
          return;
        }
      }
      grp.isHighlighted = false;
    }

    // Upon a drop onto a Group, we try to add the selection as members of the Group.
    // Upon a drop onto the background, or onto a top-level Node, make selection top-level.
    // If this is OK, we're done; otherwise we cancel the operation to rollback everything.
    function finishDrop(e, grp) {
      var ok = (grp !== null
        ? grp.addMembers(grp.diagram.selection, true)
        : e.diagram.commandHandler.addTopLevelParts(e.diagram.selection, true));
      if (!ok) e.diagram.currentTool.doCancel();
      updateTotalGroupDepth();
    }

    myDiagram.groupTemplate =
      new go.Group("Auto",
        {
          ungroupable: true,
          // highlight when dragging into the Group
          mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
          mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
          computesBoundsAfterDrag: true,
          computesBoundsIncludingLocation: true,
          // when the selection is dropped into a Group, add the selected Parts into that Group;
          // if it fails, cancel the tool, rolling back any changes
          mouseDrop: finishDrop,
          handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
          // Groups containing Groups lay out their members horizontally
          layout: makeLayout(false),
          background: defaultColor(false) // default value if not specified in data
        })
        .bind("background", "horiz", defaultColor)
        .bind("layout", "horiz", makeLayout)
        .add(
          new go.Shape("Rectangle",
            { stroke: colors.gray, strokeWidth: 1, hasShadow: true })
            .bindObject("fill", "isHighlighted", h => h ? 'rgba(0,255,0,.3)' : 'transparent'),
          new go.Panel("Vertical")  // title above Placeholder
            .add(
              new go.Panel("Horizontal",  // button next to TextBlock
                { stretch: go.Stretch.Horizontal })
                .add(
                  go.GraphObject.build("SubGraphExpanderButton", { alignment: go.Spot.Right, margin: 5 }),
                  new go.TextBlock(
                    {
                      alignment: go.Spot.Left,
                      editable: true,
                      margin: new go.Margin(6, 10, 6, 1),
                      font: "bold 16px sans-serif",
                      opacity: 0.95,  // allow some color to show through
                      stroke: colors.black
                    })
                    .bind("font", "horiz", (horiz) => horiz ? "bold 20px sans-serif" : "bold 16px sans-serif")
                    .bindTwoWay("text")
                ),  // end Horizontal Panel
              new go.Placeholder({ padding: 8, margin: 4, alignment: go.Spot.TopLeft })
            )  // end Vertical Panel
        )  // end Auto Panel


    myDiagram.nodeTemplate =
      new go.Node("Auto",
        { // dropping on a Node is the same as dropping on its containing Group, even if it's top-level
          mouseDrop: (e, node) => finishDrop(e, node.containingGroup),
          isShadowed: true,
          shadowBlur: 0,
          shadowColor: colors.gray,
          shadowOffset: new go.Point(4.5, 3.5)
        })
        .add(new go.Shape("RoundedRectangle", { fill: colors.yellow, stroke: null, strokeWidth: 0 }))
        .add(new go.TextBlock(
          {
            margin: 8,
            editable: true,
            font: "13px sans-serif",
          })
          .bindTwoWay("text"));

    // initialize the Palette and its contents
    myPalette =
      new go.Palette("myPaletteDiv",
        {
          nodeTemplateMap: myDiagram.nodeTemplateMap,
          groupTemplateMap: myDiagram.groupTemplateMap
        });

    myPalette.model = new go.GraphLinksModel([
      { text: "New Node", color: "#ACE600" },
      { isGroup: true, text: "H Group", horiz: true },
      { isGroup: true, text: "V Group", horiz: false }
    ]);

    var slider = document.getElementById("levelSlider");
    slider.addEventListener('change', reexpand);
    slider.addEventListener('input', reexpand);

    load();
  }

  function reexpand(e) {
    myDiagram.commit(diag => {
      var level = parseInt(document.getElementById("levelSlider").value);
      diag.findTopLevelGroups().each(g => expandGroups(g, 0, level))
    }, "reexpand");
  }
  function expandGroups(g, i, level) {
    if (!(g instanceof go.Group)) return;
    g.isSubGraphExpanded = i < level;
    g.memberParts.each(m => expandGroups(m, i + 1, level))
  }
  function updateTotalGroupDepth() {
    let d = 0;
    myDiagram.findTopLevelGroups().each(g => d = Math.max(d, groupDepth(g)));
    document.getElementById("levelSlider").max = Math.max(0, d);
  }
  function groupDepth(g) {
    if (!(g instanceof go.Group)) return 0;
    let d = 1;
    g.memberParts.each(m => d = Math.max(d, groupDepth(m)+1));
    return d;
  }

  // save a model to and load a model from JSON text, displayed below the Diagram
  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
  window.addEventListener('DOMContentLoaded', init);
</script>

<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myPaletteDiv" style="width: 130px; margin-right: 2px; background-color: #dfebe5; border: solid 1px black">
    </div>
    <div id="myDiagramDiv" style="flex-grow: 1; height: 500px; background-color: #dfebe5; border: solid 1px black">
    </div>
  </div>
  <p>
    This sample allows the user to drag nodes, including groups, into and out of groups,
    both from the Palette as well as from within the Diagram.
    See the <a href="../intro/groups.html">Groups Intro page</a> for an explanation of GoJS Groups.
  </p>
  <p>
    Highlighting to show feedback about potential addition to a group during a drag is implemented
    using <a>GraphObject.mouseDragEnter</a> and <a>GraphObject.mouseDragLeave</a> event handlers.
    Because <a>Group.computesBoundsAfterDrag</a> is true, the Group's <a>Placeholder</a>'s bounds are
    not computed until the drop happens, so the group does not continuously expand as the user drags
    a member of a group.
  </p>
  <p>
    When a drop occurs on a Group or a regular Node, the <a>GraphObject.mouseDrop</a> event handler
    adds the selection (the dragged Nodes) to the Group as new members.
    The <a>Diagram.mouseDrop</a> event handler changes the dragged selected Nodes to be top-level,
    rather than members of whatever Groups they had been in.
  </p>
  <p>
    The slider controls how many nested levels of Groups are expanded. </br>
    Semantic zoom level: <input id="levelSlider" type="range" min="0" max="5" />
  </p>
  <div id="buttons">
    <button id="saveModel" onclick="save()">Save</button>
    <button id="loadModel" onclick="load()">Load</button>
    Diagram Model saved in JSON format:
  </div>
  <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "GraphLinksModel",
  "nodeDataArray": [
{"key":1,"isGroup":true,"text":"Main 1","horiz":true},
{"key":2,"isGroup":true,"text":"Main 2","horiz":true},
{"key":3,"isGroup":true,"text":"Group A","group":1},
{"key":4,"isGroup":true,"text":"Group B","group":1},
{"key":5,"isGroup":true,"text":"Group C","group":2},
{"key":6,"isGroup":true,"text":"Group D","group":2},
{"key":7,"isGroup":true,"text":"Group E","group":6},
{"text":"First A","group":3,"key":-7},
{"text":"Second A","group":3,"key":-8},
{"text":"First B","group":4,"key":-9},
{"text":"Second B","group":4,"key":-10},
{"text":"Third B","group":4,"key":-11},
{"text":"First C","group":5,"key":-12},
{"text":"Second C","group":5,"key":-13},
{"text":"First D","group":6,"key":-14},
{"text":"First E","group":7,"key":-15},
{"key":-17,"isGroup":true,"text":"Group A","group":7},
{"text":"First A","group":-17,"key":-18},
{"text":"Second A","group":-17,"key":-19},
{"key":-20,"isGroup":true,"text":"Group E","group":3},
{"text":"First E","group":-20,"key":-21},
{"key":-22,"isGroup":true,"text":"Group A","group":-20},
{"text":"First A","group":-22,"key":-23},
{"text":"Second A","group":-22,"key":-24},
{"key":-25,"isGroup":true,"text":"Main 1","horiz":true},
{"key":-26,"isGroup":true,"text":"Group A","group":-25},
{"text":"First A","group":-26,"key":-27},
{"text":"Second A","group":-26,"key":-28},
{"key":-29,"isGroup":true,"text":"Group E","group":-26},
{"text":"First E","group":-29,"key":-30},
{"key":-31,"isGroup":true,"text":"Group A","group":-29},
{"text":"First A","group":-31,"key":-32},
{"text":"Second A","group":-31,"key":-33},
{"key":-34,"isGroup":true,"text":"Group B","group":-25},
{"text":"First B","group":-34,"key":-35},
{"text":"Second B","group":-34,"key":-36},
{"text":"Third B","group":-34,"key":-37}
],
  "linkDataArray": []}
  </textarea>
</div>
</body></html>

Hi,

You can check my code below. I have used dummy graphData so that you can see the overlapping issue when data is large. My code is in Vue.js; please use this code because a few things that HTML supports are not supported by Vue.js 3. That’s why I am sharing the Vue.js code with you. Use my code and call this file in the Vue.js template.

Please check my code and let me know any suggestions so that my overlapping issue will fix.

<template>
  <div>
    <div class="slidecontainer">
      <input type="range" min="0" max="10" value="10" id="levelSlider" />
    </div>
    <div id="reGroupingDiagram" class="graph"></div>
  </div>
</template>

<script>
import * as go from "gojs";

export default {
  name: "SimpleGraph",
  data() {
    return {
      myReGroupingDiagram: [],
      graphData: {
        nodeDataArray: [
          {
            key: "0",
            text: "aaa.text.google.info.data",
            group: "",
            isGroup: true,
          },
          {
            key: "1",
            text: "datatattattatta",
            group: "0",
            isGroup: true,
          },
          {
            key: "2",
            text: "tetsing",
            group: "1",
            isGroup: true,
          },
          {
            key: "3",
            text: "infolistofdatatnode",
            group: "2",
            isGroup: false,
          },
          {
            key: "4",
            text: "myProjectdummydata",
            group: "0",
            isGroup: true,
          },
          {
            key: "5",
            text: "test",
            group: "4",
            isGroup: true,
          },
          {
            key: "6",
            text: "listofProvider",
            group: "5",
            isGroup: false,
          },
          {
            key: "7",
            text: "testingofdata",
            group: "4",
            isGroup: true,
          },
          {
            key: "8",
            text: "simpleinfolist",
            group: "7",
            isGroup: false,
          },
          {
            key: "9",
            text: "settinglisthfhjgf",
            group: "0",
            isGroup: true,
          },
          {
            key: "10",
            text: "test5",
            group: "9",
            isGroup: true,
          },
          {
            key: "11",
            text: "testtestetestetste3",
            group: "10",
            isGroup: false,
          },
          {
            key: "12",
            text: "mapping",
            group: "1",
            isGroup: true,
          },
          {
            key: "13",
            text: "mappingdatataoflust",
            group: "12",
            isGroup: false,
          },
          {
            key: "14",
            text: "codinglist",
            group: "0",
            isGroup: true,
          },
          {
            key: "15",
            text: "Group123",
            group: "14",
            isGroup: true,
          },
          {
            key: "16",
            text: "group234",
            group: "15",
            isGroup: true,
          },
          {
            key: "17",
            text: "Group12636355353563",
            group: "16",
            isGroup: false,
          },
          {
            key: "18",
            text: "Group333333333",
            group: "16",
            isGroup: false,
          },
          {
            key: "19",
            text: "groupkey",
            group: "14",
            isGroup: true,
          },
          {
            key: "20",
            text: "group2",
            group: "19",
            isGroup: true,
          },
          {
            key: "21",
            text: "group352353375365363755",
            group: "20",
            isGroup: false,
          },
          {
            key: "22",
            text: "group63667456345634554",
            group: "15",
            isGroup: true,
          },
          {
            key: "23",
            text: "node12",
            group: "22",
            isGroup: true,
          },
          {
            key: "24",
            text: "group63673847346734747",
            group: "23",
            isGroup: false,
          },
          {
            key: "25",
            text: "group98848893746764",
            group: "22",
            isGroup: false,
          },
          {
            key: "26",
            text: "group3672543422",
            group: "0",
            isGroup: true,
          },
          {
            key: "27",
            text: "group782365334354",
            group: "26",
            isGroup: false,
          },
          {
            key: "28",
            text: "group65233234",
            group: "19",
            isGroup: true,
          },
          {
            key: "29",
            text: "group276534534543",
            group: "28",
            isGroup: false,
          },
          {
            key: "30",
            text: "group3266533",
            group: "2",
            isGroup: false,
          },
          {
            key: "31",
            text: "group3t2663535",
            group: "4",
            isGroup: true,
          },
          {
            key: "32",
            text: "group87265363535",
            group: "31",
            isGroup: false,
          },
          {
            key: "33",
            text: "group26638728372",
            group: "0",
            isGroup: true,
          },
          {
            key: "34",
            text: "group0001",
            group: "33",
            isGroup: true,
          },
          {
            key: "35",
            text: "group9987766",
            group: "34",
            isGroup: false,
          },
          {
            key: "36",
            text: "list33",
            group: "9",
            isGroup: true,
          },
          {
            key: "37",
            text: "group23764762356323",
            group: "36",
            isGroup: false,
          },
          {
            key: "38",
            text: "group24242424242",
            group: "33",
            isGroup: true,
          },
          {
            key: "39",
            text: "group8278736353",
            group: "38",
            isGroup: false,
          },
          {
            key: "40",
            text: "group7653343453",
            group: "19",
            isGroup: true,
          },
          {
            key: "41",
            text: "group7835635733",
            group: "40",
            isGroup: false,
          },
          {
            key: "42",
            text: "group938237836763",
            group: "22",
            isGroup: false,
          },
          {
            key: "43",
            text: "info223",
            group: "1",
            isGroup: true,
          },
          {
            key: "44",
            text: "grpup833838",
            group: "43",
            isGroup: false,
          },
        ],
        linkDataArray: [
          {
            from: "25",
            to: "24",
          },
          {
            from: "24",
            to: "44",
          },
          {
            from: "24",
            to: "32",
          },
          {
            from: "24",
            to: "42",
          },
          {
            from: "24",
            to: "30",
          },
          {
            from: "24",
            to: "8",
          },
          {
            from: "24",
            to: "6",
          },
          {
            from: "24",
            to: "29",
          },
          {
            from: "24",
            to: "39",
          },
          {
            from: "24",
            to: "17",
          },
          {
            from: "24",
            to: "27",
          },
          {
            from: "24",
            to: "37",
          },
          {
            from: "24",
            to: "13",
          },
          {
            from: "24",
            to: "35",
          },
          {
            from: "24",
            to: "11",
          },
          {
            from: "24",
            to: "21",
          },
          {
            from: "24",
            to: "41",
          },
          {
            from: "24",
            to: "3",
          },
          {
            from: "24",
            to: "18",
          },
        ],
      },
    };
  },

  mounted() {
    this.renderSimpleGraph();
    var slider = document.getElementById("levelSlider");
    slider.addEventListener("change", this.reexpand);
    slider.addEventListener("input", this.reexpand);
  },
  methods: {
    renderSimpleGraph() {
      const $ = go.GraphObject.make;
      this.$options.myReGroupingDiagram = $(go.Diagram, "reGroupingDiagram", {
        InitialLayoutCompleted: (e) => {
          e.diagram.scale = 0.8;
          e.diagram.contentAlignment = go.Spot.Center;
        },
        mouseDrop: (e) => finishDrop(e, null),
        layout: $(go.GridLayout, {
          wrappingColumn: 3,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(1, 1),
        }),
        allowCopy: false,
        allowZoom: true,
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        "commandHandler.archetypeGroupData": {
          isGroup: true,
          category: "OfNodes",
        },
        "undoManager.isEnabled": true,
        ChangedSelection: (e) => {
          if (myChangingSelection) return;
          myChangingSelection = true;
          var diagnodes = new go.Set();
          this.$options.myReGroupingDiagram.selection.each((n) =>
            diagnodes.add(n)
          );
          this.$options.myReGroupingDiagram.clearSelection();
          this.$options.myReGroupingDiagram.selectCollection(diagnodes);
          myChangingSelection = false;
        },
      });

      var myChangingSelection = false;

      function highlightGroup(e, grp, show) {
        if (!grp) return;
        e.handled = true;
        if (show) {
          var tool = grp.diagram.toolManager.draggingTool;
          var map = tool.draggedParts || tool.copiedParts;
          if (grp.canAddMembers(map.toKeySet())) {
            grp.isHighlighted = true;
            return;
          }
        }
        grp.isHighlighted = false;
      }

      function finishDrop(e, grp) {
        var ok =
          grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(
                e.diagram.selection,
                true
              );
        if (!ok) e.diagram.currentTool.doCancel();
      }

      const createGroupTemplate = (type) => {
        this.$options.myReGroupingDiagram.groupTemplateMap.add(
          type,
          $(
            go.Group,
            go.Panel.Auto,
            {
              background: "transparent",
              mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
              mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
              computesBoundsAfterDrag: true,
              computesBoundsIncludingLocation: true,
              mouseDrop: finishDrop,
              handlesDragDropForMembers: true,
              layout: $(go.GridLayout, {
                wrappingColumn: 3,
                alignment: go.GridLayout.Position,
                cellSize: new go.Size(1, 1),
                spacing: new go.Size(4, 4),
              }),
            },
            new go.Binding("background", "isHighlighted", (h) =>
              h ? "rgba(255,0,0,0.2)" : "transparent"
            ).ofObject(),
            $(go.Shape, "Rectangle", {
              fill: null,
              stroke: "#0099CC",
              strokeWidth: 2,
            }),
            $(
              go.Panel,
              go.Panel.Vertical,
              $(
                go.Panel,
                go.Panel.Horizontal,

                {
                  stretch: go.GraphObject.Horizontal,
                  margin: 1,
                  background: "#33D3E5",
                },
                $("SubGraphExpanderButton", {
                  alignment: go.Spot.Right,
                  margin: 5,
                }),
                $(
                  go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    editable: false,
                    margin: 5,
                    font: "bold 18px sans-serif",
                    stroke: "#9A6600",
                  },
                  new go.Binding("text", "text").makeTwoWay()
                )
              ),
              $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
            )
          )
        );
      };

      this.$options.myReGroupingDiagram.nodeTemplate = $(
        go.Node,
        go.Panel.Auto,
        {
          mouseDrop: (e, nod) => finishDrop(e, nod.containingGroup),
        },
        $(go.Shape, "Rectangle", { fill: "#ACE600", strokeWidth: 2 }),
        $(
          go.TextBlock,
          {
            margin: 5,
            editable: false,
            font: "bold 13px sans-serif",
            stroke: "#446700",
          },
          new go.Binding("text", "text").makeTwoWay()
        )
      );

      var myChangingModel = false;

      this.graphData.nodeDataArray.forEach((node) => {
        if (node.isGroup) {
          createGroupTemplate("OfGroups");
        }
      });

      this.$options.myReGroupingDiagram.addModelChangedListener((e) => {
        if (e.model.skipsUndoManager) return;
        if (myChangingModel) return;
        myChangingModel = true;
        if (
          e.modelChange === "nodeGroupKey" ||
          e.modelChange === "nodeParentKey"
        ) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.object
          );
          if (treenode !== null) treenode.updateRelationshipsFromData();
        } else if (e.change === go.ChangedEvent.Property) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.object
          );
          if (treenode !== null) treenode.updateTargetBindings();
        } else if (
          e.change === go.ChangedEvent.Insert &&
          e.propertyName === "nodeDataArray"
        ) {
          this.$options.myReGroupingDiagram.model.nodeDataArray.splice(
            e.newParam,
            1
          );
          this.$options.myReGroupingDiagram.model.addNodeData(e.newValue);
        } else if (
          e.change === go.ChangedEvent.Remove &&
          e.propertyName === "nodeDataArray"
        ) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.oldValue
          );
          if (treenode !== null)
            this.$options.myReGroupingDiagram.remove(treenode);
        }
        myChangingModel = false;
      });

      this.graphData.nodeDataArray.forEach((node) => {
        if (node.isGroup) {
          node.category = "OfGroups";
        }
      });

      this.$options.myReGroupingDiagram.linkTemplate = $(
        go.Link,
        {
          corner: 15,
          curve: go.Link.Bezier,
          routing: go.Link.AvoidsNodes,
        },
        $(go.Shape, {
          toArrow: "OpenTriangle",
          fill: "#666666",
          stroke: "#666666",
          strokeWidth: 0.5,
        }),
        $(go.Shape, { toArrow: "Standard", stroke: "#666666", fill: "#666666" })
      );

      this.$options.myReGroupingDiagram.model = new go.GraphLinksModel(
        this.graphData.nodeDataArray,
        this.graphData.linkDataArray
      );
    },

    reexpand(e) {
      var myDiagram = go.Diagram.fromDiv(
        document.getElementById("reGroupingDiagram")
      );
      var level = parseInt(document.getElementById("levelSlider").value);
      myDiagram.startTransaction("reexpand");
      myDiagram.findTopLevelGroups().each((g) => {
        this.expandGroups(g, 0, level);
      });
      myDiagram.commitTransaction("reexpand");
    },

    expandGroups(g, i, level) {
      if (!(g instanceof go.Group)) return;
      g.isSubGraphExpanded = i < level;
      if (g.isSubGraphExpanded) {
        g.memberParts.each((m) => {
          this.expandGroups(m, i + 1, level);
        });
      } else {
        g.memberParts.each((m) => {
          this.expandGroups(m, i, level);
        });
      }
    },
  },
};
</script>
<style>
.graph {
  width: 100%;
  height: 550px !important;
}
</style>

Your “ChangedSelection” DiagramEvent listener is modifying the Diagram.selection – that is not supported. I commented it out.

I also commented out the “ModelChanged” listener, which would seem only appropriate when there is a separate tree view.

I also removed the many calls to createGroupTemplate (why call it more than once with the same argument “OfGroups”?) and also removed the code changing the node data category to be “OfGroups”, just using the default group template name/category.

I could reproduce the problem with 2.1.56. Your code seems to work well with 2.3.17. I suggest that you upgrade at least to 2.3.17.

Here’s the complete sample I worked with:

<!DOCTYPE html>
<html>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>

  <script src="https://unpkg.com/[email protected]"></script>
  <script id="code">
const $ = go.GraphObject.make;
const myDiagram =
  $(go.Diagram, "myDiagramDiv", {
      InitialLayoutCompleted: (e) => {
        e.diagram.scale = 0.8;
        e.diagram.contentAlignment = go.Spot.Center;
      },
      mouseDrop: (e) => finishDrop(e, null),
      layout: $(go.GridLayout, {
        wrappingColumn: 3,
        alignment: go.GridLayout.Position,
        cellSize: new go.Size(1, 1),
      }),
      allowCopy: false,
      allowZoom: true,
      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
      "commandHandler.archetypeGroupData": {
        isGroup: true,
        category: "OfNodes",
      },
      "undoManager.isEnabled": true,
      // ChangedSelection: (e) => {
      //   if (myChangingSelection) return;
      //   myChangingSelection = true;
      //   var diagnodes = new go.Set();
      //   myDiagram.selection.each((n) =>
      //     diagnodes.add(n)
      //   );
      //   myDiagram.clearSelection();
      //   myDiagram.selectCollection(diagnodes);
      //   myChangingSelection = false;
      // },
    });
// myDiagram.addModelChangedListener((e) => {
//   if (e.model.skipsUndoManager) return;
//   if (myChangingModel) return;
//   myChangingModel = true;
//   if (
//     e.modelChange === "nodeGroupKey" ||
//     e.modelChange === "nodeParentKey"
//   ) {
//     var treenode = myDiagram.findNodeForData(
//       e.object
//     );
//     if (treenode !== null) treenode.updateRelationshipsFromData();
//   } else if (e.change === go.ChangedEvent.Property) {
//     var treenode = myDiagram.findNodeForData(
//       e.object
//     );
//     if (treenode !== null) treenode.updateTargetBindings();
//   } else if (
//     e.change === go.ChangedEvent.Insert &&
//     e.propertyName === "nodeDataArray"
//   ) {
//     myDiagram.model.nodeDataArray.splice(
//       e.newParam,
//       1
//     );
//     myDiagram.model.addNodeData(e.newValue);
//   } else if (
//     e.change === go.ChangedEvent.Remove &&
//     e.propertyName === "nodeDataArray"
//   ) {
//     var treenode = myDiagram.findNodeForData(
//       e.oldValue
//     );
//     if (treenode !== null)
//       myDiagram.remove(treenode);
//   }
//   myChangingModel = false;
// });

//var myChangingSelection = false;

function highlightGroup(e, grp, show) {
  if (!grp) return;
  e.handled = true;
  if (show) {
    var tool = grp.diagram.toolManager.draggingTool;
    var map = tool.draggedParts || tool.copiedParts;
    if (grp.canAddMembers(map.toKeySet())) {
      grp.isHighlighted = true;
      return;
    }
  }
  grp.isHighlighted = false;
}

function finishDrop(e, grp) {
  var ok =
    grp !== null
      ? grp.addMembers(grp.diagram.selection, true)
      : e.diagram.commandHandler.addTopLevelParts(
          e.diagram.selection,
          true
        );
  if (!ok) e.diagram.currentTool.doCancel();
}

//const createGroupTemplate = (type) => {
//  myDiagram.groupTemplateMap.add(
//    type,
myDiagram.groupTemplate =
    $(
      go.Group,
      go.Panel.Auto,
      {
        background: "transparent",
        mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
        mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
        computesBoundsAfterDrag: true,
        computesBoundsIncludingLocation: true,
        mouseDrop: finishDrop,
        handlesDragDropForMembers: true,
        layout: $(go.GridLayout, {
          wrappingColumn: 3,
          alignment: go.GridLayout.Position,
          cellSize: new go.Size(1, 1),
          spacing: new go.Size(4, 4),
        }),
      },
      new go.Binding("background", "isHighlighted", (h) =>
        h ? "rgba(255,0,0,0.2)" : "transparent"
      ).ofObject(),
      $(go.Shape, "Rectangle", {
        fill: null,
        stroke: "#0099CC",
        strokeWidth: 2,
      }),
      $(
        go.Panel,
        go.Panel.Vertical,
        $(
          go.Panel,
          go.Panel.Horizontal,

          {
            stretch: go.GraphObject.Horizontal,
            margin: 1,
            background: "#33D3E5",
          },
          $("SubGraphExpanderButton", {
            alignment: go.Spot.Right,
            margin: 5,
          }),
          $(
            go.TextBlock,
            {
              alignment: go.Spot.Left,
              editable: false,
              margin: 5,
              font: "bold 18px sans-serif",
              stroke: "#9A6600",
            },
            new go.Binding("text", "text").makeTwoWay()
          )
        ),
        $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
      )
    )
//   );
// };

myDiagram.nodeTemplate = $(
  go.Node,
  go.Panel.Auto,
  {
    mouseDrop: (e, nod) => finishDrop(e, nod.containingGroup),
  },
  $(go.Shape, "Rectangle", { fill: "#ACE600", strokeWidth: 2 }),
  $(
    go.TextBlock,
    {
      margin: 5,
      editable: false,
      font: "bold 13px sans-serif",
      stroke: "#446700",
    },
    new go.Binding("text", "text").makeTwoWay()
  )
);

myDiagram.linkTemplate = $(
    go.Link,
    {
      corner: 15,
      curve: go.Link.Bezier,
      routing: go.Link.AvoidsNodes,
    },
    $(go.Shape, {
      toArrow: "OpenTriangle",
      fill: "#666666",
      stroke: "#666666",
      strokeWidth: 0.5,
    }),
    $(go.Shape, { toArrow: "Standard", stroke: "#666666", fill: "#666666" })
  );

var myChangingModel = false;

myDiagram.model = new go.GraphLinksModel([
    {
      key: "0",
      text: "aaa.text.google.info.data",
      group: "",
      isGroup: true,
    },
    {
      key: "1",
      text: "datatattattatta",
      group: "0",
      isGroup: true,
    },
    {
      key: "2",
      text: "tetsing",
      group: "1",
      isGroup: true,
    },
    {
      key: "3",
      text: "infolistofdatatnode",
      group: "2",
      isGroup: false,
    },
    {
      key: "4",
      text: "myProjectdummydata",
      group: "0",
      isGroup: true,
    },
    {
      key: "5",
      text: "test",
      group: "4",
      isGroup: true,
    },
    {
      key: "6",
      text: "listofProvider",
      group: "5",
      isGroup: false,
    },
    {
      key: "7",
      text: "testingofdata",
      group: "4",
      isGroup: true,
    },
    {
      key: "8",
      text: "simpleinfolist",
      group: "7",
      isGroup: false,
    },
    {
      key: "9",
      text: "settinglisthfhjgf",
      group: "0",
      isGroup: true,
    },
    {
      key: "10",
      text: "test5",
      group: "9",
      isGroup: true,
    },
    {
      key: "11",
      text: "testtestetestetste3",
      group: "10",
      isGroup: false,
    },
    {
      key: "12",
      text: "mapping",
      group: "1",
      isGroup: true,
    },
    {
      key: "13",
      text: "mappingdatataoflust",
      group: "12",
      isGroup: false,
    },
    {
      key: "14",
      text: "codinglist",
      group: "0",
      isGroup: true,
    },
    {
      key: "15",
      text: "Group123",
      group: "14",
      isGroup: true,
    },
    {
      key: "16",
      text: "group234",
      group: "15",
      isGroup: true,
    },
    {
      key: "17",
      text: "Group12636355353563",
      group: "16",
      isGroup: false,
    },
    {
      key: "18",
      text: "Group333333333",
      group: "16",
      isGroup: false,
    },
    {
      key: "19",
      text: "groupkey",
      group: "14",
      isGroup: true,
    },
    {
      key: "20",
      text: "group2",
      group: "19",
      isGroup: true,
    },
    {
      key: "21",
      text: "group352353375365363755",
      group: "20",
      isGroup: false,
    },
    {
      key: "22",
      text: "group63667456345634554",
      group: "15",
      isGroup: true,
    },
    {
      key: "23",
      text: "node12",
      group: "22",
      isGroup: true,
    },
    {
      key: "24",
      text: "group63673847346734747",
      group: "23",
      isGroup: false,
    },
    {
      key: "25",
      text: "group98848893746764",
      group: "22",
      isGroup: false,
    },
    {
      key: "26",
      text: "group3672543422",
      group: "0",
      isGroup: true,
    },
    {
      key: "27",
      text: "group782365334354",
      group: "26",
      isGroup: false,
    },
    {
      key: "28",
      text: "group65233234",
      group: "19",
      isGroup: true,
    },
    {
      key: "29",
      text: "group276534534543",
      group: "28",
      isGroup: false,
    },
    {
      key: "30",
      text: "group3266533",
      group: "2",
      isGroup: false,
    },
    {
      key: "31",
      text: "group3t2663535",
      group: "4",
      isGroup: true,
    },
    {
      key: "32",
      text: "group87265363535",
      group: "31",
      isGroup: false,
    },
    {
      key: "33",
      text: "group26638728372",
      group: "0",
      isGroup: true,
    },
    {
      key: "34",
      text: "group0001",
      group: "33",
      isGroup: true,
    },
    {
      key: "35",
      text: "group9987766",
      group: "34",
      isGroup: false,
    },
    {
      key: "36",
      text: "list33",
      group: "9",
      isGroup: true,
    },
    {
      key: "37",
      text: "group23764762356323",
      group: "36",
      isGroup: false,
    },
    {
      key: "38",
      text: "group24242424242",
      group: "33",
      isGroup: true,
    },
    {
      key: "39",
      text: "group8278736353",
      group: "38",
      isGroup: false,
    },
    {
      key: "40",
      text: "group7653343453",
      group: "19",
      isGroup: true,
    },
    {
      key: "41",
      text: "group7835635733",
      group: "40",
      isGroup: false,
    },
    {
      key: "42",
      text: "group938237836763",
      group: "22",
      isGroup: false,
    },
    {
      key: "43",
      text: "info223",
      group: "1",
      isGroup: true,
    },
    {
      key: "44",
      text: "grpup833838",
      group: "43",
      isGroup: false,
    },
  ],
  [
    {
      from: "25",
      to: "24",
    },
    {
      from: "24",
      to: "44",
    },
    {
      from: "24",
      to: "32",
    },
    {
      from: "24",
      to: "42",
    },
    {
      from: "24",
      to: "30",
    },
    {
      from: "24",
      to: "8",
    },
    {
      from: "24",
      to: "6",
    },
    {
      from: "24",
      to: "29",
    },
    {
      from: "24",
      to: "39",
    },
    {
      from: "24",
      to: "17",
    },
    {
      from: "24",
      to: "27",
    },
    {
      from: "24",
      to: "37",
    },
    {
      from: "24",
      to: "13",
    },
    {
      from: "24",
      to: "35",
    },
    {
      from: "24",
      to: "11",
    },
    {
      from: "24",
      to: "21",
    },
    {
      from: "24",
      to: "41",
    },
    {
      from: "24",
      to: "3",
    },
    {
      from: "24",
      to: "18",
    },
  ]);

//myDiagram.model.nodeDataArray.forEach((node) => {
//  if (node.isGroup) {
//    createGroupTemplate("OfGroups");
//  }
//});
  </script>
</body>
</html>

Actually, I called createGroupTemplate 2-3 times as per the requirements, as we need to dynamically bind the category. That’s why I added this logic and called createGroupTemplate.

myDiagram.model.nodeDataArray.forEach((node) => {
if (node.isGroup) {
createGroupTemplate(“OfGroups”);
}
});

I don’t think creating the group template this way is causing the overlapping issue. What are your thoughts on this?

When I upgraded the GoJS version, the overlapping issue was fixed.

But could you please tell me, the GoJS license key we took for version 2.1.56 will work for an upgraded GoJS version? I tried to upgrade my GoJS version from 2.1.56 to 2.3.19, but the license key is not working. Can you suggest anything here?"

Whether same license key will work for any upgrade gojs version?

No, it is well documented that for a change in major or minor version numbers you need to request a new license key. Deployment | GoJS

Hi,
I discussed with my team, and we can’t upgrade the GoJS library because our existing functionality is impacted if we upgrade. I tried another approach, but I am encountering an issue with it. Can you please help?

Please check my code below. Initially, when the graph loads for the first time, the nodes and text are not aligned properly; the child nodes’ template is on the right side and not properly aligned.
However, when you use the slider, all the nodes align properly. I want my graph to align correctly, just like it does after using the slider control.

You can check my code where I have used this logic to fix the overlapping issue. By using this layout, the overlapping issue is fixed, but I am encountering alignment and margin issues. I tried to fix it but was unable to find a solution.

const setDynamicLayout =
this.graphData.nodeDataArray.length > 30
? $(go.TreeLayout, {
angle: 90, // Vertical layout
layerSpacing: 5,
nodeSpacing: 5,
})
: $(go.GridLayout, {
wrappingColumn: 3, // Default horizontal layout
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
});

Please check my Vue code and guide me on what mistakes I am making. I want to ensure that my graph alignment and margins remain consistent even after using the expand feature.

Please give me any suggestions and solutions.

<template>
  <div>
    <div class="slidecontainer">
      <input type="range" min="0" max="10" value="10" id="levelSlider" />
    </div>
    <div id="reGroupingDiagram" class="graph"></div>
  </div>
</template>

<script>
import * as go from "gojs";

export default {
  name: "SimpleGraph",
  data() {
    return {
      myReGroupingDiagram: [],
      graphData: {
        nodeDataArray: [
          {
            key: "0",
            text: "aaa.text.google.info.data",
            group: "",
            isGroup: true,
          },
          {
            key: "1",
            text: "datatattattatta",
            group: "0",
            isGroup: true,
          },
          {
            key: "2",
            text: "tetsing",
            group: "1",
            isGroup: true,
          },
          {
            key: "3",
            text: "infolistofdatatnode",
            group: "2",
            isGroup: false,
          },
          {
            key: "4",
            text: "myProjectdummydata",
            group: "0",
            isGroup: true,
          },
          {
            key: "5",
            text: "test",
            group: "4",
            isGroup: true,
          },
          {
            key: "6",
            text: "listofProvider",
            group: "5",
            isGroup: false,
          },
          {
            key: "7",
            text: "testingofdata",
            group: "4",
            isGroup: true,
          },
          {
            key: "8",
            text: "simpleinfolist",
            group: "7",
            isGroup: false,
          },
          {
            key: "9",
            text: "settinglisthfhjgf",
            group: "0",
            isGroup: true,
          },
          {
            key: "10",
            text: "test5",
            group: "9",
            isGroup: true,
          },
          {
            key: "11",
            text: "testtestetestetste3",
            group: "10",
            isGroup: false,
          },
          {
            key: "12",
            text: "mapping",
            group: "1",
            isGroup: true,
          },
          {
            key: "13",
            text: "mappingdatataoflust",
            group: "12",
            isGroup: false,
          },
          {
            key: "14",
            text: "codinglist",
            group: "0",
            isGroup: true,
          },
          {
            key: "15",
            text: "Group123",
            group: "14",
            isGroup: true,
          },
          {
            key: "16",
            text: "group234",
            group: "15",
            isGroup: true,
          },
          {
            key: "17",
            text: "Group12636355353563",
            group: "16",
            isGroup: false,
          },
          {
            key: "18",
            text: "Group333333333",
            group: "16",
            isGroup: false,
          },
          {
            key: "19",
            text: "groupkey",
            group: "14",
            isGroup: true,
          },
          {
            key: "20",
            text: "group2",
            group: "19",
            isGroup: true,
          },
          {
            key: "21",
            text: "group352353375365363755",
            group: "20",
            isGroup: false,
          },
          {
            key: "22",
            text: "group63667456345634554",
            group: "15",
            isGroup: true,
          },
          {
            key: "23",
            text: "node12",
            group: "22",
            isGroup: true,
          },
          {
            key: "24",
            text: "group63673847346734747",
            group: "23",
            isGroup: false,
          },
          {
            key: "25",
            text: "group98848893746764",
            group: "22",
            isGroup: false,
          },
          {
            key: "26",
            text: "group3672543422",
            group: "0",
            isGroup: true,
          },
          {
            key: "27",
            text: "group782365334354",
            group: "26",
            isGroup: false,
          },
          {
            key: "28",
            text: "group65233234",
            group: "19",
            isGroup: true,
          },
          {
            key: "29",
            text: "group276534534543",
            group: "28",
            isGroup: false,
          },
          {
            key: "30",
            text: "group3266533",
            group: "2",
            isGroup: false,
          },
          {
            key: "31",
            text: "group3t2663535",
            group: "4",
            isGroup: true,
          },
          {
            key: "32",
            text: "group87265363535",
            group: "31",
            isGroup: false,
          },
          {
            key: "33",
            text: "group26638728372",
            group: "0",
            isGroup: true,
          },
          {
            key: "34",
            text: "group0001",
            group: "33",
            isGroup: true,
          },
          {
            key: "35",
            text: "group9987766",
            group: "34",
            isGroup: false,
          },
          {
            key: "36",
            text: "list33",
            group: "9",
            isGroup: true,
          },
          {
            key: "37",
            text: "group23764762356323",
            group: "36",
            isGroup: false,
          },
          {
            key: "38",
            text: "group24242424242",
            group: "33",
            isGroup: true,
          },
          {
            key: "39",
            text: "group8278736353",
            group: "38",
            isGroup: false,
          },
          {
            key: "40",
            text: "group7653343453",
            group: "19",
            isGroup: true,
          },
          {
            key: "41",
            text: "group7835635733",
            group: "40",
            isGroup: false,
          },
          {
            key: "42",
            text: "group938237836763",
            group: "22",
            isGroup: false,
          },
          {
            key: "43",
            text: "info223",
            group: "1",
            isGroup: true,
          },
          {
            key: "44",
            text: "grpup833838",
            group: "43",
            isGroup: false,
          },
        ],
        linkDataArray: [
          {
            from: "25",
            to: "24",
          },
          {
            from: "24",
            to: "44",
          },
          {
            from: "24",
            to: "32",
          },
          {
            from: "24",
            to: "42",
          },
          {
            from: "24",
            to: "30",
          },
          {
            from: "24",
            to: "8",
          },
          {
            from: "24",
            to: "6",
          },
          {
            from: "24",
            to: "29",
          },
          {
            from: "24",
            to: "39",
          },
          {
            from: "24",
            to: "17",
          },
          {
            from: "24",
            to: "27",
          },
          {
            from: "24",
            to: "37",
          },
          {
            from: "24",
            to: "13",
          },
          {
            from: "24",
            to: "35",
          },
          {
            from: "24",
            to: "11",
          },
          {
            from: "24",
            to: "21",
          },
          {
            from: "24",
            to: "41",
          },
          {
            from: "24",
            to: "3",
          },
          {
            from: "24",
            to: "18",
          },
        ],
      },
    };
  },

  mounted() {
    this.renderSimpleGraph();
    var slider = document.getElementById("levelSlider");
    slider.addEventListener("change", this.reexpand);
    slider.addEventListener("input", this.reexpand);
  },
  methods: {
    renderSimpleGraph() {
      const $ = go.GraphObject.make;
      const setDynamicLayout =
        this.graphData.nodeDataArray.length > 30
          ? $(go.TreeLayout, {
              angle: 90, // Vertical layout
              layerSpacing: 5,
              nodeSpacing: 5,
            })
          : $(go.GridLayout, {
              wrappingColumn: 3, // Default horizontal layout
              alignment: go.GridLayout.Position,
              cellSize: new go.Size(1, 1),
            });
      this.$options.myReGroupingDiagram = $(go.Diagram, "reGroupingDiagram", {
        InitialLayoutCompleted: (e) => {
          e.diagram.scale = 0.8;
          e.diagram.contentAlignment = go.Spot.Center;
        },
        mouseDrop: (e) => finishDrop(e, null),
        layout: setDynamicLayout,
        allowCopy: false,
        allowZoom: true,
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        "commandHandler.archetypeGroupData": {
          isGroup: true,
          category: "OfNodes",
        },
        "undoManager.isEnabled": true,
        ChangedSelection: (e) => {
          if (myChangingSelection) return;
          myChangingSelection = true;
          var diagnodes = new go.Set();
          this.$options.myReGroupingDiagram.selection.each((n) =>
            diagnodes.add(n)
          );
          this.$options.myReGroupingDiagram.clearSelection();
          this.$options.myReGroupingDiagram.selectCollection(diagnodes);
          myChangingSelection = false;
        },
      });

      var myChangingSelection = false;

      function highlightGroup(e, grp, show) {
        if (!grp) return;
        e.handled = true;
        if (show) {
          var tool = grp.diagram.toolManager.draggingTool;
          var map = tool.draggedParts || tool.copiedParts;
          if (grp.canAddMembers(map.toKeySet())) {
            grp.isHighlighted = true;
            return;
          }
        }
        grp.isHighlighted = false;
      }

      function finishDrop(e, grp) {
        var ok =
          grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(
                e.diagram.selection,
                true
              );
        if (!ok) e.diagram.currentTool.doCancel();
      }

      const createGroupTemplate = (type) => {
        this.$options.myReGroupingDiagram.groupTemplateMap.add(
          type,
          $(
            go.Group,
            go.Panel.Auto,
            {
              background: "transparent",
              mouseDragEnter: (e, grp, prev) => highlightGroup(e, grp, true),
              mouseDragLeave: (e, grp, next) => highlightGroup(e, grp, false),
              computesBoundsAfterDrag: true,
              computesBoundsIncludingLocation: true,
              mouseDrop: finishDrop,
              handlesDragDropForMembers: true,
              layout: setDynamicLayout,
            },
            new go.Binding("background", "isHighlighted", (h) =>
              h ? "rgba(255,0,0,0.2)" : "transparent"
            ).ofObject(),
            $(go.Shape, "Rectangle", {
              fill: null,
              stroke: "#0099CC",
              strokeWidth: 2,
            }),
            $(
              go.Panel,
              go.Panel.Vertical,
              $(
                go.Panel,
                go.Panel.Horizontal,

                {
                  stretch: go.GraphObject.Horizontal,
                  margin: 1,
                  background: "#33D3E5",
                },
                $("SubGraphExpanderButton", {
                  alignment: go.Spot.Right,
                  margin: 5,
                }),
                $(
                  go.TextBlock,
                  {
                    alignment: go.Spot.Left,
                    editable: false,
                    margin: 5,
                    font: "bold 18px sans-serif",
                    stroke: "#9A6600",
                  },
                  new go.Binding("text", "text").makeTwoWay()
                )
              ),
              $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
            )
          )
        );
      };

      this.$options.myReGroupingDiagram.nodeTemplate = $(
        go.Node,
        go.Panel.Auto,
        {
          mouseDrop: (e, nod) => finishDrop(e, nod.containingGroup),
        },
        $(go.Shape, "Rectangle", { fill: "#ACE600", strokeWidth: 2 }),
        $(
          go.TextBlock,
          {
            margin: 5,
            editable: false,
            font: "bold 13px sans-serif",
            stroke: "#446700",
          },
          new go.Binding("text", "text").makeTwoWay()
        )
      );

      var myChangingModel = false;

      this.graphData.nodeDataArray.forEach((node) => {
        if (node.isGroup) {
          createGroupTemplate("OfGroups");
        }
      });

      this.$options.myReGroupingDiagram.addModelChangedListener((e) => {
        if (e.model.skipsUndoManager) return;
        if (myChangingModel) return;
        myChangingModel = true;
        if (
          e.modelChange === "nodeGroupKey" ||
          e.modelChange === "nodeParentKey"
        ) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.object
          );
          if (treenode !== null) treenode.updateRelationshipsFromData();
        } else if (e.change === go.ChangedEvent.Property) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.object
          );
          if (treenode !== null) treenode.updateTargetBindings();
        } else if (
          e.change === go.ChangedEvent.Insert &&
          e.propertyName === "nodeDataArray"
        ) {
          this.$options.myReGroupingDiagram.model.nodeDataArray.splice(
            e.newParam,
            1
          );
          this.$options.myReGroupingDiagram.model.addNodeData(e.newValue);
        } else if (
          e.change === go.ChangedEvent.Remove &&
          e.propertyName === "nodeDataArray"
        ) {
          var treenode = this.$options.myReGroupingDiagram.findNodeForData(
            e.oldValue
          );
          if (treenode !== null)
            this.$options.myReGroupingDiagram.remove(treenode);
        }
        myChangingModel = false;
      });

      this.graphData.nodeDataArray.forEach((node) => {
        if (node.isGroup) {
          node.category = "OfGroups";
        }
      });

      this.$options.myReGroupingDiagram.linkTemplate = $(
        go.Link,
        {
          corner: 15,
          curve: go.Link.Bezier,
          routing: go.Link.AvoidsNodes,
        },
        $(go.Shape, {
          toArrow: "OpenTriangle",
          fill: "#666666",
          stroke: "#666666",
          strokeWidth: 0.5,
        }),
        $(go.Shape, { toArrow: "Standard", stroke: "#666666", fill: "#666666" })
      );

      this.$options.myReGroupingDiagram.model = new go.GraphLinksModel(
        this.graphData.nodeDataArray,
        this.graphData.linkDataArray
      );
    },

    reexpand(e) {
      var myDiagram = go.Diagram.fromDiv(
        document.getElementById("reGroupingDiagram")
      );
      var level = parseInt(document.getElementById("levelSlider").value);
      myDiagram.startTransaction("reexpand");
      myDiagram.findTopLevelGroups().each((g) => {
        this.expandGroups(g, 0, level);
      });
      myDiagram.commitTransaction("reexpand");
    },

    expandGroups(g, i, level) {
      if (!(g instanceof go.Group)) return;
      g.isSubGraphExpanded = i < level;
      if (g.isSubGraphExpanded) {
        g.memberParts.each((m) => {
          this.expandGroups(m, i + 1, level);
        });
      } else {
        g.memberParts.each((m) => {
          this.expandGroups(m, i, level);
        });
      }
    },
  },
};
</script>
<style>
.graph {
  width: 100%;
  height: 550px !important;
}
</style>

Here are my comments from before, and they still seem to apply to the code that you just posted.

Normally one should set up everything about the Diagram, including templates, before one assigns the Diagram.model, and then not replace the templates.