How to group links when I close a group

I need to group the links that are within a group, when the group is closed.

ex 1:

ex 2:

I occupy the inspector’s library, and I would like to be able to see the information of the links grouped there.

in ex 1 y would like this:
image

Link Information:
{“category”:"", “from”:“santiago”, “to”:“huerfanos”, “text”:"", “utilization”:"", “color”:"#0000ff", “capacidad”:“400”,“puerto_salida”:“3/3/3”, “puerto_entrada”:“5/5/5”},
{“category”:"", “from”:“el bosque”, “to”:“huerfanos”, “text”:"", “utilization”:"", “color”:"#0000ff", “capacidad”:“500”,“puerto_salida”:“1/1/1”, “puerto_entrada”:“2/2/2”}

when the links are grouped I need this:
{“category”:“xlBigLine”, “from”:“comunas”, “to”:“huerfanos”, “text”:"", “utilization”:"", “color”:"#0000ff", “capacidad”:“400 | 500”, “puerto_salida”:“3/3/3 | 1/1/1”, “puerto_entrada”:“5/5/5 | 2/2/2”}

My actual link:
image

I need advice to achieve this.

I’ll address issues with how links connect with groups in a later reply.

Right now I just wanted to give you a sample that demonstrates one way of having duplicate links appear thicker and with custom labels (if desired), by increasing the Shape.strokeWidth on one Link and making the other Links completely transparent.

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { "undoManager.isEnabled": true });

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Shape, "Circle",
          {
            width: 30, height: 30, fill: "lightgray",
            portId: "", fromLinkable: true, toLinkable: true,
            fromLinkableDuplicates: true, toLinkableDuplicates: true
          }),
        $(go.TextBlock,
          new go.Binding("text", "key")),
        { // assume only one port per node
          linkConnected: function(node, link) {
            updateLinkWidths(link.fromNode, link.toNode);
          },
          linkDisconnected: function(oldnode, link) {
            updateLinkWidths(link.fromNode, link.toNode, link);
          }
        }
      );

    function updateLinkWidths(node1, node2, ignore) {
      if (node1 === null || node2 === null) return;
      var main = null;
      var total = 0;
      var it = node1.findLinksBetween(node2);
      while (it.next()) {
        var l = it.value;
        if (l === ignore) continue;
        if (main === null) {
          main = l;
        } else {
          l.opacity = 0;  // whole Link, not just path Shape
        }
        total++;
      }
      if (main !== null) {
        main.opacity = 1;
        main.path.strokeWidth = total;
        var ah = main.findObject("AH");
        if (ah !== null) {
          ah.strokeWidth = 1+total/2;
        }
        var tb = main.findObject("TB");
        if (tb !== null) {
          tb.text = total.toString();
          tb.segmentOffset = new go.Point(0, 10+total/2);
        }
      }
    }

    // doesn't work for reflexive links
    myDiagram.linkTemplate =
      $(go.Link,
        { relinkableFrom: true, relinkableTo: true, toShortLength: 3 },
        { curviness: 0 },  // force straight, not curved
        $(go.Shape),  // the main path
        $(go.Shape, { name: "AH", toArrow: "OpenTriangle" }),  // the arrowhead
        $(go.TextBlock, { name: "TB" })  // a label at the middle of the link
      );

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha" },
      { key: "Beta" },
      { key: "Gamma" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <p>
    Duplicate Links between Nodes are merged into a single Link whose strokeWidth is set to the number of links.
  </p>
  <p>
    This chooses one link among the duplicates to be made "thick"; it sets the opacity of all the other links to be zero.
    It is also possible to change the visibility of the links instead of their opacity, but that would affect code that
    ignores non-visible parts.
  </p>
</body>
</html>

OK, here’s a sample that demonstrates that the behavior that I think you want regarding the routing of links when groups are collapsed. This is the default behavior – I haven’t done anything special.

<!DOCTYPE html>
<html>
<head>
<title>Click-collapsing Groups</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">

// copied from extensions/Figures.js:
go.Shape.defineFigureGenerator("Ethernet", function(shape, w, h) {
  var geo = new go.Geometry();
  var fig = new go.PathFigure(.35 * w, 0, true);
  geo.add(fig);
  // Boxes above the wire
  fig.add(new go.PathSegment(go.PathSegment.Line, .65 * w, 0));
  fig.add(new go.PathSegment(go.PathSegment.Line, .65 * w, .4 * h));
  fig.add(new go.PathSegment(go.PathSegment.Line, .35 * w, .4 * h));
  fig.add(new go.PathSegment(go.PathSegment.Line, .35 * w, 0).close());
  var fig2 = new go.PathFigure(.10 * w, h, true, true);
  geo.add(fig2);
  // Boxes under the wire
  fig2.add(new go.PathSegment(go.PathSegment.Line, .40 * w, h));
  fig2.add(new go.PathSegment(go.PathSegment.Line, .40 * w, .6 * h));
  fig2.add(new go.PathSegment(go.PathSegment.Line, .10 * w, .6 * h));
  fig2.add(new go.PathSegment(go.PathSegment.Line, .10 * w, h).close());
  var fig3 = new go.PathFigure(.60 * w, h, true, true);
  geo.add(fig3);
  fig3.add(new go.PathSegment(go.PathSegment.Line, .90 * w, h));
  fig3.add(new go.PathSegment(go.PathSegment.Line, .90 * w, .6 * h));
  fig3.add(new go.PathSegment(go.PathSegment.Line, .60 * w, .6 * h));
  fig3.add(new go.PathSegment(go.PathSegment.Line, .60 * w, h).close());
  var fig4 = new go.PathFigure(0, .5 * h, false);
  geo.add(fig4);
  // Wire
  fig4.add(new go.PathSegment(go.PathSegment.Line, w, .5 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Move, .5 * w, .5 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Line, .5 * w, .4 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Move, .75 * w, .5 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Line, .75 * w, .6 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Move, .25 * w, .5 * h));
  fig4.add(new go.PathSegment(go.PathSegment.Line, .25 * w, .6 * h));
  return geo;
});


  function init() {
    var $ = go.GraphObject.make;
    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.TreeLayout, { setsPortSpot: false, setsChildPortSpot: false }),
          "undoManager.isEnabled": true
        });

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        { layout: $(go.TreeLayout, { setsPortSpot: false, setsChildPortSpot: false }) },
        $(go.Panel, "Auto",
          // clicking on the group's body collapses or expands the group
          { click: function(e, obj) {
              var grp = obj.part;
              if (grp.isSubGraphExpanded) {
                grp.diagram.commandHandler.collapseSubGraph(grp);
              } else {
                grp.diagram.commandHandler.expandSubGraph(grp);
              }
            } },
          // the background shape for the Group is either a Rectangle or an Ellipse, depending on data.round
          $(go.Shape, { fill: "lavender", stroke: "red" },
            new go.Binding("figure", "round", function(b) { return b ? "Ellipse" : "Rectangle"; })),
          $(go.Panel,
            // this occupies the area covered by the subgraph Parts
            $(go.Placeholder, { padding: 15 }),
            // this substitute Shape is only shown when the Group is not expanded
            $(go.Shape, "Ethernet", { width: 50, height: 50 },
              new go.Binding("visible", "isSubGraphExpanded", function(b) { return !b; }).ofObject()))),
        $(go.TextBlock,
          new go.Binding("text", "key")));

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        new go.Binding("location", "loc", go.Point.parse),
        $(go.Picture, { width: 50, height: 60 },
          new go.Binding("source", "type", function(t) { return "https://gojs.net/latest/samples/images/" + t; })),
        $(go.TextBlock,
          new go.Binding("text", "key"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape, { stroke: "slateblue", strokeWidth: 2 }),
        $(go.Shape, { toArrow: "Standard" }),
        // a textual label on the Link, offset so that its top is centered on the Link's route
        $(go.TextBlock, { alignmentFocus: go.Spot.Top },
          new go.Binding("text")));

    myDiagram.model.nodeDataArray = [
      { key: "Group1", isGroup: true, group: "Group0" },
      { key: "Node2", group: "Group1", type: "60x90.png", annot: "W1C", loc: "0 50" },
      { key: "Node3", group: "Group1", type: "55x55.png", loc: "100 100" },
      { key: "Group4", isGroup: true, round: true },
      { key: "Node5", group: "Group4", type: "50x40.png", loc: "250 50" },
      { key: "Node6", group: "Group4", type: "80x50.png", loc: "400 100" },
      { key: "Group7", isGroup: true, round: true },
      { key: "Node8", group: "Group7", type: "60x90.png", loc: "0 50" },
      { key: "Node9", group: "Group7", type: "80x50.png", loc: "100 100" }
    ];

    myDiagram.model.linkDataArray = [
      { from: "Node5", to: "Node2", text: "link7" },
      { from: "Node6", to: "Node3", text: "link8" },
      { from: "Node5", to: "Node8", text: "link9" },
      { from: "Node6", to: "Node8", text: "link10" }
    ];
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:700px; min-width: 200px"></div>
  Click on a Group to collapse or expand it.
</body>
</html>

So the diagram starts off as:

Collapse one group:

Collapse the other two groups:
image

Now you can see that this code does not apply the link-bundling code that I demonstrated in my previous reply, because you can see the labels overlapping each other and the link path strokeWidth is unchanged.

So I cannot explain the routing behavior that you have circled in red in your first screenshot.

Regarding the Inspector, you are asking for a feature that it does not support. But the complete code for the Inspector is there, so you can modify it to meet your own requirements.

What I can think of as a solution is to execute a js function every time a new link is created, every time the information in a link is modified, every time I open and close a group.
In the js function you would have to analyze the links that are connected to the same nodes one by one and see the possibility of joining them in a single link, the same when closing a group, looking for all the links and creating a new one with all the characteristics that i wish.

My new question now is:
how to obtain in a js function the information of a link (from, to, …)
and then look for the information of the nodes, to know if there is more than one, in that case group the information in a new link

example:

image

how to do that with the tools offered by gojs?

searchLinksOfNodes might be implemented using: https://gojs.net/latest/api/symbols/Node.html#findLinksTo

getLinksOfChildNodes you probably want to implement using:
https://gojs.net/latest/api/symbols/Group.html#findExternalLinksConnected