Double click on a node opens program info in a new page

jvm123 · jvm123 · commit 370bde86b99c · 2025-06-06T08:49:28.000+02:00
diff --git a/scripts/visualizer.py b/scripts/visualizer.py
@@ -26,6 +26,9 @@
             position: absolute;
             text-align: left;
             width: 400px;
+            max-width: 90vw;
+            max-height: 60vh;
+            overflow: auto;
             padding: 10px;
             font: 12px sans-serif;
             background: #fff;
@@ -35,7 +38,14 @@
             box-shadow: 2px 2px 8px #aaa;
             z-index: 10;
         }
-        pre { background: #f0f0f0; padding: 6px; border-radius: 4px; }
+        pre {
+            background: #f0f0f0;
+            padding: 6px;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow: auto;
+            white-space: pre;
+        }
     </style>
 </head>
 <body>
@@ -95,6 +105,12 @@
         hideTooltip(true);
     }
 
+    function openInNewTab(event, d) {
+        const url = `/program/${d.id}`;
+        window.open(url, '_blank');
+        event.stopPropagation(); // Prevent tooltip from closing
+    }
+
     function renderGraph(data) {
         g.selectAll("*").remove();
         const simulation = d3.forceSimulation(data.nodes)
@@ -120,6 +136,7 @@
             .attr("fill", d => d.island !== undefined ? d3.schemeCategory10[d.island % 10] : "#888")
             .on("mouseover", showTooltip)
             .on("click", showTooltipSticky)
+            .on("dblclick", openInNewTab)
             .on("mouseout", hideTooltip)
             .call(d3.drag()
                 .on("start", dragstarted)
@@ -164,7 +181,7 @@
     });
 
     function fetchAndRender() {
-        fetch('/data')
+        fetch('/api/data')
             .then(resp => resp.json())
             .then(data => {
                 const dataStr = JSON.stringify(data);
@@ -189,6 +206,33 @@
 </body>
 </html>
 """
+HTML_TEMPLATE_PROGRAM_PAGE = """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Program {{ program_data.id }}</title>
+        <style>
+            body { font-family: Arial, sans-serif; padding: 20px; }
+            pre { background: #f0f0f0; padding: 10px; border-radius: 5px; }
+        </style>
+    </head>
+    <body>
+        <h1>Program ID: {{ program_data.id }}</h1>
+        <h2>Island: {{ program_data.island }}</h2>
+        <h3>Generation: {{ program_data.generation }}</h3>
+        <h3>Parent ID: {{ program_data.parent_id or 'None' }}</h3>
+        <h3>Metrics:</h3>
+        <ul>
+            {% for key, value in program_data.metrics.items() %}
+                <li><strong>{{ key }}:</strong> {{ value }}</li>
+            {% endfor %}
+        </ul>
+        <h3>Code:</h3>
+        <pre>{{ program_data.code }}</pre>
+    </body>
+    </html>
+"""
 
 logger = logging.getLogger("openevolve.visualizer")
 
@@ -242,19 +286,41 @@ def load_evolution_data(checkpoint_folder):
 def index():
     return render_template_string(HTML_TEMPLATE)
 
-@app.route('/data')
+checkpoint_dir = None  # Global variable to store the checkpoint directory
+@app.route('/api/data')
 def data():
     base_folder = os.environ.get('EVOLVE_OUTPUT', 'examples/')
     checkpoint = find_latest_checkpoint(base_folder)
     if not checkpoint:
         logger.info(f"No checkpoints found in {base_folder}")
         return jsonify({"nodes": [], "edges": []})
 
+    # Memorize checkpoint directory for usage in other routes
+    global checkpoint_dir
+    checkpoint_dir = checkpoint
+
     logger.info(f"Loading data from checkpoint: {checkpoint}")
     data = load_evolution_data(checkpoint)
     logger.debug(f"Data: {data}")
     return jsonify(data)
 
+
+@app.route("/program/<program_id>")
+def program_page(program_id):
+    global checkpoint_dir
+    if checkpoint_dir is None:
+        return "No checkpoint loaded", 500
+
+    program_path = os.path.join(checkpoint_dir, f"programs/{program_id}.json")
+    if not os.path.exists(program_path):
+        return "Program not found", 404
+
+    with open(program_path) as f:
+        program_data = json.load(f)
+
+    return render_template_string(HTML_TEMPLATE_PROGRAM_PAGE, program_data=program_data)
+
+
 if __name__ == '__main__':
     import argparse
 
