joystick: restore MANUAL_CONTROL axes saved by a newer version

1.19 persisted those axes as data-lake ids. Resolve them when
building MANUAL_CONTROL. Do not rewrite the mapping on read;
the duplicate-axis guard treats those aliases as the same
action. The settings page labels a leftover binding as
MAVLink Axis X in the dropdown, display-only.

Author: rafaellehmkuhl

src/libs/joystick/protocols/manual-control-axis-id.ts

@@ -0,0 +1,34 @@
+import { type ProtocolAction, JoystickProtocol } from '@/types/joystick'
+
+// Inverse of 1.19's migrateMavlinkManualControlAxes: that version persisted these data-lake ids
+// and 1.18 still drives MANUAL_CONTROL from the MAVLink axis actions.
+const dataLakeManualControlAxisById: Record<string, string> = {
+  'inputs/mavlink/axis-x': 'axis_x',
+  'inputs/mavlink/axis-y': 'axis_y',
+  'inputs/mavlink/axis-z': 'axis_z',
+  'inputs/mavlink/axis-r': 'axis_r',
+  'inputs/mavlink/axis-s': 'axis_s',
+  'inputs/mavlink/axis-t': 'axis_t',
+}
+
+/**
+ * MANUAL_CONTROL axis id this action should drive, including 1.19 data-lake bindings.
+ * @param {ProtocolAction} action - Axis action from the stored mapping
+ * @returns {string | undefined} `axis_x`…`axis_t`, or undefined if this is not a MANUAL_CONTROL axis
+ */
+export const manualControlAxisId = (action: ProtocolAction): string | undefined => {
+  if (action.protocol === JoystickProtocol.MAVLinkManualControl) return action.id
+  if (action.protocol === JoystickProtocol.DataLakeVariable) return dataLakeManualControlAxisById[action.id]
+}
+
+/**
+ * Label for a 1.19 data-lake MANUAL_CONTROL binding. Display-only — do not write this back.
+ * @param {ProtocolAction} action - Axis action from the stored mapping
+ * @returns {string | undefined} `MAVLink Axis X`…`T` when this is a 1.19 alias, otherwise undefined
+ */
+export const manualControlAxisDisplayName = (action: ProtocolAction): string | undefined => {
+  if (action.protocol !== JoystickProtocol.DataLakeVariable) return
+  const id = dataLakeManualControlAxisById[action.id]
+  if (!id) return
+  return `MAVLink Axis ${id.slice(-1).toUpperCase()}`
+}

src/libs/joystick/protocols/mavlink-manual-control.ts

@@ -6,6 +6,7 @@ import { capitalize } from 'vue'
 
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { sendManualControl } from '@/libs/communication/mavlink'
+import { manualControlAxisId } from '@/libs/joystick/protocols/manual-control-axis-id'
 import { modifierKeyActions, otherAvailableActions } from '@/libs/joystick/protocols/other'
 import { round, scale } from '@/libs/utils'
 import type { ArduPilot } from '@/libs/vehicle/ardupilot/ardupilot'
@@ -501,12 +502,12 @@ export class MavlinkManualControlManager {
     }
 
     // Calculate axes values
-    const xCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_x.id)
-    const yCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_y.id)
-    const zCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_z.id)
-    const rCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_r.id)
-    const sCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_s.id)
-    const tCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => entry[1].action.protocol === JoystickProtocol.MAVLinkManualControl && entry[1].action.id === mavlinkManualControlAxes.axis_t.id)
+    const xCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_x.id)
+    const yCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_y.id)
+    const zCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_z.id)
+    const rCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_r.id)
+    const sCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_s.id)
+    const tCorrespondency = Object.entries(this.currentActionsMapping.axesCorrespondencies).find((entry) => manualControlAxisId(entry[1].action) === mavlinkManualControlAxes.axis_t.id)
 
     // Populate MAVLink Manual Control state of axes and buttons
     this.manualControlState.x = xCorrespondency === undefined ? 0 : round(scale(this.joystickState.axes[xCorrespondency[0] as unknown as JoystickAxis] ?? 0, -1, 1, xCorrespondency[1].min, xCorrespondency[1].max), 0)

src/stores/controller.ts

