fixed tooltip and hnf4a

streamlit_hf/home.py

@@ -55,7 +55,7 @@ _APP_SUBTITLE = (
 )
 
 _EXPERIMENTAL_SYSTEM_MD = f"""
-Mouse embryonic fibroblasts (**MEFs**) were reprogrammed toward induced endoderm progenitors (**iEPs**) **in vitro** through *Foxa1* and *HNF4A* induction.
+Mouse embryonic fibroblasts (**MEFs**) were reprogrammed toward induced endoderm progenitors (**iEPs**) **in vitro** through *Foxa1* and *Hnf4a* induction.
 
 This process produces **mixed outcomes**: some cells successfully reach the **iEP fate**, whereas others diverge into **off-target** trajectories and stall in **dead-end states**.
 
@@ -193,7 +193,7 @@ html, body {{
 ui.inject_app_styles()
 ui.inject_home_landing_styles()
 
-# Bordered Streamlit blocks use overflow that clips iframe tooltips; allow paint past the card edge.
+# Home-only layout/CSS (injected once up-front so nothing sits between metrics row and nav cards).
 st.markdown(
     """
 <style>
@@ -203,82 +203,56 @@ section[data-testid="stMain"] div[data-testid="stVerticalBlockBorderWrapper"]:ha
 section[data-testid="stMain"] div[data-testid="stVerticalBlockBorderWrapper"]:has(iframe) > div {
   overflow: visible !important;
 }
-</style>
-""",
-    unsafe_allow_html=True,
-)
-
-st.markdown(
-    f"""<div class="ff-hero"><div class="ff-hero-inner"><div class="ff-hero-text">
-<div class="ff-hero-title-row">
-<span class="ff-hero-emoji" aria-hidden="true">{_HERO_EMOJI}</span>
-<h1>{html.escape(_APP_NAME)}</h1>
-</div>
-<p class="ff-hero-sub">{html.escape(_APP_SUBTITLE)}</p>
-</div></div></div>""",
-    unsafe_allow_html=True,
-)
-
-with st.container(border=True):
-    # Wider text column → fewer wrapped lines; tighter gap; center figure vs text when heights differ.
-    try:
-        fig_col, text_col = st.columns([0.33, 0.67], gap="medium", vertical_alignment="center")
-    except TypeError:
-        fig_col, text_col = st.columns([0.33, 0.67], gap="medium")
-    with fig_col:
-        if _EXPERIMENT_SVG.is_file():
-            _render_experiment_schematic(_EXPERIMENT_FIGURE_WIDTH_PX)
-        else:
-            st.caption("Experimental schematic (`static/experiment.svg`) is missing.")
-    with text_col:
-        st.markdown(_EXPERIMENTAL_SYSTEM_MD)
-
-bundle = io.load_latent_bundle()
-df_features = io.load_df_features()
-samples = io.load_samples_df()
-ready = _cache_ok()
-
-if not ready:
-    st.warning(
-        "Precomputed validation caches are incomplete or missing. "
-        "Publish `latent_umap.pkl` and `df_features.parquet` under `streamlit_hf/cache/`, then reload."
-    )
-
-# --- Metrics strip ---
-mcols = st.columns(4)
-if bundle is not None:
-    n_cells = len(bundle["umap_x"])
-    with mcols[0]:
-        st.metric("Validation cells", f"{n_cells:,}")
-    with mcols[1]:
-        st.metric("Validation ROC-AUC", f"{_VALIDATION_ROC_AUC:.2f}")
-else:
-    with mcols[0]:
-        st.metric("Validation cells", "n/a")
-    with mcols[1]:
-        st.metric("Validation ROC-AUC", "n/a")
-
-if df_features is not None:
-    nf = len(df_features)
-    n_mod = df_features["modality"].nunique() if "modality" in df_features.columns else 0
-    with mcols[2]:
-        st.metric("Ranked features", f"{nf:,}")
-    with mcols[3]:
-        st.metric("Modalities", str(n_mod) if n_mod else "n/a")
-else:
-    with mcols[2]:
-        st.metric("Ranked features", "n/a")
-    with mcols[3]:
-        st.metric("Modalities", "n/a")
-
-# --- Workspace cards (directly under metrics); hidden spans pair with CSS for per-card colours ---
-_NAV_SLOT = '<span id="ff-nav-slot-{}" class="ff-nav-slot-marker" aria-hidden="true"></span>'
-
-# Inject per-card colour rules here (rather than in lib.ui) so Streamlit hot-reload picks up
-# tweaks without needing to reimport the cached lib module.
-st.markdown(
-    """
-<style>
+/*
+ * Home metrics strip (four st.metric above nav cards): centre each metric in its column.
+ * Scope with :not(:has([id^="ff-nav-slot-"])) so the nav-card row (which also uses 4 columns) is excluded.
+ */
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) > div[data-testid="stVerticalBlock"] > div[data-testid="stElementContainer"] {
+    display: flex !important;
+    justify-content: center !important;
+    width: 100% !important;
+}
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) [data-testid="stMetric"] {
+    width: auto !important;
+    max-width: 100% !important;
+    align-items: center !important;
+    text-align: center !important;
+}
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) [data-testid="stMetricLabel"] {
+    display: flex !important;
+    justify-content: center !important;
+    width: 100% !important;
+    grid-template-columns: unset !important;
+}
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) [data-testid="stMetricValue"] {
+    text-align: center !important;
+    width: 100% !important;
+}
+/* Close vertical gap between metrics row and nav cards (Streamlit block margins) */
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) {
+    margin-bottom: 0 !important;
+}
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) > div[data-testid="stVerticalBlock"] {
+    margin-bottom: 0 !important;
+}
+section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) [data-testid="stMetric"] {
+    margin-bottom: 0 !important;
+}
+section[data-testid="stMain"] div[data-testid="stVerticalBlock"] > div[data-testid="stElementContainer"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+}
+section[data-testid="stMain"] div[data-testid="stVerticalBlock"] > div[data-testid="stElementContainer"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"])) + div[data-testid="stElementContainer"]:has([id^="ff-nav-slot-"]) {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+}
+section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(
+    > div[data-testid="stElementContainer"]:has([data-testid="stMetric"]):not(:has([id^="ff-nav-slot-"]))
+    + div[data-testid="stElementContainer"]:has([id^="ff-nav-slot-"])
+) {
+    gap: 0 !important;
+    row-gap: 0 !important;
+}
 /*
  * Home workspace nav cards (Streamlit 1.56+).
  * Marker row: take it out of normal flow so it cannot reserve vertical space (fixes top gap).
@@ -328,7 +302,6 @@ section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(> div[data-
     margin-bottom: 0 !important;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
-    /* Subtitle flush with icon / link row (starts under the icon, not under the title text) */
     padding-left: 0 !important;
     box-sizing: border-box !important;
 }
