@abi-software/flatmapvuer 0.5.10 → 0.6.0-vue3-0

package/src/components/MultiFlatmapVuer.vue

@@ -1,535 +1,603 @@
-<template>
-  <div class="multi-container" ref="multiContainer">
-    <div style="position:absolute;z-index:10;">
-      <div class="species-display-text">
-        Species
-      </div>
-      <el-popover content="Select a species" placement="right" 
-        :appendToBody=false trigger="manual" popper-class="flatmap-popper right-popper" v-model="helpMode" ref="selectPopover">
-      </el-popover>
-      <el-select
-        id="flatmap-select"
-        :popper-append-to-body="appendToBody"
-        v-model="activeSpecies"
-        placeholder="Select"
-        class="select-box"
-        popper-class="flatmap_dropdown"
-        @change="setSpecies"
-        v-popover:selectPopover
-      >
-        <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
-          <el-row>
-            <el-col :span="8"><i :class="item.iconClass"></i></el-col>
-            <el-col :span="12">{{ key }}</el-col>
-          </el-row>
-        </el-option>
-      </el-select>
-    </div>
-    <FlatmapVuer
-      v-for="(item, key) in speciesList"
-      :key="key"
-      :showLayer="showLayer"
-      v-show="activeSpecies==key"
-      :entry="item.taxo"
-      :uuid="item.uuid"
-      :biologicalSex="item.biologicalSex"
-      :displayWarning="item.displayWarning"
-      :displayLatestChanges="item.displayLatestChanges"
-      :isLegacy="item.isLegacy"
-      :ref="key"
-      :enableOpenMapUI="enableOpenMapUI"
-      :openMapOptions="openMapOptions"
-      @view-latest-map="viewLatestMap"
-      @resource-selected="FlatmapSelected"
-      @ready="FlatmapReady"
-      @pan-zoom-callback="panZoomCallback"
-      @open-map="$emit('open-map', $event)"
-      :featureInfo="featureInfo"
-      :minZoom="minZoom"
-      :pathControls="pathControls"
-      :searchable="searchable"
-      :layerControl="layerControl"
-      :helpMode="helpMode"
-      :renderAtMounted="renderAtMounted"
-      :displayMinimap="displayMinimap"
-      :showStarInLegend="showStarInLegend"
-      style="height:100%"
-      :flatmapAPI="flatmapAPI"
-      :sparcAPI="sparcAPI"
-    />
-  </div>
-</template>
-
-
-<script>
-/* eslint-disable no-alert, no-console */
-import EventBus from './EventBus'
-import Vue from "vue";
-import FlatmapVuer from "./FlatmapVuer.vue";
-import { Col, Option, Select, Row, Popover } from "element-ui";  
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-locale.use(lang);
-Vue.use(Col);
-Vue.use(Row);
-Vue.use(Option);
-Vue.use(Select);
-Vue.use(Popover)
-
-const TAXON_UUID = {
-  "NCBITaxon:10114": "01fedbf9-d783-509c-a10c-827941ab13da",
-  "NCBITaxon:9823": "a336ac04-24db-561f-a25f-1c994fe17410",
-  "NCBITaxon:9606": "42ed6323-f645-5fbe-bada-9581819cf689",
-  "NCBITaxon:10090": "25285fab-48a0-5620-a6a0-f9a0374837d5",
-  "NCBITaxon:9685": "73060497-46a6-52bf-b975-cac511c127cb"
-}
-
-export default {
-  name: "MultiFlatmapVuer",
-  components: {
-    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) =>{
-      this.FlatmapSelected(action)
-    })
-  },
-  methods: {
-    initialise: function() {
-      return new Promise(resolve => {
-        if (this.requireInitialisation) {
-          //It has not been initialised yet
-          this.requireInitialisation = false;
-          fetch(this.flatmapAPI)
-          .then(response => response.json())
-          .then(data => {
-            //Check each key in the provided availableSpecies against the one 
-            Object.keys(this.availableSpecies).forEach(key => {
-              // FIrst look through the uuid
-              const uuid = this.availableSpecies[key].uuid;
-              if (uuid && data.map(e => e.uuid).indexOf(uuid) > 0) {
-                this.$set(this.speciesList, key, this.availableSpecies[key]);
-              } else {
-                for (let i = 0; i < data.length; i++) {
-                  if (this.availableSpecies[key].taxo === data[i].taxon) {
-                    if (this.availableSpecies[key].biologicalSex) {
-                      if (data[i].biologicalSex && 
-                        data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
-                          this.$set(this.speciesList, key, this.availableSpecies[key]);
-                          break;
-                        }
-                    } else {
-                      this.$set(this.speciesList, key, this.availableSpecies[key]);
-                      break;
-                    }
-                  }
-                }
-              }
-            });
-            //Use the state species if it does not have any other species information 
-            let species = this.initial;
-            if (this.state) {
-              const mapState = this.state.state;
-              if ((!mapState || ( !mapState.uuid && !mapState.entry )) && this.state.species)
-                species = this.state.species;
-              else
-                species = undefined;
-            }
-            if (species) {
-              //No state resuming, set the current flatmap to {this.initial}
-              if (species && this.speciesList[species] !== undefined) {
-                this.activeSpecies = species;
-              } else {
-                this.activeSpecies = Object.keys(this.speciesList)[0];
-              }
-              this.setSpecies(this.activeSpecies, this.state ? this.state.state : undefined, 5);
-            }
-            this._initialised = true;
-            resolve();
-            //Resolve all other promises resolve in the list
-            this._resolveList.forEach(other => { other(); });
-          });
-        } else if (this._initialised) {
-          //resolve as it has been initialised
-          resolve();
-        } else {
-          //resolve when the async initialisation is finished 
-          this._resolveList.push(resolve);
-        }
-      })
-    },
-    FlatmapSelected: function(resource) {
-      this.$emit("resource-selected", resource);
-    },
-    FlatmapReady: function(component) {
-      this.$emit("ready", component);
-    },
-    getCoordinatesOfLastClick: function() {
-      const flatmap = this.$refs[this.activeSpecies];
-      if (flatmap && flatmap[0]) {
-        return flatmap[0].getCoordinatesOfLastClick();
-      }
-      return undefined;
-    },
-    getCurrentFlatmap: function() {
-      return this.$refs[this.activeSpecies][0];
-    },
-    panZoomCallback: function(payload) {
-      this.$emit("pan-zoom-callback", payload);
-    },
-    showPopup: function(featureId, node, options) {
-      let map = this.getCurrentFlatmap();
-      map.showPopup(featureId, node, options);
-    },
-    showMarkerPopup: function(featureId, node, options) {
-      let map = this.getCurrentFlatmap();
-      map.showMarkerPopup(featureId, node, options);
-    },
-    setSpecies: function(species, state, numberOfRetry) {
-      if (this.$refs && species in this.$refs) {
-        this.activeSpecies = species;
-        this.$refs[this.activeSpecies][0].createFlatmap(state);
-        this.$emit('flatmapChanged', this.activeSpecies);
-      } else if (numberOfRetry) {
-        const retry = numberOfRetry - 1;
-        if (retry >= 0) {
-          Vue.nextTick(() => {
-            this.setSpecies(species, state, retry);
-          });
-        }
-      }
-    },
-    /**
-     * Function to switch to the latest existing map from 
-     * a legacy map of the same species. 
-     * 
-     * @private
-     */
-    viewLatestMap: function(state) {
-      const keys = Object.keys(this.speciesList);
-      for (let i = 0; i < keys.length; i++) {
-        const species = this.speciesList[keys[i]];
-        if (!species.isLegacy &&
-          (species.taxo === state.entry) && 
-         (species.biologicalSex === state.biologicalSex)) {
-           this.setSpecies(keys[i], state, 0);
-           return;
-        }
-      }
-    },
-    /**
-     * Create a legacy entry with the provided information
-     * 
-     * @private
-     */
-    createLegacyEntry: function(state, taxo, uuid) {
-      if (uuid && taxo) {
-        let name = "Legacy";
-        if (state.species) {
-          if (state.species.slice(0, 6) === "Legacy")
-            name = state.species;
-          else
-            name = name + ` ${state.species}`;
-        }
-        this.$set(
-          this.speciesList,
-          name, 
-          {
-            taxo: taxo,
-            isLegacy: true,
-            displayWarning: true
-          }
-        );
-        return {
-          species: name,
-          state: {
-            entry: taxo,
-            uuid: uuid,
-            viewport: state.state.viewport,
-            searchTerm: state.state.searchTerm
-          },
-        }
-      }
-    },
-    /**
-     * Function used to translate the legacy map state to one that can be used in current
-     * flatmap if required. If it is a legacy, an Select entry will be added
-     * 
-     * @private
-     */
-    updateState: function(state) {
-      return new Promise((resolve) => {
-        if (state && state.state) {
-          const mapState = state.state;
-          //uuid is not in the state, this is a legacy map
-          if (!mapState.uuid) {
-            if (mapState.entry) {
-              const uuid = mapState.entry in TAXON_UUID ? TAXON_UUID[mapState.entry] : undefined;
-              const newState = this.createLegacyEntry(state, mapState.entry, uuid);
-              resolve(newState ? newState : state);
-            }
-          } else if (mapState.entry) {
-            //uuid is in the state but should be checked if it is the latest map
-            //for that taxon
-            return new Promise(() => {
-              const mapManager = new (require("@abi-software/flatmap-viewer")).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;
-              mapManager.findMap_(identifier).then(map => {
-                if (map.uuid !== mapState.uuid) {
-                  return this.createLegacyEntry(state, mapState.entry, mapState.uuid);
-                }
-              }).then(newState => {
-                resolve(newState ? newState : state);
-              })
-              .catch(() => {
-                resolve(state);
-              });
-            });
-          }
-          //Create a new state and add the legacy map to the select
-        }
-        resolve(state);
-      });
-    },
-    /**
-     * Function used for getting the current states of the scene. This exported states 
-     * can be imported using the importStates method.
-     * 
-     * @public
-     */
-    getState: function() {
-      let state = {
-        species: this.activeSpecies,
-        state: undefined,
-      };
-      let map = this.getCurrentFlatmap();
-      state.state = map.getState();
-      return state;
-    },
-    /**
-     * Function used for importing the states of the scene. This exported states 
-     * can be imported using the read states method.
-     * 
-     * @public
-     */
-    setState: function(state) {
-      if (state) {
-          //Update state if required
-        this.updateState(state).then(currentState => {
-          this.initialise().then(() => {
-            if (currentState.species && (currentState.species !== this.activeSpecies)) {
-              this.setSpecies(currentState.species, currentState.state, 5);
-            } else if (currentState.state) {
-              let map = this.getCurrentFlatmap();
-              map.setState(currentState.state);
-            }
-          });
-        });
-      }
-    },
-    resourceSelected: function(action) {
-      this.$emit("resource-selected", action);
-    },
-  },
-  props: {
-    showLayer: {
-      type: Boolean,
-      default: false
-    },
-    featureInfo: {
-      type: Boolean,
-      default: false
-    },
-    pathControls: {
-      type: Boolean,
-      default: true
-    },
-    searchable: {
-      type: Boolean,
-      default: false
-    },
-    layerControl: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Initial species for the flatmap.
-     * This value will be ignored if a valid state object is provided.
-     */
-    initial: {
-      type: String,
-      default: ""
-    },
-    minZoom: {
-      type: Number,
-      default: 4
-    },
-    renderAtMounted: {
-      type: Boolean,
-      default: false
-    },
-    helpMode: {
-      type: Boolean,
-      default: false
-    },
-    displayMinimap: {
-      type: Boolean,
-      default: false
-    },
-    showStarInLegend: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Flag to determine rather open map UI should be
-     * presented or not.
-     */
-    enableOpenMapUI: {
-      type: Boolean,
-      default: false,
-    },
-    openMapOptions: {
-      type: Array
-    },
-    availableSpecies: {
-      type: Object,
-      default: function() {
-        return {
-          "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
-          "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
-          "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayLatestChanges: true},
-          "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning: true},
-          "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning: true},
-          "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning: true},
-        }
-      }
-    },
-    /**
-     * State containing state of the flatmap.
-     */
-    state: {
-      type: Object,
-      default: undefined,
-    },
-    /**
-     * Specify the endpoint of the flatmap server.
-     */
-    flatmapAPI: {
-      type: String,
-      default: "https://mapcore-demo.org/current/flatmap/v3/"
-    },
-    sparcAPI: {
-      type: String,
-      default: "https://api.sparc.science/"
-    } 
-  },
-  data: function() {
-    return {
-      activeSpecies: undefined,
-      appendToBody: false,
-      speciesList: {},
-      requireInitialisation: true
-    };
-  },
-  watch: {
-    state: {
-      handler: function(state) {
-        this.setState(state);
-      },
-      immediate: true,
-      deep: true,
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/select";
-@import "~element-ui/packages/theme-chalk/src/option";
-
-.multi-container {
-  height: 100%;
-  width: 100%;
-}
-
-.species-display-text {
-  width: 47px;
-  height: 20px;
-  color: rgb(48, 49, 51);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  left:24px;
-  top:16px;
-  position: absolute;
-}
-
-.select-box {
-  width: 120px;
-  border-radius: 4px;
-  border: 1px solid rgb(144, 147, 153);
-  background-color: var(--white);
-  font-weight: 500;
-  color:rgb(48, 49, 51);
-  left: 16px;
-  top: 44px;
-  position: absolute;
-  ::v-deep .el-input__inner {
-    color: rgb(48, 49, 51);
-    padding-top: 0.25em;
-  }
-  ::v-deep .el-input__inner {
-    &is-focus, &:focus {
-      border: 1px solid $app-primary-color;
-    }
-  }
-} 
-
-
-::v-deep .flatmap_dropdown {
-  min-width: 160px!important;
-  .el-select-dropdown__item {
-    white-space: nowrap;
-    text-align: left;
-    &.selected {
-      color: $app-primary-color;
-      font-weight: normal;
-    }
-  }
-}
-
-::v-deep .flatmap-popper {
-  padding: 6px 4px;
-  font-size:12px;
-  color: rgb(48, 49, 51);
-  background-color: #f3ecf6;
-  border: 1px solid $app-primary-color;
-  white-space: nowrap;
-  min-width: unset;
-  &.right-popper {
-    .popper__arrow {
-      border-right-color: $app-primary-color !important;
-      &:after {
-        border-right-color: #f3ecf6 !important;
-      }
-    }
-  }
-}
-
-::v-deep .flatmap-marker-popup{
-  background-color: #f0f0f000  !important;
-  box-shadow: none !important;
-}
-
-</style>
-
+<template>
+  <div class="multi-container" ref="multiContainer">
+    <div style="position: absolute; z-index: 10">
+      <div class="species-display-text">Species</div>
+      <el-popover
+        content="Select a species"
+        placement="right"
+        trigger="manual"
+        popper-class="flatmap-popper right-popper"
+        :visible="helpMode"
+        :teleported="false"
+        ref="selectPopover"
+      >
+        <template #reference>
+          <el-select
+            id="flatmap-select"
+            :teleported="false"
+            v-model="activeSpecies"
+            placeholder="Select"
+            class="select-box"
+            popper-class="flatmap-dropdown"
+            @change="setSpecies"
+          >
+            <el-option
+              v-for="(item, key) in speciesList"
+              :key="key"
+              :label="key"
+              :value="key"
+            >
+              <el-row>
+                <el-col :span="8"><i :class="item.iconClass"></i></el-col>
+                <el-col :span="12">{{ key }}</el-col>
+              </el-row>
+            </el-option>
+          </el-select>
+        </template>
+
+      </el-popover>
+    </div>
+    <FlatmapVuer
+      v-for="(item, key) in speciesList"
+      :key="key"
+      :showLayer="showLayer"
+      v-show="activeSpecies == key"
+      :entry="item.taxo"
+      :uuid="item.uuid"
+      :biologicalSex="item.biologicalSex"
+      :displayWarning="item.displayWarning"
+      :displayLatestChanges="item.displayLatestChanges"
+      :isLegacy="item.isLegacy"
+      :ref="key"
+      :enableOpenMapUI="enableOpenMapUI"
+      :openMapOptions="openMapOptions"
+      @view-latest-map="viewLatestMap"
+      @resource-selected="FlatmapSelected"
+      @ready="FlatmapReady"
+      @pan-zoom-callback="panZoomCallback"
+      @open-map="$emit('open-map', $event)"
+      :featureInfo="featureInfo"
+      :minZoom="minZoom"
+      :pathControls="pathControls"
+      :searchable="searchable"
+      :layerControl="layerControl"
+      :helpMode="helpMode"
+      :renderAtMounted="renderAtMounted"
+      :displayMinimap="displayMinimap"
+      :showStarInLegend="showStarInLegend"
+      style="height: 100%"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="sparcAPI"
+    />
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { reactive } from 'vue'
+import EventBus from './EventBus'
+import FlatmapVuer from './FlatmapVuer.vue'
+import {
+  ElCol as Col,
+  ElOption as Option,
+  ElSelect as Select,
+  ElRow as Row,
+  ElPopover as Popover,
+} from 'element-plus'
+
+const TAXON_UUID = {
+  'NCBITaxon:10114': '01fedbf9-d783-509c-a10c-827941ab13da',
+  'NCBITaxon:9823': 'a336ac04-24db-561f-a25f-1c994fe17410',
+  'NCBITaxon:9606': '42ed6323-f645-5fbe-bada-9581819cf689',
+  'NCBITaxon:10090': '25285fab-48a0-5620-a6a0-f9a0374837d5',
+  'NCBITaxon:9685': '73060497-46a6-52bf-b975-cac511c127cb',
+}
+
+export default {
+  name: 'MultiFlatmapVuer',
+  components: {
+    Col,
+    Row,
+    Option,
+    Select,
+    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) => {
+      this.FlatmapSelected(action)
+    })
+  },
+  methods: {
+    initialise: function () {
+      return new Promise((resolve) => {
+        if (this.requireInitialisation) {
+          //It has not been initialised yet
+          this.requireInitialisation = false
+          fetch(this.flatmapAPI)
+            .then((response) => response.json())
+            .then((data) => {
+              //Check each key in the provided availableSpecies against the one
+              Object.keys(this.availableSpecies).forEach((key) => {
+                // 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])
+                } else {
+                  for (let i = 0; i < data.length; i++) {
+                    if (this.availableSpecies[key].taxo === data[i].taxon) {
+                      if (this.availableSpecies[key].biologicalSex) {
+                        if (
+                          data[i].biologicalSex &&
+                          data[i].biologicalSex ===
+                            this.availableSpecies[key].biologicalSex
+                        ) {
+                          this.speciesList[key] = reactive(this.availableSpecies[key])
+                          break
+                        }
+                      } else {
+                        this.speciesList[key] = reactive(this.availableSpecies[key])
+                        break
+                      }
+                    }
+                  }
+                }
+              })
+              //Use the state species if it does not have any other species information
+              let species = this.initial
+              if (this.state) {
+                const mapState = this.state.state
+                if (
+                  (!mapState || (!mapState.uuid && !mapState.entry)) &&
+                  this.state.species
+                )
+                  species = this.state.species
+                else species = undefined
+              }
+              if (species) {
+                //No state resuming, set the current flatmap to {this.initial}
+                if (species && this.speciesList[species] !== undefined) {
+                  this.activeSpecies = species
+                } else {
+                  this.activeSpecies = Object.keys(this.speciesList)[0]
+                }
+                this.setSpecies(
+                  this.activeSpecies,
+                  this.state ? this.state.state : undefined,
+                  5
+                )
+              }
+              this._initialised = true
+              resolve()
+              //Resolve all other promises resolve in the list
+              this._resolveList.forEach((other) => {
+                other()
+              })
+            })
+        } else if (this._initialised) {
+          //resolve as it has been initialised
+          resolve()
+        } else {
+          //resolve when the async initialisation is finished
+          this._resolveList.push(resolve)
+        }
+      })
+    },
+    FlatmapSelected: function (resource) {
+      this.$emit('resource-selected', resource)
+    },
+    FlatmapReady: function (component) {
+      this.$emit('ready', component)
+    },
+    getCoordinatesOfLastClick: function () {
+      const flatmap = this.$refs[this.activeSpecies]
+      if (flatmap && flatmap[0]) {
+        return flatmap[0].getCoordinatesOfLastClick()
+      }
+      return undefined
+    },
+    getCurrentFlatmap: function () {
+      return this.$refs[this.activeSpecies][0]
+    },
+    panZoomCallback: function (payload) {
+      this.$emit('pan-zoom-callback', payload)
+    },
+    showPopup: function (featureId, node, options) {
+      let map = this.getCurrentFlatmap()
+      map.showPopup(featureId, node, options)
+    },
+    showMarkerPopup: function (featureId, node, options) {
+      let map = this.getCurrentFlatmap()
+      map.showMarkerPopup(featureId, node, options)
+    },
+    setSpecies: function (species, state, numberOfRetry) {
+      if (this.$refs && species in this.$refs) {
+        this.activeSpecies = species
+        this.$refs[this.activeSpecies][0].createFlatmap(state)
+        this.$emit('flatmapChanged', this.activeSpecies)
+      } else if (numberOfRetry) {
+        const retry = numberOfRetry - 1
+        if (retry >= 0) {
+          this.$nextTick(() => {
+            this.setSpecies(species, state, retry)
+          })
+        }
+      }
+    },
+    /**
+     * Function to switch to the latest existing map from
+     * a legacy map of the same species.
+     *
+     * @private
+     */
+    viewLatestMap: function (state) {
+      const keys = Object.keys(this.speciesList)
+      for (let i = 0; i < keys.length; i++) {
+        const species = this.speciesList[keys[i]]
+        if (
+          !species.isLegacy &&
+          species.taxo === state.entry &&
+          species.biologicalSex === state.biologicalSex
+        ) {
+          this.setSpecies(keys[i], state, 0)
+          return
+        }
+      }
+    },
+    /**
+     * Create a legacy entry with the provided information
+     *
+     * @private
+     */
+    createLegacyEntry: function (state, taxo, uuid) {
+      if (uuid && taxo) {
+        let name = 'Legacy'
+        if (state.species) {
+          if (state.species.slice(0, 6) === 'Legacy') name = state.species
+          else name = name + ` ${state.species}`
+        }
+        this.speciesList[name] = reactive({
+          taxo: taxo,
+          isLegacy: true,
+          displayWarning: true,
+        })
+        return {
+          species: name,
+          state: {
+            entry: taxo,
+            uuid: uuid,
+            viewport: state.state.viewport,
+            searchTerm: state.state.searchTerm,
+          },
+        }
+      }
+    },
+    /**
+     * Function used to translate the legacy map state to one that can be used in current
+     * flatmap if required. If it is a legacy, an Select entry will be added
+     *
+     * @private
+     */
+    updateState: function (state) {
+      return new Promise((resolve) => {
+        if (state && state.state) {
+          const mapState = state.state
+          //uuid is not in the state, this is a legacy map
+          if (!mapState.uuid) {
+            if (mapState.entry) {
+              const uuid =
+                mapState.entry in TAXON_UUID
+                  ? TAXON_UUID[mapState.entry]
+                  : undefined
+              const newState = this.createLegacyEntry(
+                state,
+                mapState.entry,
+                uuid
+              )
+              resolve(newState ? newState : state)
+            }
+          } else if (mapState.entry) {
+            //uuid is in the state but should be checked if it is the latest map
+            //for that taxon
+            return new Promise(() => {
+              const mapManager =
+                new (require('@abi-software/flatmap-viewer').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
+              mapManager
+                .findMap_(identifier)
+                .then((map) => {
+                  if (map.uuid !== mapState.uuid) {
+                    return this.createLegacyEntry(
+                      state,
+                      mapState.entry,
+                      mapState.uuid
+                    )
+                  }
+                })
+                .then((newState) => {
+                  resolve(newState ? newState : state)
+                })
+                .catch(() => {
+                  resolve(state)
+                })
+            })
+          }
+          //Create a new state and add the legacy map to the select
+        }
+        resolve(state)
+      })
+    },
+    /**
+     * Function used for getting the current states of the scene. This exported states
+     * can be imported using the importStates method.
+     *
+     * @public
+     */
+    getState: function () {
+      let state = {
+        species: this.activeSpecies,
+        state: undefined,
+      }
+      let map = this.getCurrentFlatmap()
+      state.state = map.getState()
+      return state
+    },
+    /**
+     * Function used for importing the states of the scene. This exported states
+     * can be imported using the read states method.
+     *
+     * @public
+     */
+    setState: function (state) {
+      if (state) {
+        //Update state if required
+        this.updateState(state).then((currentState) => {
+          this.initialise().then(() => {
+            if (
+              currentState.species &&
+              currentState.species !== this.activeSpecies
+            ) {
+              this.setSpecies(currentState.species, currentState.state, 5)
+            } else if (currentState.state) {
+              let map = this.getCurrentFlatmap()
+              map.setState(currentState.state)
+            }
+          })
+        })
+      }
+    },
+    resourceSelected: function (action) {
+      this.$emit('resource-selected', action)
+    },
+  },
+  props: {
+    showLayer: {
+      type: Boolean,
+      default: false,
+    },
+    featureInfo: {
+      type: Boolean,
+      default: false,
+    },
+    pathControls: {
+      type: Boolean,
+      default: true,
+    },
+    searchable: {
+      type: Boolean,
+      default: false,
+    },
+    layerControl: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Initial species for the flatmap.
+     * This value will be ignored if a valid state object is provided.
+     */
+    initial: {
+      type: String,
+      default: '',
+    },
+    minZoom: {
+      type: Number,
+      default: 4,
+    },
+    renderAtMounted: {
+      type: Boolean,
+      default: false,
+    },
+    helpMode: {
+      type: Boolean,
+      default: false,
+    },
+    displayMinimap: {
+      type: Boolean,
+      default: false,
+    },
+    showStarInLegend: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * Flag to determine rather open map UI should be
+     * presented or not.
+     */
+    enableOpenMapUI: {
+      type: Boolean,
+      default: false,
+    },
+    openMapOptions: {
+      type: Array,
+    },
+    availableSpecies: {
+      type: Object,
+      default: function () {
+        return {
+          'Human Female': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000383',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          'Human Male': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000384',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          Rat: {
+            taxo: 'NCBITaxon:10114',
+            iconClass: 'mapicon-icon_rat',
+            displayLatestChanges: true,
+          },
+          Mouse: {
+            taxo: 'NCBITaxon:10090',
+            iconClass: 'mapicon-icon_mouse',
+            displayWarning: true,
+          },
+          Pig: {
+            taxo: 'NCBITaxon:9823',
+            iconClass: 'mapicon-icon_pig',
+            displayWarning: true,
+          },
+          Cat: {
+            taxo: 'NCBITaxon:9685',
+            iconClass: 'mapicon-icon_cat',
+            displayWarning: true,
+          },
+        }
+      },
+    },
+    /**
+     * State containing state of the flatmap.
+     */
+    state: {
+      type: Object,
+      default: undefined,
+    },
+    /**
+     * Specify the endpoint of the flatmap server.
+     */
+    flatmapAPI: {
+      type: String,
+      default: 'https://mapcore-demo.org/current/flatmap/v3/',
+    },
+    sparcAPI: {
+      type: String,
+      default: 'https://api.sparc.science/',
+    },
+  },
+  data: function () {
+    return {
+      activeSpecies: undefined,
+      speciesList: {},
+      requireInitialisation: true,
+    }
+  },
+  watch: {
+    state: {
+      handler: function (state) {
+        this.setState(state)
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/select';
+@use 'element-plus/theme-chalk/src/option';
+
+.multi-container {
+  height: 100%;
+  width: 100%;
+}
+
+.species-display-text {
+  width: 47px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  left: 24px;
+  top: 16px;
+  position: absolute;
+}
+
+.select-box {
+  width: 120px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  left: 16px;
+  top: 44px;
+  position: absolute;
+  :deep(.el-input__inner) {
+    color: rgb(48, 49, 51);
+    padding-top: 0.25em;
+  }
+  :deep() {
+    .el-input {
+      .el-input__wrapper{
+        &is-focus,
+        &:focus {
+          border: 1px solid $app-primary-color;
+        }
+      }
+    }
+  }
+}
+
+.flatmap-dropdown {
+  min-width: 160px !important;
+  .el-select-dropdown__item {
+    white-space: nowrap;
+    text-align: left;
+    &.selected {
+      color: $app-primary-color;
+      font-weight: normal;
+    }
+  }
+}
+
+.flatmap-popper {
+  padding: 6px 4px;
+  font-size: 12px;
+  color: rgb(48, 49, 51);
+  background-color: #f3ecf6;
+  border: 1px solid $app-primary-color;
+  white-space: nowrap;
+  min-width: unset;
+  &.right-popper {
+    .popper__arrow {
+      border-right-color: $app-primary-color !important;
+      &:after {
+        border-right-color: #f3ecf6 !important;
+      }
+    }
+  }
+}
+
+:deep(.flatmap-marker-popup) {
+  background-color: #f0f0f000 !important;
+  box-shadow: none !important;
+}
+</style>