Links are not disappearing after making node.visibility false

GoJS
#1

Hello i try to filter the nodes of my graph base on the value of one input(working with angular ts). The main functionality is working properly but there is an exception. I have group of nodes and there are few cases that one node is connected with another node of different group, here is my graph initially:

image
image1920×871 192 KB

here is the code that i filter the nodes when input value is given:

  this.updateSubject.subscribe((val: any) => {
      this.diagram.startTransaction()
      this.diagram.commit((diag) => {
        diag.nodes.each((n: any) => {
          if(['subscription', 'resourcegroup'].includes(n.data.groupType)) {
            return;
          }
            n.visible = n.data.label.includes(val)
      
        });
      }, 'Filtered');
      this.diagram.commitTransaction()
    })

The if statement is to prevent the hiding of the 2 type of groups, but no matter what the value of the input is, the result is to hide all the nodes of the graph correct but the links of the nodes that are between different groups are not getting lost.
Here are two examples with the filtering:

  1. input value: master

    image
    image2215×937 383 KB

  2. input value to filter all nodes

    image
    image2139×785 206 KB

In general nodes are hiding from the graph correct with their links, but not sure why when one link starts from a node of a different group it stays and moves to the group edges.

#2

The change from your #1 and #2 screenshots look correct – member nodes of groups are changing visibility, but not of the groups themselves, so no links need to change visibility, because they are still connecting visible nodes that happen to be groups.

Yes, when a member node becomes invisible while its containing group stays visible, any connected external links will remain visible but will appear to reconnect with the group. (The links are not actually reconnected, so the value for Link.fromNode will not change.) This policy is convenient when dealing with collapsed groups.

If you want to implement a different policy, I think that should be possible. What precisely are all of the conditions that you want to handle? Note, as I said above, that your example screenshots do not seem to illustrate what I think you want.

#3

groups are not connected between them only the containing nodes of the group are connected with other nodes of different groups. the last 2 photos are results of the initial graph with 2 different input values. is there a simple way to make all links invisible when node is hiding?
Its true that this behavior is convenient for collapsing the groups

#4

Does this help?

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button id="myTestButton">Test</button>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

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

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.groupTemplate =
  $(go.Group, "Vertical",
    { layout: $(go.LayeredDigraphLayout) },
    $(go.Panel, "Horizontal",
      $(go.TextBlock, new go.Binding("text")),
      $("SubGraphExpanderButton")
    ),
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "lightgray", strokeWidth: 0 }),
      $(go.Placeholder, { padding: 10 })
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue", isGroup: true },
  { key: 2, text: "Beta", color: "orange", group: 1 },
  { key: 22, text: "Beta2", color: "orange", group: 1 },
  { key: 3, text: "Gamma", color: "lightgreen", isGroup: true },
  { key: 4, text: "Delta", color: "pink", group: 3 },
  { key: 42, text: "Delta2", color: "pink", group: 3 },
],
[
  //{ from: 1, to: 3 },
  { from: 2, to: 4 }
]);

document.getElementById("myTestButton").addEventListener("click", e => {
  myDiagram.commit(d => {
    if (d.selection.count === 0) {
      d.nodes.each(n => n.visible = true);
    } else {
      d.selection.each(n => {
        if (n instanceof go.Link) return;
        n.visible = !n.visible;
        n.findLinksConnected().each(l => l.visible = n.visible);
      })
    }
  })
});
  </script>
</body>
</html>
#5

Yep this line fix the issue thanks

  n.findLinksConnected().each(l => l.visible = n.visible);

Is there any function on the nodes to return boolean if the group is containing any visible node?

#6 
group.memberParts.any(p => p.isVisible())
#7

great thanks