Admin UI: migrate off deprecated st.components.v1.html to st.iframe

streamlit.components.v1.html is deprecated in the pinned streamlit==1.58.0
in favor of the unified st.iframe API. Both the tooltip-tab-order fix
(branding.py) and the log auto-scroll fix (3_Logs.py) relied on it, so
migrate both call sites and fix the regressions the migration surfaced
live: a create-once MutationObserver that never got a second chance to
re-attach after a lost mount, a rotted data-testid selector on the log
container predating the migration, and a first-render layout timing race.

Author: Robert van 't Hof

Admin UI/app/branding.py

@@ -15,7 +15,6 @@
 from pathlib import Path
 
 import streamlit as st
-import streamlit.components.v1 as components
 
 _LOGO_PATH = str((Path(__file__).parent / "assets" / "siemens-logo-white.svg").resolve())
 
@@ -61,6 +60,7 @@
 # newly-rendered icons across reruns and page switches, so it only needs to
 # be injected once.
 _SKIP_TOOLTIP_TAB_STOPS_JS = """
+<style>body{margin:0;overflow:hidden}</style>
 <script>
   const doc = window.parent.document;
   // Natively-focusable tags need no explicit tabindex attribute (a plain
@@ -76,15 +76,21 @@
     });
   };
   detab();
-  if (!doc.__mendixTooltipObserver) {
-    doc.__mendixTooltipObserver = new MutationObserver(detab);
-    // attributes:true too - React re-applies its own tabIndex prop on
-    // rerender without necessarily removing/reinserting the node, which a
-    // childList-only observer would miss.
-    doc.__mendixTooltipObserver.observe(doc.body, {
-      childList: true, subtree: true, attributes: true, attributeFilter: ['tabindex'],
-    });
-  }
+  // Disconnect + recreate on every mount rather than "create once, ever":
+  // this script forces a fresh mount on every rerun (see the Python-side
+  // comment on the rerun counter), so a create-once observer that turns out
+  // to be watching a target that's gone stale - e.g. it was attached on a
+  // different page before the user navigated here - would otherwise never
+  // get a second chance to re-attach for the rest of the browser session.
+  // Recreating it every time this script runs makes that self-healing.
+  if (doc.__mendixTooltipObserver) doc.__mendixTooltipObserver.disconnect();
+  doc.__mendixTooltipObserver = new MutationObserver(detab);
+  // attributes:true too - React re-applies its own tabIndex prop on
+  // rerender without necessarily removing/reinserting the node, which a
+  // childList-only observer would miss.
+  doc.__mendixTooltipObserver.observe(doc.body, {
+    childList: true, subtree: true, attributes: true, attributeFilter: ['tabindex'],
+  });
 </script>
 """
 
@@ -94,16 +100,16 @@ def apply_branding() -> None:
     after st.set_page_config. Idempotent within a rerun."""
     st.logo(_LOGO_PATH, size="large")
     st.markdown(_CSS, unsafe_allow_html=True)
-    # components.html reuses the same iframe DOM node across reruns when its
-    # content is unchanged, so an unqualified call only mounts (and only runs
-    # the script inside) once per browser session. If that one mount is lost -
+    # st.iframe reuses the same iframe DOM node across reruns when its content
+    # is unchanged, so an unqualified call only mounts (and only runs the
+    # script inside) once per browser session. If that one mount is lost -
     # a dropped WebSocket during a cold container start or a redeploy landing
     # mid-session - the tooltip-tab-order fix below never applies for the rest
     # of the session, with nothing visibly wrong to notice. A per-rerun counter
     # in the HTML forces a fresh mount (and therefore a fresh attempt) on every
     # single rerun, so a lost mount just gets retried on the next interaction.
     st.session_state["_tooltip_fix_rerun"] = st.session_state.get("_tooltip_fix_rerun", 0) + 1
-    components.html(
+    st.iframe(
         _SKIP_TOOLTIP_TAB_STOPS_JS + f"<!-- rerun {st.session_state['_tooltip_fix_rerun']} -->",
-        height=0,
+        height=1,
     )

Admin UI/app/pages/3_Logs.py

@@ -7,7 +7,6 @@
 sys.path.append(str(Path(__file__).resolve().parent.parent))
 
 import streamlit as st
-import streamlit.components.v1 as components
 
 from auth import client, is_privileged_operator
 from controller_client import ControllerError
@@ -102,7 +101,7 @@ def _scroll_script(is_first_render: bool, logs: str) -> str:
     user was already pinned to the bottom — chat-client tail behavior.
     """
     first_js = "true" if is_first_render else "false"
