Hi,
IMO this as a bug but I am posting here because I am not able to create a reproducible example so far.
Background
I have a page where 6 plots are disposed in 2 columns (with bootstrap 3). The parent div of each plot div have fixed height of 400px. Those plots have multiple traces but they are added asynchronous so, usually, when newPlot is called there is at least one trace but certainly are unloaded traces that will be added using addTraces. Eventually, moveTraces can be called to order traces.
Legends position is horizontal and due to tick labels overlap issue legend.y = -0.5.
Version 1.34.0
What is happening?
When plot is drew first time, the scrollHandler is added even legends fit perfectly in one row. The scrollHandler is added after the first legend and end on the middle of legends added later.
I was not able to reproduce or identify the source of the misbehavior but I catch some clues:
- When computeLegendDimesions is called, it calculate legends as oneRowLegend even when it adds the scrollHandler (this is way I classify it as a bug)
oneRowLegend = (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l)) > borderwidth + fullTracesWidth - traceGap;from here: src/components/legend/draw.js#L642 - When the draw function get to decide if should create scrollHandler, the legendMaxHeight is equals to 1 due the gd._fullLayout._size.h value (looks like this value comes from doAutoMargin function:
if(opts._height <= legendHeight || gd._context.staticPlot) {from here: src/components/legend/draw.js#L207
Observations
I have some user interactions that causes the plot to be re-plotted. When this happens, the scrollHandler is not added because the plot dimensions are right (I guess).
(not) Reproducing
I’ve tried couple things to reproduce with no success:
- Fix div height
- Add really long legends
- Add legends later with a timeout to reproduce the async aspect
- Make the plot’s div invisible, change visibility later with timeout and add new trace
My apologies for not been able to provide further details.
This is the result:
