Fix pre-release bugs found (#732)

* Fix pre-release bugs found

Fix com ports not saving to local storage
Add progress bar text to params page
Add button to fetch params if failed
Fixed radio calibration page hiding if no rc data
Fix dashboard mission loading notification not being hidden
Try forcing mavlink 2
Fix params controller thread not ending
Fix backend crashing if aircraft is using mavlink1
Fix get all params thread timing out too soon

* Address copilot review comments

* Try fix clock not updating

Author: 1Blademaster

gcs/package.json

@@ -6,7 +6,7 @@
     "name": "Avis-Drone-Labs"
   },
   "private": true,
-  "version": "0.1.10-alpha-dev2",
+  "version": "0.2.0-alpha",
   "license": "GPL-3.0-only",
   "homepage": "https://fgcs.projectfalcon.uk",
   "githubLink": "https://github.com/Avis-Drone-Labs/FGCS",

gcs/src/components/config/radioCalibration.jsx

@@ -18,16 +18,16 @@ import apmParamDefsPlane from "../../../data/gen_apm_params_def_plane.json"
 
 // Redux
 import { useDispatch, useSelector } from "react-redux"
-import {
-  emitSetState,
-  selectConnectedToDrone,
-} from "../../redux/slices/droneConnectionSlice"
-import { selectAircraftType } from "../../redux/slices/droneInfoSlice"
 import {
   emitGetRcConfig,
   selectRadioChannels,
   selectRadioChannelsConfig,
 } from "../../redux/slices/configSlice"
+import {
+  emitSetState,
+  selectConnectedToDrone,
+} from "../../redux/slices/droneConnectionSlice"
+import { selectAircraftType } from "../../redux/slices/droneInfoSlice"
 
 // Tailwind
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors

gcs/src/components/dashboard/preFlightChecklist/checkListArea.jsx

@@ -12,9 +12,9 @@ import { ActionIcon, Button, Checkbox, Modal, Tooltip } from "@mantine/core"
 import EditCheckList from "./checkListEdit.jsx"
 
 // Styling imports
