Implement `nodeToggleConditions` prop

[pkeppeler]

Hi, I am trying to create a custom NodeLabelComponent with some controls to expand the node. What I have found is that clicking anywhere on the label/node toggles it. And if I have the collapsible prop set to false, there doesn't seem to be any function that I can call to override it and toggle the node.

Basically, I want to create a conditional to only allow expanding nodes when they have less than a certain number of children. And to do this, I need to turn off the default node toggle, and create my own way of calling it within my NodeLabelComponent.

Is there any way that I can do this?

[pkeppeler]

I figured out how to do it, and I actually don't need to use a NodeLabelComponent. Instead, I just set the tree to not be collapsible (therefore, by default, no nodes will open on click). Then I wrote a function to override the non-collapsible rule. Lastly, I call that function within a conditional block using the onClick prop for the tree.

    /*Subfunction with conditional rule for expanding children*/
    handleNodeClick = (nodeId, event) => {
        const myRef = this.refs.myRef as any;

        const data = clone(myRef.state.data);
        const matches = myRef.findNodesById(nodeId, data, []);
        const targetNode = matches[0];

        /*Only expands the children if there are 10 or fewer*/
        if (targetNode._children.length <= 10) {
            this.expandChildren(targetNode, myRef, data)
        }
    }

    /*Function to expand the children*/
    expandChildren = (targetNode, myRef, data) => {
        targetNode._collapsed ? myRef.expandNode(targetNode) : myRef.collapseNode(targetNode);

        myRef.setState({ data, isTransitioning: true });

        setTimeout(
            () => myRef.setState({ isTransitioning: false }),
            myRef.props.transitionDuration + 10,
        );
        myRef.internalState.targetNode = targetNode;
    }

...

render() {
    return (
            <Tree
                data={treeData}
                ref="myRef"
                collapsible={false}
                onClick={(nodeObj) => { this.handleNodeClick(nodeObj.id, event) }}
            />
        );
    }

[LarsLiden]

Thanks, this helps me. Can you share your implementation of "clone"? myRef.state.data has circular references, so I'm not sure what to copy. Thanks!

[LarsLiden]

Note: seems to work w/o clone and just using original object.

[pkeppeler]

Hi Lars,

Unfortunately, I no longer have access to this code, but I don't think I implemented clone. I think I imported it using import clone from 'clone'; at the top. Let me know if that works.

[m0rtyn]

@Icebreaker9697
I repeated your trick and my ref have all properties of tree except collapseNode/expandNode methods. I tried it both on class and functional components. So i have error. It's seem like complicated way to get desired result.

@bkrem
Have you any ideas?

[bkrem]

@martyns0n

There's not really a good way to solve this use case for the v1 API unfortunately :/ Another reason why I'm really focused on shipping v2 at the moment to allow for way more flexibility in general.

I'll turn this into a feature issue a la "Implement nodeToggleConditions prop" so this scenario can get first-class support once the most pressing issues for v2 are done, e.g.:

// single predicate case
nodeToggleConditions={(node) => node.children > 10}

// multiple predicates, use `Array#every` to assert against it.
nodeToggleConditions={[node => node.children > 10, node => node.name !== "don't toggle me"]}

@Icebreaker9697 has the right idea for the workaround I believe, i.e.

1. inspect node object that is passed to the onClick callback and check for children.length (don't think the extra step shown above where the node is re-identified in the data set via its ID is necessary, but maybe I'm missing something)
2. toggle node._collapsed property based on result of assertion
3. ensure the updated data set is fed back into the tree (e.g. via setState() and passing state.treeData to Tree).

[bkrem]

Oops, so I was in fact missing something I just realised: @Icebreaker9697's steps were completely right, since the changes you want need to be merged into the full tree (so need to re-identify the appropriate node in the full data set) 🤦‍♂

Looking at the workaround's use of internals I'm thinking about exposing some of the internal util functions in v2 as well (e.g. findNodeById, findNodesAtDepth, ...) so making manual updates to the tree where there isn't first-class support from the API is a lot easier 🤔
Please add a 👍 if you'd find that useful :)

[m0rtyn]

I solved this with actual library version (1.16.1). My code:

import React, {
  useEffect,
  useRef,
  useCallback,
  useState,
} from 'react';

const OrgChartD3 = ({ hierarchy }) => {
  const treeRef = useRef(null);
  const [, updateState] = useState();
  const forceRender = useCallback(() => updateState({}), []);

  const expandChildren = (targetNode, tree, data) => {
    // ? some evil imperative code for d3, sorry
    /* eslint-disable */
    targetNode._collapsed = !targetNode._collapsed;

    const treeInternalState = tree.internalState;

    if (treeInternalState) {
      internalState.targetNode = targetNode;
    }
    /* eslint-enable */

    tree.current.collapseNeighborNodes(targetNode, data);

    forceRender();
  };

  const handleNodeClick = (nodeId, tree) => {
    const { data } = tree.state;
    const matches = tree.findNodesById(nodeId, data, []);
    const targetNode = matches[0];

    /* eslint-disable no-underscore-dangle */
    const children = targetNode._children;
    /* eslint-enable no-underscore-dangle */

    if (children && children.length > 0) {
      expandChildren(targetNode, treeRef, data);
    }
  };

  const handleTreeClick = (nodeObj, evt) => {
    const collapseButton = evt.target.closest('.CollapseButton');

    return (
      collapseButton && handleNodeClick(nodeObj.id, treeRef.current)
    );
  };

  return (
      {hierarchy.length !== 0 ? (
        <OrgChartTree
          hierarchy={hierarchy}
          handleTreeClick={handleTreeClick}
          treeRef={treeRef}
        />
      ) : null}
  );
};

export default OrgChartD3;

[adomrockie]

@martyns0n

There's not really a good way to solve this use case for the v1 API unfortunately :/ Another reason why I'm really focused on shipping v2 at the moment to allow for way more flexibility in general.

I'll turn this into a feature issue a la "Implement nodeToggleConditions prop" so this scenario can get first-class support once the most pressing issues for v2 are done, e.g.:

// single predicate case
nodeToggleConditions={(node) => node.children > 10}

// multiple predicates, use `Array#every` to assert against it.
nodeToggleConditions={[node => node.children > 10, node => node.name !== "don't toggle me"]}

@Icebreaker9697 has the right idea for the workaround I believe, i.e.

1. inspect node object that is passed to the onClick callback and check for children.length (don't think the extra step shown above where the node is re-identified in the data set via its ID is necessary, but maybe I'm missing something)
2. toggle node._collapsed property based on result of assertion
3. ensure the updated data set is fed back into the tree (e.g. via setState() and passing state.treeData to Tree).

Is this feature available now?

[m0rtyn]

Is this feature available now?

Yes, i'm using it