Disable workflow editing

frontend/src/components/Workspace/Experiment/ExperimentTable.tsx

@@ -63,13 +63,16 @@ import {
   selectExperimentHasNWB,
 } from "store/slice/Experiments/ExperimentsSelectors"
 import { ExperimentSortKeys } from "store/slice/Experiments/ExperimentsType"
-import { selectPipelineLatestUid } from "store/slice/Pipeline/PipelineSelectors"
+import {
+  selectPipelineIsStartedSuccess,
+  selectPipelineLatestUid,
+} from "store/slice/Pipeline/PipelineSelectors"
 import { clearCurrentPipeline } from "store/slice/Pipeline/PipelineSlice"
 import {
   selectCurrentWorkspaceId,
   selectIsWorkspaceOwner,
 } from "store/slice/Workspace/WorkspaceSelector"
-import { AppDispatch } from "store/store"
+import { AppDispatch, RootState } from "store/store"
 
 export const ExperimentUidContext = createContext<string>("")
 
@@ -112,6 +115,13 @@ const TableImple = memo(function TableImple() {
   const experimentListValues = Object.values(experimentList)
   const experimentListKeys = Object.keys(experimentList)
   const dispatch = useDispatch<AppDispatch>()
+  const [checkedList, setCheckedList] = useState<string[]>([])
+  const [open, setOpen] = useState(false)
+  const isRunning = useSelector((state: RootState) => {
+    const currentUid = selectPipelineLatestUid(state)
+    const isPending = selectPipelineIsStartedSuccess(state)
+    return checkedList.includes(currentUid as string) && isPending
+  })
   const onClickReload = () => {
     dispatch(getExperiments())
   }
@@ -124,9 +134,6 @@ const TableImple = memo(function TableImple() {
     setSortTarget(property)
   }
 
-  const [checkedList, setCheckedList] = useState<string[]>([])
-  const [open, setOpen] = useState(false)
-
   const onCheckBoxClick = (uid: string) => {
     if (checkedList.includes(uid)) {
       setCheckedList(checkedList.filter((v) => v !== uid))
@@ -214,7 +221,7 @@ const TableImple = memo(function TableImple() {
             color="error"
             endIcon={<DeleteIcon />}
             onClick={onClickDelete}
-            disabled={checkedList.length === 0}
+            disabled={checkedList.length === 0 || isRunning}
           >
             Delete
           </Button>

frontend/src/components/Workspace/FlowChart/Buttons/ImportWorkflowConfig.tsx

@@ -1,11 +1,12 @@
 import { memo, ChangeEvent, useRef } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 
 import { useSnackbar } from "notistack"
 
 import { UploadFile } from "@mui/icons-material"
 import { IconButton, Tooltip } from "@mui/material"
 
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 import { reset } from "store/slice/VisualizeItem/VisualizeItemSlice"
 import { importWorkflowConfig } from "store/slice/Workflow/WorkflowActions"
 import { AppDispatch } from "store/store"
@@ -16,6 +17,8 @@ export const ImportWorkflowConfigButton = memo(
     const inputRef = useRef<HTMLInputElement>(null)
     const { enqueueSnackbar } = useSnackbar()
 
+    const isPending = useSelector(selectPipelineIsStartedSuccess)
+
     const onClick = () => {
       inputRef.current?.click()
     }
@@ -40,7 +43,7 @@ export const ImportWorkflowConfigButton = memo(
 
     return (
       <Tooltip title="Import workflow yaml file">
-        <IconButton onClick={onClick}>
+        <IconButton onClick={onClick} disabled={!!isPending}>
           <UploadFile color="primary" />
           <input
             hidden

frontend/src/components/Workspace/FlowChart/Buttons/NWB.tsx

@@ -1,20 +1,22 @@
 import { memo } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 
 import TuneIcon from "@mui/icons-material/Tune"
 import { IconButton, Tooltip } from "@mui/material"
 
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 import { toggleNwb } from "store/slice/RightDrawer/RightDrawerSlice"
 
 export const NWBSettingButton = memo(function NWBSettingButton() {
   const dispatch = useDispatch()
   const handleClick = () => {
     dispatch(toggleNwb())
   }
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
   return (
     <Tooltip title="NWB settings">
-      <IconButton onClick={handleClick}>
-        <TuneIcon color="primary" />
+      <IconButton onClick={handleClick} color="primary" disabled={!!isPending}>
+        <TuneIcon />
       </IconButton>
     </Tooltip>
   )

frontend/src/components/Workspace/FlowChart/Buttons/Snakemake.tsx

@@ -1,20 +1,26 @@
 import { memo } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 
 import RouteIcon from "@mui/icons-material/Route"
 import { IconButton, Tooltip } from "@mui/material"
 
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 import { toggleSnakemake } from "store/slice/RightDrawer/RightDrawerSlice"
 
 export const SnakemakeButton = memo(function SnakemakeButton() {
   const dispatch = useDispatch()
   const handleClick = () => {
     dispatch(toggleSnakemake())
   }
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
   return (
     <Tooltip title="Snakemake settings">
-      <IconButton onClick={handleClick}>
-        <RouteIcon color="primary" />
+      <IconButton
+        onClick={handleClick}
+        color={"primary"}
+        disabled={!!isPending}
+      >
+        <RouteIcon />
       </IconButton>
     </Tooltip>
   )

frontend/src/components/Workspace/FlowChart/FlowChartNode/AlgorithmNode.tsx

@@ -109,13 +109,17 @@ const AlgorithmNodeImple = memo(function AlgorithmNodeImple({
         </Grid>
       </Grid>
       <ButtonGroup>
-        <Button size="small" onClick={onClickParamButton}>
+        <Button
+          size="small"
+          onClick={onClickParamButton}
+          disabled={status === NODE_RESULT_STATUS.PENDING}
+        >
           Param
         </Button>
         <Button
           size="small"
           onClick={onClickOutputButton}
-          disabled={status !== NODE_RESULT_STATUS.SUCCESS}
+          disabled={status === NODE_RESULT_STATUS.PENDING}
         >
           Output
         </Button>

frontend/src/components/Workspace/FlowChart/FlowChartNode/FileSelect.tsx

@@ -10,7 +10,10 @@ import { LinearProgressWithLabel } from "components/Workspace/FlowChart/FlowChar
 import { useFileUploader } from "store/slice/FileUploader/FileUploaderHook"
 import { getLabelByPath } from "store/slice/FlowElement/FlowElementUtils"
 import { FILE_TYPE } from "store/slice/InputNode/InputNodeType"
-import { selectPipelineLatestUid } from "store/slice/Pipeline/PipelineSelectors"
+import {
+  selectPipelineIsStartedSuccess,
+  selectPipelineLatestUid,
+} from "store/slice/Pipeline/PipelineSelectors"
 
 interface FileSelectProps {
   multiSelect?: boolean
@@ -84,6 +87,7 @@ export const FileSelectImple = memo(function FileSelectImple({
   const { onOpenFileSelectDialog, onOpenClearWorkflowIdDialog } =
     useContext(DialogContext)
   const currentWorkflowId = useSelector(selectPipelineLatestUid)
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
 
   const onFileInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     event.preventDefault()
@@ -122,6 +126,7 @@ export const FileSelectImple = memo(function FileSelectImple({
       <ButtonGroup size="small" style={{ marginRight: 4 }}>
         <Button
           variant="outlined"
+          disabled={!!isPending}
           onClick={() => {
             onOpenFileSelectDialog({
               open: true,
@@ -134,7 +139,7 @@ export const FileSelectImple = memo(function FileSelectImple({
         >
           {selectButtonLabel ? selectButtonLabel : "Select File"}
         </Button>
-        <Button onClick={onClick} variant="outlined">
+        <Button onClick={onClick} variant="outlined" disabled={!!isPending}>
           {uploadButtonLabel ? uploadButtonLabel : "Load"}
         </Button>
       </ButtonGroup>

frontend/src/components/Workspace/WorkspaceTabs.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux"
 import Tab from "@mui/material/Tab"
 import Tabs from "@mui/material/Tabs"
 
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 import { selectActiveTab } from "store/slice/Workspace/WorkspaceSelector"
 import { setActiveTab } from "store/slice/Workspace/WorkspaceSlice"
 
@@ -14,6 +15,8 @@ const WorkspaceTabs: FC = () => {
     dispatch(setActiveTab(newValue))
   }
 
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
+
   return (
     <Tabs
       sx={{ width: "100%" }}
@@ -23,7 +26,7 @@ const WorkspaceTabs: FC = () => {
       textColor="primary"
     >
       <Tab label="Workflow" {...a11yProps(0)} />
-      <Tab label="Visualize" {...a11yProps(1)} />
+      <Tab disabled={!!isPending} label="Visualize" {...a11yProps(1)} />
       <Tab label="Record" {...a11yProps(2)} />
     </Tabs>
   )