feat: panel fig fullscreen

panel_app/trafic_analysis_panel.py

@@ -16,7 +16,12 @@ if ROOT_DIR not in sys.path:
 from panel_app.convert_to_excel_panel import write_dfs_to_excel
 from utils.utils_vars import get_physical_db
 
-pn.extension("plotly", "tabulator")
+pn.extension("plotly", "tabulator", raw_css=[
+    ":fullscreen { background-color: white; overflow: auto; }",
+    "::backdrop { background-color: white; }",
+    ".plot-fullscreen-wrapper:fullscreen { padding: 20px; display: flex; flex-direction: column; }",
+    ".plot-fullscreen-wrapper:fullscreen > * { height: 100% !important; width: 100% !important; }",
+])
 
 
 def read_fileinput_to_df(file_input: pn.widgets.FileInput) -> pd.DataFrame | None:
@@ -966,15 +971,27 @@ persistent_table = pn.widgets.Tabulator(
 )
 
 site_select = pn.widgets.Select(name="Select a site for detailed view", options={})
-site_traffic_plot = pn.pane.Plotly(
+site_traffic_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
+    config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-site-traffic"],
+)
+site_traffic_plot = pn.Column(
+    site_traffic_plot_pane,
     height=400,
     sizing_mode="stretch_width",
+    css_classes=["plot-fullscreen-wrapper", "site-traffic-wrapper"],
+)
+site_avail_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
     config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-site-avail"],
 )
