fix: enable loading images from the same webSource

package.json

@@ -75,9 +75,10 @@
     "react-kbs": "^2.1.1",
     "react-map-interaction": "^2.1.0",
     "react-plot": "^1.4.2",
-    "react-roi": "^1.4.0",
+    "react-roi": "^1.4.2",
     "react-science": "^3.1.0",
-    "react-use": "^17.4.0"
+    "react-use": "^17.4.0",
+    "tiff": "^6.1.0"
   },
   "volta": {
     "node": "18.16.0",

src/components/AutoLoader.tsx

@@ -1,15 +1,17 @@
-import { WebSource } from 'filelist-utils';
 import { memo, ReactNode, useEffect } from 'react';
 
 import useFileLoader from '../hooks/useFileLoader';
 import useLog from '../hooks/useLog';
 
+import { useWebSource } from './context/WebSourceContext';
+
 interface AutoLoaderProps {
-  webSource?: WebSource;
   children: ReactNode;
 }
 
-function AutoLoader({ children, webSource }: AutoLoaderProps) {
+function AutoLoader({ children }: AutoLoaderProps) {
+  const { webSource, setWebSource } = useWebSource();
+
   const { handleWebSource } = useFileLoader();
   const { logger } = useLog();
 
@@ -19,7 +21,9 @@ function AutoLoader({ children, webSource }: AutoLoaderProps) {
     handleWebSource(webSource).catch((error) => {
       logger.error(`Error while loading websource: ${error.message}`);
     });
-  }, [handleWebSource, logger, webSource]);
+
+    setWebSource?.(undefined);
+  }, [handleWebSource, logger, webSource, setWebSource]);
 
   return children;
 }

src/components/FastSelector.tsx

@@ -6,6 +6,7 @@ interface FastSelectorProps<T> {
   options: T[];
   selected: T | undefined;
   setSelected: (value: T) => void;
+  defaultItem?: T | undefined;
 }
 
 const Container = styled.div`
@@ -19,7 +20,7 @@ const List = styled.ul`
   border-radius: 6px;
 `;
 
-const ListElement = styled.li<{ selected: boolean }>`
+const ListElement = styled.li<{ selected: boolean; defaultItem: boolean }>`
   padding: 10px;
   border: 1px solid #9e9e9e;
   border-top-width: 0px;
@@ -41,14 +42,16 @@ const ListElement = styled.li<{ selected: boolean }>`
     border-bottom-right-radius: 6px;
   }
 
-  background-color: ${({ selected }) => (selected ? 'royalblue' : 'white')};
+  background-color: ${({ selected, defaultItem }) =>
+    selected ? 'royalblue' : defaultItem ? 'lightgray' : 'white'};
   color: ${({ selected }) => (selected ? 'white' : 'black')};
 `;
 
 export default function FastSelector<T extends string>({
   options,
   selected,
   setSelected,
+  defaultItem,
 }: FastSelectorProps<T>) {
   // eslint-disable-next-line unicorn/no-array-reduce
   const refs: { [key: string]: RefObject<HTMLLIElement> } = options.reduce(
@@ -106,6 +109,7 @@ export default function FastSelector<T extends string>({
             selected={option === selected}
             onClick={() => setSelected(option)}
             ref={refs[option]}
+            defaultItem={option === defaultItem}
           >
             {option}
           </ListElement>

src/components/ImageViewer.tsx

@@ -3,16 +3,12 @@ import {
   CSSProperties,
   memo,
   MutableRefObject,
-  useCallback,
   useEffect,
   useMemo,
 } from 'react';
-import { RoiContainer, RoiProvider, useTargetRef } from 'react-roi';
+import { RoiContainer, useTargetRef } from 'react-roi';
 
 import useImage from '../hooks/useImage';
-import useView from '../hooks/useView';
-import useViewDispatch from '../hooks/useViewDispatch';
-import { SET_PAN_ZOOM } from '../state/view/ViewActionTypes';
 
 import ROIAnnotations from './roi/ROIAnnotations';
 
@@ -45,66 +41,30 @@ function ImageViewer({
   image,
   annotable = false,
 }: ImageViewerProps) {
-  const view = useView();
-  const viewDispatch = useViewDispatch();
-
   const { original, pipelined } = useImage();
 
   const imageToShow = useMemo(() => {
     if (image !== undefined) return image;
     return showOriginal ? original : pipelined;
   }, [image, original, pipelined, showOriginal]);
 
-  const panZoom = useMemo(() => {
-    return (
-      view.imageViewerProps[identifier] || {
-        scale: 1,
-        translation: [0, 0],
-      }
-    );
-  }, [identifier, view.imageViewerProps]);
-
-  const setPanZoom = useCallback(
-    (panZoom) => {
-      viewDispatch({
-        type: SET_PAN_ZOOM,
-        payload: { identifier, panZoom },
-      });
-    },
-    [identifier, viewDispatch],
-  );
-
   return (
-    <RoiProvider
-      initialConfig={{
-        zoom: {
-          initial: panZoom,
-          min: 0.1,
-          max: 30,
-          spaceAroundTarget: 0,
-        },
-        resizeStrategy: 'contain',
-        mode: 'select',
+    <RoiContainer
+      zoomWithoutModifierKey
+      target={<TargetCanvas imageToShow={imageToShow} />}
+      style={{
+        width: '100%',
+        height: '100%',
       }}
-      onAfterZoomChange={setPanZoom}
     >
-      <RoiContainer
-        zoomWithoutModifierKey
-        target={<TargetCanvas imageToShow={imageToShow} />}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
-      >
-        {annotable && (
-          <ROIAnnotations
-            width={imageToShow?.width}
-            height={imageToShow?.height}
-            identifier={identifier}
-          />
-        )}
-      </RoiContainer>
-    </RoiProvider>
+      {annotable && (
+        <ROIAnnotations
+          width={imageToShow?.width}
+          height={imageToShow?.height}
+          identifier={identifier}
+        />
+      )}
+    </RoiContainer>
   );
 }