Classification Improvements (#20807)

* Don't show model selection or back button when in multi select mode

* Add dialog to edit classification models

* Fix header spacing

* Cleanup desktop

* Incrase max number of object classifications

* fix iOS mobile card

* Cleanup

web/src/views/classification/ModelSelectionView.tsx

@@ -1,5 +1,6 @@
 import { baseUrl } from "@/api/baseUrl";
 import ClassificationModelWizardDialog from "@/components/classification/ClassificationModelWizardDialog";
+import ClassificationModelEditDialog from "@/components/classification/ClassificationModelEditDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ImageShadowOverlay } from "@/components/overlay/ImageShadowOverlay";
 import { Button, buttonVariants } from "@/components/ui/button";
@@ -14,7 +15,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FaFolderPlus } from "react-icons/fa";
 import { MdModelTraining } from "react-icons/md";
-import { LuTrash2 } from "react-icons/lu";
+import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { FiMoreVertical } from "react-icons/fi";
 import useSWR from "swr";
 import Heading from "@/components/ui/heading";
@@ -163,6 +164,7 @@ export default function ModelSelectionView({
               key={config.name}
               config={config}
               onClick={() => onClick(config)}
+              onUpdate={() => refreshConfig()}
               onDelete={() => refreshConfig()}
             />
           ))}
@@ -201,9 +203,10 @@ function NoModelsView({
 type ModelCardProps = {
   config: CustomClassificationModelConfig;
   onClick: () => void;
+  onUpdate: () => void;
   onDelete: () => void;
 };
-function ModelCard({ config, onClick, onDelete }: ModelCardProps) {
+function ModelCard({ config, onClick, onUpdate, onDelete }: ModelCardProps) {
   const { t } = useTranslation(["views/classificationModel"]);
 
   const { data: dataset } = useSWR<{
@@ -211,6 +214,7 @@ function ModelCard({ config, onClick, onDelete }: ModelCardProps) {
   }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });
 
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
 
   const handleDelete = useCallback(async () => {
     try {
@@ -250,6 +254,11 @@ function ModelCard({ config, onClick, onDelete }: ModelCardProps) {
     setDeleteDialogOpen(true);
   }, []);
 
+  const handleEditClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditDialogOpen(true);
+  }, []);
+
   const coverImage = useMemo(() => {
     if (!dataset) {
       return undefined;
@@ -270,6 +279,13 @@ function ModelCard({ config, onClick, onDelete }: ModelCardProps) {
 
   return (
     <>
+      <ClassificationModelEditDialog
+        open={editDialogOpen}
+        model={config}
+        onClose={() => setEditDialogOpen(false)}
+        onSuccess={() => onUpdate()}
+      />
+
       <AlertDialog
         open={deleteDialogOpen}
         onOpenChange={() => setDeleteDialogOpen(!deleteDialogOpen)}
@@ -320,6 +336,10 @@ function ModelCard({ config, onClick, onDelete }: ModelCardProps) {
               align="end"
               onClick={(e) => e.stopPropagation()}
             >
+              <DropdownMenuItem onClick={handleEditClick}>
+                <LuPencil className="mr-2 size-4" />
+                <span>{t("button.edit", { ns: "common" })}</span>
+              </DropdownMenuItem>
               <DropdownMenuItem onClick={handleDeleteClick}>
                 <LuTrash2 className="mr-2 size-4" />
                 <span>{t("button.delete", { ns: "common" })}</span>

web/src/views/classification/ModelTrainingView.tsx

@@ -327,31 +327,39 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
       </AlertDialog>
 
       <div className="flex flex-row justify-between gap-2 p-2 align-middle">
-        <div className="flex flex-row items-center justify-center gap-2">
-          <Button
-            className="flex items-center gap-2.5 rounded-lg"
-            aria-label={t("label.back", { ns: "common" })}
-            onClick={() => navigate(-1)}
-          >
-            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-            {isDesktop && (
-              <div className="text-primary">
-                {t("button.back", { ns: "common" })}
-              </div>
-            )}
-          </Button>
-          <LibrarySelector
-            pageToggle={pageToggle}
-            dataset={dataset || {}}
-            trainImages={trainImages || []}
-            setPageToggle={setPageToggle}
-            onDelete={onDelete}
-            onRename={() => {}}
-          />
-        </div>
+        {(isDesktop || !selectedImages?.length) && (
+          <div className="flex flex-row items-center justify-center gap-2">
+            <Button
+              className="flex items-center gap-2.5 rounded-lg"
+              aria-label={t("label.back", { ns: "common" })}
+              onClick={() => navigate(-1)}
+            >
+              <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+              {isDesktop && (
+                <div className="text-primary">
+                  {t("button.back", { ns: "common" })}
+                </div>
+              )}
+            </Button>
+
+            <LibrarySelector
+              pageToggle={pageToggle}
+              dataset={dataset || {}}
+              trainImages={trainImages || []}
+              setPageToggle={setPageToggle}
+              onDelete={onDelete}
+              onRename={() => {}}
+            />
+          </div>
+        )}
         {selectedImages?.length > 0 ? (
-          <div className="flex items-center justify-center gap-2">
-            <div className="mx-1 flex w-48 items-center justify-center text-sm text-muted-foreground">
+          <div
+            className={cn(
+              "flex w-full items-center justify-end gap-2",
+              isMobileOnly && "justify-between",
+            )}
+          >
+            <div className="flex w-48 items-center justify-center text-sm text-muted-foreground">
               <div className="p-1">{`${selectedImages.length} selected`}</div>
               <div className="p-1">{"|"}</div>
               <div