-site_avail_plot = pn.pane.Plotly(
+site_avail_plot = pn.Column(
+    site_avail_plot_pane,
     height=400,
     sizing_mode="stretch_width",
-    config=PLOTLY_CONFIG,
+    css_classes=["plot-fullscreen-wrapper", "site-avail-wrapper"],
 )
 site_degraded_table = pn.widgets.Tabulator(
     height=200,
@@ -983,15 +1000,27 @@ site_degraded_table = pn.widgets.Tabulator(
 )
 
 city_select = pn.widgets.Select(name="Select a City for aggregated view", options=[])
-city_traffic_plot = pn.pane.Plotly(
+city_traffic_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
+    config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-city-traffic"],
+)
+city_traffic_plot = pn.Column(
+    city_traffic_plot_pane,
     height=400,
     sizing_mode="stretch_width",
+    css_classes=["plot-fullscreen-wrapper", "city-traffic-wrapper"],
+)
+city_avail_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
     config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-city-avail"],
 )
-city_avail_plot = pn.pane.Plotly(
+city_avail_plot = pn.Column(
+    city_avail_plot_pane,
     height=400,
     sizing_mode="stretch_width",
-    config=PLOTLY_CONFIG,
+    css_classes=["plot-fullscreen-wrapper", "city-avail-wrapper"],
 )
 city_degraded_table = pn.widgets.Tabulator(
     height=200,
@@ -999,10 +1028,16 @@ city_degraded_table = pn.widgets.Tabulator(
     layout="fit_data_table",
 )
 
-daily_avail_plot = pn.pane.Plotly(
+daily_avail_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
+    config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-daily-avail"],
+)
+daily_avail_plot = pn.Column(
+    daily_avail_plot_pane,
     height=400,
     sizing_mode="stretch_width",
-    config=PLOTLY_CONFIG,
+    css_classes=["plot-fullscreen-wrapper", "daily-avail-wrapper"],
 )
 daily_degraded_table = pn.widgets.Tabulator(
     height=200,
@@ -1020,33 +1055,52 @@ top_voice_sites_table = pn.widgets.Tabulator(
     sizing_mode="stretch_width",
     layout="fit_data_table",
 )
-top_data_bar_plot = pn.pane.Plotly(
+top_data_bar_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
+    config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-top-data"],
+)
+top_data_bar_plot = pn.Column(
+    top_data_bar_plot_pane,
     height=400,
     sizing_mode="stretch_width",
+    css_classes=["plot-fullscreen-wrapper", "top-data-bar-wrapper"],
+)
+top_voice_bar_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
     config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-top-voice"],
 )
-top_voice_bar_plot = pn.pane.Plotly(
+top_voice_bar_plot = pn.Column(
+    top_voice_bar_plot_pane,
     height=400,
     sizing_mode="stretch_width",
+    css_classes=["plot-fullscreen-wrapper", "top-voice-bar-wrapper"],
+)
+data_map_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
     config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-data-map"],
 )
-data_map_plot = pn.pane.Plotly(
+data_map_plot = pn.Column(
+    data_map_plot_pane,
     height=500,
     sizing_mode="stretch_width",
+    css_classes=["plot-fullscreen-wrapper", "data-map-wrapper"],
+)
+voice_map_plot_pane = pn.pane.Plotly(
+    sizing_mode="stretch_both",
     config=PLOTLY_CONFIG,
+    css_classes=["fullscreen-target-voice-map"],
 )
-voice_map_plot = pn.pane.Plotly(
+voice_map_plot = pn.Column(
+    voice_map_plot_pane,
     height=500,
     sizing_mode="stretch_width",
-    config=PLOTLY_CONFIG,
+    css_classes=["plot-fullscreen-wrapper", "voice-map-wrapper"],
 )
 
-# Shared pane used inside the fullscreen modal
-fullscreen_plot = pn.pane.Plotly(
-    sizing_mode="stretch_both",
-    min_height=700,
-    config=PLOTLY_CONFIG,
-)
+# Fullscreen helper logic has been replaced by client-side JS.
 
 # Fullscreen buttons for each Plotly plot
 site_traffic_fullscreen_btn = pn.widgets.Button(
@@ -1350,8 +1404,8 @@ def _update_site_controls() -> None:
     if current_analysis_df is None or current_analysis_df.empty:
         site_select.options = {}
         site_select.value = None
-        site_traffic_plot.object = None
-        site_avail_plot.object = None
+        site_traffic_plot_pane.object = None
+        site_avail_plot_pane.object = None
         site_degraded_table.value = pd.DataFrame()
         return
 
@@ -1381,15 +1435,15 @@ def _update_site_controls() -> None:
 def _update_site_view(event=None) -> None:  # noqa: D401, ARG001
     """Update site drill-down plots and table from current_analysis_df and site_select."""
     if current_analysis_df is None or current_analysis_df.empty:
-        site_traffic_plot.object = None
-        site_avail_plot.object = None
+        site_traffic_plot_pane.object = None
+        site_avail_plot_pane.object = None
         site_degraded_table.value = pd.DataFrame()
         return
 
     selected_code = site_select.value
     if selected_code is None:
-        site_traffic_plot.object = None
-        site_avail_plot.object = None
+        site_traffic_plot_pane.object = None
+        site_avail_plot_pane.object = None
         site_degraded_table.value = pd.DataFrame()
         return
 
@@ -1397,8 +1451,8 @@ def _update_site_view(event=None) -> None:  # noqa: D401, ARG001
         current_analysis_df["code"] == int(selected_code)
     ].copy()
     if site_detail_df.empty:
-        site_traffic_plot.object = None
-        site_avail_plot.object = None
+        site_traffic_plot_pane.object = None
+        site_avail_plot_pane.object = None
         site_degraded_table.value = pd.DataFrame()
         return
 
@@ -1429,9 +1483,9 @@ def _update_site_view(event=None) -> None:  # noqa: D401, ARG001
             plot_bgcolor="white",
             paper_bgcolor="white",
         )
-        site_traffic_plot.object = fig_traffic
+        site_traffic_plot_pane.object = fig_traffic
     else:
-        site_traffic_plot.object = None
+        site_traffic_plot_pane.object = None
 
     # Availability over time per RAT
     avail_cols: list[str] = []
@@ -1468,7 +1522,7 @@ def _update_site_view(event=None) -> None:  # noqa: D401, ARG001
             plot_bgcolor="white",
             paper_bgcolor="white",
         )
-        site_avail_plot.object = fig_avail
+        site_avail_plot_pane.object = fig_avail
 
         # Days with availability below SLA per RAT
         site_detail_df["date_only"] = site_detail_df["date"].dt.date
@@ -1498,7 +1552,7 @@ def _update_site_view(event=None) -> None:  # noqa: D401, ARG001
         else:
             site_degraded_table.value = pd.DataFrame()
     else:
-        site_avail_plot.object = None
+        site_avail_plot_pane.object = None
         site_degraded_table.value = pd.DataFrame()
 
 
@@ -1507,8 +1561,8 @@ def _update_city_controls() -> None:
     if current_analysis_df is None or current_analysis_df.empty:
         city_select.options = []
         city_select.value = None
-        city_traffic_plot.object = None
-        city_avail_plot.object = None
+        city_traffic_plot_pane.object = None
+        city_avail_plot_pane.object = None
         city_degraded_table.value = pd.DataFrame()
         return
 
@@ -1518,8 +1572,8 @@ def _update_city_controls() -> None:
     ):
         city_select.options = []
         city_select.value = None
-        city_traffic_plot.object = None
-        city_avail_plot.object = pd.DataFrame()
+        city_traffic_plot_pane.object = None
+        city_avail_plot_pane.object = pd.DataFrame()
         city_degraded_table.value = pd.DataFrame()
         return
 
@@ -1537,15 +1591,15 @@ def _update_city_controls() -> None:
 def _update_city_view(event=None) -> None:  # noqa: D401, ARG001
     """Update city drill-down plots and degraded days table based on city_select."""
     if current_analysis_df is None or current_analysis_df.empty:
-        city_traffic_plot.object = None
-        city_avail_plot.object = None
+        city_traffic_plot_pane.object = None
+        city_avail_plot_pane.object = None
         city_degraded_table.value = pd.DataFrame()
         return
 
     selected_city = city_select.value
     if not selected_city:
-        city_traffic_plot.object = None
-        city_avail_plot.object = None
+        city_traffic_plot_pane.object = None
+        city_avail_plot_pane.object = None
         city_degraded_table.value = pd.DataFrame()
         return
 
@@ -1553,8 +1607,8 @@ def _update_city_view(event=None) -> None:  # noqa: D401, ARG001
         current_analysis_df["City"] == selected_city
     ].copy()
     if city_detail_df.empty:
-        city_traffic_plot.object = None
-        city_avail_plot.object = None
+        city_traffic_plot_pane.object = None
+        city_avail_plot_pane.object = None
         city_degraded_table.value = pd.DataFrame()
         return
 
@@ -1588,9 +1642,9 @@ def _update_city_view(event=None) -> None:  # noqa: D401, ARG001
             plot_bgcolor="white",
             paper_bgcolor="white",
         )
