fix Annotation deletion

frontend/src/locale/de.json

@@ -511,6 +511,7 @@
   "ROW": "Zeile",
   "APPLY_TO_ALL_ROWS_NOTE": "+ kennzeichnet, dass die Änderung auf alle Zeilen dieser Spalte angewendet werden kann",
   "BULK_IMPORT_DELETE_TASK": "Massenimport-Aufgabe löschen",
+  "BULK_IMPORT_DELETE_TASK_IN_PROGRESS": "Wird gelöscht...",
   "BULK_IMPORT_DATA_UPLOADED": "Daten hochgeladen",
   "BULK_IMPORT_IMAGE_UPLOADED": "Bild hochgeladen",
   "SPREADSHEET_UPLOADED_TITLE": "Tabellen-Datei hochgeladen: {fileName}",
@@ -764,6 +765,7 @@
   "INDIVIDUAL_SCORE": "Individueller Score",
   "IMAGE_SCORE": "Bild-Score",
   "NUMBER_OF_RESULTS": "Anzahl der Ergebnisse",
+  "NUMBER_OF_RESULTS_MAX_HINT": "(max. {max})",
   "SELECT_A_PROJECT": "ein Projekt auswählen",
   "MATCHED_BASED_ON": "Übereinstimmung basierend auf ",
   "POSSIBLE_MATCH": "Mögliche Übereinstimmung",

frontend/src/locale/en.json

@@ -509,6 +509,7 @@
     "ROW": "Row",
     "APPLY_TO_ALL_ROWS_NOTE": "+ denotes change can apply to all rows for this column",
     "BULK_IMPORT_DELETE_TASK": "Delete Import Task",
+    "BULK_IMPORT_DELETE_TASK_IN_PROGRESS": "Deleting...",
     "BULK_IMPORT_DATA_UPLOADED": "Data Uploaded",
     "BULK_IMPORT_IMAGE_UPLOADED": "Image Uploaded",
     "SPREADSHEET_UPLOADED_TITLE": "Spreadsheet Uploaded: {fileName}",
@@ -762,6 +763,7 @@
     "INDIVIDUAL_SCORE": "Individual Score",
     "IMAGE_SCORE": "Image Score",
     "NUMBER_OF_RESULTS": "Number of results",
+    "NUMBER_OF_RESULTS_MAX_HINT": "(max {max})",
     "SELECT_A_PROJECT": "select a project",
     "MATCHED_BASED_ON": "Matched based on ",
     "POSSIBLE_MATCH": "Possible Match",

frontend/src/locale/es.json

@@ -511,6 +511,7 @@
   "ROW": "Fila",
   "APPLY_TO_ALL_ROWS_NOTE": "+ denota que el cambio se puede aplicar a todas las filas de esta columna",
   "BULK_IMPORT_DELETE_TASK": "Eliminar tarea de importación masiva",
+  "BULK_IMPORT_DELETE_TASK_IN_PROGRESS": "Eliminando...",
   "BULK_IMPORT_DATA_UPLOADED": "Datos subidos",
   "BULK_IMPORT_IMAGE_UPLOADED": "Imagen subida",
   "SPREADSHEET_UPLOADED_TITLE": "Hoja de cálculo subida: {fileName}",
@@ -764,6 +765,7 @@
   "INDIVIDUAL_SCORE": "Puntuación Individual",
   "IMAGE_SCORE": "Puntuación de Imagen",
   "NUMBER_OF_RESULTS": "Número de resultados",
+  "NUMBER_OF_RESULTS_MAX_HINT": "(máx. {max})",
   "SELECT_A_PROJECT": "seleccionar un proyecto",
   "MATCHED_BASED_ON": "Coincidencia basada en ",
   "POSSIBLE_MATCH": "Posible Coincidencia",

frontend/src/locale/fr.json

@@ -511,6 +511,7 @@
   "ROW": "Ligne",
   "APPLY_TO_ALL_ROWS_NOTE": "+ indique que la modification peut s'appliquer à toutes les lignes de cette colonne",
   "BULK_IMPORT_DELETE_TASK": "Supprimer la tâche d'importation en masse",
+  "BULK_IMPORT_DELETE_TASK_IN_PROGRESS": "Suppression...",
   "BULK_IMPORT_DATA_UPLOADED": "Données téléchargées",
   "BULK_IMPORT_IMAGE_UPLOADED": "Image téléchargée",
   "SPREADSHEET_UPLOADED_TITLE": "Feuille de calcul téléchargée: {fileName}",
