Add support for previewing blueprint changes in response of user actions

[abey79]

Whenever possible, the user should be able to preview the effect of their ongoing interaction in other part of the UI.

For example:

• hovering a SV or container in the "Add SV/Container" modal should display it in the viewport and (temporarily) add it to the blueprint tree
• dragging a SV or container in the blueprint tree should display the effect of the candidate drop in the viewport and, potentially, the container selection panel children list
• dragging tiles in the viewport should display the effect in the blueprint tree and container section panel children list
• other?

To have that, we may need:

• some notion of "temporary" blueprints / tile tree
• a Preview/Commit enum added to relevant TreeActions
• maybe some visual language to signify that a given item is a temporary and the result of previewing the on-going user action

cc @jleibs

[nikolausWest]

Suggested addition:

• Dragging a tile in the viewport should preview the change in the blueprint tree

[abey79]

@nikolausWest I'm somewhat worried of the "visual" ramifications of this one. Might be worth running it by @martenbjork

[nikolausWest]

I'm somewhat worried of the "visual" ramifications of this one.

Could you expand on your worries a bit @abey79?

[abey79]

Two concerns:

1. Visual overload: dragging space views in the viewport might trigger fast-paced, possibly-wide-ranging tree diffs that would be difficult to parse for the user.
2. Hard-to-spot, "what changed?" tree diffs: for example, when displaying the candidate new space view when hovering in the "Add SV/Container" modal.

For (1), I suggest actually dropping that preview path. The desired end-result in the viewport, no point previewing stuff elsewhere when it's directly being edited.

For (2), some kind of highlight of the changed item.

[nikolausWest]

Regarding (1) I actually don't think what you see in the viewport is enough. It's often unclear what the actual structural result will be when you drag a view around nested containers. However, I understand your point so we should probably think through the design a bit more before starting on this then

[nikolausWest]

Figma seems to take a bit of a mixed approach here:

drag_preview_structure.mp4