html.iframe 'src' attribute issue

[M-Asad-Bin-Hameed]

Just for some preface, i do not have experience with react or js

I am trying to show a plotly chart through reactpy but I am having issues.
I am using the example chart shown in plotly docs
https://plotly.com/python/embedding-plotly-graphs-in-HTML/
Python = 3.8.10, reactpy = 1.0

from reactpy import component, hooks, html, run, hooks

@component
def plotly_chart():
    src = "https://plotly.com/~chris/1638"
    return html.iframe(src=src)
run(plotly_chart)

Error

2023-07-12T12:14:11+0500 | ERROR | Failed to render plotly_chart(15aeffa2580)
Traceback (most recent call last):
  File "D:\win_venv\lib\site-packages\reactpy\core\layout.py", line 154, in _render_component
    raw_model = component.render()
  File "D:\win_venv\lib\site-packages\reactpy\core\component.py", line 55, in render
    return self.type(*self._args, **self._kwargs)
  File "test.py", line 13, in plotly_chart
    return html.iframe(src=src)
  File "D:\win_venv\lib\site-packages\reactpy\core\vdom.py", line 227, in constructor
    model = vdom(tag, *attributes_and_children, **kwargs)
  File "D:\win_venv\lib\site-packages\reactpy\core\vdom.py", line 191, in vdom
    raise ValueError(f"Extra keyword arguments {kwargs}")
ValueError: Extra keyword arguments {'src': 'https://plotly.com/~chris/1638'}

[Archmonger]

The proper way of writing this would be

from reactpy import component, hooks, html, run, hooks

@component
def plotly_chart():
    return html.iframe({"src":"https://plotly.com/~chris/1638"})
run(plotly_chart)

I recommend reading the ReactPy docs to learn more about our Python API.

[M-Asad-Bin-Hameed]

Thank you!
That works
Will take a deeper look into the docs

[rmorshea]

@M-Asad-Bin-Hameed back when the project was named IDOM we had a tool for displaying Plotly plots. If you're interested we can try to port that over to ReactPy: https://github.com/idom-team/idom-plotly

[rmorshea]

While a bit odd, I actually suspect you might be able to use that package in ReactPy without issue:

from reactpy import component
from idom_plotly import Plot

@component
def display_plotly_figure(plotly_figure):
    return Plot(plotly_figure, {"onSomeEvent": lambda browser_event, plotly_event:  ...})

[M-Asad-Bin-Hameed]

For now, I am just testing out to see which library to use for dashboard creation so just poking around. Plotly graph support would be very useful since its a lot better being able to interact with them.
I did try that code snippet
or well I just did

from idom_plotly import Plot
import plotly.graph_objects as go
from reactpy import component, hooks, html, run, hooks

and got this error

Traceback (most recent call last):
  File "to_del.py", line 1, in <module>
    from idom_plotly import Plot
  File "/mnt/d/Vision/vision/lib/python3.8/site-packages/idom_plotly/__init__.py", line 4, in <module>
    from .component import Plot, PropsDict, FigureDict, EventHandlersDict
  File "/mnt/d/Vision/vision/lib/python3.8/site-packages/idom_plotly/component.py", line 7, in <module>
    from idom import VdomDict
ImportError: cannot import name 'VdomDict' from 'idom' (/mnt/d/Vision/vision/lib/python3.8/site-packages/idom/__init__.py)

I tried that in wsl ubuntu20.04 & in win 10 with the same result. So for now i am going to leave it at that. Maybe im not installing the other library properly but i don't have the knowledge or time atm to dig too deep into this.
Thank you for your help though!