Switching between available links

Author: lumburovskalina

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

@@ -339,13 +339,13 @@ export default function LabelingMainComponent() {
     }, [handleWebsocketNotification, projectId]);
 
     return (<div className={`h-full bg-white flex flex-col ${LabelingSuiteManager.somethingLoading ? style.wait : ''}`}>
-        <NavigationBarTop absoluteWarning={absoluteWarning} />
+        <NavigationBarTop absoluteWarning={absoluteWarning} lockedLink={lockedLink} />
         <div className="flex-grow overflow-y-auto" style={{ height: 'calc(100vh - 194px)' }}>
             {!lockedLink && <>
                 {settings.task.show && (user?.role != UserRole.ANNOTATOR && userDisplayRole != UserRole.ANNOTATOR) && <LabelingSuiteTaskHeader />}
                 <LabelingSuiteLabeling />
                 {settings.overviewTable.show && SessionManager.currentRecordId !== "deleted" && <LabelingSuiteOverviewTable />}</>}
         </div>
-        <NavigationBarBottom />
+        {!lockedLink ? <NavigationBarBottom /> : <div className="relative flex-shrink-0 bg-white shadow-sm flex justify-between items-center h-16"></div>}
     </div>)
 }

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

@@ -1,7 +1,7 @@
 import { selectUser } from "@/src/reduxStore/states/general";
 import { selectAvailableLinks, selectDisplayUserRole, selectSelectedLink, selectUserDisplayId, selectUserIconsData, setAvailableLinks, setHoverGroupDict, setSelectedLink, setUserDisplayId } from "@/src/reduxStore/states/pages/labeling";
 import { selectProjectId } from "@/src/reduxStore/states/project";
-import { LabelingLinkType, UserType } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
+import { LabelingLinkType, NavigationBarTopProps, UserType } from "@/src/types/components/projects/projectId/labeling/labeling-main-component";
 import { UserRole } from "@/src/types/shared/sidebar";
 import { SessionManager } from "@/src/util/classes/labeling/session-manager";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
@@ -14,8 +14,9 @@ import Dropdown2 from "@/submodules/react-components/components/Dropdown2";
 import { useEffect } from "react";
 import { useLazyQuery } from "@apollo/client";
 import { AVAILABLE_LABELING_LINKS } from "@/src/services/gql/queries/labeling";
+import { parseLinkFromText } from "@/src/util/shared/link-parser-helper";
 
-export default function NavigationBarTop(props: { absoluteWarning?: string }) {
+export default function NavigationBarTop(props: NavigationBarTopProps) {
     const router = useRouter();
     const dispatch = useDispatch();
 
@@ -56,6 +57,12 @@ export default function NavigationBarTop(props: { absoluteWarning?: string }) {
         router.push(`/projects/${projectId}/labeling/${SessionManager.labelingLinkData.huddleId}?pos=${SessionManager.huddleData.linkData.requestedPos}&type=${SessionManager.huddleData.linkData.linkType}`);
     }
 
+    function dropdownSelectLink(option: any) {
+        dispatch(setSelectedLink(option));
+        const linkData = parseLinkFromText(option.link);
+        router.push(`${linkData.route}?pos=${linkData.queryParams.pos}&type=${linkData.queryParams.type}`)
+    }
+
     return (<>
         {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">
@@ -100,8 +107,8 @@ export default function NavigationBarTop(props: { absoluteWarning?: string }) {
 
                     </>) : (<div className="flex justify-center items-center overflow-visible">
                         <span className="mr-2"> Available Tasks:</span>
-                        <Dropdown2 options={availableLinks && availableLinks.length > 0 ? availableLinks : ['No links available']} disabled={availableLinks?.length == 0}
-                            buttonName={selectedLink ? selectedLink.name : 'Select slice'} selectedOption={(option: any) => dispatch(setSelectedLink(option))} />
+                        <Dropdown2 options={availableLinks && availableLinks.length > 0 ? availableLinks : ['No links available']} disabled={availableLinks?.length == 0 || props.lockedLink}
+                            buttonName={selectedLink ? selectedLink.name : 'Select slice'} selectedOption={(option: any) => dropdownSelectLink(option)} />
                     </div>)}
                 </div>
                 {props.absoluteWarning && <div className="left-0 right-0 flex items-center justify-center pointer-events-none top-4 z-100">

src/types/components/projects/projectId/labeling/labeling-main-component.ts

@@ -44,4 +44,9 @@ export enum LabelingPageParts {
     MANUAL = 'MANUAL',
     WEAK_SUPERVISION = 'WEAK_SUPERVISION',
     INFORMATION_SOURCE = 'INFORMATION_SOURCE',
+}
+
+export type NavigationBarTopProps = {
+    absoluteWarning: boolean;
+    lockedLink: boolean;
 }