Skip to content
This repository was archived by the owner on May 30, 2023. It is now read-only.

Commit ec8adbc

Browse files
locpnh0409locpnh0409
committed
build: check segmentation progress modal
1 parent e586004 commit ec8adbc

5 files changed

Lines changed: 246 additions & 5 deletions

File tree

‎src/routes/AnnotationProjectDetail/SegmentationProgressModal/index.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import CancelIcon from "@mui/icons-material/Cancel";
2+
import {
3+
Box,
4+
CircularProgress,
5+
IconButton,
6+
LinearProgress,
7+
Modal,
8+
Typography,
9+
} from "@mui/material";
10+
11+
import { modalCloseStyle, modalStyle } from "styles/generalStyle";
12+
import { SegmentationProgressModalProps } from "./type";
13+
14+
import { useEffect, useMemo, useState } from "react";
15+
import annotationProjectApi, {
16+
CheckSegmentationProgressDataFields,
17+
} from "services/annotationProjectApi";
18+
import { useSelector } from "react-redux";
19+
import { selectorAnnotationCurrentProject } from "reduxes/annotationProject/selector";
20+
21+
const SegmentationProgressModal = function ({
22+
isOpen,
23+
onClose,
24+
}: SegmentationProgressModalProps) {
25+
const [
26+
isFetchingCheckSegmentationProgress,
27+
setIsFetchingCheckSegmentationProgress,
28+
] = useState<boolean | null>(null);
29+
30+
const [progressData, setProgressData] = useState<
31+
CheckSegmentationProgressDataFields | undefined
32+
>();
33+
34+
const annotationCurrentProject = useSelector(
35+
selectorAnnotationCurrentProject
36+
);
37+
38+
const currentProjectId = useMemo(
39+
() =>
40+
(annotationCurrentProject && annotationCurrentProject?.project_id) ||
41+
null,
42+
[annotationCurrentProject]
43+
);
44+
45+
const resetProgressData = () => {
46+
setProgressData(undefined);
47+
};
48+
49+
const onCloseModal = () => {
50+
resetProgressData();
51+
if (onClose) {
52+
onClose();
53+
}
54+
};
55+
56+
useEffect(() => {
57+
if (isOpen && currentProjectId) {
58+
setIsFetchingCheckSegmentationProgress(true);
59+
annotationProjectApi
60+
.checkSegmentationProgress({
61+
projectId: currentProjectId,
62+
})
63+
.then((checkSegmentationProgressResponse) => {
64+
setIsFetchingCheckSegmentationProgress(false);
65+
if (
66+
checkSegmentationProgressResponse &&
67+
checkSegmentationProgressResponse.data
68+
) {
69+
setProgressData(
70+
checkSegmentationProgressResponse.data as CheckSegmentationProgressDataFields
71+
);
72+
}
73+
});
74+
}
75+
}, [isOpen]);
76+
77+
const renderProgressContent = () => {
78+
if (progressData) {
79+
const { total, finished } = progressData;
80+
81+
return (
82+
<Box width="100%" textAlign="center">
83+
<LinearProgress
84+
value={Math.ceil((finished * 100) / total)}
85+
variant="determinate"
86+
/>
87+
<Typography mt={1}>
88+
{finished}/{total} images
89+
</Typography>
90+
</Box>
91+
);
92+
}
93+
94+
if (isFetchingCheckSegmentationProgress === false) {
95+
return (
96+
<Box>
97+
<Typography mt={1} fontStyle="italic" color="text.secondary">
98+
No data yet.
99+
</Typography>
100+
</Box>
101+
);
102+
}
103+
104+
return null;
105+
};
106+
107+
if (currentProjectId) {
108+
return (
109+
<Modal
110+
open={isOpen}
111+
onClose={
112+
!isFetchingCheckSegmentationProgress ? onCloseModal : undefined
113+
}
114+
disableEscapeKeyDown
115+
>
116+
<Box sx={{ ...modalStyle, width: 700 }}>
117+
<IconButton
118+
sx={modalCloseStyle}
119+
onClick={
120+
!isFetchingCheckSegmentationProgress ? onCloseModal : undefined
121+
}
122+
>
123+
<CancelIcon fontSize="large" />
124+
</IconButton>
125+
<Typography variant="h4" component="h2">
126+
Segmentation Progress
127+
</Typography>
128+
<Box mt={6}>
129+
<Box display="flex" justifyContent="center">
130+
{isFetchingCheckSegmentationProgress !== false ? (
131+
<Box display="flex" flexDirection="column" alignItems="center">
132+
<CircularProgress />
133+
<Typography mt={1} variant="caption" color="text.secondary">
134+
Fetching segmentation progress infomation...
135+
</Typography>
136+
</Box>
137+
) : (
138+
renderProgressContent()
139+
)}
140+
</Box>
141+
</Box>
142+
</Box>
143+
</Modal>
144+
);
145+
}
146+
return null;
147+
};
148+
149+
export default SegmentationProgressModal;

