SetCentered Method Stops Toggle Switch/Buttons Functionality, Highlighting Nodes With Varying Long Strings/Text, & Expand/Collapse Button Alignment With Long Strings/Text

[Deathstar341]

I've attached a picture of my own org chart with arrows to give more context since my code sandbox does not replicate all issues mentioned here. I will delete the picture once solved. I've also provided a code sandbox where I tried to replicate the issue, but I couldn't get the tooltip associated with the "center by node ID" button to work correctly through code sandbox; however, tooltip is function on IDE.

"Center by node ID" is the button with the TfiTarget react icon (aka crosshair).

I will keep working on replicating the issues through code sandbox, unless solved sooner. That being said, my code is pretty much identical to what is shown on code sandbox: https://codesandbox.io/p/sandbox/d3-org-chart-react-functional-org-chart-forked-cylywl?file=%2Fsrc%2Fcomponents%2FsetCentered.js%3A134%2C44

Here are the issues I'm trying to resolve:

1. How can I use the "center by node ID" feature while not losing functionality for the rest of my buttons and toggle switches? (Issue replicated in code sandbox)

• Anytime the button is clicked to "center in on a specific node," the button disables all my other buttons and toggle switches.

2. How can I ensure the nodes highlighted match the size of the box? (See attached picture; cannot replicate through code sandbox due to tooltip issue)

• When the graph centers in on a specific node, I have it set to highlight the route from parent node to child node.

• When a person has a lengthy name or job title, this becomes a problem where the highlighted box is smaller than the node itself.

3. How can I ensure the expand/collapse buttons line up correctly with the edge of their respective nodes when the org chart layout is swapped (top, left, right, bottom)? (See attached picture; this cannot be replicated if "center by position ID" button is hit before the swap layout button)

• When a person has a lengthy name or job title, the node button moves to the center of the node rather than the edge of the node. It does appear in the correct position on the initial render, but after layout swap it becomes an error.

• Attached picture's default layout was left (position 0 in array). Error appears when layout is swapped to top and bottom (position 1 & 3). Similar situation occurs if default layout is set to top, except left and right (position 0 & 2) are now issues.

For issue 1, I am at a total loss how to solve this because my IDE and web browser console doesn't tell me what the issue is. For issues 2 and 3, I've made attempts to interact with org chart's node size (thru node width & height) and CSS for the org chart, but I've failed to find practical solution.

[bumbeishvili]

@Deathstar341

1. Could not understand this part. Most probably it's related to how the org chart is integrated within the react. You can look into integration part to make sure that it's correctly configured - https://medium.com/@bumbeishvili/best-d3-coding-convention-subjective-practice-proven-through-years-of-work-03c521715b05

2. You have to specify the correct fixed height for the node, otherwise, you will see problems. You have several ways.

   • limit the character count and display tooltip on hover for full name
   • Guess the height based on the character count and specify that height
   • Calculate exact height based on the specified HTML - this is kind of performance heavy, so if you do, only do it once and store the value with data

3. Once you will fix 2, 3 also will be fixed