From e7e1e064e379192c96333946c8d824353a407b82 Mon Sep 17 00:00:00 2001
From: "Ian Clarke (aider)" <github@ian.33mail.com>
Date: Sat, 30 Nov 2024 11:23:38 -0500
Subject: [PATCH] refactor: Initialize nodes with first color from palette for
 consistent behavior

---
 hugo-site/static/html/eventual_convergence_viz.html | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/hugo-site/static/html/eventual_convergence_viz.html b/hugo-site/static/html/eventual_convergence_viz.html
index 3c9cfef5..4805f433 100644
--- a/hugo-site/static/html/eventual_convergence_viz.html
+++ b/hugo-site/static/html/eventual_convergence_viz.html
@@ -8,8 +8,8 @@
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script>
       const animationQueue = new Map(); // Track ongoing animations per node
-      let lastColorIndex = -1;
-      const globalColors = []; // Track colors in order of introduction to network
+      let lastColorIndex = 0; // Start at 0 since we're using the first color for initialization
+      const globalColors = [COLOR_PALETTE[0]]; // Initialize with first color
       const MAX_COLORS = 3; // Only show 3 most recent colors per node
       // Palette of 6 visually distinct colors that work well together
       const COLOR_PALETTE = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5"];
@@ -55,8 +55,8 @@ <h1 class="title">Freenet Eventual Convergence Simulation</h1>
       function generateRandomTree(numNodes) {
         const nodes = Array.from({ length: numNodes }, (_, i) => ({
           id: i,
-          color: "#87cefa",
-          receivedColors: ["#87cefa"],
+          color: COLOR_PALETTE[0],
+          receivedColors: [COLOR_PALETTE[0]],
         }));
         const links = [];
 
@@ -134,11 +134,8 @@ <h1 class="title">Freenet Eventual Convergence Simulation</h1>
         .sort(null); // Do not sort, keep original order
 
       function drawPie(nodeGroup, allColors) {
-        // For the initial color and non-global colors, show them all
         let displayColors;
-        if (allColors.length === 1 && allColors[0] === "#87cefa") {
-          displayColors = allColors;
-        } else {
+        // For propagated colors, show only the most recent MAX_COLORS from global tracking
           // For propagated colors, show only the most recent MAX_COLORS from global tracking
           const visibleColors = allColors.filter(color => globalColors.includes(color));
           displayColors = visibleColors.slice(-MAX_COLORS);