🔦🕰️ ↝ [SSC-34 SSC-35 SSC-36]: JVH module added into structuresconfig

components/Data/ZoodexDataSources.tsx

@@ -163,7 +163,7 @@ export const telescopeDataSources = [
                 researched: 'telescope-sunspots',
                 techId: 5,
             },
-        ],
+        ], 
     },
     {
         category: 'exo-Solar System Observations',
@@ -287,6 +287,38 @@ export const roverDataSources = [
             },
         ],
     },
+    {
+        category: 'Clouds',
+        items: [
+            {
+                name: 'Martian Cloud Survey',
+                description: 'Survey and classify clouds on Mars and similar planets',
+                identifier: 'lidar-martianClouds',
+                researchId: 'cloudspotting-on-mars',
+                researcher: 'zooniverse',
+                // icon: CloudDrizzleIcon,
+                unlocked: false,
+                compatiblePlanetTypes: ['Frozen', 'Arid'],
+                bestPlanetType: ['Frozen'],
+                tutorialMission: 3000010,
+                activeStructure: 3105,
+                techId: 5,
+            },
+            {
+                name: 'Jovian Vortex Hunter',
+                description: "Help find interesting features & discover fluid dynamics in Jupiter's atmosphere",
+                identifier: 'lidar-jovianVortexHunter',
+                researchId: 'jovian-vortex-hunter',
+                researcher: 'zooniverse/ramanakumars',
+                unlocked: false,
+                compatiblePlanetTypes: ['GasGiant', 'IceGiant', 'Asteroid', 'Frozen'],
+                bestPlanetType: ['GasGiant'],
+                tutorialMission: 20000007,
+                activeStructure: 3105,
+                techId: 5,
+            },
+        ],
+    },
 ];
 
 // Extra (#zoodex):

components/Projects/(classifications)/PostForm.tsx

@@ -20,6 +20,7 @@ import {
   automatonaiForMarsOptions,
   DailyMinorPlanetOptions,
   PlanetFourOptions,
+  jvhOptions,
 } from "@/content/Classifications/Options";
 // import UserAvatar, { UserAvatarNullUpload } from "@/components/Profile/Avatar";
 
@@ -85,6 +86,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         return "Describe the type of cloud you see...";
       case "automaton-aiForMars":
         return "What surface types do you see from your rover?";
+      case 'lidar-jovianVortexHunter':
+        return "Describe the patterns in the clouds you see...";
     case "telescope-minorPlanet":
         return "Does the highlighted object move smoothly through the images? What do you see...?"
       default:
@@ -108,6 +111,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({
         return [zoodexBurrowingOwlClassificationOptions];
       case "zoodex-iguanasFromAbove":
         return [zoodexIguanasFromAboveClassificationOptions];
+      case 'lidar-jovianVortexHunter':
+        return [jvhOptions];
       case "zoodex-southCoastFaunaRecovery":
         return [zoodexSouthCoastFaunaRecovery];
       case "DiskDetective":

components/Projects/Auto/AI4Mars.tsx

@@ -178,13 +178,13 @@ export function AiForMarsProject() {
                     console.error("Error fetching mission data:", missionError);
                     setHasMission20000006(false); 
                     return;
-                }
+                };
 
                 setHasMission20000006(missionData && missionData.length > 0);
             } catch (error) {
                 console.error("Error checking user mission: ", error);
                 setHasMission20000006(false);
-            }
+            };
         };
 
         checkTutorialMission();
@@ -205,7 +205,7 @@ export function AiForMarsProject() {
 
                 if (anomalyError) {
                     throw anomalyError;
-                }
+                };
 
                 const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
                 setAnomaly(randomAnomaly);
@@ -215,15 +215,14 @@ export function AiForMarsProject() {
                 setAnomaly(null);
             } finally {
                 setLoading(false);
-            }
+            };
         };
 
         if (session && hasMission20000006) {
             fetchAnomaly();
-        }
+        };
     }, [session, hasMission20000006, supabase]);
 
