Save FLA colours to localstorage for persistence (#1157)

* Save FLA colours to localstorage for persistence

* Bump ver

* Address copilot review comments

Author: 1Blademaster

gcs/package.json

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

gcs/src/components/fla/chartDataCard.jsx

@@ -18,6 +18,7 @@ import {
   setCanSavePreset,
   setCustomColors,
   setMessageFilters,
+  setPersistentColorMapEntry,
 } from "../../redux/slices/logAnalyserSlice.js"
 
 function ChartDataCard({ item, unit, messageMeans }) {
@@ -35,6 +36,7 @@ function ChartDataCard({ item, unit, messageMeans }) {
 
       const newColors = { ...customColors, [label]: color }
       dispatch(setCustomColors(newColors))
+      dispatch(setPersistentColorMapEntry({ key: label, color }))
     },
     [customColors, dispatch],
   )

gcs/src/components/fla/messagesFiltersAccordion.jsx

@@ -20,10 +20,12 @@ import {
   selectCustomColors,
   selectLogType,
   selectMessageFilters,
+  selectPersistentColorMap,
   setCanSavePreset,
   setColorIndex,
   setCustomColors,
   setMessageFilters,
+  setPersistentColorMapEntry,
 } from "../../redux/slices/logAnalyserSlice.js"
 import { colorPalette } from "./constants.js"
 
@@ -64,6 +66,7 @@ export default function MessagesFiltersAccordion() {
 
   const messageFilters = useSelector(selectMessageFilters)
   const customColors = useSelector(selectCustomColors)
+  const persistentColorMap = useSelector(selectPersistentColorMap)
   const colorIndex = useSelector(selectColorIndex)
   const logType = useSelector(selectLogType)
   const aircraftType = useSelector(selectAircraftType)
@@ -113,14 +116,26 @@ export default function MessagesFiltersAccordion() {
 
       const checked = event.currentTarget.checked
       let newColors = { ...customColors }
+      const fieldKey = `${messageName}/${fieldName}`
 
       if (!checked) {
-        delete newColors[`${messageName}/${fieldName}`]
+        delete newColors[fieldKey]
       } else {
-        if (!newColors[`${messageName}/${fieldName}`]) {
-          newColors[`${messageName}/${fieldName}`] =
-            colorPalette[colorIndex % colorPalette.length]
-          dispatch(setColorIndex((colorIndex + 1) % colorPalette.length))
+        if (!newColors[fieldKey]) {
+          // Check persistent map first, then fall back to palette
+          if (persistentColorMap[fieldKey]) {
+            newColors[fieldKey] = persistentColorMap[fieldKey]
+          } else {
+            const assignedColor = colorPalette[colorIndex % colorPalette.length]
+            newColors[fieldKey] = assignedColor
+            dispatch(
+              setPersistentColorMapEntry({
+                key: fieldKey,
+                color: assignedColor,
+              }),
+            )
+            dispatch(setColorIndex((colorIndex + 1) % colorPalette.length))
+          }
         }
       }
 
@@ -134,7 +149,7 @@ export default function MessagesFiltersAccordion() {
       )
       dispatch(setCanSavePreset(hasSelectedFilters))
     },
-    [messageFilters, customColors, colorIndex, dispatch],
+    [messageFilters, customColors, persistentColorMap, colorIndex, dispatch],
   )
 
   // Memoize description getters

gcs/src/components/fla/presetAccordionItem.jsx

@@ -23,12 +23,15 @@ import {
 import {
   selectAircraftType,
   // Selectors
+  selectColorIndex,
   selectLogType,
   selectMessageFilters,
+  selectPersistentColorMap,
   setCanSavePreset,
   setColorIndex,
   setCustomColors,
   setMessageFilters,
+  setPersistentColorMapEntry,
 } from "../../redux/slices/logAnalyserSlice.js"
 
 // Utility function to convert a string to title case
@@ -42,8 +45,10 @@ export default function PresetAccordionItem({ category, deleteCustomPreset }) {
   // Redux
   const dispatch = useDispatch()
   const aircraftType = useSelector(selectAircraftType)
+  const colorIndex = useSelector(selectColorIndex)
   const logType = useSelector(selectLogType)
   const messageFilters = useSelector(selectMessageFilters)
+  const persistentColorMap = useSelector(selectPersistentColorMap)
 
   // Preset selection
   function selectPreset(preset) {
@@ -60,7 +65,11 @@ export default function PresetAccordionItem({ category, deleteCustomPreset }) {
         newFilters[categoryName][fieldName] = false
       })
     })
-    let newColors = {}
+    // Use preset's custom colors if available, otherwise initialize empty
+    let newColors = preset.customColors
+      ? structuredClone(preset.customColors)
+      : {}
+    let nextColorIndex = colorIndex
 
     // Turn on filters for the given preset
     Object.keys(preset.filters).forEach((requestedName) => {
@@ -78,10 +87,26 @@ export default function PresetAccordionItem({ category, deleteCustomPreset }) {
           }
           newFilters[actualMessageName][field] = true
 
-          // Assign a color using the actual message name
-          if (!newColors[`${actualMessageName}/${field}`]) {
-            newColors[`${actualMessageName}/${field}`] =
-              colorPalette[Object.keys(newColors).length % colorPalette.length]
+          // Assign a color
+          const fieldKey = `${actualMessageName}/${field}`
+          // First priority: use color from preset if it exists
+          if (!newColors[fieldKey]) {
+            // Second priority: use color from persistent map if it exists
+            if (persistentColorMap[fieldKey]) {
+              newColors[fieldKey] = persistentColorMap[fieldKey]
+            } else {
+              // Fall back to palette color
+              const assignedColor =
+                colorPalette[nextColorIndex % colorPalette.length]
+              newColors[fieldKey] = assignedColor
+              nextColorIndex = (nextColorIndex + 1) % colorPalette.length
+              dispatch(
+                setPersistentColorMapEntry({
+                  key: fieldKey,
+                  color: assignedColor,
+                }),
+              )
+            }
           }
         })
       } else {
@@ -91,7 +116,7 @@ export default function PresetAccordionItem({ category, deleteCustomPreset }) {
       }
     })
 
-    dispatch(setColorIndex(Object.keys(newColors).length % colorPalette.length)) // limited by palette length
+    dispatch(setColorIndex(nextColorIndex)) // limited by palette length
     dispatch(setCustomColors(newColors))
     dispatch(setMessageFilters(newFilters))
     // Don't allow saving if we just selected an existing preset

gcs/src/components/fla/savePresetModal.jsx

@@ -10,6 +10,7 @@ import {
 } from "../../helpers/notification.js"
 import {
   selectAircraftType,
+  selectCustomColors,
   selectLogType,
   selectMessageFilters,
   setCanSavePreset,
@@ -25,6 +26,7 @@ export default function SavePresetModal({
   const dispatch = useDispatch()
   const logType = useSelector(selectLogType)
   const messageFilters = useSelector(selectMessageFilters)
+  const customColors = useSelector(selectCustomColors)
   const aircraftType = useSelector(selectAircraftType)
 
   const [presetName, setPresetName] = useState("")
@@ -51,6 +53,7 @@ export default function SavePresetModal({
       const newPreset = {
         name: presetName,
         filters: currentFilters,
+        customColors: customColors,
         aircraftType: aircraftType ? [aircraftType] : undefined, // Only save the aircraft type if it exists
       }
 

gcs/src/fla.jsx

@@ -22,6 +22,7 @@ import {
   selectBaseChartData,
   selectCustomColors,
   selectMessageFilters,
+  selectPersistentColorMap,
   // Selectors
   setAircraftType,
   setBaseChartData,
@@ -47,6 +48,7 @@ export default function FLA() {
   const dispatch = useDispatch()
   const messageFilters = useSelector(selectMessageFilters)
   const customColors = useSelector(selectCustomColors)
+  const persistentColorMap = useSelector(selectPersistentColorMap)
   const baseChartData = useSelector(selectBaseChartData)
 
   /**
@@ -160,6 +162,40 @@ export default function FLA() {
     }
   }, [requestedLabels, baseChartData])
 
+  // Restore visible colors from persistent map when messageFilters change
+  useEffect(() => {
+    if (!messageFilters) return
+
+    // Build colors for active filters only.
+    // Prefer persisted colors when present, otherwise keep existing custom color.
+    const mergedVisibleColors = Object.keys(messageFilters).reduce(
+      (acc, category) => {
+        Object.keys(messageFilters[category]).forEach((field) => {
+          if (!messageFilters[category][field]) return
+
+          const key = `${category}/${field}`
+          const resolvedColor = persistentColorMap[key] ?? customColors[key]
+          if (resolvedColor) {
+            acc[key] = resolvedColor
+          }
+        })
+        return acc
+      },
+      {},
+    )
+
+    const isSameAsCurrentColors =
+      Object.keys(mergedVisibleColors).length ===
+        Object.keys(customColors).length &&
+      Object.entries(mergedVisibleColors).every(
+        ([key, value]) => customColors[key] === value,
+      )
+
+    if (Object.keys(mergedVisibleColors).length > 0 && !isSameAsCurrentColors) {
+      dispatch(setCustomColors(mergedVisibleColors))
+    }
+  }, [messageFilters, persistentColorMap, customColors, dispatch])
+
   // Step 3: Memoize the final chart data.
   // This filters the master cache. Colors are set to white by default.
   // The actual display colors come from customColors and are applied

gcs/src/redux/slices/logAnalyserSlice.js

@@ -14,6 +14,7 @@ const logAnalyserSlice = createSlice({
     messageMeans: {},
     baseChartData: [],
     customColors: {},
+    persistentColorMap: {},
     colorIndex: 0,
     aircraftType: null,
     canSavePreset: false,
@@ -64,6 +65,15 @@ const logAnalyserSlice = createSlice({
     setCustomColors: (state, action) => {
       state.customColors = action.payload
     },
+    setPersistentColorMap: (state, action) => {
+      state.persistentColorMap = action.payload
+    },
+    setPersistentColorMapEntry: (state, action) => {
+      const { key, color } = action.payload || {}
+      if (!key || !color) return
+      if (state.persistentColorMap[key] === color) return
+      state.persistentColorMap[key] = color
+    },
     setColorIndex: (state, action) => {
       state.colorIndex = action.payload
     },
@@ -109,6 +119,7 @@ const logAnalyserSlice = createSlice({
     selectMessageMeans: (state) => state.messageMeans,
     selectBaseChartData: (state) => state.baseChartData,
     selectCustomColors: (state) => state.customColors,
+    selectPersistentColorMap: (state) => state.persistentColorMap,
     selectColorIndex: (state) => state.colorIndex,
     selectAircraftType: (state) => state.aircraftType,
     selectCanSavePreset: (state) => state.canSavePreset,
@@ -133,6 +144,8 @@ export const {
   setMessageMeans,
   setBaseChartData,
   setCustomColors,
+  setPersistentColorMap,
+  setPersistentColorMapEntry,
   setColorIndex,
   setAircraftType,
   setCanSavePreset,
@@ -157,6 +170,7 @@ export const {
   selectMessageMeans,
   selectBaseChartData,
   selectCustomColors,
+  selectPersistentColorMap,
   selectColorIndex,
   selectAircraftType,
   selectCanSavePreset,

gcs/src/redux/store.js

@@ -23,7 +23,9 @@ import droneInfoSlice, {
   setSelectedDisplayTelemetry,
 } from "./slices/droneInfoSlice"
 import ftpSlice from "./slices/ftpSlice"
-import logAnalyserSlice from "./slices/logAnalyserSlice"
+import logAnalyserSlice, {
+  setPersistentColorMap,
+} from "./slices/logAnalyserSlice"
 import missionInfoSlice, { setPlannedHomePosition } from "./slices/missionSlice"
 import paramsSlice from "./slices/paramsSlice"
 import simulationParamsSlice from "./slices/simulationParamsSlice"
@@ -211,6 +213,19 @@ if (plannedHomePosition !== null) {
   }
 }
 
+const persistentColorMap = localStorage.getItem("flaPersistentColorMap")
+if (persistentColorMap !== null) {
+  try {
+    const parsedColorMap = JSON.parse(persistentColorMap)
+    if (parsedColorMap && typeof parsedColorMap === "object") {
+      store.dispatch(setPersistentColorMap(parsedColorMap))
+    }
+  } catch {
+    console.log("Failed to parse persistent color map from localStorage")
+    store.dispatch(setPersistentColorMap({}))
+  }
+}
+
 const updateLocalStorageIfChanged = (key, newValue) => {
   if (newValue !== null && newValue !== undefined) {
     const currentValue = localStorage.getItem(key)
@@ -284,6 +299,8 @@ function mergeSelectedDisplayTelemetryConfigWithDefaults(persistedConfig) {
   })
 }
 
+let prevPersistentColorMap = store.getState().logAnalyser.persistentColorMap
+
 // Update states when a new message comes in
 store.subscribe(() => {
   const store_mut = store.getState()
@@ -397,4 +414,17 @@ store.subscribe(() => {
       store_mut.missionInfo.plannedHomePosition,
     )
   }
+
+  const currentPersistentColorMap = store_mut.logAnalyser.persistentColorMap
+  if (
+    currentPersistentColorMap !== prevPersistentColorMap &&
+    currentPersistentColorMap &&
+    typeof currentPersistentColorMap === "object"
+  ) {
+    updateJSONLocalStorageIfChanged(
+      "flaPersistentColorMap",
+      currentPersistentColorMap,
+    )
+    prevPersistentColorMap = currentPersistentColorMap
+  }
 })