TreeExpanderButton

Hi i’m new to go js i’m working on a flow chart and handling really huge data (approx 500 shapes and connections). For better visibility i want to implement TreeExpanderButton for each shape so that i can minimize and see the flow. I’m facing issue in the event. TreeExpanderButton is collapsing all the connected nodes. Since its flowchart there might be connections back to the previous shape. Is there any way i can have restrictions while collapsing? Can i customize TreeExpanderButton?
Thanks in advance

Because the graph structure is not tree-structured, you cannot use a “TreeExpanderButton”.

I suggest that you just use a “Button” and in it’s GraphObject.click event handler, within a transaction, you toggle the GraphObject.visible property the way you want. You probably will want to call http://gojs.net/latest/api/symbols/Node.html#findNodesOutOf.

Thank you for such a quick reply. This is very helpful. I have another question following code works perfect when there is single outport. if there are multiple outports i’m getting
go.js:1402 Uncaught RangeError: Maximum call stack size exceeded

following is my snippet

hideTree: function(node){
var iterator = node.findNodesOutOf(null);

				if("SwitchBlock"===iterator.value.data.category){
					iterator = iterator.value.findNodesOutOf(null);
					var itObj = iterator.Ph.ld;
					for(var key in itObj){
						var sObj = itObj[key];
						SA.hideTree(sObj.value.part);
					}
				}else{
					iterator.value.visible = !iterator.value.visible;
					SA.hideTree(iterator.value.part);
				}
			}

I might be handling it wrong. Can you please suggest.

Sounds like an infinite recursion. You should stop each time you encounter a node that is already not visible or a node that is one that you do not want to make not visible. I don’t know how you want to decide the latter case. Maybe when the node’s location.x or location.y is less than the original node’s location.x/.y, depending on the direction that the graph is growing?

Here’s the basic idea. Instead of using a “TreeExpanderButton”, use this:

      $("Button",  // a replacement for "TreeExpanderButton" that works for non-tree-structured graphs
        // assume initially not visible because there are no links coming out
        { visible: false },
        // bind the button visibility to whether it's not a leaf node
        new go.Binding("visible", "isTreeLeaf",
                       function(leaf) { return !leaf; })
            .ofObject(),
        $(go.Shape,
          {
            name: "ButtonIcon",
            figure: "MinusLine",
            desiredSize: new go.Size(6, 6)
          },
          new go.Binding("figure", "isCollapsed",  // data.isCollapsed remembers "collapsed" or "expanded"
                         function(collapsed) { return collapsed ? "PlusLine" : "MinusLine"; })),
        {
          click: function(e, obj) {
            e.diagram.startTransaction();
            var node = obj.part;
            if (node.data.isCollapsed) {
              expandFrom(node, node);
            } else {
              collapseFrom(node, node);
            }
            e.diagram.commitTransaction("toggled visibility of dependencies");
          }
        })

The GraphObject.click event handler of the button calls these functions:

    function collapseFrom(node, start) {
      if (node.data.isCollapsed) return;
      node.diagram.model.setDataProperty(node.data, "isCollapsed", true);
      if (node !== start) node.visible = false;
      node.findNodesOutOf().each(collapseFrom);
    }

    function expandFrom(node, start) {
      if (!node.data.isCollapsed) return;
      node.diagram.model.setDataProperty(node.data, "isCollapsed", false);
      if (node !== start) node.visible = true;
      node.findNodesOutOf().each(expandFrom);
    }

This assumes that there is a data property named “isCollapsed” that remembers whether that node is collapsed or expanded. The default value is assumed to be not collapsed.

This might not implement exactly the policy that you want when collapsing or expanding graphs. You can tweak the two functions in whatever manner suits you best.

1 Like

Hi Walter,
Sorry for the delayed response i was on long vocation. This code really helped me a lot. now i can do better expansion / collapse
Thank you