Rotating a 3D plot causes flickering and changes in data visibility

[positron96]

Hi. I am trying to plot a series of scatter3d lines (one per timestamp), and when I rotate the plot interactively, it flickers heavily and random points from the data are dropped, sometimes to the point that only a small portion of the plot is shown, and sometimes, there is no data at all. Is it a known problem?

Here are some screenshots when rotating the plot (the first one shows all of the data, and next are lost)

[jacksongoode]

Could you make a minimal example of this and I would be happy to investigate. My first thought is maybe that you have some values for the view of the 3d model set in the config.

[positron96]

Hi! No, I left the configs as default, only added zero margin to layout YAML.
Anyway, while making a minimal example I discovered that this flickering only happens when you take data from a histogram (I have a prometheus datasource with "metric_bucket" metric, with labels le=1000, le=2000,...,le=39000,le=+Inf).

Here is a minimal example ("Processing script", all other sections are default, except margin: {b: 0, l: 0, r: 0, t: 0} added to layout):

let times = data.series[0].fields[0].values.map((t)=>new Date(t));
let values = data.series[0].fields[1].values;
lines = []
const N = 30
for(let i=0; i<times.length; i++) {
  let line = { 
    y: Array.from({length: N}, (_, n) => n),
    x: Array.from({length: N}, (_, n) => times[i]),  
    z: Array.from({length: N}, (_, n) => values[i]),
    type: 'scatter3d', 
    mode: 'lines'
  };
  lines.add(line)
}

return { 
  data: lines,
  layout: {
    showlegend: false,
  }
};

For every timestamp it creates a line of 30 points with value from 1st series, so it works with ordinary queries for, e.g. cpu temperature. And it does not flicker with these queries. But the moment you select a "something_bucket" metric, it starts flickering and missing data when you rotate the plot.

This is how the script works for a temperature metric. Yes, it's not pretty and not very usable, but it's a minimal example.

But if you choose a "something_bucket" metric with structure described above, and rotate the plot, at some points it can look like this:

Also you can notice that not only plot data gets distorted, but also axes and grids and axes tick labels.

[positron96]

One more observation. It could be related to float rounding issues. Or to date handling in plotly. If you use time/1e9 instead of just time, the flickering is gone (and axis ticks are no longer in date format but in numbers).
The problem also manifests more on short time ranges (10 minutes) while it's much less when the range is 2 days.
I believe in my previous message replacing histogram with another metric caused changes in behavior because the histogram had less data and so the date range was smaller. This in turn caused the flickering, not the metric datatype in itself. If I select short range when plotting a numeric metric, the flickering is there also.

[positron96]

Well, it's an upstream issue:
plotly/plotly.js#3306
plotly/plotly.js#6505

supposedly, the fix is in this PR: gl-vis/gl-axes3d#23

[jacksongoode]

Thank you so much for diagnosing this! Do you think we can close the issue given the upstream fix?

[positron96]

The PR has not been approved in 3 years, but anyway this project is not the right place to fix this bug, so closing, yes. Thanks!