@@ -764,6 +765,7 @@
   "INDIVIDUAL_SCORE": "Score Individuel",
   "IMAGE_SCORE": "Score d'Image",
   "NUMBER_OF_RESULTS": "Nombre de résultats",
+  "NUMBER_OF_RESULTS_MAX_HINT": "(max {max})",
   "SELECT_A_PROJECT": "sélectionner un projet",
   "MATCHED_BASED_ON": "Correspondance basée sur ",
   "POSSIBLE_MATCH": "Correspondance Possible",

frontend/src/locale/it.json

@@ -511,6 +511,7 @@
   "ROW": "Riga",
   "APPLY_TO_ALL_ROWS_NOTE": "+ indica che la modifica può essere applicata a tutte le righe di questa colonna",
   "BULK_IMPORT_DELETE_TASK": "Elimina attività di importazione",
+  "BULK_IMPORT_DELETE_TASK_IN_PROGRESS": "Eliminazione in corso...",
   "BULK_IMPORT_DATA_UPLOADED": "Dati caricati",
   "BULK_IMPORT_IMAGE_UPLOADED": "Immagine caricata",
   "SPREADSHEET_UPLOADED_TITLE": "Foglio di calcolo caricato: {fileName}",
@@ -764,6 +765,7 @@
   "INDIVIDUAL_SCORE": "Punteggio Individuale",
   "IMAGE_SCORE": "Punteggio Immagine",
   "NUMBER_OF_RESULTS": "Numero di risultati",
+  "NUMBER_OF_RESULTS_MAX_HINT": "(max {max})",
   "SELECT_A_PROJECT": "seleziona un progetto",
   "MATCHED_BASED_ON": "Corrispondenza basata su ",
   "POSSIBLE_MATCH": "Possibile Corrispondenza",

frontend/src/pages/BulkImport/BulkImportTask.jsx

