TreeLayout default collapse level

GoJS
1

I want to configure default collapse level for TreeLayout. Please check below code segments

<gojs-diagram #sngHierarchy [divClassName]='diagramDivClassName' [initDiagram]='initDiagram'
                  [linkDataArray]='state.diagramLinkData' [modelData]='state.diagramModelData'
                  [nodeDataArray]='state.diagramNodeData'>
</gojs-diagram>

public initDiagram = (): go.Diagram => {
    ..........
      this.diagram.addDiagramListener('InitialLayoutCompleted', (e: any) => {
            e.diagram.findTreeRoots().each((r: any) => {
                r.collapseTree(2); // set default collapse level 2
            });
        })
    ..........
}

However this is not working as expected. If console out e.diagram.findTreeRoots() it’s values are empty. Maybe I am using incorrect Listener?

2

Doing the collapse in an “InitialLayoutCompleted” DiagramEvent listener is OK.
An alternative is to default Node.isTreeExpanded to false and then call Node.expandTree instead on each root.

If diagram.findTreeRoots().count === 0, then either you have no Nodes or there is at least one Link coming into each Node. So the graph is not tree-structured.

3

Actually graph is tree-structured. Here is a screenshot

image
image1194×1280 109 KB

What I want is below in initial loading

image
image870×696 33.8 KB

If I change InitialLayoutCompleted to LayoutCompleted intial loading is exactly same as second screenshot (which I want). But then can not expand collpased nodes as nothing happens

4

So, what was the value of diagram.findTreeRoots().count?

5

It shows 0

6

Well, because you definitely have some Nodes, you must have some unexpected Links. Examine the Diagram’s Nodes or the GraphLinksModel carefully.

7

Looks like nodes and links model is correct. Because If I change InitialLayoutCompleted to LayoutCompleted it works. But then I can not expand collpased nodes as nothing happens

image
image870×696 33.8 KB

8

If you do not want to change your graph to be tree-structured, you will need to find the root nodes some other way.

Collapsing or expanding nodes will result in a layout, so such a “LayoutCompleted” listener would keep collapsing trees.

9

I’ve tried to find root nodes by looping e.diagram.nodes. However due to some reason within InitialLayoutCompleted event it also empty

diagram.addDiagramListener('InitialLayoutCompleted', (e: any) => {
      console.log('Node Count',e.diagram.nodes.count)
      console.log('Root Node Count',e.diagram.findTreeRoots().count)
      e.diagram.nodes.each((r: any) => {
        r.collapseTree(HLLevel);
      });
    })

Both logs returns 0. However I can see nodes and tree structure in the graph. I am using following gojs versions.

“gojs”: “^2.3.11”,
“gojs-angular”: “^2.0.6”,

10

Hmmm, it seems that when the initial layout happens your model is empty. I’m guessing that you are using gojs-angular components, version 2. The way that we designed those components is that each diagram component has a single Diagram with a model whose data is replaced.

Normally an initial layout (or other “initial…” things) only happens when the model is replaced – i.e. when the value of Diagram.model changes. However one can cause the “initial…” stuff to happen without replacing the model by calling Diagram.delayInitialization. The Angular (and React) components do that after a call to clear, because that is the way that the component will know that a model data change should be treated as if it were a first time load, rather than just a modification of the model.

So I’m wondering if you are not calling clear on the diagram component when you want to “load” a “new” model.

11

Yes Walter we are using gojs-angular components, version 2. Could you please refer any document how to call clear?

12

Yes, read the section on “A Note on Diagram Reinitialization” in GoJS and Angular -- Northwoods Software.

13

It did work. Thanks Walter!