Layout property not pushed through on rx.plotly (#3394)

* init fix

* Update reflex/components/plotly/plotly.py

Co-authored-by: Masen Furer <m_github@0x26.net>

* plotly: treat `data` as a `dict`-type Var in _render

this allows the data to be passed directly as a figure or from a state var

* removed width height prop as they are no longer needed

* updated

* reverted some of the changes

* fixed unit tests

* regen pyi

---------

Co-authored-by: Hongyu Yao <hongyuyao@hongyus-mbp-3.lan>
Co-authored-by: Masen Furer <m_github@0x26.net>
Co-authored-by: Hongyu Yao <hongyuyao@Hongyus-MacBook-Pro-3.local>

reflex/components/plotly/plotly.py

@@ -35,11 +35,17 @@ class Plotly(PlotlyLib):
     # The config of the graph.
     config: Var[Dict]
 
-    # The width of the graph.
-    width: Var[str]
-
-    # The height of the graph.
-    height: Var[str]
-
     # If true, the graph will resize when the window is resized.
     use_resize_handler: Var[bool]
+
+    def _render(self):
+        tag = super()._render()
+        figure = self.data.to(dict)
+        if self.layout is None:
+            tag.remove_props("data", "layout")
+            tag.special_props.add(
+                Var.create_safe(f"{{...{figure._var_name_unwrapped}}}")
+            )
+        else:
+            tag.add_props(data=figure["data"])
+        return tag

reflex/components/plotly/plotly.pyi

@@ -101,8 +101,6 @@ class Plotly(PlotlyLib):
         data: Optional[Union[Var[Figure], Figure]] = None,  # type: ignore
         layout: Optional[Union[Var[Dict], Dict]] = None,
         config: Optional[Union[Var[Dict], Dict]] = None,
-        width: Optional[Union[Var[str], str]] = None,
-        height: Optional[Union[Var[str], str]] = None,
         use_resize_handler: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -164,8 +162,6 @@ class Plotly(PlotlyLib):
             data: The figure to display. This can be a plotly figure or a plotly data json.
             layout: The layout of the graph.
             config: The config of the graph.
-            width: The width of the graph.
-            height: The height of the graph.
             use_resize_handler: If true, the graph will resize when the window is resized.
             style: The style of the component.
             key: A unique key for the component.

reflex/utils/serializers.py

@@ -255,7 +255,7 @@ def serialize_enum(en: Enum) -> str:
         en: The enum to serialize.
 
     Returns:
-         The serialized enum.
+        The serialized enum.
     """
     return en.value
 
@@ -313,7 +313,7 @@ try:
     from plotly.io import to_json
 
     @serializer
-    def serialize_figure(figure: Figure) -> list:
+    def serialize_figure(figure: Figure) -> dict:
         """Serialize a plotly figure.
 
         Args:
@@ -322,7 +322,7 @@ try:
         Returns:
             The serialized figure.
         """
-        return json.loads(str(to_json(figure)))["data"]
+        return json.loads(str(to_json(figure)))
 
 except ImportError:
     pass

tests/components/graphing/test_plotly.py

@@ -30,7 +30,7 @@ def test_serialize_plotly(plotly_fig: go.Figure):
         plotly_fig: The figure to serialize.
     """
     value = serialize(plotly_fig)
-    assert isinstance(value, list)
+    assert isinstance(value, dict)
     assert value == serialize_figure(plotly_fig)
 
 

tests/utils/test_format.py

@@ -3,12 +3,14 @@ from __future__ import annotations
 import datetime
 from typing import Any, List
 
+import plotly.graph_objects as go
 import pytest
 
 from reflex.components.tags.tag import Tag
 from reflex.event import EventChain, EventHandler, EventSpec, FrontendEvent
 from reflex.style import Style
 from reflex.utils import format
+from reflex.utils.serializers import serialize_figure
 from reflex.vars import BaseVar, Var
 from tests.test_state import (
     ChildState,
@@ -661,7 +663,7 @@ formatted_router = {
                         2: {"prop1": 42, "prop2": "hello"},
                     },
                     "dt": "1989-11-09 18:53:00+01:00",
-                    "fig": [],
+                    "fig": serialize_figure(go.Figure()),
                     "key": "",
                     "map_key": "a",
                     "mapping": {"a": [1, 2, 3], "b": [4, 5, 6]},