#VFB-241- feat: implement misalignment handling in TerminfoSlider com…

applications/virtual-fly-brain/frontend/src/components/TermInfo/TerminfoSlider.jsx

@@ -7,7 +7,7 @@
 import { Slide } from 'react-slideshow-image';
 import { ChevronLeft, FullScreen } from '../../icons';
 import { Box, Button, Typography } from '@mui/material';
-import { getInstanceByID } from '../../reducers/actions/instances';
+import { getInstanceByID, clearUrlLoadingState } from '../../reducers/actions/instances';
 import Modal from '../../shared/modal/Modal';
 import 'react-slideshow-image/dist/styles.css'
 
@@ -115,12 +115,16 @@
   });
   const [isLoading, setIsLoading] = useState(false);
   const reduxState = useSelector(state => state);
+  const misalignedTemplate = useSelector(state => state.globalInfo.misalignedTemplate)
+  const alignedTemplates = useSelector(state => state.globalInfo.alignedTemplates)
+  const misalignedIDs = useSelector(state => state.globalInfo.misalignedIDs)
 
   const handleConfirmLoad = async () => {
     if (!confirmationModal.example) return;
 
     setIsLoading(true);
     try {
+      clearUrlLoadingState()
       window.open(
         window.location.origin + '/?id=' + confirmationModal.example.template + '&i=' + confirmationModal.example.id,
         '_blank'
@@ -159,6 +163,18 @@
     }
   }
 
+
+  useEffect(() => {
+    if ( misalignedTemplate && !alignedTemplates ){
+      setConfirmationModal({
+        open: true,
+        example: { id : Object.keys(misalignedIDs) , template: misalignedTemplate },  
+        message: `The image you requested is aligned to another template. Click Load Template to open it in a new tab or Cancel to just view the image metadata.`
+      });
+    }
+  }, [misalignedTemplate, misalignedIDs])
+
+
   useEffect( () => {
     if(props?.examples) {
       const images = [];

applications/virtual-fly-brain/frontend/src/reducers/GlobalReducer.js

@@ -36,10 +36,11 @@ const GlobalReducer = (state = initialStateGlobalReducer, response) => {
           })
       case getGlobalTypes.ALIGN_TEMPLATES:{
         const aligned = response.payload.aligned;
-        const id = response.payload.templateID
+        const templateID = response.payload.templateID
+        const id = response.payload.id
         return Object.assign({}, state, {
           alignedTemplates: aligned,
-          misalignedTemplate : id,
+          misalignedTemplate : templateID,
           misalignedIDs : {...state.misalignedIDs, [id] : id }
         })
       }

applications/virtual-fly-brain/frontend/src/reducers/InstancesReducer.js

@@ -762,6 +762,7 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
     case getInstancesTypes.CLEAR_URL_LOADING_STATE: {
       return Object.assign({}, state, {
         isLoadingFromUrl: false,
+        isLoading: false,
       });
     }
     default:

applications/virtual-fly-brain/frontend/src/reducers/actions/globals.js

@@ -36,9 +36,9 @@ export const setFirstIDLoaded = () => ({
   payload : {}
 })
 
-export const setAlignTemplates = (aligned, templateID) => ({
+export const setAlignTemplates = (aligned, id, templateID) => ({
   type: getGlobalTypes.ALIGN_TEMPLATES,
-  payload : { aligned, templateID }
+  payload : { aligned, id, templateID }
 })
 
 export const setTemplateID = (id) => ({

applications/virtual-fly-brain/frontend/src/reducers/actions/instances.js

@@ -175,9 +175,10 @@ export const setBulkLoadingCount = (count, isFromUrl = false) => ({
   payload: { count, isFromUrl }
 });
 
-export const clearUrlLoadingState = () => ({
-  type: getInstancesTypes.CLEAR_URL_LOADING_STATE
-});
+export const clearUrlLoadingState = () => {
+  store.dispatch({type: getInstancesTypes.CLEAR_URL_LOADING_STATE});
+  return;
+};
 
 export const resetBulkLoading = () => ({
   type: getInstancesTypes.RESET_BULK_LOADING

applications/virtual-fly-brain/frontend/src/reducers/middleware/urlUpdaterMiddleware.js

@@ -182,14 +182,14 @@ export const urlUpdaterMiddleware = store => next => (action) => {
             await focusInstance(pendingFocusId);
             await selectInstance(pendingFocusId);
             // Clear URL loading state after async operations complete
-            store.dispatch(clearUrlLoadingState());
+            clearUrlLoadingState();
             // Clear the initial focus ID after a longer delay to allow all pending template operations to complete
             setTimeout(() => {
               initialUrlFocusId = null;
             }, 1000);
           })();
         } else {
-          store.dispatch(clearUrlLoadingState());
+          clearUrlLoadingState();
         }
       }
 
@@ -272,7 +272,7 @@ export const urlUpdaterMiddleware = store => next => (action) => {
               return;
             }
           // If the individual is not aligned with the current template, we need to show the misalignment dialog
-          store.dispatch(setAlignTemplates(false, action.payload.Id));
+          store.dispatch(setAlignTemplates(false, action.payload.Id, Object.keys(action.payload?.Images)|| Object.keys(action.payload?.Examples || {})));
           return;
         }
       }

applications/virtual-fly-brain/frontend/src/shared/subHeader/index.jsx

@@ -79,6 +79,7 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
   const [filterOpened, setFilterOpened] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState({});
   const [desktop, setDesktop] = useState(window.innerWidth >= 1200);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -89,7 +90,6 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  const isLoading = useSelector((state) => state.instances.isLoading);
   const loadingInstances = useSelector(
     (state) => state.instances.loadingInstances
   );
@@ -123,6 +123,12 @@ const SubHeader = ({ setBottomNav, bottomNav }) => {
       color: whiteColor,
     },
   };
+  const instanceLoading = useSelector((state) => state.instances.isLoading);
+
+  useEffect(() => {
+    setIsLoading(instanceLoading)
+  }, [instanceLoading])
+
 
   useEffect(() => {
     // For bulk loading, check if all instances are loaded using bulk count