Smaller fixed for annotators and locked links

Author: lumburovskalina

src/components/projects/projectId/labeling/sessionId/main-component/LabelingMainComponent.tsx

@@ -64,7 +64,7 @@ export default function LabelingMainComponent() {
     useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.LABELING]), []);
 
     useEffect(() => {
-        if (!projectId) return;
+        if (!projectId || !router.query) return;
         let tmp = localStorage.getItem(SETTINGS_KEY);
         if (tmp) {
             dispatch(setSettings(JSON.parse(tmp)));
@@ -87,7 +87,7 @@ export default function LabelingMainComponent() {
             whitelist: ['attributes_updated', 'calculate_attribute', 'payload_finished', 'weak_supervision_finished', 'record_deleted', 'rla_created', 'rla_deleted', 'access_link_changed', 'access_link_removed', 'label_created', 'label_deleted', 'labeling_task_deleted', 'labeling_task_updated', 'labeling_task_created'],
             func: handleWebsocketNotification
         });
-    }, [projectId]);
+    }, [projectId, router.query]);
 
     //destructor
     useEffect(() => () => {
@@ -104,7 +104,10 @@ export default function LabelingMainComponent() {
         refetchLinkLocked({ variables: { projectId: projectId, linkRoute: router.asPath } }).then((result) => {
             const lockedLink = result['data']['linkLocked'];
             if (lockedLink) {
-                setAbsoluteWarning(user?.role !== UserRole.ENGINEER ? 'This link is locked, contact your supervisor to request access' : null)
+                setAbsoluteWarning('This link is locked, contact your supervisor to request access');
+                if (router.query.type == LabelingLinkType.HEURISTIC) {
+                    dispatch(setDisplayUserRole(UserRole.ANNOTATOR));
+                }
             } else {
                 if (router.query.type == LabelingLinkType.HEURISTIC) {
                     dispatch(setDisplayUserRole(UserRole.ANNOTATOR));
@@ -300,7 +303,8 @@ export default function LabelingMainComponent() {
 
     function prepareTasksForRole(taskData: LabelingTask[], userDisplayRole): LabelingTask[] {
         if (user?.role != UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR) return taskData;
-        const taskId = JSON.parse(localStorage.getItem('huddleData'))?.allowedTask;
+        if (!JSON.parse(localStorage.getItem('huddleData'))) return null;
+        const taskId = JSON.parse(localStorage.getItem('huddleData')).allowedTask;
         if (!taskId) return null;
         else return taskData.filter(t => t.id == taskId);
     }

src/components/projects/projectId/labeling/sessionId/main-component/NavigationBarTop.tsx

@@ -67,7 +67,7 @@ export default function NavigationBarTop(props: NavigationBarTopProps) {
         {user && <div className="w-full px-4 border-gray-200 border-b h-16">
             <div className="relative flex-shrink-0 bg-white shadow-sm flex justify-between items-center h-full">
                 <div className="flex flex-row flex-nowrap items-center">
-                    {user.role == UserRole.ENGINEER ? (<>
+                    {user.role == UserRole.ENGINEER && userDisplayRole == UserRole.ENGINEER ? (<>
                         <div className="flex justify-center overflow-visible">
                             <Tooltip content={TOOLTIPS_DICT.LABELING.NAVIGATE_TO_DATA_BROWSER} placement="bottom" color="invert">
                                 <button onClick={() => router.push(`/projects/${projectId}/data-browser`)}

src/components/projects/projectId/labeling/sessionId/sub-components/LabelingSuiteLabeling.tsx

@@ -1,15 +1,15 @@
 import LoadingIcon from "@/src/components/shared/loading/LoadingIcon"
 import { selectUser } from "@/src/reduxStore/states/general"
 import { removeFromRlaById, selectDisplayUserRole, selectHoverGroupDict, selectRecordRequests, selectRecordRequestsRecord, selectSettings, selectTmpHighlightIds, selectUserDisplayId, setHoverGroupDict, tmpAddHighlightIds } from "@/src/reduxStore/states/pages/labeling"
-import { selectAttributes, selectLabelingTasksAll, selectVisibleAttributesLabeling } from "@/src/reduxStore/states/pages/settings"
+import { selectLabelingTasksAll, selectVisibleAttributesLabeling } from "@/src/reduxStore/states/pages/settings"
 import { selectProjectId } from "@/src/reduxStore/states/project"
 import { HotkeyLookup, LabelSourceHover, LabelingVars, TokenLookup } from "@/src/types/components/projects/projectId/labeling/labeling"
 import { LabelingTaskTaskType } from "@/src/types/components/projects/projectId/settings/labeling-tasks"
 import { UserRole } from "@/src/types/shared/sidebar"
 import { DEFAULT_LABEL_COLOR, FULL_RECORD_ID, SWIM_LANE_SIZE_PX, buildLabelingRlaData, checkCanEditLabels, collectSelectionData, filterRlaDataForLabeling, findOrderPosItem, getDefaultLabelingVars, getFirstFitPos, getGoldInfoForTask, getOrderLookupItem, getOrderLookupSort, getTaskTypeOrder, getTokenData, parseSelectionData } from "@/src/util/components/projects/projectId/labeling/labeling-helper"
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants"
 import { Tooltip } from "@nextui-org/react"
-import { IconAlertCircle, IconAssembly, IconBolt, IconCode, IconSparkles, IconStar, IconStarFilled, IconUsers } from "@tabler/icons-react"
+import { IconAlertCircle, IconAssembly, IconBolt, IconCode, IconSparkles, IconStar, IconUsers } from "@tabler/icons-react"
 import { Fragment, useRef, useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import ExtractionDisplay from "./ExtractionDisplay"
@@ -20,7 +20,7 @@ import { LabelingSuiteManager } from "@/src/util/classes/labeling/manager";
 import { useMutation } from "@apollo/client"
 import { ADD_CLASSIFICATION_LABELS_TO_RECORD, ADD_EXTRACTION_LABEL_TO_RECORD, CREATE_LABEL, DELETE_RECORD_LABEL_ASSOCIATION_BY_ID, REMOVE_GOLD_STAR_ANNOTATION_FOR_TASK, SET_GOLD_STAR_ANNOTATION_FOR_TASK } from "@/src/services/gql/mutations/labeling"
 import { SessionManager } from "@/src/util/classes/labeling/session-manager"
-import { ALL_USERS_USER_ID, GOLD_STAR_USER_ID } from "@/src/util/components/projects/projectId/labeling/labeling-main-component-helper"
+import { GOLD_STAR_USER_ID } from "@/src/util/components/projects/projectId/labeling/labeling-main-component-helper"
 import { useRouter } from "next/router"
 import LabelSelectionBox from "./LabelSelectionBox"
 import { filterRlaDataForUser } from "@/src/util/components/projects/projectId/labeling/overview-table-helper"
@@ -71,11 +71,11 @@ export default function LabelingSuiteLabeling() {
     const [removeGoldStarMut] = useMutation(REMOVE_GOLD_STAR_ANNOTATION_FOR_TASK);
 
     useEffect(() => {
-        if (!projectId || !attributes || !recordRequests || !user || !settings || !userDisplayRole) return;
+        if (!projectId || !attributes || !recordRequests || !user || !settings || !userDisplayRole || !labelingTasks) return;
         attributesChanged();
         prepareRlaData();
         rebuildGoldInfo();
-    }, [projectId, attributes, recordRequests, user, settings, userDisplayRole]);
+    }, [projectId, attributes, recordRequests, user, settings, userDisplayRole, labelingTasks]);
 
     useEffect(() => {
         if (!labelingTasks || !lVars) return;
@@ -136,10 +136,10 @@ export default function LabelingSuiteLabeling() {
     }, [tokenLookup]);
 
     useEffect(() => {
-        if (!settings) return;
+        if (!settings || !lVars || !labelingTasks) return;
         rebuildTaskLookup(lVars);
         filterRlaDataForCurrent();
-    }, [settings]);
+    }, [settings, lVars, labelingTasks]);
 
     useEffect(() => {
         if (!user || !displayUserId || !userDisplayRole) return;

src/reduxStore/StoreManagerComponent.tsx

@@ -19,6 +19,7 @@ import { checkWhitelistTokenizer } from "../util/components/projects/new-project
 import { ConfigManager } from "../services/base/config";
 import postprocessVersionOverview from "../util/shared/sidebar-helper";
 import { postProcessingEmbeddingPlatforms } from "../util/components/projects/projectId/settings/embeddings-helper";
+import { setDisplayUserRole } from "./states/pages/labeling";
 
 export function GlobalStoreDataComponent(props: React.PropsWithChildren) {
     const router = useRouter();
@@ -56,6 +57,7 @@ export function GlobalStoreDataComponent(props: React.PropsWithChildren) {
             const userInfo = { ...res.data["userInfo"] };
             userInfo.avatarUri = getUserAvatarUri(res.data["userInfo"]);
             dispatch(setUser(userInfo));
+            dispatch(setDisplayUserRole(res.data["userInfo"].role));
         });
         refetchOrganization().then((res) => {
             if (res.data["userOrganization"]) {