Spaces:

Angione-Lab
/

FateFormerExplorer

Running

App Files Files Community

kaveh commited on Apr 15

Commit

d0d44b9

1 Parent(s): 253fc7e

added hover on doughnut and tooltip on experiment image

Browse files

Files changed (3) hide show

streamlit_hf/home.py +40 -1
streamlit_hf/lib/plots.py +46 -13
streamlit_hf/static/experiment.svg +224 -203

streamlit_hf/home.py CHANGED Viewed

@@ -76,6 +76,43 @@ def _downsample_latent_df(df, max_points: int = 6500, seed: int = 42):
     return df.sample(n=max_points, random_state=seed)
 ui.inject_app_styles()
 ui.inject_home_landing_styles()
@@ -94,7 +131,7 @@ 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():
-            st.image(str(_EXPERIMENT_SVG), width=_EXPERIMENT_FIGURE_WIDTH_PX)
         else:
             st.caption("Experimental schematic (`static/experiment.svg`) is missing.")
     with text_col:
@@ -219,6 +256,7 @@ if bundle is not None and df_features is not None:
         top_n_pie=_HOME_PIE_TOP_N,
         chart_outline=False,
         modality_mix_hole=0.66,
     )
     fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
     fig_g.update_annotations(font_size=12)
@@ -269,6 +307,7 @@ elif df_features is not None:
         top_n_pie=_HOME_PIE_TOP_N,
         chart_outline=False,
         modality_mix_hole=0.66,
     )
     fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
     st.plotly_chart(fig_g, width="stretch", config={"displayModeBar": False, "displaylogo": False})

     return df.sample(n=max_points, random_state=seed)
+def _render_experiment_schematic(width_px: int) -> None:
+    """Show the schematic as inline SVG so each group can use CSS hover and native tooltips."""
+    raw = _EXPERIMENT_SVG.read_text(encoding="utf-8")
+    if raw.lstrip().startswith("<?xml"):
+        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;
+  transition: filter 0.15s ease;
+}}
+.ff-experiment-svg-wrap svg g[id]:hover {{
+  filter: brightness(1.12) drop-shadow(0 0 1.5px rgba(79, 70, 229, 0.55));
+}}
+/* Microscope: decorative only (no tooltip); ignore pointer so it does not steal hovers. */
+.ff-experiment-svg-wrap svg #microscope,
+.ff-experiment-svg-wrap svg #microscope * {{
+  pointer-events: none;
+}}
+.ff-experiment-svg-wrap svg text {{
+  cursor: help;
+  transition: filter 0.15s ease;
+}}
+.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")
 ui.inject_app_styles()
 ui.inject_home_landing_styles()
     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)
         else:
             st.caption("Experimental schematic (`static/experiment.svg`) is missing.")
     with text_col:
         top_n_pie=_HOME_PIE_TOP_N,
         chart_outline=False,
         modality_mix_hole=0.66,
+        modality_mix_hover_feature_list=True,
     )
     fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
     fig_g.update_annotations(font_size=12)
         top_n_pie=_HOME_PIE_TOP_N,
         chart_outline=False,
         modality_mix_hole=0.66,
+        modality_mix_hover_feature_list=True,
     )
     fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
     st.plotly_chart(fig_g, width="stretch", config={"displayModeBar": False, "displaylogo": False})

streamlit_hf/lib/plots.py CHANGED Viewed

@@ -2,6 +2,7 @@
 from __future__ import annotations
 from typing import Any
 import numpy as np
