@abi-software/flatmapvuer 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

package/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

package/src/components/AnnotationTool.vue

@@ -67,7 +67,7 @@
                 <strong class="sub-title">Suggest changes:</strong>
               </el-row>
               <el-row class="dialog-text">
-                <strong>Evidvence:</strong>
+                <strong>Evidence:</strong>
               </el-row>
               <el-row v-for="(value, index) in evidence" :key="value">
                 <el-col :span="20">

package/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')
     },
   },

package/src/components/FlatmapVuer.vue

@@ -205,6 +205,7 @@
         placement="right"
         :teleported="false"
         trigger="manual"
+        :offset="-18"
         popper-class="flatmap-popper"
         :visible="hoverVisibilities[4].value"
         ref="checkBoxPopover"
@@ -225,10 +226,12 @@
               <el-popover
                 content="Location of the featured dataset"
                 placement="right"
-                :teleported="false"
-                trigger="hover"
-                popper-class="flatmap-popper popper-bump-right"
-                :visible="hoverVisibilities[9].value"
+                :teleported="true"
+                trigger="manual"
+                width="max-content"
+                :offset="-10"
+                popper-class="flatmap-popper flatmap-teleport-popper"
+                :visible="hoverVisibilities[9].value && showStarInLegend"
                 ref="featuredMarkerPopover"
               >
                 <template #reference>
@@ -237,6 +240,8 @@
                     v-popover:featuredMarkerPopover
                     class="yellow-star-legend"
                     v-html="yellowstar"
+                    @mouseover="showToolitip(9)"
+                    @mouseout="hideToolitip(9)"
                   ></div>
                 </template>
               </el-popover>
@@ -245,8 +250,9 @@
                 content="Find these markers for data"
                 placement="right"
                 :teleported="false"
+                width="max-content"
                 trigger="manual"
-                popper-class="flatmap-popper popper-bump-right"
+                popper-class="flatmap-popper"
                 :visible="hoverVisibilities[5].value"
                 ref="markerPopover"
               >
@@ -276,6 +282,7 @@
                 identifierKey="key"
                 :selections="centreLines"
                 @changed="centreLinesSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 ref="centrelinesSelection"
                 key="centrelinesSelection"
               />
@@ -287,6 +294,7 @@
                   identifierKey="key"
                   :selections="sckanDisplay"
                   @changed="sckanSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllSCKAN"
                   ref="skcanSelection"
                   key="skcanSelection"
@@ -298,6 +306,7 @@
                   identifierKey="id"
                   :selections="layers"
                   @changed="layersSelected"
+                  @selections-data-changed="onSelectionsDataChanged"
                   @checkAll="checkAllLayers"
                   ref="layersSelection"
                   key="layersSelection"
@@ -310,6 +319,7 @@
                 identifierKey="taxon"
                 :selections="taxonConnectivity"
                 @changed="taxonsSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllTaxons"
                 ref="taxonSelection"
                 key="taxonSelection"
@@ -322,6 +332,7 @@
                 colourStyle="line"
                 :selections="pathways"
                 @changed="pathwaysSelected"
+                @selections-data-changed="onSelectionsDataChanged"
                 @checkAll="checkAllPathways"
                 ref="pathwaysSelection"
                 key="pathwaysSelection"
