From 4ff19ac57d7a926897c8372de59b07dc4fee63a8 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 30 Jan 2025 11:15:18 +0530 Subject: [PATCH 1/9] feat: add loading state to NLP prediction query --- .../nlp/components/NlpTrainForm.tsx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx index cb9d595f..1ada8736 100644 --- a/frontend/src/components/nlp/components/NlpTrainForm.tsx +++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx @@ -1,10 +1,12 @@ -/* - * Copyright © 2024 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + + import AddIcon from "@mui/icons-material/Add"; import Check from "@mui/icons-material/Check"; @@ -65,6 +67,7 @@ const NlpDatasetSample: FC = ({ hasCount: false, }, ); + const [loading, setLoading] = useState(false); const getNlpValueFromCache = useGetFromCache(EntityType.NLP_VALUE); // eslint-disable-next-line react-hooks/exhaustive-deps const defaultValues: INlpSampleFormAttributes = useMemo( @@ -121,7 +124,12 @@ const NlpDatasetSample: FC = ({ useQuery({ queryKey: ["nlp-prediction", currentText], queryFn: async () => { - return await apiClient.predictNlp(currentText); + setLoading(true); + try{ + return await apiClient.predictNlp(currentText); + }finally{ + setLoading(false); + } }, onSuccess: (result) => { const traitEntities: INlpDatasetTraitEntity[] = result.entities.filter( @@ -226,6 +234,7 @@ const NlpDatasetSample: FC = ({ })), ); }} + loading={loading} /> From 289c1de76e0fbd64f8ab24726929d6f85a9399c8 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 30 Jan 2025 11:15:45 +0530 Subject: [PATCH 2/9] feat: add loading indicator to Selectable component --- .../src/app-components/inputs/Selectable.tsx | 36 ++++++++++++++----- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index 62d8a6a6..1de31db6 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -1,12 +1,14 @@ -/* - * Copyright © 2024 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + -import { Box, Input, styled } from "@mui/material"; + +import { Box, CircularProgress, Input, styled } from "@mui/material"; import randomSeed from "random-seed"; import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; @@ -62,6 +64,7 @@ type SelectableProps = { text: string; entities: INlpDatasetKeywordEntity[]; }) => void; + loading?: boolean; }; const Selectable: FC = ({ @@ -70,6 +73,7 @@ const Selectable: FC = ({ placeholder = "", onChange, onSelect, + loading, }) => { const [text, setText] = useState(defaultValue || ""); const editableRef = useRef(null); @@ -205,6 +209,22 @@ const Selectable: FC = ({ onChange={(e) => handleTextChange(e.target.value)} placeholder={placeholder} /> + { + loading && ( + + ) + } ); }; From 7b858588f0a4a01acb7e582f3a3249ee8cc8f294 Mon Sep 17 00:00:00 2001 From: Aditya Date: Sat, 1 Feb 2025 10:43:19 +0530 Subject: [PATCH 3/9] fix: update type annotation for loading state in NlpTrainForm component --- .../components/nlp/components/NlpTrainForm.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx index 1ada8736..7ac321d4 100644 --- a/frontend/src/components/nlp/components/NlpTrainForm.tsx +++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx @@ -1,11 +1,11 @@ -/* - * Copyright © 2025 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ - +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + import AddIcon from "@mui/icons-material/Add"; @@ -67,7 +67,7 @@ const NlpDatasetSample: FC = ({ hasCount: false, }, ); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(false); const getNlpValueFromCache = useGetFromCache(EntityType.NLP_VALUE); // eslint-disable-next-line react-hooks/exhaustive-deps const defaultValues: INlpSampleFormAttributes = useMemo( From 7216102d33fb594057a6de52b15f00053af9b593 Mon Sep 17 00:00:00 2001 From: Aditya Date: Sat, 1 Feb 2025 10:44:08 +0530 Subject: [PATCH 4/9] feat: update loading indicator position in Selectable component --- .../src/app-components/inputs/Selectable.tsx | 45 +++++++++---------- 1 file changed, 21 insertions(+), 24 deletions(-) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index 1de31db6..86fca45b 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -1,11 +1,11 @@ -/* - * Copyright © 2025 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ - +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + import { Box, CircularProgress, Input, styled } from "@mui/material"; @@ -208,23 +208,20 @@ const Selectable: FC = ({ value={text} onChange={(e) => handleTextChange(e.target.value)} placeholder={placeholder} + endAdornment={ + true ? ( + + ) : null + } /> - { - loading && ( - - ) - } ); }; From 59600e8470391605e496677288898c8b18462b4d Mon Sep 17 00:00:00 2001 From: Aditya Date: Sat, 1 Feb 2025 10:45:44 +0530 Subject: [PATCH 5/9] fix: update loading condition for CircularProgress in Selectable component --- frontend/src/app-components/inputs/Selectable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index 86fca45b..58825430 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -209,7 +209,7 @@ const Selectable: FC = ({ onChange={(e) => handleTextChange(e.target.value)} placeholder={placeholder} endAdornment={ - true ? ( + loading ? ( Date: Wed, 12 Feb 2025 18:58:17 +0530 Subject: [PATCH 6/9] fix: set default loading state to false and add aria-label for accessibility in Selectable component --- frontend/src/app-components/inputs/Selectable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index 58825430..d744c734 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -73,7 +73,7 @@ const Selectable: FC = ({ placeholder = "", onChange, onSelect, - loading, + loading = false, }) => { const [text, setText] = useState(defaultValue || ""); const editableRef = useRef(null); @@ -218,6 +218,7 @@ const Selectable: FC = ({ top: "20%", transform: "translateY(-20%)", }} + aria-label="loading" /> ) : null } From 0497ae4380476a16de9eed71deb0ca8e2416cfbe Mon Sep 17 00:00:00 2001 From: Aditya Date: Wed, 12 Feb 2025 19:03:53 +0530 Subject: [PATCH 7/9] fix: update aria-label for loading indicator --- frontend/src/app-components/inputs/Selectable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index d744c734..c03141b1 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -218,7 +218,7 @@ const Selectable: FC = ({ top: "20%", transform: "translateY(-20%)", }} - aria-label="loading" + aria-label="Loading..." /> ) : null } From 31db210325e5eda0d70f7729a8d98550706d1131 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 13 Feb 2025 22:55:01 +0530 Subject: [PATCH 8/9] fix: replace local loading state with isLoading from useQuery in NlpTrainForm component --- .../src/components/nlp/components/NlpTrainForm.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/nlp/components/NlpTrainForm.tsx b/frontend/src/components/nlp/components/NlpTrainForm.tsx index 7ac321d4..11359161 100644 --- a/frontend/src/components/nlp/components/NlpTrainForm.tsx +++ b/frontend/src/components/nlp/components/NlpTrainForm.tsx @@ -67,7 +67,6 @@ const NlpDatasetSample: FC = ({ hasCount: false, }, ); - const [loading, setLoading] = useState(false); const getNlpValueFromCache = useGetFromCache(EntityType.NLP_VALUE); // eslint-disable-next-line react-hooks/exhaustive-deps const defaultValues: INlpSampleFormAttributes = useMemo( @@ -120,16 +119,10 @@ const NlpDatasetSample: FC = ({ }, 400), [setValue], ); - - useQuery({ + const { isLoading } = useQuery({ queryKey: ["nlp-prediction", currentText], queryFn: async () => { - setLoading(true); - try{ - return await apiClient.predictNlp(currentText); - }finally{ - setLoading(false); - } + return await apiClient.predictNlp(currentText); }, onSuccess: (result) => { const traitEntities: INlpDatasetTraitEntity[] = result.entities.filter( @@ -148,7 +141,6 @@ const NlpDatasetSample: FC = ({ }, enabled: !sample && !!currentText, }); - const findInsertIndex = (newItem: INlpDatasetKeywordEntity): number => { const index = keywordEntities.findIndex( (entity) => entity.start && newItem.start && entity.start > newItem.start, @@ -234,7 +226,7 @@ const NlpDatasetSample: FC = ({ })), ); }} - loading={loading} + loading={isLoading} /> From 32dbf11f043138fff0c1686fd5b4f39690df6365 Mon Sep 17 00:00:00 2001 From: Aditya Date: Thu, 13 Feb 2025 23:05:37 +0530 Subject: [PATCH 9/9] fix: add background color and border radius to loading indicator in Selectable component --- frontend/src/app-components/inputs/Selectable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/app-components/inputs/Selectable.tsx b/frontend/src/app-components/inputs/Selectable.tsx index c03141b1..d207dc54 100644 --- a/frontend/src/app-components/inputs/Selectable.tsx +++ b/frontend/src/app-components/inputs/Selectable.tsx @@ -217,6 +217,8 @@ const Selectable: FC = ({ right: 0, top: "20%", transform: "translateY(-20%)", + backgroundColor: "rgba(255, 255, 255, 0.7)", + borderRadius: "50%", }} aria-label="Loading..." />