react-d3-tree icon indicating copy to clipboard operation
react-d3-tree copied to clipboard

LeafNode not targeted correctly

Open hramir24-ford opened this issue 3 years ago • 0 comments
trafficstars

Allows for additional className(s) to be passed to all leaf nodes (nodes without children).

The link above defines leafnodes as nodes without children. however.

 {
          name: 'Foreman',
          attributes: {
            department: 'Fabrication',
          },
          children: [
            {
              name: 'Worker',
              children: []
            }
          ]
}

having data in the example above. essentially a node with the children property but is just an empty array. should technically count as a leaf node.

however as of react-d3-tree - v3.3.2 this is not the case. it will consider the worker node a branch node

adding the leafNodeClassName property to the tree will not target the worker node correctly.

steps to reproduce

css ---
.node__root > circle {
  fill: red;
}

.node__branch > circle {
  fill: yellow;
}

.node__leaf > circle {
  fill: green;
  /* 
}
css --

function DTree() {
let data =   {
          name: 'Foreman',
          attributes: {
            department: 'Fabrication',
          },
          children: [
            {
              name: 'Worker',
              children: []
            }
          ]
}


 return <Tree data={data}
                          orientation={"vertical"}
                          rootNodeClassName="node__root"
                          branchNodeClassName="node__branch"
                          leafNodeClassName="node__leaf"
}

offending function appears to be this.

getNodeClassName = (parent: HierarchyPointNode<TreeNodeDatum>, nodeDatum: TreeNodeDatum) => {
    const { rootNodeClassName, branchNodeClassName, leafNodeClassName } = this.props;
    const hasParent = parent !== null && parent !== undefined;
    if (hasParent) {
      return nodeDatum.children ? branchNodeClassName : leafNodeClassName;
    } else {
      return rootNodeClassName;
    }
  };
  src/Tree/index.tsx 
  lines 486-494

truthy check on return nodeDatum.children ? branchNodeClassName : leafNodeClassName;

hramir24-ford avatar Jun 09 '22 15:06 hramir24-ford