@abi-software/flatmapvuer 0.4.1-beta.3 → 0.4.1

package/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.1-beta.3",
+  "version": "0.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
     "@abi-software/flatmap-viewer": {
-      "version": "2.3.2-b.4",
-      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.3.2-b.4.tgz",
-      "integrity": "sha512-2CNV160FBZZ0ERcaBwEJJERG1L4ZsWHnJuSkfeZDYbmX3HgeYBC9NaNwaYCVte2hyxUtlyzBAegRyTUUSZc5sA==",
+      "version": "2.3.3-b.4",
+      "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-2.3.3-b.4.tgz",
+      "integrity": "sha512-rJoASw3Ngj69LhuBsvKtIsU8brcFv0exBgz9EE+Cv4wSD8SUO02P81u9FE9giDOa9DGNGZT5gO4bqWqlNdbMow==",
       "requires": {
         "@babel/runtime": "^7.10.4",
         "@fortawesome/fontawesome-free": "^6.4.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.4.1-beta.3",
+  "version": "0.4.1",
   "license": "Apache-2.0",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
@@ -22,7 +22,7 @@
     "lint": "vue-cli-service lint"
   },
   "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",
     "css-element-queries": "^1.2.2",

package/src/App.vue

@@ -12,6 +12,13 @@
           <el-button @click="helpMode = !helpMode" size="mini">Help Mode</el-button>
           <el-button @click="saveSettings()" size="mini">Save Settings</el-button>
           <el-button :disabled="mapSettings.length === 0" @click="restoreSettings()" size="mini">Restore Settings</el-button>
+          <el-autocomplete class="search-box" placeholder="Search"
+            v-model="searchText"
+            :fetch-suggestions="fetchSuggestions"
+            @keyup.enter.native="search"
+            @select="search"
+            popper-class="autocomplete-popper">
+          </el-autocomplete>
         </el-row>
       </div>
       <el-button class="options-button" icon="el-icon-setting" slot="reference">Options</el-button>
@@ -32,12 +39,14 @@
 import Vue from "vue";
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
 import {
+  Autocomplete,
   Button,
   Col,
   Popover,
   Row,
 } from 'element-ui';
 import "./icons/mapicon-species-style.css";
+Vue.use(Autocomplete);
 Vue.use(Button);
 Vue.use(Col);
 Vue.use(Popover);
@@ -69,10 +78,34 @@ export default {
     },
     panZoomcallback: function(payload) {
       this.payload = payload
+    },
+    fetchSuggestions: function(term, cb) {
+      if (term === "") {
+        cb([]);
+      } else {
+        const suggestions = [];
+        const results = this.$refs.multi.getCurrentFlatmap().searchSuggestions(term);
+        results.__featureIds.forEach(id => {
+          const annotation = this.$refs.multi.getCurrentFlatmap().mapImp.annotation(id);
+          if (annotation && annotation.label)
+            suggestions.push(annotation.label);
+        });
+        const unique = new Set(suggestions);
+        suggestions.length = 0;
+        for (const item of unique) {
+          suggestions.push({"value": "\"" + item +"\""});
+        }
+        cb(suggestions);
+      }
+    },
+    search: function() {
+      console.log(this.searchText)
+      this.$refs.multi.getCurrentFlatmap().searchAndShowResult(this.searchText, true);
     }
   },
   data: function(){
     return {
+      searchText: "",
       featureInfo: true,
       searchable: true,
       pathControls: true,
@@ -87,7 +120,6 @@ export default {
         "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning:true}, 
         "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning:true},
         "Functional Connectivity": {taxo: "FunctionalConnectivity", displayWarning:true},
-        "digestive tract":{taxo: "digestive tract", displayWarning:true}
       },
       tooltipContent: undefined,
       tStyle: {
@@ -114,6 +146,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~element-ui/packages/theme-chalk/src/autocomplete";
 @import "~element-ui/packages/theme-chalk/src/button";
 @import "~element-ui/packages/theme-chalk/src/col";
 @import "~element-ui/packages/theme-chalk/src/popover";
@@ -134,6 +167,26 @@ export default {
   margin-top:120px;
 }
 
+.search-box {
+  margin-top: 2px;
+  height:28px;
+  ::v-deep .el-input__inner {
+    background-color: $background;
+    height:28px;
+    line-height:28px;
+    border: 1px solid rgb(144, 147, 153);
+    border-radius: 4px;
+    &:focus {
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+::v-deep .autocomplete-popper {
+  min-width:137px!important;
+  width: auto!important;
+}
+
 body {
   margin: 0px;
 }

package/src/components/FlatmapVuer.vue

@@ -13,7 +13,7 @@
       <div class="beta-popovers">
         <div>
           <el-popover
-            :content="isLegacy ? 'This is a legacy map, you may view the latest map instead.' : warningMessage"
+            :content="getWarningMessage"
             placement="right"
             :appendToBody="false"
             trigger="manual"
@@ -23,7 +23,7 @@
           ></el-popover>
           <i
             class="el-icon-warning warning-icon"
-            v-if="displayWarning && warningMessage"
+            v-if="displayWarning"
             @mouseover="showToolitip(6)"
             @mouseout="hideToolitip(6)"
             v-popover:warningPopover
@@ -163,6 +163,7 @@
             ref="systemsSelection"
             key="systemsSelection"
           />
+                    <!--
           <selections-group
             v-if="!isFC && centreLines && centreLines.length > 0"
             title="Nerves"
@@ -173,7 +174,6 @@
             ref="centrelinesSelection"
             key="centrelinesSelection"
           />
-          <!--
           <selections-group
             v-if="isFC && sckanDisplay && sckanDisplay.length > 0"
             title="SCKAN"
@@ -745,11 +745,12 @@ export default {
         const computed = getComputedStyle(elem);
         const padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
         const height = elem.clientHeight - padding;
-        this.pathwaysMaxHeight = height - 150;
+        this.pathwaysMaxHeight = height - 170;
       }
     },
     mapResize: function() {
       try {
+        this.computePathControlsMaximumHeight();
         if (this.mapImp) {
           this.mapImp.resize();
           this.showMinimap(this.displayMinimap);
@@ -757,7 +758,6 @@ export default {
               this.mapImp._minimap.resize();
           }
         }
-        this.computePathControlsMaximumHeight();
       } catch {
         console.error("Map resize error");
       }
@@ -812,7 +812,7 @@ export default {
               this.mapImp.showPopup(
                 searchResults.results[0].featureId,
                 searchResults.results[0].text,
-                {className: "custom-popup", positionAtLastClick: false }
+                { className: "custom-popup", positionAtLastClick: false, preserveSelection: true }
               )
             }
             return true;
@@ -878,10 +878,6 @@ export default {
       type: Boolean,
       default: false
     },
-    warningMessage: {
-      type: String,
-      default: "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress."
-    },
     isLegacy: {
       type: Boolean,
       default: false
@@ -892,7 +888,7 @@ export default {
     },
     latestChangesMessage: {
       type: String,
-      default: "Search now provide suggested terms. Add new legends. New tilesets. New female map. Improve upstream downstream information",
+      default: "Search now provide suggested terms. Add new legends. New tilesets. New female map. Improve upstream downstream information.",
     },
     /**
      * State containing state of the flatmap.
@@ -979,6 +975,16 @@ export default {
       deep: true
     }
   },
+  computed: {
+    getWarningMessage: function() {
+      if (this.isLegacy) {
+        return "This is a legacy map, you may view the latest map instead.";
+      } else if (this.isFC) {
+        return "Beta feature - The connectivity shown here is the subset of neurons from the neuron populations in ApiNATOMY models which are at the same spatial scale and level of granularity.";
+      }
+      return "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress.";
+    },
+  },
   mounted: function() {
     const flatmap = require("@abi-software/flatmap-viewer");
     this.mapManager = new flatmap.MapManager(this.flatmapAPI);

package/src/components/MultiFlatmapVuer.vue

@@ -33,7 +33,6 @@
       :entry="item.taxo"
       :biologicalSex="item.biologicalSex"
       :displayWarning="item.displayWarning"
-      :warningMessage="warningMessage"
       :displayLatestChanges="item.displayLatestChanges"
       :latestChangesMessage="item.latestChangesMessage"
       :isLegacy="item.isLegacy"
@@ -378,10 +377,6 @@ export default {
       type: Boolean,
       default: false
     },
-    warningMessage: {
-      type: String,
-      default: "Beta feature - This map is based on the connectivity of a rat. New connectivity and species specificity will be added as the SPARC program progress."
-    },
     availableSpecies: {
       type: Object,
       default: function() {