scattergl: categorical data is not drawn while zooming or panning

[harrisonmg]

example: https://codepen.io/Harrison-Gieraltowski/pen/wvNOJMp

When changing to the pan tool and panning, the points disappear until the mouse is released.

This is not the case if the X and Y values are purely numerical. Changing all of the Y values to a simple string does work, however.

scrollZoom doesn't seem to work in codepen so I can't demonstrate it.

[CallumNZ]

I'm seeing the same issue. From what I can tell the bug was introduced in version 2.26.0 (it works fine in the previous version 2.25.2).

[micah-svenson]

I also see the same issue. Numeric data on both axes has no problem, but plotting time on one axis causes the behavior.

In addition to points disappearing on pan, I also see points disappear when using the drag to zoom feature.

I'm using Plotly.js 2.29.0

[eiriklv]

+1 on this. Having this issue when using time on one axis (2.33.0)

[eiriklv]

I guess I have to get super familiar with the internals - because it's not clear to me what changed here to break it: v2.25.2...v2.26.0

[eiriklv]

Found the root cause - the issue seems to be this commit: ab9d1cc

If you comment out those lines it works as expected. I'm assuming that it does not take into account some edge case related to dates.

[eiriklv]

To be more exact it's this line: https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/dragbox.js#L895

[eiriklv]

Here is the fix:

if (sp._scene) {
  var xrng = Lib.simpleMap(xa.range, xa.r2l);
  var yrng = Lib.simpleMap(ya.range, ya.r2l);

  if (xa.limitRange) xa.limitRange();
  if (ya.limitRange) ya.limitRange();

  // date strings for the x axis needs to be converted
  // into ms, otherwise it corrupts the plot and removes
  // any scattergl traces while zooming or panning
  if (xa.type === "date") {
    xrng = xa.range.map((range) => Lib.dateTime2ms(range, xa.calendar));
  } else {
    xrng = xa.range;
  }

  yrng = ya.range;

  sp._scene.update({
    range: [xrng[0], yrng[0], xrng[1], yrng[1]],
  });
}

[eiriklv]

Or even simpler:

if (xa.limitRange) xa.limitRange();
if (ya.limitRange) ya.limitRange();

var xrng = Lib.simpleMap(xa.range, xa.r2l);
var yrng = Lib.simpleMap(ya.range, ya.r2l);

[CallumNZ]

Thank you @eiriklv !!