-        city_traffic_plot.object = fig_traffic_city
+        city_traffic_plot_pane.object = fig_traffic_city
     else:
-        city_traffic_plot.object = None
+        city_traffic_plot_pane.object = None
 
     # Availability aggregated at city level
     avail_cols_city: list[str] = []
@@ -1627,7 +1681,7 @@ def _update_city_view(event=None) -> None:  # noqa: D401, ARG001
             plot_bgcolor="white",
             paper_bgcolor="white",
         )
-        city_avail_plot.object = fig_avail_city
+        city_avail_plot_pane.object = fig_avail_city
 
         city_detail_df["date_only"] = city_detail_df["date"].dt.date
         degraded_rows_city: list[dict] = []
@@ -1656,14 +1710,14 @@ def _update_city_view(event=None) -> None:  # noqa: D401, ARG001
         else:
             city_degraded_table.value = pd.DataFrame()
     else:
-        city_avail_plot.object = None
+        city_avail_plot_pane.object = None
         city_degraded_table.value = pd.DataFrame()
 
 
 def _update_daily_availability_view() -> None:
     """Daily average availability per RAT over the full analysis_df."""
     if current_analysis_df is None or current_analysis_df.empty:
-        daily_avail_plot.object = None
+        daily_avail_plot_pane.object = None
         daily_degraded_table.value = pd.DataFrame()
         return
 
@@ -1672,7 +1726,7 @@ def _update_daily_availability_view() -> None:
         col in temp_df.columns
         for col in ["2g_tch_avail", "3g_cell_avail", "lte_cell_avail"]
     ):
-        daily_avail_plot.object = None
+        daily_avail_plot_pane.object = None
         daily_degraded_table.value = pd.DataFrame()
         return
 
@@ -1693,7 +1747,7 @@ def _update_daily_availability_view() -> None:
     )
 
     if daily_avail.empty:
-        daily_avail_plot.object = None
+        daily_avail_plot_pane.object = None
         daily_degraded_table.value = pd.DataFrame()
         return
 
@@ -1709,7 +1763,7 @@ def _update_daily_availability_view() -> None:
 
     value_cols = [c for c in daily_avail.columns if c != "date_only"]
     if not value_cols:
-        daily_avail_plot.object = None
+        daily_avail_plot_pane.object = None
         daily_degraded_table.value = pd.DataFrame()
         return
 
@@ -1733,7 +1787,7 @@ def _update_daily_availability_view() -> None:
         plot_bgcolor="white",
         paper_bgcolor="white",
     )