+import { IconCheckbox, IconEdit, IconTrashX } from "@tabler/icons-react"
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../../tailwind.config.js"
-import { IconCheckbox, IconEdit, IconTrashX } from "@tabler/icons-react"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 export default function CheckListArea({
@@ -51,7 +51,6 @@ export default function CheckListArea({
 
   function generateCheckboxList(defaultCheck = false) {
     // Go from string to list, does not return
-    console.log(checkBoxListString)
     var final = []
     checkBoxListString
       .split("<li><p>")

gcs/src/components/dashboard/statusBar.jsx

@@ -48,7 +48,7 @@ export default function StatusBar(props) {
   // Start clock
   useEffect(() => {
     updateClock.start()
-    return updateClock.stop
+    return () => updateClock.stop()
   }, [])
 
   // Alerts

gcs/src/components/navbar.jsx

@@ -143,6 +143,12 @@ export default function Navbar() {
     AddCommand("disconnect_from_drone", disconnect)
   }, [])
 
+  useEffect(() => {
+    if (!comPorts.includes(selectedComPort)) {
+      dispatch(setSelectedComPorts(null))
+    }
+  }, [comPorts, selectedComPort])
+
   const linkClassName =
     "text-md px-2 rounded-sm outline-none focus:text-falconred-400 hover:text-falconred-400 transition-colors delay-50"
 

gcs/src/components/spotlight/commandHandler.js

@@ -4,10 +4,10 @@
 */
 
 // 3rd Party Imports
+import { useHotkeys } from "@mantine/hooks"
+import { useEffect, useState } from "react"
 import { useNavigate } from "react-router"
 import { useSettings } from "../../helpers/settings"
-import { useState, useEffect } from "react"
-import { useHotkeys } from "@mantine/hooks"
 
 let commands = []
 
@@ -73,7 +73,7 @@ export function AddCommand(id, command, shortcut = null, macShortcut = null) {
       macShortcut: macShortcut,
     })
   } else {
-    console.log(`Attempting to add command that already exists: ${id}`)
+    console.error(`Attempting to add command that already exists: ${id}`)
   }
 }
 
@@ -84,12 +84,6 @@ export function RunCommand(id) {
   if (cmd !== undefined) {
     cmd.command()
   } else {
-    console.log(`Couldn't find command ${id} to run`)
-  }
-
-  try {
-    commands.find((entry) => entry.id == id).command()
-  } catch {
-    console.log(`Couldn't find command, ${id}, to run`)
+    console.error(`Couldn't find command ${id} to run`)
   }
 }

gcs/src/params.jsx

@@ -8,7 +8,7 @@
 import { useEffect } from "react"
 
 // 3rd Party Imports
-import { Progress } from "@mantine/core"
+import { Button, Progress } from "@mantine/core"
 import { useDebouncedValue } from "@mantine/hooks"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList } from "react-window"
@@ -58,16 +58,20 @@ export default function Params() {
   const fetchingVars = useSelector(selectFetchingVars)
   const fetchingVarsProgress = useSelector(selectFetchingVarsProgress)
 
+  function fetchParams() {
+    dispatch(setFetchingVars(true))
+    dispatch(emitRefreshParams())
+    dispatch(setHasFetchedOnce(true))
+  }
+
   // Reset state if we loose connection
   useEffect(() => {
     if (!connected) {
       dispatch(resetParamState())
     }
 
     if (connected && !hasFetchedOnce && !fetchingVars) {
-      dispatch(setFetchingVars(true))
-      dispatch(emitRefreshParams())
-      dispatch(setHasFetchedOnce(true))
+      fetchParams()
     }
   }, [connected])
 
@@ -92,11 +96,18 @@ export default function Params() {
       {connected ? (
         <>
           {fetchingVars && (
-            <Progress
-              radius="xs"
-              value={fetchingVarsProgress}
-              className="w-1/3 mx-auto my-auto"
-            />
+            <div className="my-auto">
+              {fetchingVarsProgress.param_id && (
+                <p className="text-center my-4">
+                  Fetched {fetchingVarsProgress.param_id}
+                </p>
+              )}
+              <Progress
+                radius="xs"
+                value={fetchingVarsProgress.progress}
+                className="w-1/3 mx-auto my-auto"
+              />
+            </div>
           )}
 
           {Object.keys(params).length > 0 && !fetchingVars && (
@@ -119,6 +130,14 @@ export default function Params() {
               </div>
             </div>
           )}
+          {Object.keys(params).length === 0 && !fetchingVars && (
+            <div className="flex flex-col my-auto mx-auto">
+              <p className="text-center my-4">
+                No parameters found, try fetching them again.
+              </p>
+              <Button onClick={() => fetchParams()}>Fetch Params</Button>
+            </div>
+          )}
         </>
       ) : (
         <NoDroneConnected tab="params" />

gcs/src/redux/middleware/socketMiddleware.js

@@ -64,6 +64,7 @@ import {
 } from "../slices/droneInfoSlice"
 import {
   addIdToItem,
+  closeDashboardMissionFetchingNotificationNoSuccessThunk,
   closeDashboardMissionFetchingNotificationThunk,
   setCurrentMission,
   setCurrentMissionItems,
@@ -151,7 +152,8 @@ const socketMiddleware = (store) => {
 
   function handleRcChannels(msg) {
     let chans = {}
-    for (let i = 1; i < msg.chancount + 1; i++) {
+    const chanCount = msg.chancount || 16 // default to 16 channels if chancount is 0
+    for (let i = 1; i < chanCount + 1; i++) {
       chans[i] = msg[`chan${i}_raw`]
     }
 
@@ -249,6 +251,9 @@ const socketMiddleware = (store) => {
             store.dispatch(setConnected(false))
             store.dispatch(setConnecting(false))
             store.dispatch(emitGetComPorts())
+            store.dispatch(
+              closeDashboardMissionFetchingNotificationNoSuccessThunk(),
+            )
           }
         })
 
@@ -261,10 +266,13 @@ const socketMiddleware = (store) => {
               port.toLowerCase().includes("mavlink") ||
               port.toLowerCase().includes("ardupilot"),
           )
-          if (possibleComPort !== undefined) {
-            store.dispatch(setSelectedComPorts(possibleComPort))
-          } else if (msg.length > 0) {
-            store.dispatch(setSelectedComPorts(msg[0]))
+          if (!store.getState().droneConnection.selected_com_ports) {
+            // If no com port is selected, select a possible mavlink/ardupilot port if it exists, otherwise select the first port
+            if (possibleComPort !== undefined) {
+              store.dispatch(setSelectedComPorts(possibleComPort))
+            } else if (msg.length > 0) {
+              store.dispatch(setSelectedComPorts(msg[0]))
+            }
           }
         })
 
@@ -275,7 +283,7 @@ const socketMiddleware = (store) => {
 
         // Flags an error with the com port
         socket.socket.on("connection_error", (msg) => {
-          console.log("Connection error: " + msg.message)
+          console.error("Connection error: " + msg.message)
           showErrorNotification(msg.message)
           store.dispatch(setConnecting(false))
           store.dispatch(setConnected(false))
@@ -366,17 +374,19 @@ const socketMiddleware = (store) => {
           store.dispatch(setParams(msg))
           store.dispatch(setShownParams(msg))
           store.dispatch(setFetchingVars(false))
-          store.dispatch(setFetchingVarsProgress(0))
+          store.dispatch(setFetchingVarsProgress({ progress: 0, param_id: "" }))
           store.dispatch(setParamSearchValue(""))
         })
 
         socket.socket.on(
           ParamSpecificSocketEvents.onParamRequestUpdate,
           (msg) => {
             store.dispatch(
-              setFetchingVarsProgress(
-                (msg.current_param_index / msg.total_number_of_params) * 100,
-              ),
+              setFetchingVarsProgress({
+                progress:
+                  (msg.current_param_index / msg.total_number_of_params) * 100,
+                param_id: msg.current_param_id,
+              }),
             )
           },
         )

gcs/src/redux/slices/missionSlice.js

@@ -530,6 +530,18 @@ export const closeDashboardMissionFetchingNotificationThunk =
     }
     dispatch(setDashboardMissionFetchingNotificationId(null))
   }
+export const closeDashboardMissionFetchingNotificationNoSuccessThunk =
+  () => (dispatch, getState) => {
+    const { dashboardMissionFetchingNotificationId } = getState().missionInfo
+    if (dashboardMissionFetchingNotificationId) {
+      closeLoadingNotification(
+        dashboardMissionFetchingNotificationId,
+        "",
+        "",
+      )
+    }
+    dispatch(setDashboardMissionFetchingNotificationId(null))
+  }
 
 export const getFrameKey = (frame) =>
   parseInt(

gcs/src/redux/slices/paramsSlice.js

@@ -10,7 +10,7 @@ const paramsSlice = createSlice({
     modifiedParams: [],
     showModifiedParams: false,
     fetchingVars: false,
-    fetchingVarsProgress: 0,
+    fetchingVarsProgress: { progress: 0, param_id: "" },
     searchValue: "",
     hasFetchedOnce: false,
   },
@@ -86,7 +86,7 @@ const paramsSlice = createSlice({
     },
     resetParamState: (state) => {
       state.fetchingVars = false
-      state.fetchingVarsProgress = 0
+      state.fetchingVarsProgress = { progress: 0, param_id: "" }
       state.params = []
       state.shownParams = []
       state.modifiedParams = []