[Bug]: Annotation ReferenceLine invisible when not fully in plot window

[diraneyya]

Describe the bug

Hello!

This is a simple issue but a one that is likely to generate a lot of confusion for newcomers to Evidence.

In this issue, I report that a ReferenceLine, unless fully contained in the window of the ScatterPlot, seem not to be displayed at all. This is particularly inconvenient (and can be very confusing) with things like regression lines, since the regression line might not completely conform to the x and y ranges of the scattered data points.

Tip

I also want to add that I was one of those users who assumed that an annotation line is an infinite line, rather than a line segment. It is a potential point of confusion depending on the background of the user. Those coming from a mathematical background will likely expect the line to be infinite on both ends. This behaviour can be provided by offering slope and intercept to replace x, y, x2 and y2 in the use cases that favour such a specification.

An example is shown in the steps to reproduce below.

Steps to Reproduce

Before adjusting the y range: (the annotation line is completely hidden, even though most of it lies within the window of the ScatterPlot)

After adjusting the y range: (by using yMax=10)

Logs

NA

System Info

NA

Severity

annoyance

Additional Information, or Workarounds

In this example we use two data sources for the scattered points and the regression line:

<ScatterPlot data={data_points} x=radius y=results yMax=10>
    <ReferenceLine y=9.21 label="10,000 Results (Max)" color=negative />
    <ReferenceLine data={regression} x=x y=y x2=x2 y2=y2 label="Algorithmic Regression Line" color=base-content-muted lineType=dashed />
</ScatterPlot>

This means, that we cannot use x, y, x2 and y2 from the regression query to define xMin, xMax, yMin, and yMax.

[diraneyya]

I found a workaround for this using extended echarts options, which works, even though with added verbosity:

<ScatterPlot data={data_points} x=radius y=results echartsOptions={{
  yAxis: {
    max: (value) => value.max + 0.15,
    min: (value) => value.min - 0.15,
  }
}}>
    <ReferenceLine y=9.21 label="10,000 Results (Max)" color=negative />
    <ReferenceLine data={regression} x=x y=y x2=x2 y2=y2 label="Algorithmic Regression Line" color=base-content-muted lineType=dashed />
</ScatterPlot>