Merge pull request ABI-Software#197 from akhuoa/feature/flatmap-api-u…

…pdate Flatmap-viewer API Updates
akhuoa · Nov 12, 2024 · 3e3a852 · 3e3a852
2 parents cd633d0 + 9d0895c
commit 3e3a852
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "3.1.9",
+    "@abi-software/flatmap-viewer": "^3.2.5",
     "@abi-software/map-utilities": "^1.1.2",
     "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",

diff --git a/src/App.vue b/src/App.vue
@@ -175,7 +175,8 @@ export default {
         const results = this.$refs.multi
           .getCurrentFlatmap()
           .searchSuggestions(term)
-        results.__featureIds.forEach((id) => {
+        const featureIds = results.__featureIds || results.featureIds;
+        featureIds.forEach((id) => {
           const annotation = this.$refs.multi
             .getCurrentFlatmap()
             .mapImp.annotation(id)
@@ -195,8 +196,12 @@ export default {
         .getCurrentFlatmap()
         .searchAndShowResult(this.searchText, true)
     },
-    onFlatmapChanged: function () {
+    onFlatmapChanged: function (activeSpecies) {
       this.helpMode = false;
+      // Update current flatmapImp after changing species
+      if (this.$refs.multi.$refs[activeSpecies][0].mapImp) {
+        window.flatmapImp = this.$refs.multi.$refs[activeSpecies][0].mapImp;
+      }
     },
     onHelpModeShowNext: function () {
       this.helpModeActiveItem += 1;

diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
@@ -257,7 +257,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!(disableUI || isCentreLine)"
+            v-show="!disableUI"
           >
             <div
               class="pathway-container"
@@ -388,17 +388,6 @@ Please use `const` to assign meaningful names to them...
                 ref="taxonSelection"
                 key="taxonSelection"
               />
-              <selections-group
-                v-if="!(isCentreLine || isFC)  && centreLines && centreLines.length > 0"
-                title="Nerves"
-                labelKey="label"
-                identifierKey="key"
-                :selections="centreLines"
-                @changed="centreLinesSelected"
-                @selections-data-changed="onSelectionsDataChanged"
-                ref="centrelinesSelection"
-                key="centrelinesSelection"
-              />
             </div>
             <div
               @click="toggleDrawer"
@@ -658,7 +647,7 @@ import {
 import flatmapMarker from '../icons/flatmap-marker'
 import {
   FlatmapQueries,
-  findTaxonomyLabel,
+  findTaxonomyLabels,
 } from '../services/flatmapQueries.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
@@ -1179,12 +1168,13 @@ export default {
      */
     processTaxon: function (flatmapAPI, taxonIdentifiers) {
       this.taxonConnectivity.length = 0
-      taxonIdentifiers.forEach((taxon) => {
-        findTaxonomyLabel(flatmapAPI, taxon).then((value) => {
-          const item = { taxon, label: value }
-          this.taxonConnectivity.push(item)
-        })
-      })
+      findTaxonomyLabels(this.mapImp, taxonIdentifiers).then((entityLabels) => {
+        if (entityLabels.length) {
+          entityLabels.forEach((entityLabel) => {
+            this.taxonConnectivity.push(entityLabel);
+          });
+        }
+      });
     },
     /**
      * @public
@@ -1225,9 +1215,6 @@ export default {
     resetView: function () {
       if (this.mapImp) {
         this.mapImp.resetMap()
-        if (this.$refs.centrelinesSelection) {
-          this.$refs.centrelinesSelection.reset()
-        }
         if (this.$refs.skcanSelection) {
           this.$refs.skcanSelection.reset()
         }
@@ -1262,18 +1249,6 @@ export default {
         this.mapImp.zoomOut()
       }
     },
-    /**
-     * @public
-     * Function to show or hide centrelines and nodes.
-     * The parameter ``payload`` is an object with a boolean property, ``value``,
-     * ``payload.value = true/false``.
-     * @arg {Object} `payload`
-     */
-    centreLinesSelected: function (payload) {
-      if (this.mapImp) {
-        this.mapImp.enableCentrelines(payload.value)
-      }
-    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -1314,7 +1289,7 @@ export default {
         let pathFeatures = paths.map((p) => this.mapImp.featureProperties(p))
 
         // Query the flatmap knowledge graph for connectivity, we use this to grab the origins
-        let connectivity = await this.flatmapQueries.queryForConnectivity(payload)
+        let connectivity = await this.flatmapQueries.queryForConnectivityNew(this.mapImp, payload)
 
         // Check and flatten the origins node graph
         let originsFlat = connectivity?.ids?.dendrites?.flat().flat()
@@ -1758,12 +1733,11 @@ export default {
         }
       } else {
         let results =
-          await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(data)
+          await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.mapImp, data)
         // 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
+        // the pubmed URLs are in knowledge response.references
         if (
-          results[0] ||
-          results[1] ||
+          (results && results[0]) ||
           (data.feature.hyperlinks && data.feature.hyperlinks.length > 0)
         ) {
           this.resourceForTooltip = data.resource[0]
@@ -1807,7 +1781,7 @@ export default {
      * @arg {Object} `data`
      */
     createTooltipFromNeuronCuration: async function (data) {
-      this.tooltipEntry = await this.flatmapQueries.createTooltipData(data)
+      this.tooltipEntry = await this.flatmapQueries.createTooltipData(this.mapImp, data)
       this.displayTooltip(data.resource[0])
     },
     /**
@@ -2346,15 +2320,10 @@ export default {
       console.log(this.mapImp.options)
       if (this.mapImp.options?.style === 'functional') {
         this.isFC = true
-      } else if (this.mapImp.options?.style === 'centreline') {
-        this.isCentreLine = true
       }
       this.mapImp.setBackgroundOpacity(1)
       this.backgroundChangeCallback(this.currentBackground)
       this.pathways = this.mapImp.pathTypes()
-      if (!this.isCentreLine) {
-        this.mapImp.enableCentrelines(false)
-      }
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
@@ -2363,7 +2332,7 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = !this.isCentreLine
+      this.drawerOpen = true;
       this.mapResize()
       this.handleMapClick();
       /**
@@ -2674,13 +2643,6 @@ export default {
           key: 'VALID',
         },
       ],
-      centreLines: [
-        {
-          label: 'Display Nerves',
-          key: 'centrelines',
-          enabled: false,
-        },
-      ],
       systems: [],
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
@@ -2706,7 +2668,6 @@ export default {
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
-      isCentreLine: false,
       inHelp: false,
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
@@ -2921,6 +2882,9 @@ export default {
   transform: translateX(0);
   transition: all var(--el-transition-duration);
   z-index: 99;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   &.open {
     transform: translateX(0);
@@ -3467,7 +3431,6 @@ export default {
   }
 }
 
-.open-drawer,
 .drawer-button {
   z-index: 8;
   width: 20px;
@@ -3477,18 +3440,6 @@ export default {
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
-}
-
-.open-drawer {
-  position: absolute;
-  left: 0px;
-  background-color: #f7faff;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-}
-
-.drawer-button {
-  float: left;
-  margin-top: calc(50% - 36px);
   background-color: #f9f2fc;
 
   i {