-    # components.html renders through a React.memo'd <iframe srcDoc=...>: if this
+    # st.iframe renders through a React.memo'd <iframe srcDoc=...>: if this
     # function returns byte-identical HTML on every tick (it does, once
     # is_first_render settles to False), React never touches the DOM and the
     # <script> below never runs again, so auto-refresh ticks stop being noticed.
@@ -111,10 +110,16 @@ def _scroll_script(is_first_render: bool, logs: str) -> str:
     nonce = hash(logs) & 0xFFFFFFFF
     return f"""
     <!-- logs:{nonce} -->
+    <style>body{{margin:0;overflow:hidden}}</style>
     <script>
       const doc = window.parent.document;
       const snap = () => {{
-        const wraps = doc.querySelectorAll('[data-testid="stVerticalBlockBorderWrapper"]');
+        // "stVerticalBlockBorderWrapper" was this app's original testid for a
+        // bordered container; a later Streamlit version renamed it to the more
+        // generic "stVerticalBlock" (used for every vertical block, not just
+        // bordered ones - the loop below still needs to pick out the one that's
+        // actually overflowing, since most matches on a page won't be).
+        const wraps = doc.querySelectorAll('[data-testid="stVerticalBlock"]');
         if (!wraps.length) return;
         // The fixed-height container scrolls on the wrapper or an inner element;
         // find the last actually-scrollable node so scrollTop lands.
@@ -131,6 +136,17 @@ def _scroll_script(is_first_render: bool, logs: str) -> str:
       }};
       // Defer past layout + syntax highlighting so scrollHeight is final.
       requestAnimationFrame(() => requestAnimationFrame(snap));
+      // The first render competes with the rest of the page's own initial mount
+      // (branding script, sidebar, other widgets) for layout time, so a large log
+      // block's syntax highlighting may not have finished settling after just two
+      // animation frames - unlike a later, isolated auto-refresh tick, which has
+      // nothing else competing with it. Re-snap over a short window so a
+      // late-settling layout still gets caught instead of leaving the view stuck
+      // partway (snap() re-measures scrollHeight fresh each call, so repeating it
+      // is harmless once things have already settled).
+      if ({first_js}) {{
+        [100, 300, 600].forEach((ms) => setTimeout(snap, ms));
+      }}
     </script>
     """
 
@@ -178,7 +194,7 @@ def _log_view() -> None:
 
     is_first_render = _SCROLL_INIT_KEY not in st.session_state
     st.session_state[_SCROLL_INIT_KEY] = True
-    components.html(_scroll_script(is_first_render, logs), height=0)
+    st.iframe(_scroll_script(is_first_render, logs), height=1)
 
 
 _log_view()

Admin UI/tests/test_branding.py

@@ -7,8 +7,8 @@
 
 class TestApplyBranding:
     def test_tooltip_script_html_differs_every_call(self, monkeypatch):
-        """components.html reuses its iframe DOM node across reruns when the
-        HTML argument is unchanged, which silently stops the tooltip-tab-order
+        """st.iframe reuses its iframe DOM node across reruns when the HTML
+        argument is unchanged, which silently stops the tooltip-tab-order
         script from ever running again if a single mount is lost (dropped
         WebSocket during a cold start, a redeploy mid-session). Each call must
         pass different HTML so the frontend always treats it as a fresh
@@ -17,7 +17,7 @@ def test_tooltip_script_html_differs_every_call(self, monkeypatch):
         monkeypatch.setattr(branding.st, "logo", lambda *a, **k: None)
         monkeypatch.setattr(branding.st, "markdown", lambda *a, **k: None)
         seen = []
-        monkeypatch.setattr(branding.components, "html", lambda html, **k: seen.append(html))
+        monkeypatch.setattr(branding.st, "iframe", lambda html, **k: seen.append(html))
 
         branding.apply_branding()
         branding.apply_branding()
@@ -36,7 +36,7 @@ def test_rerun_counter_persists_across_script_reruns(self, monkeypatch):
         st.session_state.clear()
         monkeypatch.setattr(branding.st, "logo", lambda *a, **k: None)
         monkeypatch.setattr(branding.st, "markdown", lambda *a, **k: None)
-        monkeypatch.setattr(branding.components, "html", lambda html, **k: None)
+        monkeypatch.setattr(branding.st, "iframe", lambda html, **k: None)
 
         branding.apply_branding()
         first = st.session_state["_tooltip_fix_rerun"]