initialBrushPosition does not work on first render

[JoeVanGundy]

I have an AreaClosed shape set up with a brush on top of it.

When the plots load, the brush does not show up. However, if I use the code from the example to reset the plot, then the brush shows up.

Any ideas/how would I go about debugging this? Since the values are hardcoded, what could prevent the brush from displaying?

I have hard coded my initialBrushPosition to a value I know is valid.

const initialBrushPosition = useMemo(
    () => ({
      start: { x: 100 },
      end: { x: 300 },
    }),
    [xBrushScale]
);

My brush looks like:

 <Brush
    xScale={xBrushScale}
    yScale={yBrushScale}
    width={xBrushMax}
    height={yBrushMax}
    handleSize={8}
    margin={margin}
    innerRef={brushRef}
    brushDirection="horizontal"
    resizeTriggerAreas={['left', 'right']}
    initialBrushPosition={initialBrushPosition}
    onChange={onBrushChange}
    selectedBoxStyle={selectedBrushStyle}
    useWindowMoveEvents
 />

My x scale looks like:

const xBrushScale = useMemo(
   () =>
      scaleTime({
      range: [0, xBrushMax],
      round: true,
     domain: extent(sortedData, getDate),
   }),
   [xBrushMax, sortedData]
);

[JoeVanGundy]

In the panic of trying every possibility to stop from embarrassing myself, I found the issue haha. On first render, the width of the plot is coming back as 0. So if the plot begins at 0, then it seems that initialBrushPosition no longer works? I see now there's a check in the demo to stop this from happening: if (width < 10) return null;.

However this does surface another issue that seems related. If you make a brush selection, then resize the plot (via browser resize), the brush maintains the same position. This limitation is in the demo as well.

Regular plots aren't affected by this, so is there any way around this, or is this just a limitation in the D3 library?

Thanks!

[williaster]

Hey @JoeVanGundy thanks for opening the issue and doing some digging. The responsive stuff can be tricky at times.

Because Brush is a class component I'm sure this is due to some stale state when props.width/height update 🙄 . Playing with the demo, a quick fix would be to force a remount on size change by using a key which contains width/height e.g., key={'${width}-${height}'}. Then Ideally we would fix the logic in componentDidUpdate in BaseBrush which currently updates bounds but not start/end/extent.