From 131e4c957b4b00f0c62d42bc0d66168940c1fbce Mon Sep 17 00:00:00 2001 From: Kush Makkapati Date: Sun, 21 Sep 2025 12:31:47 +0100 Subject: [PATCH 1/2] Fix line display from home to first waypoint if no takeoff point --- gcs/src/components/dashboard/map.jsx | 6 -- .../components/mapComponents/homeMarker.jsx | 8 -- .../components/mapComponents/missionItems.jsx | 73 +++++++++++++------ gcs/src/components/missions/missionsMap.jsx | 6 -- 4 files changed, 49 insertions(+), 44 deletions(-) diff --git a/gcs/src/components/dashboard/map.jsx b/gcs/src/components/dashboard/map.jsx index db71919d6..e911dde7a 100644 --- a/gcs/src/components/dashboard/map.jsx +++ b/gcs/src/components/dashboard/map.jsx @@ -280,12 +280,6 @@ function MapSectionNonMemo({ passedRef, onDragstart, mapId = "dashboard" }) { 0 && [ - intToCoord(filteredMissionItems[0].y), - intToCoord(filteredMissionItems[0].x), - ] - } /> )} diff --git a/gcs/src/components/mapComponents/homeMarker.jsx b/gcs/src/components/mapComponents/homeMarker.jsx index 71b9b4725..036ed1b17 100644 --- a/gcs/src/components/mapComponents/homeMarker.jsx +++ b/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 && ( - - )} ) } diff --git a/gcs/src/components/mapComponents/missionItems.jsx b/gcs/src/components/mapComponents/missionItems.jsx index ef6f7b030..a281536ee 100644 --- a/gcs/src/components/mapComponents/missionItems.jsx +++ b/gcs/src/components/mapComponents/missionItems.jsx @@ -18,38 +18,43 @@ 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, homePosition), + [filteredMissionItems, homePosition], + ) - function getListOfLineCoordinates(filteredMissionItems) { - if (filteredMissionItems.length === 0) return { solid: [], dotted: [] } + function getListOfLineCoordinates(filteredMissionItems, homePosition) { + if (filteredMissionItems.length === 0 || !homePosition) + return { solid: [], dotted: [] } const lineCoordsList = [] const dottedLineCoordsList = [] @@ -63,16 +68,33 @@ export default function MissionItems({ missionItems }) { ? filteredMissionItems : filteredMissionItems.slice(0, landCommandIndex + 1) + // Use home as the starting point + const homeCoord = [ + intToCoord(homePosition.lon), + intToCoord(homePosition.lat), + ] + if ( + takeoffWaypoint !== undefined && + takeoffWaypoint.seq < itemsToProcess[0].seq + ) { + // 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 @@ -103,6 +125,8 @@ export default function MissionItems({ missionItems }) { lineCoordsList.push([intToCoord(nextItem.y), intToCoord(nextItem.x)]) }) + console.log({ lineCoordsList, dottedLineCoordsList }) + return { solid: lineCoordsList, dotted: dottedLineCoordsList } } @@ -128,12 +152,13 @@ export default function MissionItems({ missionItems }) { ) diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx index 9b43fb1c0..46bf55d64 100644 --- a/gcs/src/components/missions/missionsMap.jsx +++ b/gcs/src/components/missions/missionsMap.jsx @@ -385,12 +385,6 @@ function MapSectionNonMemo({ }), ) }} - lineTo={ - filteredMissionItems.length > 0 && [ - intToCoord(filteredMissionItems[0].y), - intToCoord(filteredMissionItems[0].x), - ] - } /> )} From b3853e11de67eb979cf5eb8cae83cbff3593de0f Mon Sep 17 00:00:00 2001 From: Kush Makkapati Date: Sun, 21 Sep 2025 12:42:23 +0100 Subject: [PATCH 2/2] Address copilot review comments --- .../components/mapComponents/missionItems.jsx | 47 +++++++++---------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/gcs/src/components/mapComponents/missionItems.jsx b/gcs/src/components/mapComponents/missionItems.jsx index a281536ee..42c1be7b1 100644 --- a/gcs/src/components/mapComponents/missionItems.jsx +++ b/gcs/src/components/mapComponents/missionItems.jsx @@ -48,13 +48,12 @@ export default function MissionItems({ missionItems }) { }, [missionItems]) const { solid: listOfLineCoords, dotted: listOfDottedLineCoords } = useMemo( - () => getListOfLineCoordinates(filteredMissionItems, homePosition), - [filteredMissionItems, homePosition], + () => getListOfLineCoordinates(filteredMissionItems), + [filteredMissionItems, homePosition, takeoffWaypoint], ) - function getListOfLineCoordinates(filteredMissionItems, homePosition) { - if (filteredMissionItems.length === 0 || !homePosition) - return { solid: [], dotted: [] } + function getListOfLineCoordinates(filteredMissionItems) { + if (filteredMissionItems.length === 0) return { solid: [], dotted: [] } const lineCoordsList = [] const dottedLineCoordsList = [] @@ -69,23 +68,25 @@ export default function MissionItems({ missionItems }) { : filteredMissionItems.slice(0, landCommandIndex + 1) // Use home as the starting point - const homeCoord = [ - intToCoord(homePosition.lon), - intToCoord(homePosition.lat), - ] - if ( - takeoffWaypoint !== undefined && - takeoffWaypoint.seq < itemsToProcess[0].seq - ) { - // 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), - ]) + 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) => { @@ -125,8 +126,6 @@ export default function MissionItems({ missionItems }) { lineCoordsList.push([intToCoord(nextItem.y), intToCoord(nextItem.x)]) }) - console.log({ lineCoordsList, dottedLineCoordsList }) - return { solid: lineCoordsList, dotted: dottedLineCoordsList } }