Group tree expand problem

GoJS
1

Hi! I have a diagram that uses tree expander buttons to allow the user to slowly open each node / group at their own pace.

The green group you see in the screenshot below will ONLY expand if the user clicks the expander button on its direct parent - the blue group right above it.

If the user tries to click any of the expander buttons on the groups to the direct parents’ right, the green group does not appear and nothing happens.

I need the user to be able to expand the green group when clicking on ANY of its parent groups.

Screen Shot 2016-01-19 at 3.58.06 PM.png702×661 75.5 KB

Here’s the code I’m using:

myDiagram.addDiagramListener("ObjectSingleClicked",
        function(e){
          var nodeID = e.subject.part;
          nodeID.expandTree();
          nodeID.isSelected = true;
        }
      );
2

There is a difference between expanding/collapsing subtrees (which are properties and methods on the Node class) and expanding/collapsing subgraphs (which are properties and methods on the Group class). For example, contrast Node | GoJS API with Group | GoJS API.

So if you want the Group with the two green Nodes to be collapsed or expanded, you should use a “SubGraphExpanderButton”. That will work regardless of the Links to other Nodes.

3

Thanks, Walter. That makes sense.

Is it possible to trigger the expansion of both the blue & green subtrees together when the appropriate parent node (one level above the baby blue) is expanded?

I don’t ever want the user to have control to collapse either of these groups, but I do need a way to signal to the user that there is a green group below the blue.

4

Your question is still sufficiently ambiguous that I’m not sure what you really want to do. If I understood your graph structure better I might be able to answer.

If you could illustrate with very simple examples of before and after, and describe what the relationships are between all of the Nodes, that would help.

5

This is our graph structure without any expand/collapse functionality: Malnutrition | IRC Theory of Change

You can see that, starting at the light blue level, most nodes are part of groups. Beneath this level, there are two green groups branching off of GROUPS of the light blue level.

I need the user to be able to explore the graph by expanding nodes one by one. This works fine with the more simple node structure toward the top of the diagram, but gets messed up once you start to hit the groups.

When a user clicks the tree expander button I have added to the darker blue nodes, this should either:

  1. trigger the expansion of all child elements, with sub graphs already expanded (so all light blue and green groups connected in any way to the darker blue node appear), OR
  2. trigger the expansion of the light blue level with sub graphs already expanded, with some sort of button/notation to let the user further expand the green groups with their sub graphs already expanded

Please let me know if this is unclear, or if I can explain further. Thanks!

6

Your app looks very nice.

I think it would be sufficient to implement a “TreeExpanded” DiagramEvent listener that subgraph-expanded all tree nodes that are Groups. Maybe something like this Diagram initialization:

    "TreeExpanded": function(e) {
        e.subject.each(function(node) {
            if (node instanceof go.Group) node.expandSubGraph();
        }
    }
7

Exactly what I needed! This makes sense.

Only problem remaining is that the green group will not expand unless the light blue group expanded is the direct parent.

I’ve added Tree Expander buttons to all groups that have child elements, and they show the plus sign that turns into a minus on click. However, nothing happens during the click unless the group clicked is the direct parent of the green group. I’d like the green group to expand when any of the four parent groups are expanded. Can you help?

Malnutrition IRC Theory of Change.png1170×1005 199 KB

8

Have you set Diagram.isTreePathToChildren? Normally links go from the parent to the children.

But there might be problems just because your graph is not tree-structured, so tree operations would be confused.

9

I have set this diagram to a TreeLayout, and I thought isTreePathToChildren is set to true by default. I went ahead and set this but still see the same issue with the green group appearing only when its direct parent is expanded.

myDiagram =
    $(go.Diagram, "myDiagram",
      {
        allowCopy: false,
        allowDelete: false,
        allowMove: false,
        initialContentAlignment: go.Spot.TopCenter,
        initialAutoScale: go.Diagram.Uniform,
        isTreePathToChildren: true,
        layout:
          $(go.TreeLayout, //TreeLayout.AlignmentCenterChildren. specify a Diagram.layout that arranges trees
            {
              angle: 90,
              nodeSpacing: 40,
              layerSpacing: 125
            }
          ),
        "commandHandler.archetypeGroupData": { isGroup: true, category: "OfNodes" },
        "undoManager.isEnabled": true
      }
    );

Any other ideas?

10

Well, I was guessing that Diagram.isTreePathToChildren ought to be false, if a parent node has links coming into it from its child nodes. That’s assuming that the Links are being drawn with a “to” arrowhead.

Still, if there are multiple parent nodes for any node, that can cause problems.