fix: support for duplicate images by refactoring indexing scheme

Author: seveibar

src/Annotator/index.js

@@ -31,7 +31,7 @@ type Props = {
   enabledTools?: Array<string>,
   selectedTool?: String,
   showTags?: boolean,
-  selectedImage?: string,
+  selectedImage?: string | number,
   images?: Array<Image>,
   showPointDistances?: boolean,
   pointDistancePrecision?: number,
@@ -50,7 +50,7 @@ type Props = {
 export const Annotator = ({
   images,
   allowedArea,
-  selectedImage = images && images.length > 0 ? images[0].src : undefined,
+  selectedImage = images && images.length > 0 ? 0 : undefined,
   showPointDistances,
   pointDistancePrecision,
   showTags = true,
@@ -79,6 +79,10 @@ export const Annotator = ({
   onPrevImage,
   autoSegmentationOptions = { type: "autoseg" },
 }: Props) => {
+  if (typeof selectedImage === "string") {
+    selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
+    if (selectedImage === -1) selectedImage = undefined
+  }
   const annotationType = images ? "image" : "video"
   const [state, dispatchToReducer] = useReducer(
     historyHandler(
@@ -143,10 +147,11 @@ export const Annotator = ({
   })
 
   useEffect(() => {
-    if (!selectedImage) return
+    if (selectedImage === undefined) return
     dispatchToReducer({
       type: "SELECT_IMAGE",
-      image: state.images.find((img) => img.src === selectedImage),
+      imageIndex: selectedImage,
+      image: state.images[selectedImage],
     })
   }, [selectedImage])
 

src/Annotator/reducers/general-reducer.js

@@ -103,10 +103,10 @@ export default (state: MainLayoutState, action: Action) => {
     )
   }
 
-  const setNewImage = (img: string | Object) => {
+  const setNewImage = (img: string | Object, index: number) => {
     let { src, frameTime } = typeof img === "object" ? img : { src: img }
     return setIn(
-      setIn(state, ["selectedImage"], src),
+      setIn(state, ["selectedImage"], index),
       ["selectedImageFrameTime"],
       frameTime
     )
@@ -117,7 +117,7 @@ export default (state: MainLayoutState, action: Action) => {
       return state
     }
     case "SELECT_IMAGE": {
-      return setNewImage(action.image)
+      return setNewImage(action.image, action.imageIndex)
     }
     case "CHANGE_REGION": {
       const regionIndex = getRegionIndex(action.region)
@@ -675,18 +675,27 @@ export default (state: MainLayoutState, action: Action) => {
         case "prev": {
           if (currentImageIndex === null) return state
           if (currentImageIndex === 0) return state
-          return setNewImage(state.images[currentImageIndex - 1])
+          return setNewImage(
+            state.images[currentImageIndex - 1],
+            currentImageIndex - 1
+          )
         }
         case "next": {
           if (currentImageIndex === null) return state
           if (currentImageIndex === state.images.length - 1) return state
-          return setNewImage(state.images[currentImageIndex + 1])
+          return setNewImage(
+            state.images[currentImageIndex + 1],
+            currentImageIndex + 1
+          )
         }
         case "clone": {
           if (currentImageIndex === null) return state
           if (currentImageIndex === state.images.length - 1) return state
           return setIn(
-            setNewImage(state.images[currentImageIndex + 1]),
+            setNewImage(
+              state.images[currentImageIndex + 1],
+              currentImageIndex + 1
+            ),
             ["images", currentImageIndex + 1, "regions"],
             activeImage.regions
           )

src/Annotator/reducers/get-active-image.js

@@ -5,12 +5,7 @@ export default (state) => {
     pathToActiveImage,
     activeImage
   if (state.annotationType === "image") {
-    currentImageIndex = state.images.findIndex(
-      (img) =>
-        img.src === state.selectedImage &&
-        (state.selectedImageFrameTime === undefined ||
-          img.frameTime === state.selectedImageFrameTime)
-    )
+    currentImageIndex = state.selectedImage
     if (currentImageIndex === -1) {
       currentImageIndex = null
       activeImage = null

src/DebugSidebarBox/index.js

@@ -4,9 +4,7 @@ import React from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 
 export const DebugSidebarBox = ({ state, lastAction }: any) => {
-  const image = (state.images || []).find(
-    (img) => img.src === state.selectedImage
-  )
+  const image = (state.images || [])[state.selectedImage]
   const region = image
     ? (image.regions || []).filter((r) => r.highlighted)
     : null

src/MainLayout/index.js

@@ -125,7 +125,7 @@ export const MainLayout = ({
       }
       realSize={activeImage ? activeImage.realSize : undefined}
       videoPlaying={state.videoPlaying}
-      imageSrc={state.annotationType === "image" ? state.selectedImage : null}
+      imageSrc={state.annotationType === "image" ? activeImage.src : null}
       videoSrc={state.annotationType === "video" ? state.videoSrc : null}
       pointDistancePrecision={state.pointDistancePrecision}
       createWithPrimary={state.selectedTool.includes("create")}

src/MainLayout/types.js

@@ -101,7 +101,7 @@ export type MainLayoutState =
 
 export type Action =
   | {| type: "@@INIT" |}
-  | {| type: "SELECT_IMAGE", image: Image |}
+  | {| type: "SELECT_IMAGE", image: Image, imageIndex: number |}
   | {|
       type: "IMAGE_OR_VIDEO_LOADED",
       metadata: {