🐜✈️ ↝ [SSP-47 SSC-66 SSG-97 SSG-98 SSG-99]: P4 Annotation Working/fixed :)

Author: Gizmotronn

components/Projects/(classifications)/Annotating/DrawingCanvas.tsx

@@ -108,24 +108,39 @@ export function AnnotationCanvas({
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext('2d');
     if (!canvas || !ctx || !imageRef.current) return;
-
+  
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.drawImage(
-      imageRef.current,
-      0,
-      0,
-      CANVAS_WIDTH,
-      CANVAS_HEIGHT // Scale the image to fit within the fixed canvas size
-    );
-
+  
+    const img = imageRef.current;
+    const imgAspectRatio = img.width / img.height;
+    const canvasAspectRatio = CANVAS_WIDTH / CANVAS_HEIGHT;
+  
+    let drawWidth, drawHeight, offsetX, offsetY;
+  
+    if (imgAspectRatio > canvasAspectRatio) {
+      // Image is wider than canvas
+      drawWidth = CANVAS_WIDTH;
+      drawHeight = CANVAS_WIDTH / imgAspectRatio;
+      offsetX = 0;
+      offsetY = (CANVAS_HEIGHT - drawHeight) / 2;
+    } else {
+      // Image is taller than canvas
+      drawWidth = CANVAS_HEIGHT * imgAspectRatio;
+      drawHeight = CANVAS_HEIGHT;
+      offsetX = (CANVAS_WIDTH - drawWidth) / 2;
+      offsetY = 0;
+    };
+  
+    ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+  
     drawings.forEach((drawing) => {
       drawObject(ctx, drawing);
     });
-
+  
     if (currentDrawing) {
       drawObject(ctx, currentDrawing);
-    }
-  };
+    };
+  };  
 
   useEffect(() => {
     if (imageRef.current) {
@@ -151,7 +166,7 @@ export function AnnotationCanvas({
         onMouseUp={stopDrawing}
         onMouseOut={stopDrawing}
         className={cn("cursor-crosshair", isDrawing && "cursor-none")}
-        style={{ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }}
+        style={{ width: `${CANVAS_WIDTH}px`, height: `${CANVAS_HEIGHT}px` }}
       />
     </div>
   );

components/Projects/Satellite/PlanetFour.tsx

@@ -159,32 +159,41 @@ export function PlanetFourProject({ anomalyid }: SelectedAnomProps) {
     };
 
     const fetchAnomaly = async () => {
-        if (!anomalyid || !session) return; 
-
-        setLoading(true); 
-        
+        if (!session) {
+            console.error("No session found");
+            setLoading(false);
+            return;
+        };
+    
+        setLoading(true);
+    
         try {
-            const { data: anomalyData, error: anomalyError } = await supabase
+            const { data: anomalies, error } = await supabase
                 .from('anomalies')
                 .select('*')
-                .eq('id', anomalyid)  
-                .single();  
-
-            if (anomalyError) throw anomalyError;
-
-            setAnomaly(anomalyData);
-            setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/satellite-planetFour/${anomalyData.id}.jpeg`);
-        } catch (error: any) {
-            console.error("Error fetching anomaly", error.message);
+                .eq('anomalySet', 'satellite-planetFour');
+    
+            if (error) throw error;
+    
+            if (!anomalies || anomalies.length === 0) {
+                console.error("No anomalies found for the given type");
+                setAnomaly(null);
+            } else {
+                const anomaly = anomalies[0];
+                setAnomaly(anomaly);
+                setImageUrl(`${supabaseUrl}/storage/v1/object/public/telescope/satellite-planetFour/${anomaly.id}.jpeg`);
+            }
+        } catch (error) {
+            console.error("Error fetching anomaly", error);
             setAnomaly(null);
         } finally {
-            setLoading(false); 
+            setLoading(false);
         };
-    };
+    };    
 
     useEffect(() => {
         fetchAnomaly();
-    }, [anomalyid, session, supabase, supabaseUrl]);
+    }, [session, supabase, supabaseUrl]);
 
     if (loading) {
         return <div><p>Loading...</p></div>;
@@ -215,6 +224,7 @@ export function PlanetFourProject({ anomalyid }: SelectedAnomProps) {
                             initialImageUrl={imageUrl}
                         />
                     )}
+                    {imageUrl}
                 </>
             ) : (
                 <div>
@@ -231,7 +241,9 @@ export function P4Wrapper () {
 
     return (
         <div className="space-y-8">
-        <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
+        {!selectedAnomaly && (
+            <PreferredTerrestrialClassifications onSelectAnomaly={setSelectedAnomaly} />
+        )}
         {selectedAnomaly && (
             <PlanetFourProject anomalyid={selectedAnomaly} />
         )}

components/Structures/Missions/Astronomers/SatellitePhotos/AI4M/AIForMars.tsx

@@ -42,7 +42,7 @@ const AI4M = () => {
                 completedCount: 0,
                 internalComponent: () => <AI4MWrapper />,
                 color: "text-blue-500",
-            },
+            }, 
             {
                 id: 2,
                 chapter: 1,