User roles different display

Author: lumburovskalina

src/components/projects/projectId/data-browser/modals/DataSliceInfoModal.tsx

@@ -1,25 +1,29 @@
 import Modal from "@/src/components/shared/modal/Modal";
 import { selectIsManaged } from "@/src/reduxStore/states/general";
-import { selectModal } from "@/src/reduxStore/states/modal";
+import { closeModal, selectModal } from "@/src/reduxStore/states/modal";
+import { setDisplayUserRole } from "@/src/reduxStore/states/pages/labeling";
 import { ModalEnum } from "@/src/types/shared/modal";
+import { UserRole } from "@/src/types/shared/sidebar";
 import { parseLinkFromText } from "@/src/util/shared/link-parser-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { copyToClipboard } from "@/submodules/javascript-functions/general";
 import { Tooltip } from "@nextui-org/react";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function DataSliceInfoModal() {
     const router = useRouter();
-
+    const dispatch = useDispatch();
 
     const isManaged = useSelector(selectIsManaged);
     const modalSliceInfo = useSelector(selectModal(ModalEnum.DATA_SLICE_INFO));
 
     function testLink(link) {
+        dispatch(setDisplayUserRole(UserRole.EXPERT));
         const linkData = parseLinkFromText(link);
         router.push(linkData.fullUrl);
+        dispatch(closeModal(ModalEnum.DATA_SLICE_INFO));
     }
 
     return (<Modal modalName={ModalEnum.DATA_SLICE_INFO}>

src/components/projects/projectId/heuristics/heuristicId/crowd-labeler/CrowdLabelerSettings.tsx

@@ -1,9 +1,11 @@
 import { selectAnnotators, selectAnnotatorsDict } from "@/src/reduxStore/states/general";
 import { selectDataSlicesAll, selectDataSlicesDict } from "@/src/reduxStore/states/pages/data-browser";
 import { selectHeuristic, updateHeuristicsState } from "@/src/reduxStore/states/pages/heuristics";
+import { setDisplayUserRole } from "@/src/reduxStore/states/pages/labeling";
 import { selectLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { CREATE_ACCESS_LINK, LOCK_ACCESS_LINK, REMOVE_ACCESS_LINK, UPDATE_INFORMATION_SOURCE } from "@/src/services/gql/mutations/heuristics";
+import { UserRole } from "@/src/types/shared/sidebar";
 import { parseToSettingsJson } from "@/src/util/components/projects/projectId/heuristics/heuristicId/crowd-labeler-helper";
 import { buildFullLink, parseLinkFromText } from "@/src/util/shared/link-parser-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
@@ -73,6 +75,7 @@ export default function CrowdLabelerSettings() {
 
 
     function testLink() {
+        dispatch(setDisplayUserRole(UserRole.ANNOTATOR));
         const linkData = parseLinkFromText(currentHeuristic.crowdLabelerSettings.accessLink);
         router.push(linkData.fullUrl);
     }

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

@@ -1,5 +1,5 @@
 import { selectAllUsers, selectUser, setBricksIntegrator, setComments } from "@/src/reduxStore/states/general";
-import { setAvailableLinks, updateRecordRequests, setSelectedLink, selectRecordRequestsRla, updateUsers, setSettings, selectSettings, setUserDisplayId, selectRecordRequestsRecord, initOnLabelPageDestruction, selectUserDisplayId } from "@/src/reduxStore/states/pages/labeling";
+import { setAvailableLinks, updateRecordRequests, setSelectedLink, selectRecordRequestsRla, updateUsers, setSettings, selectSettings, setUserDisplayId, selectRecordRequestsRecord, initOnLabelPageDestruction, selectUserDisplayId, selectDisplayUserRole, setDisplayUserRole } from "@/src/reduxStore/states/pages/labeling";
 import { selectProjectId } from "@/src/reduxStore/states/project"
 import { AVAILABLE_LABELING_LINKS, GET_RECORD_LABEL_ASSOCIATIONS, GET_TOKENIZED_RECORD, REQUEST_HUDDLE_DATA } from "@/src/services/gql/queries/labeling";
 import { LabelingLinkType } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
@@ -45,8 +45,10 @@ export default function LabelingMainComponent() {
     const record = useSelector(selectRecordRequestsRecord);
     const allUsers = useSelector(selectAllUsers);
     const userDisplayId = useSelector(selectUserDisplayId);
+    const userDisplayRole = useSelector(selectDisplayUserRole);
 
     const [huddleData, setHuddleData] = useState(null);
+    const [absoluteWarning, setAbsoluteWarning] = useState(null);
 
     const [refetchHuddleData] = useLazyQuery(REQUEST_HUDDLE_DATA, { fetchPolicy: 'no-cache' });
     const [refetchAvailableLinks] = useLazyQuery(AVAILABLE_LABELING_LINKS, { fetchPolicy: 'no-cache' });
@@ -89,7 +91,20 @@ export default function LabelingMainComponent() {
     useEffect(() => () => {
         SessionManager.initMeOnDestruction();
         dispatch(initOnLabelPageDestruction());
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        if (!router.query.sessionId || !user) return;
+        if (router.query.type == LabelingLinkType.HEURISTIC) {
+            dispatch(setDisplayUserRole(UserRole.ANNOTATOR));
+            setAbsoluteWarning(user?.role == UserRole.ENGINEER ? 'You are viewing this page as ' + UserRole.ANNOTATOR + ' you are not able to edit' : null);
+        } else if (router.query.type == LabelingLinkType.DATA_SLICE) {
+            dispatch(setDisplayUserRole(UserRole.EXPERT));
+            setAbsoluteWarning(user?.role == UserRole.ENGINEER ? 'You are viewing this page as ' + UserRole.EXPERT + ' you are not able to edit' : null);
+        } else {
+            dispatch(setDisplayUserRole(user.role));
+        }
+    }, [router.query, user]);
 
     useEffect(() => {
         if (!projectId) return;
@@ -222,7 +237,10 @@ export default function LabelingMainComponent() {
                 if (SessionManager.labelingLinkData) SessionManager.changeLinkLockState(true);
                 return;
             }
-            if (huddleData.startPos != -1) SessionManager.labelingLinkData.requestedPos = huddleData.startPos;
+            if (huddleData.startPos != -1) {
+                if (userDisplayRole != UserRole.ENGINEER) SessionManager.labelingLinkData.requestedPos = 0;
+                else SessionManager.labelingLinkData.requestedPos = huddleData.startPos;
+            }
             SessionManager.huddleData = {
                 recordIds: huddleData.recordIds ? huddleData.recordIds as string[] : [],
                 partial: false,
@@ -236,12 +254,13 @@ export default function LabelingMainComponent() {
             let pos = SessionManager.labelingLinkData.requestedPos;
             if (huddleData.startPos != -1) pos++; //zero based in backend
             SessionManager.jumpToPosition(pos);
+            dispatch(setDisplayUserRole(user.role));
             router.push(`/projects/${projectId}/labeling/${SessionManager.huddleData.linkData.huddleId}?pos=${SessionManager.huddleData.linkData.requestedPos}&type=${SessionManager.huddleData.linkData.linkType}`);
         });
     }
 
     function collectAvailableLinks() {
-        if (user?.role == UserRole.ENGINEER) return;
+        if (userDisplayRole?.role == UserRole.ENGINEER) return;
         const heuristicId = SessionManager.labelingLinkData.linkType == LabelingLinkType.HEURISTIC ? SessionManager.labelingLinkData.huddleId : null;
         refetchAvailableLinks({ variables: { projectId: projectId, assumedRole: user?.role, assumedHeuristicId: heuristicId } }).then((result) => {
             const availableLinks = result['data']['availableLinks'];
@@ -261,13 +280,13 @@ export default function LabelingMainComponent() {
         refetchLabelingTasksByProjectId({ variables: { projectId: projectId } }).then((res) => {
             const labelingTasks = postProcessLabelingTasks(res['data']['projectByProjectId']['labelingTasks']['edges']);
             const labelingTasksProcessed = postProcessLabelingTasksSchema(labelingTasks);
-            dispatch(setLabelingTasksAll(prepareTasksForRole(labelingTasksProcessed)));
+            dispatch(setLabelingTasksAll(prepareTasksForRole(labelingTasksProcessed, userDisplayRole)));
         });
     }
 
-    function prepareTasksForRole(taskData: LabelingTask[]): LabelingTask[] {
-        if (user?.role != UserRole.ANNOTATOR) return taskData;
-        const taskId = JSON.parse(localStorage.getItem('huddleData')).allowedTask;
+    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 (!taskId) return null;
         else return taskData.filter(t => t.id == taskId);
     }
@@ -306,12 +325,9 @@ export default function LabelingMainComponent() {
     }, [handleWebsocketNotification, projectId]);
 
     return (<div className={`h-full bg-white flex flex-col ${LabelingSuiteManager.somethingLoading ? style.wait : ''}`}>
-        {LabelingSuiteManager.absoluteWarning && <div className="absolute left-0 right-0 flex items-center justify-center pointer-events-none top-4 z-100">
-            <span className="inline-flex items-center px-2 py-0.5 rounded font-medium bg-red-100 text-red-800">{LabelingSuiteManager.absoluteWarning}</span>
-        </div>}
-        <NavigationBarTop />
+        <NavigationBarTop absoluteWarning={absoluteWarning} />
         <div className="flex-grow overflow-y-auto" style={{ height: 'calc(100vh - 194px)' }}>
-            {settings.task.show && user?.role != UserRole.ANNOTATOR && <LabelingSuiteTaskHeader />}
+            {settings.task.show && (user?.role != UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR) && <LabelingSuiteTaskHeader />}
             <LabelingSuiteLabeling />
             {settings.overviewTable.show && SessionManager.currentRecordId !== "deleted" && <LabelingSuiteOverviewTable />}
         </div>

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

@@ -7,7 +7,7 @@ import { Tooltip } from "@nextui-org/react";
 import { IconSettings, IconTrash } from "@tabler/icons-react";
 import { useDispatch, useSelector } from "react-redux";
 import DeleteRecordModal from "./DeleteRecordModal";
-import { selectRecordRequestsRecord, selectSettings, updateSettings } from "@/src/reduxStore/states/pages/labeling";
+import { selectDisplayUserRole, selectRecordRequestsRecord, selectSettings, updateSettings } from "@/src/reduxStore/states/pages/labeling";
 import { ComponentType } from "@/src/types/components/projects/projectId/labeling/settings";
 import LabelingSettingsModal from "./LabelingSettingsModal";
 
@@ -17,6 +17,7 @@ export default function NavigationBarBottom() {
     const settings = useSelector(selectSettings);
     const user = useSelector(selectUser);
     const record = useSelector(selectRecordRequestsRecord);
+    const userDisplayRole = useSelector(selectDisplayUserRole);
 
     function toggleAutoNextRecord() {
         dispatch(updateSettings(ComponentType.MAIN, 'autoNextRecord'));
@@ -40,7 +41,7 @@ export default function NavigationBarBottom() {
             <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">
                     <div className="flex justify-center overflow-visible">
-                        {user.role == UserRole.ENGINEER && <Tooltip content={TOOLTIPS_DICT.LABELING.DELETE_CURRENT_RECORD} color="invert" placement="top">
+                        {user.role == UserRole.ENGINEER && userDisplayRole == UserRole.ENGINEER && <Tooltip content={TOOLTIPS_DICT.LABELING.DELETE_CURRENT_RECORD} color="invert" placement="top">
                             <button onClick={() => dispatch(openModal(ModalEnum.DELETE_RECORD))} disabled={record == null}
                                 className="bg-red-100 text-red-700 border border-red-400 text-xs font-semibold mr-3 px-4 py-2 rounded-md flex hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed">
                                 <IconTrash className="mr-2" size={16} />
@@ -75,7 +76,7 @@ export default function NavigationBarBottom() {
                         </>}
                     </div>
                 </div>
-                {user.role !== UserRole.ANNOTATOR && <Tooltip onClick={() => dispatch(openModal(ModalEnum.LABELING_SETTINGS))}
+                {user.role !== UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR && <Tooltip onClick={() => dispatch(openModal(ModalEnum.LABELING_SETTINGS))}
                     content={<div className="w-32">Open Labeling Suite settings</div>} color="invert" placement="left">
                     <div className="p-2 border border-gray-300 rounded-md">
                         <IconSettings className="h-6 w-6" />