Spaces:

Angione-Lab
/

FateFormerExplorer

Running

App Files Files Community

kaveh commited on Apr 20

Commit

3dd7d71

1 Parent(s): 334ddc0

umap grid removed. tootip font size increase. text in home page aligned.

Browse files

Files changed (3) hide show

streamlit_hf/home.py +100 -4
streamlit_hf/lib/plots.py +2 -2
streamlit_hf/pages/1_Single_Cell_Explorer.py +1 -3

streamlit_hf/home.py CHANGED Viewed

@@ -55,7 +55,11 @@ _APP_SUBTITLE = (
 )
 _EXPERIMENTAL_SYSTEM_MD = f"""
-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**. Using [**CellTag-Multi**]({_CELLTAG_MULTI_ARTICLE_URL}) clonal barcoding, **early cells** could be linked to their **later fate**, which made it possible to ask a central biological question: which programs in **early-state cells**, coordinated **across transcriptional, chromatin, and metabolic layers**, drive successful reprogramming, which ones push cells toward off-target states, and which of these mechanisms could be targeted to improve reprogramming efficiency?
 """
 _BIOLOGY_CONTEXT_MARKDOWN = f"""
@@ -83,8 +87,14 @@ def _render_experiment_schematic(width_px: int) -> None:
         raw = raw.split("?>", 1)[1].lstrip()
     html_doc = f"""<!DOCTYPE html>
 <html><head><meta charset="utf-8"/><style>
-html, body {{ margin: 0; padding: 0; overflow: hidden; background: transparent; }}
-.ff-experiment-svg-wrap {{ width: {width_px}px; max-width: 100%; }}
 .ff-experiment-svg-wrap svg {{ width: 100%; height: auto; display: block; }}
 .ff-experiment-svg-wrap svg g[id] {{
   cursor: help;
@@ -105,10 +115,77 @@ html, body {{ margin: 0; padding: 0; overflow: hidden; background: transparent;
 .ff-experiment-svg-wrap svg text:hover {{
   filter: brightness(1.08);
 }}
 </style></head><body>
 <div class="ff-experiment-svg-wrap">
 {raw}
 </div>
 </body></html>"""
     st.iframe(html_doc, width=width_px, height="content")
@@ -116,6 +193,21 @@ html, body {{ margin: 0; padding: 0; overflow: hidden; background: transparent;
 ui.inject_app_styles()
 ui.inject_home_landing_styles()
 st.markdown(
     f"""<div class="ff-hero"><div class="ff-hero-inner"><div class="ff-hero-text">
 <div class="ff-hero-title-row">
@@ -128,7 +220,11 @@ st.markdown(
 )
 with st.container(border=True):
-    fig_col, text_col = st.columns([0.42, 0.58], gap="large")
     with fig_col:
         if _EXPERIMENT_SVG.is_file():
             _render_experiment_schematic(_EXPERIMENT_FIGURE_WIDTH_PX)

 )
 _EXPERIMENTAL_SYSTEM_MD = f"""
+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**.
+Using [**CellTag-Multi**]({_CELLTAG_MULTI_ARTICLE_URL}) clonal barcoding, **early cells** could be linked to their **later fate**, which made it possible to ask a central biological question: which programs in **early-state cells**, coordinated **across transcriptional, chromatin, and metabolic layers**, drive successful reprogramming, which ones push cells toward off-target states, and which of these mechanisms could be targeted to improve reprogramming efficiency?
 """
 _BIOLOGY_CONTEXT_MARKDOWN = f"""
         raw = raw.split("?>", 1)[1].lstrip()
     html_doc = f"""<!DOCTYPE html>
 <html><head><meta charset="utf-8"/><style>
+html, body {{
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  overflow: visible;
+  box-sizing: border-box;
+}}
+.ff-experiment-svg-wrap {{ width: {width_px}px; max-width: 100%; overflow: visible; }}
 .ff-experiment-svg-wrap svg {{ width: 100%; height: auto; display: block; }}
 .ff-experiment-svg-wrap svg g[id] {{
   cursor: help;
 .ff-experiment-svg-wrap svg text:hover {{
   filter: brightness(1.08);
 }}
+#ff-svgtip {{
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2147483647;
+  display: none;
+  max-width: min(22rem, calc(100vw - 20px));
+  padding: 10px 14px;
+  font-size: 15px;
+  line-height: 1.5;
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+  color: #f1f5f9;
+  background: #0f172a;
+  border-radius: 8px;
+  box-shadow: 0 4px 18px rgba(0,0,0,.25);
+  pointer-events: none;
+}}
 </style></head><body>
 <div class="ff-experiment-svg-wrap">
 {raw}
 </div>
+<script>
+(function () {{
+  const tip = document.createElement("div");
+  tip.id = "ff-svgtip";
+  document.body.appendChild(tip);
+  const OFFSET = 14;
+  const PAD = 10;
+  function placeTip(e) {{
+    if (tip.style.display !== "block") return;
+    tip.style.visibility = "hidden";
+    tip.style.left = "0";
+    tip.style.top = "0";
+    const w = tip.offsetWidth;
+    const h = tip.offsetHeight;
+    tip.style.visibility = "visible";
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const O = OFFSET;
+    const P = PAD;
+    let x = e.clientX + O;
+    let y = e.clientY + O;
+    if (y + h + P > vh) y = e.clientY - h - O;
+    if (x + w + P > vw) x = e.clientX - w - O;
+    if (x + w + P > vw) x = Math.max(P, vw - w - P);
+    if (y + h + P > vh) y = Math.max(P, vh - h - P);
+    if (x < P) x = P;
+    if (y < P) y = P;
+    tip.style.left = x + "px";
+    tip.style.top = y + "px";
+  }}
+  function bind(el) {{
+    if (el.closest && el.closest("#microscope")) return;
+    const t = el.querySelector(":scope > title");
+    if (!t || !t.textContent.trim()) return;
+    const txt = t.textContent.trim();
+    t.remove();
+    el.addEventListener("mouseenter", function (e) {{
+      tip.textContent = txt;
+      tip.style.display = "block";
+      requestAnimationFrame(function () {{ placeTip(e); }});
+    }});
+    el.addEventListener("mousemove", function (e) {{ placeTip(e); }});
+    el.addEventListener("mouseleave", function () {{
+      tip.style.display = "none";
+    }});
+  }}
+  document.querySelectorAll(".ff-experiment-svg-wrap svg g[id]").forEach(bind);
+  document.querySelectorAll(".ff-experiment-svg-wrap svg text").forEach(bind);
+}})();
+</script>
 </body></html>"""
     st.iframe(html_doc, width=width_px, height="content")
 ui.inject_app_styles()
 ui.inject_home_landing_styles()
+# Bordered Streamlit blocks use overflow that clips iframe tooltips; allow paint past the card edge.
+st.markdown(
+    """
+<style>
+section[data-testid="stMain"] div[data-testid="stVerticalBlockBorderWrapper"]:has(iframe) {
+  overflow: visible !important;
+}
+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">
 )
 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)

streamlit_hf/lib/plots.py CHANGED Viewed

@@ -211,8 +211,8 @@ def latent_scatter(
         )
     elif not title:
         fig.update_layout(title=None)
-    fig.update_xaxes(showticklabels=False, showgrid=True, gridcolor="rgba(0,0,0,0.06)", zeroline=False)
-    fig.update_yaxes(showticklabels=False, showgrid=True, gridcolor="rgba(0,0,0,0.06)", zeroline=False)
     return fig

         )
     elif not title:
         fig.update_layout(title=None)
