From 876fe5a590a03a4ddaa4e858f110229b1b4251b1 Mon Sep 17 00:00:00 2001
From: hunteraraujo <hunter_araujo@msn.com>
Date: Wed, 13 Sep 2023 17:43:32 -0700
Subject: [PATCH] Refactor TreeNodeView to Use Stateful Widget and Add
 Interactivity

This commit updates the TreeNodeView class from a stateless widget to a stateful widget to handle hover interactions. The new version also replaces the old simple text-based representation with a more interactive and visually appealing design that includes icons and hover effects. The SkillTreeNode model is now used to populate the node information, making the TreeNodeView more dynamic and integrated with the rest of the application.
---
 .../lib/views/skill_tree/tree_node_view.dart  | 61 ++++++++++++++-----
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/frontend/lib/views/skill_tree/tree_node_view.dart b/frontend/lib/views/skill_tree/tree_node_view.dart
index 9f32582d5..c098ca8eb 100644
--- a/frontend/lib/views/skill_tree/tree_node_view.dart
+++ b/frontend/lib/views/skill_tree/tree_node_view.dart
@@ -1,31 +1,64 @@
+import 'package:auto_gpt_flutter_client/models/skill_tree/skill_tree_node.dart';
 import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-class TreeNodeView extends StatelessWidget {
-  final int nodeId;
+class TreeNodeView extends StatefulWidget {
+  final SkillTreeNode node;
   final bool selected;
 
-  TreeNodeView({required this.nodeId, this.selected = false});
+  TreeNodeView({required this.node, this.selected = false});
+
+  @override
+  _TreeNodeViewState createState() => _TreeNodeViewState();
+}
+
+class _TreeNodeViewState extends State<TreeNodeView> {
+  bool _isHovering = false;
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return GestureDetector(
       onTap: () {
-        print('Node $nodeId clicked');
+        print('Node ${widget.node.id} clicked');
         Provider.of<SkillTreeViewModel>(context, listen: false)
-            .toggleNodeSelection(nodeId);
+            .toggleNodeSelection(widget.node.id);
       },
-      child: Container(
-        padding: EdgeInsets.all(16),
-        decoration: BoxDecoration(
-          color: selected ? Colors.red : Colors.white,
-          borderRadius: BorderRadius.circular(4),
-          boxShadow: [
-            BoxShadow(color: Colors.red, spreadRadius: 1),
+      child: MouseRegion(
+        onEnter: (_) => setState(() => _isHovering = true),
+        onExit: (_) => setState(() => _isHovering = false),
+        child: Column(
+          mainAxisSize: MainAxisSize.min, // Use minimum space
+          children: [
+            Container(
+              width: 30,
+              height: 30,
+              decoration: BoxDecoration(
+                color: Colors.grey[300], // Light grey
+                borderRadius:
+                    BorderRadius.circular(8), // Slight rounded corners
+              ),
+              child: Center(
+                child: Icon(
+                  Icons.star,
+                  color: widget.selected
+                      ? Colors.red
+                      : (_isHovering
+                          ? Colors.red
+                          : Colors
+                              .black), // Black when not hovering or selected
+                ),
+              ),
+            ),
+            // Adding the node.data.name right beneath the rectangle
+            SizedBox(height: 4), // You can adjust the spacing as needed
+            Text(
+              widget.node.label, // Assuming node.data.name holds the name
+              style: TextStyle(
+                  fontSize: 12), // You can adjust the styling as needed
+            ),
           ],
         ),
-        child: Text('Node $nodeId'),
       ),
     );
   }