‎src/routes/AnnotationProjectDetail/SegmentationProgressModal/type.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface SegmentationProgressModalProps {
2+
isOpen: boolean;
3+
onClose: () => void;
4+
}

‎src/routes/AnnotationProjectDetail/index.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
PREPROCESS_SOURCE,
1616
} from "constants/defaultValues";
1717
import { ANNOTATION_EDITOR_ROUTE_NAME } from "constants/routeName";
18-
import { useEffect } from "react";
18+
import { useEffect, useState } from "react";
1919
import { useDispatch, useSelector } from "react-redux";
2020
import { useHistory, useParams } from "react-router-dom";
2121
import {
@@ -29,6 +29,7 @@ import {
2929
selectorIsFetchingDetailAnnotationProject,
3030
} from "reduxes/annotationProject/selector";
3131
import { formatBytes, getLocalStorage, separateNumber } from "utils/general";
32+
import SegmentationProgressModal from "./SegmentationProgressModal";
3233
import UploadAnnotationImage from "./UploadAnnotationImage";
3334

3435
const annotationProjectDetail = function () {
@@ -42,6 +43,20 @@ const annotationProjectDetail = function () {
4243
const isFetchingDetailAnnotationProject = useSelector(
4344
selectorIsFetchingDetailAnnotationProject
4445
);
46+
47+
const [
48+
isOpenCheckSegmentationProgressModal,
49+
setIsOpenCheckSegmentationProgressModal,
50+
] = useState(false);
51+
52+
const onCloseCheckSegmentationProgressModal = () => {
53+
setIsOpenCheckSegmentationProgressModal(false);
54+
};
55+
56+
const onOpenCheckSegmentationProgressModal = () => {
57+
setIsOpenCheckSegmentationProgressModal(true);
58+
};
59+
4560
useEffect(() => {
4661
dispatch(setCurrentAnnotationProject({ projectName }));
4762
dispatch(
@@ -249,6 +264,14 @@ const annotationProjectDetail = function () {
249264
<Box mt={2} p={2} display="flex" borderRadius={2} flex={1}>
250265
{renderContent()}
251266
</Box>
267+
<Box mt={1} px={2}>
268+
<Button
269+
variant="outlined"
270+
onClick={onOpenCheckSegmentationProgressModal}
271+
>
272+
Check Segmentation Progress
273+
</Button>
274+
</Box>
252275
<Box mt={10} display="flex" justifyContent="flex-end" gap={2}>
253276
<Button
254277
variant="outlined"
@@ -276,6 +299,10 @@ const annotationProjectDetail = function () {
276299
</Typography>
277300
<Divider sx={{ my: 1, borderWidth: 2, borderColor: "text.primary" }} />
278301
{renderProject()}
302+
<SegmentationProgressModal
303+
isOpen={isOpenCheckSegmentationProgressModal}
304+
onClose={onCloseCheckSegmentationProgressModal}
305+
/>
279306
</Box>
280307
</>
281308
);

‎src/services/annotationProjectApi.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export interface SaveLabelProps {
2727
fileId: string;
2828
dictS3Key: Record<string, string>;
2929
}
30+
31+
export type CheckSegmentationProgressDataFields = {
32+
total: number;
33+
finished: number;
34+
};
35+
3036
const annotationProjectApi = {
3137
cloneProbjectToAnnotation: ({
3238
fromProjectName,
@@ -178,5 +184,20 @@ const annotationProjectApi = {
178184
},
179185
{ headers: getAuthHeader() }
180186
),
187+
checkSegmentationProgress: ({
188+
idToken,
189+
projectId,
190+
}: {
191+
idToken?: string;
192+
projectId: string;
193+
}) =>
194+
axios.post(
195+
`${annotationProjectApiURL}/annotation/project/check_ai_segm_progress`,
196+
{
197+
id_token: idToken || getLocalStorage(ID_TOKEN_NAME) || "",
198+
project_id: projectId,
199+
},
200+
{ headers: getAuthHeader() }
201+
),
181202
};
182203
export default annotationProjectApi;

‎yarn.lock‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2904,10 +2904,10 @@
29042904
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.20.tgz#29626bd9c9119df5b8194353d34044c895fe56e3"
29052905
integrity sha512-Q15Clj3lZSLnhVA6yKw1G7SQz46DeL9gO1TEgfK1OQGvMdQ6TUWmCeWf1QBUNkw2BDfV52i2YuYd9OF3ZwGhjw==
29062906

2907-
"@types/node@^12.20.14":
2908-
version "12.20.55"
2909-
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
2910-
integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
2907+
"@types/node@17.0.29":
2908+
version "17.0.29"
2909+
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.29.tgz#7f2e1159231d4a077bb660edab0fde373e375a3d"
2910+
integrity sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==
29112911

29122912
"@types/normalize-package-data@^2.4.0":
29132913
version "2.4.1"
@@ -2972,6 +2972,13 @@
29722972
dependencies:
29732973
"@types/react" "*"
29742974

2975+
"@types/react-reconciler@~0.26.2":
2976+
version "0.26.7"
2977+
resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.26.7.tgz#0c4643f30821ae057e401b0d9037e03e8e9b2a36"
2978+
integrity sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==
2979+
dependencies:
2980+
"@types/react" "*"
2981+
29752982
"@types/react-redux@^7.1.20":
29762983
version "7.1.22"
29772984
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.22.tgz#0eab76a37ef477cc4b53665aeaf29cb60631b72a"
@@ -8867,6 +8874,11 @@ klona@^2.0.4:
88678874
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
88688875
integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
88698876

8877+
konva@^8.3.10:
8878+
version "8.3.13"
8879+
resolved "https://registry.yarnpkg.com/konva/-/konva-8.3.13.tgz#c1adc986ddf5dde4790c0ed47eef8d40a313232e"
8880+
integrity sha512-O5VxHfRfTj4PscTglQH1NimS8+CC5hQYLeB8YQstu8MN/i2L8GjA1T9d7xxzITF2TD5+xcIs5ei7en3cztbNXg==
8881+
88708882
language-subtag-registry@~0.3.2:
88718883
version "0.3.21"
88728884
resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
@@ -11961,6 +11973,11 @@ react-chartjs-2@^4.1.0:
1196111973
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
1196211974
integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
1196311975

11976+
react-colorful@^5.6.1:
11977+
version "5.6.1"
11978+
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
11979+
integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
11980+
1196411981
react-dev-utils@^11.0.3:
1196511982
version "11.0.4"
1196611983
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -12064,6 +12081,15 @@ react-is@^18.0.0:
1206412081
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
1206512082
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
1206612083

12084+
react-konva@17.0.2-6:
12085+
version "17.0.2-6"
12086+
resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-17.0.2-6.tgz#80b3fdebfd915878eafe554c191bec282cdda0de"
12087+
integrity sha512-cfRsBKxqAQ6gTBmyrKptKRWhHD+C068dvyqcZ4h8qzKbAacTXQtfLMSpOI+d+ptxSMvayIbbCdbsBmk3bWiClQ==
12088+
dependencies:
12089+
"@types/react-reconciler" "~0.26.2"
12090+
react-reconciler "~0.26.2"
12091+
scheduler "^0.20.2"
12092+
1206712093
react-lifecycles-compat@^3.0.4:
1206812094
version "3.0.4"
1206912095
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -12090,6 +12116,15 @@ react-markdown@^8.0.3:
1209012116
unist-util-visit "^4.0.0"
1209112117
vfile "^5.0.0"
1209212118

12119+
react-reconciler@~0.26.2:
12120+
version "0.26.2"
12121+
resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.2.tgz#bbad0e2d1309423f76cf3c3309ac6c96e05e9d91"
12122+
integrity sha512-nK6kgY28HwrMNwDnMui3dvm3rCFjZrcGiuwLc5COUipBK5hWHLOxMJhSnSomirqWwjPBJKV1QcbkI0VJr7Gl1Q==
12123+
dependencies:
12124+
loose-envify "^1.1.0"
12125+
object-assign "^4.1.1"
12126+
scheduler "^0.20.2"
12127+
1209312128
react-redux@^7.2.4:
1209412129
version "7.2.6"
1209512130
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
@@ -14554,6 +14589,11 @@ url@^0.11.0:
1455414589
punycode "1.3.2"
1455514590
querystring "0.2.0"
1455614591

14592+
use-image@^1.0.12:
14593+
version "1.1.0"
14594+
resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.1.0.tgz#dc244c34506d3cf3a8177c1f0bbfb158b9beefe5"
14595+
integrity sha512-+cBHRR/44ZyMUS873O0vbVylgMM0AbdTunEplAWXvIQ2p69h2sIo2Qq74zeUsq6AMo+27e5lERQvXzd1crGiMg==
14596+
1455714597
use@^3.1.0:
1455814598
version "3.1.1"
1455914599
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)