Check length

web/src/components/card/ClassificationCard.tsx

@@ -219,10 +219,10 @@ export function GroupedClassificationCard({
     const bestTyped: ClassificationItemData = best;
     return {
       ...bestTyped,
-      name: event ? (event.sub_label ?? "") : bestTyped.name,
+      name: event ? (event.sub_label ?? t("details.unknown")) : bestTyped.name,
       score: event?.data?.sub_label_score || bestTyped.score,
     };
-  }, [group, event]);
+  }, [group, event, t]);
 
   const bestScoreStatus = useMemo(() => {
     if (!bestItem?.score || !threshold) {

web/src/views/classification/ModelSelectionView.tsx

@@ -39,9 +39,11 @@ export default function ModelSelectionView({
       return [];
     }
 
-    const allModels = Object.values(config.classification.custom);
+    return Object.values(config.classification.custom);
+  }, [config]);
 
-    return allModels.filter((model) => {
+  const selectedClassificationConfigs = useMemo(() => {
+    return classificationConfigs.filter((model) => {
       if (pageToggle == "objects" && model.object_config != undefined) {
         return true;
       }
@@ -52,7 +54,7 @@ export default function ModelSelectionView({
 
       return false;
     });
-  }, [config, pageToggle]);
+  }, [classificationConfigs, pageToggle]);
 
   // new model wizard
 
@@ -115,7 +117,7 @@ export default function ModelSelectionView({
         </div>
       </div>
       <div className="flex size-full gap-2 p-2">
-        {classificationConfigs.map((config) => (
+        {selectedClassificationConfigs.map((config) => (
           <ModelCard
             key={config.name}
             config={config}
@@ -137,7 +139,7 @@ function ModelCard({ config, onClick }: ModelCardProps) {
   }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });
 
   const coverImage = useMemo(() => {
-    if (!dataset) {
+    if (!dataset?.length) {
       return undefined;
     }