Downstream and upstream button inside the nodes

GoJS
1

Hi,
Is it possible to have a Downstream and upstream button inside the nodes as shown in the screenshot?

If so, kindly provide me the input on how to do it.

Regards,
R.Venkades

2

What are those buttons supposed to do? Should they recenter the viewport at some node that you provide?

If so, have the button click handlers call CommandHandler.scrollToPart with the Node that you choose.

3

Basically, these button will be used to do the following functionality.
• The downstream rules button will display and connect to rules where the Target field is a trigger field within a rule. This button will only be enabled when there are downstream rules to display.
• The upstream rules button will display and connect to rules where the Target field or the Trigger fields are the targets within a rule. This button will only be enabled when there are upstream rules to display.

The final output should be as shown in the screenshot.

4

I still do not understand – there are many ways of interpreting what you have said.

Does a button find related nodes according to your criteria and then draw new links to those nodes? If so, there are a number of samples that do something similar, although typically they create a new node and then draw a new link to that new node.

Or does a button merely highlight existing links to the related nodes? GoJS Highlighting -- Northwoods Software. Again, there are several samples that demonstrate highlighting.

5

Hi Walter,
It’s not a question of highlighting the nodes/links. The requirement is to have two buttons where in if the user click upstream button, then subsequent link nodes should expand and similarly if the user clicks on downstream button, the subsequent link nodes should collapse…

6

So what precisely is your question?

Do you know how to add buttons to your node template? GoJS Buttons -- Northwoods Software and GoJS Panels -- Northwoods Software

Do you know how to implement your button’s click event handler to change the visible property on the nodes and links that you want to make disappear or appear? The methods you want are on the Node class, Node | GoJS API. Looking at the code in the Navigation sample might also be useful, Navigation of Graphs

7

Hi Walter,
Adding a button inside the node template is not a problem for me. My question is to know how to add functionality of expanding/collapsing the tree when the user clicks on “upstream” and “downstream” button inside the node template.

Currently I am seeing if we have an instance of “TreeExpanderButton” that does the job of expanding/collapsing the forward nodes and not backward one.

Regards,
R.Venkades

8

A “TreeExpanderButton” might work for your “downstream” nodes and links. But remember that your graph is not tree-structured, so it might not do what you want in those sections of your graph where it is not tree-structured.

More generally you can walk the graph of nodes and links to find the ones whose visible property you want to change. Most of the methods that are useful for graph walking are on the Node class, so I recommend you read the documentation for that: Node | GoJS API. You can also look at the Distances and Paths sample: Graph Distances and Paths and the Navigation sample: Navigation of Graphs.