@@ -801,6 +812,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
@@ -1180,11 +1194,16 @@ export default {
      */
     setHelpMode: function (helpMode) {
       if (helpMode) {
-        this.inHelp = true
-        this.hoverVisibilities.forEach((item) => {
-          item.value = true
-        })
-        this.openFlatmapHelpPopup()
+        // because some tooltips are inside drawer
+        this.drawerOpen = true;
+        // wait for CSS transition
+        setTimeout(() => {
+          this.inHelp = true;
+          this.hoverVisibilities.forEach((item) => {
+            item.value = true;
+          });
+          this.openFlatmapHelpPopup();
+        }, 300);
       } else {
         this.inHelp = false
         this.hoverVisibilities.forEach((item) => {
@@ -1825,7 +1844,7 @@ export default {
     },
     helpMode: function (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.setHelpMode(val)
+        this.setHelpMode(newVal)
       }
     },
     state: {
@@ -1878,6 +1897,14 @@ export default {
   font-size: 25px;
 }
 
+.warning-icon,
+.latest-changesicon {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  gap: 5px;
+}
+
 .warning-icon {
   color: $warning;
 
@@ -1902,6 +1929,7 @@ export default {
 }
 
 .latest-changesicon {
+  margin-top: 5px;
   color: $success;
 
   &:hover {
@@ -1923,7 +1951,7 @@ export default {
 .pathway-location {
   position: absolute;
   bottom: 0px;
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.open {
     left: 0px;
   }
@@ -1950,8 +1978,7 @@ export default {
   background: #ffffff;
   overflow-x: hidden;
   scrollbar-width: thin;
-
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.open {
     opacity: 1;
     position: relative;
@@ -1972,11 +1999,15 @@ export default {
 }
 
 .flatmap-marker-help {
-  display: inline-block;
-}
+  display: block;
+  width: max-content;
+  margin: 0.5rem;
 
-:deep(.popper-bump-right) {
-  left: 30px;
+  :deep(.flatmap-marker svg) {
+    display: block;
+    width: 28px;
+    height: 28px;
+  }
 }
 
 .el-dropdown-link {
@@ -2179,14 +2210,19 @@ export default {
 }
 
 .yellow-star-legend {
-  width: 130px;
-  cursor: pointer;
+  display: block;
+  width: max-content;
+  cursor: default;
+
+  :deep(svg) {
+    display: block;
+  }
 }
 
 .settings-group {
   bottom: 16px;
   position: absolute;
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.open {
     left: 322px;
   }
@@ -2306,7 +2342,7 @@ export default {
       width: 300px !important;
     }
   }
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.shrink {
     transform: scale(0.5);
     transform: scale(0.5);
@@ -2323,7 +2359,7 @@ export default {
   width: 20px;
   height: 14px;
   z-index: 9;
-  transition: all 1s ease;
+  transition: all var(--el-transition-duration);
   &.shrink {
     transform: rotate(0deg);
   }
@@ -2443,7 +2479,6 @@ export default {
     font-weight: 600;
     margin-top: 12px;
     color: $app-primary-color;
-    transition-delay: 0.9s;
   }
   &.open {
     i {
@@ -2598,4 +2633,24 @@ export default {
   --el-color-primary-dark-2: var(--el-color-primary);
 }
 
-</style>
+.flatmap-teleport-popper {
+  &.flatmap-popper.el-popper {
+    padding: 6px 4px;
+    font-family: Asap, sans-serif;
+    font-size: 12px;
+    color: rgb(48, 49, 51);
+    background-color: #f3ecf6;
+    border: 1px solid $app-primary-color;
+    white-space: nowrap;
+    min-width: unset;
+
+    .el-popper__arrow {
+      &:before {
+        border-color: $app-primary-color;
+        background-color: #f3ecf6;
+      }
+    }
+  }
+}
+
+</style>

package/src/components/MultiFlatmapVuer.vue

@@ -6,7 +6,8 @@
         content="Select a species"
         placement="right"
         trigger="manual"
-        popper-class="flatmap-popper right-popper"
+        popper-class="flatmap-popper flatmap-teleport-popper right-popper"
+        width="max-content"
         :visible="helpMode"
         :teleported="false"
         ref="selectPopover"
@@ -62,8 +63,9 @@
          * @arg $event
          */
         $emit('open-map', $event)"
+      @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
-      :helpMode="helpMode"
+      :helpMode="activeSpecies == key && helpMode"
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
@@ -120,6 +122,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 +255,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.
@@ -729,4 +743,4 @@ export default {
   --el-color-primary: #8300BF;
 }
 
-</style>
+</style>

package/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 () {

package/src/icons/yellowstar.js

@@ -1,5 +1,5 @@
 export default '<svg width="195px" height="24px" viewBox="0 0 200 24" fill="yellow">' +
   '<path d="M22.0748 3.25583C22.4141 2.42845 23.5859 2.42845 23.9252 3.25583L25.6493 7.45955C25.793 7.80979 26.1221 8.04889 26.4995 8.07727L31.0303 8.41798C31.922 8.48504 32.2841 9.59942 31.6021 10.1778L28.1369 13.1166C27.8482 13.3614 27.7225 13.7483 27.8122 14.1161L28.8882 18.5304C29.1 19.3992 28.152 20.0879 27.3912 19.618L23.5255 17.2305C23.2034 17.0316 22.7966 17.0316 22.4745 17.2305L18.60881 19.618C17.84796 20.0879 16.9 19.3992 17.1118 18.5304L18.18785 14.1161C18.2775 13.7483 18.1518 13.3614 17.86309 13.1166L14.3979 10.1778C13.71588 9.59942 14.07796 8.48504 14.96971 8.41798L19.50046 8.07727C19.87794 8.04889 20.20704 7.80979 20.35068 7.45955L22.0748 3.25583Z" stroke="#000000" stroke-width="2"/>' +
   // Adjusting the x attribute and adding padding for the text element
-  '<text x="42" y="50%" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#000000">Featured dataset marker</text>' +
+  '<text x="47" y="52%" style="white-space: pre" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#333333">Featured dataset marker</text>' +
   '</svg>'