arayabrain · itutu-tienday · Jul 16, 2024 · Jul 8, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,16 +1,16 @@
 {
   "files": {
     "main.css": "/static/css/main.341bf264.css",
-    "main.js": "/static/js/main.0f19d410.js",
+    "main.js": "/static/js/main.1302c9fb.js",
     "static/js/47.145ba9bc.chunk.js": "/static/js/47.145ba9bc.chunk.js",
     "static/media/logo.png": "/static/media/logo.e44efe3246aecc6d6219.png",
     "index.html": "/index.html",
     "main.341bf264.css.map": "/static/css/main.341bf264.css.map",
-    "main.0f19d410.js.map": "/static/js/main.0f19d410.js.map",
+    "main.1302c9fb.js.map": "/static/js/main.1302c9fb.js.map",
     "47.145ba9bc.chunk.js.map": "/static/js/47.145ba9bc.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.341bf264.css",
-    "static/js/main.0f19d410.js"
+    "static/js/main.1302c9fb.js"
   ]
-}
+}
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="manifest" href="/static/manifest.json"/><title>OptiNiSt</title><script defer="defer" src="/static/js/main.0f19d410.js"></script><link href="/static/css/main.341bf264.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="manifest" href="/static/manifest.json"/><title>OptiNiSt</title><script defer="defer" src="/static/js/main.1302c9fb.js"></script><link href="/static/css/main.341bf264.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/js/main.0f19d410.js → frontend/build/static/js/main.1302c9fb.js b/frontend/build/static/js/main.0f19d410.js → frontend/build/static/js/main.1302c9fb.js
diff --git a/...ld/static/js/main.0f19d410.js.LICENSE.txt → ...ld/static/js/main.1302c9fb.js.LICENSE.txt b/...ld/static/js/main.0f19d410.js.LICENSE.txt → ...ld/static/js/main.1302c9fb.js.LICENSE.txt
diff --git a/...tend/build/static/js/main.0f19d410.js.map → ...tend/build/static/js/main.1302c9fb.js.map b/...tend/build/static/js/main.0f19d410.js.map → ...tend/build/static/js/main.1302c9fb.js.map
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -20,15 +20,15 @@ import Workspaces from "pages/Workspace"
 import Workspace from "pages/Workspace/Workspace"
 import { getModeStandalone } from "store/slice/Standalone/StandaloneActions"
 import {
-  selectLoadingMode,
+  selectLoading,
   selectModeStandalone,
 } from "store/slice/Standalone/StandaloneSeclector"
 import { AppDispatch } from "store/store"
 
 const App: FC = () => {
   const dispatch = useDispatch<AppDispatch>()
   const isStandalone = useSelector(selectModeStandalone)
-  const loading = useSelector(selectLoadingMode)
+  const loading = useSelector(selectLoading)
   const getMode = () => {
     dispatch(getModeStandalone())
       .unwrap()
@@ -45,7 +45,7 @@ const App: FC = () => {
   }, [])
 
   return loading ? (
-    <Loading />
+    <Loading loading={true} />
   ) : (
     <SnackbarProvider
       maxSnack={5}

diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -24,7 +24,7 @@ const Layout = ({ children }: { children?: ReactNode }) => {
   const dispatch = useDispatch<AppDispatch>()
   const isStandalone = useSelector(selectModeStandalone)
 
-  const [loading, setLoadingAuth] = useState(
+  const [loading, setLoading] = useState(
     !isStandalone && authRequiredPathRegex.test(location.pathname),
   )
 
@@ -37,7 +37,7 @@ const Layout = ({ children }: { children?: ReactNode }) => {
 
   const checkAuth = async () => {
     if (user) {
-      if (loading) setLoadingAuth(false)
+      if (loading) setLoading(false)
       return
     }
     const token = getToken()
@@ -52,16 +52,17 @@ const Layout = ({ children }: { children?: ReactNode }) => {
     } catch {
       navigate("/login", { replace: true })
     } finally {
-      if (loading) setLoadingAuth(false)
+      if (loading) setLoading(false)
     }
   }
 
-  if (loading) return <Loading />
-
   return isStandalone || authRequiredPathRegex.test(location.pathname) ? (
     <AuthedLayout>{children}</AuthedLayout>
   ) : (
-    <UnauthedLayout>{children}</UnauthedLayout>
+    <>
+      <Loading loading={loading} />
+      <UnauthedLayout>{children}</UnauthedLayout>
+    </>
   )
 }
 

diff --git a/frontend/src/components/Workspace/Experiment/Experiment.tsx b/frontend/src/components/Workspace/Experiment/Experiment.tsx
@@ -1,9 +1,14 @@
 import { memo } from "react"
+import { useSelector } from "react-redux"
 
+import Loading from "components/common/Loading"
 import { ExperimentTable } from "components/Workspace/Experiment/ExperimentTable"
 import { CONTENT_HEIGHT } from "const/Layout"
+import { selectLoading } from "store/slice/Experiments/ExperimentsSelectors"
 
 const Experiment = memo(function Experiment() {
+  const loading = useSelector(selectLoading)
+
   return (
     <div style={{ display: "flex" }}>
       <main
@@ -15,6 +20,7 @@ const Experiment = memo(function Experiment() {
         }}
       >
         <ExperimentTable />
+        <Loading loading={loading} />
       </main>
     </div>
   )

diff --git a/frontend/src/components/Workspace/FlowChart/FlowChart.tsx b/frontend/src/components/Workspace/FlowChart/FlowChart.tsx
@@ -222,7 +222,7 @@ const FlowChart = memo(function FlowChart(props: UseRunPipelineReturnType) {
                   horizontal: "left",
                 }}
               >
-                <div style={{ margin: 8, whiteSpace: "pre-wrap"}}>
+                <div style={{ margin: 8, whiteSpace: "pre-wrap" }}>
                   <FormHelperText error={true}>
                     {messageError.message}
                   </FormHelperText>

diff --git a/frontend/src/components/Workspace/FlowChart/ReactFlowComponent.tsx b/frontend/src/components/Workspace/FlowChart/ReactFlowComponent.tsx
@@ -27,6 +27,7 @@ import {
 import "reactflow/dist/style.css"
 
 import "style/flow.css"
+import Loading from "components/common/Loading"
 import {
   DND_ITEM_TYPE_SET,
   TreeItemCollectedProps,
@@ -42,6 +43,7 @@ import {
   selectFlowEdges,
   selectFlowNodes,
   selectFlowPosition,
+  selectLoading,
 } from "store/slice/FlowElement/FlowElementSelectors"
 import {
   editFlowNodePositionById,
@@ -63,6 +65,7 @@ export const ReactFlowComponent = memo(function ReactFlowComponent(
   const flowNodes = useSelector(selectFlowNodes)
   const flowEdges = useSelector(selectFlowEdges)
   const edges = flowEdges.filter((item) => !isNode(item)) as Edge<NodeData>[]
+  const loading = useSelector(selectLoading)
   const dispatch = useDispatch()
 
   const onConnect = (params: Connection | Edge) => {
@@ -168,6 +171,7 @@ export const ReactFlowComponent = memo(function ReactFlowComponent(
           </ReactFlow>
         </div>
       </ReactFlowProviderComponent>
+      <Loading loading={loading} />
     </div>
   )
 })
diff --git a/frontend/src/components/Workspace/PopupShare.tsx b/frontend/src/components/Workspace/PopupShare.tsx
@@ -268,7 +268,7 @@ const PopupShare = ({
           </Button>
         </DialogActions>
       </DialogCustom>
-      {loading ? <Loading /> : null}
+      <Loading loading={loading} />
     </Box>
   )
 }

diff --git a/frontend/src/components/Workspace/Visualize/VisualizeItem.tsx b/frontend/src/components/Workspace/Visualize/VisualizeItem.tsx
@@ -14,7 +14,7 @@ import Loading from "components/common/Loading"
 import { useMouseDragHandler } from "components/utils/MouseDragUtil"
 import { DisplayDataItem } from "components/Workspace/Visualize/DisplayDataItem"
 import { FilePathSelect } from "components/Workspace/Visualize/FilePathSelect"
-import { selectLoadingVisualize } from "store/slice/DisplayData/DisplayDataSelectors"
+import { selectLoading } from "store/slice/DisplayData/DisplayDataSelectors"
 import {
   DATA_TYPE,
   DATA_TYPE_SET,
@@ -64,15 +64,15 @@ export const VisualizeItem = memo(function VisualizeItem({
 
   const { size, onMouseDownX, onMouseDownY, onMouseDownXY } =
     useItemDragResize(itemId)
-  const loading = useSelector(selectLoadingVisualize)
+  const loading = useSelector(selectLoading)
   const [roiFilePath, setRoiFilePath] = useState("")
   return (
     <Box
       sx={{ m: 1, display: "flex", flexDirection: "row", position: "relative" }}
     >
-      {loading && roiFilePath.includes("/cell_roi.json") ? (
-        <Loading position={"absolute"} />
-      ) : null}
+      {loading && roiFilePath.includes("_roi.json") && (
+        <Loading loading={true} position={"absolute"} />
+      )}
       <Box
         sx={{
           display: "flex",

diff --git a/frontend/src/components/common/DeleteConfirmModal.tsx b/frontend/src/components/common/DeleteConfirmModal.tsx
@@ -20,13 +20,13 @@ type DeleteConfirmModalProps = {
   onSubmit: () => void
   titleSubmit: string
   description: string
-  isLoading?: boolean
+  loading?: boolean
 }
 const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
   onClose,
   open,
   onSubmit,
-  isLoading,
+  loading,
   titleSubmit,
   description,
 }) => {
@@ -67,7 +67,7 @@ const DeleteConfirmModal: FC<DeleteConfirmModalProps> = ({
           </Button>
         </DialogActions>
       </Dialog>
-      {isLoading ? <Loading /> : null}
+      <Loading loading={loading} />
     </>
   )
 }

diff --git a/frontend/src/components/common/Loading.tsx b/frontend/src/components/common/Loading.tsx
@@ -2,13 +2,16 @@ import { Box, keyframes, styled } from "@mui/material"
 
 type Props = {
   position?: "fixed" | "absolute"
+  loading: boolean | undefined
 }
 
-const Loading = ({ position = "fixed" }: Props) => {
+const Loading = ({ position = "fixed", loading }: Props) => {
   return (
-    <LoaderWrapper position={position}>
-      <Loader />
-    </LoaderWrapper>
+    loading && (
+      <LoaderWrapper position={position}>
+        <Loader />
+      </LoaderWrapper>
+    )
   )
 }
 

diff --git a/frontend/src/pages/Account/index.tsx b/frontend/src/pages/Account/index.tsx
@@ -218,7 +218,7 @@ const Account = () => {
           Delete Account
         </Button>
       </BoxFlex>
-      {loading ? <Loading /> : null}
+      <Loading loading={loading} />
     </AccountWrapper>
   )
 }

diff --git a/frontend/src/pages/AccountManager/index.tsx b/frontend/src/pages/AccountManager/index.tsx
@@ -91,7 +91,7 @@ const ModalComponent = ({
   const [formData, setFormData] = useState<{ [key: string]: string }>(
     dataEdit || initState,
   )
-  const [isDisabled, setIsDisabled] = useState(false)
+  const [isFormDisabled, setIsFormDisabled] = useState(false)
   const [errors, setErrors] = useState<{ [key: string]: string }>(initState)
 
   const validateEmail = (value: string): string => {
@@ -182,18 +182,18 @@ const ModalComponent = ({
 
   const onSubmit = async (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
-    setIsDisabled(true)
+    setIsFormDisabled(true)
     const newErrors = validateForm()
     if (Object.keys(newErrors).some((key) => !!newErrors[key])) {
       setErrors(newErrors)
-      setIsDisabled(false)
+      setIsFormDisabled(false)
       return
     }
     try {
       await onSubmitEdit(dataEdit?.id, formData)
       setOpenModal(false)
     } finally {
-      setIsDisabled(false)
+      setIsFormDisabled(false)
     }
   }
   const onCancel = () => {
@@ -259,14 +259,14 @@ const ModalComponent = ({
           </Button>
           <Button
             variant={"contained"}
-            disabled={isDisabled}
+            disabled={isFormDisabled}
             onClick={(e) => onSubmit(e)}
           >
             Ok
           </Button>
         </ButtonModal>
       </ModalBox>
-      {isDisabled ? <Loading /> : null}
+      <Loading loading={isFormDisabled} />
     </Modal>
   )
 }
@@ -783,7 +783,7 @@ const AccountManager = () => {
           dataEdit={dataEdit}
         />
       ) : null}
-      {loading ? <Loading /> : null}
+      <Loading loading={loading} />
     </AccountManagerWrapper>
   )
 }

diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
@@ -12,7 +12,7 @@ const Login = () => {
   const navigate = useNavigate()
   const dispatch: AppDispatch = useDispatch()
 
-  const [isLoading, setIsLoading] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [errors, setErrors] = useState<{ [key: string]: string }>({
     email: "",
     password: "",
@@ -26,7 +26,7 @@ const Login = () => {
     event.preventDefault()
     const errorCheck = validateSubmit()
     if (errorCheck) return
-    setIsLoading(true)
+    setLoading(true)
     dispatch(login(values))
       .unwrap()
       .then(async (_) => {
@@ -37,7 +37,7 @@ const Login = () => {
         setErrors({ email: "Email or password is wrong", password: "" })
       })
       .finally(() => {
-        setIsLoading(false)
+        setLoading(false)
       })
   }
 
@@ -114,7 +114,7 @@ const Login = () => {
           </Stack>
         </FormSignUp>
       </LoginContent>
-      {isLoading && <Loading />}
+      <Loading loading={loading} />
     </LoginWrapper>
   )
 }

diff --git a/frontend/src/pages/ResetPassword/index.tsx b/frontend/src/pages/ResetPassword/index.tsx
@@ -9,7 +9,7 @@ import { regexEmail } from "const/Auth"
 
 const ResetPassword = () => {
   const navigate = useNavigate()
-  const [isLoading, setIsLoading] = useState(false)
+  const [loading, setLoading] = useState(false)
   const [errors, setErrors] = useState<{ [key: string]: string }>({
     email: "",
   })
@@ -22,7 +22,7 @@ const ResetPassword = () => {
 
     const errorCheck = validateSubmit()
     if (errors.email || errorCheck) return
-    setIsLoading(true)
+    setLoading(true)
     try {
       await sendResetPasswordMailApi(encodeURIComponent(values.email))
       setTimeout(() => {
@@ -35,7 +35,7 @@ const ResetPassword = () => {
         alert("Email does not exists!")
       }, 300)
     } finally {
-      setIsLoading(false)
+      setLoading(false)
     }
   }
 
@@ -95,7 +95,7 @@ const ResetPassword = () => {
           </Stack>
         </FormSignUp>
       </LoginContent>
-      {isLoading && <Loading />}
+      <Loading loading={loading} />
     </LoginWrapper>
   )
 }