@@ -343,15 +316,12 @@ section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(> div[data-
 section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(> div[data-testid="stElementContainer"] span[id^="ff-nav-slot-"]) [data-testid="stCaptionContainer"] p {
     margin-bottom: 0 !important;
 }
-/* Row of four columns: drop default block margin below the nav cards */
 section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has(span#ff-nav-slot-1):has(span#ff-nav-slot-4) {
     margin-bottom: 0 !important;
 }
-/* Each column’s outer vertical block often keeps trailing margin */
 section[data-testid="stMain"] div[data-testid="stHorizontalBlock"]:has(span#ff-nav-slot-1):has(span#ff-nav-slot-4) > div[data-testid="stVerticalBlock"] {
     margin-bottom: 0 !important;
 }
-/* Fine dot lattice on a flat tinted base (no banded multi-stop gradients) */
 section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(> div[data-testid="stElementContainer"] span#ff-nav-slot-1) {
     background-color: #f1f3fa !important;
     background-image: radial-gradient(rgba(67, 56, 202, 0.07) 0.9px, transparent 1px) !important;
@@ -416,6 +386,73 @@ section[data-testid="stMain"] div[data-testid="stVerticalBlock"]:has(> div[data-
 """,
     unsafe_allow_html=True,
 )
+
+st.markdown(
+    f"""<div class="ff-hero"><div class="ff-hero-inner"><div class="ff-hero-text">
+<div class="ff-hero-title-row">
+<span class="ff-hero-emoji" aria-hidden="true">{_HERO_EMOJI}</span>
+<h1>{html.escape(_APP_NAME)}</h1>
+</div>
+<p class="ff-hero-sub">{html.escape(_APP_SUBTITLE)}</p>
+</div></div></div>""",
+    unsafe_allow_html=True,
+)
+
+with st.container(border=True):
+    # Wider text column → fewer wrapped lines; tighter gap; center figure vs text when heights differ.
+    try:
+        fig_col, text_col = st.columns([0.33, 0.67], gap="medium", vertical_alignment="center")
+    except TypeError:
+        fig_col, text_col = st.columns([0.33, 0.67], gap="medium")
+    with fig_col:
+        if _EXPERIMENT_SVG.is_file():
+            _render_experiment_schematic(_EXPERIMENT_FIGURE_WIDTH_PX)
+        else:
+            st.caption("Experimental schematic (`static/experiment.svg`) is missing.")
+    with text_col:
+        st.markdown(_EXPERIMENTAL_SYSTEM_MD)
+
+bundle = io.load_latent_bundle()
+df_features = io.load_df_features()
+samples = io.load_samples_df()
+ready = _cache_ok()
+
+if not ready:
+    st.warning(
+        "Precomputed validation caches are incomplete or missing. "
+        "Publish `latent_umap.pkl` and `df_features.parquet` under `streamlit_hf/cache/`, then reload."
+    )
+
+# --- Metrics strip ---
+mcols = st.columns(4)
+if bundle is not None:
+    n_cells = len(bundle["umap_x"])
+    with mcols[0]:
+        st.metric("Validation cells", f"{n_cells:,}")
+    with mcols[1]:
+        st.metric("Validation ROC-AUC", f"{_VALIDATION_ROC_AUC:.2f}")
+else:
+    with mcols[0]:
+        st.metric("Validation cells", "n/a")
+    with mcols[1]:
+        st.metric("Validation ROC-AUC", "n/a")
+
+if df_features is not None:
+    nf = len(df_features)
+    n_mod = df_features["modality"].nunique() if "modality" in df_features.columns else 0
+    with mcols[2]:
+        st.metric("Ranked features", f"{nf:,}")
+    with mcols[3]:
+        st.metric("Modalities", str(n_mod) if n_mod else "n/a")
+else:
+    with mcols[2]:
+        st.metric("Ranked features", "n/a")
+    with mcols[3]:
+        st.metric("Modalities", "n/a")
+
+# --- Workspace cards (directly under metrics); styles injected above with other home CSS ---
+_NAV_SLOT = '<span id="ff-nav-slot-{}" class="ff-nav-slot-marker" aria-hidden="true"></span>'
+
 c1, c2, c3, c4 = st.columns(4, gap="small")
 with c1:
     with st.container(border=True):