From 8226796b8b59a89065e940f8d4e4b0cb77828fee Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 8 Feb 2024 19:56:35 +0100
Subject: [PATCH] chore(docs): cleanup comments

---
 docs/examples/layout/AnimationEdge.vue |  5 +++++
 docs/examples/layout/useRunProcess.js  | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/examples/layout/AnimationEdge.vue b/docs/examples/layout/AnimationEdge.vue
index ea365142..3c15e22e 100644
--- a/docs/examples/layout/AnimationEdge.vue
+++ b/docs/examples/layout/AnimationEdge.vue
@@ -96,6 +96,7 @@ watch(isAnimating, (isAnimating) => {
   const edge = findEdge(props.id)
 
   if (edge) {
+    // we set the `isAnimating` flag, so we can wait until the next node gets executed
     edge.data = {
       ...edge.data,
       isAnimating,
@@ -112,6 +113,7 @@ watch(edgePoint, (point) => {
 
   const nextLength = pathEl.getTotalLength()
 
+  // if length changed, restart animation
   if (currentLength.value !== nextLength) {
     runAnimation()
     return
@@ -135,12 +137,15 @@ async function runAnimation() {
 
   const totalLength = pathEl.getTotalLength()
 
+  // if animation restarted, use last edgePoint value to continue from
   const from = edgePoint.value || 0
 
+  // update initial label position
   labelPosition.value = pathEl.getPointAtLength(from)
 
   isAnimating.value = true
 
+  // update currentLength value, so we can check if the path length changed during animation
   if (currentLength.value !== totalLength) {
     currentLength.value = totalLength
   }
diff --git a/docs/examples/layout/useRunProcess.js b/docs/examples/layout/useRunProcess.js
index 6b463b5a..8524c105 100644
--- a/docs/examples/layout/useRunProcess.js
+++ b/docs/examples/layout/useRunProcess.js
@@ -27,12 +27,15 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
       return
     }
 
+    // save the upcoming task in case it gets cancelled before we even start it
     upcomingTasks.add(node.id)
 
     const incomers = getConnectedEdges(node.id).filter((connection) => connection.target === node.id)
 
+    // wait for edge animations to finish before starting the process
     await Promise.all(incomers.map((incomer) => until(() => !incomer.data.isAnimating)))
 
+    // remove the upcoming task since we are about to start it
     upcomingTasks.clear()
 
     if (!isRunning.value) {
@@ -40,20 +43,23 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
       return
     }
 
+    // mark the node as executed, so it doesn't run again
     executedNodes.add(node.id)
 
     updateNodeData(node.id, { isRunning: true, isFinished: false, hasError: false, isCancelled: false })
 
-    // Simulate an async process with a random timeout between 1 and 3 seconds
+    // simulate an async process with a random timeout between 1-2 seconds
     const delay = Math.floor(Math.random() * 2000) + 1000
+
     return new Promise((resolve) => {
       const timeout = setTimeout(
         async () => {
           const children = graph.value.successors(node.id)
 
-          // Randomly decide whether the node will throw an error
+          // randomly decide whether the node will throw an error
           const willThrowError = Math.random() < 0.15
 
+          // we avoid throwing an error on the starting node
           if (!isStart && willThrowError) {
             updateNodeData(node.id, { isRunning: false, hasError: true })
 
@@ -71,15 +77,17 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
           runningTasks.delete(node.id)
 
           if (children.length > 0) {
-            // Run the process on the children in parallel
+            // run the process on the children in parallel
             await Promise.all(children.map((id) => runNode({ id })))
           }
 
           resolve()
         },
+        // if this is a starting node, we don't want to wait
         isStart ? 0 : delay,
       )
 
+      // save the timeout so we can cancel it if needed
       runningTasks.set(node.id, timeout)
     })
   }
@@ -93,10 +101,10 @@ export function useRunProcess({ dagreGraph, cancelOnError = true }) {
 
     isRunning.value = true
 
-    // Get all starting nodes (nodes with no predecessors)
+    // get all starting nodes (nodes with no predecessors)
     const startingNodes = nodes.filter((node) => graph.value.predecessors(node.id)?.length === 0)
 
-    // Run the process on all starting nodes in parallel
+    // run the process on all starting nodes in parallel
     await Promise.all(startingNodes.map((node) => runNode(node, true)))
 
     clear()