updating the traversal

Author: GaelGil

src/css/Graphs.css

@@ -29,4 +29,5 @@
 
 .expanded {
   background-color: oklch(85.5% 0.138 181.071) !important;
+  animation: changeColor 2s linear infinite;
 }

src/services/utils.ts

@@ -4,48 +4,40 @@ const SECONDARY_COLOR: string = "red";
 
 export const colorNodes = (path: any[], expanded: any) => {
   // Function to color nodes
-  // for each node in the path
-  path.forEach((node) => {
-    // select the node from the matrix
-    const [row, col] = node;
-    // select the node from html matching the row and col
-    const nodeElement = document.querySelector(
+
+  // get node html element by row and col
+  const getNodeElement = ([row, col]: any) =>
+    document.querySelector(
       `.matrix-row-${row} .col-index-${col}`
-    );
-    // if the node exists
-    if (nodeElement) {
-      // if the node is not an objective or start
-      if (
-        !nodeElement.classList.contains("objective") &&
-        !nodeElement.classList.contains("start")
-      ) {
-        // add the path class
-        nodeElement.classList.add("path");
-      }
+    ) as HTMLElement | null;
+
+  // Color path nodes with delay
+  path.forEach((node: any) => {
+    const el = getNodeElement(node);
+    if (
+      el &&
+      !el.classList.contains("objective") &&
+      !el.classList.contains("start")
+    ) {
+      el.classList.add("path");
+    }
+  });
+
+  // Color expanded nodes with delay
+  expanded?.forEach((node: any, index: number) => {
+    const el = getNodeElement(node);
+    if (
+      el &&
+      !el.classList.contains("path") &&
+      !el.classList.contains("objective") &&
+      !el.classList.contains("start") &&
+      !el.classList.contains("obstacle")
+    ) {
+      setTimeout(() => {
+        el.classList.add("expanded");
+      }, index * 10);
     }
   });
-  // if expanded node
-  if (expanded) {
-    // for each expanded node
-    expanded.forEach((node: any) => {
-      // select the node from the matrix
-      const [row, col] = node;
-      // select the node from html matching the row and col
-      const nodeElement = document.querySelector(
-        `.matrix-row-${row} .col-index-${col}`
-      );
-      // if the node exists
-      if (nodeElement) {
-        if (
-          !nodeElement.classList.contains("path") &&
-          !nodeElement.classList.contains("objective") &&
-          !nodeElement.classList.contains("start")
-        ) {
-          nodeElement.classList.add("expanded");
-        }
-      }
-    });
-  }
 };
 
 export const startSorting = (animations: any[]) => {
@@ -86,11 +78,11 @@ export const startSorting = (animations: any[]) => {
 };
 
 export const clearPath = () => {
-  const pathNodes = document.querySelectorAll(".path");
+  const pathNodes = document.querySelectorAll(".matrix-cell.path");
   pathNodes.forEach((node) => {
     node.classList.remove("path");
   });
-  const expandedNodes = document.querySelectorAll(".expanded");
+  const expandedNodes = document.querySelectorAll(".matrix-cell.expanded");
   expandedNodes.forEach((node) => {
     node.classList.remove("expanded");
   });