Only render links connected to the selected node

GoJS
1

Hi,
So I am trying to do an optimisation on my diagram where I only render links when their node is selected by clicking on it. I have come across workarounds where you can set the opacity of links to 0 in order to make them disappear, but I don’t want that, as the links would still be there in modelData. How can I achieve this?

2

So your model data will include all of the possible node data, because otherwise there wouldn’t be any Nodes for the user to select. But you don’t want to have any link data in the model initially for some reason.

That might imply that you already have location information in each of the node data, so that the nodes are positioned as desired even though no link relationships exist. Is that the case?

I think you want to implement a “ChangedSelection” DiagramEvent listener that makes sure that all of links that should connect with any selected node exists. That’s just a matter of calling GraphLinksModel.addLinkData or TreeModel.setParentKeyForNodeData. Do all of the changes in a single transaction.

Did you also want to remove any Links that have neither connected Node selected? You can do that too in the “ChangedSelection” listener.

3

yes that is correct.

and yes, that is also correct. So in the ChangedSelection event, I am to get all connected links to the node by something like const links = node.getLinksConnected() and then add these retrieved links to the diagram using GraphLinksModel.addLinkData?

4

Node.findLinksConnected is a method on the Node class, so you could call it, but it would only be able to return existing Links that are connected with that node. Clearly you wouldn’t need to do anything to create them because they already exist.

No, you have to search your “database”, whatever that might be, to find the link data objects that want to be represented by Links that you want to show. Those are what you pass to GraphLinksModel.addLinkData.

5

I see, that makes a lot of sense. Thanks

6

Why is that when I try to call addLinkData function on my model (which is a GraphLinksModel), I get an error that this function does not exist in class Model? What am I doing wrong?
For reference, here is my code:

const handleDiagramEvent = (e: go.DiagramEvent) => {
    const name = e.name;
    const diagram = e.diagram;
      if(name === 'ChangedSelection')  {
        const sel = e.subject.first();
        if (sel) {
          if (sel instanceof go.Node || sel instanceof go.Group) {
            const itemData = sel.data;
            props.linkDataArray.forEach((link: go.ObjectData) => {
              if(itemData.key === link.to || itemData.key === link.from ){
                diagram.model.addLinkData(link);
              }
            });
          } 
        }
7

If you are going to ask about an error, please tell us what software is providing the error message, what the error message is, and any contextual information such as a stack trace for a run time error or the lines of source code for a compile time error.

8

Right, sorry. So I have a react app which is written in typescript, and this error is just a simple static type-checking error from typescript. There is no stack trace or anything. I have provided the code sample above, so maybe there is something wrong there, or not?

9

The type of Diagram.model is Model, not GraphLinksModel. So you need to cast it somehow.

10

right, so regardless of casting, is this the correct “diagram.model” object to be calling the addLinkData method on? Am I inadvertently inferring the incorrect diagram object? Or the rest of the code is fine, and I just need to do an explicit type casting?

11

Yes, each Diagram always has exactly one Model that it is displaying. But the type of the Model may vary.

1 Like