fix media selection

Signed-off-by: Colorado, Camilo <[email protected]>

Author: camiloHimura

application/ui/src/components/virtualizer-grid-layout/virtualizer-grid-layout.module.scss

@@ -33,7 +33,7 @@
 
     img {
         box-sizing: border-box;
-        object-fit: contain;
+        object-fit: cover;
         width: 100%;
         height: 100%;
     }

application/ui/src/features/inspect/dataset/media-preview/inference-result/inference-result.component.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { SchemaPredictionResponse } from '@geti-inspect/api/spec';
 import { DimensionValue, Responsive, View } from '@geti/ui';
@@ -21,15 +21,27 @@ interface InferenceResultProps {
 const labelHeight: Responsive<DimensionValue> = 'size-350';
 
 export const InferenceResult = ({ selectedMediaItem, inferenceResult }: InferenceResultProps) => {
+    const imageRef = useRef(null);
     const { inferenceOpacity } = useInference();
     const [imageDimensions, setImageDimensions] = useState({ width: 0, height: 0, left: 0, top: 0 });
 
     const handleImageLoaded = (imageElement: HTMLImageElement) => {
         setImageDimensions(getImageDimensions(imageElement));
     };
 
+    useEffect(() => {
+        if (!imageRef.current) return;
+
+        const observer = new ResizeObserver(([entry]) => {
+            handleImageLoaded(entry.target as HTMLImageElement);
+        });
+
+        observer.observe(imageRef.current);
+        return () => observer.disconnect();
+    }, []);
+
     return (
-        <>
+        <View height={'100%'} paddingTop={labelHeight}>
             {inferenceResult && (
                 <View
                     height={labelHeight}
@@ -42,8 +54,9 @@ export const InferenceResult = ({ selectedMediaItem, inferenceResult }: Inferenc
                 </View>
             )}
 
-            <View width={'100%'} height={'100%'} position={'relative'} marginTop={labelHeight}>
+            <View width={'100%'} height={'100%'} position={'relative'}>
                 <img
+                    ref={imageRef}
                     alt={selectedMediaItem.filename}
                     className={clsx(classes.img)}
                     src={`/api/projects/${selectedMediaItem.project_id}/images/${selectedMediaItem.id}/full`}
@@ -54,16 +67,16 @@ export const InferenceResult = ({ selectedMediaItem, inferenceResult }: Inferenc
                     {isNonEmptyString(inferenceResult?.anomaly_map) && (
                         <motion.img
                             exit={{ opacity: 0 }}
-                            style={imageDimensions}
                             initial={{ opacity: 0 }}
                             animate={{ opacity: inferenceOpacity }}
                             className={clsx(classes.inferenceImage)}
+                            style={{ ...imageDimensions }}
                             src={`data:image/png;base64,${inferenceResult.anomaly_map}`}
                             alt={`${selectedMediaItem.filename} inference`}
                         />
                     )}
                 </AnimatePresence>
             </View>
-        </>
+        </View>
     );
 };

application/ui/src/features/inspect/dataset/media-preview/inference-result/inference-result.module.scss

@@ -1,8 +1,6 @@
 .img {
     width: 100%;
     height: 100%;
-    margin: auto;
-    display: block;
     object-fit: contain;
 }
 

application/ui/src/features/inspect/dataset/media-preview/inference-result/util.ts

@@ -13,6 +13,10 @@ export const getImageDimensions = (img: HTMLImageElement) => {
     const naturalWidth = img.naturalWidth;
     const naturalHeight = img.naturalHeight;
 
+    if (naturalHeight === 0 || containerHeight === 0) {
+        return { top: 0, left: 0, width: 0, height: 0 };
+    }
+
     const imageRatio = naturalWidth / naturalHeight;
     const containerRatio = containerWidth / containerHeight;
 

application/ui/src/features/inspect/dataset/media-preview/sidebar-items/sidebar-items.component.tsx

@@ -1,6 +1,6 @@
 import { Selection, View } from '@geti/ui';
 import { GridLayoutOptions } from 'react-aria-components';
-import { getThumbnailUrl } from 'src/features/inspect/utils';
+import { getThumbnailUrl, isNonEmptyString } from 'src/features/inspect/utils';
 
 import { GridMediaItem } from '../../../../..//components/virtualizer-grid-layout/grid-media-item/grid-media-item.component';
 import { MediaThumbnail } from '../../../../../components/media-thumbnail/media-thumbnail.component';
@@ -35,7 +35,7 @@ export const SidebarItems = ({
         const firstKey = updatedSelectedKeys.values().next().value;
         const mediaItem = mediaItems.find((item) => item.id === firstKey);
 
-        onSelectedMediaItem(mediaItem?.id ?? null);
+        isNonEmptyString(mediaItem?.id) && onSelectedMediaItem(mediaItem.id);
     };
 
     const handleDeletedItem = (deletedIds: string[]) => {