Cleanup

web/src/views/classification/ModelTrainingView.tsx

@@ -65,6 +65,10 @@ import {
   GroupedClassificationCard,
 } from "@/components/card/ClassificationCard";
 import { Event } from "@/types/event";
+import SearchDetailDialog, {
+  SearchTab,
+} from "@/components/overlay/detail/SearchDetailDialog";
+import { SearchResult } from "@/types/search";
 
 type ModelTrainingViewProps = {
   model: CustomClassificationModelConfig;
@@ -889,7 +893,60 @@ function ObjectTrainGrid({
     };
   }, [model]);
 
+  // selection
+
+  const [selectedEvent, setSelectedEvent] = useState<Event>();
+  const [dialogTab, setDialogTab] = useState<SearchTab>("details");
+
+  // handlers
+
+  const handleClickEvent = useCallback(
+    (
+      group: ClassificationItemData[],
+      event: Event | undefined,
+      meta: boolean,
+    ) => {
+      if (event && selectedImages.length == 0 && !meta) {
+        setSelectedEvent(event);
+      } else {
+        const anySelected =
+          group.find((item) => selectedImages.includes(item.filename)) !=
+          undefined;
+
+        if (anySelected) {
+          // deselect all
+          const toDeselect: string[] = [];
+          group.forEach((item) => {
+            if (selectedImages.includes(item.filename)) {
+              toDeselect.push(item.filename);
+            }
+          });
+          onClickImages(toDeselect, false);
+        } else {
+          // select all
+          onClickImages(
+            group.map((item) => item.filename),
+            true,
+          );
+        }
+      }
+    },
+    [selectedImages, onClickImages],
+  );
+
   return (
+    <>
+      <SearchDetailDialog
+        search={
+          selectedEvent ? (selectedEvent as unknown as SearchResult) : undefined
+        }
+        page={dialogTab}
+        setSimilarity={undefined}
+        setSearchPage={setDialogTab}
+        setSearch={(search) => setSelectedEvent(search as unknown as Event)}
+        setInputFocused={() => {}}
+      />
+
       <div
         ref={contentRef}
         className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
@@ -904,7 +961,13 @@ function ObjectTrainGrid({
               threshold={threshold}
               selectedItems={selectedImages}
               i18nLibrary="views/classificationModel"
-            onClick={() => {}}
+              onClick={(data) => {
+                if (data) {
+                  onClickImages([data.filename], true);
+                } else {
+                  handleClickEvent(group, event, true);
+                }
+              }}
               onSelectEvent={() => {}}
             >
               {(data) => (
@@ -937,5 +1000,6 @@ function ObjectTrainGrid({
           );
         })}
       </div>
+    </>
   );
 }