adding comments and updating the step of pass over features

backend/src/api/grafana/controllers/grafana.js

@@ -10,7 +10,7 @@ module.exports = {
     try {
       const grafanaToken = process.env.GRAFANA_BOT_TOKEN; // Grafana API token
       const grafanaHost = "https://monitoring.hypso.space"; // Grafana URL
-      const datasourceId = 3; // Replace with your datasource UID
+      const datasourceId = 3;
 
       const baseFields = [
         { refId: "batteryVoltage", field: "vBatt", measurement: "eps" },
@@ -40,8 +40,8 @@ module.exports = {
       ];
       const tempFields = [];
       for (let i = 0; i <= 13; i++) {
-        if (satSQL === "hypso1" && (i === 12 || i === 13)) continue;
-        if (satSQL === "hypso2" && i === 10) continue;
+        if (satSQL === "hypso1" && (i === 12 || i === 13)) continue; // No ext. Board for hypso1
+        if (satSQL === "hypso2" && i === 10) continue; //Skip temp_10 because it is not used for hypso2
         tempFields.push({
           refId: `tempPanelData${i}`,
           field: `temp_${i}`,
@@ -77,6 +77,8 @@ module.exports = {
       }
 
       const data = await response.json();
+
+      //Returning the right name for each panel
       const createNameForTemp = (i) => {
         let name = `Panel ${i + 1}`;
         if (i <= 3) {
@@ -101,7 +103,7 @@ module.exports = {
         const result = data.results[item.refId];
         if (result && result.frames && result.frames.length > 0) {
           if (item.refId.startsWith("tempPanelData")) {
-            // Handle temperature data with specific refId logic
+            // Handling tempPanelData separately
             let i = parseInt(item.refId.replace("tempPanelData", ""), 10);
             acc[item.refId] = {
               array: result.frames[0].data.values,
@@ -111,7 +113,6 @@ module.exports = {
             acc[item.refId] = result.frames[0].data.values; // Store as key-value pair
           }
         }
-        console.log(acc["tempPanelData10"]);
         return acc;
       }, {});
       // Return the data to the client

backend/src/api/slack/controllers/slack.js

@@ -27,15 +27,21 @@ module.exports = {
       return;
     }
     try {
+      // Getting the message with the image needed from Slack
       const message = await fetchImagesFromSlack.fetchImagesFromSlack(satName);
       const image = message ? message.files[0] : null;
+
+      //Making the image public if it is not already
       if (!image.public_url_shared) {
         await fetchImagesFromSlack.getSharedURL(image?.id);
       }
+
+      // Creating the image URL
       const imageURl = fetchImagesFromSlack.createImageUrl(
         image?.permalink_public,
         image?.name
       );
+
       cachedImage = {
         success: true,
         image: imageURl,

frontend/src/app/_homeComponents/DailySolarActivity.tsx

@@ -2,6 +2,11 @@ import React, { useState, useEffect } from "react";
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts/highstock";
 
+/**
+ *
+ * This component renders a graph of geomagnetic activity index (Kp) data.
+ */
+
 export default function DailySolarActivity() {
     const [dailyKpIndex, setDailyKpIndex] = useState<any>(null);
     const [dailyTimestamps, setDailyTimestamps] = useState<string[]>([]);

frontend/src/app/_homeComponents/HistoricalSolarCycleData.tsx

@@ -4,12 +4,18 @@ import Highcharts from "highcharts/highstock";
 import HighchartsReact from "highcharts-react-official";
 import { createStockChartBaseConfig } from "@/lib/chartTemplate";
 
+/**
+ * This component renders a graph of historical solar cycle data, specifically sunspot numbers.
+ * It fetches data from a public API and displays it using Highcharts.
+ */
+
 export default function HistoricalSolarCycleData() {
     const [historicalSunSpot, setHistoricalSunSpot] = useState<any>(null);
     const [historicalTimestamps, setHistoricalTimestamps] = useState<number[]>(
         [],
     );
 
+    // Fetch historical sunspot data from NOAA SWPC
     useEffect(() => {
         fetch("https://services.swpc.noaa.gov/json/solar-cycle/sunspots.json")
             .then((response) => {
@@ -37,13 +43,15 @@ export default function HistoricalSolarCycleData() {
             });
     }, []);
 
+    // Prepare data for Highcharts
     const formattedHistoricalData = historicalTimestamps.map(
         (timestamp, index) => [
             new Date(timestamp).getTime(), // Convert to Unix timestamp (milliseconds)
             historicalSunSpot[index], // Corresponding sunspot value
         ],
     );
 
+    // function to calculate moving average
     const calculateMovingAverage = (
         data: number[][],
         windowSize: number,
@@ -67,6 +75,7 @@ export default function HistoricalSolarCycleData() {
         10,
     );
 
+    // Chart options
     const optionsHistoricalChart = createStockChartBaseConfig({
         title: "Historical Solar Cycle Data",
         yAxisTitle: "Sunspot Number (SSN)",

frontend/src/app/_homeComponents/HistorySolarData.tsx

@@ -2,6 +2,11 @@
 import HistoricalSolarCycleData from "./HistoricalSolarCycleData";
 import DailySolarActivity from "./DailySolarActivity";
 
+/**
+ * This component renders the historical solar data page, including daily and historical solar activity charts.
+ * It provides an overview of geomagnetic activity and sunspot numbers.
+ */
+
 export default function HistorySolarData() {
     return (
         <div className="mt-16 flex h-full flex-col items-center justify-center text-center">

frontend/src/app/satellites/[satelliteSlug]/_infoSat/satImage.tsx

@@ -21,6 +21,9 @@ export default function SatImage({
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
+    {
+        /**  Making a request to the backend to obtain the satellite image URL  */
+    }
     const getImageUrl = useCallback(
         async (satName: string) => {
             const requestDetails = {
@@ -79,8 +82,8 @@ export default function SatImage({
                 key={satImage}
                 src={satImage}
                 alt="Satellite Image"
-                width={1600} // Set according to the aspect ratio of the image
-                height={0}
+                width={600} // Set according to the aspect ratio of the image
+                height={600}
                 className="max-h-[600px] max-w-[600px] object-contain p-2"
             />
         </div>

frontend/src/app/satellites/[satelliteSlug]/_infoSat/satTelemetry.tsx

@@ -21,8 +21,10 @@ export default function SatTelemetry({
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
     const [data, setData] = useState<any>(null);
-    // Fetch telemetry data from the backend)
 
+    {
+        /** Fetching telemetry data from the backend */
+    }
     useEffect(() => {
         async function fetchTelemetryData() {
             try {
@@ -179,6 +181,9 @@ export default function SatTelemetry({
         ],
     );
 
+    {
+        /* Chart configurations */
+    }
     const chartConfigs = [
         {
             title: "EPS Battery Voltage",

frontend/src/app/satellites/[satelliteSlug]/orbitDataGraph.tsx

@@ -15,6 +15,10 @@ type ChartData = {
     eccentricity: string;
     semiMajorAxis: number;
 };
+/**
+ * This component renders a graph of orbital data, including inclination, eccentricity, and altitude.
+ * It uses Highcharts to create a stock chart with multiple Y-axes for different parameters.
+ */
 
 const OrbitDataGraph: React.FC<OrbitDataProps> = ({ orbitalData }) => {
     const filteredData = orbitalData.map((data: any) => {

frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOver.tsx

@@ -2,6 +2,11 @@
 import SatellitePassOverLocation from "./SatellitePassOverLocation";
 import SatellitePassOverTime from "./SatellitePassOverTime";
 
+/**
+ * This component renders the satellite pass over feature, including location and time components.
+ * It allows users to see when a satellite will pass over a selected location.
+ */
+
 export default function SatellitePassOver() {
     return (
         <div>

frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverLocation.tsx

@@ -5,6 +5,11 @@ import { cn } from "@/lib/utils";
 import { Location } from "@/lib/store";
 import { useLocationStore } from "@/lib/store";
 
+/**
+ * This component allows users to select a location for satellite pass over predictions.
+ * It includes a dropdown for selecting predefined locations or entering custom coordinates.
+ */
+
 export default function SatellitePassOverLocation() {
     // State to manage whether the dropdown is open or closed
     let isLargeScreen = useRef<boolean>(false);

frontend/src/components/satelliteData/_PassOverFeat/SatellitePassOverTime.tsx

@@ -4,9 +4,14 @@ import { useLocationStore } from "@/lib/store";
 import { useSatelliteStore } from "@/lib/store";
 import { predictFuturePositions } from "@/lib/convertSatrec";
 const updateInterval = 50; // in ms
-const deltaDegree = 1; // Delta degree to check if the satellite is over the location
+const deltaDegree = 1.5; // Delta degree to check if the satellite is over the location
 const predictedMinutes = 100000; // Number of minutes to predict future positions
 
+/**
+ * This component computes the time before the satellite passes over the selected location.
+ * It uses the satellite's predicted positions to determine when it will pass over the location.
+ */
+
 export default function SatellitePassOverTime() {
     //Computation of the time before the satellite pass over the selected location
     const selectedLocation = useLocationStore(

frontend/src/lib/chartTemplate.tsx

@@ -25,6 +25,11 @@ interface StockChartBaseConfigProps {
     customOptions?: Highcharts.Options;
 }
 
+/** Creates a base configuration for a Highcharts stock chart.
+ * @param {StockChartBaseConfigProps} config - Configuration options for the chart.
+ * @returns {Highcharts.Options} - The base configuration object for the chart.
+ */
+
 export function createStockChartBaseConfig({
     title,
     yAxisArray = [],
@@ -60,6 +65,7 @@ export function createStockChartBaseConfig({
         enabled: false, // Disable credits by default
     },
 }: StockChartBaseConfigProps) {
+    // Base yAxis configuration
     if (yAxisArray.length === 0) {
         yAxisArray.push({
             title: {
@@ -107,6 +113,7 @@ export function createStockChartBaseConfig({
                     color: theme.text,
                     fontSize: "14px",
                 },
+                // Handling date formatting based on zoom level
                 formatter: function (
                     //eslint-disable-next-line no-unused-vars
                     this: Highcharts.AxisLabelsFormatterContextObject,