best way to make a hierarchical tree

Question

I need to create a hierarchical tree according to a design provided by our designer.
I want to use Vue.js to do this.
Basically, a user is responsible for a team, and within that team, there are also managers of other teams.
In short, it's a basic hierarchical tree, but there are interactions, for example, in each node, there is a "see more" button that opens a modal on the details of the targeted user, and each user responsible for a team below him has a "see more" button that reveals his team.

There are also links that connect the parent to the child, of course. Just like what the "org chart" of gojs.net offers.

I wonder what the best way is to make this kind of hierarchical tree.
Using HTML, CSS, and JavaScript (what I'm currently doing), I have more accessibility for my content, it is readable from screen readers, I can maximize interactions, like allowing the user to copy text, but the display is not great, if I have too many children, the scroll position is hard to manage and keep, and we lose in practicality and user experience. For example, when I want to expand a user's team, everything moves and I lose focus on what I was looking at.

I know that we can do this kind of thing with a canvas, just like GoJS does. We lose in accessibility and interaction, but we gain in practicality.

Do you have any opinions/suggestions please? I don't really know where to go or how to proceed.

And if the idea is to stick with HTML/CSS/JS, how can I keep the scroll position on the targeted element? Or do you have any leads, examples of what already exists?

score 0 · Answer 1 · answered Jun 14 '23 at 11:27

0

When using GoJS, if you set the Diagram.renderer property to "svg", everything the user sees is in SVG DOM.

answered Jun 14 '23 at 11:27

Walter Northwoods

4,061
2
10
16

Thanks for the reply, however, Gojs has to be purchased and is actually too expensive. Also, I'm not sure if SVG is the solution, I still couldn't select the text for example. – Rekwian Jun 14 '23 at 12:24
If you turn off pointer events, the user can select text: https://gojs.net/latest/intro/SVGContext.html – Walter Northwoods Jun 14 '23 at 12:54
Sorry, I didn't mean that , I meant the screen reader. But despite everything, it remains a tool that is obviously paying and too expensive , unless I saw it wrong... – Rekwian Jun 14 '23 at 13:06
You can always ask the sales people for a discount. – Walter Northwoods Jun 14 '23 at 14:21

score 0 · Accepted Answer · answered Jun 16 '23 at 10:02

Ok, I found a solution without going through the canvas.
Without going into details, the idea is to get all data and display them, but in opacity 0 and reveal those which must be.
The scroll therefore takes the entire width, then you just have to put the scroll on the main element on initialization.
Thus, when the children are revealed, there is no change in content size, so the scroll does not move.
Accessibility and practicality is better.

Here, I created fake divs to preserve the content size, as I have a need to align the child content. The blue line = the fake content

best way to make a hierarchical tree

2 Answers2