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