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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.6.2-beta.3",
+  "version": "1.6.2",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -43,7 +43,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/flatmap-viewer": "^3.2.8",
+    "@abi-software/flatmap-viewer": "^3.2.10",
     "@abi-software/map-utilities": "^1.2.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/components/FlatmapVuer.vue

@@ -260,7 +260,7 @@ Please use `const` to assign meaningful names to them...
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
-            v-show="!disableUI && requiresDrawer"
+            v-show="!disableUI"
           >
             <div
               class="pathway-container"
@@ -270,27 +270,27 @@ Please use `const` to assign meaningful names to them...
             >
               <svg-legends v-if="!isFC" class="svg-legends-container" />
               <template v-if="showStarInLegend">
-                <el-popover
-                  content="Location of the featured dataset"
-                  placement="right"
-                  :teleported="true"
-                  trigger="manual"
-                  width="max-content"
-                  :offset="-10"
-                  popper-class="flatmap-popper flatmap-teleport-popper"
-                  :visible="hoverVisibilities[9].value"
-                  ref="featuredMarkerPopover"
-                >
-                  <template #reference>
-                    <div
-                      v-popover:featuredMarkerPopover
-                      class="yellow-star-legend"
-                      v-html="yellowstar"
-                      @mouseover="showTooltip(9)"
-                      @mouseout="hideTooltip(9)"
-                    ></div>
-                  </template>
-                </el-popover>
+              <el-popover
+                content="Location of the featured dataset"
+                placement="right"
+                :teleported="true"
+                trigger="manual"
+                width="max-content"
+                :offset="-10"
+                popper-class="flatmap-popper flatmap-teleport-popper"
+                :visible="hoverVisibilities[9].value"
+                ref="featuredMarkerPopover"
+              >
+                <template #reference>
+                  <div
+                    v-popover:featuredMarkerPopover
+                    class="yellow-star-legend"
+                    v-html="yellowstar"
+                    @mouseover="showTooltip(9)"
+                    @mouseout="hideTooltip(9)"
+                  ></div>
+                </template>
+              </el-popover>
               </template>
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
@@ -1835,7 +1835,7 @@ export default {
         }
 
         // highlight all available features
-        this.mapImp.selectFeatures(featuresToHighlight);
+        this.mapImp.zoomToFeatures(featuresToHighlight, { noZoomIn: true });
       }
     },
     emitConnectivityGraphError: function (errorData) {
@@ -2042,11 +2042,7 @@ export default {
             isPathwayContainer(parentElement) ||
             isPathwayContainer(nextElementSibling)
           ) {
-            if (this.requiresDrawer) {
-              this.drawerOpen = true;
-            } else {
-              this.helpModeActiveIndex += 1;
-            }
+            this.drawerOpen = true;
           }
         } else {
           // skip the unavailable tooltips
@@ -2487,7 +2483,7 @@ export default {
           }
         }
 
