Some plotly plots do not work with Carnets browser settings

[kalebmckale]

After attempting to diagnose the reason why a particular plot was not displaying, I discovered the plots do appear in Chrome and Safari on the iPad. So, it appears that there’s some setting or feature that Carnets has accidentally left disabled in the built-in browser that’s preventing these plots from appearing.

Using one of Plotly’s examples is sufficient to see this:

3D Scatter Plot with Colorscaling and Marker Styling

import plotly.graph_objects as go
import numpy as np

# Helix equation
t = np.linspace(0, 20, 100)
x, y, z = np.cos(t), np.sin(t), t

fig = go.Figure(data=[go.Scatter3d(
    x=x,
    y=y,
    z=z,
    mode='markers',
    marker=dict(
        size=12,
        color=z,                # set color to an array/list of desired values
        colorscale='Viridis',   # choose a colorscale
        opacity=0.8
    )
)])

# tight layout
fig.update_layout(margin=dict(l=0, r=0, b=0, t=0))
fig.show()

[holzschu]

I'll have a look.

[holzschu]

I ran the code, and I'm seeing the figure. The only difference I see is that I restarted the app after installing plotly. Update: on the iPhone, I see the full figure, with the plots. On the iPad, I see only the frame and captions, but not the plots. There are no differences in code between the iPhone version and the iPad version.

[kalebmckale]

Yes, that is strange. It’s also interesting that the plots will show if the notebook is opened in either Safari or Chrome browsers, although it’s preferred to stay within the Carnets app. I’ll do some exploration on internet to see if other app devs have noticed differences between their apps on iPhone vs iPad.

[holzschu]

If you can connect a Mac to your iPad or iPhone, you can enable the "Develop" menu in Safari (https://support.apple.com/en-gb/guide/safari/sfri20948/mac), then inspect what is happening on every WebView on the iPad (and Jupyter notebooks are rendered in a WebView). It's a great debugging tool.

Here's what I have so far:

• the HTML and JS code generated is identical on the iPhone and iPad (that's a relief)
• both generate SVG graphics, that is converted to WebGL somewhere.
• in the "Graphics" tab, I can inspect each graphics. The one that corresponds to the Plotly graphics is easy to spot.
• on the iPhone, I can inspect each GLSL program in this WebGL graphics. On the iPad, there's always one of them that has "There was an error retrieving this resource".

That is both good and bad: There is something wrong to be fixed, but I don't see (yet) how to fix it.

update: the WebGL code used for rendering has been created by plotly (I can find the source code in index.js). So plotly has converted SVG to WebGL. There are ways to force plotly to use SVG rendering, but I can't make it work for this specific code (yet).

update(x2): the user-agent on iPads was set to: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)" (in other words, the iPad pretends that it's an Intel Macintosh, which is great for many things but not so good for plotly, which tries to estimate what level of WebGL the iPad can run). If I set it to something that says iPad, plotly scatter plots suddenly appear.

[holzschu]

Hi, the latest TestFlight version of Carnets should work with plotly on iPad: https://testflight.apple.com/join/yevwlUs1

The change is small, but the impact are potentially wide-ranging, so I'm going to run more tests to check that it doesn't break something elsewhere.

[kalebmckale]

Looks good so far. Happy to try it out and report any problems.

[kalebmckale]

Shall I close this issue now?

[holzschu]

Yes, I think you can.