@abi-software/flatmapvuer 1.3.2 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,8 +43,8 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "2.9.5",
-    "@abi-software/map-utilities": "1.0.0",
+    "@abi-software/flatmap-viewer": "3.1.4",
+    "@abi-software/map-utilities": "1.1.0",
     "@abi-software/sparc-annotation": "0.3.1",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -150,6 +150,7 @@ export default {
       //component.showPathwaysDrawer(false);
       if (this.consoleOn) console.log(taxon, id)
       //component.searchAndShowResult("heart");
+      // component.changeViewingMode('Annotation')
     },
     panZoomcallback: function (payload) {
       this.payload = payload
@@ -260,6 +261,10 @@ export default {
           iconClass: 'mapicon-icon_cat',
           displayWarning: true,
         },
+        Vagus: {
+          taxo: 'UBERON:1759',
+          displayWarning: true,
+        },
         Sample: { taxo: 'NCBITaxon:1', displayWarning: true },
         'Functional Connectivity': {
           taxo: 'FunctionalConnectivity',
@@ -282,8 +287,9 @@ export default {
       mapSettings: [],
       //flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
       //flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
-      //flatmapAPI: "https://mapcoe-demo.org/current/flatmap/v3/",
-      flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
+      flatmapAPI: "https://mapcore-demo.org/current/flatmap/v3/",
+      //flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
+      //flatmapAPI: 'https://mapcore-demo.org/curation/flatmap/',
       //flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
       //flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
       // flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",

package/src/components/FlatmapVuer.vue

@@ -54,7 +54,7 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showTooltip(6)" @mouseout="hideTooltip(6)">
+            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a
@@ -76,8 +76,8 @@ Please use `const` to assign meaningful names to them...
               <div
                 class="warning-icon"
                 v-if="displayWarning"
-                @mouseover="showTooltip(6)"
-                @mouseout="hideTooltip(6)"
+                @mouseover="showTooltip(7)"
+                @mouseout="hideTooltip(7)"
               >
                 <el-icon><el-icon-warning-filled /></el-icon>
                 <template v-if="isLegacy">
@@ -245,7 +245,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!disableUI"
+            v-show="!(disableUI || isCentreLine)"
           >
             <div
               class="pathway-container"
@@ -363,7 +363,7 @@ Please use `const` to assign meaningful names to them...
                 key="pathwaysSelection"
               />
               <selections-group
-                v-if="!isFC && taxonConnectivity && taxonConnectivity.length > 0"
+                v-if="taxonConnectivity && taxonConnectivity.length > 0"
                 title="Studied in"
                 labelKey="label"
                 identifierKey="taxon"
@@ -377,7 +377,7 @@ Please use `const` to assign meaningful names to them...
                 key="taxonSelection"
               />
               <selections-group
-                v-if="!isFC && centreLines && centreLines.length > 0"
+                v-if="!(isCentreLine || isFC)  && centreLines && centreLines.length > 0"
                 title="Nerves"
                 labelKey="label"
                 identifierKey="key"
@@ -437,19 +437,19 @@ Please use `const` to assign meaningful names to them...
           <el-row class="backgroundControl">
             <div style="margin-bottom: 2px;">
               <template
-                  v-for="(item, i) in viewingModes"
-                  :key="item + i"
+                  v-for="(value, key, index) in viewingModes"
+                  :key="key"
                 >
-                  <template v-if="item.name === viewingMode">
-                    <span class="viewing-mode-title"><b >{{ item.name }}</b></span>
+                  <template v-if="key === viewingMode">
+                    <span class="viewing-mode-title"><b >{{ key }}</b></span>
                   </template>
                   <template v-else>
-                    <span class="viewing-mode-unselected" @click="changeViewingMode(i)">{{ item.name }}</span>
+                    <span class="viewing-mode-unselected" @click="changeViewingMode(key)">{{ key }}</span>
                   </template>
               </template>
             </div>
             <el-row class="viewing-mode-description">
-              {{ viewingModes[viewingModeIndex].description}}
+              {{ viewingModes[viewingMode] }}
             </el-row>
           </el-row>
           <template v-if="viewingMode === 'Annotation' && userInformation">
@@ -757,8 +757,6 @@ export default {
     DrawToolbar
   },
   beforeCreate: function () {
-    this.mapManager = undefined
-    this.mapImp = undefined
     //The state watcher may triggered before
     //created causing issue, This flag will
     //resolve this issue.
@@ -1691,13 +1689,10 @@ export default {
      * Function triggered by viewing mode change.
      * (e.g., from 'Exploration' to 'Annotation')
      * All tooltips and popups currently showing on map will be closed
-     * when this function is triggered. Optional index can be provided, this will
-     * switch the provided view mode to the first index.
      */
-     changeViewingMode: function (newModeIndex=null) {
-      if (newModeIndex !== null) {
-        //this.viewingMode = this.viewingModes[newModeIndex].name
-        this.viewingModeIndex = newModeIndex
+    changeViewingMode: function (modeName) {
+      if (modeName) {
+        this.viewingMode = modeName
       }
       this.closeTooltip()
     },
@@ -2001,6 +1996,9 @@ export default {
         // this method is moved to sidebar connectivity info
         // const featureIds = [feature];
         // this.moveMap(featureIds);
+        if (this.featuresAlert) {
+          this.tooltipEntry['featuresAlert'] = this.featuresAlert;
+        }
         this.$emit('connectivity-info-open', this.tooltipEntry);
       }
       // If UI is not disabled,
@@ -2315,14 +2313,19 @@ export default {
      */
     onFlatmapReady: function () {
       // onFlatmapReady is used for functions that need to run immediately after the flatmap is loaded
-      this.sensor = new ResizeSensor(this.$refs.display, this.mapResize)
-      if (this.mapImp.options && this.mapImp.options.style === 'functional') {
+      this.sensor = markRaw(new ResizeSensor(this.$refs.display, this.mapResize))
+      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()
-      this.mapImp.enableCentrelines(false)
+      if (!this.isCentreLine) {
+        this.mapImp.enableCentrelines(false)
+      }
       //Disable layers for now
       //this.layers = this.mapImp.getLayers();
       this.processSystems(this.mapImp.getSystems())
@@ -2331,7 +2334,7 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
-      this.drawerOpen = true
+      this.drawerOpen = !this.isCentreLine      
       this.mapResize()
       this.handleMapClick();
       /**
@@ -2625,6 +2628,9 @@ export default {
   },
   data: function () {
     return {
+      sensor: null,
+      mapManager: undefined,
+      flatmapQueries: undefined,
       annotationEntry: {},
       //tooltip display has to be set to false until it is rendered
       //for the first time, otherwise it may display an arrow at a
@@ -2649,6 +2655,7 @@ export default {
       systems: [],
       taxonConnectivity: [],
       pathwaysMaxHeight: 1000,
+      tooltipWait: markRaw([]),
       hoverVisibilities: [
         { value: false, ref: 'markerPopover' }, // 0
         { value: false, ref: 'zoomInPopover' }, // 1
@@ -2670,6 +2677,7 @@ export default {
       helpModeActiveIndex: this.helpModeInitialIndex,
       yellowstar: yellowstar,
       isFC: false,
+      isCentreLine: false,
       inHelp: false,
       currentBackground: 'white',
       availableBackground: ['white', 'lightskyblue', 'black'],
@@ -2688,20 +2696,11 @@ export default {
       currentActive: '',
       selectedDrawnFeature: undefined, // Clicked drawn annotation
       currentHover: '',
-      viewingModeIndex: 0,
+      viewingMode: 'Exploration',
       viewingModes: {
-        0: {
-          name: 'Exploration',
-          description:'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources'
-        },
-        1: {
-          name: 'Neuron Connection',
-          description: 'Discover Neuron connections by selecting a neuron and viewing its associated network connections'
-        },
-        2: {
-          name: 'Annotation',
-          description: 'View internal identifiers of features'
-        }
+        'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
+        'Neuron Connection': 'Discover Neuron connections by selecting a neuron and viewing its associated network connections',
+        'Annotation': 'View internal identifiers of features'
       },
       drawnType: 'All tools',
       drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
@@ -2752,9 +2751,6 @@ export default {
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
-    viewingMode: function() {
-      return this.viewingModes[this.viewingModeIndex].name
-    },
   },
   watch: {
     entry: function () {
@@ -2812,10 +2808,9 @@ export default {
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
-    this.tooltipWait = []
     this.tooltipWait.length = this.hoverVisibilities.length
-    this.mapManager = new flatmap.MapManager(this.flatmapAPI)
-    this.flatmapQueries = new FlatmapQueries()
+    this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI))
+    this.flatmapQueries = markRaw(new FlatmapQueries())
     this.flatmapQueries.initialise(this.flatmapAPI)
     if (this.state) {
       //State is set and require to set the state

package/src/components/MultiFlatmapVuer.vue

@@ -87,7 +87,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { reactive } from 'vue'
+import { markRaw } from 'vue'
 import EventBus from './EventBus'
 import FlatmapVuer from './FlatmapVuer.vue'
 import * as flatmap from '@abi-software/flatmap-viewer'
@@ -120,12 +120,6 @@ export default {
     Popover,
     FlatmapVuer,
   },
-  beforeMount() {
-    //List for resolving the promise in initialise
-    //if initialise is called multiple times
-    this._resolveList = []
-    this._initialised = false
-  },
   mounted: function () {
     this.initialise()
     EventBus.on('onActionClick', (action) => {
@@ -160,7 +154,7 @@ export default {
                 // FIrst look through the uuid
                 const uuid = this.availableSpecies[key].uuid
                 if (uuid && data.map((e) => e.uuid).indexOf(uuid) > 0) {
-                  this.speciesList[key] = reactive(this.availableSpecies[key])
+                  this.speciesList[key] = this.availableSpecies[key]
                 } else {
                   for (let i = 0; i < data.length; i++) {
                     if (this.availableSpecies[key].taxo === data[i].taxon) {
@@ -170,11 +164,11 @@ export default {
                           data[i].biologicalSex ===
                             this.availableSpecies[key].biologicalSex
                         ) {
-                          this.speciesList[key] = reactive(this.availableSpecies[key])
+                          this.speciesList[key] = this.availableSpecies[key]
                           break
                         }
                       } else {
-                        this.speciesList[key] = reactive(this.availableSpecies[key])
+                        this.speciesList[key] = this.availableSpecies[key]
                         break
                       }
                     }
@@ -205,19 +199,19 @@ export default {
                   5
                 )
               }
-              this._initialised = true
+              this.initialised = true
               resolve()
               //Resolve all other promises resolve in the list
-              this._resolveList.forEach((other) => {
+              this.resolveList.forEach((other) => {
                 other()
               })
             })
-        } else if (this._initialised) {
+        } else if (this.initialised) {
           //resolve as it has been initialised
           resolve()
         } else {
           //resolve when the async initialisation is finished
-          this._resolveList.push(resolve)
+          this.resolveList.push(resolve)
         }
       })
     },
@@ -361,11 +355,11 @@ export default {
           if (state.species.slice(0, 6) === 'Legacy') name = state.species
           else name = name + ` ${state.species}`
         }
-        this.speciesList[name] = reactive({
+        this.speciesList[name] = {
           taxo: taxo,
           isLegacy: true,
           displayWarning: true,
-        })
+        }
         return {
           species: name,
           state: {
@@ -517,6 +511,14 @@ export default {
        */
       this.$emit('shown-map-tooltip');
     },
+    /**
+     * @vuese
+     * Function to change the view mode of the map.
+     */
+    changeViewingMode: function (modeName) {
+      let map = this.getCurrentFlatmap()
+      map.changeViewingMode(modeName)
+    },
   },
   props: {
     /**
@@ -720,6 +722,8 @@ export default {
       activeSpecies: undefined,
       speciesList: {},
       requireInitialisation: true,
+      resolveList: markRaw([]),
+      initialised: false,
     }
   },
   watch: {

package/src/components.d.ts

@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -24,7 +23,6 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
     MultiFlatmapVuer: typeof import('./components/MultiFlatmapVuer.vue')['default']
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']