-        let promise1 = this.mapManagerRef.loadMap(
+        let promise1 = this.mapManager.loadMap(
           identifier,
           this.$refs.display,
           this.eventCallback(),
@@ -2572,6 +2568,7 @@ export default {
       this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
+      this.drawerOpen = true;
       this.mapResize()
       this.handleMapClick();
       this.setInitMapState();
@@ -2834,14 +2831,6 @@ export default {
       type: Object,
       default: undefined,
     },
-    /**
-     * Flatmap's Map Manager to use as single Map Manager
-     * if the FlatmapVuer is loaded from MultiFlatmapVuer.
-     */
-    mapManager: {
-      type: Object,
-      default: undefined,
-    },
     /**
      * Specify the endpoint of the flatmap server.
      */
@@ -2889,7 +2878,7 @@ export default {
   data: function () {
     return {
       sensor: null,
-      mapManagerRef: undefined,
+      mapManager: undefined,
       flatmapQueries: undefined,
       annotationEntry: {},
       //tooltip display has to be set to false until it is rendered
@@ -3009,27 +2998,6 @@ export default {
     isValidDrawnCreated: function () {
       return Object.keys(this.drawnCreatedEvent).length > 0
     },
-    requiresDrawer: function() {
-      if (this.loading) {
-        this.drawerOpen = false
-        return false
-      }
-      if (!this.isFC) {
-        this.drawerOpen = true
-        return true
-      } else {
-        if ((this.systems?.length > 0) ||
-          (this.containsAlert && this.alertOptions) ||
-          (this.pathways?.length > 0) ||
-          (this.taxonConnectivity?.length > 0)
-        ) {
-          this.drawerOpen = true
-          return true
-        }
-      }
-      this.drawerOpen = false
-      return true
-    }
   },
   watch: {
     entry: function () {
@@ -3051,7 +3019,7 @@ export default {
     state: {
       handler: function (state, oldVal) {
         if (state !== oldVal) {
-          if (this.mapManagerRef) {
+          if (this.mapManager) {
             this.setState(state)
           } else {
             //this component has not been mounted yet
@@ -3120,22 +3088,11 @@ export default {
       }
     }
   },
-  created: function () {
-    if (this.mapManager) {
-      this.mapManagerRef = this.mapManager;
-    } else {
-      this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
-      /**
-       * The event emitted after a new mapManager is loaded.
-       * This mapManager can be used to create new flatmaps.
-       */
-      this.$emit('mapmanager-loaded', this.mapManagerRef);
-    }
-  },
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
     this.backgroundIconRef = shallowRef(this.$refs.backgroundIconRef)
     this.tooltipWait.length = this.hoverVisibilities.length
+    this.mapManager = markRaw(new flatmap.MapManager(this.flatmapAPI))
     this.flatmapQueries = markRaw(new FlatmapQueries())
     this.flatmapQueries.initialise(this.flatmapAPI)
     if (this.state) {
@@ -3232,7 +3189,6 @@ export default {
 
 .svg-legends-container {
   width: 70%;
-  min-width:183px;
   height: auto;
   position: relative;
   max-height: 140px;

package/src/components/MultiFlatmapVuer.vue

@@ -83,7 +83,6 @@
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
       style="height: 100%"
-      :mapManager="mapManagerRef"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
     />
@@ -125,9 +124,6 @@ export default {
     Popover,
     FlatmapVuer,
   },
-  created: function () {
-    this.loadMapManager();
-  },
   mounted: function () {
     this.initialise()
     EventBus.on('onActionClick', (action) => {
@@ -223,23 +219,6 @@ export default {
         }
       })
     },
-    /**
-     * Function to load `mapManager` to create flatmap.
-     */
-    loadMapManager: function () {
-      if (!this.mapManagerRef) {
-        if (this.mapManager) {
-          this.mapManagerRef = this.mapManager;
-        } else {
-          this.mapManagerRef = markRaw(new flatmap.MapManager(this.flatmapAPI));
-          /**
-           * The event emitted after a new mapManager is loaded.
-           * This mapManager can be used to create new flatmaps.
-           */
-          this.$emit('mapmanager-loaded', this.mapManagerRef);
-        }
-      }
-    },
     /**
      * @public
      * Function to emit ``resource-selected`` event with provided ``resource``.
@@ -431,11 +410,12 @@ export default {
             //uuid is in the state but should be checked if it is the latest map
             //for that taxon
             return new Promise(() => {
+              const mapManager = new flatmap.MapManager(this.flatmapAPI)
               //mapManager.findMap_ is an async function so we need to wrap this with a promise
               const identifier = { taxon: mapState.entry }
               if (mapState.biologicalSex)
                 identifier['biologicalSex'] = mapState.biologicalSex
-              this.mapManagerRef
+              mapManager
                 .findMap_(identifier)
                 .then((map) => {
                   if (map.uuid !== mapState.uuid) {
@@ -481,9 +461,6 @@ export default {
      */
     setState: function (state) {
       if (state) {
-        // Update undefined mapManagerRef for setState happens before created event
-        this.loadMapManager();
-
         //Update state if required
         this.updateState(state).then((currentState) => {
           this.initialise().then(() => {
@@ -719,14 +696,6 @@ export default {
       type: Object,
       default: undefined,
     },
-    /**
-     * Flatmap's Map Manager to use as single Map Manager
-     * when the value is provided.
-     */
-    mapManager: {
-      type: Object,
-      default: undefined,
-    },
     /**
      * Specify the endpoint of the flatmap server.
      */
@@ -770,7 +739,6 @@ export default {
       requireInitialisation: true,
       resolveList: markRaw([]),
       initialised: false,
-      mapManagerRef: undefined,
     }
   },
   watch: {