🦐🌎 ↝ [SSC-17 SSC-20 SSC-21 SSC-22 SSC-23]: Onboarding, tutorial, cont…

…ent for GLOBE

.github/workflows/codeql.yml

@@ -0,0 +1,67 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - '**' 
+  pull_request:
+    branches:
+      - '**'
+  schedule:
+    - cron: '0 21 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

app/scenes/globe/page.tsx

@@ -1,31 +1,128 @@
 "use client";
 
-import React, { useCallback, useEffect, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
 import { useActivePlanet } from "@/context/ActivePlanet";
 import { InventoryStructureItem } from "@/types/Items";
 import { PlanetarySystem } from "@/components/(scenes)/planetScene/orbitals/system";
 import StructuresOnPlanet from "./Structures";
 import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import { StructuresConfigForSandbox } from "@/constants/Structures/SandboxProperties";
 
-const GlobeView: React.FC = () => {
-    const { activePlanet, updatePlanetLocation } = useActivePlanet();
-    const handleUpdatetToGlobeAnomalyLocation = () => {
-        updatePlanetLocation(35);
+export default function GlobeView() {
+    const [activeComponent, setActiveComponent] = useState<React.ReactNode>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    // Create a list of all the buttons and actions from the structures config
+    const buttonsList = Object.values(StructuresConfigForSandbox).flatMap(
+      (structure) => [...(structure.actions || []), ...structure.buttons]
+    );
+
+    // Handle button click and open the modal
+    const handleClick = (component: React.ReactNode) => {
+      setActiveComponent(component);
+      setIsModalOpen(true); // Open modal on button click
     };
-
-    if (activePlanet?.id !== 35) {
-        updatePlanetLocation(35);
+
+    // Close the modal
+    const closeModal = () => {
+      setIsModalOpen(false);
+      setActiveComponent(null);
     };
-
+  
     return (
-        <div className="relative min-h-screen">
-            <GlobeStructures />
+      <EarthViewLayout>
+        <div className="w-full">
+          <div className="py-3">
+            <div className="py-1">
+              <PlanetarySystem />
+            </div>
+          </div>
+        </div>
+        <div className="w-full">
+            <center>
+                <>
+                </>
+            </center>
+        </div>
+        <div className="w-full">
+          <center>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
+              {buttonsList.map((button, index) => (
+                <div key={index} className="relative flex flex-col items-center">
+                  {button.dynamicComponent ? (
+                    <button
+                      className="bg-gradient-to-r from-blue-400 to-purple-500 text-white p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 flex items-center space-x-2"
+                      onClick={() => handleClick(button.dynamicComponent)}
+                    >
+                      {button.icon}
+                      <span>{button.text}</span>
+                    </button>
+                  ) : (
+                    <button
+                      className="bg-gray-200 text-gray-800 p-4 rounded-lg shadow-lg"
+                      disabled
+                    >
+                      No component available
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </center>
         </div>
+
+        {isModalOpen && (
+          <Modal onClose={closeModal}>
+            <div className="p-6 rounded-lg shadow-lg">
+              {activeComponent}
+            </div>
+          </Modal>
+        )}
+      </EarthViewLayout>
+    );
+  }
+
+  // Modal component for the popup
+  interface ModalProps {
+    onClose: () => void;
+    children: ReactNode;
+  }
+
+  const Modal: React.FC<ModalProps> = ({ onClose, children }) => {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center z-50">
+        <div className="relative rounded-lg shadow-lg w-3/4 lg:w-1/2">
+          <button
+            className="absolute top-2 right-2 text-black"
+            onClick={onClose}
+          >
+            &#x2715;
+          </button>
+          <div className="p-4">{children}</div>
+        </div>
+      </div>
     );
-};
+  };
+
+// const GlobeView: React.FC = () => {
+//     const { activePlanet, updatePlanetLocation } = useActivePlanet();
+//     const handleUpdatetToGlobeAnomalyLocation = () => {
+//         updatePlanetLocation(35);
+//     };
+
+//     if (activePlanet?.id !== 35) {
+//         updatePlanetLocation(35);
+//     };
+
+//     return (
+//         <div className="relative min-h-screen">
+//             <GlobeStructures />
+//         </div>
+//     );
+// };
 
-export default GlobeView;
+// export default GlobeView;
 
 const GlobeStructures: React.FC = () => {
     const supabase = useSupabaseClient();

app/tests/page.tsx

@@ -2,11 +2,12 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 import Camera from "@/components/Projects/Zoodex/Upload/Camera";
+import CloudUploadEarthCameraComponent from "@/components/Projects/Lidar/Upload/CloudCamera";
 
 export default function TestPage() {
     return (
         <div>
-            <Camera />
+            <CloudUploadEarthCameraComponent />
         </div>
     );
 };

components/(classifications)/PostForm.tsx

@@ -226,6 +226,100 @@ const initialCloudClassificationOptions: ClassificationOption[] = [
     },
 ];
 
+const lidarEarthCloudsReadClassificationOptions: ClassificationOption[] = [
+    {
+        id: 1,
+        text: "Nimbostratus",
+    },
+    {
+        id: 2,
+        text: 'Cumulonimbus',
+    },
+    {
+        id: 3,
+        text: 'Stratocumulus',
+    },
+    {
+        id: 4,
+        text: 'Stratus'
+    },
+    {
+        id: 5,
+        text: "Cumulus",
+    },
+    {
+        id: 6,
+        text: "Altostratus",
+    },
+    {
+        id: 7,
+        text: "Altocumulus",
+    },
+    {
+        id: 8,
+        text: "Cirrostratus",
+    },
+    {
+        id: 9,
+        text: "Cirrocumulus",
+    },
+    {
+        id: 10,
+        text: "Cirrus",
+    },
+    {
+        id: 11,
+        text: "No clouds",
+    },
+];
+
+const lidarEarthCloudsUploadClassificationOptions: ClassificationOption[] = [
+    {
+        id: 1,
+        text: "Nimbostratus",
+    },
+    {
+        id: 2,
+        text: 'Cumulonimbus',
+    },
+    {
+        id: 3,
+        text: 'Stratocumulus',
+    },
+    {
+        id: 4,
+        text: 'Stratus'
+    },
+    {
+        id: 5,
+        text: "Cumulus",
+    },
+    {
+        id: 6,
+        text: "Altostratus",
+    },
+    {
+        id: 7,
+        text: "Altocumulus",
+    },
+    {
+        id: 8,
+        text: "Cirrostratus",
+    },
+    {
+        id: 9,
+        text: "Cirrocumulus",
+    },
+    {
+        id: 10,
+        text: "Cirrus",
+    },
+    {
+        id: 11,
+        text: "No clouds",
+    },
+];
+
 const zoodexBurrowingOwlClassificationOptions: ClassificationOption[] = [
     {
         id: 1,
@@ -343,6 +437,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, an
                 return 'Describe the number and behaviour of the penguins...'
             case 'zoodex-planktonPortal':
                 return 'Describe the plankton you see and their behaviour...'
+            case 'lidar-earthCloudRead':
+                return 'Describe the type of cloud you see...'
             default:
                 return "Enter your classification details...";
         };
@@ -368,6 +464,8 @@ const ClassificationForm: React.FC<ClassificationFormProps> = ({ anomalyType, an
                 return diskDetectorClassificationOptions;
             case 'zoodex-planktonPortal':
                 return planktonPortalClassificationOptions;
+            case 'lidar-earthCloudRead':
+                return lidarEarthCloudsReadClassificationOptions;
             case 'sunspot':
                 // return sunspotsConfigurationTemporary;
                 return [];

components/Data/unlockNewDataSources.tsx

@@ -198,9 +198,9 @@ export function DataSourcesModal({ structureId, structure }: DataSourcesModalPro
   return (
     <div className="flex items-center justify-center">
       <div className="w-96 bg-[#2C3A4A] rounded-lg shadow-xl">
-        <center>
+        {/* <center>
           <StructureInfo structureName={structure} />
-        </center>
+        </center> */}
         <div className="p-6 space-y-6">
           <InventoryIdFetcher
             structureId={structureId}

components/Projects/Lidar/Clouds.tsx

@@ -18,7 +18,7 @@ export function StarterLidar() {
 
     const [loading, setLoading] = useState<boolean>(true);
 
-    useEffect(() => {
+    useEffect(() => {  
         async function fetchAnomaly() {
             if (!session) {
                 setLoading(false);

components/Projects/Lidar/EarthCloudsRead.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import { useActivePlanet } from "@/context/ActivePlanet";
+import ClassificationForm from "@/components/(classifications)/PostForm";
+import { Anomaly } from "../Telescopes/Transiting";
+
+export function EarthCloudRead() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const { activePlanet } = useActivePlanet();
+
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    // const imageUrl = `${supabaseUrl}/storage/v1/object/public/clouds/${anomalyId}.png`;
+
+    const [part, setPart] = useState(1);
+    const [line, setLine] = useState(1);
+
+    const nextLine = () => setLine((prevLine) => prevLine + 1);
+    const nextPart = () => {
+        setPart(2);
+        setLine(1);
+    };
+
+    return (
+        <>Test</>
+    )
+}