🥭🎇 ↝ [SGV2-10]: Working on sector structure creation

components/Content/Planets/PlanetData/ContentPlaceholder.tsx

@@ -93,17 +93,9 @@ export function LightkurveBaseGraph({ planetId }: { planetId: { planetId: string
   // Extract the planetId from the object
   const extractedPlanetId = planetId.planetId;
 
-  useEffect(() => {
-    console.log("planetId:", extractedPlanetId); // Check the value of extractedPlanetId
-  }, [extractedPlanetId]);
-
-// const { content, avatar_url, type, deepnote, cover, temperatureEq, smaxis, mass } = planetData;
-
   return (
     <center>
       <div className="max-w-2xl w-full bg-white p-8 rounded-lg shadow-xl z-50 mt-10">
-      {/* <p className="text-base font-semibold leading-7 text-indigo-600">Planet type: {type}</p>
-      <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Planet name: {content}</h1> */}
       <p className="mt-6 text-xl leading-8 text-gray-700">
         Brief summaary: owner, sectors, etc
       </p>

components/_Core/Section/BentoBox.tsx

@@ -6,6 +6,7 @@ import { InventoryOneList, InventoryTwoList, OwnedStructuresFullList } from "../
 import { ClassificationForPlanetFormBlock } from "../../_Skeleton/ClassificationBlocks";
 import { ContentPlaceholderBlockTest, PlanetStatBlock, SectorsInsidePlanetBlock, StructuresOnPlanetBlock } from "../../_Skeleton/PlanetDataBlocks";
 import { AddResourceToInventoryBlock, SectorRoverImageClassificationBlock } from "../../_Skeleton/SectorDataBlocks";
+import { LightcurveBaseGraph } from "../../_Skeleton/ClassificationDataBlocks";
 
 export default function BlockGrid() {
     return (
@@ -169,7 +170,18 @@ const items = [
         ),
         icon: RocketIcon,
         header: <AddResourceToInventoryBlock />,
-        className: "md:col-span-2 row-span-1"
+        className: "md:col-span-1 row-span-1"
+    },
+    {
+        title: "Get the tic id from a planet/classification data point and generate a lightcurve using the API. Currently used by the telescope structure",
+        description: (
+            <span className="text-sm">
+                Currently only has the function to generate
+            </span>
+        ),
+        icon: RocketIcon,
+        header: <LightcurveBaseGraph />,
+        className: "md:col-span-1 row-span-1"
     },
     {
         title: "Data/stat display for an anomaly ",

components/_Skeleton/ClassificationDataBlocks.tsx

@@ -1,12 +1,13 @@
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { useEffect, useState } from "react";
+import axios from "axios";
 
-const LightcurveMaker = () => {
+const LightcurveMaker = () => { // Copy of LightcurveGenerator for simplicity/organisation
     const supabase = useSupabaseClient();
 
     const planetId = "2";
     const [ticId, setTicId] = useState('');
-    const [imageUrl, setImageUrl] = useState('');   
+    const [imageURL, setImageUrl] = useState('');   
 
     useEffect(() => {
         // Fetch the planet data from the basePlanets table
@@ -33,4 +34,76 @@ const LightcurveMaker = () => {
 
         fetchPlanetData();
     }, [planetId, supabase]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const response = await axios.post('https://papyrus-production.up.railway.app/generate_lightcurve_image', {
+                tic_id: ticId,
+            }, { responseType: 'arraybuffer' });
+            const blob = new Blob([response.data], { type: 'image/png' });
+            const url = URL.createObjectURL(blob);
+
+            // Convert planetId to string before constructing the file name
+            const fileName = `_${Date.now()}`;
+
+            // Upload the image to Supabase storage
+            const result = await supabase.storage
+                .from('planetsss')
+                .upload(fileName, blob);
+
+            if (result.data) {
+                // If upload successful, get the URL of the uploaded image
+                const imageURL = process.env.NEXT_PUBLIC_SUPABASE_URL + '/storage/v1/object/public/planetsss/' + result.data.path;
+
+                // Update the 'lightkurve' column in the 'basePlanets' table with the image URL
+                console.log("planetId:", planetId); // Check the value  of planetId
+                await supabase
+                    .from('basePlanets')
+                    .update({ lightkurve: imageURL })
+                    .eq('id', parseInt(planetId)); // Ensure planetId is parsed as integer
+
+                // Set the image URL to display the generated image
+                setImageUrl(url);
+            } else {
+                console.log("Error uploading image to Supabase.");
+            }
+        } catch (error) {
+            console.error(error.message);
+        };
+    };
+
+    return (
+        <div>
+          <form onSubmit={handleSubmit}>
+            <label>
+              Enter TIC ID:
+              <input type="text" value={ticId} onChange={(e) => setTicId(e.target.value)} readOnly/>
+            </label>
+            <button type="submit">Generate Lightcurve Image</button>
+          </form>
+          {imageURL && (
+            <div>
+              <h2>Generated Lightcurve Image:</h2>
+              <img src={imageURL} alt="Lightcurve" />
+            </div>
+          )}
+        </div>
+    );
+};
+
+export const LightcurveBaseGraph = () => {
+    const supabase = useSupabaseClient();
+    const planetId = "2";
+
+    if (!supabase) {
+        return (
+            <LightcurveBaseGraph />
+        );
+    };
+
+    return (
+        <LightcurveMaker />
+    );
 };