Mismatch Between Cell Output and Rendering in Figure Directive

[agahkarakuzu]

I have a labeled cell (#| label: fig1-cell) whose output (in jupyter lab) is the following interactive (plotly) figure:

pio.renderers.default = "plotly_mimetype"

...

fig.update_layout(
    title='Sentient Array of Knowledge Unraveling and Assessment (SAKURA)',
    hovermode='closest',
    autosize=True,
    width=850,
    height=850,
    paper_bgcolor = "white",
    plot_bgcolor = "white")
fig.show()

Here, scatter markers are nicely aligned with the background image, and I set figure dimensions 850x850 explicity.

Then in the markdown I define my directive as:

:::{figure} #fig1-cell
:label: fig1
:align: center
:width: 850px
:height: 850px
Caption
:::

However, the output looks like this:

I cannot figure out why the scatter markers are transformed in the myst webpage. I'd be glad if anyone could help.

Thanks!

[stevejpurves]

Guessing that the output here is an svg / vector though?

Only thing I can think of is that css in myst is somehow impacting that. It almost looks like a rotation+scale transform though not just a scale along the main axes. I would try using the browser dev tools to inspect the classes / styles applied to the markers in both jupyter lab and myst and try to get a sense of what the differences are, to see if any classes / styles are overridden in the myst but applied/active in jlab -- especially if I could narrow it down to a particular class name that could be colliding - that's just a starting point though.

But! another angle are the respective plotly versions, we are building myst with a specific version of the plotly plugin just now. See https://github.com/jupyter-book/myst-theme/blob/ca8893f967a551ba02d3ec1022a056c2750a4563/packages/jupyter/package.json#L32

[agahkarakuzu]

Guessing that the output here is an svg / vector though?

It is html (yet indeed rendered under main-svg), you can download it from here:

https://drive.google.com/file/d/1brfCGzJ_zW0GYHBWyB7im12iavABb1by/view?usp=sharing

and myst page is here.

Div class="plot-container plotly" is 850x850, and the figure appears as it should.

I did some digging, the only obvious transformation I could see for the scatter was this:

and that does not really explain the transformation here 🧐

My plotly version is plotly==5.11.0