frontend: Clean up MAVLink refresh rates on leave (store + vehicle setup)

core/frontend/src/components/vehiclesetup/configuration/compass/AutoCoordinateDetector.vue

@@ -61,9 +61,10 @@
 
 <script lang="ts">
 
-import { PropType } from 'vue'
+import { markRaw, PropType } from 'vue'
 
 import mavlink2rest from '@/libs/MAVLink2Rest'
+import Listener from '@/libs/MAVLink2Rest/Listener'
 import autopilot_data from '@/store/autopilot'
 import autopilot from '@/store/autopilot_manager'
 import { FirmwareVehicleType } from '@/types/autopilot'
@@ -93,6 +94,7 @@ export default {
       manual_lat: this.inputcoordinates?.lat,
       manual_lon: this.inputcoordinates?.lon,
       original_ekf_src: undefined as number | undefined,
+      position_listener: undefined as Listener | undefined,
     }
   },
   computed: {
@@ -136,13 +138,19 @@ export default {
   },
   mounted() {
     this.original_ekf_src = this.current_ekf_src
-    mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((receivedMessage) => {
-      this.mavlink_lat = receivedMessage.message.lat !== 0 ? receivedMessage.message.lat * 1e-7 : undefined
-      this.mavlink_lon = receivedMessage.message.lon !== 0 ? receivedMessage.message.lon * 1e-7 : undefined
-    }).setFrequency(0)
+    // markRaw: Listener → Endpoint.latestData must not be deep-observed.
+    this.position_listener = markRaw(
+      mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((receivedMessage) => {
+        this.mavlink_lat = receivedMessage.message.lat !== 0 ? receivedMessage.message.lat * 1e-7 : undefined
+        this.mavlink_lon = receivedMessage.message.lon !== 0 ? receivedMessage.message.lon * 1e-7 : undefined
+      }).setFrequency(0),
+    )
     mavlink2rest.requestMessageRate('GLOBAL_POSITION_INT', 1, autopilot_data.system_id)
     this.getGeoIp()
   },
+  beforeDestroy() {
+    this.position_listener?.discard()
+  },
   methods: {
     async waitFor(func: () => boolean, raise = false): Promise<void> {
       const start = new Date()

core/frontend/src/components/vehiclesetup/configuration/compass/CompassDisplay.vue

@@ -38,6 +38,8 @@ const mainAngles = {
   315: 'NW',
 }
 
+const COMPASS_REFRESH_MESSAGES = ['ATTITUDE', 'RAW_IMU', 'SCALED_IMU2', 'SCALED_IMU3', 'GPS_RAW_INT', 'GPS2_RAW']
+
 export default Vue.extend({
   name: 'CompassDisplay',
   components: {
@@ -59,6 +61,7 @@ export default Vue.extend({
       renderVariables: {
         yawAngleDegrees: [0, 0, 0, 0, 0, 0],
       },
+      render_interval: 0,
     }
   },
   computed: {
@@ -131,10 +134,17 @@ export default Vue.extend({
       this.canvas.height = this.canvasSize
     })
     this.initializeCanvas()
-    for (const msg of ['ATTITUDE', 'RAW_IMU', 'SCALED_IMU2', 'SCALED_IMU3', 'GPS_RAW_INT', 'GPS2_RAW']) {
+    for (const msg of COMPASS_REFRESH_MESSAGES) {
       mavlink.setMessageRefreshRate({ messageName: msg, refreshRate: 10 })
     }
   },
+  beforeDestroy() {
+    clearInterval(this.render_interval)
+    gsap.killTweensOf(this.renderVariables.yawAngleDegrees)
+    for (const msg of COMPASS_REFRESH_MESSAGES) {
+      mavlink.setMessageRefreshRate({ messageName: msg, refreshRate: 1 })
+    }
+  },
   methods: {
     resetCanvas(ctx: CanvasRenderingContext2D) {
       ctx.setTransform(1, 0, 0, 1, 0, 0)
@@ -289,7 +299,7 @@ export default Vue.extend({
       }
     },
     initializeCanvas() {
-      setInterval(() => {
+      this.render_interval = window.setInterval(() => {
         for (const [index, _value] of this.renderVariables.yawAngleDegrees.entries()) {
           const angle = this.headings[index]
           const angleDegrees = this.headings[index]

core/frontend/src/components/vehiclesetup/configuration/compass/LevelHorizonCalibration.vue

@@ -123,6 +123,8 @@ export default Vue.extend({
       if (open) {
         mavlink.setMessageRefreshRate({ messageName: 'ATTITUDE', refreshRate: 10 })
       } else {
+        // Do not ratchet ATTITUDE down here: CompassDisplay may still be mounted
+        // (Vuetify keeps visited tabs alive) and needs 10 Hz.
         this.status_text = undefined
         this.status_type = undefined
       }

core/frontend/src/components/vehiclesetup/overview/GyroCalib.vue

@@ -70,6 +70,8 @@ import mavlink_store_get from '@/utils/mavlink'
 
 import { calibrator, PreflightCalibration } from '../calibration'
 
+const GYRO_REFRESH_MESSAGES = ['RAW_IMU', 'SCALED_IMU2', 'SCALED_IMU3']
+
 interface CalibrationStatus {
     param?: Parameter
     name: string
@@ -129,10 +131,15 @@ export default Vue.extend({
     },
   },
   mounted() {
-    for (const msg of ['RAW_IMU', 'SCALED_IMU2', 'SCALED_IMU3']) {
+    for (const msg of GYRO_REFRESH_MESSAGES) {
       mavlink.setMessageRefreshRate({ messageName: msg, refreshRate: 10 })
     }
   },
+  beforeDestroy() {
+    for (const msg of GYRO_REFRESH_MESSAGES) {
+      mavlink.setMessageRefreshRate({ messageName: msg, refreshRate: 1 })
+    }
+  },
   methods: {
     async calibrate() {
       this.calibration_status = 'Calibrating...'

core/frontend/src/store/mavlink.ts

@@ -33,21 +33,20 @@ class MavlinkStore extends VuexModule {
     const { messageName, refreshRate } = rate
     if (refreshRate < 0) {
       console.warn(`Invalid request rate requested for message ${messageName}@${refreshRate}Hz`)
+      return
     }
 
-    mavlink2rest.requestMessageRate(messageName, refreshRate, autopilot_data.system_id)
-    // Remove any listener that has a lower frequency than requested
+    // Equal rate: keep existing listener and skip the wire request.
+    // Any other rate change discards the listener and creates a replacement.
     if (messageName in this.message_listeners) {
-      const currentRate = this.message_listeners[messageName].frequency
-      if (currentRate > refreshRate) {
-        console.warn(
-          `Request with higher rate already registered for message ${messageName}@${currentRate}Hz vs ${refreshRate}Hz`,
-        )
+      if (this.message_listeners[messageName].frequency === refreshRate) {
         return
       }
       this.message_listeners[messageName].discard()
     }
 
+    mavlink2rest.requestMessageRate(messageName, refreshRate, autopilot_data.system_id)
+
     // Create a new listener
     this.message_listeners[messageName] = mavlink2rest.startListening(messageName).setCallback((receivedMessage) => {
       this.updateMessage({

core/frontend/src/views/MainView.vue

@@ -268,6 +268,7 @@ export default Vue.extend({
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize)
+    mavlink.setMessageRefreshRate({ messageName: 'ATTITUDE', refreshRate: 1 })
   },
   methods: {
     handleResize() {