filtering finished, with zooming out and in

lib/collapsableEmailsWeb.dart

@@ -205,6 +205,22 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     }
   }
 
+  void _goToChildrenFiltering(
+      int indexThread, int index, AugmentTree node) async {
+    final target = node;
+    if (target.children.isNotEmpty) {
+      setState(() {
+        currentZoomTree[indexThread] = target;
+        _isFilteringActive = false;
+      });
+      for (var child in target.children) {
+        print(child.data);
+      }
+    } else {
+      print("This child has no further children.");
+    }
+  }
+
   void _goToParent(int indexThread) async {
     if (currentZoomTree[indexThread].parent != null) {
       setState(() {
@@ -215,6 +231,16 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     }
   }
 
+  void _goToParentFiltering(int indexThread, AugmentTree node) async {
+    if (node.parent != null) {
+      setState(() {
+        currentZoomTree[indexThread] = node.parent!;
+      });
+    } else {
+      print("Already at root.");
+    }
+  }
+
   void _serializableData(String threadID) async {
     emailsInThread = await ApiService().threadsInSerializable(threadID);
     print("done thread serializable");
@@ -229,9 +255,8 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
     if (!_isLoaded) {
       return const Center(child: CircularProgressIndicator()); // loading screen
     }
-    // final List<AugmentTree> nodesToDisplay;
 
-    final AugmentTree
+    AugmentTree
         currentZoomNodeForThisEmail = //each index is an email in the thread
         currentZoomTree[indexThread];
     print(currentZoomNodeForThisEmail.data);
@@ -250,6 +275,7 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
           itemCount: queryResults.length,
           itemBuilder: (context, index) {
             AugmentTree childNode = queryResults[index];
+            bool canZoomIn = childNode.children.isNotEmpty;
             return Padding(
               padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
               child: Material(
@@ -266,11 +292,19 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
                         spacing: 4.0,
                         children: [
                           OutlinedButton(
-                            onPressed: null,
+                            onPressed: () => {
+                              setState(() {
+                                _goToParentFiltering(indexThread, childNode);
+                                _isFilteringActive = false;
+                              })
+                            },
                             child: Icon(Icons.north_west_sharp),
                           ),
                           OutlinedButton(
-                            onPressed: null,
+                            onPressed: canZoomIn
+                                ? () => _goToChildrenFiltering(
+                                    indexThread, index, childNode)
+                                : null,
                             child: Icon(Icons.south_east_sharp),
                           ),
                         ],
@@ -281,8 +315,8 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
                           padding: const EdgeInsets.fromLTRB(0, 10, 5, 0),
                           child: Text(
                             childNode.numbering,
-                            style:
+                            style: TextStyle(
-                                TextStyle(color: Color(Colors.purple[400]!.value)),
+                                color: Color(Colors.purple[400]!.value)),
                           ),
                         ),
                       Expanded(
@@ -297,8 +331,8 @@ class _CollapsableEmailsState extends State<CollapsableEmails> {
                           padding: const EdgeInsets.fromLTRB(5, 10, 5, 0),
                           child: Text(
                             childNode.numbering,
-                            style:
+                            style: TextStyle(
-                                TextStyle(color: Color(Colors.purple[400]!.value)),
+                                color: Color(Colors.purple[400]!.value)),
                           ),
                         ),
                     ],