+    fig.update_xaxes(showticklabels=False, showgrid=False, zeroline=False)
+    fig.update_yaxes(showticklabels=False, showgrid=False, zeroline=False)
     return fig

streamlit_hf/pages/1_Single_Cell_Explorer.py CHANGED Viewed

@@ -27,7 +27,7 @@ _UMAP_EXPLORER_SUBTITLE = "Hover points for details · drag on the plot to selec
 _UMAP_EXPLORER_HELP = f"""
 **What this is:** The same **2‑D UMAP** as on **Home**: validation **single cells** in **FateFormer**’s **latent space** (**context vector token representation**), summarised across **5-fold cross-validation** (**2,110** cells before filters). Here you **choose what to colour** and **filter** the cloud.
-**How to read it:** Each point is one cell. **Colour** comes from **Colour by**: e.g. [**CellTag-Multi**]({_CELLTAG_MULTI_ARTICLE_URL}) **label**, **predicted fate**, **prediction correct / wrong**, **CV fold**, **batch**, which **modalities** are present, or **dominant fate %**. **Axes are unitless** (UMAP preserves *local* neighbourhoods only). **Hover** a point for per-cell fields.
 **Using this page:** Use **Filters** to keep modality combinations, restrict **prediction outcome** (all / correct only / wrong only), choose **CV folds**, and set a **dominant fate %** range. In the plot **toolbar** (top right), pick **Box select** or **Lasso select**, then **drag** on the canvas; the app **reruns** and the **Selected points** table fills with those rows. To inspect **one** cell without a selection, scroll to **Inspect by dataset index**.
 """
@@ -58,7 +58,6 @@ with left:
             "correct",
             "fold",
             "batch_no",
-            "modality_label",
             "pct",
         ],
         format_func=lambda x: {
@@ -67,7 +66,6 @@ with left:
             "correct": "Prediction correct",
             "fold": "CV fold",
             "batch_no": "Batch",
-            "modality_label": "Available modalities",
             "pct": "Dominant fate %",
         }[x],
         label_visibility="collapsed",

 _UMAP_EXPLORER_HELP = f"""
 **What this is:** The same **2‑D UMAP** as on **Home**: validation **single cells** in **FateFormer**’s **latent space** (**context vector token representation**), summarised across **5-fold cross-validation** (**2,110** cells before filters). Here you **choose what to colour** and **filter** the cloud.
+**How to read it:** Each point is one cell. **Colour** comes from **Colour by**: e.g. [**CellTag-Multi**]({_CELLTAG_MULTI_ARTICLE_URL}) **label**, **predicted fate**, **prediction correct / wrong**, **CV fold**, **batch**, or **dominant fate %**. **Axes are unitless** (UMAP preserves *local* neighbourhoods only). **Hover** a point for per-cell fields.
 **Using this page:** Use **Filters** to keep modality combinations, restrict **prediction outcome** (all / correct only / wrong only), choose **CV folds**, and set a **dominant fate %** range. In the plot **toolbar** (top right), pick **Box select** or **Lasso select**, then **drag** on the canvas; the app **reruns** and the **Selected points** table fills with those rows. To inspect **one** cell without a selection, scroll to **Inspect by dataset index**.
 """
             "correct",
             "fold",
             "batch_no",
             "pct",
         ],
         format_func=lambda x: {
             "correct": "Prediction correct",
             "fold": "CV fold",
             "batch_no": "Batch",
             "pct": "Dominant fate %",
         }[x],
         label_visibility="collapsed",