`figure.circle` render jumps around x-axis when zooming

I’m a big fan of the library and have tried to be thorough in this bug report. Finding something like this might turn off people. If I’m doing science and the data appears to change while interacting, that breaks everything.

HTH

ALL software version info (bokeh, python, notebook, OS, browser, any other relevant packages)

• bokeh == 1.04
• python == 3.7.2
• Linux - Ubuntu 16
• Chrome browser

Description of expected behavior and the observed behavior

Time series data from two curves plotted on same figure, when zooming the x-values of one curve jumps left and right of the reference curve. Not sure if the actual values are changing (unlikely) but it’s rendered position, relative to the reference curve jumps to the left and to the right or to the nominal position when zooming in/out.

Complete, minimal, self-contained example code that reproduces the issue

from bokeh.plotting import figure, output_file, save
from bokeh.models import ColumnDataSource, LinearColorMapper, Range1d, WheelZoomTool                                                                
from bokeh.layouts import column, row
import numpy as np
import pandas as pd


fig_kwargs = {
    "x_axis_type": "datetime",
    "width": 1900,
    "height": 400,
    "tools": "pan,save,reset,box_zoom,xwheel_zoom",
    "active_scroll": "xwheel_zoom",
    "output_backend": "webgl",
}
output_file(f"reproduce.html")

fig = figure(**fig_kwargs)

control = np.arange(100)

df = pd.DataFrame(
    {
        "time": pd.date_range(pd.datetime.now(), periods=100, freq="1s"),
        "ctrl": control,
        "test": control + 5 * np.random.randn(100),
    }
)

# control
fig.scatter(
    x=df.time,
    y=df.ctrl,
    line_color="red",
    fill_color=None,
    marker="cross",
    size=5,
    legend="control line",
)

# test - no worky
fig.circle(
    x=df.time,
    y=df.test,
    fill_color=None,
    line_color="black",
    size=5,
    legend="test - wierd",
)

# test - yes worky
fig.scatter(
    x=df.time,
    y=df.test,
    fill_color=None,
    line_color="blue",
    size=5,
    legend="test - normal",
)

save(column(fig))

Stack traceback and/or browser JavaScript console output

Possibly issue related to WebGL backend compatibility

Screenshots or screencasts of the bug in action

Working at 1st zoom-level when method is scatter

Working at 2nd zoom-level when method is scatter

Not Working at 1st zoom-level when method is circle

Not Working at 2nd zoom-level when method is circle

[bryevdv]

@devjit There have been a few small improvements to webgl codepaths recently. It’s possible this was fixed incidentally/accidentally as part of those—you’d just need to try a latest release and see. The large chunk of work I described above (re-writing the webgl backend) has not started yet (we did not get the CZI funding in 2019)

[bryevdv]

There was the start of a major webgl re-work in 2.2 and as of that release I can no longer repro this issue, so I will close. If you can still see this issue with 2.2+ please provide a complete minimal reproducer to investigate.

Note that there is a small unrelated issue where webgl does not like like None colors (I had to set fill_color to “white” e.g.)