Mouse location misaligned within the graph in Jupyter Slides

[ghost]

When converting a Jupyter Notebook to Jupyter Slides, the offline Plotly diagram is displayed correctly, however, it seems that mouse location is detected in a different location where it actually is. When you hover over the graph controls, everything is ok, but the problem is located only within the plot area itself.

The code I ran is

# imports
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
import cufflinks as cf

init_notebook_mode()

iplot(cf.datagen.bars().iplot(asFigure=True,
                               kind='bar',
                               xTitle='Dates',
                               yTitle='Returns',
                               title='Returns'))

Then save the notebook as TestSlides.ipynb and convert it to slides.

jupyter nbconvert TestSlides.ipynb --to slides --post serve --reveal-prefix=reveal.js

The problem disappears when you hover over the graph control panel

The slides run as normal, the graph loads and is interactive, but the mouse is misaligned. I tried the following things but with no success:

• downgrading both versions of plotly from (1.37.1 to 1.34.0) and reveal from (3.6.0 to 3.5.0)
• introducing a layout = dict(autosize=False, width=600, height=600)
• changing the graph to a different kind

Both plotly.js and reveal.js are within the directory where the notebook is converted

anonymous@anonymous-PC:~/Projects/Analytics$ ls -l
total 23136
drwxrwxrwx 4 anonymous anonymous    4096 May 16 10:45 data
-rw-rw-r-- 1 anonymous anonymous 6487862 May  2 20:52 plotly.js
drwxrwxr-x 8 anonymous anonymous    4096 May 16 19:30 reveal.js
-rw-rw-r-- 1 anonymous anonymous 5546364 May 16 20:15 TestSlides.ipynb
-rw-rw-r-- 1 anonymous anonymous  258078 May 16 20:24 TestSlides.slides.html
drwxrwxr-x 5 anonymous anonymous    4096 May 16 11:05 venv
anonymous@anonymous-PC:~/Projects/Analytics$ 

NOTE: This only happens once the notebook is converted into slides. Within Jupyter itself, the graph is displayed without any issues

[fcooper8472]

@kalinkirev I'm having the same issue - did you find a solution?

[jonmmease]

Hi @kalinkirev , if you're still interested in pursuing this could you:

1. Add small example that doesn't use cufflinks
2. Make sure the problem persists with plotly.py version 3.2+
3. Attach your simple test notebook and the resulting revealjs slides.

Thanks!

[jonmmease]

Closing due to lack of activity. Feel free to open a new issue with the requested info if you're still interested in working through this.

[BohdanYatsenko]

Hi, have problem with plotly in jupyter slides as already described:
there are some offset of tooltips when mouse is over a plot but the problem disappeared when mouse is over control panel.
Also it depends on size of a browser window: offset is bigger for bigger window size

offset.zip

[konvica]

Hi, the problem is related to the scale transformation inside slide element. Supressing this transformation removes cursor problem, however disrupts scaling (not suprising) and translations. My css/html knowledge is very limited. Please what is the best way to supress scaling transformation here?
The confilict is probably with slides self scaling and plotly self scaling to match window size.

Screenshot with highlighted property scale(......).

[jonmmease]

Hi @konvica, thanks for digging into this.

@etpinard @antoinerg Would you expect Plotly.js to work properly under a transformed div? If not, is this something that would be reasonable to support in the future?

[etpinard]

If not, is this something that would be reasonable to support in the future?

Totally reasonable, tracked in plotly/plotly.js#888