[add,mod] adds accept all predictions button

 - renames ShowPredictions component
 - adds delayed list item button

src/components/list-items/CustomListItemButton/CustomListItemButton.tsx

@@ -14,7 +14,7 @@ import {
 
 type TooltipType = Omit<TooltipProps, "children" | "title">;
 
-type CustomListItemButtonProps = Pick<
+export type CustomListItemButtonProps = Pick<
   ListItemButtonProps,
   | "alignItems"
   | "disabled"

src/components/list-items/ListItemHoldButton/ListItemHoldButton.tsx

@@ -0,0 +1,73 @@
+import React, { ReactElement, useEffect, useState } from "react";
+
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListItemTextProps,
+} from "@mui/material";
+
+export const ListItemHoldButton = ({
+  onHoldComplete,
+  holdDuration,
+  primaryText,
+  icon,
+  primaryTypographyProps,
+}: {
+  onHoldComplete: () => void;
+  holdDuration: number;
+  primaryText: string | ReactElement;
+  icon?: ReactElement;
+} & Pick<ListItemTextProps, "primaryTypographyProps">) => {
+  const [holdElapsed, setHoldElapsed] = useState<number>(0);
+  const [intervalId, setIntervalId] = useState<NodeJS.Timer>();
+  const [loadPercent, setLoadPercent] = useState<number>(0);
+
+  const handleMouseDown = () => {
+    const intervalId = setInterval(() => {
+      setHoldElapsed((t) => t + 1);
+    }, 10);
+    setIntervalId(intervalId);
+  };
+
+  const handleMouseUp = () => {
+    clearInterval(intervalId);
+
+    setHoldElapsed(0);
+  };
+
+  useEffect(() => {
+    setLoadPercent((holdElapsed / holdDuration) * 100);
+
+    if (holdElapsed >= holdDuration) {
+      clearInterval(intervalId);
+      setHoldElapsed(0);
+      onHoldComplete();
+    }
+  }, [holdElapsed, intervalId, holdDuration, onHoldComplete]);
+
+  return (
+    <ListItem
+      disablePadding
+      sx={{
+        backgroundImage: `linear-gradient(to right, rgba(255,255,255,0.3) ${loadPercent}%, rgba(255,255,255,0) 1%)`,
+      }}
+    >
+      <ListItemButton
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onTouchStart={handleMouseDown}
+        onTouchEnd={handleMouseUp}
+      >
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+
+        <ListItemText
+          primary={primaryText}
+          primaryTypographyProps={primaryTypographyProps}
+        />
+      </ListItemButton>
+    </ListItem>
+  );
+};

src/components/list-items/ListItemHoldButton/index.ts

@@ -0,0 +1 @@
+export { ListItemHoldButton } from "./ListItemHoldButton";

src/components/list-items/PredictionListItems/PredictionListItems.tsx

@@ -5,6 +5,7 @@ import {
   Clear as ClearIcon,
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
+  Check as CheckIcon,
 } from "@mui/icons-material";
 
 import { useTranslation } from "hooks";
@@ -16,6 +17,7 @@ import { Partition } from "types";
 import { ModelStatus } from "types/ModelType";
 import { CustomListItemButton } from "../CustomListItemButton";
 import { projectSlice } from "store/slices/project";
+import { ListItemHoldButton } from "../ListItemHoldButton";
 
 export const PredictionListItems = () => {
   const dispatch = useDispatch();
@@ -65,21 +67,36 @@ export const PredictionListItems = () => {
       })
     );
   };
+  const acceptPredictions = () => {
+    dispatch(dataSlice.actions.acceptPredictions({ isPermanent: true }));
+    dispatch(
+      classifierSlice.actions.updateModelStatus({
+        modelStatus: ModelStatus.Trained,
+        execSaga: false,
+      })
+    );
+  };
 
   return (
     <>
-      <CustomListItemButton
-        primaryText={t("Clear predictions")}
-        onClick={clearPredictions}
-        icon={<ClearIcon />}
-      />
       <CustomListItemButton
         primaryText={t(
           `${labeledImagesVisible ? "Hide" : "Show"} labeled images`
         )}
         onClick={toggleShowLabeledImages}
         icon={labeledImagesVisible ? <VisibilityOffIcon /> : <VisibilityIcon />}
       />
+      <CustomListItemButton
+        primaryText={t("Clear predictions")}
+        onClick={clearPredictions}
+        icon={<ClearIcon />}
+      />
+      <ListItemHoldButton
+        onHoldComplete={acceptPredictions}
+        primaryText="Accept Predictions (Hold)"
+        icon={<CheckIcon />}
+        holdDuration={100}
+      />
     </>
   );
 };

src/components/list-items/index.ts

@@ -17,3 +17,4 @@ export { ClassifierOptimizerListItem } from "./ClassifierOptimizerListItem";
 export { ClassifierPreprocessingListItem } from "./ClassifierPreprocessingListItem";
 export { ClassifierDatasetListItem } from "./ClassifierDatasetListItem";
 export { PredictionListItems } from "./PredictionListItems";
+export { ListItemHoldButton } from "./ListItemHoldButton";

src/store/slices/data/dataSlice.ts

@@ -586,6 +586,39 @@ export const dataSlice = createSlice({
         },
       });
     },
+    acceptPredictions(state, action: PayloadAction<{ isPermanent?: boolean }>) {
+      const { isPermanent } = action.payload;
+
+      const updates: Array<{ id: string } & Partial<ImageType>> = [];
+
+      state.images.ids.forEach((id) => {
+        const imagePartition = getDeferredProperty(
+          state.images.entities[id],
+          "partition"
+        );
+        const categoryId = getDeferredProperty(
+          state.images.entities[id],
+          "categoryId"
+        );
+        if (
+          imagePartition === Partition.Inference &&
+          categoryId !== UNKNOWN_IMAGE_CATEGORY_ID
+        ) {
+          updates.push({
+            id: id as string,
+            partition: Partition.Unassigned,
+          });
+        }
+      });
+
+      dataSlice.caseReducers.updateImages(state, {
+        type: "updateImages",
+        payload: {
+          updates: updates,
+          isPermanent: isPermanent,
+        },
+      });
+    },
     updateImages(
       state,
       action: PayloadAction<{