Fix line display from home to first waypoint if no takeoff point

gcs/src/components/dashboard/map.jsx

@@ -280,12 +280,6 @@ function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) {
             <HomeMarker
               lat={intToCoord(homePosition.lat)}
               lon={intToCoord(homePosition.lon)}
-              lineTo={
-                filteredMissionItems.length > 0 && [
-                  intToCoord(filteredMissionItems[0].y),
-                  intToCoord(filteredMissionItems[0].x),
-                ]
-              }
             />
           )}
 

gcs/src/components/mapComponents/homeMarker.jsx

@@ -3,7 +3,6 @@
 */
 
 // Component imports
-import DrawLineCoordinates from "./drawLineCoordinates"
 import MarkerPin from "./markerPin"
 
 import { useSessionStorage } from "@mantine/hooks"
@@ -20,7 +19,6 @@ export default function HomeMarker({
   lat,
   lon,
   updateMissionHomePositionDragCb,
-  lineTo = null,
 }) {
   const [currentPage] = useSessionStorage({ key: "currentPage" })
   const activeTab = useSelector(selectActiveTab)
@@ -42,12 +40,6 @@ export default function HomeMarker({
             : null
         }
       />
-      {lineTo !== null && (
-        <DrawLineCoordinates
-          coordinates={[[lon, lat], lineTo]}
-          colour={tailwindColors.yellow[400]}
-        />
-      )}
     </>
   )
 }

gcs/src/components/mapComponents/missionItems.jsx

@@ -18,35 +18,39 @@ import MarkerPin from "./markerPin"
 
 // Tailwind styling
 import { useSessionStorage } from "@mantine/hooks"
-import { useEffect, useState } from "react"
+import { useMemo } from "react"
 import { useSelector } from "react-redux"
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../tailwind.config"
-import { selectActiveTab } from "../../redux/slices/missionSlice"
+import { selectHomePosition } from "../../redux/slices/droneInfoSlice"
+import {
+  selectActiveTab,
+  selectPlannedHomePosition,
+} from "../../redux/slices/missionSlice"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function MissionItems({ missionItems }) {
   const [currentPage] = useSessionStorage({ key: "currentPage" })
   const editable =
     useSelector(selectActiveTab) === "mission" && currentPage === "missions"
-
-  const [filteredMissionItems, setFilteredMissionItems] = useState(
-    filterMissionItems(missionItems),
+  const plannedHomePosition = useSelector(selectPlannedHomePosition)
+  const currentHomePosition = useSelector(selectHomePosition)
+  const homePosition =
+    currentPage === "missions" ? plannedHomePosition : currentHomePosition
+
+  const filteredMissionItems = useMemo(
+    () => filterMissionItems(missionItems),
+    [missionItems],
   )
-  const [listOfLineCoords, setListOfLineCoords] = useState([])
-  const [listOfDottedLineCoords, setListOfDottedLineCoords] = useState([])
 
-  useEffect(() => {
-    setFilteredMissionItems(filterMissionItems(missionItems))
+  const takeoffWaypoint = useMemo(() => {
+    return missionItems.find((item) => item.command === 22)
   }, [missionItems])
 
-  useEffect(() => {
-    const { solid: solidLineCoords, dotted: dottedLineCoords } =
-      getListOfLineCoordinates(filteredMissionItems)
-
-    setListOfLineCoords(solidLineCoords)
-    setListOfDottedLineCoords(dottedLineCoords)
-  }, [filteredMissionItems])
+  const { solid: listOfLineCoords, dotted: listOfDottedLineCoords } = useMemo(
+    () => getListOfLineCoordinates(filteredMissionItems),
+    [filteredMissionItems, homePosition, takeoffWaypoint],
+  )
 
   function getListOfLineCoordinates(filteredMissionItems) {
     if (filteredMissionItems.length === 0) return { solid: [], dotted: [] }
@@ -63,16 +67,35 @@ export default function MissionItems({ missionItems }) {
         ? filteredMissionItems
         : filteredMissionItems.slice(0, landCommandIndex + 1)
 
+    // Use home as the starting point
+    if (homePosition) {
+      const homeCoord = [
+        intToCoord(homePosition.lon),
+        intToCoord(homePosition.lat),
+      ]
+      if (
+        takeoffWaypoint !== undefined &&
+        takeoffWaypoint.seq < itemsToProcess[0].seq // If the takeoff waypoint is before the first displayed waypoint
+      ) {
+        // If there is a takeoff waypoint before the first displayed waypoint, draw a solid line from the home position (takeoff point)
+        lineCoordsList.push(homeCoord)
+      } else {
+        // Draw a dotted line from the home position to the first displayed waypoint
+        dottedLineCoordsList.push(homeCoord)
+        dottedLineCoordsList.push([
+          intToCoord(itemsToProcess[0].y),
+          intToCoord(itemsToProcess[0].x),
+        ])
+      }
+    }
+
     itemsToProcess.forEach((item) => {
       lineCoordsList.push([intToCoord(item.y), intToCoord(item.x)])
     })
 
-    // Join the last item to first item if aircraft does not land, with a
-    // dotted line
+    // Join the last item to first item if aircraft does not land, with a dotted line
     if (
-      ![21, 189].includes(
-        itemsToProcess[itemsToProcess.length - 1].command, // Use itemsToProcess here
-      )
+      ![21, 189].includes(itemsToProcess[itemsToProcess.length - 1].command)
     ) {
       dottedLineCoordsList.push([
         intToCoord(itemsToProcess[0].y), // Use itemsToProcess here
@@ -128,12 +151,13 @@ export default function MissionItems({ missionItems }) {
       <DrawLineCoordinates
         coordinates={listOfLineCoords}
         colour={tailwindColors.yellow[400]}
+        lineProps={{ "line-width": 2 }}
       />
 
       <DrawLineCoordinates
         coordinates={listOfDottedLineCoords}
         colour={tailwindColors.yellow[400]}
-        lineProps={{ "line-dasharray": [2, 2] }}
+        lineProps={{ "line-width": 2, "line-dasharray": [4, 6] }}
       />
     </>
   )

gcs/src/components/missions/missionsMap.jsx

@@ -385,12 +385,6 @@ function MapSectionNonMemo({
                 }),
               )
             }}
-            lineTo={
-              filteredMissionItems.length > 0 && [
-                intToCoord(filteredMissionItems[0].y),
-                intToCoord(filteredMissionItems[0].x),
-              ]
-            }
           />
         )}