feat: basic runner inplementation

localization/locales/en/translation.json

@@ -457,6 +457,7 @@
   },
   "Workflow": {
     "Title": "Workflow",
+    "Use": "Use",
     "SearchComponents": "Search Components",
     "AddNewWorkflow": "Add new workflow",
     "AddNewWorkflowDescription": "Create a new automated workflow and save it to the selected workspace wiki to backup.",
@@ -480,11 +481,13 @@
     "AutoLayout": "Auto Layout",
     "NotFilteringClickToInclude": "Not Filtering, Click To Include",
     "FilteringIncludeClickToExclude": "Filtering Include, Click To Exclude",
-    "FilteringExcludeClickToRemove": "Filtering Exclude, Click To Remove Filtering"
+    "FilteringExcludeClickToRemove": "Filtering Exclude, Click To Remove Filtering",
+    "SearchWorkflows": "Search Workflows"
   },
   "Description": "Description",
   "Tags": "Tags",
   "Title": "Title",
   "Delete": "Delete",
+  "Edit": "Edit",
   "Open": "Open"
 }

localization/locales/zh_CN/translation.json

@@ -454,6 +454,7 @@
   "Description": "描述",
   "Tags": "标签",
   "Open": "打开",
+  "Edit": "编辑",
   "LanguageModel": {
     "ModelNotExist": "找不到模型",
     "ModelNotExistDescription": "尝试使用你给的这个路径加载模型，但在这个位置其实没有所需要的模型",
@@ -462,6 +463,8 @@
   },
   "Workflow": {
     "Title": "工作流",
+    "Use": "使用",
+    "SearchWorkflows": "搜索工作流",
     "SearchComponents": "搜索可用组件",
     "AddNewWorkflow": "添加新的工作流",
     "AddNewWorkflowDescription": "创建新的自动化工作流，并保存到所选的工作区Wiki里备份。",

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

@@ -12,6 +12,8 @@ import { PageType } from '@services/pages/interface';
 import { WindowNames } from '@services/windows/WindowProperties';
 import { useWorkspacesListObservable } from '@services/workspaces/hooks';
 import type { Graph } from 'fbp-graph';
+import { klayNoflo } from 'klayjs-noflo/klay-noflo';
+import type { ComponentLoader } from 'noflo';
 import React, { Dispatch, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -22,7 +24,7 @@ import { IWorkflowContext } from '../../useContext';
 import { AddItemDialog } from '../../WorkflowManage/AddItemDialog';
 import { addWorkflowToWiki, useAvailableFilterTags } from '../../WorkflowManage/useWorkflowDataSource';
 import { IWorkflowListItem } from '../../WorkflowManage/WorkflowList';
-import { klayNoflo } from 'klayjs-noflo/klay-noflo';
+import { useRunGraph } from '../useRunGraph';
 import { searchBarWidth } from './styleConstant';
 
 const ToolbarContainer = styled(Toolbar)`
@@ -48,18 +50,17 @@ const ToolbarContainer = styled(Toolbar)`
 interface IGraphTopToolbarProps {
   editorReference: MutableRefObject<ITheGraphEditor | undefined>;
   graph: Graph;
+  libraryLoader?: ComponentLoader;
   readonly: boolean;
   setReadonly: Dispatch<SetStateAction<boolean>>;
   workflowContext: IWorkflowContext;
 }
 export const GraphTopToolbar = (props: IGraphTopToolbarProps) => {
-  const { editorReference, readonly, setReadonly, workflowContext, graph } = props;
+  const { editorReference, readonly, setReadonly, libraryLoader, workflowContext, graph } = props;
   const { t } = useTranslation();
   const [, setLocation] = useLocation();
 
-  const runWorkflow = useCallback(() => {
-    console.log('Running workflow...');
-  }, []);
+  const runWorkflow = useRunGraph(graph, libraryLoader);
 
   const backToHome = useCallback(() => {
     // don't need to save here, because we already debouncedSave after all operations

src/pages/Workflow/GraphEditor/index.tsx

@@ -54,7 +54,7 @@ export function GraphEditor() {
 
   const [graph, setGraph] = useSaveLoadGraph();
   const workflowContext = useContext(WorkflowContext);
-  const library = useLibrary();
+  const [library, libraryLoader] = useLibrary();
   const [readonly, setReadonly] = useState(false);
 
   // methods
@@ -109,7 +109,7 @@ export function GraphEditor() {
         />
       </ThumbnailContainer>
       <SearchComponents library={library} addNode={addNode} />
-      <GraphTopToolbar editorReference={editorReference} readonly={readonly} setReadonly={setReadonly} workflowContext={workflowContext} graph={graph} />
+      <GraphTopToolbar editorReference={editorReference} readonly={readonly} setReadonly={setReadonly} workflowContext={workflowContext} graph={graph} libraryLoader={libraryLoader} />
     </ErrorBoundary>
   );
 }

src/pages/Workflow/GraphEditor/library.ts

@@ -91,7 +91,7 @@ export async function getBrowserComponentLibrary() {
       libraryToLoad[name] = componentForLibrary(componentToProtocolComponent(name, componentInstance));
     }
   });
-  return libraryToLoad;
+  return [libraryToLoad, loader] as const;
 }
 
 // const registerComponent = (definition: Component, generated: boolean) => {
@@ -115,11 +115,13 @@ export async function getBrowserComponentLibrary() {
 export function useLibrary() {
   // load library bundled by webpack noflo-component-loader from installed noflo related npm packages
   const [library, setLibrary] = useState<IFBPLibrary | undefined>();
+  const [libraryLoader, setLibraryLoader] = useState<ComponentLoader | undefined>();
   useEffect(() => {
     void (async () => {
-      const libraryToLoad = await getBrowserComponentLibrary();
+      const [libraryToLoad, libraryLoaderToUse] = await getBrowserComponentLibrary();
       setLibrary(libraryToLoad);
+      setLibraryLoader(libraryLoaderToUse);
     })();
   }, []);
-  return library;
+  return [library, libraryLoader] as const;
 }

src/pages/Workflow/GraphEditor/useRunGraph.ts

@@ -0,0 +1,26 @@
+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';
+
+export function useRunGraph(fbpGraph: FbpGraph, libraryLoader?: ComponentLoader) {
+  const currentGraphReference = useRef<Network | undefined>();
+  async function runGraph() {
+    /**
+     * Simillar to noflo-runtime-base's `src/protocol/Network.js`, transform FbpGraph to ~~NofloGraph~~ Network
+     */
+    const nofloGraph: Network = await createNetwork(fbpGraph, {
+      subscribeGraph: false,
+      delay: true,
+      componentLoader: libraryLoader,
+    });
+    currentGraphReference.current = nofloGraph;
+    await nofloGraph.start();
+  }
+  useEffect(() => {
+    return () => {
+      void currentGraphReference.current?.stop();
+    };
+  }, [currentGraphReference]);
+  return runGraph;
+}

src/pages/Workflow/WorkflowManage/WorkflowList.tsx

@@ -108,6 +108,7 @@ export function WorkflowListItem(props: IWorkflowListItemProps) {
         </CardContent>
       </CardActionArea>
       <ItemMenuCardActions>
+        <Button onClick={handleOpenInTheGraphEditor}>{t('Open')}</Button>
         <Button onClick={handleOpenInTheGraphEditor}>{t('Open')}</Button>
         <Button aria-controls={menuID} aria-haspopup='true' onClick={handleOpenItemMenu}>
           {anchorElement === null ? <MenuIcon /> : <MenuOpenIcon />}

src/pages/Workflow/WorkflowManage/index.tsx

@@ -85,7 +85,7 @@ export const WorkflowManage: React.FC = () => {
       <SimpleBar>
         <SearchRegionContainer>
           <SearchBar
-            label='Search'
+            label={t('Workflow.SearchWorkflows')}
             value={search}
             onChange={(event: ChangeEvent<HTMLInputElement>) => {
               setSearch(event.target.value);