@abi-software/flatmapvuer 0.4.6 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -19,23 +19,29 @@
     "serve": "vue-cli-service serve --port 8082",
     "build": "vue-cli-service build --dest test_html --mode staging",
     "build-bundle": "vue-cli-service build --target lib --name flatmapvuer ./src/components/index.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish",
+    "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
+    "version": "npm run build-bundle;npm run changelog; git add CHANGELOG.md"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^2.3.2-b.4",
+    "@abi-software/flatmap-viewer": "^2.3.3-b.4",
     "@abi-software/svg-sprite": "^0.1.14",
-    "core-js": "^3.3.2",
+    "core-js": "^3.30.1",
     "css-element-queries": "^1.2.2",
     "current-script-polyfill": "^1.0.0",
     "element-ui": "^2.13.0",
     "file-loader": "^5.0.2",
     "lodash": "^4.17.21",
-    "vue": "^2.6.10"
+    "vue": "2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-service": "^4.5.13",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
+    "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^2.0.1",
@@ -43,7 +49,7 @@
     "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "2.6.14",
     "webpack-node-externals": "^2.5.2"
   },
   "eslintConfig": {

package/src/App.vue

@@ -163,7 +163,7 @@ export default {
   position:absolute;
 }
 
-.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+.maplibregl-ctrl-top-left .maplibregl-ctrl {
   margin-top:120px;
 }
 
@@ -191,7 +191,7 @@ body {
   margin: 0px;
 }
 
-.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+.maplibregl-ctrl-top-left .maplibregl-ctrl {
   margin-top:120px;
 }
 

package/src/components/FlatmapVuer.vue

@@ -525,24 +525,21 @@ export default {
     checkAndCreatePopups:  async function(data) {
       // Call flatmap database to get the connection data
       let results = await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
-      if(!results){
-        if(data.feature.hyperlinks && data.feature.hyperlinks.length > 0){
-          this.resourceForTooltip =  data.resource[0];
-          this.createTooltipFromNeuronCuration(data);
-        }
-      } else {
+      // The line below only creates the tooltip if some data was found on the path 
+      // result 0 is the connection, result 1 is the pubmed results from flatmap
+      if(results[0] || results[1] ||( data.feature.hyperlinks && data.feature.hyperlinks.length > 0)){
         this.resourceForTooltip =  data.resource[0];
         this.createTooltipFromNeuronCuration(data);
-      }
+      } 
     },
     popUpCssHacks: function() {
       // Below is a hack to remove flatmap tooltips while popup is open
       let ftooltip = document.querySelector(".flatmap-tooltip-popup");
       if (ftooltip) ftooltip.style.display = "none";
-      document.querySelector(".mapboxgl-popup-close-button").style.display =
+      document.querySelector(".maplibregl-popup-close-button").style.display =
         "block";
       this.$refs.tooltip.$el.style.display = "flex";
-      document.querySelector(".mapboxgl-popup-close-button").onclick = () => {
+      document.querySelector(".maplibregl-popup-close-button").onclick = () => {
         document.querySelector(".flatmap-tooltip-popup").style.display =
           "block";
       };
@@ -641,7 +638,7 @@ export default {
     },
     closeFlatmapHelpPopup: function() {
       this.$el
-        .querySelectorAll(".mapboxgl-popup-close-button")
+        .querySelectorAll(".maplibregl-popup-close-button")
         .forEach(item => {
           item.click();
         });
@@ -844,9 +841,10 @@ export default {
             if (displayLabel && 
               searchResults.results[0].featureId && 
               searchResults.results[0].text) {
+              const annotation = this.mapImp.annotation(searchResults.results[0].featureId);
               this.mapImp.showPopup(
                 searchResults.results[0].featureId,
-                searchResults.results[0].text,
+                annotation.label,
                 { className: "custom-popup", positionAtLastClick: false, preserveSelection: true }
               )
             }
@@ -1157,13 +1155,13 @@ export default {
   display: none;
 }
 
-::v-deep .mapboxgl-popup {
+::v-deep .maplibregl-popup {
   max-width: 300px !important;
 }
 
 ::v-deep .flatmap-tooltip-popup {
-  &.mapboxgl-popup-anchor-bottom {
-    .mapboxgl-popup-content {
+  &.maplibregl-popup-anchor-bottom {
+    .maplibregl-popup-content {
       margin-bottom: 12px;
       &::after,
       &::before {
@@ -1182,8 +1180,8 @@ export default {
       }
     }
   }
-  &.mapboxgl-popup-anchor-top {
-    .mapboxgl-popup-content {
+  &.maplibregl-popup-anchor-top {
+    .maplibregl-popup-content {
       margin-top: 18px;
       &::after,
       &::before {
@@ -1201,7 +1199,7 @@ export default {
       }
     }
   }
-  .mapboxgl-popup-content {
+  .maplibregl-popup-content {
     border-radius: 4px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     pointer-events: none;
@@ -1224,12 +1222,12 @@ export default {
       flex-shrink: 0;
     }
   }
-  .mapboxgl-popup-tip {
+  .maplibregl-popup-tip {
     display: none;
   }
 }
 
-::v-deep .mapboxgl-popup {
+::v-deep .maplibregl-popup {
   &.flatmap-marker-popup {
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
     pointer-events: auto;
@@ -1240,25 +1238,25 @@ export default {
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
 .selector:not(*:root),
 ::v-deep.flatmap-tooltip-popup {
-  .mapboxgl-popup-content::after {
+  .maplibregl-popup-content::after {
     top: 99.9%;
   }
 }
 
 ::v-deep .flatmap-tooltip-dialog {
-  .mapboxgl-popup-tip {
+  .maplibregl-popup-tip {
     display: none;
   }
 }
 
 ::v-deep .flatmap-marker-popup {
-  .mapboxgl-popup-content {
+  .maplibregl-popup-content {
     padding: 0px;
   }
 }
 
 ::v-deep .flatmapvuer-popover {
-  .mapboxgl-popup-close-button {
+  .maplibregl-popup-close-button {
     position: absolute;
     right: 0.5em;
     top: 0;
@@ -1359,7 +1357,7 @@ export default {
   @media (max-width: 1250px) {
     height: 125px !important;// important is needed here as we are over-riding the style set by the flatmap
     width: 180px !important;
-    >>> .maplibregl-canvas .mapboxgl-canvas {
+    >>> .maplibregl-canvas .maplibregl-canvas {
       height: 125px !important;
       width: 180px !important;
     }
@@ -1367,7 +1365,7 @@ export default {
   @media (min-width: 1251px) {
     height: 190px !important;
     width: 300px !important;
-    >>> .maplibregl-canvas .mapboxgl-canvas {
+    >>> .maplibregl-canvas .maplibregl-canvas {
       height: 190px !important;
       width: 300px !important;
     }
@@ -1448,10 +1446,10 @@ export default {
 }
 
 ::v-deep .flatmap-popup-popper {
-  .mapboxgl-popup-tip {
+  .maplibregl-popup-tip {
     border-bottom-color: $app-primary-color;
   }
-  .mapboxgl-popup-content {
+  .maplibregl-popup-content {
     padding: 6px 4px;
     font-size: 12px;
     color: rgb(48, 49, 51);
@@ -1459,7 +1457,7 @@ export default {
     border: 1px solid $app-primary-color;
     white-space: nowrap;
     min-width: unset;
-    .mapboxgl-popup-close-button {
+    .maplibregl-popup-close-button {
       display: none;
     }
   }
@@ -1476,7 +1474,7 @@ export default {
   }
 }
 
-::v-deep .mapboxgl-popup-content {
+::v-deep .maplibregl-popup-content {
   padding: 0px;
 }
 
@@ -1539,7 +1537,7 @@ export default {
   }
 }
 
-::v-deep .mapboxgl-canvas-container {
+::v-deep .maplibregl-canvas-container {
   canvas {
     outline: none;
   }
@@ -1571,10 +1569,10 @@ export default {
 }
 
 ::v-deep .custom-popup {
-  .mapboxgl-popup-tip {
+  .maplibregl-popup-tip {
     display: none;
   }
-  .mapboxgl-popup-content {
+  .maplibregl-popup-content {
     border-radius: 4px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     pointer-events: none;
@@ -1601,12 +1599,12 @@ export default {
       border-style: solid;
       flex-shrink: 0;
     }
-    .mapboxgl-popup-close-button {
+    .maplibregl-popup-close-button {
       display: none;
     }
   }
-  &.mapboxgl-popup-anchor-bottom {
-    .mapboxgl-popup-content {
+  &.maplibregl-popup-anchor-bottom {
+    .maplibregl-popup-content {
       margin-bottom: 12px;
       &::after,
       &::before {
@@ -1625,8 +1623,8 @@ export default {
       }
     }
   }
-  &.mapboxgl-popup-anchor-top {
-    .mapboxgl-popup-content {
+  &.maplibregl-popup-anchor-top {
+    .maplibregl-popup-content {
       margin-top: 18px;
       &::after,
       &::before {

package/src/components/Tooltip.vue

@@ -340,7 +340,7 @@ export default {
   }
 }
 
-.mapboxgl-popup-anchor-bottom {
+.maplibregl-popup-anchor-bottom {
   .tooltip-container {
     &::after, &::before {
       top: 100%;
@@ -357,7 +357,7 @@ export default {
   }
 }
 
-.mapboxgl-popup-anchor-top {
+.maplibregl-popup-anchor-top {
   .tooltip-container {
     &::after, &::before {
       top: -24px;

package/src/services/flatmapQueries.js

@@ -210,9 +210,9 @@ let FlatmapQueries = function(){
           resolve(false)
         })
       })
-      let prom2 = this.pubmedQueryOnIds(eventData)
+      let prom2 = await this.pubmedQueryOnIds(eventData)
       let results = await Promise.all([prom1, prom2])
-      return results.every(Boolean)
+      return results
   }
 
   this.connectivityExists = function(data){
@@ -344,21 +344,24 @@ let FlatmapQueries = function(){
       console.error('Error:', error)
     })
   }
-
+  // Note that this functin WILL run to the end, as it doesn not catch the second level of promises
   this.pubmedQueryOnIds = function(eventData){
-    const keastIds = eventData.resource
-    const source = eventData.feature.source
-    if(!keastIds || keastIds.length === 0) return
-    const sql = this.buildPubmedSqlStatement(keastIds)
-    return this.flatmapQuery(sql).then(data=>{
-      // Create pubmed url on paths if we have them
-      if (data.values.length > 0){
-        this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
-        return true
-      } else { // Create pubmed url on models
-        this.pubmedQueryOnModels(source).then(()=>{return true})
-      }
-      return false
+    return new Promise(resolve=>{
+      const keastIds = eventData.resource
+      const source = eventData.feature.source
+      if(!keastIds || keastIds.length === 0) return
+      const sql = this.buildPubmedSqlStatement(keastIds)
+      this.flatmapQuery(sql).then(data=>{
+        // Create pubmed url on paths if we have them
+        if (data.values.length > 0){
+          this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+          resolve(true)
+        } else { // Create pubmed url on models
+          this.pubmedQueryOnModels(source).then(result=>{
+            resolve(result)
+          })
+        }
+      })
     })
   }
 
@@ -366,10 +369,11 @@ let FlatmapQueries = function(){
     return this.flatmapQuery(this.buildPubmedSqlStatementForModels(source)).then(data=>{
       if (Array.isArray(data.values) && data.values.length > 0){
         this.urls = [this.pubmedSearchUrl(data.values.map(id=>this.stripPMIDPrefix(id[0])))]
+        return true
       } else {
         this.urls = [] // Clears the pubmed search button 
       } 
-      return
+      return false
     })
   }