Ploty sliders and animation controls not displayed

[Warvito]

Describe the bug

When I try to use Plotly's sliders or animation controls (updatemenus) from plotly.graph_objects.Figure with gradio.Plot(), they are not displayed.

Is there an existing issue for this?

• [X] I have searched the existing issues

Reproduction

An animation button example based on https://plotly.com/python/animations/#simple-play-button :

import gradio as gr
import plotly.graph_objects as go

def draw_plotly():
    fig = go.Figure(
        data=[go.Scatter(x=[0, 1], y=[0, 1])],
        layout=go.Layout(
            xaxis=dict(range=[0, 5], autorange=False),
            yaxis=dict(range=[0, 5], autorange=False),
            title="Start Title",
            updatemenus=[dict(
                type="buttons",
                buttons=[dict(label="Play",
                              method="animate",
                              args=[None])])]
        ),
        frames=[go.Frame(data=[go.Scatter(x=[1, 2], y=[1, 2])]),
                go.Frame(data=[go.Scatter(x=[1, 4], y=[1, 4])]),
                go.Frame(data=[go.Scatter(x=[3, 4], y=[3, 4])],
                         layout=go.Layout(title_text="End Title"))]
    )
    return fig


demo = gr.Interface(fn=draw_plotly, inputs=[], outputs=gr.Plot())

demo.launch()

A slider example based on https://plotly.com/python/sliders/#simple-slider-control :

import gradio as gr
import plotly.graph_objects as go
import numpy as np

def draw_plotly():
    fig = go.Figure()

    # Add traces, one for each slider step
    for step in np.arange(0, 5, 0.1):
        fig.add_trace(
            go.Scatter(
                visible=False,
                line=dict(color="#00CED1", width=6),
                name="𝜈 = " + str(step),
                x=np.arange(0, 10, 0.01),
                y=np.sin(step * np.arange(0, 10, 0.01))))

    # Make 10th trace visible
    fig.data[10].visible = True

    # Create and add slider
    steps = []
    for i in range(len(fig.data)):
        step = dict(
            method="update",
            args=[{"visible": [False] * len(fig.data)},
                  {"title": "Slider switched to step: " + str(i)}],
        )
        step["args"][0]["visible"][i] = True
        steps.append(step)

    sliders = [dict(
        active=10,
        currentvalue={"prefix": "Frequency: "},
        pad={"t": 50},
        steps=steps
    )]

    fig.update_layout(
        sliders=sliders
    )
    return fig


demo = gr.Interface(fn=draw_plotly, inputs=[], outputs=gr.Plot())

demo.launch()

Screenshot

Logs

No error message

System Info

gradio.__version__
'3.0.22'

Severity

annoying

[omerXfaruq]

@dawoodkhan82 I remember you working with plotly, could you take a look on this?

[Warvito]

Hi @abidlabs , sorry, but I am still having the same problem, even with gradio==3.0.25

I created an example with a docker image to be easier to replicate (https://github.com/Warvito/gradio_plotly_example)

In a docker container, I installed the latest gradio and plotly versions

FROM python:3.8.13-slim-buster

RUN pip3 install -U pip
RUN pip3 install gradio==3.0.25 plotly==5.9.0
COPY animate_example.py .

where animate_example.py is one of the previous example with a specific server_name and server_port

...
demo.launch(server_name="0.0.0.0", server_port=7600)

Then, I built it and ran it using the following commands

docker build -f Dockerfile -t gradio_example .
docker run -it -p 7600:7600 gradio_example python3 animate_example.py

but it still does not show the animation buttons or the slider. Is gradio compatible with a specific Plotly version?

I also noticed that when I click outside next to a plotly mode bar button (for example, at the right of the "zoom in" button), it still performs its action. This also happens in the plotly example from the website (https://gradio.app/docs/#plot in the "outbreak_forecast" when using the Plotly example).

[Warvito]

Hi @abidlabs and @dawoodkhan82 , I found out that the bug is still present when we set demo.launch(inline=True) or when we try to visualize on the browser. It only show the buttons and sliders when using a jupyter notebook.

Could you please re-open the issue?

[abidlabs]

Confirming that the same problem happens for me.

Here's how it looks in a jupyter notebook:

But here's how it looks in a new tab:

@dawoodkhan82 would you be able to take a look?

[dawoodkhan82]

Plotly doesn't work well inside of a shadow dom. Will take extra work to find a work-around