extract out graph run as separate component

Author: jsajal

src/components/molecules/flow/graph/GraphRun.js

@@ -0,0 +1,45 @@
+import useCollectionStore from 'stores/CollectionStore';
+import GraphLogger, { LogLevel } from './GraphLogger';
+import Graph from './Graph';
+import { useTabStore } from 'stores/TabStore';
+import { cloneDeep } from 'lodash';
+
+export const graphRun = async (tab, nodes, edges, collectionPath, selectedEnv) => {
+  useTabStore.getState().updateFlowTestRunStatus(tab.id, true);
+
+  //runnableEdges(true);
+  const startTime = Date.now();
+  const logger = new GraphLogger();
+  try {
+    let envVariables = {};
+
+    //const activeCollection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+    //const activeEnv = activeCollection?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+    if (selectedEnv) {
+      envVariables = cloneDeep(selectedEnv.variables);
+    }
+
+    // ============= flow =====================
+    const g = new Graph(
+      nodes, //cloneDeep(reactFlowInstance.getNodes()),
+      edges, //cloneDeep(reactFlowInstance.getEdges()),
+      startTime,
+      envVariables,
+      logger,
+      'main',
+      collectionPath,
+    );
+    const result = await g.run();
+    const time = Date.now() - startTime;
+    logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+    useTabStore.getState().updateFlowTestRunStatus(tab.id, false);
+    //await onGraphComplete(result.status, time, logger.get());
+  } catch (error) {
+    const time = Date.now() - startTime;
+    logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+    useTabStore.getState().updateFlowTestRunStatus(tab.id, false);
+    //await onGraphComplete('Failed', time, logger.get());
+    //toast.error(`Internal error running graph`);
+    //runnableEdges(false);
+  }
+};

src/components/molecules/flow/index.js

@@ -28,6 +28,7 @@ import { BUTTON_INTENT_TYPES, BUTTON_TYPES } from 'constants/Common';
 import GraphLogger, { LogLevel } from './graph/GraphLogger';
 import Mousetrap from 'mousetrap';
 import { uploadGraphRunLogs } from 'service/collection';
+import { graphRun } from './graph/GraphRun';
 
 const StartNode = () => (
   <FlowNode title='Start' handleLeft={false} handleRight={true} handleRightData={{ type: 'source' }}></FlowNode>
@@ -112,6 +113,18 @@ const Flow = ({ tab, collectionId }) => {
     [],
   );
 
+  useMemo(() => {
+    if (reactFlowInstance) {
+      const updatedEdges = reactFlowInstance.getEdges().map((edge) => {
+        return {
+          ...edge,
+          animated: tab.running,
+        };
+      });
+      setEdges(updatedEdges);
+    }
+  }, [tab.running]);
+
   const runnableEdges = (runnable) => {
     const updatedEdges = reactFlowInstance.getEdges().map((edge) => {
       return {
@@ -251,43 +264,51 @@ const Flow = ({ tab, collectionId }) => {
           classes={'absolute bottom-4 right-20 z-[2000] text-xl'}
           btnType={BUTTON_TYPES.primary}
           isDisabled={false}
-          onClickHandle={async () => {
-            runnableEdges(true);
-            const startTime = Date.now();
-            const logger = new GraphLogger();
-            try {
-              let envVariables = {};
-
-              const activeCollection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
-              const activeEnv = activeCollection?.environments.find(
-                (e) => e.name === useTabStore.getState().selectedEnv,
-              );
-              if (activeEnv) {
-                envVariables = cloneDeep(activeEnv.variables);
-              }
-
-              // ============= flow =====================
-              const g = new Graph(
-                cloneDeep(reactFlowInstance.getNodes()),
-                cloneDeep(reactFlowInstance.getEdges()),
-                startTime,
-                envVariables,
-                logger,
-                'main',
-                activeCollection.pathname,
-              );
-              const result = await g.run();
-              const time = Date.now() - startTime;
-              logger.add(LogLevel.INFO, `Total time: ${time} ms`);
-              await onGraphComplete(result.status, time, logger.get());
-            } catch (error) {
-              const time = Date.now() - startTime;
-              logger.add(LogLevel.INFO, `Total time: ${time} ms`);
-              await onGraphComplete('Failed', time, logger.get());
-              toast.error(`Internal error running graph`);
-              runnableEdges(false);
-            }
+          onClickHandle={() => {
+            const activeCollection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+            const activeEnv = activeCollection?.environments.find((e) => e.name === useTabStore.getState().selectedEnv);
+            const nodes = cloneDeep(reactFlowInstance.getNodes());
+            const edges = cloneDeep(reactFlowInstance.getEdges());
+
+            graphRun(tab, nodes, edges, activeCollection?.pathname, activeEnv);
           }}
+          // onClickHandle={async () => {
+          //   runnableEdges(true);
+          //   const startTime = Date.now();
+          //   const logger = new GraphLogger();
+          //   try {
+          //     let envVariables = {};
+
+          //     const activeCollection = useCollectionStore.getState().collections.find((c) => c.id === collectionId);
+          //     const activeEnv = activeCollection?.environments.find(
+          //       (e) => e.name === useTabStore.getState().selectedEnv,
+          //     );
+          //     if (activeEnv) {
+          //       envVariables = cloneDeep(activeEnv.variables);
+          //     }
+
+          //     // ============= flow =====================
+          //     const g = new Graph(
+          //       cloneDeep(reactFlowInstance.getNodes()),
+          //       cloneDeep(reactFlowInstance.getEdges()),
+          //       startTime,
+          //       envVariables,
+          //       logger,
+          //       'main',
+          //       activeCollection.pathname,
+          //     );
+          //     const result = await g.run();
+          //     const time = Date.now() - startTime;
+          //     logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+          //     await onGraphComplete(result.status, time, logger.get());
+          //   } catch (error) {
+          //     const time = Date.now() - startTime;
+          //     logger.add(LogLevel.INFO, `Total time: ${time} ms`);
+          //     await onGraphComplete('Failed', time, logger.get());
+          //     toast.error(`Internal error running graph`);
+          //     runnableEdges(false);
+          //   }
+          // }}
           fullWidth={false}
         >
           Run

src/stores/TabStore.js

@@ -27,6 +27,7 @@ export const useTabStore = create((set, get) => ({
       name: flowtest.name,
       pathname: flowtest.pathname,
       flowData: flowtest.flowData,
+      running: false,
       run: {},
     };
 
@@ -113,6 +114,16 @@ export const useTabStore = create((set, get) => ({
       }),
     );
   },
+  updateFlowTestRunStatus: (tabId, running) => {
+    set(
+      produce((state) => {
+        const existingTab = state.tabs.find((t) => t.id === tabId);
+        if (existingTab) {
+          existingTab.running = running;
+        }
+      }),
+    );
+  },
   addEnvTab: (env, collectionId) => {
     const existingTab = get().tabs.find(
       (t) =>