-
     if (loading) {
         return (
             <div>

components/Projects/Lidar/JovianVortexHunter.tsx

@@ -5,6 +5,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import ClassificationForm from "../(classifications)/PostForm";
 
 import { Anomaly } from "../Telescopes/Transiting";
+import { useActivePlanet } from "@/context/ActivePlanet";
 
 interface Props {
     anomalyid: number | bigint;
@@ -17,7 +18,245 @@ export function StarterJovianVortexHunter({
 }: Props) {
     const imageUrl = `${supabaseUrl}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${anomalyid}.png`;
 
+    const [part, setPart] = useState(1);
+    const [line, setLine] = useState(1);
+    const nextLine = () => setLine(prevLine => prevLine + 1);
+    const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
+    const nextPart = () => {
+        setPart(2);
+        setLine(1);
+    };
+
+    const tutorialContent = (
+        <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 bg-[#2C3A4A] border border-[#85DDA2] rounded-md shadow-md relative w-full">
+                <div className="relative">
+                    <div className="absolute top-1/2 left-[-16px] transform -translate-y-1/2 w-0 h-0 border-t-8 border-t-[#2C3A4A] border-r-8 border-r-transparent"></div>
+                    {part === 1 && (
+                        <>
+                            {line === 1 && (
+                                <p className="text-[#EEEAD1]">
+                                    Welcome! In this workflow, you will be identifying the type of atmosphere feature visible in satellite images of gas giants in your network. The images you will see are cropped from your automated satellite data, and correspond to an area of ~7000x7000km on nearby gaseous planets.
+                                </p>
+                            )}
+                            {line === 2 && (
+                                <p className="text-[#EEEAD1]">
+                                    There are four main categories that we are interested in. The first three (vortex, turbulent region and cloud bands) are discrete atmospheric features. The last option is for when the image either shows no large scale structure, or if it is unclear.
+                                </p>
+                            )}
+                            {line === 3 && (
+                                <p className="text-[#EEEAD1]">
+                                    A vortex is an atmospheric feature that is generally round/elliptical in shape. On Earth, an example is a hurricane/cyclone/typhoon. On gaseous planets, there are examples of both cyclones and anti-cyclones (spin in the opposite direction of cyclones), and they appear in a variety of sizes and colours. If you see any feature that has a compact oval shape, select this option.
+                                </p>
+                            )}
+                            {line === 4 && (
+                                <p className="text-[#EEEAD1]">
+                                    Turbulent features are ubiquitous on gas giants. These are cloud structures that don't have a definite shape, but form lots of curls and swirls. Sometimes these structures swirl inwards and appear to form vortices, as shown below. These images should be labelled with the vortices option and the turbulent region option.
+                                </p>
+                            )}
+                            {line === 5 && (
+                                <p className="text-[#EEEAD1]">
+                                    Sometimes, there are gradients in color that are mostly horizontal in direction. These are the separation between different cloud bands (usually near the equator). 
+                                </p>
+                            )}
+                            {line === 6 && (
+                                <p className="text-[#EEEAD1]">
+                                    Sometimes, there might be no features of interest in the image. In this case, select the no visible structure option.
+                                </p>
+                            )}
+                            {line === 7 && (
+                                <p className="text-[#EEEAD1]">
+                                    Don't forget that you can select multiple options. Now, let's get started!
+                                </p>
+                            )}
+
+                            {line < 7 && (
+                                <button
+                                    className="mt-4 px-4 py-2 bg-[#D689E3] text-white rounded"
+                                    onClick={nextLine}
+                                >
+                                    Next
+                                </button>
+                            )}
+
+                            {line === 7 && (
+                                <button
+                                    onClick={nextPart}
+                                    className="mt-4 px-4 py-2 bg-[#D689E3] text-white rounded"
+                                >
+                                    Continue
+                                </button>
+                            )}
+
+                            {line < 8 && (
+                                <div className="flex justify-center mt-4 w-full h-64">
+                                    {line === 1 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step1.png" alt="Step 1" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 2 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step2.png" alt="Step 2" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 3 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step3.png" alt="Step 3" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 4 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step4.png" alt="Step 4" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 5 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step5.png" alt="Step 5" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 6 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step6.png" alt="Step 6" className="mex-w-full max-h-full object-contain" />} 
+                                    {line === 7 && <img src="/assets/Docs/Satellites/JovianVortexHunter/Step7.png" alt="Step 7" className="mex-w-full max-h-full object-contain" />} 
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="rounded-lg">
+            <div className="flex flex-col items-center">
+                {part === 1 && (
+                    <div className="mb-2">
+                        {tutorialContent}
+                    </div>
+                )}
+
+                {part === 2 && (
+                    <>
+                        <div className="max-w-4xl mx-auto rounded-lg bg-[#1D2833] text-[#F7F5E9] rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
+                            <div className="relative">
+                                <div className=" absolute inset-0 w-full h-full bg-[#2C4F64] rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-0"></div>
+                                <div className="bg-white bg-opacity-90">
+                                    <img
+                                        src={imageUrl}
+                                        alt='Vortex'
+                                        className="relative z-10 w-128 h-128 object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <ClassificationForm
+                                anomalyId={anomalyid.toString()}
+                                anomalyType="lidar-jovianVortexHunter"
+                                missionNumber={20000007}
+                                assetMentioned={imageUrl}
+                            />
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export function LidarJVHSatellite() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const { activePlanet } = useActivePlanet();
+
+    const [anomaly, setAnomaly] = useState<Anomaly | null>(null);
+    const [imageUrl, setImageUrl] = useState<string | null>(null);
+    const [hasMission20000007, setHasMission20000007] = useState<boolean>(false);
+
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        const checkTutorialMission = async () => {
+            if (!session) {
+                return;
+            };
+
+            try {
+                const { data: missionData, error: missionError } = await supabase
+                    .from("missions")
+                    .select("*")
+                    .eq("mission", 20000007)
+                    .eq("owner", session.user.id)
+                    .limit(1);
+
+                if (missionError) {
+                    throw missionError;
+                };
+
+                setHasMission20000007(missionData && missionData.length > 0);
+            } catch (error: any) {
+                console.error("Error fetching mission data:", error);
+                setHasMission20000007(false);
+            };
+        };
+
+        checkTutorialMission();
+    }, [session]);
+
+    useEffect(() => {
+        async function fetchAnomaly() {
+            if (!session) {
+                setLoading(false);
+                return;
+            };
+
+            try {
+                const { data: anomalyData, error: anomalyError } = await supabase
+                    .from("anomalies")
+                    .select("*")
+                    .eq("anomalySet", "lidar-jovianVortexHunter")
+
+                if (anomalyError) {
+                    throw anomalyError;
+                };
+
+                const randomAnomaly = anomalyData[Math.floor(Math.random() * anomalyData.length)] as Anomaly;
+                setAnomaly(randomAnomaly);
+                setImageUrl(`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/telescope/lidar-jovianVortexHunter/${randomAnomaly.id}.jpeg`);
+            } catch (error: any) {
+                console.error("Error fetching anomaly", error.message);
+                setAnomaly(null);
+            } finally {
+                setLoading(false);
+            };
+        };
+
+        if (session) {
+            fetchAnomaly();
+        };
+    }, [session, hasMission20000007]);
+
+    if (loading) {
+        return (
+            <div><p>Loading...</p></div>
+        );
+    };
+
+    if (!anomaly) {
+        return (
+            <div>
+                <p>No anomaly found.</p>
+            </div>
+        );
+    };
+
+    const content = !hasMission20000007
+    ? <StarterJovianVortexHunter anomalyid={anomaly.id} />
+    : (
+        <>
+            {loading && <p>Loading...</p>}
+            {!loading && !anomaly && <p>No anomaly found.</p>}
+            {!loading && anomaly && (
+                <>
+                    <div className="p-4 rounded-md relative w-full">
+                        {imageUrl && <img src={imageUrl} alt="Vortex" className="w-64 h-64 contained" />}
+                    </div>
+                    {imageUrl && (
+                        <ClassificationForm
+                            anomalyId={anomaly.id.toString()}
+                            anomalyType="lidar-jovianVortexHunter"
+                            missionNumber={200000072}
+                            assetMentioned={imageUrl}
+                            structureItemId={3105}
+                        />
+                    )}
+                </>
+            )}
+        </>
+    );
+
     return (
-        <p>Test</p>
+        <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">
+            {content}
+        </div>
     );
 };

components/Projects/Telescopes/Sunspots.tsx

@@ -136,19 +136,10 @@ const SunspotDetectorTutorial: React.FC<TelescopeProps> = ({
                 {part === 1 && (
                     <div className="mb-2">
                         {tutorialContent}
-                        <div></div>
                     </div>
                 )}
                 {part === 2 && (
                     <>
-                        {/* <div className="mb-2">
-                            <StructureInfo structureName="Telescope" />
-                            <img
-                                src='https://github.com/Signal-K/client/blob/SGV2-154/public/assets/Archive/Inventory/Structures/TelescopeReceiver.png?raw=true'
-                                alt='telescope'
-                                className="w-24 h-24 mb-2"
-                            />
-                        </div> */}
                         <div className="max-w-4xl mx-auto rounded-lg bg-[#1D2833] text-[#F7F5E9] rounded-md bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70">
                             <div className="relative">
                                 <div className=" absolute inset-0 w-full h-full bg-[#2C4F64] rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-0"></div>