@abi-software/flatmapvuer 1.6.0-beta.0 → 1.6.0-beta.2

package/src/components/MultiFlatmapVuer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="multi-container" ref="multiContainer">
-    <div style="position: absolute; z-index: 10" v-if="!disableUI">
+    <div style="position: absolute; z-index: 100" v-if="!disableUI">
       <div class="species-display-text">Species</div>
       <el-popover
         content="Select a species"
@@ -68,6 +68,7 @@
       :connectivityInfoSidebar="connectivityInfoSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-info-close="onConnectivityInfoClose"
+      @connectivity-graph-error="onConnectivityGraphError"
       @open-map="$emit('open-map', $event)"
       @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
@@ -273,6 +274,9 @@ export default {
     onConnectivityInfoOpen: function (entryData) {
       this.$emit('connectivity-info-open', entryData);
     },
+    onConnectivityGraphError: function (errorInfo) {
+      this.$emit('connectivity-graph-error', errorInfo);
+    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -538,7 +542,7 @@ export default {
      */
     minZoom: {
       type: Number,
-      default: 4,
+      default: 1,
     },
     /**
      * The option to create map on component mounted.
@@ -768,9 +772,6 @@ export default {
 }
 
 .select-box {
-  width: 120px;
-  border-radius: 4px;
-  border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
   color: rgb(48, 49, 51);
@@ -782,6 +783,27 @@ export default {
     padding-top: 0.25em;
   }
   :deep() {
+    .el-select__wrapper {
+      position: relative;
+      width: fit-content;
+      box-shadow: none;
+      border-radius: 4px;
+      border: 1px solid var(--el-border-color);
+      &.is-focused {
+        border-color: $app-primary-color;
+      }
+    }
+    .el-select__selection {
+      width: fit-content;
+      position: relative;
+    }
+    .el-select__placeholder {
+      position: relative;
+      top: auto;
+      transform: none;
+      min-width: 80px;
+      width: fit-content;
+    }
     .el-input {
       .el-input__wrapper{
         &is-focus,

package/src/components/SelectionsGroup.vue

@@ -42,7 +42,7 @@
           :key="item[identifierKey]"
           :label="item[identifierKey]"
         >
-          <div class="checkbox-container" 
+          <div class="checkbox-container"
             @mouseenter="checkboxMouseEnterEmit(item[identifierKey], true)"
             @mouseleave="checkboxMouseEnterEmit(item[identifierKey], false)"
             >
@@ -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
@@ -171,7 +170,7 @@ export default {
       this.checkedItems = val
         ? this.selections.map((a) => a[this.identifierKey])
         : []
-      
+
       this.$emit('checkAll', {
         keys: this.selections.map((a) => a[this.identifierKey]),
         value: val,
@@ -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'
     },
@@ -312,7 +338,7 @@ export default {
 
 :deep(.el-checkbox__label) {
   padding-left: 5px;
-  color: $app-primary-color;
+  color: inherit !important;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0px;
@@ -335,10 +361,6 @@ export default {
   margin-bottom: 0;
 }
 
-:deep(.el-checkbox__label) {
-  color: $app-primary-color !important;
-}
-
 .checkbox-row {
   width: 100%;
   top: 2px;

package/src/components/utilities.js

@@ -0,0 +1,9 @@
+const capitalise = term => {
+  if (term)
+    return term.charAt(0).toUpperCase() + term.slice(1);
+  return term;
+};
+
+export {
+  capitalise,
+};

package/src/services/flatmapQueries.js

@@ -8,6 +8,7 @@ const removeDuplicates = function (arrayOfAnything) {
 }
 
 const cachedLabels = {}
+const cachedTaxonLabels = [];
 
 const findTaxonomyLabel = async function (flatmapAPI, taxonomy) {
   if (cachedLabels && cachedLabels.hasOwnProperty(taxonomy)) {
@@ -35,6 +36,38 @@ const findTaxonomyLabel = async function (flatmapAPI, taxonomy) {
   })
 }
 
+const findTaxonomyLabels = async function (mapImp, taxonomies) {
+  const intersectionTaxonomies = taxonomies.filter((taxonomy) =>
+    cachedTaxonLabels.some((obj) => obj.taxon === taxonomy)
+  );
+
+  const foundCachedTaxonLabels = cachedTaxonLabels.filter((obj) =>
+    intersectionTaxonomies.includes(obj.taxon)
+  );
+
+  const leftoverTaxonomies = taxonomies.filter((taxonomy) =>
+    !intersectionTaxonomies.includes(taxonomy)
+  );
+
+  if (!leftoverTaxonomies.length) {
+    return foundCachedTaxonLabels;
+  } else {
+    const entityLabels = await mapImp.queryLabels(leftoverTaxonomies);
+    if (entityLabels.length) {
+      entityLabels.forEach((entityLabel) => {
+        let { entity: taxon, label } = entityLabel;
+        if (label === 'Mammalia') {
+          label = 'Mammalia not otherwise specified'
+        }
+        const item = { taxon, label };
+        foundCachedTaxonLabels.push(item);
+        cachedTaxonLabels.push(item);
+      });
+      return foundCachedTaxonLabels;
+    }
+  }
+}
+
 const inArray = function (ar1, ar2) {
   if (!ar1 || !ar2) return false
   let as1 = JSON.stringify(ar1)
@@ -54,7 +87,7 @@ let FlatmapQueries = function () {
     this.lookUp = []
   }
 
-  this.createTooltipData = async function (eventData) {
+  this.createTooltipData = async function (mapImp, eventData) {
     let hyperlinks = []
     if (
       eventData.feature.hyperlinks &&
@@ -67,13 +100,12 @@ let FlatmapQueries = function () {
     let taxonomyLabel = undefined
     if (eventData.provenanceTaxonomy) {
       taxonomyLabel = []
-      for (let i = 0; eventData.provenanceTaxonomy.length > i; i++) {
-        taxonomyLabel.push(
-          await findTaxonomyLabel(
-            this.flatmapAPI,
-            eventData.provenanceTaxonomy[i]
-          )
-        )
+      const entityLabels = await findTaxonomyLabels(mapImp, eventData.provenanceTaxonomy);
+      if (entityLabels.length) {
+        entityLabels.forEach((entityLabel) => {
+          const { label } = entityLabel;
+          taxonomyLabel.push(label);
+        });
       }
     }
 
@@ -104,33 +136,22 @@ let FlatmapQueries = function () {
     return labelList
   }
 
-  this.createLabelLookup = function (uberons) {
-    return new Promise((resolve) => {
+  this.createLabelLookup = function (mapImp, uberons) {
+    return new Promise(async (resolve) => {
       let uberonMap = {}
       this.uberons = []
-      const data = { sql: this.buildLabelSqlStatement(uberons) }
-      fetch(`${this.flatmapApi}knowledge/query/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      })
-        .then((response) => response.json())
-        .then((payload) => {
-          const entity = payload.keys.indexOf('entity')
-          const label = payload.keys.indexOf('label')
-          if (entity > -1 && label > -1) {
-            payload.values.forEach((pair) => {
-              uberonMap[pair[entity]] = pair[label]
-              this.uberons.push({
-                id: pair[entity],
-                name: pair[label],
-              })
-            })
-          }
-          resolve(uberonMap)
-        })
+      const entityLabels = await findTaxonomyLabels(mapImp, uberons);
+      if (entityLabels.length) {
+        entityLabels.forEach((entityLabel) => {
+          const { taxon: entity, label } = entityLabel;
+          uberonMap[entity] = label;
+          this.uberons.push({
+            id: entity,
+            name: label,
+          })
+        });
+        resolve(uberonMap)
+      }
     })
   }
 
@@ -209,7 +230,7 @@ let FlatmapQueries = function () {
     return found
   }
 
-  this.retrieveFlatmapKnowledgeForEvent = async function (eventData) {
+  this.retrieveFlatmapKnowledgeForEvent = async function (mapImp, eventData) {
     // check if there is an existing query
     if (this.controller) this.controller.abort()
 
@@ -221,15 +242,58 @@ let FlatmapQueries = function () {
     this.destinations = []
     this.origins = []
     this.components = []
-    if (!keastIds || keastIds.length == 0) return
+    this.urls = []
+    if (!keastIds || keastIds.length == 0 || !keastIds[0]) return
 
-    let prom1 = this.queryForConnectivity(keastIds, signal) // This on returns a promise so dont need 'await'
-    let prom2 = await this.pubmedQueryOnIds(eventData)
-    let results = await Promise.all([prom1, prom2])
+    let prom1 = this.queryForConnectivityNew(mapImp, keastIds, signal) // This on returns a promise so dont need 'await'
+    // let prom2 = await this.pubmedQueryOnIds(eventData)
+    let results = await Promise.all([prom1])
     return results
   }
 
-  this.queryForConnectivity = function (keastIds, signal, processConnectivity=true) {
+  this.queryForConnectivityNew = function (mapImp, keastIds, signal, processConnectivity=true) {
+    return new Promise((resolve) => {
+      mapImp.queryKnowledge(keastIds[0])
+        .then((response) => {
+          if (this.checkConnectivityExists(response)) {
+            let connectivity = response;
+            if (processConnectivity) {
+              this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
+                // response.references is publication urls
+                if (response.references) {
+                  // with publications
+                  this.getURLsForPubMed(response.references).then((urls) => {
+                    // TODO: if empty urls array is returned,
+                    // the urls are not on PubMed.
+                    // Those urls, response.references, will be shown in another way.
+                    this.urls = urls;
+                    resolve(processedConnectivity)
+                  })
+                } else {
+                  // without publications
+                  resolve(processedConnectivity)
+                }
+              })
+            }
+            else resolve(connectivity)
+          } else {
+            resolve(false)
+          }
+        })
+        .catch((error) => {
+          if (error.name === 'AbortError') {
+            // This error is from AbortController's abort method.
+          } else {
+            // console.error('Error:', error)
+            // TODO: to update after queryKnowledge method update
+            console.warn(`Unable to get the knowledge for the entity ${keastIds[0]}.`)
+          }
+          resolve(false)
+        })
+    })
+  }
+
+  this.queryForConnectivity = function (mapImp, keastIds, signal, processConnectivity=true) {
     const data = { sql: this.buildConnectivitySqlStatement(keastIds) }
     const headers = {
       method: 'POST',
@@ -246,7 +310,7 @@ let FlatmapQueries = function () {
           if (this.connectivityExists(data)) {
             let connectivity = JSON.parse(data.values[0][0])
             if (processConnectivity) {
-              this.processConnectivity(connectivity).then((processedConnectivity) => {
+              this.processConnectivity(mapImp, connectivity).then((processedConnectivity) => {
                 resolve(processedConnectivity)
               })
             }
@@ -266,6 +330,10 @@ let FlatmapQueries = function () {
     })
   }
 
+  this.checkConnectivityExists = function (data) {
+    return data && data.connectivity?.length;
+  };
+
   this.connectivityExists = function (data) {
     if (
       data.values &&
@@ -336,7 +404,7 @@ let FlatmapQueries = function () {
     )
   }
 
-  this.processConnectivity = function (connectivity) {
+  this.processConnectivity = function (mapImp, connectivity) {
     return new Promise((resolve) => {
       // Filter the origin and destinations from components
       let components = this.findComponents(connectivity)
@@ -349,7 +417,7 @@ let FlatmapQueries = function () {
       let conIds = this.findAllIdsFromConnectivity(connectivity)
 
       // Create readable labels from the nodes. Setting this to 'this.origins' updates the display
-      this.createLabelLookup(conIds).then((lookUp) => {
+      this.createLabelLookup(mapImp, conIds).then((lookUp) => {
         this.destinations = axons.map((a) =>
           this.createLabelFromNeuralNode(a, lookUp)
         )
@@ -500,7 +568,11 @@ let FlatmapQueries = function () {
 
   this.getURLsForPubMed = function (data) {
     return new Promise((resolve) => {
-      const ids = data.values.map((id) => this.extractPublicationIdFromURLString(id[0]))
+      const ids = data.map((id) =>
+        (typeof id === 'object') ?
+        this.extractPublicationIdFromURLString(id[0]) :
+        this.extractPublicationIdFromURLString(id)
+      )
       this.convertPublicationIds(ids).then((pmids) => {
         if (pmids.length > 0) {
           const transformedIDs = pmids.join()
@@ -552,7 +624,7 @@ let FlatmapQueries = function () {
       this.flatmapQuery(sql).then((data) => {
         // Create pubmed url on paths if we have them
         if (data.values.length > 0) {
-           this.getURLsForPubMed(data).then((urls) => {
+           this.getURLsForPubMed(data.values).then((urls) => {
             this.urls = urls
             if (urls.length) {
               resolve(true)
@@ -579,7 +651,7 @@ let FlatmapQueries = function () {
       this.buildPubmedSqlStatementForModels(source)
     ).then((data) => {
       if (Array.isArray(data.values) && data.values.length > 0) {
-        this.getURLsForPubMed(data).then((urls) => {
+        this.getURLsForPubMed(data.values).then((urls) => {
           this.urls = urls
           return true
         })
@@ -602,4 +674,4 @@ let FlatmapQueries = function () {
   }
 }
 
-export { FlatmapQueries, findTaxonomyLabel }
+export { FlatmapQueries, findTaxonomyLabel, findTaxonomyLabels }