feat: allow stop the network

localization/locales/en/translation.json

@@ -485,7 +485,8 @@
     "SearchWorkflows": "Search Workflows",
     "CurrentNodeComponentType": "Component type of this node",
     "NodeLabel": "Label",
-    "InPort": "In Ports"
+    "InPort": "In Ports",
+    "StopWorkflow": "Stop Workflow"
   },
   "Description": "Description",
   "Tags": "Tags",

localization/locales/zh_CN/translation.json

@@ -490,6 +490,7 @@
     "FilteringExcludeClickToRemove": "正筛选不包含本标签的，点击设为不参与筛选\t",
     "CurrentNodeComponentType": "此节点的组件类型",
     "NodeLabel": "节点名",
-    "InPort": "入口"
+    "InPort": "入口",
+    "StopWorkflow": "停止工作流"
   }
 }

src/pages/Workflow/GraphEditor/components/Toolbar.tsx

@@ -5,6 +5,7 @@ import EditOffIcon from '@mui/icons-material/EditOff';
 import HomeIcon from '@mui/icons-material/Home';
 import InfoIcon from '@mui/icons-material/Info';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
 import { IconButton, Toolbar, Tooltip } from '@mui/material';
 import { PageType } from '@services/pages/interface';
@@ -19,10 +20,10 @@ import styled from 'styled-components';
 import type { ITheGraphEditor } from 'the-graph';
 import autoLayout from 'the-graph/the-graph/the-graph-autolayout';
 import { useLocation } from 'wouter';
-import { IWorkflowContext } from '../hooks/useContext';
 import { AddItemDialog } from '../../WorkflowManage/AddItemDialog';
 import { addWorkflowToWiki, useAvailableFilterTags } from '../../WorkflowManage/useWorkflowDataSource';
 import { IWorkflowListItem } from '../../WorkflowManage/WorkflowList';
+import { IWorkflowContext } from '../hooks/useContext';
 import { useRunGraph } from '../hooks/useRunGraph';
 
 const ToolbarContainer = styled(Toolbar)`
@@ -58,7 +59,7 @@ export const GraphTopToolbar = (props: IGraphTopToolbarProps) => {
   const { t } = useTranslation();
   const [, setLocation] = useLocation();
 
-  const runWorkflow = useRunGraph(graph, libraryLoader);
+  const [runGraph, stopGraph, graphIsRunning] = useRunGraph(graph, libraryLoader);
 
   const backToHome = useCallback(() => {
     // don't need to save here, because we already debouncedSave after all operations
@@ -134,11 +135,21 @@ export const GraphTopToolbar = (props: IGraphTopToolbarProps) => {
   return (
     <>
       <ToolbarContainer>
+        {graphIsRunning
+          ? (
+            <Tooltip title={t('Workflow.StopWorkflow')}>
+              <IconButton onClick={stopGraph}>
+                <StopIcon />
+              </IconButton>
+            </Tooltip>
+          )
+          : (
             <Tooltip title={t('Workflow.RunWorkflow')}>
-          <IconButton onClick={runWorkflow}>
+              <IconButton onClick={runGraph}>
                 <PlayArrowIcon />
               </IconButton>
             </Tooltip>
+          )}
         <Tooltip title={t('Workflow.BackToHome')}>
           <IconButton onClick={backToHome}>
             <HomeIcon />

src/pages/Workflow/GraphEditor/hooks/useRunGraph.ts

@@ -1,11 +1,14 @@
 import { Graph as FbpGraph } from 'fbp-graph';
 import { /* Graph as NofloGraph, */ type ComponentLoader, createNetwork } from 'noflo';
 import type { Network } from 'noflo/lib/Network';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export function useRunGraph(fbpGraph: FbpGraph, libraryLoader?: ComponentLoader) {
   const currentNetworkReference = useRef<Network | undefined>();
-  async function runGraph() {
+  const [graphIsRunning, setGraphIsRunning] = useState(false);
+  const runGraph = useCallback(async () => {
+    setGraphIsRunning(true);
+    try {
       /**
        * Similar to noflo-runtime-base's `src/protocol/Network.js`, transform FbpGraph to ~~NofloGraph~~ Network
        */
@@ -24,11 +27,23 @@ export function useRunGraph(fbpGraph: FbpGraph, libraryLoader?: ComponentLoader)
       });
       await nofloNetwork.connect();
       await nofloNetwork.start();
+      nofloNetwork.once('end', () => {
+        setGraphIsRunning(false);
+      })
+    } catch (error) {
+      // TODO: show error on a debugger panel
+      // network.once('process-error', onError);
+      console.error(error);
+      setGraphIsRunning(false);
     }
+  }, [fbpGraph, libraryLoader]);
+  const stopGraph = useCallback(async () => {
+    await currentNetworkReference.current?.stop();
+  }, []);
   useEffect(() => {
     return () => {
       void currentNetworkReference.current?.stop();
     };
   }, [currentNetworkReference]);
-  return runGraph;
+  return [runGraph, stopGraph, graphIsRunning] as const;
 }