Artifacts in hover over embedded plot


#1

I am getting some artifacts that follow my cursor in a scatter plot. I am using javascript to put the plot in a DIV on the page. Also of note is that the page uses some canvas elements via P5.js. I know the first thing people will ask is for an example that duplicates the bug. I can’t make it; it shows up in my giant complicated code, it doesn’t show up in anything else I make in codepen or anywhere else. Here is an image:
20 PM

I know its a long shot, but anybody even know where I might start?


#2

Yikes. I’ve never seen this before.

Would you mind sharing a reproducible example to help us debug?


#3

@etienne, I definitely get how helpful a reproducible example would be. I will do my best to figure out what is causing it so I can reproduce it in a simple example. My best guess right now is it is some interference from p5.js overlap. I can’t confirm this, but is seems to be drawing a new line above the graph each time p5 refreshes the canvas. I have no idea how that could happen, but it’s the only thing I can think of. I will work on reproducing it in a simple example. In the meantime do you have any ideas at all? It’s a pretty serious bug…


#4

I have a similar issue as well. I’ll see if I can simplify it into a Codepen. If I tab away from the page and tab back, it disappears for good. It also temporarily disappears and reappears when other onHover() calls happen on the page, unrelated to the graph.

Edit: This is NOT happening on Safari 11.0.2, but it is happening on Chrome 62. (Mac and Windows)

40 AM


#5

I’m trying to figure out what is the same about our plots. Here is my layout variable:

var layout = {

 font: {
 family:'Roboto',
 size: 12,
 color: 'rgb(54, 54, 54)'
 },
 yaxis: {title: "Temperature [C]",
 tickmode: "auto",
 tickvals: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
 ticktext:['off','on','off','on','off','on','off','on','off','on','off','on','off','on','off','on'],
 domain: [0,.49],
 mirror:'ticks',
 showline:true,
 linecolor: 'rgb(54, 54, 54)',
 ticklen:0,
 tickcolor: 'rgb(245, 245, 245)',
 linewidth: 1}, // set the y axis title
 yaxis2: {title: "Pressure [bara]",
 tickmode: "auto",
 tickvals: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
 ticktext:['off','on','off','on','off','on','off','on','off','on','off','on','off','on','off','on'],
 domain: [.51,1],
 mirror:'ticks',
 showline:true,
 linecolor: 'rgb(54, 54, 54)',
 linewidth: 1,
 ticklen:0,
 visible:true,
 tickcolor: 'rgb(245, 245, 245)'},
 xaxis: {title: "Time (your current local time)",
 mirror:'ticks',
 showline:true,
 linecolor: 'rgb(54, 54, 54)',
 linewidth: 1,
 tickformat: "%H:%M" // customize the date format to
 },
 showlegend: true,
 paper_bgcolor: 'transparent', //'rgb(245, 245, 245)',
 plot_bgcolor: 'rgb(255, 255, 255)',
 autosize: false,
 legend: {
 orientation: "h",
 y:-.2,
 x:0,
 font: {
 family:'Roboto',
 size: 12,
 color: 'rgb(54, 54, 54)'}
 },
 hoverlabel:{
 font: {
 family:'Roboto',
 size: 12,
 },
 namelength:(-1)
 },
 margin: {
 l: 60,
 r: 60,
 b: 40,
 t: 30,
 pad: 4
 },
 height: 540,
 width: 850
 };

I am running two overlapping divs: one is a P5.js canvas and the other is the plotly plot. I made this codepen that simulates the formatting I am using but it doesn’t duplicate the issue: https://codepen.io/murenrb/pen/bYPgbL

I am using restyle to update the arrays and maybe that is somehow causing the issue? I am going to try to play with that more in the codepen and see if I can get it to duplicate.

What is your general setup?


#6

Here’s my reproduced chart as well.

https://plot.ly/~dannypage/1/


#7

@Etienne, can you weigh in on this? It seems like a pretty serious bug that now multiple people are seeing.


#8

Well. Looks like nobody was able to reproducible the bug in an isolated environment. So there’s not much I can do at this stage.


#9

Great, you don’t care that your product sucks. No problem. I will figure out how to reproduce it.


#10

Funny how you went from

to

in one week.


#11

That is funny. Your lack of interest in a serious bug in your software made me extremely frustrated and given that I think I went through a very predictable transition in my attitude.

Debugging without a simple reproducible example is really hard. I am spending, and will continue to spend a lot of time trying to make a simple example for you. But in the meantime you could have responded with a more productive message like: “It’s a serious bug, thanks for making us aware of it. We will try our best.” instead of responding with:

there’s not much I can do at this stage.

This is, after all, your product. If it were my project I would at least be apologetic about it not working well. I am simply stating a fact: you don’t care about your product’s quality.

I will let you know when I get an isolated example working. Or, if you don’t care, we can just mark this as resolved and move on with our lives.


#12

Hmm. Without a reproducible example, how can you be sure that’s the case?


#13

@etienne, Thanks for any time looking at this. I played around with my plot above: Looks like the combination of [hover on the line traces + the area charts] is what created the artifacts for me. I talked with my team; we are gonna drop the area charts and move forward. Hopefully this helps a bit if you all get a chance to look at it, but otherwise I’m good! Thanks again!

PS: Redrawing the chart on onLeave() didn’t help on Windows + Chrome 63, it did on Mac. shrug