Hide links Issue

This will be a noob question, apologies in advance for that, I have much more python experience than js. This will likely be something very obvious. I have been able to reproduce my lack of understanding in one of the Norwood go.js examples to show what I’m looking for.

I want to hide some links in an initial set of data, before it is built into a go.js diagram. From searching through the forum and google, I believe that Link.data is a GraphObject, and that I need to set the visible property of that GraphObject to false. And the linkDataArray contains the Link.data GraphObjects.

I set the visible property of some specific links to false, and I can verify that in the object, but when the diagram is drawn, those links are still visible.

I can reproduce this with the “Draggable Links” sample sandbox. I create two nodes and one link. I want to hide that link. I save the diagram and I get the Diagram Model in json in the box below. I modify that json to add the visible property set to false. I reload the diagram, the diagram loads, but the link is still visible. I’ve tried several variations, but have not been able to hide the link. I highlighted in red in the image below what I believe the json change needs to be based on the googling, and forum searching I’ve done.

How should the Diagram Model json change so that the link is hidden when I reload the Draggable Links diagram?

The data objects in the model will not be instances of GraphObject. They will be plain JavaScript Objects, since that is what is created by calls to JSON.parse and similar persistence functions, and also by typical code that is transforming data received from a database/server into data suitable for the UI and GoJS in the client/browser.

So adding properties to those model data objects, as you have done in your screenshot above, will have no effect on any GraphObjects such as Nodes or Links in the Diagram, unless you add a data Binding in the node or link template(s) that make use of that property.

In your case that means add something like:

    new go.Binding("visible", "visible")

to your Link template. (Actually, you don’t need to provide the source property name as the second constructor argument because it will default to be the same as the destination property name.)

I really do recommend, if you haven’t already, reading https://gojs.net/learn and then the pages of the Introduction starting at https://gojs.net/intro that apply to what you want to build. In particular, please read the first three pages of the Intro, since they talk about building Nodes and Links and about models and data binding.

I also recommend using the go-debug.js library instead of the go.js library, just so that it does more error checking – watch the console window output.

Thanks for the quick response and guidance. Everything works now. We had some links looping back to themselves that we wanted to hide, and we were using two types of links (dataLinks & orderLinks - both passed in from the backend as “link_data”), so there was some link filtering/taging, and then the binding process twice, once for the stroke and once for the arrowhead. The final working code looks like the following:

            var linkDataArray = JSON.parse(document.getElementById("link_data").textContent);

            linkDataArray.forEach(ele => {
            if ((ele.from === ele.to) && ele.category === 'dataLink') {
                ele.visible = false;
            }
            });

The code above sets visible to false for the dataLinks that loopback to themselves and are type ‘dataLink’.

The code below hides the link stroke and the arrowhead with the binding you suggested. This just shows one of our two link templates.

            var dataLinkTemplate =
                $(go.Link,
                    {curve: go.Link.Bezier, toShortLength: 8},
                    $(go.Shape,
                        {strokeDashArray: [5, 5], strokeWidth: 2},
                        new go.Binding("visible", "visible")),
                    $(go.Shape,
                        {
                            stroke: null,
                            toArrow: "Standard",
                            scale: 1.5
                        },
                        new go.Binding("visible", "visible"))
                );

The youtube video introduction (12 minute) was very useful and had exactly what I needed for this topic.

Thanks again for you help