@@ -17,6 +17,7 @@ import {
 } from '@/libs/joystick/manager'
 import { allAvailableAxes, allAvailableButtons, performJoystickMappingMigrations } from '@/libs/joystick/protocols'
 import { CockpitActionsFunction, executeActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
+import { manualControlAxisId } from '@/libs/joystick/protocols/manual-control-axis-id'
 import { modifierKeyActions, otherAvailableActions } from '@/libs/joystick/protocols/other'
 import { settingsManager } from '@/libs/settings-management'
 import { isElectron } from '@/libs/utils'
@@ -333,13 +334,15 @@ export const useControllerStore = defineStore('controller', () => {
       // Check if there's any duplicated axis actions. If so, unmap (set to no_function) the axes that use to have the same action
       const oldMapping = structuredClone(toRaw(lastValidProtocolMapping))
       const newMapping = protocolMapping.value
-      const mappedAxisActions = Object.values(newMapping.axesCorrespondencies).map((v) => v.action.id)
+      const mappedAxisActions = Object.values(newMapping.axesCorrespondencies).map(
+        (v) => manualControlAxisId(v.action) ?? v.action.id
+      )
       const duplicateAxisActions = mappedAxisActions
         .filter((item, index) => mappedAxisActions.indexOf(item) !== index)
         .filter((v) => v !== otherAvailableActions.no_function.id)
       if (!duplicateAxisActions.isEmpty()) {
         Object.entries(newMapping.axesCorrespondencies).forEach(([axis, mapping]) => {
-          const isDuplicated = duplicateAxisActions.includes(mapping.action.id)
+          const isDuplicated = duplicateAxisActions.includes(manualControlAxisId(mapping.action) ?? mapping.action.id)
           const oldMappingId = oldMapping.axesCorrespondencies[axis as unknown as JoystickAxis]?.action?.id
           const wasMapped = oldMappingId === mapping.action.id
           if (isDuplicated && wasMapped) {

src/tests/libs/joystick/manual-control-axis-id.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from 'vitest'
+
+import { manualControlAxisDisplayName, manualControlAxisId } from '@/libs/joystick/protocols/manual-control-axis-id'
+import { JoystickProtocol } from '@/types/joystick'
+
+test('turns 1.19 data-lake manual-control axes back into MAVLink axis ids', () => {
+  const dataLakeX = {
+    protocol: JoystickProtocol.DataLakeVariable,
+    id: 'inputs/mavlink/axis-x',
+    name: 'Axis X',
+  }
+  const mavlinkX = { protocol: JoystickProtocol.MAVLinkManualControl, id: 'axis_x', name: 'Axis X' }
+  expect(manualControlAxisId(dataLakeX)).toBe('axis_x')
+  expect(manualControlAxisId(dataLakeX)).toBe(manualControlAxisId(mavlinkX))
+  expect(manualControlAxisDisplayName(dataLakeX)).toBe('MAVLink Axis X')
+  expect(manualControlAxisDisplayName(mavlinkX)).toBeUndefined()
+  expect(
+    manualControlAxisId({ protocol: JoystickProtocol.DataLakeVariable, id: 'inputs/mavlink/axis-y', name: 'Axis Y' })
+  ).toBe('axis_y')
+})
+
+test('leaves already-MAVLink axes and unrelated data-lake axes alone', () => {
+  expect(manualControlAxisId({ protocol: JoystickProtocol.MAVLinkManualControl, id: 'axis_x', name: 'Axis X' })).toBe(
+    'axis_x'
+  )
+  expect(
+    manualControlAxisId({ protocol: JoystickProtocol.DataLakeVariable, id: 'camera-zoom', name: 'Camera Zoom' })
+  ).toBeUndefined()
+  expect(
+    manualControlAxisDisplayName({
+      protocol: JoystickProtocol.DataLakeVariable,
+      id: 'camera-zoom',
+      name: 'Camera Zoom',
+    })
+  ).toBeUndefined()
+})

src/views/ConfigurationJoystickView.vue

@@ -357,7 +357,7 @@
                             v-if="item.type === 'axis'"
                             v-model="selectedProfileAxesCorrespondencies[item.id as JoystickAxis].action"
                             :items="filteredAndSortedAxisActions"
-                            item-title="name"
+                            :item-title="axisActionTitle"
                             hide-details
                             class="mb-2"
                             density="compact"
@@ -622,7 +622,7 @@
             <v-select
               v-model="selectedProfileAxesCorrespondencies[input.id].action"
               :items="filteredAndSortedAxisActions"
-              item-title="name"
+              :item-title="axisActionTitle"
               hide-details
               density="compact"
               variant="outlined"
@@ -666,6 +666,7 @@ import { getDataLakeVariableInfo } from '@/libs/actions/data-lake'
 import { getAllTransformingFunctions } from '@/libs/actions/data-lake-transformations'
 import { getArdupilotVersion, getMavlink2RestVersion } from '@/libs/blueos'
 import { JoystickModel } from '@/libs/joystick/manager'
+import { manualControlAxisDisplayName } from '@/libs/joystick/protocols/manual-control-axis-id'
 import { MAVLinkButtonFunction } from '@/libs/joystick/protocols/mavlink-manual-control'
 import { modifierKeyActions } from '@/libs/joystick/protocols/other'
 import { mavlinkCameraFocusActionId, mavlinkCameraZoomActionId } from '@/libs/joystick/protocols/predefined-resources'
@@ -780,9 +781,14 @@ const getAxesNotInSvg = (joystick: Joystick): number[] => {
   return joystick.state.axes.map((_, index) => index).filter((axisId) => !svgAxes.has(axisId as JoystickAxis))
 }
 
+const axisActionTitle = (action: JoystickAction): string => {
+  return manualControlAxisDisplayName(action as ProtocolAction) ?? action.name
+}
+
 const getAxisActionName = (axisId: number): string => {
   const action = selectedProfileAxesCorrespondencies.value[axisId as JoystickAxis]?.action
-  return action?.name ?? 'unassigned'
+  if (!action) return 'unassigned'
+  return axisActionTitle(action)
 }
 
 const shiftFunction = {