Hotfix release (#14)

* The percentage for the inner annotator is not rounded to 2

* Embeddings on the active learning does not have space between

* On the users page, the old users have cards, but their data is not displayed

* Refresh on heuristics has sometimes issues

* Without any projects, if you upload a snapshot, there is an app error

* Removed second websocket hook

* Fixed issue for ws for projects

* Submodules

* Submodules

* Removed unused import

* Reinit submodules

* Reinit submodules

* Commit after readding the drone

* Test after changed public drone

* PR comment

* PR comments

* PR comments

* PR comments

* Small fix for duplicate projects

* Submodules merge

Author: lumburovskalina

src/components/projects/projectId/heuristics/heuristicId/active-learning/ActiveLearning.tsx

@@ -217,13 +217,13 @@ export default function ActiveLearning() {
 
     return (
         <HeuristicsLayout updateSourceCode={(code) => updateSourceCodeToDisplay(code)}>
+
             {currentHeuristic && <div>
                 <div className="relative flex-shrink-0 min-h-16 flex justify-between pb-2">
                     <div className="flex items-center flex-wrap mt-3">
                         <div className="text-sm leading-5 font-medium text-gray-700 inline-block mr-2">Editor</div>
                         <Tooltip content={TOOLTIPS_DICT.LABELING_FUNCTION.LABELING_TASK} color="invert" placement="top">
                             <Dropdown2 options={labelingTasks} buttonName={currentHeuristic?.labelingTaskName} selectedOption={(option: any) => saveHeuristic(option)} dropdownClasses="z-30" />
-
                         </Tooltip>
                         {currentHeuristic.labels?.length == 0 ? (<div className="text-sm font-normal text-gray-500 ml-3">No labels for target task</div>) : <>
                             {currentHeuristic.labels?.map((label: any, index: number) => (
@@ -243,17 +243,17 @@ export default function ActiveLearning() {
                                 <div className="text-sm leading-5 font-medium text-gray-700 inline-block mr-2">Embeddings</div>
                                 {embeddingsFiltered.map((embedding: Embedding, index: number) => <Fragment key={embedding.id}>
                                     {embedding.state == Status.FINISHED && <Tooltip content={TOOLTIPS_DICT.GENERAL.CLICK_TO_COPY} color="invert" placement="top">
-                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700 cursor-pointer" onClick={() => copyToClipboard(embedding.name)}>
+                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-700 cursor-pointer mr-2" onClick={() => copyToClipboard(embedding.name)}>
                                             {embedding.name}
                                         </span>
                                     </Tooltip>}
                                     {embedding.state == Status.FAILED && <Tooltip content={TOOLTIPS_DICT.LABELING_FUNCTION.CLICK_TO_COPY_ERROR} color="invert" placement="top">
-                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 cursor-pointer" onClick={() => copyToClipboard(embedding.name)}>
+                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 cursor-pointer mr-2" onClick={() => copyToClipboard(embedding.name)}>
                                             {embedding.name}
                                         </span>
                                     </Tooltip>}
-                                    {(embedding.state != Status.FINISHED && embedding.state != Status.FAILED) && <Tooltip content={TOOLTIPS_DICT.LABELING_FUNCTION.CLICK_TO_COPY_ERROR} color="invert" placement="top">
-                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 cursor-pointer" onClick={() => copyToClipboard(embedding.name)}>
+                                    {(embedding.state != Status.FINISHED && embedding.state != Status.FAILED) && <Tooltip content={TOOLTIPS_DICT.LABELING_FUNCTION.CLICK_TO_COPY_RUNNING} color="invert" placement="top">
+                                        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 cursor-pointer mr-2" onClick={() => copyToClipboard(embedding.name)}>
                                             {embedding.name}
                                         </span>
                                     </Tooltip>}

src/components/projects/projectId/heuristics/modals/AddZeroShotModal.tsx

@@ -52,7 +52,7 @@ export default function AddZeroShotModal() {
     }, [attributes]);
 
     useEffect(() => {
-        if (!project.tokenizer) return;
+        if (!project || !project.tokenizer || !models) return;
         const language = project.tokenizer.split("_")[0];
         const modelsFiltered = models.filter(model => model.language == language).sort((a, b) => a.prio - b.prio);
         dispatch(setCache(CacheEnum.ZERO_SHOT_RECOMMENDATIONS, modelsFiltered));

src/components/projects/projectId/overview/ProjectOverviewCards.tsx

@@ -47,7 +47,7 @@ export default function ProjectOverviewCards(props: ProjectOverviewCardsProps) {
                                             {props.projectStats.generalStats[card.stats]}
                                         </p>}
                                     {card.stats == CardStatsEnum.INTER_ANNOTATOR && <p className="text-2xl font-semibold text-gray-900">
-                                        {props.projectStats.interAnnotatorStat == -1 ? NOT_AVAILABLE : (props.projectStats.interAnnotatorStat * 100 + '%')}
+                                        {props.projectStats.interAnnotatorStat == -1 ? NOT_AVAILABLE : props.projectStats.interAnnotatorStat}
                                     </p>}
                                 </Tooltip>
                             </>

src/components/projects/projectId/settings/embeddings/DeleteEmbeddingModal.tsx

@@ -4,7 +4,6 @@ import { removeFromAllEmbeddingsById } from "@/src/reduxStore/states/pages/setti
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { DELETE_EMBEDDING, DELETE_FROM_TASK_QUEUE } from "@/src/services/gql/mutations/project-settings";
 import { ModalButton, ModalEnum } from "@/src/types/shared/modal";
-import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { useMutation } from "@apollo/client";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

src/components/shared/layout/Layout.tsx

@@ -5,7 +5,6 @@ import { GET_ALL_ACTIVE_ADMIN_MESSAGES, NOTIFICATIONS_BY_USER } from "@/src/serv
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { NotificationLevel } from "@/src/types/shared/notification-center";
 import { IconAlertTriangleFilled, IconCircleCheckFilled, IconInfoCircleFilled } from "@tabler/icons-react";
-import { CurrentPage } from "@/src/types/shared/general";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/src/reduxStore/states/general";
 import { interval } from "rxjs";
@@ -20,6 +19,7 @@ import { postProcessNotificationsUser } from "@/src/util/shared/notification-cen
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 import { useRouter } from "next/router";
 import { selectProjectId } from "@/src/reduxStore/states/project";
+import { CurrentPage } from "@/src/types/shared/general";
 
 const MIN_WIDTH = 1250;
 

src/components/shared/upload/ModalUpload.tsx

@@ -19,6 +19,7 @@ export default function ModalUpload(props: UploadProps) {
     const [projectName, setProjectName] = useState<string>("");
     const [isProjectTitleDuplicate, setProjectTitleDuplicate] = useState<boolean>(false);
     const [startUpload, setStartUpload] = useState<boolean>(false);
+    const [isFileUploaded, setIsFileUploaded] = useState<boolean>(false);
 
     const submitUpload = useCallback(() => {
         if (isProjectTitleDuplicate) return;
@@ -27,9 +28,9 @@ export default function ModalUpload(props: UploadProps) {
             setProjectName("");
             setStartUpload(false);
         });
-    }, []);
+    }, [isProjectTitleDuplicate]);
 
-    const [acceptButton, setAcceptButton] = useState<ModalButton>({ ...ACCEPT_BUTTON, emitFunction: submitUpload });
+    const [acceptButton, setAcceptButton] = useState<ModalButton>(ACCEPT_BUTTON);
     const [uploadOptions, setUploadOptions] = useState<UploadOptions>(null);
 
     const title = getTitle(uploadFileType);
@@ -49,6 +50,10 @@ export default function ModalUpload(props: UploadProps) {
         });
     }, [projectName, props.uploadOptions, uploadFileType]);
 
+    useEffect(() => {
+        setAcceptButton({ ...acceptButton, disabled: isFileUploaded && !isProjectTitleDuplicate ? false : true, emitFunction: submitUpload });
+    }, [isFileUploaded, isProjectTitleDuplicate, submitUpload]);
+
 
     function checkIfProjectNameDuplicate(value: string) {
         setProjectTitleDuplicate(projects.some(project => project.name == value));
@@ -79,7 +84,7 @@ export default function ModalUpload(props: UploadProps) {
                 </div>
             )}
             <Upload uploadOptions={uploadOptions} startUpload={startUpload} isFileUploaded={(isFileUploaded: boolean) => {
-                setAcceptButton({ ...acceptButton, disabled: isFileUploaded ? false : true });
+                setIsFileUploaded(isFileUploaded);
             }} closeModalEvent={props.closeModalEvent} />
         </Modal>
     );

src/components/shared/upload/Upload.tsx

@@ -1,15 +1,15 @@
 import { UploadFileType, UploadProps, UploadState, UploadStates, UploadTask, UploadType } from "@/src/types/shared/upload";
 import { useDispatch, useSelector } from "react-redux";
 import UploadField from "./helper-components/UploadField";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import UploadWrapper from "./helper-components/UploadWrapper";
 import { selectUploadData, setImportOptions } from "@/src/reduxStore/states/upload";
 import { useLazyQuery, useMutation } from "@apollo/client";
 import { CREATE_PROJECT, DELETE_PROJECT, UPDATE_PROJECT_STATUS, UPDATE_PROJECT_TOKENIZER } from "@/src/services/gql/mutations/projects";
 import { ProjectStatus } from "@/src/types/components/projects/projects-list";
 import { timer } from "rxjs";
 import { uploadFile } from "@/src/services/base/s3-service";
-import { CurrentPage } from "@/src/types/shared/general";
+import { CurrentPage, CurrentPageSubKey } from "@/src/types/shared/general";
 import { jsonCopy } from "@/submodules/javascript-functions/general";
 import { useRouter } from "next/router";
 import { extendAllProjects, removeFromAllProjectsById, selectAllProjects, selectProjectId } from "@/src/reduxStore/states/project";
@@ -53,7 +53,7 @@ export default function Upload(props: UploadProps) {
     const [getUploadTaskId] = useLazyQuery(GET_UPLOAD_TASK_BY_TASK_ID, { fetchPolicy: 'network-only' });
 
     useEffect(() => {
-        if (!props.uploadOptions.tokenizerValues) return;
+        if (!props.uploadOptions || !props.uploadOptions.tokenizerValues) return;
         const tokenizerValuesDisplay = [...props.uploadOptions.tokenizerValues];
         tokenizerValuesDisplay.forEach((tokenizer: any, index: number) => {
             const tokenizerNameContainsBrackets = tokenizer.name.includes('(') && tokenizer.name.includes(')');
@@ -62,7 +62,7 @@ export default function Upload(props: UploadProps) {
             tokenizerValuesDisplay[index] = tokenizerCopy;
         });
         setPrepareTokenizedValues(tokenizerValuesDisplay);
-    }, [props.uploadOptions.tokenizerValues]);
+    }, [props.uploadOptions]);
 
     useEffect(() => {
         if (props.startUpload) {
@@ -75,7 +75,7 @@ export default function Upload(props: UploadProps) {
             props.isFileUploaded(selectedFile != null);
     }, [selectedFile]);
 
-    function handleWebsocketNotification(msgParts: string[]) {
+    const handleWebsocketNotification = useCallback((msgParts: string[]) => {
         const uploadTask = UploadHelper.getUploadTask();
         const projectId = UploadHelper.getProjectId();
         if (!uploadTask) return;
@@ -114,11 +114,11 @@ export default function Upload(props: UploadProps) {
         } else {
             console.log("unknown websocket message in part 3:" + msgParts[3], "full message:", msgParts)
         }
-    }
+    }, [props.uploadOptions?.deleteProjectOnFail, props.uploadOptions?.reloadOnFinish]);
 
     function submitUpload() {
         setSubmitted(true);
-        if (!selectedFile) return;
+        if (!selectedFile || isProjectTitleDuplicate || isProjectTitleEmpty) return;
         if (uploadFileType == UploadFileType.RECORDS_NEW) {
             if (projectTitle.trim() == "") {
                 setIsProjectTitleEmpty(true);
@@ -219,7 +219,7 @@ export default function Upload(props: UploadProps) {
         UploadHelper.setUploadTask(task);
         if (task.state == UploadStates.DONE || task.progress == 100) {
             clearUploadTask();
-            if (props.uploadOptions.reloadOnFinish) location.reload();
+            if (props.uploadOptions && props.uploadOptions.reloadOnFinish) location.reload();
             else setUploadStarted(false);
             router.push('/projects/' + UploadHelper.getProjectId() + '/settings');
         }
@@ -253,11 +253,11 @@ export default function Upload(props: UploadProps) {
         if (findProjectName) setIsProjectTitleDuplicate(true);
         else setIsProjectTitleDuplicate(false);
     }
-
+    useWebsocket(CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.FILE_UPLOAD);
     useWebsocket(CurrentPage.UPLOAD_RECORDS, handleWebsocketNotification, UploadHelper.getProjectId());
 
-    return (
-        <section className={`${!props.uploadOptions.isModal ? 'p-4' : ''}`}>
+    return <>
+        {props.uploadOptions && <section className={`${!props.uploadOptions.isModal ? 'p-4' : ''}`}>
             {uploadFileType == UploadFileType.PROJECT && (<>
                 <UploadField isFileCleared={selectedFile == null} uploadStarted={uploadStarted} doingSomething={doingSomething} progressState={progressState} sendSelectedFile={(file) => {
                     setSelectedFile(file);
@@ -270,7 +270,7 @@ export default function Upload(props: UploadProps) {
                 {props.uploadOptions.showBadPasswordMsg && (<div className="text-red-700 text-xs mt-2 text-center">Wrong password</div>)}
             </>
             )}
-            {uploadFileType == UploadFileType.RECORDS_NEW && (<>
+            {uploadFileType == UploadFileType.RECORDS_NEW && (<div className="min-h-full h-[calc(100vh-7rem)] overflow-y-auto">
                 <div className="form-control">
                     <label className="text-gray-500 text-sm font-normal">Project title</label>
                     <div className="flex flex-row">
@@ -303,25 +303,25 @@ export default function Upload(props: UploadProps) {
                     isModal={props.uploadOptions.isModal} submitUpload={submitUpload} sendSelectedFile={(file) => {
                         setSelectedFile(file);
                     }} setKey={(key) => setKey(key)} />
-            </>
+            </div>
             )}
 
-            {uploadFileType == UploadFileType.RECORDS_ADD && (<>
+            {uploadFileType == UploadFileType.RECORDS_ADD && (<div className="min-h-full h-[calc(100vh-7rem)] overflow-y-auto">
                 <div className="text-lg leading-6 text-gray-900 font-medium inline-block">
                     Record upload
                 </div>
                 <div className="text-sm text-gray-500 font-normal mt-2">Add additional records to your project</div>
                 <UploadWrapper uploadStarted={uploadStarted} doingSomething={doingSomething} progressState={progressState} submitted={submitted} isFileCleared={selectedFile == null}
                     isModal={props.uploadOptions.isModal} submitUpload={submitUpload} sendSelectedFile={(file) => {
                         setSelectedFile(file);
-                    }} setKey={(key) => setKey(key)} /></>)}
+                    }} setKey={(key) => setKey(key)} /></div>)}
 
             {uploadFileType == UploadFileType.KNOWLEDGE_BASE && (
                 <UploadWrapper uploadStarted={uploadStarted} doingSomething={doingSomething} progressState={progressState} submitted={submitted} isFileCleared={selectedFile == null}
                     isModal={props.uploadOptions.isModal} submitUpload={submitUpload} sendSelectedFile={(file) => {
                         setSelectedFile(file);
                     }} setKey={(key) => setKey(key)} />)
             }
-        </section >
-    )
+        </section >}
+    </>
 }

src/components/users/UsersList.tsx

@@ -2,7 +2,8 @@ import { selectAnnotators, selectEngineers, selectExperts, selectInactiveOrganiz
 import { useSelector } from "react-redux"
 import YoutubeIntroduction from "../projects/YoutubeIntroduction";
 import { User } from "@/src/types/shared/general";
-import { IconCheck, IconUsersGroup } from "@tabler/icons-react";
+import { IconUsersGroup } from "@tabler/icons-react";
+import { UNKNOWN_USER } from "@/src/util/constants";
 
 export default function UsersList() {
     const isManaged = useSelector(selectIsManaged);
@@ -196,7 +197,7 @@ export default function UsersList() {
                                 <div className="min-w-0 flex-1">
                                     <a className="focus:outline-none">
                                         <span className="absolute inset-0" aria-hidden="true"></span>
-                                        <p className="text-sm font-medium text-gray-900">{user.firstName} {user.lastName}</p>
+                                        <p className="text-sm font-medium text-gray-900">{user.firstName && user.lastName ? user.firstName + ' ' + user.lastName : UNKNOWN_USER}</p>
                                         <p className="truncate text-sm text-gray-500">{user.mail}</p>
                                     </a>
                                 </div>
@@ -223,7 +224,7 @@ export default function UsersList() {
                                 <div className="min-w-0 flex-1">
                                     <a className="focus:outline-none">
                                         <span className="absolute inset-0" aria-hidden="true"></span>
-                                        <p className="text-sm font-medium text-gray-900">{user.firstName} {user.lastName}</p>
+                                        <p className="text-sm font-medium text-gray-900">{user.firstName && user.lastName ? user.firstName + ' ' + user.lastName : UNKNOWN_USER}</p>
                                         <p className="truncate text-sm text-gray-500">{user.mail}</p>
                                     </a>
                                 </div>
@@ -259,7 +260,7 @@ export default function UsersList() {
                                 <div className="min-w-0 flex-1">
                                     <a className="focus:outline-none">
                                         <span className="absolute inset-0" aria-hidden="true"></span>
-                                        <p className="text-sm font-medium text-gray-900">{user.firstName} {user.lastName}</p>
+                                        <p className="text-sm font-medium text-gray-900">{user.firstName && user.lastName ? user.firstName + ' ' + user.lastName : UNKNOWN_USER}</p>
                                         <p className="truncate text-sm text-gray-500">{user.mail}</p>
                                     </a>
                                 </div>

src/services/base/web-sockets/useWebsocket.tsx

@@ -29,7 +29,8 @@ export function useWebsocket(currentPage: CurrentPage, handleFunction: (msgParts
 const WHITELIST_LOOKUP = {
     [CurrentPage.PROJECTS]: {
         [CurrentPageSubKey.NONE]: ['project_created', 'project_deleted', 'project_update', 'file_upload'],
-        [CurrentPageSubKey.BUTTONS_CONTAINER]: ['bad_password']
+        [CurrentPageSubKey.BUTTONS_CONTAINER]: ['bad_password'],
+        [CurrentPageSubKey.FILE_UPLOAD]: ['file_upload']
     },
     [CurrentPage.UPLOAD_RECORDS]: {
         [CurrentPageSubKey.NONE]: ['file_upload']

src/types/components/projects/projectId/project-overview/project-overview.ts

@@ -7,7 +7,7 @@ export type ProjectStats = {
     generalStats: {};
     interAnnotatorLoading: boolean;
     interAnnotator: string;
-    interAnnotatorStat: number;
+    interAnnotatorStat: number | string;
     tooltipsArray?: any;
 };