| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Transition Probabilities — Merged Across Problems</title> |
| <script src="https://unpkg.com/cytoscape@3.29.2/dist/cytoscape.min.js"></script> |
| <style> |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| background: #f8fafc; color: #1e293b; font-size: 13px; } |
| h1 { font-size: 1.3rem; font-weight: 700; } |
| .page-header { padding: 16px 28px 10px; border-bottom: 1px solid #e2e8f0; |
| background: white; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } |
| .subtitle { font-size: 0.78rem; color: #64748b; } |
| |
| .main { display: flex; gap: 12px; align-items: flex-start; padding: 14px 28px; } |
| .cy-wrap { flex: 1 1 auto; min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px; |
| background: white; overflow: hidden; } |
| #cy { width: 100%; height: 700px; } |
| .detail-panel { flex: 0 0 360px; border: 1px solid #e2e8f0; border-radius: 8px; |
| background: white; padding: 12px; font-size: 0.75rem; |
| height: 700px; overflow-y: auto; } |
| .detail-placeholder { color: #94a3b8; font-style: italic; padding: 8px 0; } |
| |
| .det-title { font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; |
| display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } |
| .det-def { font-size: 0.72rem; color: #475569; margin-bottom: 8px; line-height: 1.45; } |
| .det-row { display: flex; gap: 6px; margin-bottom: 3px; align-items: baseline; } |
| .det-lbl { color: #64748b; min-width: 96px; flex-shrink: 0; font-size: 0.72rem; } |
| .det-val { color: #1e293b; font-family: monospace; font-size: 0.78rem; } |
| .state-chip { font-size: 0.74rem; font-weight: 700; color: white; padding: 2px 8px; |
| border-radius: 4px; white-space: nowrap; } |
| .det-sub { font-size: 0.68rem; font-weight: 700; color: #64748b; margin: 10px 0 5px; |
| text-transform: uppercase; } |
| |
| |
| .bd-row { margin-bottom: 10px; } |
| .bd-head { display: flex; justify-content: space-between; font-size: 0.72rem; |
| gap: 6px; margin-bottom: 3px; align-items: flex-start; } |
| .bd-lbl { font-weight: 600; flex: 1 1 auto; min-width: 0; |
| display: flex; flex-wrap: wrap; gap: 2px; align-items: center; } |
| .bd-num { font-family: monospace; color: #475569; flex-shrink: 0; } |
| .bd-bar { height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; } |
| .bd-fill { height: 100%; border-radius: 4px; } |
| .bd-ex { font-size: 0.64rem; font-family: ui-monospace, monospace; color: #64748b; |
| padding: 2px 0 2px 6px; border-left: 2px solid #eef2f7; margin-top: 2px; |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .kind-pill { display: inline-block; font-size: 0.62rem; padding: 1px 6px; border-radius: 3px; |
| font-family: ui-monospace, monospace; font-weight: 600; line-height: 1.4; } |
| .kind-arrow { display: inline-block; color: #94a3b8; font-size: 0.7rem; margin: 0 1px; } |
| |
| |
| .lbl-row { margin-bottom: 7px; } |
| .lbl-head { display: flex; justify-content: space-between; font-size: 0.72rem; |
| gap: 6px; margin-bottom: 3px; align-items: center; } |
| .lbl-pill { display: inline-block; font-size: 0.65rem; padding: 1px 7px; border-radius: 10px; |
| font-weight: 700; white-space: nowrap; } |
| .lbl-num { font-family: monospace; color: #475569; flex-shrink: 0; font-size: 0.7rem; } |
| .lbl-bar { height: 8px; border-radius: 4px; background: #eef2f7; overflow: hidden; } |
| .lbl-fill { height: 100%; border-radius: 4px; } |
| |
| |
| .out-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } |
| .out-tgt { width: 96px; flex-shrink: 0; font-size: 0.72rem; font-weight: 600; } |
| .out-bar { flex: 1 1 auto; height: 10px; background: #eef2f7; border-radius: 5px; overflow: hidden; } |
| .out-fill{ height: 100%; border-radius: 5px; } |
| .out-num { width: 78px; flex-shrink: 0; text-align: right; font-family: monospace; |
| font-size: 0.72rem; color: #475569; } |
| |
| |
| .nlp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } |
| .nlp-lbl { width: 140px; flex-shrink: 0; font-size: 0.7rem; color: #374151; } |
| .nlp-bar { flex: 1 1 auto; height: 8px; background: #eef2f7; border-radius: 4px; overflow: hidden; } |
| .nlp-fill{ height: 100%; border-radius: 4px; background: #6366f1; } |
| .nlp-num { width: 44px; flex-shrink: 0; text-align: right; font-family: monospace; |
| font-size: 0.7rem; color: #475569; } |
| .nlp-chip { display: inline-block; font-size: 0.64rem; padding: 1px 6px; border-radius: 10px; |
| font-weight: 700; background: #eef2ff; color: #4338ca; margin: 1px; white-space: nowrap; } |
| |
| .table-section { padding: 6px 28px 32px; } |
| .table-section h2 { font-size: 0.95rem; margin-bottom: 8px; } |
| table.verify { border-collapse: collapse; font-size: 0.74rem; } |
| table.verify th, table.verify td { border: 1px solid #e2e8f0; padding: 4px 9px; text-align: center; } |
| table.verify thead th { background: #f1f5f9; } |
| table.verify td.tr-name { text-align: left; font-weight: 700; font-family: monospace; } |
| table.verify td.tr-total { font-weight: 700; background: #f8fafc; font-family: monospace; } |
| table.verify td.tr-sum { font-weight: 700; color: #16a34a; font-family: monospace; } |
| </style> |
| </head> |
| <body> |
| <div class="page-header"> |
| <h1>Transition Probabilities</h1> |
| <span class="subtitle">python · gpt55 · 93 problems merged · edge label = count · click a node or edge for details</span> |
| </div> |
|
|
| <div class="main"> |
| <div class="cy-wrap"><div id="cy"></div></div> |
| <div class="detail-panel" id="detail"> |
| <div class="detail-placeholder">Click a node or edge for details</div> |
| </div> |
| </div> |
|
|
| <div class="table-section"> |
| <h2>Verification — outgoing probability per source state (sums to 100%)</h2> |
| <table class="verify"> |
| <thead><tr><th class="tr-name" style="text-align:left">source</th><th>out total</th><th>Σ%</th> |
| <th style="text-align:left">→ targets</th></tr></thead> |
| <tbody><tr><td class="tr-name">start</td><td class="tr-total">93</td><td class="tr-sum">100%</td><td style="text-align:left">breakthrough <b>96.8%</b> <span style="color:#94a3b8">(90)</span> stuck <b>2.2%</b> <span style="color:#94a3b8">(2)</span> improved <b>1.1%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">improved</td><td class="tr-total">2</td><td class="tr-sum">100%</td><td style="text-align:left">stuck <b>50.0%</b> <span style="color:#94a3b8">(1)</span> breakthrough <b>50.0%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">stuck</td><td class="tr-total">3</td><td class="tr-sum">100%</td><td style="text-align:left">breakthrough <b>66.7%</b> <span style="color:#94a3b8">(2)</span> improved <b>33.3%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">breakthrough</td><td class="tr-total">93</td><td class="tr-sum">100%</td><td style="text-align:left">end_submit <b>97.8%</b> <span style="color:#94a3b8">(91)</span> stay <b>2.2%</b> <span style="color:#94a3b8">(2)</span></td></tr><tr><td class="tr-name">stay</td><td class="tr-total">3</td><td class="tr-sum">100%</td><td style="text-align:left">end_submit <b>66.7%</b> <span style="color:#94a3b8">(2)</span> stay <b>33.3%</b> <span style="color:#94a3b8">(1)</span></td></tr></tbody> |
| </table> |
| </div> |
|
|
| <div class="table-section"> |
| <h2>Gap label distribution — for each label, which src→tgt edges carry it</h2> |
| <table class="verify"> |
| <thead><tr><th class="tr-name" style="text-align:left">gap label</th><th>total</th> |
| <th style="text-align:left">src→tgt breakdown</th></tr></thead> |
| <tbody><tr><td class="tr-name">execute_plan</td><td class="tr-total">1</td><td style="text-align:left">stuck→breakthrough <b>100.0%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">fix_bug</td><td class="tr-total">3</td><td style="text-align:left">breakthrough→stay <b>33.3%</b> <span style="color:#94a3b8">(1)</span> stuck→improved <b>33.3%</b> <span style="color:#94a3b8">(1)</span> stay→stay <b>33.3%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">implement</td><td class="tr-total">93</td><td style="text-align:left">start→breakthrough <b>96.8%</b> <span style="color:#94a3b8">(90)</span> start→stuck <b>2.2%</b> <span style="color:#94a3b8">(2)</span> start→improved <b>1.1%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">infra_confusion</td><td class="tr-total">1</td><td style="text-align:left">improved→breakthrough <b>100.0%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">optimize_perf</td><td class="tr-total">2</td><td style="text-align:left">stuck→breakthrough <b>50.0%</b> <span style="color:#94a3b8">(1)</span> improved→stuck <b>50.0%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">rewrite</td><td class="tr-total">1</td><td style="text-align:left">breakthrough→stay <b>100.0%</b> <span style="color:#94a3b8">(1)</span></td></tr><tr><td class="tr-name">verify</td><td class="tr-total">93</td><td style="text-align:left">breakthrough→end_submit <b>97.8%</b> <span style="color:#94a3b8">(91)</span> stay→end_submit <b>2.2%</b> <span style="color:#94a3b8">(2)</span></td></tr></tbody> |
| </table> |
| </div> |
|
|
| <script> |
| const M = {"canvas": {"w": 760, "h": 760}, "nodes": [{"id": "start", "label": "▶", "state_type": "start", "color": "#9E9E9E", "definition": "Virtual starting state — before any solution.py was written.", "visits": 93, "out_total": 93, "nlp_out": {"m3_existing": 100.0, "m8_inline": 15.1, "m1_efficiency": 3.2, "m9": 7.5, "m1_correctness": 1.1}, "nlp_out_total": 93, "nlp_in": {}, "nlp_in_total": 0, "gap_out": {"implement": 100.0}, "gap_out_total": 93, "gap_in": {}, "gap_in_total": 0, "x": 80.0, "y": 380.0}, {"id": "improved", "label": "improved", "state_type": "improved", "color": "#2196F3", "definition": "Gained tests, lost none (but not yet all-pass).", "visits": 2, "out_total": 2, "nlp_out": {"m1_correctness": 50.0, "m3_existing": 100.0, "m9": 100.0, "m7": 50.0, "m8_inline": 50.0}, "nlp_out_total": 2, "nlp_in": {"m1_correctness": 100.0, "m3_existing": 100.0, "m8_inline": 100.0, "m9": 50.0}, "nlp_in_total": 2, "gap_out": {"optimize_perf": 50.0, "infra_confusion": 50.0}, "gap_out_total": 2, "gap_in": {"fix_bug": 50.0, "implement": 50.0}, "gap_in_total": 2, "x": 260.0, "y": 170.0}, {"id": "stuck", "label": "stuck", "state_type": "stuck", "color": "#FF9800", "definition": "Identical test tuple — no change from the previous snapshot.", "visits": 3, "out_total": 3, "nlp_out": {"m1_correctness": 33.3, "m3_existing": 66.7, "m8_inline": 66.7, "m9": 33.3, "m1_efficiency": 33.3}, "nlp_out_total": 3, "nlp_in": {"m3_existing": 100.0, "m9": 100.0, "m8_inline": 33.3, "m1_correctness": 33.3}, "nlp_in_total": 3, "gap_out": {"fix_bug": 33.3, "optimize_perf": 33.3, "execute_plan": 33.3}, "gap_out_total": 3, "gap_in": {"implement": 66.7, "optimize_perf": 33.3}, "gap_in_total": 3, "x": 260.0, "y": 380.0}, {"id": "breakthrough", "label": "breakthrough", "state_type": "breakthrough", "color": "#00BCD4", "definition": "Some failing → all passing.", "visits": 93, "out_total": 93, "nlp_out": {"m3_existing": 3.2, "m8_inline": 3.2, "m9": 1.1}, "nlp_out_total": 93, "nlp_in": {"m3_existing": 98.9, "m8_inline": 15.1, "m1_efficiency": 4.3, "m9": 6.5, "m7": 1.1}, "nlp_in_total": 93, "gap_out": {"verify": 97.8, "rewrite": 1.1, "fix_bug": 1.1}, "gap_out_total": 93, "gap_in": {"implement": 96.8, "optimize_perf": 1.1, "execute_plan": 1.1, "infra_confusion": 1.1}, "gap_in_total": 93, "x": 260.0, "y": 590.0}, {"id": "stay", "label": "stay", "state_type": "stay", "color": "#4CAF50", "definition": "All-pass → all-pass (model rewrote a working solution).", "visits": 3, "out_total": 3, "nlp_out": {"m3_existing": 33.3, "m8_inline": 33.3, "m9": 33.3}, "nlp_out_total": 3, "nlp_in": {"m3_existing": 100.0, "m8_inline": 100.0, "m9": 66.7}, "nlp_in_total": 3, "gap_out": {"verify": 66.7, "fix_bug": 33.3}, "gap_out_total": 3, "gap_in": {"fix_bug": 66.7, "rewrite": 33.3}, "gap_in_total": 3, "x": 470.0, "y": 590.0}, {"id": "end_submit", "label": "SUBMIT", "state_type": "end_submit", "color": "#607D8B", "definition": "Model submitted itself (ran COMPLETE_TASK_AND_SUBMIT_FINAL_OUTPUT).", "visits": 93, "out_total": 0, "nlp_out": {}, "nlp_out_total": 0, "nlp_in": {"m3_existing": 1.1, "m8_inline": 1.1}, "nlp_in_total": 93, "gap_out": {}, "gap_out_total": 0, "gap_in": {"verify": 100.0}, "gap_in_total": 93, "x": 680.0, "y": 290.0}], "edges": [{"id": "m0", "source": "start", "target": "breakthrough", "color": "#9E9E9E", "count": 90, "out_pct": 96.8, "label": "90", "n_unique_chains": 6, "breakdown": [{"chain": ["write"], "label": "write solution.py", "count": 75, "pct": 83.3, "examples": [{"problem": "gpt-5.5/1883/1883_B", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc302/abc302_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc302/abc302_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc305/abc305_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc305/abc305_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc308/abc308_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc308/abc308_e", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc310/abc310_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc310/abc310_f", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc311/abc311_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc312/abc312_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc312/abc312_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc313/abc313_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc315/abc315_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc318/abc318_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc319/abc319_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc322/abc322_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc324/abc324_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc324/abc324_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc325/abc325_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc326/abc326_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc329/abc329_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc330/abc330_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc332/abc332_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc333/abc333_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc333/abc333_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc334/abc334_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc335/abc335_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc336/abc336_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc337/abc337_e", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc340/abc340_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc341/abc341_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc341/abc341_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc342/abc342_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc344/abc344_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc345/abc345_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc351/abc351_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc354/abc354_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc354/abc354_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc355/abc355_a", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inline_script", "write"], "label": "inline_script → write solution.py", "count": 6, "pct": 6.7, "examples": [{"problem": "gpt-5.5/abc301/abc301_f", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc359/abc359_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc397/abc397_e", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc400/abc400_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/arc194/arc194_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/arc194/arc194_d", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inspect", "write"], "label": "inspect test file → write solution.py", "count": 4, "pct": 4.4, "examples": [{"problem": "gpt-5.5/abc303/abc303_a", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc334/abc334_c", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc357/abc357_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/abc360/abc360_a", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inline_script", "inline_script", "inline_script", "inline_script", "write"], "label": "inline_script → inline_script → inline_script → inline_script → write solution.py", "count": 2, "pct": 2.2, "examples": [{"problem": "gpt-5.5/arc184/arc184_d", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/arc194/arc194_e", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inline_script", "inline_script", "write"], "label": "inline_script → inline_script → write solution.py", "count": 2, "pct": 2.2, "examples": [{"problem": "gpt-5.5/arc186/arc186_b", "snap_from": -1, "snap_to": 0}, {"problem": "gpt-5.5/arc196/arc196_d", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inline_script", "inline_script", "inline_script", "write"], "label": "inline_script → inline_script → inline_script → write solution.py", "count": 1, "pct": 1.1, "examples": [{"problem": "gpt-5.5/arc193/arc193_a", "snap_from": -1, "snap_to": 0}]}], "label_dist": [{"label": "implement", "count": 90, "pct": 100.0}], "n_labeled": 90, "nlp_rates": {"m3_existing": 100, "m8_inline": 13, "m1_efficiency": 3, "m9": 6}}, {"id": "m1", "source": "breakthrough", "target": "end_submit", "color": "#00BCD4", "count": 91, "out_pct": 97.8, "label": "91", "n_unique_chains": 2, "breakdown": [{"chain": ["submit"], "label": "submit", "count": 90, "pct": 98.9, "examples": [{"problem": "gpt-5.5/1883/1883_B", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc301/abc301_f", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc302/abc302_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc302/abc302_c", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc303/abc303_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc305/abc305_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc305/abc305_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc308/abc308_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc308/abc308_e", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc310/abc310_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc310/abc310_f", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc311/abc311_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc312/abc312_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc312/abc312_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc313/abc313_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc315/abc315_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc318/abc318_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc319/abc319_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc322/abc322_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc324/abc324_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc324/abc324_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc325/abc325_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc326/abc326_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc329/abc329_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc330/abc330_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc332/abc332_c", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc333/abc333_b", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc333/abc333_c", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc334/abc334_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc334/abc334_c", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc335/abc335_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc336/abc336_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc337/abc337_e", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc340/abc340_c", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc341/abc341_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc341/abc341_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc342/abc342_a", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc344/abc344_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc345/abc345_d", "snap_from": 0, "snap_to": -1}, {"problem": "gpt-5.5/abc351/abc351_a", "snap_from": 0, "snap_to": -1}]}, {"chain": ["inline_script", "test", "submit"], "label": "inline_script → run ./test.sh → submit", "count": 1, "pct": 1.1, "examples": [{"problem": "gpt-5.5/abc389/abc389_g", "snap_from": 3, "snap_to": -1}]}], "label_dist": [{"label": "verify", "count": 91, "pct": 100.0}], "n_labeled": 91, "nlp_rates": {"m3_existing": 1, "m8_inline": 1}}, {"id": "m2", "source": "breakthrough", "target": "stay", "color": "#00BCD4", "count": 2, "out_pct": 2.2, "label": "2", "n_unique_chains": 2, "breakdown": [{"chain": ["inline_script", "write"], "label": "inline_script → write solution.py", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/abc373/abc373_f", "snap_from": 0, "snap_to": 1}]}, {"chain": ["inspect"], "label": "inspect test file", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/abc392/abc392_b", "snap_from": 0, "snap_to": 1}]}], "label_dist": [{"label": "rewrite", "count": 1, "pct": 50.0}, {"label": "fix_bug", "count": 1, "pct": 50.0}], "n_labeled": 2, "nlp_rates": {"m3_existing": 100, "m8_inline": 100, "m9": 50}}, {"id": "m3", "source": "stay", "target": "end_submit", "color": "#4CAF50", "count": 2, "out_pct": 66.7, "label": "2", "n_unique_chains": 1, "breakdown": [{"chain": ["submit"], "label": "submit", "count": 2, "pct": 100.0, "examples": [{"problem": "gpt-5.5/abc373/abc373_f", "snap_from": 1, "snap_to": -1}, {"problem": "gpt-5.5/abc392/abc392_b", "snap_from": 2, "snap_to": -1}]}], "label_dist": [{"label": "verify", "count": 2, "pct": 100.0}], "n_labeled": 2, "nlp_rates": {}}, {"id": "m4", "source": "start", "target": "stuck", "color": "#9E9E9E", "count": 2, "out_pct": 2.2, "label": "2", "n_unique_chains": 2, "breakdown": [{"chain": ["write"], "label": "write solution.py", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/abc389/abc389_g", "snap_from": -1, "snap_to": 0}]}, {"chain": ["inline_script", "inline_script", "write"], "label": "inline_script → inline_script → write solution.py", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/arc194/arc194_a", "snap_from": -1, "snap_to": 0}]}], "label_dist": [{"label": "implement", "count": 2, "pct": 100.0}], "n_labeled": 2, "nlp_rates": {"m3_existing": 100, "m9": 100, "m8_inline": 50}}, {"id": "m5", "source": "stuck", "target": "improved", "color": "#FF9800", "count": 1, "out_pct": 33.3, "label": "1", "n_unique_chains": 1, "breakdown": [{"chain": ["inline_script"], "label": "inline_script", "count": 1, "pct": 100.0, "examples": [{"problem": "gpt-5.5/abc389/abc389_g", "snap_from": 0, "snap_to": 1}]}], "label_dist": [{"label": "fix_bug", "count": 1, "pct": 100.0}], "n_labeled": 1, "nlp_rates": {"m1_correctness": 100, "m3_existing": 100, "m8_inline": 100, "m9": 100}}, {"id": "m6", "source": "improved", "target": "stuck", "color": "#2196F3", "count": 1, "out_pct": 50.0, "label": "1", "n_unique_chains": 1, "breakdown": [{"chain": ["run_sample", "test", "write"], "label": "run solution.py (sample) → run ./test.sh → write solution.py", "count": 1, "pct": 100.0, "examples": [{"problem": "gpt-5.5/abc389/abc389_g", "snap_from": 1, "snap_to": 2}]}], "label_dist": [{"label": "optimize_perf", "count": 1, "pct": 100.0}], "n_labeled": 1, "nlp_rates": {"m1_correctness": 100, "m3_existing": 100, "m9": 100}}, {"id": "m7", "source": "stuck", "target": "breakthrough", "color": "#FF9800", "count": 2, "out_pct": 66.7, "label": "2", "n_unique_chains": 2, "breakdown": [{"chain": ["inline_script", "inline_script"], "label": "inline_script → inline_script", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/abc389/abc389_g", "snap_from": 2, "snap_to": 3}]}, {"chain": [], "label": "(no useful command)", "count": 1, "pct": 50.0, "examples": [{"problem": "gpt-5.5/arc194/arc194_a", "snap_from": 0, "snap_to": 1}]}], "label_dist": [{"label": "optimize_perf", "count": 1, "pct": 50.0}, {"label": "execute_plan", "count": 1, "pct": 50.0}], "n_labeled": 2, "nlp_rates": {"m1_efficiency": 50, "m3_existing": 50, "m8_inline": 50}}, {"id": "m8", "source": "stay", "target": "stay", "color": "#4CAF50", "count": 1, "out_pct": 33.3, "label": "1", "n_unique_chains": 1, "breakdown": [{"chain": ["write"], "label": "write solution.py", "count": 1, "pct": 100.0, "examples": [{"problem": "gpt-5.5/abc392/abc392_b", "snap_from": 1, "snap_to": 2}]}], "label_dist": [{"label": "fix_bug", "count": 1, "pct": 100.0}], "n_labeled": 1, "nlp_rates": {"m3_existing": 100, "m8_inline": 100, "m9": 100}}, {"id": "m9", "source": "start", "target": "improved", "color": "#9E9E9E", "count": 1, "out_pct": 1.1, "label": "1", "n_unique_chains": 1, "breakdown": [{"chain": ["inline_script", "inline_script", "inline_script", "inline_script", "write"], "label": "inline_script → inline_script → inline_script → inline_script → write solution.py", "count": 1, "pct": 100.0, "examples": [{"problem": "gpt-5.5/arc192/arc192_b", "snap_from": -1, "snap_to": 0}]}], "label_dist": [{"label": "implement", "count": 1, "pct": 100.0}], "n_labeled": 1, "nlp_rates": {"m1_correctness": 100, "m3_existing": 100, "m8_inline": 100}}, {"id": "m10", "source": "improved", "target": "breakthrough", "color": "#2196F3", "count": 1, "out_pct": 50.0, "label": "1", "n_unique_chains": 1, "breakdown": [{"chain": ["inspect", "inline_script", "inline_script", "inline_script", "inspect", "inline_script", "inline_script", "inline_script", "inline_script", "inline_script", "inline_script", "write"], "label": "inspect test file → inline_script → inline_script → inline_script → inspect test file → inline_script → inline_script → inline_script → inline_script → inline_script → inline_script → write solution.py", "count": 1, "pct": 100.0, "examples": [{"problem": "gpt-5.5/arc192/arc192_b", "snap_from": 0, "snap_to": 1}]}], "label_dist": [{"label": "infra_confusion", "count": 1, "pct": 100.0}], "n_labeled": 1, "nlp_rates": {"m3_existing": 100, "m7": 100, "m8_inline": 100, "m9": 100}}], "prob_rows": [{"src": "start", "total": 93, "outs": [{"tgt": "breakthrough", "count": 90, "pct": 96.8}, {"tgt": "stuck", "count": 2, "pct": 2.2}, {"tgt": "improved", "count": 1, "pct": 1.1}]}, {"src": "improved", "total": 2, "outs": [{"tgt": "stuck", "count": 1, "pct": 50.0}, {"tgt": "breakthrough", "count": 1, "pct": 50.0}]}, {"src": "stuck", "total": 3, "outs": [{"tgt": "breakthrough", "count": 2, "pct": 66.7}, {"tgt": "improved", "count": 1, "pct": 33.3}]}, {"src": "breakthrough", "total": 93, "outs": [{"tgt": "end_submit", "count": 91, "pct": 97.8}, {"tgt": "stay", "count": 2, "pct": 2.2}]}, {"src": "stay", "total": 3, "outs": [{"tgt": "end_submit", "count": 2, "pct": 66.7}, {"tgt": "stay", "count": 1, "pct": 33.3}]}], "label_rows": [{"label": "execute_plan", "total": 1, "edges": [{"src": "stuck", "tgt": "breakthrough", "count": 1, "pct": 100.0}]}, {"label": "fix_bug", "total": 3, "edges": [{"src": "breakthrough", "tgt": "stay", "count": 1, "pct": 33.3}, {"src": "stuck", "tgt": "improved", "count": 1, "pct": 33.3}, {"src": "stay", "tgt": "stay", "count": 1, "pct": 33.3}]}, {"label": "implement", "total": 93, "edges": [{"src": "start", "tgt": "breakthrough", "count": 90, "pct": 96.8}, {"src": "start", "tgt": "stuck", "count": 2, "pct": 2.2}, {"src": "start", "tgt": "improved", "count": 1, "pct": 1.1}]}, {"label": "infra_confusion", "total": 1, "edges": [{"src": "improved", "tgt": "breakthrough", "count": 1, "pct": 100.0}]}, {"label": "optimize_perf", "total": 2, "edges": [{"src": "stuck", "tgt": "breakthrough", "count": 1, "pct": 50.0}, {"src": "improved", "tgt": "stuck", "count": 1, "pct": 50.0}]}, {"label": "rewrite", "total": 1, "edges": [{"src": "breakthrough", "tgt": "stay", "count": 1, "pct": 100.0}]}, {"label": "verify", "total": 93, "edges": [{"src": "breakthrough", "tgt": "end_submit", "count": 91, "pct": 97.8}, {"src": "stay", "tgt": "end_submit", "count": 2, "pct": 2.2}]}], "n_problems": 93, "max_count": 91, "lang": "python", "model_scope": "gpt55"}; |
| |
| function esc(s) { |
| return String(s).replace(/&/g,'&').replace(/</g,'<') |
| .replace(/>/g,'>').replace(/"/g,'"'); |
| } |
| function snapLabel(idx) { |
| if (idx < 0) return idx === -1 ? 'end' : 'start'; |
| return 'snap_' + String(idx).padStart(2,'0'); |
| } |
| |
| |
| const AKC = { |
| 'write': ['#166534', '#dcfce7'], |
| 'write_script': ['#7c3aed', '#f5f3ff'], |
| 'run_sample': ['#0369a1', '#e0f2fe'], |
| 'run_script': ['#0284c7', '#e0f2fe'], |
| 'test': ['#b45309', '#fffbeb'], |
| 'time': ['#ca8a04', '#fefce8'], |
| 'inspect': ['#475569', '#f1f5f9'], |
| 'wc': ['#64748b', '#f1f5f9'], |
| 'diff': ['#64748b', '#f1f5f9'], |
| 'submit': ['#dc2626', '#fef2f2'], |
| }; |
| |
| const KIND_SHORT = { |
| 'write': 'cat > solution', |
| 'write_script': 'cat > helper.py', |
| 'run_sample': 'python3 solution.py', |
| 'run_script': 'python3 script.py', |
| 'test': './test.sh', |
| 'time': 'time solution.py', |
| 'inspect': 'cat tests/', |
| 'wc': 'wc', |
| 'diff': 'diff', |
| 'submit': 'echo COMPLETE_TASK', |
| }; |
| |
| const LABEL_COLORS = { |
| |
| 'fix_bug': ['#166534', '#dcfce7'], |
| 'debug_failure': ['#dc2626', '#fef2f2'], |
| 'implement': ['#1d4ed8', '#eff6ff'], |
| 'rewrite': ['#7c3aed', '#f5f3ff'], |
| 'explore': ['#0891b2', '#ecfeff'], |
| 'execute_plan': ['#0f766e', '#f0fdfa'], |
| 'revert': ['#6b7280', '#f9fafb'], |
| 'verify': ['#334155', '#f1f5f9'], |
| 'edge_case': ['#65a30d', '#f7fee7'], |
| 'optimize_perf': ['#6d28d9', '#f5f3ff'], |
| 'cosmetic_refactor': ['#475569', '#f1f5f9'], |
| 'infra_confusion': ['#ca8a04', '#fefce8'], |
| |
| 'initial_impl': ['#166534', '#dcfce7'], |
| 'run_tests': ['#0369a1', '#e0f2fe'], |
| 'fix_specific_failure':['#ea580c', '#fff7ed'], |
| 'rethink_algorithm': ['#d97706', '#fffbeb'], |
| 'complete_partial': ['#0891b2', '#ecfeff'], |
| 'fix_crash': ['#b91c1c', '#fef2f2'], |
| 'read_tests': ['#0284c7', '#f0f9ff'], |
| 'attempt': ['#1d4ed8', '#eff6ff'], |
| }; |
| function renderLabelDist(labelDist, nLabeled) { |
| if (!labelDist || !labelDist.length) return ''; |
| let h = `<div class="det-sub">Gap label distribution (${nLabeled} labeled)</div>`; |
| labelDist.forEach(d => { |
| const [fg, bg] = LABEL_COLORS[d.label] || ['#374151', '#f9fafb']; |
| h += `<div class="lbl-row">`; |
| h += `<div class="lbl-head">`; |
| h += `<span class="lbl-pill" style="color:${fg};background:${bg}">${esc(d.label)}</span>`; |
| h += `<span class="lbl-num">${d.count} · ${d.pct}%</span></div>`; |
| h += `<div class="lbl-bar"><div class="lbl-fill" style="width:${d.pct}%;background:${fg}"></div></div>`; |
| h += `</div>`; |
| }); |
| return h; |
| } |
| |
| function renderGapDist(dist, total, title) { |
| if (!dist || !Object.keys(dist).length) return ''; |
| const entries = Object.entries(dist).sort((a, b) => b[1] - a[1]); |
| let h = `<div class="det-sub">${esc(title)} (${total} labeled)</div>`; |
| entries.forEach(([lbl, pct]) => { |
| const [fg, bg] = LABEL_COLORS[lbl] || ['#374151', '#f9fafb']; |
| h += `<div class="lbl-row">`; |
| h += `<div class="lbl-head">`; |
| h += `<span class="lbl-pill" style="color:${fg};background:${bg}">${esc(lbl)}</span>`; |
| h += `<span class="lbl-num">${pct}%</span></div>`; |
| h += `<div class="lbl-bar"><div class="lbl-fill" style="width:${pct}%;background:${fg}"></div></div>`; |
| h += `</div>`; |
| }); |
| return h; |
| } |
| |
| const NLP_LABELS = { |
| 'm1_correctness': 'M1 correctness', |
| 'm1_efficiency': 'M1 efficiency', |
| 'm1_clarity': 'M1 clarity', |
| 'm2': 'M2 second-guess', |
| 'm3_existing': 'M3 existing tests', |
| 'm3_own': 'M3 own tests', |
| 'm4': 'M4 # comment', |
| 'm6': 'M6 code fence', |
| 'm7': 'M7 edge case', |
| 'm8_lang': 'M8a extra lang', |
| 'm8_python': 'M8b extra .py', |
| 'm9': 'M9 error turn', |
| }; |
| const NLP_KEY_ORDER = ['m1_correctness','m1_efficiency','m1_clarity','m2', |
| 'm3_existing','m3_own','m4','m6','m7','m8_lang','m8_python','m9']; |
| |
| function renderNlpDist(rates, total, title) { |
| if (!rates || !Object.keys(rates).length) return ''; |
| const entries = NLP_KEY_ORDER |
| .filter(k => (rates[k] || 0) > 0) |
| .map(k => [k, rates[k]]); |
| if (!entries.length) return ''; |
| let h = `<div class="det-sub">${esc(title)} (${total} edges)</div>`; |
| entries.forEach(([k, pct]) => { |
| const lbl = NLP_LABELS[k] || k; |
| h += `<div class="nlp-row">`; |
| h += `<span class="nlp-lbl">${esc(lbl)}</span>`; |
| h += `<span class="nlp-bar"><span class="nlp-fill" style="width:${pct}%"></span></span>`; |
| h += `<span class="nlp-num">${pct}%</span></div>`; |
| }); |
| return h; |
| } |
| |
| function renderNlpRates(rates) { |
| if (!rates || !Object.keys(rates).length) return ''; |
| const chips = NLP_KEY_ORDER |
| .filter(k => (rates[k] || 0) > 0) |
| .map(k => `<span class="nlp-chip">${esc(NLP_LABELS[k] || k)}: ${rates[k]}%</span>`) |
| .join(''); |
| if (!chips) return ''; |
| return `<div class="det-sub">NLP signals (% of traversals)</div><div style="margin-bottom:6px">${chips}</div>`; |
| } |
| |
| function renderChain(chain) { |
| if (!chain || !chain.length) |
| return '<span class="kind-pill" style="color:#94a3b8;background:#f1f5f9">(no useful command)</span>'; |
| return chain.map((k, i) => { |
| const [fg, bg] = AKC[k] || ['#374151', '#f9fafb']; |
| const lbl = KIND_SHORT[k] || k; |
| const arrow = i > 0 ? '<span class="kind-arrow">→</span>' : ''; |
| return arrow + `<span class="kind-pill" style="color:${fg};background:${bg}">${esc(lbl)}</span>`; |
| }).join(''); |
| } |
| |
| function showEdgeDetail(panel, ed) { |
| const sc = (M.nodes.find(n => n.id === ed.source) || {}).color || ed.color; |
| const tc = (M.nodes.find(n => n.id === ed.target) || {}).color || '#9e9e9e'; |
| let h = `<div class="det-title">`; |
| h += `<span class="state-chip" style="background:${sc}">${esc(ed.source)}</span>`; |
| h += `<span style="color:#94a3b8;font-weight:400">→</span>`; |
| h += `<span class="state-chip" style="background:${tc}">${esc(ed.target)}</span></div>`; |
| h += `<div class="det-row"><span class="det-lbl">Count</span><span class="det-val">${ed.count}</span></div>`; |
| h += `<div class="det-row"><span class="det-lbl">P(${esc(ed.target)} | ${esc(ed.source)})</span>`; |
| h += `<span class="det-val">${ed.out_pct}%</span></div>`; |
| |
| h += `<div class="det-sub">Command-chain breakdown (${ed.n_unique_chains} distinct chain${ed.n_unique_chains === 1 ? '' : 's'})</div>`; |
| (ed.breakdown || []).forEach(b => { |
| h += `<div class="bd-row">`; |
| h += `<div class="bd-head"><span class="bd-lbl">${renderChain(b.chain)}</span>`; |
| h += `<span class="bd-num">${b.count} · ${b.pct}%</span></div>`; |
| h += `<div class="bd-bar"><div class="bd-fill" style="width:${b.pct}%;background:#94a3b8"></div></div>`; |
| (b.examples || []).forEach(ex => { |
| const fr = ex.snap_from < 0 ? 'start' : snapLabel(ex.snap_from); |
| const to = ex.snap_to < 0 |
| ? (ed.target === 'end_limit' ? 'limit' : 'submit') |
| : snapLabel(ex.snap_to); |
| h += `<div class="bd-ex">${esc(ex.problem)} ${fr}→${to}</div>`; |
| }); |
| h += `</div>`; |
| }); |
| h += renderLabelDist(ed.label_dist, ed.n_labeled); |
| h += renderNlpRates(ed.nlp_rates); |
| panel.innerHTML = h; |
| } |
| |
| function showNodeDetail(panel, n) { |
| let h = `<div class="det-title"><span class="state-chip" style="background:${n.color}">${n.state_type}</span></div>`; |
| h += `<div class="det-def">${esc(n.definition)}</div>`; |
| h += `<div class="det-row"><span class="det-lbl">Visits</span><span class="det-val">${n.visits}</span></div>`; |
| h += `<div class="det-row"><span class="det-lbl">Outgoing</span><span class="det-val">${n.out_total}</span></div>`; |
| |
| const outs = M.edges.filter(e => e.source === n.id) |
| .sort((a,b) => b.count - a.count); |
| if (outs.length) { |
| h += `<div class="det-sub">Outgoing distribution (sums to 100%)</div>`; |
| outs.forEach(e => { |
| const tcol = (M.nodes.find(nd => nd.id === e.target) || {}).color || e.color; |
| h += `<div class="out-row">`; |
| h += `<span class="out-tgt" style="color:${tcol}">${esc(e.target)}</span>`; |
| h += `<span class="out-bar"><span class="out-fill" style="width:${e.out_pct}%;background:${tcol}"></span></span>`; |
| h += `<span class="out-num">${e.out_pct}% (${e.count})</span></div>`; |
| }); |
| } else { |
| h += `<div class="det-def">Terminal state — no outgoing transitions.</div>`; |
| } |
| |
| const ins = M.edges.filter(e => e.target === n.id) |
| .sort((a,b) => b.count - a.count); |
| if (ins.length) { |
| const inTotal = ins.reduce((s, e) => s + e.count, 0); |
| h += `<div class="det-sub">Incoming distribution (sums to 100%)</div>`; |
| ins.forEach(e => { |
| const scol = (M.nodes.find(nd => nd.id === e.source) || {}).color || e.color; |
| const pct = inTotal > 0 ? Math.round(1000 * e.count / inTotal) / 10 : 0; |
| h += `<div class="out-row">`; |
| h += `<span class="out-tgt" style="color:${scol}">${esc(e.source)}</span>`; |
| h += `<span class="out-bar"><span class="out-fill" style="width:${pct}%;background:${scol}"></span></span>`; |
| h += `<span class="out-num">${pct}% (${e.count})</span></div>`; |
| }); |
| } |
| h += renderGapDist(n.gap_out, n.gap_out_total, 'Outgoing gap labels'); |
| h += renderGapDist(n.gap_in, n.gap_in_total, 'Incoming gap labels'); |
| h += renderNlpDist(n.nlp_out, n.nlp_out_total, 'Outgoing NLP signals'); |
| h += renderNlpDist(n.nlp_in, n.nlp_in_total, 'Incoming NLP signals'); |
| panel.innerHTML = h; |
| } |
| |
| function makeBgImg(count, w, h, fs) { |
| if (!count) return ''; |
| const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + h + '"><text x="' + (w/2) + '" y="' + Math.round(h*0.8) + '" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + fs + '" fill="white" font-weight="700">' + count + '</text></svg>'; |
| return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); |
| } |
| |
| const cyNodes = M.nodes.map(n => { |
| const sp = n.id === 'start' || n.id === 'end_submit' || n.id === 'end_limit'; |
| const nw = sp ? 54 : 72, nh = sp ? 54 : 72; |
| return { |
| data: { id: n.id, label: n.label, color: n.color, n, |
| bgImg: makeBgImg(n.visits, nw, nh, 9) }, |
| position: { x: n.x, y: n.y }, |
| }; |
| }); |
| |
| const cyEdges = M.edges.map(ed => ({ |
| data: { |
| id: ed.id, source: ed.source, target: ed.target, |
| label: ed.label, color: ed.color, |
| isSelf: ed.source === ed.target ? 'yes' : 'no', |
| |
| |
| |
| width: 1.0 + (ed.count / Math.max(1, M.max_count)) * 9.0, |
| ed, |
| } |
| })); |
| |
| const cy = cytoscape({ |
| container: document.getElementById('cy'), |
| elements: { nodes: cyNodes, edges: cyEdges }, |
| layout: { name: 'preset' }, |
| style: [ |
| { |
| selector: 'node', |
| style: { |
| 'background-color': 'data(color)', 'label': 'data(label)', 'color': 'white', |
| 'font-size': '11px', 'font-weight': '700', |
| 'text-valign': 'center', 'text-halign': 'center', |
| 'width': 72, 'height': 72, 'border-width': 3, 'border-color': 'white', |
| 'background-image': 'data(bgImg)', |
| 'background-fit': 'contain', |
| } |
| }, |
| { |
| selector: 'node[id = "start"], node[id = "end_submit"], node[id = "end_limit"]', |
| style: { 'shape': 'round-rectangle', 'width': 54, 'height': 54, |
| 'background-color': '#94a3b8', 'border-color': '#64748b' } |
| }, |
| { |
| selector: 'node[id = "start"]', |
| style: { 'font-size': '16px' } |
| }, |
| { |
| selector: 'node:selected', |
| style: { 'border-color': '#0f172a', 'border-width': 4 } |
| }, |
| { |
| selector: 'edge', |
| style: { |
| 'width': 'data(width)', |
| 'line-color': 'data(color)', |
| 'target-arrow-color': 'data(color)', |
| 'target-arrow-shape': 'triangle', |
| 'arrow-scale': 1.0, |
| 'curve-style': 'bezier', |
| 'target-label': 'data(label)', |
| 'target-text-offset': 24, |
| 'font-size': '9px', |
| 'font-weight': '700', |
| 'font-family': 'ui-monospace, monospace', |
| 'color': '#1e293b', |
| 'text-background-opacity': 0.92, |
| 'text-background-color': 'white', |
| 'text-background-padding': '2px', |
| 'opacity': 0.78, |
| } |
| }, |
| { |
| selector: 'edge[isSelf = "yes"]', |
| style: { 'curve-style': 'loop', 'loop-direction': '0deg', |
| 'loop-sweep': '70deg' } |
| }, |
| { |
| selector: 'edge:selected', |
| style: { 'opacity': 1, 'font-size': '11px', 'z-index': 999, 'line-color': '#0f172a', |
| 'target-arrow-color': '#0f172a' } |
| }, |
| ], |
| userZoomingEnabled: true, |
| userPanningEnabled: true, |
| boxSelectionEnabled: false, |
| }); |
| cy.fit(cy.elements(), 40); |
| |
| const panel = document.getElementById('detail'); |
| cy.on('tap', 'node', evt => showNodeDetail(panel, evt.target.data('n'))); |
| cy.on('tap', 'edge', evt => showEdgeDetail(panel, evt.target.data('ed'))); |
| cy.on('tap', evt => { |
| if (evt.target === cy) |
| panel.innerHTML = '<div class="detail-placeholder">Click a node or edge for details</div>'; |
| }); |
| cy.on('mouseover', 'edge', evt => evt.target.style({ opacity: 1 })); |
| cy.on('mouseout', 'edge', evt => { if (!evt.target.selected()) evt.target.style({ opacity: 0.78 }); }); |
| </script> |
| </body> |
| </html> |
