UI for Compositions Sidebar

Current implementation


New mockups


Actions required:

- re-style the sidebar as per latest mockups attached.
- rename 'layers' to 'Model Hierarchy'.
- the component below 'Model Hierarchy' is a tree, so we need to be able to expand and compress tree's leaf that have children.
- on left click the item should be selected.
- on right click it should open the floating panel as per screenshot attached.
- the component needs a call back onSelect so that when a node of the tree is selected that id is returned to the callback linked.
- the component needs a call back setSelected that accept a string, if string match the id of one of the tree nodes then that node should be selected.

feel free to generate some mock data respecting this specification

{
id: string - unique key for the element
label: string - it's what displayed in the tree
tooltip: string - if given, then on hover we should display this label.
type: enum - it can be "MECHANISM / PROJECTION / COMPOSITION
}

The type enum can be linked to the icon if you would prefer that, please in case define that in the constant.js file in the root of the project.

Note that the floating panel should be available only for COMPOSITION type nodes.