Improve tree view UX

[FelixHenninger]

In the builder interface, we use a tree view to represent the nested study structure on the left. This works well for the most part, but the user experience is still somewhat fiddly and it seems likely that it could be improved (but we have no idea how). For this issue we're looking for ideas how to improve this.

Here are the steps needed to reproduce:

1. If you navigate to the builder, and open an example (click on the rocket icon, and select one of the examples from the list), you'll see a nested/hierarchical structure on the left.
2. Right now, users add new parts to the study by moving their mouse between items in this tree, where add buttons appear/expand when the mouse moves there.
3. Users can also drag around individual nodes, and drop them at different places in the tree.

All of these steps feel like they could be more polished; they work kinda-ok with the mouse, but the targets are harder to hit with a touchpad. We've tried to make this better, but it might be that our approach is wrong, and it looks like we're missing something. Any ideas are hugely appreciated! We're looking for a new perspective here, not an implementation (though you're welcome to give that a shot, of course!)

[FelixHenninger]

If you're debugging this, you might find it helpful to highlight the target regions hidden in the tree by adding the following CSS code:

.addbutton {
  background-color: rgba(255, 195, 45, 0.1);
}
.dropTarget {
  background-color: rgba(0, 0, 255, 0.1);
}
.dropTarget.dropTarget-available {
  background-color: rgba(255, 0, 0, 0.1);
}
.dropTarget.dropTarget-hover {
  background-color: rgba(0, 255, 0, 0.1);
}

[FelixHenninger]

Klaas Bombeke just made the (awesome) point that the nodes themselves should act as drop targets (if they accept nested components). Maybe this is one part of the riddle!

[chartgerink]

Maybe add a + button at the bottom of the structure column and allow people to post them to their respective level? As an additional option that is, so that those with touchpad and less mouse precision can also get their functionality :)

The + buttons now also seem to cross nesting levels, where for example I can't get a + here.

[FelixHenninger]

Maybe add a + button at the bottom of the structure column and allow people to post them to their respective level?

Yes, I like that idea! Am I understanding you correctly that you are suggesting a two-step approach, first changing to 'add mode' and then selecting the position of the new component?

The + buttons now also seem to cross nesting levels, where for example I can't get a + here.

That's intentional (the Stroop Task is a loop, which can only have one nested component), though it's also a great point because it demonstrates well another issue: We don't communicate why insertion isn't available at that point. It would be very cool to figure out how to do that!

I appreciate your feedback, thanks a lot for taking a look at this!