973 feature display bitmask options on fla params window (#1136)

* Display bitmask bit values in FLA params window

* Refactor param def helpers

* Address copilot review comments

Author: 1Blademaster

gcs/electron/modules/flaParamsWindow.ts

@@ -10,6 +10,8 @@ let flaParamsWin: BrowserWindow | null = null
 export function openFlaParamsWindow(
   paramsData: ParamObject[] | null,
   fileName: string | null,
+  aircraftType: string | null,
+  firmwareVersion: string | null,
   parentWindow?: BrowserWindow,
 ) {
   if (flaParamsWin !== null) {
@@ -61,6 +63,8 @@ export function openFlaParamsWindow(
       flaParamsWin?.webContents.send("app:send-fla-params", {
         params: paramsData,
         fileName: fileName,
+        aircraftType,
+        firmwareVersion,
       })
     })
   }
@@ -81,7 +85,13 @@ export default function registerFlaParamsIPC() {
 
   ipcMain.handle("app:open-fla-params-window", (event, data) => {
     const parentWindow = BrowserWindow.fromWebContents(event.sender)
-    openFlaParamsWindow(data.params, data.fileName, parentWindow || undefined)
+    openFlaParamsWindow(
+      data.params,
+      data.fileName,
+      data.aircraftType ?? null,
+      data.firmwareVersion ?? null,
+      parentWindow || undefined,
+    )
   })
   ipcMain.handle("app:close-fla-params-window", () => closeFlaParamsWindow())
 }

gcs/src/components/fla/flaParamsWindow.jsx

@@ -2,20 +2,111 @@
 
 import { useEffect, useState } from "react"
 
-import { Button, Table, TextInput } from "@mantine/core"
+import { Button, Table, TextInput, Tooltip } from "@mantine/core"
 import { useElementSize, useViewportSize } from "@mantine/hooks"
+import { IconInfoCircle } from "@tabler/icons-react"
 import {
   showErrorNotification,
   showSuccessNotification,
 } from "../../helpers/notification"
+import { loadParamDefinitionsForVersion } from "../../helpers/paramDefinitions"
+
+function getBitmaskInfo(rawValue, paramDef) {
+  const bitmaskDef = paramDef?.Bitmask
+  if (!bitmaskDef || typeof bitmaskDef !== "object") {
+    return {
+      isBitmask: false,
+      displayValue: String(rawValue),
+      selected: [],
+    }
+  }
+
+  const numericValue = Number(rawValue)
+  if (!Number.isFinite(numericValue)) {
+    return {
+      isBitmask: false,
+      displayValue: String(rawValue),
+      selected: [],
+    }
+  }
+
+  const bitmaskValue = Math.trunc(numericValue) >>> 0
+  const selected = Object.entries(bitmaskDef)
+    .map(([bitKey, label]) => ({
+      bit: Number.parseInt(bitKey, 10),
+      label,
+    }))
+    .filter((item) => Number.isInteger(item.bit) && item.bit >= 0)
+    .sort((a, b) => a.bit - b.bit)
+    .filter((item) => item.bit < 32)
+    .filter((item) => (bitmaskValue & (1 << item.bit)) !== 0)
+
+  return {
+    isBitmask: true,
+    displayValue: String(bitmaskValue),
+    selected,
+  }
+}
+
+function renderParamValue(value, paramDef) {
+  const bitmaskInfo = getBitmaskInfo(value, paramDef)
+
+  if (!bitmaskInfo.isBitmask) {
+    return bitmaskInfo.displayValue
+  }
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <span>{bitmaskInfo.displayValue}</span>
+      {bitmaskInfo.displayValue !== "0" && bitmaskInfo.selected.length > 0 && (
+        <Tooltip
+          multiline
+          w={300}
+          label={
+            bitmaskInfo.selected.length > 0 && (
+              <div className="text-sm">
+                {bitmaskInfo.selected.map((item) => (
+                  <div key={item.bit}>{`${item.bit}: ${item.label}`}</div>
+                ))}
+              </div>
+            )
+          }
+        >
+          <span className="inline-flex">
+            <IconInfoCircle size={16} color="white" />
+          </span>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
 
 export default function FlaParamsWindow() {
   const [params, setParams] = useState(null)
   const [fileName, setFileName] = useState("")
+  const [aircraftKey, setAircraftKey] = useState(null)
+  const [firmwareVersion, setFirmwareVersion] = useState(null)
+  const [paramDefs, setParamDefs] = useState({})
   const [paramSearchValue, setParamSearchValue] = useState("")
   const { height } = useViewportSize()
   const { ref, height: searchBarHeight } = useElementSize()
 
+  useEffect(() => {
+    let cancelled = false
+
+    loadParamDefinitionsForVersion(aircraftKey, firmwareVersion).then(
+      (result) => {
+        if (!cancelled) {
+          setParamDefs(result.paramDefs)
+        }
+      },
+    )
+
+    return () => {
+      cancelled = true
+    }
+  }, [aircraftKey, firmwareVersion])
+
   async function saveParamsToFile() {
     try {
       const options = {
@@ -56,6 +147,12 @@ export default function FlaParamsWindow() {
     const handler = (_event, data) => {
       setParams(data.params)
       setFileName(data.fileName)
+      setAircraftKey(
+        data.aircraftType === "plane" || data.aircraftType === "copter"
+          ? data.aircraftType
+          : null,
+      )
+      setFirmwareVersion(data.firmwareVersion ?? null)
     }
     window.ipcRenderer.on("app:send-fla-params", handler)
 
@@ -105,7 +202,9 @@ export default function FlaParamsWindow() {
               .map((param) => (
                 <Table.Tr key={param.name}>
                   <Table.Td>{param.name}</Table.Td>
-                  <Table.Td>{param.value}</Table.Td>
+                  <Table.Td>
+                    {renderParamValue(param.value, paramDefs[param.name])}
+                  </Table.Td>
                 </Table.Tr>
               ))}
           </Table.Tbody>

gcs/src/components/fla/graph.jsx

@@ -43,6 +43,7 @@ import {
   selectCanSavePreset,
   selectCanShowMapPositionData,
   selectFile,
+  selectFirmwareVersion,
   selectFlightModeMessages,
   selectLogEvents,
   selectMapPositionData,
@@ -113,6 +114,7 @@ export default function Graph({ data, customColors, openPresetModal }) {
   const flightModes = useSelector(selectFlightModeMessages)
   const canSavePreset = useSelector(selectCanSavePreset)
   const aircraftType = useSelector(selectAircraftType)
+  const firmwareVersion = useSelector(selectFirmwareVersion)
   const params = useSelector(selectParams)
   const file = useSelector(selectFile)
   const fileName = file?.name
@@ -550,6 +552,8 @@ export default function Graph({ data, customColors, openPresetModal }) {
       window.ipcRenderer.invoke("app:open-fla-params-window", {
         params,
         fileName,
+        aircraftType,
+        firmwareVersion,
       })
     } catch (error) {
       showErrorNotification(error)

gcs/src/helpers/paramDefinitions.js

@@ -29,8 +29,8 @@ function getAircraftKey(aircraftType) {
   return null
 }
 
-function parseMajorMinor(flightSwVersion) {
-  const match = String(flightSwVersion || "").match(/(\d+)\.(\d+)/)
+export function parseMajorMinorVersion(versionString) {
+  const match = String(versionString || "").match(/(\d+)\.(\d+)/)
   if (!match) {
     return null
   }
@@ -85,6 +85,43 @@ function findModulePath(aircraftKey, version) {
   return modulePathByFileName[manifestFileName] || null
 }
 
+export function resolveParamDefinitionVersion(aircraftKey, versionString) {
+  const requestedVersion = parseMajorMinorVersion(versionString)
+  const resolvedVersion = getResolvedVersion(aircraftKey, requestedVersion)
+
+  return {
+    requestedVersion,
+    resolvedVersion,
+  }
+}
+
+export async function loadParamDefinitionsForVersion(
+  aircraftKey,
+  versionString,
+) {
+  const { requestedVersion, resolvedVersion } = resolveParamDefinitionVersion(
+    aircraftKey,
+    versionString,
+  )
+
+  const modulePath = findModulePath(aircraftKey, resolvedVersion)
+  if (!modulePath) {
+    return {
+      paramDefs: {},
+      requestedVersion,
+      resolvedVersion,
+    }
+  }
+
+  const loadedModule = await paramDefinitionModules[modulePath]()
+
+  return {
+    paramDefs: loadedModule.default || {},
+    requestedVersion,
+    resolvedVersion,
+  }
+}
+
 export function useParamDefinitions() {
   const aircraftType = useSelector(selectAircraftType)
   const flightSwVersion = useSelector(selectFlightSwVersion)
@@ -95,36 +132,26 @@ export function useParamDefinitions() {
     [aircraftType],
   )
 
-  const requestedVersion = useMemo(
-    () => parseMajorMinor(flightSwVersion),
-    [flightSwVersion],
-  )
-
-  const resolvedVersion = useMemo(
-    () => getResolvedVersion(aircraftKey, requestedVersion),
-    [aircraftKey, requestedVersion],
+  const { requestedVersion, resolvedVersion } = useMemo(
+    () => resolveParamDefinitionVersion(aircraftKey, flightSwVersion),
+    [aircraftKey, flightSwVersion],
   )
 
   useEffect(() => {
-    const modulePath = findModulePath(aircraftKey, resolvedVersion)
-
-    if (!modulePath) {
-      setParamDefs({})
-      return
-    }
-
     let cancelled = false
 
-    paramDefinitionModules[modulePath]().then((loadedModule) => {
-      if (!cancelled) {
-        setParamDefs(loadedModule.default || {})
-      }
-    })
+    loadParamDefinitionsForVersion(aircraftKey, flightSwVersion).then(
+      (result) => {
+        if (!cancelled) {
+          setParamDefs(result.paramDefs)
+        }
+      },
+    )
 
     return () => {
       cancelled = true
     }
-  }, [aircraftKey, resolvedVersion])
+  }, [aircraftKey, flightSwVersion])
 
   return {
     paramDefs,