Support list of Plotly objects

[picklelo]

Currently the following code doesn't work:

import reflex as rx
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

xx = [1,2,3,4]
yy = [3,2,6,1]
df = pd.DataFrame(zip(xx,yy))
fig = px.line(df,x=0,y=1)
class State(rx.State):

    stateFig: go.Figure = fig
    figList: list[go.Figure] = [fig]*4

def index():
    return rx.vstack(
        rx.heading("hello"),
        rx.plotly(data=State.stateFig),
        rx.plotly(data=State.figList[0],height="400px")
    )

app = rx.App(state=State)
app.add_page(index)

app.compile()

The first figure is shown, but when indexing into a list, the output is not rendered correctly. We should support this syntax.

[Smit-Parmar]

@picklelo How to run this changes? I tried to add above code in example.py run commands : poetry run reflex init and poetry run reflex run but nothing happened just got reflex home page.

[f-fuchs]

Hey,

when I run following code.

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
import reflex as rx

xx = [1, 2, 3, 4]
yy = [3, 2, 6, 1]
df = pd.DataFrame(zip(xx, yy))
fig = px.line(df, x=0, y=1)

class State(rx.State):
    stateFig: go.Figure = fig
    figList: list[go.Figure] = [fig] * 4
    indices: list[int] = list(range(len(figList)))

@rx.page(route="/")
def index():
    return rx.vstack(
        rx.heading("hello"),
        rx.divider(),
        rx.plotly(data=State.stateFig),
        rx.divider(),
        rx.foreach(
            State.figList,
            lambda figure: rx.plotly(data=figure, height="400px"),
        ),
        rx.divider(),
        rx.foreach(
            State.indices,
            lambda index: rx.plotly(data=State.figList[index], height="400px"),
        ),
    )

app = rx.App(state=State)

I get following output:

Why does iterating over a list of figures fail but iterating over an index and indexing the figure work? Is this intended behavior?

[reflex-dev-support]

Hey!

Can you ask this question in our Discourse forum? That way other people can see the answer once we get it.

• Reflex Team

--- original message --- On September 17, 2024 at 1:44 AM PDT @.*** wrote:

Hey,

when I run following code.

import pandas as pd import plotly.express as px import plotly.graph_objects as go import reflex as rx

xx = [1, 2, 3, 4] yy = [3, 2, 6, 1] df = pd.DataFrame(zip(xx, yy)) fig = px.line(df, x=0, y=1)

class State(rx.State): stateFig: go.Figure = fig figList: list[go.Figure] = [fig] * 4 indices: list[int] = list(range(len(figList)))

@rx.page(route="/") def index(): return rx.vstack( rx.heading("hello"), rx.divider(), rx.plotly(data=State.stateFig), rx.divider(), rx.foreach( State.figList, lambda figure: rx.plotly(data=figure, height="400px"), ), rx.divider(), rx.foreach( State.indices, lambda index: rx.plotly(data=State.figList[index], height="400px"), ), )

app = rx.App(state=State)

I get following output:

image.png (view on web)

Why does iterating over a list of figures fail but iterating over an index and indexing the figure work? Is this intended behavior?

—

Reply to this email directly, view it on GitHub, or unsubscribe.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

To unsubscribe from this group and stop receiving emails from it, send an email to @.*** --- end of original message ---

[f-fuchs]

i was thinking this seems more like a bug....

I already found a workaround so not really sure what the upside is, of asking this question in the discourse forum.

[reflex-dev-support]

Makes sense! There's a good ask ai feature in the search bar of our docs. That should help with debugging things faster + discovering some of Reflex's features