📝 (NodeStatus): Remove unused import and hook from NodeStatus component

♻️ (get-class-from-build-status): Remove console.log statement for currentNodeId and validationStatus.id
✨ (AstraDB): Increase size of AstraDB icon and update fill color based on dark mode
🔧 (index.tsx): Add dark mode support to AstraDBIcon component
♻️ (flowStore): Add method clearEdgesRunningByNodes to reset edges animation state
♻️ (flowStore): Add currentBuildingNodeId property and setCurrentBuildingNodeId method to track currently building nodes
♻️ (flowStore): Refactor updateEdgesRunningByNodes method to use edge data source handle id for comparison
🔧 (buildUtils): Add isStringArray utility function to check if value is an array of strings
♻️ (buildUtils): Update buildFlowVertices function to use new setCurrentBuildingNodeId and clearEdgesRunningByNodes methods
🔧 (utils): Add isStringArray utility function to check if value is an array of strings

src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx

@@ -20,11 +20,9 @@ import { VertexBuildTypeAPI } from "@/types/api";
 import { NodeDataType } from "@/types/flow";
 import { findLastNode } from "@/utils/reactflowUtils";
 import { classNames } from "@/utils/utils";
-import { Play } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import IconComponent from "../../../../components/genericIconComponent";
-import { useBuildStatus } from "../../hooks/use-get-build-status";
 
 export default function NodeStatus({
   nodeId,

src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts

@@ -9,7 +9,6 @@ export const getSpecificClassFromBuildStatus = (
 ): string => {
   let isInvalid = validationStatus && !validationStatus.valid;
   const currentNodeBuilding = currentNodeId === validationStatus?.id;
-  console.log(currentNodeId, validationStatus?.id);
 
   if (isInvalid || buildStatus === BuildStatus.ERROR) {
     return "border-destructive border-[1.5px]";

src/frontend/src/icons/AstraDB/AstraDB.jsx

@@ -1,16 +1,19 @@
 const AstraSVG = (props) => (
   <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
+    {...props}
+    width="167"
+    height="68"
+    viewBox="0 0 167 68"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}
   >
-    <rect width="100%" height="100%" rx="4" fill="backgroundColor" />
     <path
-      d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z"
-      fill="currentColor"
+      d="M60.2338 0.25H0.000244141V67.75H60.2338L75.365 56.0752V11.9248L60.2338 0.25ZM11.6732 11.9248H63.692V56.0874H11.6732V11.9248Z"
+      fill={props.isDark ? "#ffffff" : "#0A0A0A"}
+    />
+    <path
+      d="M162.038 12.415V1H106.964L92.0097 12.415V28.088L106.964 39.503H154.962V55.585H94.9883V67H151.546L166.5 55.585V39.503L151.546 28.088H103.547V12.415H162.038Z"
+      fill={props.isDark ? "#ffffff" : "#0A0A0A"}
     />
   </svg>
 );

src/frontend/src/icons/AstraDB/index.tsx

@@ -1,9 +1,11 @@
+import { useDarkStore } from "@/stores/darkStore";
 import React, { forwardRef } from "react";
 import AstraSVG from "./AstraDB";
 
 export const AstraDBIcon = forwardRef<
   SVGSVGElement,
   React.PropsWithChildren<{}>
 >((props, ref) => {
-  return <AstraSVG ref={ref} {...props} />;
+  const isDark = useDarkStore((state) => state.dark);
+  return <AstraSVG ref={ref} isDark={isDark} {...props} />;
 });

src/frontend/src/stores/flowStore.ts

@@ -556,7 +556,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         get().updateBuildStatus(ids, BuildStatus.ERROR);
         throw new Error("Invalid components");
       }
-      get().updateEdgesRunningByNodes(nodes, true);
+      // get().updateEdgesRunningByNodes(nodes, true);
     }
     function handleBuildUpdate(
       vertexBuildData: VertexBuildTypeAPI,
@@ -722,14 +722,27 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   updateEdgesRunningByNodes: (ids: string[], running: boolean) => {
     const edges = get().edges;
     const newEdges = edges.map((edge) => {
-      if (ids.includes(edge.source) && ids.includes(edge.target)) {
+      if (ids.includes(edge.data.sourceHandle.id)) {
         edge.animated = running;
         edge.className = running ? "running" : "";
       }
       return edge;
     });
     set({ edges: newEdges });
   },
+  clearEdgesRunningByNodes: async (): Promise<void> => {
+    return new Promise<void>((resolve) => {
+      const edges = get().edges;
+      const newEdges = edges.map((edge) => {
+        edge.animated = false;
+        edge.className = "";
+        return edge;
+      });
+      set({ edges: newEdges });
+      resolve();
+    });
+  },
+
   updateVerticesBuild: (
     vertices: {
       verticesIds: string[];
@@ -821,6 +834,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   setFilterType: (filterType) => {
     set({ filterType });
   },
+  currentBuildingNodeId: undefined,
+  setCurrentBuildingNodeId: (nodeIds) => {
+    set({ currentBuildingNodeId: nodeIds });
+  },
 }));
 
 export default useFlowStore;

src/frontend/src/types/zustand/flow/index.ts

@@ -231,4 +231,7 @@ export type FlowStoreType = {
   stopBuilding: () => void;
   buildController: AbortController;
   setBuildController: (controller: AbortController) => void;
+  currentBuildingNodeId: string[] | undefined;
+  setCurrentBuildingNodeId: (nodeIds: string[] | undefined) => void;
+  clearEdgesRunningByNodes: () => void;
 };

src/frontend/src/utils/buildUtils.ts

@@ -12,7 +12,7 @@ import useFlowStore from "../stores/flowStore";
 import { VertexBuildTypeAPI } from "../types/api";
 import { isErrorLogType } from "../types/utils/typeCheckingUtils";
 import { VertexLayerElementType } from "../types/zustand/flow";
-import { tryParseJson } from "./utils";
+import { isStringArray, tryParseJson } from "./utils";
 
 type BuildVerticesParams = {
   setLockChat?: (lock: boolean) => void;
@@ -200,6 +200,7 @@ export async function buildFlowVertices({
         onBuildStart(ids.map((id) => ({ id: id, reference: id })));
       ids.forEach((id) => verticesStartTimeMs.set(id, Date.now()));
     };
+
     switch (type) {
       case "vertices_sorted": {
         const verticesToRun = data.to_run;
@@ -273,7 +274,20 @@ export async function buildFlowVertices({
             buildResults.push(true);
           }
         }
+        useFlowStore.getState().clearEdgesRunningByNodes();
+
         if (buildData.next_vertices_ids) {
+          if (isStringArray(buildData.next_vertices_ids)) {
+            useFlowStore
+              .getState()
+              .setCurrentBuildingNodeId(buildData?.next_vertices_ids ?? []);
+            useFlowStore
+              .getState()
+              .updateEdgesRunningByNodes(
+                buildData?.next_vertices_ids ?? [],
+                true,
+              );
+          }
           onStartVertices(buildData.next_vertices_ids);
         }
         return true;

src/frontend/src/utils/utils.ts

@@ -664,3 +664,9 @@ export const formatPlaceholderName = (name) => {
 
   return `Select ${prefix} ${formattedName}`;
 };
+
+export const isStringArray = (value: unknown): value is string[] => {
+  return (
+    Array.isArray(value) && value.every((item) => typeof item === "string")
+  );
+};