From c2ce006e6ec3c1d70e0cec0922d3450064b9a641 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Thu, 16 Apr 2026 20:41:04 +0100
Subject: [PATCH 1/4] Add distance and gradient between waypoint metrics on
 missions page

---
 .../components/missions/missionItemsTable.jsx |  20 ++-
 .../missions/missionItemsTableRow.jsx         |  12 +-
 .../components/missions/missionStatistics.jsx | 103 ++++--------
 gcs/src/helpers/missionWaypointMetrics.js     | 157 ++++++++++++++++++
 4 files changed, 213 insertions(+), 79 deletions(-)
 create mode 100644 gcs/src/helpers/missionWaypointMetrics.js

diff --git a/gcs/src/components/missions/missionItemsTable.jsx b/gcs/src/components/missions/missionItemsTable.jsx
index ee0412648..a8719d5ab 100644
--- a/gcs/src/components/missions/missionItemsTable.jsx
+++ b/gcs/src/components/missions/missionItemsTable.jsx
@@ -3,16 +3,26 @@
 */
 
 import { Table } from "@mantine/core"
-import React from "react"
+import React, { useMemo } from "react"
 import { isGlobalFrameHomeCommand } from "../../helpers/filterMissions"
+import { buildMissionWaypointLegMetrics } from "../../helpers/missionWaypointMetrics"
 import MissionItemsTableRow from "./missionItemsTableRow"
 
 // Redux
 import { useSelector } from "react-redux"
