Add pathways checkbox events for data tracking

src/App.vue

@@ -73,6 +73,8 @@
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
       :disableUI="disableUI"
+      @open-pubmed-url="onOpenPubmedUrl"
+      @pathway-selection-changed="onPathwaySelectionChanged"
     />
   </div>
 </template>
@@ -114,6 +116,12 @@ export default {
         console.log('resource', resource)
       }
     },
+    onOpenPubmedUrl: function (url) {
+      console.log('open-pubmed-url', url);
+    },
+    onPathwaySelectionChanged: function (data) {
+      console.log('pathway-selection-changed', data);
+    },
     FlatmapReady: function (component) {
       console.log(component)
       let taxon = component.mapImp.describes

src/components/ExternalResourceCard.vue

@@ -23,6 +23,7 @@ import {
 } from '@element-plus/icons-vue'
 /* eslint-disable no-alert, no-console */
 import { ElButton as Button } from 'element-plus'
+import EventBus from './EventBus'
 
 export default {
   name: 'ExternalResourceCard',
@@ -47,6 +48,7 @@ export default {
       return string.charAt(0).toUpperCase() + string.slice(1)
     },
     openUrl: function (url) {
+      EventBus.emit('open-pubmed-url', url);
       window.open(url, '_blank')
     },
   },

src/components/FlatmapVuer.vue

@@ -276,6 +276,7 @@
                 identifierKey="key"
                 :selections="centreLines"
                 @changed="centreLinesSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 ref="centrelinesSelection"
                 key="centrelinesSelection"
               />
@@ -287,6 +288,7 @@
                   identifierKey="key"
                   :selections="sckanDisplay"
                   @changed="sckanSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllSCKAN"
                   ref="skcanSelection"
                   key="skcanSelection"
@@ -298,6 +300,7 @@
                   identifierKey="id"
                   :selections="layers"
                   @changed="layersSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllLayers"
                   ref="layersSelection"
                   key="layersSelection"
@@ -310,6 +313,7 @@
                 identifierKey="taxon"
                 :selections="taxonConnectivity"
                 @changed="taxonsSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllTaxons"
                 ref="taxonSelection"
                 key="taxonSelection"
@@ -322,6 +326,7 @@
                 colourStyle="line"
                 :selections="pathways"
                 @changed="pathwaysSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllPathways"
                 ref="pathwaysSelection"
                 key="pathwaysSelection"
@@ -801,6 +806,9 @@ export default {
         this.mapImp.enableCentrelines(payload.value)
       }
     },
+    onSelectionsDataChanged: function (data) {
+      this.$emit('pathway-selection-changed', data);
+    },
     /**
      * // Currently not in use
      * Function to show or hide paths valid in SCKAN

src/components/MultiFlatmapVuer.vue

@@ -62,6 +62,7 @@
          * @arg $event
          */
         $emit('open-map', $event)"
+      @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
       :helpMode="helpMode"
       :renderAtMounted="renderAtMounted"
@@ -120,6 +121,15 @@ export default {
     EventBus.on('onActionClick', (action) => {
       this.resourceSelected(action)
     })
+    EventBus.on('open-pubmed-url', (url) => {
+      /**
+       * This event is emitted when the user clicks
+       * on "Open publications in pubmed" button
+       * from provenance popup.
+       * @arg url
+       */
+      this.$emit('open-pubmed-url', url);
+    });
   },
   methods: {
     /**
@@ -244,6 +254,9 @@ export default {
        */
       this.$emit('pan-zoom-callback', payload)
     },
+    onSelectionsDataChanged: function (data) {
+      this.$emit('pathway-selection-changed', data);
+    },
     /**
      * @vuese
      * Function to show popup on map.

src/components/SelectionsGroup.vue

@@ -11,6 +11,7 @@
           :indeterminate="isIndeterminate"
           v-model="checkAll"
           @change="handleCheckAllChange"
+          @click="onAllCheckboxNativeChange"
           >Display all</el-checkbox
         >
       </el-col>
@@ -32,6 +33,7 @@
               class="my-checkbox"
               :label="item[identifierKey]"
               @change="visibilityToggle(item[identifierKey], $event)"
+              @click="onCheckboxNativeChange"
               :checked="!('enabled' in item) || item.enabled === true"
             >
               <el-row class="checkbox-row">
@@ -85,8 +87,52 @@ export default {
         }
       })
     },
+    setCheckboxActionData: function (containerEl, option) {
+      // option = 'individual' or 'all'
+      if (containerEl) {
+        const checkboxEl = containerEl.querySelector('input[type="checkbox"]');
+        const checkboxLabelEl = containerEl.querySelector('.el-checkbox__label');
+        const selectionsContainerEl = containerEl.closest('.selections-container');
+        const selectionsTitleEl = selectionsContainerEl.querySelector('.checkall-display-text');
+
+        // change true/false to checked/unchecked for readability
+        let checkedLabel = '';
+        if (checkboxEl) {
+          checkedLabel = checkboxEl.checked ? 'checked' : 'unchecked';
+        }
+
+        this.checkboxActionData = {
+          selectionsTitle: selectionsTitleEl ? selectionsTitleEl.innerText : '',
+          property: (checkboxEl && option !== 'all') ? checkboxEl.value : '',
+          label: checkboxLabelEl ? checkboxLabelEl.innerText : '',
+          checked: checkedLabel
+        };
+      } else {
+        // reset if no checkbox container found
+        this.checkboxActionData = {
+          selectionsTitle: '',
+          property: '',
+          label: '',
+          checked: '',
+        };
+      }
+    },
+    onCheckboxNativeChange: function (event) {
+      const checkboxContainerEl = event.target.closest('.checkbox-container');
+      this.setCheckboxActionData(checkboxContainerEl, 'individual');
+    },
+    onAllCheckboxNativeChange: function (event) {
+      const checkboxContainerEl = event.target.closest('.all-checkbox');
+      this.setCheckboxActionData(checkboxContainerEl, 'all');
+    },
     visibilityToggle: function (key, value) {
       this.$emit('changed', { key, value })
+      // emit event with checkbox data for tracking
+      if (key === this.checkboxActionData.property) {
+        // change true/false to checked/unchecked for readability
+        this.checkboxActionData.checked = value ? 'checked' : 'unchecked';
+      }
+      this.$emit('selections-data-changed', this.checkboxActionData);
     },
     handleCheckedItemsChange: function (value) {
       let checkedCount = value.length
@@ -100,6 +146,11 @@ export default {
         keys: this.selections.map((a) => a[this.identifierKey]),
         value: val,
       })
+      // emit event with checkbox data for tracking
+      this.checkboxActionData.property = this.identifierKey;
+      // change true/false to checked/unchecked for readability
+      this.checkboxActionData.checked = val ? 'checked' : 'unchecked';
+      this.$emit('selections-data-changed', this.checkboxActionData);
     },
     getBackgroundStyles: function (item) {
       if ('colour' in item && this.colourStyle === 'background') {
@@ -159,6 +210,12 @@ export default {
     return {
       checkedItems: [],
       checkAll: true,
+      checkboxActionData: {
+        selectionsTitle: '',
+        property: '',
+        label: '',
+        checked: '',
+      },
     }
   },
   mounted: function () {