Hide and Show nodes and links

GoJS
1

I’m adding a function so the user can filter the nodes displayed on the diagram. Right now I’m retrieving all the nodes and looping on it to make sure it matches the user selection.

By looking at the API I saw that I could simplify my function by using the findNodesByExample. I was able to get the results I need, but is there a way or function I can use to Hide all the nodes that the findNodesByExample does not return?

2

Diagram.findNodesByExample is probably also doing a linear search, just as your original code was doing. So I suggest that you continue using your old code, where it’s easy for you to do whatever you want to do to nodes that do not meet your criteria.

But if you insist on using findNodesByExample, maybe this will work:

new go.Set(myDiagram.nodes).removeAll(myDiagram.findNodesByExample(...))

and now you can do whatever you want with that Set of Nodes.

3

@walter I end up keeping my own function, since it was working :). Quick question, when I set the node to visible = false if I try to use the function _node.findLinksOutOf() it always tells me there is a link. Do I need to remove the nodes instead of setting visible to false?

4

That depends on what you want to do. Making a Node or a Link not visible means that the Part:

  • cannot interact with any mouse event (i.e. the user cannot click on it)
  • will not be found by Diagram or Layer methods that search for Parts or GraphObjects geometrically (i.e. Layer.findObjectAt)
  • does not participate in any layout
  • does not contribute to the document bounds
  • is not avoidable by AvoidsNodes routed links
  • is not drawn

So it’s as if it weren’t present, but it still is present for programmatic use. You might want to make not-visible Parts visible again, for example.

5

@walter so that is the idea. I’m adding a filter so the user will be able to hide and show nodes. But when I hide a node let’s say that this node has 2 links to 2 other nodes is there an easy way to find out if the 2 nodes does not have any visible links so I can hide them too.

What is happening right now is that I can hide the node I want based on the filter, but I end up with some nodes being displayed that will not have any link, and when I try the function to see if there is links on the nodes I always get a value even though the other nodes are hidden.

6

I do not understand what your criteria are. You could try doing something like this:

node.findNodesConnected().all(n => !n.findLinksConnected().any(l => l.visible))

BUT I bet you want something different.

7

@walter sorry if it was not very clear. Here a sample. At first when I display the diagram I have this.

image
image724×328 26.2 KB

the user can now add a filter to it that will remove some of the parent node (Green and blue Ellipse).

When the user filter all I’m doing is this.myDiagram.nodes.filter where he node data does not match the user selected filter, and setting the visible property to false.

As you can see here in the initial diagram the parent on the right is connected to 2 nodes and the green is connected to all nodes. If I select a filter to only display the blue node on the node data I set the green node visible property to false so that hides the node and all the links too.

So I get this.

image
image753×301 11.3 KB

I’m trying to find a way to hide the nodes that do not have a link now, but when I use the function findLinksOutOf() or findNodesInto() I always see a value in there pointing to the node I just set the visible property to false.

Does that make sense?

I will try the findNodesConnected() here see if I can use that.

8 
myDiagram.commit(diag => {
  diag.nodes.each(n => {
    if (n.findLinksConnected().count === 0) n.visible = false;
  });
});