847 show feedback when writing multiple params (#848)

* Start adding parameter saving progress modal and fix some bugs with paramsController

* Fix bug with writing params failing

* Show which params failed to be set

* Fix mypy typing error

* Address copilot review comments

* Add variable plural to failed to write modal title

* Fix broken pytests

* Fix flight modes test

Author: 1Blademaster

gcs/src/components/params/paramsFailedToWriteModal.jsx

@@ -0,0 +1,49 @@
+import { Modal, Table } from "@mantine/core"
+import { useDispatch, useSelector } from "react-redux"
+import {
+  selectParamsFailedToWrite,
+  selectParamsFailedToWriteModalOpen,
+  setParamsFailedToWriteModalOpen,
+} from "../../redux/slices/paramsSlice"
+
+export default function ParamsFailedToWriteModal() {
+  const dispatch = useDispatch()
+  const opened = useSelector(selectParamsFailedToWriteModalOpen)
+  const paramsFailedToWriteList = useSelector(selectParamsFailedToWrite)
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => dispatch(setParamsFailedToWriteModalOpen(false))}
+      title={`Failed to write ${paramsFailedToWriteList.length} parameter${paramsFailedToWriteList.length > 1 ? "s" : ""}`}
+      centered
+      overlayProps={{
+        backgroundOpacity: 0.55,
+        blur: 3,
+      }}
+    >
+      <div className="flex flex-col items-center justify-center gap-4 w-full">
+        <Table.ScrollContainer maxHeight={600} className="w-full">
+          <Table striped highlightOnHover withColumnBorders>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th className="w-56">Parameter</Table.Th>
+                <Table.Th className="w-40">Value</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {paramsFailedToWriteList
+                .sort((a, b) => a.param_id.localeCompare(b.param_id))
+                .map((param) => (
+                  <Table.Tr key={param.param_id}>
+                    <Table.Td>{param.param_id}</Table.Td>
+                    <Table.Td>{param.param_value}</Table.Td>
+                  </Table.Tr>
+                ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      </div>
+    </Modal>
+  )
+}

gcs/src/components/params/paramsWriteModal.jsx

@@ -0,0 +1,47 @@
+import { Modal, Progress } from "@mantine/core"
+import { useDispatch, useSelector } from "react-redux"
+import {
+  selectParamsWriteProgressData,
+  selectParamsWriteProgressModalOpen,
+  setParamsWriteProgressModalOpen,
+} from "../../redux/slices/paramsSlice"
+
+export default function ParamsWriteModal() {
+  const dispatch = useDispatch()
+  const opened = useSelector(selectParamsWriteProgressModalOpen)
+  const progressData = useSelector(selectParamsWriteProgressData)
+  const progressPercentage =
+    progressData.current_index && progressData.total_params
+      ? (progressData.current_index / progressData.total_params) * 100
+      : 0
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => dispatch(setParamsWriteProgressModalOpen(false))}
+      title={"Writing params to drone"}
+      closeOnClickOutside={false}
+      closeOnEscape={false}
+      withCloseButton={false}
+      centered
+      overlayProps={{
+        backgroundOpacity: 0.55,
+        blur: 3,
+      }}
+    >
+      <div className="flex flex-col items-center justify-center mt-4">
+        {progressData.message && (
+          <p className="text-center mb-2">{progressData.message}</p>
+        )}
+
+        <Progress
+          animated
+          size="lg"
+          transitionDuration={300}
+          value={progressPercentage}
+          className="w-full mx-auto my-auto"
+        />
+      </div>
+    </Modal>
+  )
+}

gcs/src/helpers/notification.js

@@ -14,6 +14,7 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 export const redColor = tailwindColors.red[600]
 export const greenColor = tailwindColors.green[600]
 export const blueColor = tailwindColors.blue[600]
+export const yellowColor = tailwindColors.yellow[600]
 
 const notificationTheme = {
   style: {
@@ -40,6 +41,15 @@ export function showSuccessNotification(message) {
   })
 }
 
