From cbee9d6970fa72977336e4507f41cb850ba76ef8 Mon Sep 17 00:00:00 2001
From: Freax <limyoonaxi@gmail.com>
Date: Tue, 15 Apr 2025 15:16:39 -0400
Subject: [PATCH 1/2] del node value, add color label

---
 .../components/LATSVisual.tsx                 |  6 +--
 .../components/SimpleSearchVisual.tsx         | 44 +++++++++++--------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/visual-tree-search-app/components/LATSVisual.tsx b/visual-tree-search-app/components/LATSVisual.tsx
index 7c43018..060e0b1 100644
--- a/visual-tree-search-app/components/LATSVisual.tsx
+++ b/visual-tree-search-app/components/LATSVisual.tsx
@@ -367,15 +367,15 @@ const LATSVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) => {
       .attr("font-weight", "500")
       .attr("fill", d => {
         if (d.data.isSimulated) {
-          return theme === 'dark' ? "#FDBA74" : "#C2410C"; // Orange for simulated node
+          return theme === 'dark' ? "#FDBA74" : "#C2410C";
         }
         
         if (d.data.id === simulationStartNodeId) {
-          return theme === 'dark' ? "#A7F3D0" : "#047857"; // Green for simulation start
+          return theme === 'dark' ? "#A7F3D0" : "#047857";
         }
         
         if (d.data.id === selectedNodeId) {
-          return theme === 'dark' ? "#93C5FD" : "#1D4ED8"; // Blue for selected node
+          return theme === 'dark' ? "#93C5FD" : "#1D4ED8";
         }
         
         return theme === 'dark' ? "#FFFFFF" : "#111827";
diff --git a/visual-tree-search-app/components/SimpleSearchVisual.tsx b/visual-tree-search-app/components/SimpleSearchVisual.tsx
index fb39821..49669f3 100644
--- a/visual-tree-search-app/components/SimpleSearchVisual.tsx
+++ b/visual-tree-search-app/components/SimpleSearchVisual.tsx
@@ -216,10 +216,18 @@ const SimpleSearchVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) =>
         // Action node (default)
         return theme === 'dark' ? "#4B5563" : "#E5E7EB";
       })
-      .attr("stroke", d => d.data.id === selectedNodeId
-        ? theme === 'dark' ? "#93C5FD" : "#2563EB"
-        : theme === 'dark' ? "#374151" : "#D1D5DB")
-      .attr("stroke-width", d => d.data.id === selectedNodeId ? 3 : 2);
+      .attr("stroke", d => {
+        if (d.data.id === selectedNodeId) {
+          return theme === 'dark' ? "#93C5FD" : "#2563EB";
+        }
+        return theme === 'dark' ? "#374151" : "#D1D5DB";
+      })
+      .attr("stroke-width", d => {
+        if (d.data.id === selectedNodeId) {
+          return 3;
+        }
+        return 2;
+      });
 
     // Add node labels with tooltips
     nodes.append("text")
@@ -241,25 +249,11 @@ const SimpleSearchVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) =>
       .attr("font-weight", "500")
       .attr("fill", d => {
         if (d.data.id === selectedNodeId) {
-          return "#ff5722"; // Orange for selected node
+          return theme === 'dark' ? "#93C5FD" : "#1D4ED8";
         }
         return theme === 'dark' ? "#FFFFFF" : "#111827";
       });
 
-    // Add reward values near nodes
-    nodes.append("text")
-      .attr("dy", "1.5em")
-      .attr("x", d => d.children ? -18 : 18)
-      .attr("text-anchor", d => d.children ? "end" : "start")
-      .text(d => {
-        if (typeof d.data.reward === 'number') {
-          return `R: ${d.data.reward.toFixed(2)}`;
-        }
-        return "";
-      })
-      .attr("font-size", "12px")
-      .attr("fill", theme === 'dark' ? "#E5E7EB" : "#4B5563");
-
     // Add tooltip interactions
     nodes
       .on("mouseover", function(event, d) {
@@ -309,6 +303,18 @@ const SimpleSearchVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) =>
           </svg>
           Tree Visualization
         </h2>
+        
+        {/* Legend */}
+        <div className="mt-2 flex flex-wrap gap-2 text-xs">
+          <div className="flex items-center">
+            <span className="w-3 h-3 rounded-full inline-block mr-1 bg-blue-500 dark:bg-blue-600"></span>
+            <span className="text-gray-700 dark:text-gray-300">Selected</span>
+          </div>
+          <div className="flex items-center">
+            <span className="w-3 h-3 rounded-full inline-block mr-1 bg-gray-500 dark:bg-gray-600"></span>
+            <span className="text-gray-700 dark:text-gray-300">Root</span>
+          </div>
+        </div>
       </div>
       <div 
         ref={containerRef} 

From b10a737c685b0164a9888cfe9f4b5f449e1591c2 Mon Sep 17 00:00:00 2001
From: Freax <limyoonaxi@gmail.com>
Date: Tue, 15 Apr 2025 15:19:42 -0400
Subject: [PATCH 2/2] del LATS node reward

---
 visual-tree-search-app/components/LATSVisual.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/visual-tree-search-app/components/LATSVisual.tsx b/visual-tree-search-app/components/LATSVisual.tsx
index 060e0b1..40538a9 100644
--- a/visual-tree-search-app/components/LATSVisual.tsx
+++ b/visual-tree-search-app/components/LATSVisual.tsx
@@ -381,20 +381,6 @@ const LATSVisual: React.FC<SimpleSearchVisualProps> = ({ messages }) => {
         return theme === 'dark' ? "#FFFFFF" : "#111827";
       });
 
-    // Add reward values near nodes
-    nodes.append("text")
-      .attr("dy", "1.5em")
-      .attr("x", d => d.children ? -18 : 18)
-      .attr("text-anchor", d => d.children ? "end" : "start")
-      .text(d => {
-        if (typeof d.data.reward === 'number') {
-          return `R: ${d.data.reward.toFixed(2)}`;
-        }
-        return "";
-      })
-      .attr("font-size", "12px")
-      .attr("fill", theme === 'dark' ? "#E5E7EB" : "#4B5563");
-
     // Add tooltip interactions
     nodes
       .on("mouseover", function(event, d) {