Resolve "Improve side nav with `createPortal`"
Closes #313 (closed)
createPortal
Update side nav to use react's Previously we were passing a react node to be rendered by a parent context. This was not react-friendly and could be unstable in certain conditions. Now using react's createPortal
which is meant to do exactly this (render some part of a componenent somewhere else in the DOM).
Implemented some way to automatically compute the position for each element in the side nav
We are inserting into the side nav a variable number of elements from different parts of the app, we need some way to know how to order them in the side nav, as each element is not aware of what other elements could be added from somewhere else.
Previously, this was done with a position
parameter given along with the node
to be rendered, and then sorting the nodes based on the value of this position. The issue with this is that in order to choose a value for the position, you need to know what other elements can appear beside it and what their positions are, so that you can adapt the value to be lower or greater.
This implementation is now using the depth in the dom of the source component to compute the value for the position.
This works because the DOM also reflects the hierachy of the components. For instance, on the Data
page, the InvestigationsPage
component is a children of the Data
component, so in the side bar we will have Data
's side nav first, then InvestigationsPage
's side nav.
It is still possible to provide a position
parameter if required in a specific case where this would not work.