Enhance SkillTreeView with Asynchronous Initialization and Node Mapping

This commit refactors the SkillTreeView class to include asynchronous initialization through FutureBuilder. The new version also replaces the integer-based node IDs with string-based IDs, aligning better with the SkillTreeNode model. The code now clears previous graph nodes and edges before adding new ones, preventing duplication. Additionally, the TreeNodeView component is now populated dynamically with data from the SkillTreeNode model, making the tree view more robust and integrated.
This commit is contained in:
hunteraraujo
2023-09-13 17:50:53 -07:00
parent 01b2892775
commit a7bb335752

View File

@@ -1,3 +1,4 @@
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:auto_gpt_flutter_client/views/skill_tree/tree_node_view.dart';
import 'package:flutter/material.dart';
@@ -9,18 +10,35 @@ class SkillTreeView extends StatefulWidget {
const SkillTreeView({Key? key, required this.viewModel}) : super(key: key);
@override
_TreeViewPageState createState() => _TreeViewPageState();
_SkillTreeViewState createState() => _SkillTreeViewState();
}
class _TreeViewPageState extends State<SkillTreeView> {
class _SkillTreeViewState extends State<SkillTreeView> {
Future<void>? initialization;
@override
void initState() {
super.initState();
initialization = widget.viewModel.initializeSkillTree();
}
widget.viewModel.initializeSkillTree();
@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: initialization,
builder: (context, snapshot) {
widget.viewModel.graph.nodes.clear();
widget.viewModel.graph.edges.clear();
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasError) {
return const Text("An error occurred");
}
// Create Node and Edge objects for GraphView
final Map<int, Node> nodeMap = {};
final Map<String, Node> nodeMap = {};
for (var skillTreeNode in widget.viewModel.skillTreeNodes) {
final node = Node.Id(skillTreeNode.id);
widget.viewModel.graph.addNode(node);
@@ -28,14 +46,13 @@ class _TreeViewPageState extends State<SkillTreeView> {
}
for (var skillTreeEdge in widget.viewModel.skillTreeEdges) {
final fromNode = nodeMap[int.parse(skillTreeEdge.from)];
final toNode = nodeMap[int.parse(skillTreeEdge.to)];
widget.viewModel.graph.addEdge(fromNode!, toNode!);
final fromNode = nodeMap[skillTreeEdge.from];
final toNode = nodeMap[skillTreeEdge.to];
if (fromNode != null && toNode != null) {
widget.viewModel.graph.addEdge(fromNode, toNode);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.max,
@@ -43,7 +60,7 @@ class _TreeViewPageState extends State<SkillTreeView> {
Expanded(
child: InteractiveViewer(
constrained: false,
boundaryMargin: EdgeInsets.all(100),
boundaryMargin: const EdgeInsets.all(100),
minScale: 0.01,
maxScale: 5.6,
child: GraphView(
@@ -55,10 +72,17 @@ class _TreeViewPageState extends State<SkillTreeView> {
..strokeWidth = 1
..style = PaintingStyle.stroke,
builder: (Node node) {
int nodeId = node.key?.value as int;
String nodeId = node.key?.value as String;
SkillTreeNode? skillTreeNode =
widget.viewModel.getNodeById(nodeId);
if (skillTreeNode != null) {
return TreeNodeView(
nodeId: nodeId,
selected: nodeId == widget.viewModel.selectedNode?.id);
node: skillTreeNode,
selected:
nodeId == widget.viewModel.selectedNode?.id);
} else {
return const SizedBox(); // Return an empty widget if the node is not found
}
},
),
),
@@ -66,5 +90,7 @@ class _TreeViewPageState extends State<SkillTreeView> {
],
),
);
},
);
}
}