Fix labeling bug

src/client/cypress/e2e/editor/labeling.cy.js

@@ -142,7 +142,7 @@ describe("Test labeling tool", () => {
     // });
   });
 
-  // TODO: https://github.com/swisstopo/swissgeol-boreholes-suite/issues/1546 & https://github.com/swisstopo/swissgeol-boreholes-suite/issues/1545
+  // TODO: https://github.com/swisstopo/swissgeol-boreholes-suite/issues/1546
   //  We have to wait for the docker integration before this test can be enabled
   it.skip("can extract data from image", () => {
     newEditableBorehole().as("borehole_id");

src/client/src/pages/detail/form/location/coordinatesSegment.tsx

@@ -35,7 +35,7 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
   editingEnabled,
 }) => {
   const { t } = useTranslation();
-  const { extractionObject, setExtractionObject } = useLabelingContext();
+  const { extractionObject, setExtractionObject, setExtractionState, extractionState } = useLabelingContext();
 
   // --- State variables ---
   const [currentReferenceSystem, setCurrentReferenceSystem] = useState<number>(borehole.data.spatial_reference_system);
@@ -280,14 +280,14 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
   ]);
 
   useEffect(() => {
-    if (extractionObject?.type === "coordinates" && extractionObject.state === ExtractionState.success) {
+    if (extractionObject?.type === "coordinates" && extractionState === ExtractionState.success) {
       const coordinate = extractionObject.value as Coordinate;
       if (coordinate) {
         setCurrentReferenceSystem(referenceSystems[coordinate.projection].code);
         setValuesForReferenceSystem(coordinate.projection, coordinate.east.toString(), coordinate.north.toString());
       }
     }
-  }, [extractionObject, setValuesForReferenceSystem]);
+  }, [extractionObject, extractionState, setValuesForReferenceSystem]);
 
   const isCoordinateExtraction = extractionObject?.type === "coordinates";
 
