Merge pull request #59 from jvm123/feat-evolution-graph-visualizer

Feature: Visualization script for the evolution tree from a checkpoint

Author: codelion

.github/instructions/sidebar-node-logic.instructions.md

@@ -0,0 +1,12 @@
+---
+applyTo: 'scripts/**/*.js'
+---
+- In this program, a dataset with nodes and edges is visualized in different graphs and lists. These view modes are selectable in tabs.
+- Nodes are parametrized with meta data including program ID, island number, generation nunmber, parent ID (which is used to determine the edge connections), a metric dataset with flexible keys, a code string, a dict with prompts and more. All data except program ID are optional.
+- A sidebar shows detailed node information. Its format is the same across all view modes.
+- The sidebar in this program is designed to show up dynamically when a node is selected in one of the graphs or lists. It appears on hover of the node and hides when the node is not hovered anymore.
+- A single node can be selected to turn it "sticky". When a node is sticky, its information remains visible in the sidebar and the sidebar remains open until the user clicks in the background. Hovering another node will not change the sidebar content if a node is already sticky.
+- The selected node is highlighted with a red border and synchronized across all graphs and lists. I.e., clicking a node in a list will also highlight it in the graphs.
+
+- A select box #highlight-select configures a filter logic that allows to highlight multiple nodes. Nodes are highlighted with a blue shadow in the graphs and lists.
+- A select box #metric-select shows the available metrics (determined dynamically from the dataset), and the selected metric may be used in the graph creation, filter and sorting logic.

.github/workflows/python-lint.yml

@@ -13,5 +13,5 @@ jobs:
       - uses: psf/black@stable
         with:
           options: "--check --verbose"
-          src: "./openevolve ./tests ./examples"
+          src: "./openevolve ./tests ./examples ./scripts"
           use_pyproject: true

Makefile

@@ -33,7 +33,7 @@ install: venv
 # Run Black code formatting
 .PHONY: lint
 lint: venv
-	$(PYTHON) -m black openevolve examples tests
+	$(PYTHON) -m black openevolve examples tests scripts
 
 # Run tests using the virtual environment
 .PHONY: test

README.md

@@ -128,6 +128,20 @@ diff -u checkpoints/checkpoint_10/best_program.py checkpoints/checkpoint_20/best
 # Compare metrics
 cat checkpoints/checkpoint_*/best_program_info.json | grep -A 10 metrics
 ```
+
+### Visualizing the evolution tree
+
+The script in `scripts/visualize.py` allows you to visualize the evolution tree and display it in your webbrowser. The script watches live for the newest checkpoint directory in the examples/ folder structure and updates the graph. Alternatively, you can also provide a specific checkpoint folder with the `--path` parameter.
+
+```bash
+# Install requirements
+pip install -r scripts/requirements.txt
+
+# Start the visualization web server
+python scripts/visualizer.py
+```
+![OpenEvolve Visualizer](openevolve-visualizer.png)
+
 ### Docker
 
 You can also install and execute via Docker:

openevolve-visualizer.png

@@ -0,0 +1 @@
+flask