@@ -557,6 +558,18 @@ def attention_cohort_view(
     return fig
 def global_rank_triple_panel(
     df_features,
     top_n: int = 20,
@@ -564,6 +577,7 @@ def global_rank_triple_panel(
     *,
     chart_outline: bool = True,
     modality_mix_hole: float = 0.0,
 ):
     """
     Global top-N by latent-shift and by attention (min-max scaled), plus pie or donut of modality mix
@@ -571,6 +585,8 @@ def global_rank_triple_panel(
     Set ``chart_outline=False`` for a flatter look (e.g. home page); Feature Insights keeps outlines by default.
     Set ``modality_mix_hole`` in (0, 1), e.g. ``0.66``, for a donut instead of a full pie (e.g. home page).
     """
     d = df_features.copy()
     for col in ("importance_shift", "importance_att"):
@@ -636,20 +652,37 @@ def global_rank_triple_panel(
     _hole = float(modality_mix_hole) if modality_mix_hole and modality_mix_hole > 0 else 0.0
     # Narrow third subplot: "auto" avoids clipped outside labels on donuts.
     _pie_textpos = "auto"
-    fig.add_trace(
-        go.Pie(
-            labels=pie_labels,
-            values=pie_vals,
-            marker=dict(
-                colors=[MODALITY_PIE_COLOR.get(l, "#64748b") for l in pie_labels],
-                line=pie_line,
-            ),
-            textinfo="label+percent",
-            textfont_size=12,
-            textposition=_pie_textpos,
-            hole=_hole,
-            showlegend=False,
         ),
         row=1,
         col=3,
     )

 from __future__ import annotations
+import html
 from typing import Any
 import numpy as np
     return fig
+def _pie_hover_feature_lines(names: list[str], *, names_per_line: int = 5) -> str:
+    """Join feature names with commas; start a new hover row every ``names_per_line`` items (HTML ``<br>``)."""
+    if not names:
+        return "—"
+    safe = [html.escape(str(n), quote=False) for n in names]
+    step = max(1, int(names_per_line))
+    lines: list[str] = []
+    for i in range(0, len(safe), step):
+        lines.append(", ".join(safe[i : i + step]))
+    return "<br>".join(lines)
 def global_rank_triple_panel(
     df_features,
     top_n: int = 20,
     *,
     chart_outline: bool = True,
     modality_mix_hole: float = 0.0,
+    modality_mix_hover_feature_list: bool = False,
 ):
     """
     Global top-N by latent-shift and by attention (min-max scaled), plus pie or donut of modality mix
     Set ``chart_outline=False`` for a flatter look (e.g. home page); Feature Insights keeps outlines by default.
     Set ``modality_mix_hole`` in (0, 1), e.g. ``0.66``, for a donut instead of a full pie (e.g. home page).
+    Set ``modality_mix_hover_feature_list=True`` to show comma-separated feature names per donut slice on hover
+    (same pool as the pie: strongest by mean rank within each modality), wrapped every few names for readability.
     """
     d = df_features.copy()
     for col in ("importance_shift", "importance_att"):
     _hole = float(modality_mix_hole) if modality_mix_hole and modality_mix_hole > 0 else 0.0
     # Narrow third subplot: "auto" avoids clipped outside labels on donuts.
     _pie_textpos = "auto"
+    _pie_kwargs: dict = dict(
+        labels=pie_labels,
+        values=pie_vals,
+        marker=dict(
+            colors=[MODALITY_PIE_COLOR.get(l, "#64748b") for l in pie_labels],
+            line=pie_line,
         ),
+        textinfo="label+percent",
+        textfont_size=12,
+        textposition=_pie_textpos,
+        hole=_hole,
+        showlegend=False,
+    )
+    if modality_mix_hover_feature_list:
+        _hover_texts: list[str] = []
+        for lab in pie_labels:
+            sub = pie_pool[pie_pool["modality"] == lab]
+            if sub.empty:
+                _hover_texts.append("—")
+            else:
+                sub = sub.sort_values("mean_rank", ascending=True, kind="mergesort")
+                _per_line = 1 if lab == "Flux" else 5
+                _hover_texts.append(
+                    _pie_hover_feature_lines(sub["feature"].astype(str).tolist(), names_per_line=_per_line)
+                )
+        _pie_kwargs["hovertext"] = _hover_texts
+        _pie_kwargs["hovertemplate"] = (
+            "<b>%{label}</b> · %{value} features (%{percent:.1%})<br><br>%{hovertext}<extra></extra>"
+        )
+    fig.add_trace(
+        go.Pie(**_pie_kwargs),
         row=1,
         col=3,
     )

streamlit_hf/static/experiment.svg CHANGED Viewed