Changes to a single tracked entity cause entire ui tree to be reapplied

[TheDudeFromCI]

The current implementation for tracking entities triggers the style sheet to be refreshed whenever a tracked entity has a component changed. By refreshing the style sheet, the entire user interface, and all components within the hierarchy are also refreshed.

Because a change can be caused by something such as hovering over an entity with a pseudo class, changes can occur extremely frequently. For very large UI trees, this can have a non-negligible effect on performance. Especially on highly complex menu structures that can use hundreds of nested entities for each page or hidden tab and so on.

A solution to address this might be to only reapply the CSS to the updated entity and it's children within the hierarchy. This would help to drastically reduce the number of elements being refreshed for updates to smaller elements within the interface.

While this is not a high priority issue, it is something worth considering as this project continues to get future updates.

[afonsolage]

That's a good point and there is a lot of room for improvement, but until something like Observers or some forms of reactivity lands on Bevy (I think 0.14), it won't worth to do so, since it's very difficult to know, for instance, when a child entity has a new component which matches a property.

For example:

.pop-up :hovered {
    /* Something */
}

In this case, we need to keep an eye for all descendants of .pop-up which may or may not have an Interaction component. So when we track its entities, one descendants may have no Interaction component but later on can be added and we need to react to this change.

In the future, we should be able to improve this by defining some kind of TransientProperty, which are special properties that we have to react to add, removal and change detection (that's why Observers are a thing here). Not all properties needs to be transient tho, since Text and Style, for instance, will likely to always be there.