@abi-software/flatmapvuer 1.0.1 → 1.1.0-beta.0

package/src/components/ProvenancePopup.vue

@@ -15,6 +15,22 @@
     <div class="block" v-else>
       <div class="title">{{ entry.featureId }}</div>
     </div>
+    <div v-if="featuresAlert">
+      <span class="attribute-title">Alert</span>
+      <el-popover
+        width="250"
+        trigger="hover"
+        :teleported="false"
+        popper-class="popover-origin-help"
+      >
+        <template #reference>
+          <el-icon class="info"><el-icon-warning /></el-icon>
+        </template>
+        <span style="word-break: keep-all">
+          {{ featuresAlert }}
+        </span>
+      </el-popover>
+    </div>
     <div v-show="showDetails" class="hide" id="hide-path-info" @click="showDetails = false">
       Hide path information
       <el-icon><el-icon-arrow-up /></el-icon>
@@ -195,6 +211,7 @@ export default {
       }),
     },
   },
+  inject: ['getFeaturesAlert'],
   data: function () {
     return {
       controller: undefined,
@@ -212,6 +229,9 @@ export default {
     }
   },
   computed: {
+    featuresAlert() {
+      return this.getFeaturesAlert()
+    },
     resources: function () {
       let resources = []
       if (this.entry && this.entry.hyperlinks) {
@@ -315,8 +335,15 @@ export default {
   cursor: pointer;
 }
 
-.popover-origin-help {
+:deep(.popover-origin-help.el-popover) {
   text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #f3ecf6;
+    }
+  }
 }
 
 .info {

package/src/components/SelectionsGroup.vue

@@ -27,7 +27,10 @@
           :key="item[identifierKey]"
           :label="item[identifierKey]"
         >
-          <div class="checkbox-container">
+          <div class="checkbox-container" 
+            @mouseenter="checkboxMouseEnterEmit(item[identifierKey], true)"
+            @mouseleave="checkboxMouseEnterEmit(item[identifierKey], false)"
+            >
             <el-checkbox
               class="my-checkbox"
               :label="item[identifierKey]"
@@ -88,6 +91,11 @@ export default {
     visibilityToggle: function (key, value) {
       this.$emit('changed', { key, value })
     },
+    checkboxMouseEnterEmit: function (key, value) {
+      // 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
@@ -96,6 +104,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,

package/src/components/Tooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
     <template v-if="annotationDisplay">
-      <annotation-tool :annotationEntry="annotationEntry" />
+      <annotation-tool :annotationEntry="annotationEntry" @annotation="$emit('annotation', $event)" />
     </template>
     <template v-else>
       <provenance-popup :entry="entry" />

package/src/components.d.ts

@@ -8,8 +8,10 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
+    ConnectionDialog: typeof import('./components/ConnectionDialog.vue')['default']
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -17,8 +19,11 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
+    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
+    ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
     ElInput: typeof import('element-plus/es')['ElInput']

package/src/services/flatmapQueries.js

@@ -222,23 +222,36 @@ let FlatmapQueries = function () {
     this.origins = []
     this.components = []
     if (!keastIds || keastIds.length == 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])
+    return results
+  }
+
+  this.queryForConnectivity = function (keastIds, signal, processConnectivity=true) {
     const data = { sql: this.buildConnectivitySqlStatement(keastIds) }
-    let prom1 = new Promise((resolve) => {
-      fetch(`${this.flatmapApi}knowledge/query/`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-        signal: signal,
-      })
+    
+    const headers = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+      ...(signal ? { signal: signal } : {}), // add signal to header if it exists
+    }
+    return new Promise((resolve) => {
+      fetch(`${this.flatmapApi}knowledge/query/`, headers)
         .then((response) => response.json())
         .then((data) => {
           if (this.connectivityExists(data)) {
             let connectivity = JSON.parse(data.values[0][0])
-            this.processConnectivity(connectivity).then(() => {
-              resolve(true)
-            })
+            if (processConnectivity) {
+              this.processConnectivity(connectivity).then((processedConnectivity) => {
+                resolve(processedConnectivity)
+              })
+            }
+            else resolve(connectivity)
           } else {
             resolve(false)
           }
@@ -248,9 +261,6 @@ let FlatmapQueries = function () {
           resolve(false)
         })
     })
-    let prom2 = await this.pubmedQueryOnIds(eventData)
-    let results = await Promise.all([prom1, prom2])
-    return results
   }
 
   this.connectivityExists = function (data) {
@@ -266,7 +276,11 @@ let FlatmapQueries = function () {
     }
   }
 
-  this.createLabelFromNeuralNode = function (node, lookUp) {
+  this.createLabelFromNeuralNode = function (node, lookUp, isSingle=true) {
+    if (isSingle) {
+      return lookUp[node]
+    }
+
     let label = lookUp[node[0]]
     if (node.length === 2 && node[1].length > 0) {
       node[1].forEach((n) => {
@@ -315,14 +329,26 @@ let FlatmapQueries = function () {
         this.destinations = axons.map((a) =>
           this.createLabelFromNeuralNode(a, lookUp)
         )
+
         this.origins = dendrites.map((d) =>
-          this.createLabelFromNeuralNode(d, lookUp)
+          this.createLabelFromNeuralNode(d, lookUp, true)
         )
         this.components = components.map((c) =>
-          this.createLabelFromNeuralNode(c, lookUp)
+          this.createLabelFromNeuralNode(c, lookUp, false)
         )
         this.flattenAndFindDatasets(components, axons, dendrites)
-        resolve(true)
+        resolve({
+          ids: {
+            axons: axons,
+            dendrites: dendrites,
+            components: components,
+          },
+          labels: {
+            destinations: this.destinations,
+            origins: this.origins,
+            components: this.components,
+          }
+        })
       })
     })
   }
@@ -341,29 +367,6 @@ let FlatmapQueries = function () {
     return found.flat()
   }
 
-  this.findComponents = function (connectivity) {
-    let dnodes = connectivity.connectivity.flat() // get nodes from edgelist
-    let nodes = removeDuplicates(dnodes)
-
-    let found = []
-    let terminal = false
-    nodes.forEach((node) => {
-      terminal = false
-      // Check if the node is an destination or origin (note that they are labelled dendrite and axon as opposed to origin and destination)
-      if (inArray(connectivity.axons, node)) {
-        terminal = true
-      }
-      if (inArray(connectivity.dendrites, node)) {
-        terminal = true
-      }
-      if (!terminal) {
-        found.push(node)
-      }
-    })
-
-    return found
-  }
-
   this.stripPMIDPrefix = function (pubmedId) {
     return pubmedId.split(':')[1]
   }