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