Support saving/restoring visibilities.

src/components/FlatmapVuer.vue

@@ -2150,6 +2150,20 @@ export default {
         return Array.from(new Set(labels))
       }
     },
+    /**
+     * @public
+     * Function to get and store the state (object) of the map in
+     * the provided argument
+     */
+    getVisibilityState: function (state) {
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
+      refs.forEach(ref => {
+        let comp = this.$refs[ref]
+        if (comp) {
+          state[ref] = comp.getState()
+        }
+      })
+    },
     /**
      * @public
      * Function to get the state (object) of the map.
@@ -2171,10 +2185,23 @@ export default {
         state['colour'] = this.colourRadio
         state['outlinesRadio'] = this.outlinesRadio
         state['background'] = this.currentBackground
+        this.getVisibilityState(state)
         return state
       }
       return undefined
     },
+    setVisibilityState: function (state) {
+      const refs = ['alertSelection', 'pathwaysSelection', 'taxonSelection']
+      refs.forEach(ref => {
+        const settings = state[ref]
+        if (settings) {
+          const comp = this.$refs[ref]
+          if (comp) {
+            comp.setState(settings)
+          }
+        }
+      })
+    },
     /**
      * @public
      * Function to set state (object) for the map.
@@ -2230,6 +2257,7 @@ export default {
             }
           }
         }
+        this.setVisibilityState(state)
       }
     },
     /**

src/components/SelectionsGroup.vue

@@ -162,7 +162,6 @@ export default {
       // Update the stated to send to the emit
       this.$emit('checkboxMouseEnter', { key: key, value: value, selections: this.selections, checked: this.checkedItems})
     },
-
     handleCheckedItemsChange: function (value) {
       let checkedCount = value.length
       this.checkAll = checkedCount === this.selections.length
@@ -188,6 +187,33 @@ export default {
       }
       return {}
     },
+    getState: function() {
+      let checkedCount = this.checkedItems.length
+      const checkAll = checkedCount === this.selections.length
+      return {
+        checkAll,
+        checked: !checkAll ? this.checkedItems : []
+      }
+    },
+    setState: function(state) {
+      this.checkAll = state.checkAll
+      this.checkedItems.length = 0
+      if (state.checked?.length) {
+        this.checkedItems.push(...state.checked)
+        this.selections.forEach((item) => {
+          const key = item[this.identifierKey]
+          this.$emit('changed', {key, value: this.checkedItems.includes(key)})
+        })
+      } else {
+        const keys = this.selections.map((a) => a[this.identifierKey])
+        let value = false
+        if (this.checkAll) {
+          value = true
+          this.checkedItems.push(...keys)
+        }
+        this.$emit('checkAll', { keys, value })
+      }
+    },
     hasLineStyles: function(item) {
       return 'colour' in item && this.colourStyle === 'line'
     },