Fix table truncation: show full content with word-wrap

Removed [:80] and [:100] truncation from actions.py and visualize.py.
Table uses table-layout:fixed + word-break:break-word for wrapping.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: abossard

notebooks/dspy_tasks/actions.py

@@ -154,9 +154,9 @@ def _evaluate_examples(module, examples, metric_fn) -> list[dict]:
             input_kwargs = {k: ex[k] for k in ex.inputs().keys()}
             prediction = module(**input_kwargs)
             score = float(metric_fn(ex, prediction) or 0.0)
-            input_str = " | ".join(f"{k}={str(v)[:80]}" for k, v in input_kwargs.items())
-            expected_fields = {k: str(ex[k])[:80] for k in ex.keys() if k not in ex.inputs()}
-            predicted_fields = {k: str(getattr(prediction, k, ""))[:80] for k in expected_fields}
+            input_str = " | ".join(f"{k}={str(v)}" for k, v in input_kwargs.items())
+            expected_fields = {k: str(ex[k]) for k in ex.keys() if k not in ex.inputs()}
+            predicted_fields = {k: str(getattr(prediction, k, "")) for k in expected_fields}
             results.append({"input": input_str, "expected": str(expected_fields), "predicted": str(predicted_fields), "score": score})
         except Exception as e:
             results.append({"input": str({k: str(ex[k])[:50] for k in ex.inputs().keys()}), "expected": "N/A", "predicted": f"ERROR: {e}", "score": 0.0})

notebooks/dspy_tasks/visualize.py

@@ -276,29 +276,30 @@ def display_results_table(results: list[dict], max_rows: int = 20):
         score = r.get("score", 0)
         icon = "✅" if score >= 0.8 else "⚠️" if score >= 0.5 else "❌"
         bg = "#f0fdf0" if score >= 0.8 else "#fdf6f0" if score >= 0.5 else "#fdf0f0"
-        input_text = str(r.get("input", ""))[:100]
-        expected = str(r.get("expected", ""))[:80]
-        predicted = str(r.get("predicted", ""))[:80]
+        input_text = str(r.get("input", ""))
+        expected = str(r.get("expected", ""))
+        predicted = str(r.get("predicted", ""))
+        td = 'style="padding:6px; border-bottom:1px solid #edebe9; font-size:0.85em; word-break:break-word"'
         rows += f'''
         <tr style="background:{bg}">
-            <td style="padding:6px; border-bottom:1px solid #edebe9">{i+1}</td>
-            <td style="padding:6px; border-bottom:1px solid #edebe9">{icon}</td>
-            <td style="padding:6px; border-bottom:1px solid #edebe9; font-size:0.85em">{_escape_html(input_text)}</td>
-            <td style="padding:6px; border-bottom:1px solid #edebe9; font-size:0.85em">{_escape_html(expected)}</td>
-            <td style="padding:6px; border-bottom:1px solid #edebe9; font-size:0.85em">{_escape_html(predicted)}</td>
+            <td {td}>{i+1}</td>
+            <td {td}>{icon}</td>
+            <td {td}>{_escape_html(input_text)}</td>
+            <td {td}>{_escape_html(expected)}</td>
+            <td {td}>{_escape_html(predicted)}</td>
             <td style="padding:6px; border-bottom:1px solid #edebe9; font-weight:bold">{score:.0%}</td>
         </tr>'''
 
     html = f'''
-    <table style="border-collapse:collapse; width:100%; margin:12px 0">
+    <table style="border-collapse:collapse; width:100%; margin:12px 0; table-layout:fixed">
         <thead>
             <tr style="background:#f3f2f1">
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886">#</th>
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886"></th>
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886">Input</th>
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886">Expected</th>
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886">Predicted</th>
-                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886">Score</th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:30px">#</th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:30px"></th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:25%">Input</th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:25%">Expected</th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:25%">Predicted</th>
+                <th style="padding:8px; text-align:left; border-bottom:2px solid #8a8886; width:50px">Score</th>
             </tr>
         </thead>
         <tbody>{rows}</tbody>