Collapse open nodes when opening new one

[RohanDamani]

The ability to collapse all open nodes on the same depth as a new one is opened. Would be a great feature as the tree gets large with lots of traversing nodes.

[andrewhl]

I would love this feature as well.

[anilramavtar]

here is the work around solution to achieve this

<Tree data={phaseData} ref="myRef"
initialDepth={1}
orientation="vertical"
pathFunc="elbow"
translate={{ x: 575, y: 20 }}
styles={{ links: { stroke: '#89828D', strokeWidth: 1 } }}
nodeSize={{ x: 160, y: 50 }}
zoomable={false}
onClick={(nodeObj) => this.handleClick(nodeObj, true)}
/>

handleClick(nodeObj, cont) {
if(!cont || nodeObj._collapsed)
return;
const myRef = this.refs.myRef;
const parentObj = nodeObj.parent;
if(parentObj && myRef) {
const nodesToBeCollapsed = parentObj.children.filter(c=> c.id !== nodeObj.id);
nodesToBeCollapsed.map((ndObj,index) => {
if(!ndObj._collapsed)
myRef.handleNodeToggle(ndObj.id, false);
});

}

}

[feralislatr]

@anilramavtar
I tried using that and I'm getting too much recursion from clone.js

node_modules/react-d3-tree/node_modules/clone/clone.js:75

  72 | // recurse this function so we don't reset allParents and allChildren
  73 | function _clone(parent, depth) {
  74 |   // cloning null always returns null
> 75 |   if (parent === null)
  76 |     return null;
  77 | 
  78 |   if (depth === 0)

Any ideas off the top of your head?

[Dienert]

I corrected the code above and it's working now.

import clone from 'clone';

handleClick(nodeObj) {
    if (!nodeObj || nodeObj._collapsed)
        return;
    const myRef = this.refs.myRef;
    const parentObj = nodeObj.parent;
    if (parentObj && myRef) {
        const nodesToBeCollapsed = parentObj.children.filter(c => c.id !== nodeObj.id);
        nodesToBeCollapsed.map((ndObj, index) => {
            if (!ndObj._collapsed) {
                const data = clone(myRef.state.data);
                const nodeId = ndObj.id;
                const matches = myRef.findNodesById(nodeId, data, []);
                const targetNode = matches[0];
                myRef.collapseNode(targetNode);
                myRef.setState({ data });

            }
        });
    }
}

           <Tree
                ref="myRef"
                data={this.state.data}
                translate={this.state.translate}
                orientation={'horizontal'}
                zoomable={true}
                transitionDuration={0}
                initialDepth={1}
                separation={{siblings:0.5, nonSiblings:2}}
                onClick={(nodeObj) => this.handleClick(nodeObj)}
            />

[feralislatr]

cool, thanks a lot!

[bkrem]

Hey everyone,

I had some spare time today and @Dienert's revamp of the workaround reminded me to finally get this done.

So thank you to @Dienert and @anilramavtar for the workarounds first of all, but you should be able to simply use shouldCollapseNeighborNodes now as of v1.11.0 😄

(If there are issues with the implementation, please open a separate bug ticket so we can close out this feature request ✌️)

[Dienert]

Yes, tested and it's working. Thanks!