streamlit-react-components 1.0.0__py3-none-any.whl → 1.0.1__py3-none-any.whl

streamlit_react_components/common/plotly_chart.py

@@ -1,5 +1,6 @@
 """PlotlyChart component - Render Plotly charts with full interactivity."""
 
+import streamlit as st
 import streamlit.components.v1 as components
 from pathlib import Path
 from typing import Dict, Any, Optional, List, Union
@@ -12,6 +13,36 @@ _component = components.declare_component(
 )
 
 
+# Global key for expanded chart dialog - only ONE dialog can be open at a time
+_EXPANDED_DIALOG_KEY = "_plotly_expanded_chart_dialog"
+_PROCESSED_EXPAND_KEY = "_plotly_processed_expand_ts"
+
+
+def _maybe_render_expanded_dialog() -> None:
+    """Check if an expanded chart dialog should be rendered. Call at start of plotly_chart()."""
+    import plotly.graph_objects as go
+
+    if _EXPANDED_DIALOG_KEY not in st.session_state:
+        return
+
+    dialog_data = st.session_state[_EXPANDED_DIALOG_KEY]
+    if not dialog_data.get("open"):
+        return
+
+    # Clear the flag IMMEDIATELY to prevent re-rendering on subsequent plotly_chart calls
+    st.session_state[_EXPANDED_DIALOG_KEY] = {"open": False}
+
+    figure_dict = dialog_data["figure"]
+    title = dialog_data.get("title", "")
+
+    @st.dialog(title or "Chart View", width="large")
+    def _expanded_dialog():
+        fig = go.Figure(figure_dict)
+        st.plotly_chart(fig, width="stretch", key="_expanded_plotly_chart")
+
+    _expanded_dialog()
+
+
 def _dataframe_to_figure(
     data: Any,
     x: Optional[str],
@@ -99,6 +130,8 @@ def plotly_chart(
     on_select: bool = False,
     on_hover: bool = False,
     on_relayout: bool = False,
+    expandable: bool = False,
+    modal_title: str = "",
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
     key: Optional[str] = None,
@@ -125,6 +158,8 @@ def plotly_chart(
         on_select: Enable selection events (box/lasso selection)
         on_hover: Enable hover events (returns hovered points)
         on_relayout: Enable relayout events (zoom/pan state)
+        expandable: Show expand button to open chart in full-page dialog
+        modal_title: Title displayed in dialog header when expanded
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
         key: Unique key for the component
@@ -187,7 +222,20 @@ def plotly_chart(
             color='month',
             chart_type='scatter'
         )
+
+    Example with expandable modal:
+        event = plotly_chart(
+            figure=fig,
+            expandable=True,
+            modal_title="Sales Dashboard",
+            style={"height": "300px"}
+        )
+        # Click the expand button to open chart in full-page dialog
     """
+    # Check if we should render an expanded dialog (from previous expand click)
+    # This MUST be called first, before any other plotly_chart processing
+    _maybe_render_expanded_dialog()
+
     # Determine figure dict
     if figure is not None:
         # Convert Plotly figure to dict if needed
@@ -201,7 +249,8 @@ def plotly_chart(
     else:
         raise ValueError("Either 'figure' or 'data' parameter is required")
 
-    return _component(
+    # Render the component
+    result = _component(
         component="plotly_chart",
         figure=figure_dict,
         config=config,
@@ -209,8 +258,27 @@ def plotly_chart(
         onSelectEnabled=on_select,
         onHoverEnabled=on_hover,
         onRelayoutEnabled=on_relayout,
+        expandable=expandable,
+        modalTitle=modal_title,
         style=style,
         className=class_name,
         key=key,
         default=None,
     )
+
+    # Handle expand event - store in session state and trigger rerun
+    if result and isinstance(result, dict) and result.get("type") == "expand":
+        event_ts = result.get("timestamp", 0)
+        last_processed = st.session_state.get(_PROCESSED_EXPAND_KEY, 0)
+
+        # Only process if this is a NEW expand click (different timestamp)
+        if event_ts > last_processed:
+            st.session_state[_PROCESSED_EXPAND_KEY] = event_ts
+            st.session_state[_EXPANDED_DIALOG_KEY] = {
+                "open": True,
+                "figure": result.get("figure", figure_dict),
+                "title": result.get("modalTitle", modal_title)
+            }
+            st.rerun()
+
+    return result

{streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.1.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: streamlit-react-components
-Version: 1.0.0
+Version: 1.0.1
 Summary: Reusable React-based Streamlit components with Tailwind CSS styling
 License: MIT
 Project-URL: Homepage, https://github.com/your-org/streamlit-react-components
@@ -498,6 +498,10 @@ plotly_chart(
     on_hover: bool = False,        # Enable hover events
     on_relayout: bool = False,     # Enable zoom/pan events
 
+    # Expandable dialog
+    expandable: bool = False,      # Show expand button
+    modal_title: str = "",         # Dialog header title
+
     # Styling
     style: dict = None,
     class_name: str = "",
@@ -603,6 +607,25 @@ Each point in the `points` array contains:
 }
 ```
 
+#### Expandable Dialog
+
+Charts can be expanded into a full-page dialog using Streamlit's native `st.dialog()`:
+
+```python
+event = plotly_chart(
+    figure=fig,
+    expandable=True,                    # Show expand button in corner
+    modal_title="Sales Dashboard",      # Title in dialog header
+    style={"height": "300px"}
+)
+```
+
+**Dialog Features:**
+- Click the expand icon (⛶) in the top-right corner to open
+- Dialog uses Streamlit's native full-width dialog overlay
+- Click outside the dialog or press Escape to close
+- Chart renders at full dialog width for better visibility
+
 ---
 
 ### 10. Form Select

{streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.1.dist-info}/RECORD

@@ -1,14 +1,14 @@
 streamlit_react_components/__init__.py,sha256=-m5OJx0vsfzD6k2m_2X8eMQXi9pgkreAuDZJoVWbdJ0,673
-streamlit_react_components/_frontend/index.css,sha256=bGjKlFP0M9oZjCZxs5LhgGVI9XaWBJw9CIuvuR8G48E,26096
+streamlit_react_components/_frontend/index.css,sha256=vW-yXHEFGLJUbWgkRewomPA8R3Um6h8kADSJqzEHxIc,26376
 streamlit_react_components/_frontend/index.html,sha256=CjBEtVYlgT_q06BE16EHFrUrJZ6z0MCprrTg7qgAWzw,381
-streamlit_react_components/_frontend/index.js,sha256=PCgvI7vuyr2PS42w6s2NySie-FlbjFV0loppwObKucU,5214838
+streamlit_react_components/_frontend/index.js,sha256=slhaVPHpVSgP6b7yYt43p5_hFEtNAEl2_DhrUnH6stM,5215495
 streamlit_react_components/common/__init__.py,sha256=xUKaw_X2B2xd6AqW8oLzHupGp-TX3Fij0FjhMNwd-vs,550
 streamlit_react_components/common/button_group.py,sha256=g38gpR62dQ8KLd3JyANvGonT6tf-tyooIjC6t3O4iH0,2225
 streamlit_react_components/common/chart_legend.py,sha256=So703OO-sI6SWrSVGKH0OTiI-smr4luqgBtXQ9GwIlI,1377
 streamlit_react_components/common/data_table.py,sha256=dEvRxCBejvoye7jsqGcdsh_Ox-VeRpWMHgaAi-qv5HM,2142
 streamlit_react_components/common/metric_row.py,sha256=abDfSrLvZO8MK2gglvE98L5U0Fx2NfNHGF5bBnfqR5I,1257
 streamlit_react_components/common/panel.py,sha256=O4URjnK8u9_byFzDO9RAFdpXjzNdxpXY1CX8gEEK1pY,1094
-streamlit_react_components/common/plotly_chart.py,sha256=tBBlUvg_Vs_bOTxUmuuqrosgEKq_BRHE1jakwzNNH6M,6874
+streamlit_react_components/common/plotly_chart.py,sha256=px1pITa8GSYl_TTg4KzX81nQy_F-9XwUV_91fR7d0po,9368
 streamlit_react_components/common/section_header.py,sha256=2sVLWHjHx2WdhbVVLBgs5shwUUbw6lbAKbsAwiwIWpg,2983
 streamlit_react_components/common/stat_card.py,sha256=PimCX6Dd18DyfJn6tk0YmrA1zKvAiqeKXdHAKXhxiRQ,1674
 streamlit_react_components/common/step_indicator.py,sha256=araovSL_c5h66PawZBf5IlQbVoxXwE9kD0H10ZopVoU,1370
@@ -16,7 +16,7 @@ streamlit_react_components/form/__init__.py,sha256=XP9oBEHSwLTNqu88sYm0F_n828yzP
 streamlit_react_components/form/checkbox_group.py,sha256=NLNJW1Ql60PnFj0FdH6Q0gUAGx2NOVNI9geIG-NG8G4,1779
 streamlit_react_components/form/form_select.py,sha256=KILKVUO-Elb0nqbTEImxyoGQQrnZ_jft30iJSbY5ksk,1946
 streamlit_react_components/form/form_slider.py,sha256=4w9h-d-9yAHg3ZqUHCZGzsfUG3lP5OTwVrDo5sZAnfQ,2032
-streamlit_react_components-1.0.0.dist-info/METADATA,sha256=crSpzSFC3RdQ18c9LF2XyKpe92HazuGX2DUTldDGAvU,20952
-streamlit_react_components-1.0.0.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-streamlit_react_components-1.0.0.dist-info/top_level.txt,sha256=3JFrl15-Uewx3BFMSzqrBufF9GmTS1LDKfShmg0R9VE,27
-streamlit_react_components-1.0.0.dist-info/RECORD,,
+streamlit_react_components-1.0.1.dist-info/METADATA,sha256=VYZrioH2thbXYa6VWW1A2DTDGqmsddFeYUJeQZXlRuU,21677
+streamlit_react_components-1.0.1.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+streamlit_react_components-1.0.1.dist-info/top_level.txt,sha256=3JFrl15-Uewx3BFMSzqrBufF9GmTS1LDKfShmg0R9VE,27
+streamlit_react_components-1.0.1.dist-info/RECORD,,