️🏮✈️ ↝ [SSC-68 SSP-54 SSP-50]: Telescope > PH > Classification > Sect…

…or images can now be annotated
Signal-K · Jan 16, 2025 · e73f473 · e73f473
1 parent 72fce3f
commit e73f473
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/citizen b/citizen
diff --git a/components/Projects/(classifications)/Annotating/Annotator.tsx b/components/Projects/(classifications)/Annotating/Annotator.tsx
@@ -22,21 +22,23 @@ import { SciFiPanel } from '@/components/ui/styles/sci-fi/panel';
 
 interface ImageAnnotatorProps {
   initialImageUrl: string;
+  otherAssets?: string[];
   anomalyType: string;
   anomalyId: string;
   missionNumber: number;
   assetMentioned: string | string[];
   structureItemId?: number;
   parentPlanetLocation?: string;
   annotationType: 'AI4M' | 'P4' | 'PH' | 'Custom';
-}; 
+}
 
 export default function ImageAnnotator({
   initialImageUrl,
   anomalyType,
   anomalyId,
   missionNumber,
   assetMentioned,
+  otherAssets,
   parentPlanetLocation,
   structureItemId,
   annotationType,
@@ -54,14 +56,15 @@ export default function ImageAnnotator({
   const [uploads, setUploads] = useState<string[]>([]);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
+
   const CATEGORY_CONFIG: Record<string, CategoryConfig> =
-  annotationType === 'AI4M'
-    ? AI4MCATEGORIES
-    : annotationType === 'P4'
-    ? P4CATEGORIES
-    : annotationType === 'PH'
-    ? PHCATEGORIES
-    : {} as Record<string, CategoryConfig>;
+    annotationType === 'AI4M'
+      ? AI4MCATEGORIES
+      : annotationType === 'P4'
+      ? P4CATEGORIES
+      : annotationType === 'PH'
+      ? PHCATEGORIES
+      : {} as Record<string, CategoryConfig>;
 
   const addMedia = async () => {
     if (!canvasRef.current || !session) return;
@@ -74,16 +77,17 @@ export default function ImageAnnotator({
       const { data, error } = await supabase.storage
         .from('media')
         .upload(fileName, blob, { contentType: 'image/png' });
-      if (error) console.error('Upload error:', error.message);
-      else if (data) {
+      if (error) {
+        console.error('Upload error:', error.message);
+      } else if (data) {
         const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${data.path}`;
         setUploads((prev) => [...prev, url]);
       }
     } catch (err) {
       console.error('Unexpected error during canvas upload:', err);
     } finally {
       setIsUploading(false);
-    };
+    }
   };
 
   useEffect(() => {
@@ -118,22 +122,22 @@ export default function ImageAnnotator({
       {selectedImage && (
         <div className="space-y-4">
           <SciFiPanel className="p-4">
-          <AnnotationCanvas
-            canvasRef={canvasRef}
-            imageRef={imageRef}
-            isDrawing={isDrawing}
-            setIsDrawing={setIsDrawing}
-            currentTool={currentTool}
-            currentColor={
-              CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG]?.color || '#000000'
-            }
-            lineWidth={lineWidth}
-            drawings={drawings}
-            setDrawings={setDrawings}
-            currentDrawing={currentDrawing}
-            setCurrentDrawing={setCurrentDrawing}
-            currentCategory={currentCategory}
-          />
+            <AnnotationCanvas
+              canvasRef={canvasRef}
+              imageRef={imageRef}
+              isDrawing={isDrawing}
+              setIsDrawing={setIsDrawing}
+              currentTool={currentTool}
+              currentColor={
+                CATEGORY_CONFIG[currentCategory as keyof typeof CATEGORY_CONFIG]?.color || '#000000'
+              }
+              lineWidth={lineWidth}
+              drawings={drawings}
+              setDrawings={setDrawings}
+              currentDrawing={currentDrawing}
+              setCurrentDrawing={setCurrentDrawing}
+              currentCategory={currentCategory}
+            />
           </SciFiPanel>
           <SciFiPanel className="p-4">
             <Legend
@@ -148,12 +152,33 @@ export default function ImageAnnotator({
               {isUploading ? 'Uploading...' : 'Save & proceed'}
             </Button>
           </SciFiPanel>
+          {otherAssets && (
+            <SciFiPanel>
+              {otherAssets.map((url, index) => (
+                <div
+                  key={index}
+                  id={`slide-${index}`}
+                  className="carousel-item relative w-full h-64 flex-shrink-0"
+                >
+                  <img
+                    src={`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${url}`}
+                    alt={`Anomaly image ${index + 1}`}
+                    className="w-full h-full object-contain rounded-lg"
+                  />
+                </div>
+              ))}
+            </SciFiPanel>
+          )}
           <SciFiPanel className="p-4">
             <ClassificationForm
               anomalyId={anomalyId}
               anomalyType={anomalyType}
               missionNumber={missionNumber}
-              assetMentioned={[...uploads, ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned])]}
+              assetMentioned={[
+                ...uploads,
+                ...(otherAssets || []),
+                ...(Array.isArray(assetMentioned) ? assetMentioned : [assetMentioned]),
+              ].filter((item): item is string => typeof item === 'string')}
               structureItemId={structureItemId}
             />
           </SciFiPanel>

diff --git a/components/Projects/Telescopes/Transiting.tsx b/components/Projects/Telescopes/Transiting.tsx
@@ -108,7 +108,7 @@ export function StarterTelescopeTess({ anomalyid }: SelectedAnomProps) {
     return (
         <div className="flex flex-col items-start gap-4 pb-4 relative w-full max-w-lg overflow-y-auto max-h-[90vh] rounded-lg">
             <div className="p-4 rounded-md relative w-full">
-                {imageUrls.length > 0 && (
+                {/* {imageUrls.length > 0 && (
                     <div className="relative w-full">
                         <div className="carousel relative">
                             {imageUrls.map((url, index) => (
@@ -131,15 +131,24 @@ export function StarterTelescopeTess({ anomalyid }: SelectedAnomProps) {
                             ))}
                         </div>
                     </div>
-                )}
+                )} */}
                 {selectedAnomaly && (
-                    <ClassificationForm
-                        anomalyId={selectedAnomaly.id.toString()}
-                        anomalyType="planet"
+                    <ImageAnnotator
+                        otherAssets={imageUrls}
+                        anomalyType='planet'
                         missionNumber={1372001}
-                        assetMentioned={selectedAnomaly?.id.toString()}
-                        structureItemId={3103}
+                        assetMentioned={selectedAnomaly.id.toString()}
+                        annotationType='PH'
+                        initialImageUrl={imageUrls[1]}
+                        anomalyId={selectedAnomaly.id.toString()}
                     />
+                    // <ClassificationForm
+                    //     anomalyId={selectedAnomaly.id.toString()}
+                    //     anomalyType="planet"
+                    //     missionNumber={1372001}
+                    //     assetMentioned={selectedAnomaly?.id.toString()}
+                    //     structureItemId={3103}
+                    // />
                 )}
             </div>
         </div>
+4 −4		buckets/upload.py
+ −		content/anomalies/50365310/Sector1.png
+ −		content/anomalies/50365310/Sector2.png
+ −		content/anomalies/50365310/Sector3.png
+ −		content/anomalies/50365310/Sector4.png
+ −		content/anomalies/50365310/Sector5.png
+ −		content/anomalies/50365310/Sector6.png
+54 −4		content/anomalies/periodCurves.py
+72 −0		content/lk.ipynb
+101 −0		content/upload.py