@@ -35,7 +35,9 @@ const BulkImportTask = observer(() => {
   const [userRoles, setUserRoles] = useState(null);
   const store = useLocalObservable(() => new BulkImportTaskStore());
   const [rowsPerPage, setRowsPerPage] = useState(10);
-
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isSendingToIdentification, setIsSendingToIdentification] =
+    useState(false);
   const previousLocationID = task?.matchingLocations || [];
 
   const fetchData = async () => {
@@ -76,12 +78,14 @@ const BulkImportTask = observer(() => {
 
   const deleteTask = async () => {
     if (!task?.id) return;
+    if (isDeleting) return;
 
     const confirmed = window.confirm(
       intl.formatMessage({ id: "BULK_IMPORT_DELETE_TASK_CONFIRM" }),
     );
     if (!confirmed) return;
 
+    setIsDeleting(true);
     try {
       const res = await fetch(`/api/v3/bulk-import/${task.id}`, {
         method: "DELETE",
@@ -102,6 +106,7 @@ const BulkImportTask = observer(() => {
           { error: err.message || "" },
         ),
       );
+      setIsDeleting(false);
     }
   };
 
@@ -486,50 +491,50 @@ const BulkImportTask = observer(() => {
           <MainButton
             id="re-id-button"
             disabled={
+              isSendingToIdentification ||
               (!userRoles?.includes("admin") &&
                 !userRoles?.includes("researcher")) ||
               !store.locationIDString ||
               task?.status !== "complete" ||
               task?.iaSummary?.detectionStatus !== "complete"
             }
-            onClick={() => {
+            onClick={async () => {
               setShowError(false);
-              axios
-                .get(
+              setIsSendingToIdentification(true);
+
+              try {
+                const response = await axios.get(
                   `/appadmin/resendBulkImportID.jsp?importIdTask=${taskId}${store.locationIDString}`,
-                )
-                .then((response) => {
-                  if (response.status === 200) {
-                    alert(
-                      intl.formatMessage({
-                        id: "BULK_IMPORT_RE_ID_SUCCESS",
-                        defaultMessage:
-                          "Re-identification task started successfully.",
-                      }),
-                    );
-                    window.location.reload();
-                  } else {
-                    throw new Error(
-                      intl.formatMessage({
-                        id: "BULK_IMPORT_RE_ID_ERROR",
-                        defaultMessage:
-                          "Failed to start re-identification task.",
-                      }),
-                    );
-                  }
-                })
-                .catch((error) => {
-                  console.error(
-                    "Error starting re-identification task:",
-                    error,
-                  );
+                );
+
+                if (response.status === 200) {
                   alert(
+                    intl.formatMessage({
+                      id: "BULK_IMPORT_RE_ID_SUCCESS",
+                      defaultMessage:
+                        "Re-identification task started successfully.",
+                    }),
+                  );
+                  window.location.reload();
+                } else {
+                  throw new Error(
                     intl.formatMessage({
                       id: "BULK_IMPORT_RE_ID_ERROR",
                       defaultMessage: "Failed to start re-identification task.",
                     }),
                   );
-                });
+                }
+              } catch (error) {
+                console.error("Error starting re-identification task:", error);
+                alert(
+                  intl.formatMessage({
+                    id: "BULK_IMPORT_RE_ID_ERROR",
+                    defaultMessage: "Failed to start re-identification task.",
+                  }),
+                );
+              } finally {
+                setIsSendingToIdentification(false);
+              }
             }}
             backgroundColor={theme.wildMeColors.cyan700}
             color={theme.defaultColors.white}
@@ -541,6 +546,15 @@ const BulkImportTask = observer(() => {
               marginLeft: 0,
             }}
           >
+            {isSendingToIdentification && (
+              <Spinner
+                animation="border"
+                size="sm"
+                className="me-2"
+                role="status"
+                aria-hidden="true"
+              />
+            )}
             <FormattedMessage id="BULK_IMPORT_SEND_TO_IDENTIFICATION" />
           </MainButton>
           {((!userRoles?.includes("admin") &&
@@ -568,6 +582,7 @@ const BulkImportTask = observer(() => {
         <Col xs="auto">
           <MainButton
             onClick={deleteTask}
+            disabled={isDeleting}
             shadowColor={theme.statusColors.red500}
             color={theme.statusColors.red500}
             noArrow={true}
@@ -579,9 +594,23 @@ const BulkImportTask = observer(() => {
               marginLeft: 0,
               marginTop: "1rem",
               marginBottom: "2rem",
+              opacity: isDeleting ? 0.7 : 1,
+              cursor: isDeleting ? "not-allowed" : "pointer",
             }}
           >
-            <FormattedMessage id="BULK_IMPORT_DELETE_TASK" />
+            {isDeleting ? (
+              <>
+                <Spinner
+                  animation="border"
+                  size="sm"
+                  role="status"
+                  className="me-2"
+                />
+                <FormattedMessage id="BULK_IMPORT_DELETE_TASK_IN_PROGRESS" />
+              </>
+            ) : (
+              <FormattedMessage id="BULK_IMPORT_DELETE_TASK" />
+            )}
           </MainButton>
         </Col>
       </Row>

frontend/src/pages/MatchResultsPage/MatchResults.jsx

@@ -15,6 +15,7 @@ import FilterIcon from "./icons/FilterIcon";
 import MatchCriteriaDrawer from "./components/MatchCriteriaDrawer";
 import MultiSelectWithCheckbox from "../../components/MultiSelectWithCheckbox";
 import ContainerWithSpinner from "../../components/ContainerWithSpinner";
+import { MAX_NUM_RESULTS } from "./constants";
 
 const MatchResults = observer(() => {
   const themeColor = React.useContext(ThemeColorContext);
@@ -234,6 +235,16 @@ const MatchResults = observer(() => {
           >
             <Form.Label className="me-2 mb-0 small">
               <FormattedMessage id="NUMBER_OF_RESULTS" />
+              <span
+                className="ms-1 text-muted"
+                style={{ fontSize: "0.75rem" }}
+                data-testid="match-results-num-results-hint"
+              >
+                <FormattedMessage
+                  id="NUMBER_OF_RESULTS_MAX_HINT"
+                  values={{ max: MAX_NUM_RESULTS }}
+                />
+              </span>
             </Form.Label>
 
             <div

frontend/src/pages/MatchResultsPage/constants.js

@@ -1,2 +1,5 @@
-
 export const MAX_ROWS_PER_COLUMN = 4;
+
+export const MAX_NUM_RESULTS = 500;
+
+export const DEFAULT_NUM_RESULTS = 12;