Multiple style improvements for the entity components. Among these:
- A more consistent style for entity values and toggler buttons.
- Fixed overflowing/underflowing entities on smaller/larger screen
sizes.
- Simplified the stylesheets for many entities as many component classes
have now been moved to `common.scss`.
The entity name and value in the component header may be arbitrarily
long and rendered on small screens.
We therefore need to ensure that the text won't overflow the screen
width.
There are probably more optimal ways of achieving this other than
passing a reference to the full list of entities to each of the
entities, such as running a BFS to recursively expand all the entities
within the child hierarchy of an entity.
This is needed because the entity needs to know which entities aren't
direct children, but are two or more layers down in the hierarchy, so
they should be passed to their own child entities.
- Toggle collapsed state also if clicked on the gap between the entity
name and the right edge, instead of opening the entity modal. The
entity configuration modal should open only when clicking on the
entity name or icon (and these should be highlighted on hover as links
as well).
- The collapsed state update should be propagated to the wrapped
component as well, if applicable.
The performance of the page is heavily degraded by components loaded
dynamically via defineAsyncComponent that recursively carry behind the
whole Vue machinery.
By wrapping defineAsyncComponent calls in shallowRef we make sure that
we only wire the root level of the newly created dynamic component.