updated help page

stringsight/dashboard/app.py

@@ -341,11 +341,11 @@ def create_app() -> gr.Blocks:
         with gr.Group(visible=False, elem_id="help-panel") as help_panel:
             help_md = gr.Markdown(
                 """
-                **Overview**: Compare model quality metrics and view model cards with top behavior clusters. Use Filter Controls to refine and switch between Plot/Table.
+                **Overview**: Compare model metrics and what behaviors are more unique to each model.
 
-                **View Clusters**: Explore clusters interactively. Use the search field in this tab to filter cluster labels; optional tag filter appears when available.
+                **View Clusters**: Explore the individual bheaviors seen in each property cluster. To view that example, copy over the property description into the search on the examples tab.
 
-                **View Examples**: Inspect individual examples with rich conversation rendering. Filter by prompt/model/cluster; adjust max examples and formatting options.
+                **View Examples**: Inspect individual examples and localize each example to the property cluster that it belongs to.
                 """
             )
             help_close_btn = gr.Button("Close", variant="secondary", elem_id="help-close-btn")

stringsight/dashboard/utils.py

@@ -1706,6 +1706,7 @@ def get_example_data(
             "response": response_val,
             "property_description": row.get("property_description", "N/A"),
             "score": row.get("score", "N/A"),
+            "scores": row.get("scores", None),
             "fine_cluster_id": fine_cluster_id,
             "fine_cluster_label": fine_cluster_label,
             "coarse_cluster_id": coarse_cluster_id,
@@ -1850,26 +1851,7 @@ def format_examples_display(examples: List[Dict[str, Any]],
             )
         
         # Score display for summary (only for non-side-by-side or when not shown in side-by-side)
-        score_badge = ""
-        if not example.get('is_side_by_side', False) and example['score'] != 'N/A':
-            try:
-                score_val = float(example['score'])
-                score_color = '#28a745' if score_val >= 0 else '#dc3545'
-                score_badge = f"""
-                <span style="
-                    background: {score_color}; 
-                    color: white; 
-                    padding: 4px 8px; 
-                    border-radius: 12px; 
-                    font-size: 12px; 
-                    font-weight: bold;
-                    margin-left: 10px;
-                ">
-                    Score: {score_val:.3f}
-                </span>
-                """
-            except:
-                pass
+        # (Removed) score_badge in header; scores will be shown in badges row instead
         
         # Create short preview of prompt for summary
         prompt_preview = example['prompt'][:80] + "..." if len(example['prompt']) > 80 else example['prompt']
@@ -1878,30 +1860,48 @@ def format_examples_display(examples: List[Dict[str, Any]],
         # First example is expanded by default
         open_attr = "open" if i == 1 else ""
         
-        # Build top-of-card score section (above conversation) if score exists
-        score_section_html = ""
-        raw_score = example.get('score')
-        numeric_score: float | None = None
-        if isinstance(raw_score, (int, float)):
-            numeric_score = float(raw_score)
-        elif isinstance(raw_score, str):
-            # Accept simple numeric strings without try/except
-            if re.match(r"^[+-]?\d+(?:\.\d+)?$", raw_score.strip() or ""):
-                numeric_score = float(raw_score)
-        # Avoid duplicating score display for side-by-side, which renders its own score section
-        if numeric_score is not None and not example.get('is_side_by_side', False):
-            color_bg = '#dcfce7' if numeric_score >= 0 else '#fee2e2'
-            color_fg = '#166534' if numeric_score >= 0 else '#991b1b'
-            score_chip = (
-                f"<span style=\"display:inline-block; padding:4px 10px; border-radius:999px; "
-                f"background:{color_bg}; color:{color_fg}; font-weight:600; font-size:12px; "
-                f"border:1px solid rgba(0,0,0,0.05);\">Score: {numeric_score:.3f}</span>"
-            )
-            score_section_html = (
-                f"<div style=\"margin: 0 0 12px 0; display:flex; align-items:center; flex-wrap:wrap; gap:8px;\">"
-                f"{score_chip}"
-                f"</div>"
-            )
+        # Build score chips for badges row (show scalar score and/or scores dict), excluding side-by-side
+        score_chips_html = ""
+        if not example.get('is_side_by_side', False):
+            chips: list[str] = []
+            # Scalar score
+            raw_score = example.get('score')
+            if isinstance(raw_score, (int, float)):
+                sv = float(raw_score)
+                bg = '#ecfdf5' if sv >= 0 else '#fee2e2'
+                fg = '#047857' if sv >= 0 else '#991b1b'
+                chips.append(
+                    f"<span style=\"display:inline-block; padding:2px 8px; border-radius:999px; background:{bg}; color:{fg}; border:1px solid #e5e7eb;\">Score: {sv:.3f}</span>"
+                )
+            elif isinstance(raw_score, str):
+                s = raw_score.strip() if raw_score is not None else ""
+                if s and re.match(r"^[+-]?\d+(?:\.\d+)?$", s):
+                    sv = float(s)
+                    bg = '#ecfdf5' if sv >= 0 else '#fee2e2'
+                    fg = '#047857' if sv >= 0 else '#991b1b'
+                    chips.append(
+                        f"<span style=\"display:inline-block; padding:2px 8px; border-radius:999px; background:{bg}; color:{fg}; border:1px solid #e5e7eb;\">Score: {sv:.3f}</span>"
+                    )
+            # Scores dict
+            raw_scores = example.get('scores')
+            if isinstance(raw_scores, dict):
+                for k, v in raw_scores.items():
+                    label = str(k)
+                    val: Optional[float] = None
+                    if isinstance(v, (int, float)):
+                        val = float(v)
+                    elif isinstance(v, str):
+                        vs = v.strip()
+                        if vs and re.match(r"^[+-]?\d+(?:\.\d+)?$", vs):
+                            val = float(vs)
+                    if val is not None:
+                        bg = '#ecfdf5' if val >= 0 else '#fee2e2'
+                        fg = '#047857' if val >= 0 else '#991b1b'
+                        chips.append(
+                            f"<span style=\"display:inline-block; padding:2px 8px; border-radius:999px; background:{bg}; color:{fg}; border:1px solid #e5e7eb;\">{html.escape(label)}: {val:.3f}</span>"
+                        )
+            if chips:
+                score_chips_html = "".join(chips)
 
         html_out += f"""
         <details {open_attr} style="border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 15px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
@@ -1932,6 +1932,7 @@ def format_examples_display(examples: List[Dict[str, Any]],
                     <span style="display:inline-block; padding:2px 8px; border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb;">ID: {html.escape(str(example['id']))}</span>
                     <span style="display:inline-block; padding:2px 8px; border-radius:999px; background:#f3f4f6; border:1px solid #e5e7eb;">Model: {html.escape(str(example['model']))}</span>
                     {tag_badge}
+                    {score_chips_html}
                     {(f'<span style="display:inline-block; padding:2px 8px; border-radius:999px; background:#ecfdf5; color:#047857; border:1px solid #bbf7d0;">Category: {html.escape(str(example["category"]))}</span>' if example["category"] not in [None, "N/A", "None", "", "null"] and str(example["category"]).strip() != "" else '')}
                     {(f'<span style="display:inline-block; padding:2px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; border:1px solid #dbeafe;">Type: {html.escape(str(example["type"]))}</span>' if example["type"] not in [None, "N/A", "None", "", "null"] and str(example["type"]).strip() != "" else '')}
                     {(f'<span style="display:inline-block; padding:2px 8px; border-radius:999px; background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;">Impact: {html.escape(str(example["impact"]))}</span>' if example["impact"] not in [None, "N/A", "None", "", "null"] and str(example["impact"]).strip() != "" else '')}
@@ -1956,8 +1957,6 @@ def format_examples_display(examples: List[Dict[str, Any]],
                     example.get("evidence") not in [None, "N/A", "None", "", "null"] and str(example.get("evidence", "")).strip() != "",
                  ]) else ''}
 
-                {score_section_html}
-
                 <div style="margin-bottom: 15px;">
                     <div style="border-radius: 6px; font-size: 15px; line-height: 1.5;">
                         {conversation_html}