+export function showWarningNotification(message) {
+  notifications.show({
+    title: "Warning",
+    message: message,
+    color: yellowColor,
+    ...notificationTheme,
+  })
+}
+
 export function showInfoNotification(message) {
   notifications.show({
     title: "Info",

gcs/src/params.jsx

@@ -29,6 +29,8 @@ import { Row } from "./components/params/row.jsx"
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import LoadParamsFileModal from "./components/params/loadParamsFileModal.jsx"
+import ParamsFailedToWriteModal from "./components/params/paramsFailedToWriteModal.jsx"
+import ParamsWriteModal from "./components/params/paramsWriteModal.jsx"
 import { EXCLUDE_PARAMS_LOAD } from "./helpers/mavlinkConstants.js"
 import { showErrorNotification } from "./helpers/notification.js"
 import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
@@ -210,6 +212,8 @@ export default function Params() {
     <Layout currentPage="params">
       <AutopilotRebootModal />
       <LoadParamsFileModal />
+      <ParamsWriteModal />
+      <ParamsFailedToWriteModal />
 
       {connected ? (
         <div className="flex flex-col h-screen overflow-hidden">

gcs/src/redux/middleware/emitters.js

@@ -50,6 +50,7 @@ import {
   emitRebootAutopilot,
   emitRefreshParams,
   emitSetMultipleParams,
+  setParamsWriteProgressModalOpen,
 } from "../slices/paramsSlice"
 import { resetMessages } from "../slices/statusTextSlice"
 
@@ -269,7 +270,10 @@ export function handleEmitters(socket, store, action) {
     },
     {
       emitter: emitSetMultipleParams,
-      callback: () => socket.socket.emit("set_multiple_params", action.payload),
+      callback: () => {
+        socket.socket.emit("set_multiple_params", action.payload)
+        store.dispatch(setParamsWriteProgressModalOpen(true))
+      },
     },
     {
       emitter: emitExportParamsToFile,

gcs/src/redux/middleware/socketMiddleware.js

@@ -27,6 +27,7 @@ import { FRAME_CLASS_MAP } from "../../helpers/mavlinkConstants.js"
 import {
   showErrorNotification,
   showSuccessNotification,
+  showWarningNotification,
 } from "../../helpers/notification.js"
 import SocketFactory from "../../helpers/socket"
 import {
@@ -90,13 +91,18 @@ import {
   setUpdatePlannedHomePositionFromLoadModal,
 } from "../slices/missionSlice"
 import {
+  resetParamsWriteProgressData,
   setAutoPilotRebootModalOpen,
   setFetchingVars,
   setFetchingVarsProgress,
   setHasFetchedOnce,
   setModifiedParams,
   setParams,
   setParamSearchValue,
+  setParamsFailedToWrite,
+  setParamsFailedToWriteModalOpen,
+  setParamsWriteProgressData,
+  setParamsWriteProgressModalOpen,
   setRebootData,
   setShownParams,
   updateParamValue,
@@ -136,6 +142,7 @@ const ParamSpecificSocketEvents = Object.freeze({
   onParamSetSuccess: "param_set_success",
   onParamError: "params_error",
   onExportParamsResult: "export_params_result",
+  onSetMultipleParamsProgress: "set_multiple_params_progress",
 })
 
 const MissionSpecificSocketEvents = Object.freeze({
@@ -549,17 +556,49 @@ const socketMiddleware = (store) => {
         )
 
         socket.socket.on(ParamSpecificSocketEvents.onParamSetSuccess, (msg) => {
-          showSuccessNotification(msg.message)
-          store.dispatch(setModifiedParams([]))
+          const paramsSetSuccessfully = msg.data.params_set_successfully
+          const paramsNotSet = msg.data.params_could_not_set
+          if (paramsNotSet.length > 0 && paramsSetSuccessfully.length > 0) {
+            showWarningNotification(msg.message)
+          } else if (paramsNotSet.length > 0) {
+            showErrorNotification(msg.message)
+          } else {
+            showSuccessNotification(msg.message)
+          }
+
+          const modifiedParams = store.getState().paramsSlice.modifiedParams
+
+          // Only clear the params that got set successfully
+          store.dispatch(
+            setModifiedParams(
+              modifiedParams.filter(
+                (param) =>
+                  !paramsSetSuccessfully.some(
+                    (setParam) => setParam.param_id === param.param_id,
+                  ),
+              ),
+            ),
+          )
+
           // Update the param in the params list also
-          for (let param of msg.data) {
+          for (let param of paramsSetSuccessfully) {
             store.dispatch(updateParamValue(param))
           }
+
+          store.dispatch(resetParamsWriteProgressData())
+          store.dispatch(setParamsWriteProgressModalOpen(false))
+
+          if (paramsNotSet.length !== 0) {
+            store.dispatch(setParamsFailedToWrite(paramsNotSet))
+            store.dispatch(setParamsFailedToWriteModalOpen(true))
+          }
         })
 
         socket.socket.on(ParamSpecificSocketEvents.onParamError, (msg) => {
           showErrorNotification(msg.message)
           store.dispatch(setFetchingVars(false))
+          store.dispatch(resetParamsWriteProgressData())
+          store.dispatch(setParamsWriteProgressModalOpen(false))
         })
 
         socket.socket.on(
@@ -573,6 +612,20 @@ const socketMiddleware = (store) => {
           },
         )
 
+        socket.socket.on(
+          ParamSpecificSocketEvents.onSetMultipleParamsProgress,
+          (msg) => {
+            store.dispatch(
+              setParamsWriteProgressData({
+                message: msg.message,
+                param_id: msg.param_id,
+                current_index: msg.current_index,
+                total_params: msg.total_params,
+              }),
+            )
+          },
+        )
+
         socket.socket.on(
           DroneSpecificSocketEvents.onNavRepositionResult,
           (msg) => {

gcs/src/redux/slices/paramsSlice.js

@@ -16,6 +16,14 @@ const paramsSlice = createSlice({
     loadParamsFileModalOpen: false,
     loadedFileName: "",
     loadedParams: [],
+    paramsWriteProgressData: {
+      param_id: "",
+      current_index: 0,
+      total_params: 0,
+    },
+    paramsWriteProgressModalOpen: false,
+    paramsFailedToWrite: [],
+    paramsFailedToWriteModalOpen: false,
   },
   reducers: {
     setRebootData: (state, action) => {
@@ -128,6 +136,25 @@ const paramsSlice = createSlice({
     setLoadedParams: (state, action) => {
       state.loadedParams = action.payload
     },
+    setParamsWriteProgressData: (state, action) => {
+      state.paramsWriteProgressData = action.payload
+    },
+    resetParamsWriteProgressData: (state) => {
+      state.paramsWriteProgressData = {
+        param_id: "",
+        current_index: 0,
+        total_params: 0,
+      }
+    },
+    setParamsWriteProgressModalOpen: (state, action) => {
+      state.paramsWriteProgressModalOpen = action.payload
+    },
+    setParamsFailedToWrite: (state, action) => {
+      state.paramsFailedToWrite = action.payload
+    },
+    setParamsFailedToWriteModalOpen: (state, action) => {
+      state.paramsFailedToWriteModalOpen = action.payload
+    },
 
     // Emitters (empty objects to be captured in the middleware)
     emitRebootAutopilot: () => {},
@@ -152,6 +179,12 @@ const paramsSlice = createSlice({
     selectLoadParamsFileModalOpen: (state) => state.loadParamsFileModalOpen,
     selectLoadedFileName: (state) => state.loadedFileName,
     selectLoadedParams: (state) => state.loadedParams,
+    selectParamsWriteProgressData: (state) => state.paramsWriteProgressData,
+    selectParamsWriteProgressModalOpen: (state) =>
+      state.paramsWriteProgressModalOpen,
+    selectParamsFailedToWrite: (state) => state.paramsFailedToWrite,
+    selectParamsFailedToWriteModalOpen: (state) =>
+      state.paramsFailedToWriteModalOpen,
   },
 })
 
@@ -174,6 +207,11 @@ export const {
   setLoadParamsFileModalOpen,
   setLoadedFileName,
   setLoadedParams,
+  setParamsWriteProgressData,
+  resetParamsWriteProgressData,
+  setParamsWriteProgressModalOpen,
+  setParamsFailedToWrite,
+  setParamsFailedToWriteModalOpen,
   emitRebootAutopilot,
   emitRefreshParams,
   emitSetMultipleParams,
@@ -194,6 +232,10 @@ export const {
   selectLoadParamsFileModalOpen,
   selectLoadedFileName,
   selectLoadedParams,
+  selectParamsWriteProgressData,
+  selectParamsWriteProgressModalOpen,
+  selectParamsFailedToWrite,
+  selectParamsFailedToWriteModalOpen,
 } = paramsSlice.selectors
 
 export default paramsSlice