-import { selectDrawingMissionItems } from "../../redux/slices/missionSlice"
+import {
+  selectDrawingMissionItems,
+  selectPlannedHomePosition,
+} from "../../redux/slices/missionSlice"
 
 function MissionItemsTableNonMemo({ tableSectionHeight }) {
   const missionItems = useSelector(selectDrawingMissionItems)
+  const plannedHomePosition = useSelector(selectPlannedHomePosition)
+
+  const rowMetricsByIdx = useMemo(
+    () => buildMissionWaypointLegMetrics(missionItems, plannedHomePosition),
+    [missionItems, plannedHomePosition],
+  )
 
   return (
     <Table.ScrollContainer maxHeight={tableSectionHeight}>
@@ -28,20 +38,23 @@ function MissionItemsTableNonMemo({ tableSectionHeight }) {
             <Table.Th>Lat</Table.Th>
             <Table.Th>Lng</Table.Th>
             <Table.Th>Alt</Table.Th>
+            <Table.Th>Distance</Table.Th>
+            <Table.Th>Gradient</Table.Th>
             <Table.Th>Frame</Table.Th>
             <Table.Th></Table.Th>
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
           {missionItems.map((missionItem, idx) => {
-            // Skip home location
             if (idx === 0 && isGlobalFrameHomeCommand(missionItem)) {
               return null
             }
+
             return (
               <MissionItemsTableRow
                 key={missionItem.id}
                 missionItemIndex={idx}
+                rowMetrics={rowMetricsByIdx[idx]}
               />
             )
           })}
@@ -54,6 +67,7 @@ function MissionItemsTableNonMemo({ tableSectionHeight }) {
 function propsAreEqual(prev, next) {
   return JSON.stringify(prev) === JSON.stringify(next)
 }
+
 const MissionItemsTable = React.memo(MissionItemsTableNonMemo, propsAreEqual)
 
 export default MissionItemsTable
diff --git a/gcs/src/components/missions/missionItemsTableRow.jsx b/gcs/src/components/missions/missionItemsTableRow.jsx
index 726ce89c9..505857ce6 100644
--- a/gcs/src/components/missions/missionItemsTableRow.jsx
+++ b/gcs/src/components/missions/missionItemsTableRow.jsx
@@ -30,7 +30,15 @@ import {
 
 const coordsFractionDigits = 9
 
-export default function MissionItemsTableRow({ missionItemIndex }) {
+function formatMetric(value, suffix) {
+  if (!Number.isFinite(value)) {
+    return "-"
+  }
+
+  return `${value.toFixed(2)}${suffix}`
+}
+
+export default function MissionItemsTableRow({ missionItemIndex, rowMetrics }) {
   const dispatch = useDispatch()
   const aircraftType = useSelector(selectAircraftType)
   const missionItem = useSelector(
@@ -166,6 +174,8 @@ export default function MissionItemsTableRow({ missionItemIndex }) {
           hideControls
         />
       </TableTd>
+      <TableTd>{formatMetric(rowMetrics?.distanceMeters, "m")}</TableTd>
+      <TableTd>{formatMetric(rowMetrics?.gradientPercent, "%")}</TableTd>
       <TableTd>
         <Select
           data={MAV_FRAME_DROPDOWN_DATA}
diff --git a/gcs/src/components/missions/missionStatistics.jsx b/gcs/src/components/missions/missionStatistics.jsx
index a04b48b25..109aef59b 100644
--- a/gcs/src/components/missions/missionStatistics.jsx
+++ b/gcs/src/components/missions/missionStatistics.jsx
@@ -11,6 +11,7 @@ import {
   filterMissionItems,
   isGlobalFrameHomeCommand,
 } from "../../helpers/filterMissions"
+import { buildMissionWaypointLegMetrics } from "../../helpers/missionWaypointMetrics"
 
 // Redux
 import { useSelector } from "react-redux"
@@ -28,96 +29,48 @@ function calculateMaxAltitude(missionItems) {
 }
 
 function calculateMaxDistanceBetweenWaypoints(missionItems, homePosition) {
-  if (missionItems.length < 2) return 0
-  let maxDistance = 0
-  let maxDistancePoints = []
+  const legMetrics = buildMissionWaypointLegMetrics(missionItems, homePosition)
+  let maxLeg = null
 
-  // Swap the coords of the first position with the home position if it exists
-  if (
-    isGlobalFrameHomeCommand(missionItems[0]) &&
-    homePosition &&
-    missionItems[1].command === 22
-  ) {
-    const newFirstPoint = {
-      ...missionItems[1],
-      x: homePosition.lat,
-      y: homePosition.lon,
-      z: homePosition.alt,
+  for (const leg of legMetrics) {
+    if (!leg || leg.distanceMeters === null) {
+      continue
     }
-    missionItems = [newFirstPoint, ...missionItems.slice(1)]
-  }
 
-  // Remove any waypoints without coordinates
-  missionItems = missionItems.filter((item) => item.x !== 0 && item.y !== 0)
-
-  for (let i = 0; i < missionItems.length - 1; i++) {
-    const item1 = missionItems[i]
-    const item2 = missionItems[i + 1]
-    const distanceBetweenPoints = distance(
-      [intToCoord(item1.y), intToCoord(item1.x)],
-      [intToCoord(item2.y), intToCoord(item2.x)],
-      {
-        units: "meters",
-      },
-    )
-    if (distanceBetweenPoints > maxDistance) {
-      maxDistance = distanceBetweenPoints
-      maxDistancePoints = [item1, item2]
+    if (maxLeg === null || leg.distanceMeters > maxLeg.distanceMeters) {
+      maxLeg = leg
     }
   }
 
-  // distance to 2dp
-  maxDistance = Math.round(maxDistance * 100) / 100
-
-  return { maxDistance: maxDistance, points: maxDistancePoints }
+  return {
+    maxDistance: maxLeg ? Math.round(maxLeg.distanceMeters * 100) / 100 : 0,
+    points: maxLeg ? [maxLeg.previousWaypoint, maxLeg.currentWaypoint] : [],
+  }
 }
 
 function calculateMaxSlopeGradient(missionItems, homePosition) {
-  if (missionItems.length < 2) return 0
-  let maxGradient = 0
-  let maxDistancePoints = []
+  const legMetrics = buildMissionWaypointLegMetrics(missionItems, homePosition)
+  let maxLeg = null
 
-  // Swap the coords of the first position with the home position if it exists
-  if (
-    isGlobalFrameHomeCommand(missionItems[0]) &&
-    homePosition &&
-    missionItems[1].command === 22
-  ) {
-    const newFirstPoint = {
-      ...missionItems[1],
-      x: homePosition.lat,
-      y: homePosition.lon,
-      z: homePosition.alt,
+  for (const leg of legMetrics) {
+    if (!leg || leg.gradientPercent === null) {
+      continue
     }
-    missionItems = [newFirstPoint, ...missionItems.slice(1)]
-  }
 
-  for (let i = 0; i < missionItems.length - 1; i++) {
-    const item1 = missionItems[i]
-    const item2 = missionItems[i + 1]
-
-    if (item1.z === undefined || item2.z === undefined) continue
-
-    const verticalDistance = Math.abs(item2.z - item1.z)
-    const horizontalDistance = distance(
-      [intToCoord(item1.y), intToCoord(item1.x)],
-      [intToCoord(item2.y), intToCoord(item2.x)],
-      { units: "meters" },
-    )
-
-    if (horizontalDistance === 0) continue // Avoid division by zero
-
-    const gradient = (verticalDistance / horizontalDistance) * 100 // Convert to percentage
-
-    if (gradient > maxGradient) {
-      maxGradient = gradient
-      maxDistancePoints = [item1, item2]
+    if (
+      maxLeg === null ||
+      Math.abs(leg.gradientPercent) > Math.abs(maxLeg.gradientPercent)
+    ) {
+      maxLeg = leg
     }
   }
 
-  maxGradient = Math.round(maxGradient * 100) / 100 // Round to two decimal places
-
-  return { maxGradient: maxGradient, points: maxDistancePoints }
+  return {
+    maxGradient: maxLeg
+      ? Math.round(Math.abs(maxLeg.gradientPercent) * 100) / 100
+      : 0,
+    points: maxLeg ? [maxLeg.previousWaypoint, maxLeg.currentWaypoint] : [],
+  }
 }
 
 function calculateTotalDistance(missionItems, homePosition) {
diff --git a/gcs/src/helpers/missionWaypointMetrics.js b/gcs/src/helpers/missionWaypointMetrics.js
new file mode 100644
index 000000000..9689782bf
--- /dev/null
+++ b/gcs/src/helpers/missionWaypointMetrics.js
@@ -0,0 +1,157 @@
+import { distance } from "@turf/turf"
+import { intToCoord } from "./dataFormatters"
+import { isGlobalFrameHomeCommand } from "./filterMissions"
+
+const STOP_COMMANDS = [20, 21, 189]
+const RTL_COMMAND = 20
+
+function toFiniteNumber(value) {
+  const parsedValue = Number(value)
+  return Number.isFinite(parsedValue) ? parsedValue : null
+}
+
+function buildHomeWaypoint(homePosition) {
+  const homeLat = toFiniteNumber(homePosition?.lat)
+  const homeLon = toFiniteNumber(homePosition?.lon)
+
+  if (homeLat === null || homeLon === null) {
+    return null
+  }
+
+  return {
+    isHome: true,
+    seq: "Home",
+    x: homeLat,
+    y: homeLon,
+    z: 0,
+    lat: intToCoord(homeLat),
+    lon: intToCoord(homeLon),
+    altitude: 0,
+  }
+}
+
+function buildResolvedWaypoint(missionItem) {
+  const x = toFiniteNumber(missionItem?.x)
+  const y = toFiniteNumber(missionItem?.y)
+  const z = toFiniteNumber(missionItem?.z)
+
+  const hasPosition = x !== null && y !== null && x !== 0 && y !== 0
+
+  return {
+    seq: missionItem?.seq,
+    isHome: false,
+    x,
+    y,
+    z,
+    lat: hasPosition ? intToCoord(x) : null,
+    lon: hasPosition ? intToCoord(y) : null,
+    altitude: hasPosition ? z : null,
+  }
+}
+
+function getDisplayPointLabel(point) {
+  if (!point) {
+    return null
+  }
+
+  return point.isHome ? "Home" : point.seq
+}
+
+export function buildMissionWaypointLegMetrics(missionItems, homePosition) {
+  if (!Array.isArray(missionItems) || missionItems.length === 0) {
+    return []
+  }
+
+  const metricsByIndex = []
+  const homeWaypoint = buildHomeWaypoint(homePosition)
+  const stopCommandItem = [...missionItems]
+    .filter((item) => STOP_COMMANDS.includes(item.command))
+    .sort((a, b) => a.seq - b.seq)
+    .at(0)
+
+  let previousWaypoint = homeWaypoint
+  let previousAltitude = homeWaypoint ? 0 : null
+
+  for (let idx = 0; idx < missionItems.length; idx++) {
+    const missionItem = missionItems[idx]
+
+    if (stopCommandItem && missionItem.seq > stopCommandItem.seq) {
+      continue
+    }
+
+    if (idx === 0 && isGlobalFrameHomeCommand(missionItem)) {
+      continue
+    }
+
+    const resolvedWaypoint = buildResolvedWaypoint(missionItem)
+    const isRtlCommand = missionItem.command === RTL_COMMAND
+    const currentWaypoint =
+      isRtlCommand && homeWaypoint
+        ? homeWaypoint
+        : resolvedWaypoint.lat !== null && resolvedWaypoint.lon !== null
+          ? resolvedWaypoint
+          : previousWaypoint
+    const currentAltitude =
+      isRtlCommand && homeWaypoint
+        ? 0
+        : resolvedWaypoint.altitude !== null
+          ? resolvedWaypoint.altitude
+          : previousAltitude
+
+    let distanceMeters = null
+    let gradientPercent = null
+
+    if (
+      previousWaypoint?.lat !== null &&
+      previousWaypoint?.lon !== null &&
+      currentWaypoint?.lat !== null &&
+      currentWaypoint?.lon !== null
+    ) {
+      distanceMeters = distance(
+        [previousWaypoint.lon, previousWaypoint.lat],
+        [currentWaypoint.lon, currentWaypoint.lat],
+        { units: "meters" },
+      )
+    }
+
+    if (
+      previousWaypoint?.lat !== null &&
+      previousWaypoint?.lon !== null &&
+      previousAltitude !== null &&
+      currentAltitude !== null
+    ) {
+      const horizontalDistanceMeters =
+        distanceMeters ??
+        distance(
+          [previousWaypoint.lon, previousWaypoint.lat],
+          [currentWaypoint.lon, currentWaypoint.lat],
+          { units: "meters" },
+        )
+
+      if (horizontalDistanceMeters > 0) {
+        gradientPercent =
+          ((currentAltitude - previousAltitude) / horizontalDistanceMeters) *
+          100
+      }
+    }
+
+    metricsByIndex[idx] = {
+      currentWaypoint,
+      previousWaypoint,
+      distanceMeters,
+      gradientPercent,
+      previousWaypointLabel: getDisplayPointLabel(previousWaypoint),
+      currentWaypointLabel: getDisplayPointLabel(currentWaypoint),
+    }
+
+    if (resolvedWaypoint.lat !== null && resolvedWaypoint.lon !== null) {
+      previousWaypoint = resolvedWaypoint
+    }
+
+    if (resolvedWaypoint.altitude !== null) {
+      previousAltitude = resolvedWaypoint.altitude
+    }
+  }
+
+  return metricsByIndex
+}

From 46486ebd93fe083fc7412027f4fe0d76808be6b1 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Thu, 16 Apr 2026 20:43:18 +0100
Subject: [PATCH 2/4] Fix missions context menu not appearing on screen

---
 gcs/src/redux/slices/missionSlice.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/gcs/src/redux/slices/missionSlice.js b/gcs/src/redux/slices/missionSlice.js
index e9d004aab..4421976e3 100644
--- a/gcs/src/redux/slices/missionSlice.js
+++ b/gcs/src/redux/slices/missionSlice.js
@@ -395,6 +395,15 @@ const missionInfoSlice = createSlice({
         y = updatedState.position.y - contextMenuHeight
       }
 
+      // Clamp position so the menu never renders outside the map canvas.
+      const maxX = Math.max(0, updatedState.canvasSize.width - contextMenuWidth)
+      const maxY = Math.max(
+        0,
+        updatedState.canvasSize.height - contextMenuHeight,
+      )
+      x = Math.max(0, Math.min(x, maxX))
+      y = Math.max(0, Math.min(y, maxY))
+
       state.contextMenu = {
         ...updatedState,
         position: { x: x, y: y },

From 16252b363360e62a82e6796e45feb1f578b8d244 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Thu, 16 Apr 2026 20:43:34 +0100
Subject: [PATCH 3/4] Bump ver

---
 gcs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gcs/package.json b/gcs/package.json
index 1f0ca8eee..d854bd938 100644
--- a/gcs/package.json
+++ b/gcs/package.json
@@ -6,7 +6,7 @@
     "name": "Avis-Drone-Labs"
   },
   "private": true,
-  "version": "0.2.6-alpha",
+  "version": "0.2.7-alpha",
   "license": "GPL-3.0-only",
   "homepage": "https://fgcs.projectfalcon.uk",
   "githubLink": "https://github.com/Avis-Drone-Labs/FGCS",

From 6f8e52ac974ef8f948f548da95961bf36ea0a8e2 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Thu, 16 Apr 2026 20:52:44 +0100
Subject: [PATCH 4/4] Address copilot review comments

---
 gcs/src/helpers/missionWaypointMetrics.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/gcs/src/helpers/missionWaypointMetrics.js b/gcs/src/helpers/missionWaypointMetrics.js
index 9689782bf..152c21901 100644
--- a/gcs/src/helpers/missionWaypointMetrics.js
+++ b/gcs/src/helpers/missionWaypointMetrics.js
@@ -18,6 +18,8 @@ function buildHomeWaypoint(homePosition) {
     return null
   }
 
+  // TODO: Allow home waypoint altitude to be used for absolute altitude
+  // calculations in the future.
   return {
     isHome: true,
     seq: "Home",
@@ -70,7 +72,7 @@ export function buildMissionWaypointLegMetrics(missionItems, homePosition) {
     .at(0)
 
   let previousWaypoint = homeWaypoint
-  let previousAltitude = homeWaypoint ? 0 : null
+  let previousAltitude = homeWaypoint ? homeWaypoint.altitude : null
 
   for (let idx = 0; idx < missionItems.length; idx++) {
     const missionItem = missionItems[idx]
@@ -93,7 +95,7 @@ export function buildMissionWaypointLegMetrics(missionItems, homePosition) {
           : previousWaypoint
     const currentAltitude =
       isRtlCommand && homeWaypoint
-        ? 0
+        ? homeWaypoint.altitude
         : resolvedWaypoint.altitude !== null
           ? resolvedWaypoint.altitude
           : previousAltitude