Skip to content

Resolve "Improve side nav with `createPortal`"

Mael Gaonach requested to merge 313-improve-side-nav-with-createportal into main

Closes #313 (closed)

Update side nav to use react's createPortal

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.

Edited by Mael Gaonach

Merge request reports

Loading