@@ -381,13 +381,13 @@ const CoordinatesSegment: React.FC<CoordinatesSegmentProps> = ({
       currentReferenceSystem === referenceSystems.LV95.code ? ReferenceSystemKey.LV95 : ReferenceSystemKey.LV03;
     setExtractionObject({
       type: "coordinates",
-      state: ExtractionState.start,
       previousValue: {
         east: formMethods.getValues(referenceSystems[referenceSystemKey].fieldName.X),
         north: formMethods.getValues(referenceSystems[referenceSystemKey].fieldName.Y),
         projection: referenceSystemKey,
       },
     });
+    setExtractionState(ExtractionState.start);
   };
 
   return (

src/client/src/pages/detail/labeling/labelingContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, FC, PropsWithChildren, useCallback, useEffect, useLayoutEffect, useState } from "react";
-import { ExtractionObject, LabelingContextInterface, PanelPosition } from "./labelingInterfaces.tsx";
+import { ExtractionObject, ExtractionState, LabelingContextInterface, PanelPosition } from "./labelingInterfaces.tsx";
 
 export const LabelingContext = createContext<LabelingContextInterface>({
   panelPosition: "right",
@@ -8,12 +8,15 @@ export const LabelingContext = createContext<LabelingContextInterface>({
   togglePanel: () => {},
   extractionObject: undefined,
   setExtractionObject: () => {},
+  extractionState: undefined,
+  setExtractionState: () => {},
 });
 
 export const LabelingProvider: FC<PropsWithChildren> = ({ children }) => {
   const [panelPosition, setPanelPosition] = useState<PanelPosition>("right");
   const [panelOpen, setPanelOpen] = useState(false);
   const [extractionObject, setExtractionObject] = useState<ExtractionObject>();
+  const [extractionState, setExtractionState] = useState<ExtractionState>();
 
   const togglePanel = useCallback((isOpen?: boolean) => {
     setPanelOpen(prevState => (isOpen !== undefined ? isOpen : !prevState));
@@ -40,6 +43,7 @@ export const LabelingProvider: FC<PropsWithChildren> = ({ children }) => {
   useEffect(() => {
     if (!panelOpen) {
       setExtractionObject(undefined);
+      setExtractionState(undefined);
     }
   }, [panelOpen]);
 
@@ -52,6 +56,8 @@ export const LabelingProvider: FC<PropsWithChildren> = ({ children }) => {
         togglePanel,
         extractionObject,
         setExtractionObject,
+        extractionState,
+        setExtractionState,
       }}>
       {children}
     </LabelingContext.Provider>

src/client/src/pages/detail/labeling/labelingInterfaces.tsx

@@ -12,7 +12,6 @@ export enum ExtractionState {
 }
 
 export interface ExtractionObject {
-  state: ExtractionState;
   type?: ExtractionType;
   value?: string | number | Coordinate;
   previousValue?: string | number | Coordinate | null;
@@ -51,6 +50,8 @@ export interface LabelingContextInterface {
   togglePanel: (isOpen?: boolean) => void;
   extractionObject?: ExtractionObject;
   setExtractionObject: (extractionObject: ExtractionObject | undefined) => void;
+  extractionState?: ExtractionState;
+  setExtractionState: (extractionState: ExtractionState) => void;
 }
 
 export const labelingFileFormat = "application/pdf";

src/client/src/pages/detail/labeling/labelingPanel.tsx

@@ -63,13 +63,21 @@ interface LabelingPanelProps {
 
 const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
   const { t } = useTranslation();
-  const { panelPosition, setPanelPosition, extractionObject, setExtractionObject } = useLabelingContext();
+  const {
+    panelPosition,
+    setPanelPosition,
+    extractionObject,
+    setExtractionObject,
+    setExtractionState,
+    extractionState,
+  } = useLabelingContext();
   const [isLoadingFiles, setIsLoadingFiles] = useState(true);
   const [files, setFiles] = useState<FileInterface[]>();
   const [selectedFile, setSelectedFile] = useState<FileInterface>();
   const [fileInfo, setFileInfo] = useState<DataExtractionResponse>();
   const [activePage, setActivePage] = useState<number>(1);
   const [drawTooltipLabel, setDrawTooltipLabel] = useState<string>();
+  const [extractionExtent, setExtractionExtent] = useState<number[]>([]);
   const [abortController, setAbortController] = useState<AbortController>();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { alertIsOpen, text, severity, autoHideDuration, showAlert, closeAlert } = useAlertManager();
@@ -126,35 +134,30 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
           x1: Math.max(...[extent[0], extent[2]]),
           y1: Math.max(...[extent[1], extent[3]]),
         };
+        setExtractionExtent([]);
         const request: ExtractionRequest = {
           filename: fileInfo.fileName.substring(0, fileInfo.fileName.lastIndexOf("-")) + ".pdf",
           page_number: activePage,
           bbox: bbox,
           format: extractionObject.type,
         };
-        setExtractionObject({
-          ...extractionObject,
-          state: ExtractionState.loading,
-        });
+        setExtractionState(ExtractionState.loading);
         setDrawTooltipLabel(undefined);
         const abortController = new AbortController();
         setAbortController(abortController);
         extractData(request, abortController.signal)
           .then(response => {
             if (extractionObject.type) {
+              setExtractionState(ExtractionState.success);
               setExtractionObject({
                 ...extractionObject,
-                state: ExtractionState.success,
                 value: response[extractionObject.type],
               });
             }
           })
           .catch(error => {
             if (!error?.message?.includes("AbortError")) {
-              setExtractionObject({
-                ...extractionObject,
-                state: ExtractionState.error,
-              });
+              setExtractionState(ExtractionState.error);
               // TODO: https://github.com/swisstopo/swissgeol-boreholes-suite/issues/1546
               //  Check if error message is correct, resp. handle all error cases with different messages
               showAlert(t(error.message), "error");
@@ -165,15 +168,23 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
           });
       }
     },
-    [activePage, extractionObject, fileInfo, setExtractionObject, showAlert, t],
+    [activePage, extractionObject, fileInfo, setExtractionObject, setExtractionState, showAlert, t],
   );
 
+  useEffect(() => {
+    if (extractionExtent?.length > 0) {
+      triggerDataExtraction(extractionExtent);
+    }
+  }, [extractionExtent, triggerDataExtraction]);
+
   const cancelRequest = () => {
     if (abortController) {
       abortController.abort();
       setAbortController(undefined);
     }
-    setExtractionObject({ type: "coordinates", state: ExtractionState.start });
+    setExtractionObject({ type: "coordinates" });
+    setExtractionState(ExtractionState.start);
+    setExtractionExtent([]);
   };
 
   useEffect(() => {
@@ -183,16 +194,13 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
   }, [files, loadFiles]);
 
   useEffect(() => {
-    if (extractionObject?.state === ExtractionState.start) {
-      setExtractionObject({
-        ...extractionObject,
-        state: ExtractionState.drawing,
-      });
-      if (extractionObject.type === "coordinates") {
+    if (extractionState === ExtractionState.start) {
+      setExtractionState(ExtractionState.drawing);
+      if (extractionObject?.type === "coordinates") {
         setDrawTooltipLabel("drawCoordinateBox");
       }
     }
-  }, [extractionObject, setExtractionObject]);
+  }, [extractionObject, extractionState, setExtractionObject, setExtractionState]);
 
   useEffect(() => {
     if (selectedFile) {
@@ -298,7 +306,7 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
               {text}
             </LabelingAlert>
           ) : (
-            extractionObject?.state === ExtractionState.loading && (
+            extractionState === ExtractionState.loading && (
               <Button onClick={() => cancelRequest()} variant="text" endIcon={<X />} sx={labelingButtonStyles}>
                 <CircularProgress sx={{ marginRight: "15px", width: "15px !important", height: "15px !important" }} />
                 {t("analyze")}
@@ -353,7 +361,7 @@ const LabelingPanel: FC<LabelingPanelProps> = ({ boreholeId }) => {
           </Stack>
           <LabelingDrawContainer
             fileInfo={fileInfo}
-            onDrawEnd={triggerDataExtraction}
+            onDrawEnd={setExtractionExtent}
             drawTooltipLabel={drawTooltipLabel}
           />
         </Box>