-    daily_avail_plot.object = fig
+    daily_avail_plot_pane.object = fig
 
     degraded_rows: list[dict] = []
     for rat_name, sla_value in [
@@ -1766,10 +1820,10 @@ def _update_top_sites_and_maps() -> None:
     if current_analysis_last_period_df is None or current_analysis_last_period_df.empty:
         top_data_sites_table.value = pd.DataFrame()
         top_voice_sites_table.value = pd.DataFrame()
-        top_data_bar_plot.object = None
-        top_voice_bar_plot.object = None
-        data_map_plot.object = None
-        voice_map_plot.object = None
+        top_data_bar_plot_pane.object = None
+        top_voice_bar_plot_pane.object = None
+        data_map_plot_pane.object = None
+        voice_map_plot_pane.object = None
         return
 
     df = current_analysis_last_period_df
@@ -1800,7 +1854,7 @@ def _update_top_sites_and_maps() -> None:
         plot_bgcolor="white",
         paper_bgcolor="white",
     )
-    top_data_bar_plot.object = fig_data
+    top_data_bar_plot_pane.object = fig_data
 
     # Top sites by voice traffic
     top_sites_voice = (
@@ -1829,7 +1883,7 @@ def _update_top_sites_and_maps() -> None:
         plot_bgcolor="white",
         paper_bgcolor="white",
     )
-    top_voice_bar_plot.object = fig_voice
+    top_voice_bar_plot_pane.object = fig_voice
 
     # Maps
     if {"Latitude", "Longitude"}.issubset(df.columns):
@@ -1885,9 +1939,9 @@ def _update_top_sites_and_maps() -> None:
                 coloraxis=dict(cmin=traffic_data_min, cmax=traffic_data_max),
                 font=dict(size=10, color="black"),
             )
-            data_map_plot.object = fig_map_data
+            data_map_plot_pane.object = fig_map_data
         else:
-            data_map_plot.object = None
+            data_map_plot_pane.object = None
 
         # Voice traffic map
         df_voice = (
@@ -1938,12 +1992,12 @@ def _update_top_sites_and_maps() -> None:
                 coloraxis=dict(cmin=traffic_voice_min, cmax=traffic_voice_max),
                 font=dict(size=10, color="black"),
             )
-            voice_map_plot.object = fig_map_voice
+            voice_map_plot_pane.object = fig_map_voice
         else:
-            voice_map_plot.object = None
+            voice_map_plot_pane.object = None
     else:
-        data_map_plot.object = None
-        voice_map_plot.object = None
+        data_map_plot_pane.object = None
+        voice_map_plot_pane.object = None
 
 
 def _update_persistent_table_view(event=None) -> None:  # noqa: D401, ARG001
@@ -2088,79 +2142,44 @@ def _download_top_voice_sites() -> io.BytesIO:
     return _df_to_csv_bytes(value if isinstance(value, pd.DataFrame) else None)
 
 
