This PR changes the way details are displayed in the query planning tree.
before
after
This is done with tooltips
why its more Complicated than it should be
There are two issues i ran into, both seem to come from the combination of Treant.js and popper.js.
1. clipping
When the tooltip is outside of the Treant canvas, it just gets cut off.
To solve this i place the tooltip below the node if the y-position is below 20px.
That's a hack, but it seems to work fine.
issue
fix
I tried placing the tooltip below for all nodes, that does not work for similar reasons.
I also spend some time fighting with the z-index, without success.
2. overflow
In large trees, where you need to scroll to the right, the tooltip's have a "wrong" width.
Goal
detailsare displayed in the query planning tree.This is done with
tooltipswhy its more Complicated than it should be
There are two issues i ran into, both seem to come from the combination of
Treant.jsandpopper.js.1. clipping
When the tooltip is outside of the Treant canvas, it just gets cut off.
To solve this i place the tooltip below the node if the y-position is below 20px. That's a hack, but it seems to work fine.
I tried placing the tooltip below for all nodes, that does not work for similar reasons. I also spend some time fighting with the
z-index, without success.2. overflow
In large trees, where you need to scroll to the right, the tooltip's have a "wrong" width.
To solve this i just set the width to
250px.