Disable workflow editing

frontend/src/components/Workspace/Experiment/Button/ReproduceButton.tsx

@@ -16,20 +16,22 @@ import IconButton from "@mui/material/IconButton"
 
 import { ExperimentUidContext } from "components/Workspace/Experiment/ExperimentTable"
 import { selectExperimentName } from "store/slice/Experiments/ExperimentsSelectors"
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 import { reset } from "store/slice/VisualizeItem/VisualizeItemSlice"
 import { reproduceWorkflow } from "store/slice/Workflow/WorkflowActions"
 import { selectCurrentWorkspaceId } from "store/slice/Workspace/WorkspaceSelector"
 import { AppDispatch } from "store/store"
 
 export const ReproduceButton = memo(function ReproduceButton() {
   const [open, setOpen] = useState(false)
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
   const openDialog = () => {
     setOpen(true)
   }
 
   return (
     <>
-      <IconButton onClick={openDialog}>
+      <IconButton onClick={openDialog} disabled={!!isPending}>
         <ReplyIcon />
       </IconButton>
       <ConfirmReprodceDialog open={open} setOpen={setOpen} />

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

@@ -65,13 +65,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>("")
 
@@ -114,6 +117,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())
   }
@@ -126,9 +136,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))
@@ -219,7 +226,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/ClearWorkflow.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, memo, SetStateAction, useState } from "react"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 
 import DeleteIcon from "@mui/icons-material/Delete"
 import {
@@ -13,18 +13,25 @@ import {
 } from "@mui/material"
 
 import { clearFlowElements } from "store/slice/FlowElement/FlowElementSlice"
+import { selectPipelineIsStartedSuccess } from "store/slice/Pipeline/PipelineSelectors"
 
 export const ClearWorkflowButton = memo(function ClearWorkflowButton() {
   const [open, setOpen] = useState(false)
   const openDialog = () => {
     setOpen(true)
   }
 
+  const isPending = useSelector(selectPipelineIsStartedSuccess)
+
   return (
     <>
       <Tooltip title="Clear workflow">
-        <IconButton onClick={openDialog}>
-          <DeleteIcon color="primary" />
+        <IconButton
+          disabled={!!isPending}
+          onClick={openDialog}
+          color={"primary"}
+        >
+          <DeleteIcon />
         </IconButton>
       </Tooltip>
       <ConfirmClearDialog open={open} setOpen={setOpen} />

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,8 +43,8 @@ export const ImportWorkflowConfigButton = memo(
 
     return (
       <Tooltip title="Import workflow from config file">
-        <IconButton onClick={onClick}>
-          <UploadFile color="primary" />
+        <IconButton onClick={onClick} disabled={!!isPending} color={"primary"}>
+          <UploadFile />
           <input
             hidden
             ref={inputRef}

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,7 +109,11 @@ const AlgorithmNodeImple = memo(function AlgorithmNodeImple({
         </Grid>
       </Grid>
       <ButtonGroup>
-        <Button size="small" onClick={onClickParamButton}>
+        <Button
+          size="small"
+          onClick={onClickParamButton}
+          disabled={status !== NODE_RESULT_STATUS.SUCCESS}
+        >
           Param
         </Button>
         <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>
   )