-def _open_fullscreen_from_pane(plot_pane: pn.pane.Plotly, title: str) -> None:
-    """Open the given plot in the template modal as fullscreen view."""
-    if plot_pane.object is None:
-        return
-
-    fullscreen_plot.object = plot_pane.object
-    content = pn.Column(
-        pn.pane.Markdown(f"### {title}"),
-        fullscreen_plot,
-        sizing_mode="stretch_both",
-        styles={"width": "95vw", "height": "90vh"},
-    )
-
-    if "template" not in globals():
-        return
-
-    # Always populate modal content first
-    if hasattr(template, "modal"):
-        try:
-            template.modal[:] = [content]
-        except Exception:  # noqa: BLE001
-            try:
-                template.modal.clear()
-                template.modal.append(content)
-            except Exception:  # noqa: BLE001
-                pass
-
-    # Preferred API on templates
-    if hasattr(template, "open_modal"):
-        template.open_modal()
-        return
-
-    # Fallbacks across versions
-    if hasattr(template, "modal") and hasattr(template.modal, "open"):
-        template.modal.open = True
-    if hasattr(template, "modal") and hasattr(template.modal, "visible"):
-        template.modal.visible = True
-
-
-def _on_site_traffic_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(site_traffic_plot, "Site traffic over time")
-
-
-def _on_site_avail_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(site_avail_plot, "Site availability over time")
-
-
-def _on_city_traffic_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(city_traffic_plot, "City traffic over time")
-
-
-def _on_city_avail_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(city_avail_plot, "City availability over time")
-
-
-def _on_daily_avail_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(daily_avail_plot, "Daily average availability per RAT")
-
-
-def _on_top_data_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(top_data_bar_plot, "Top sites by data traffic")
-
-
-def _on_top_voice_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(top_voice_bar_plot, "Top sites by voice traffic")
+# Client-side Fullscreen JS logic
+# We target the specific CSS class assigned to each plot pane.
+# Client-side Fullscreen JS logic with Shadow DOM support
+_JS_FULLSCREEN = """
+function findDeep(root, cls) {
+    if (!root) return null;
+    if (root.classList && root.classList.contains(cls)) return root;
 
+    if (root.shadowRoot) {
+        var found = findDeep(root.shadowRoot, cls);
+        if (found) return found;
+    }
 
-def _on_data_map_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(data_map_plot, "Data traffic map")
+    var children = root.children;
+    if (children) {
+        for (var i = 0; i < children.length; i++) {
+            var found = findDeep(children[i], cls);
+            if (found) return found;
+        }
+    }
+    return null;
+}
 
+var el = findDeep(document.body, target_class);
 
-def _on_voice_map_fullscreen(event=None) -> None:  # noqa: ARG001
-    _open_fullscreen_from_pane(voice_map_plot, "Voice traffic map")
+if (el) {
+    if (el.requestFullscreen) {
+        el.requestFullscreen();
+    } else if (el.webkitRequestFullscreen) {
+        el.webkitRequestFullscreen();
+    } else if (el.msRequestFullscreen) {
+        el.msRequestFullscreen();
+    }
+} else {
+    // Debug info
+    alert("Impossible de passer en plein écran : élément '" + target_class + "' introuvable même après recherche approfondie (Shadow DOM).");
+}
+"""
 
 
 # Reactive bindings for drill-down controls & export
@@ -2176,15 +2195,44 @@ persistent_download.callback = _download_persistent_table
 top_data_download.callback = _download_top_data_sites
 top_voice_download.callback = _download_top_voice_sites
 
-site_traffic_fullscreen_btn.on_click(_on_site_traffic_fullscreen)
-site_avail_fullscreen_btn.on_click(_on_site_avail_fullscreen)
-city_traffic_fullscreen_btn.on_click(_on_city_traffic_fullscreen)
-city_avail_fullscreen_btn.on_click(_on_city_avail_fullscreen)
-daily_avail_fullscreen_btn.on_click(_on_daily_avail_fullscreen)
-top_data_fullscreen_btn.on_click(_on_top_data_fullscreen)
-top_voice_fullscreen_btn.on_click(_on_top_voice_fullscreen)
-data_map_fullscreen_btn.on_click(_on_data_map_fullscreen)
-voice_map_fullscreen_btn.on_click(_on_voice_map_fullscreen)
+site_traffic_fullscreen_btn.js_on_click(
+    args={"target_class": "site-traffic-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+site_avail_fullscreen_btn.js_on_click(
+    args={"target_class": "site-avail-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+city_traffic_fullscreen_btn.js_on_click(
+    args={"target_class": "city-traffic-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+city_avail_fullscreen_btn.js_on_click(
+    args={"target_class": "city-avail-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+daily_avail_fullscreen_btn.js_on_click(
+    args={"target_class": "daily-avail-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+top_data_fullscreen_btn.js_on_click(
+    args={"target_class": "top-data-bar-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+top_voice_fullscreen_btn.js_on_click(
+    args={
+        "target_class": "top-voice-bar-wrapper",
+    },
+    code=_JS_FULLSCREEN,
+)
+data_map_fullscreen_btn.js_on_click(
+    args={"target_class": "data-map-wrapper"},
+    code=_JS_FULLSCREEN,
+)
+voice_map_fullscreen_btn.js_on_click(
+    args={"target_class": "voice-map-wrapper"},
+    code=_JS_FULLSCREEN,
+)
 
 
 # --------------------------------------------------------------------------------------
@@ -2197,13 +2245,7 @@ template = pn.template.MaterialTemplate(
 )
 
 # Ensure the template modal is large enough for fullscreen charts
-template.modal.sizing_mode = "stretch_both"
-template.modal.styles = {
-    "width": "95vw",
-    "height": "90vh",
-    "maxWidth": "95vw",
-    "maxHeight": "90vh",
-}
+# Modal CSS override removed as we switched to native fullscreen.
 
 sidebar_content = pn.Column(
     """This Panel app is a migration of the existing Streamlit-based global traffic analysis.