{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/viewers/MultiFlatmap.vue?vue&type=style&index=0&id=f28212b0&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/viewers/MultiFlatmap.vue","mtime":1698105156821},{"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:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9idXR0b24iOwo="},{"version":3,"sources":["MultiFlatmap.vue"],"names":[],"mappings":";AAkVA","file":"MultiFlatmap.vue","sourceRoot":"src/components/viewers","sourcesContent":["<template>\n  <MultiFlatmapVuer\n    :availableSpecies=\"availableSpecies\"\n    @flatmapChanged=\"flatmapChanged\"\n    @ready=\"multiFlatmapReady\"\n    :state=\"entry.state\"\n    @resource-selected=\"resourceSelected(entry.type, $event)\"\n    style=\"height: 100%; width: 100%\"\n    :initial=\"entry.resource\"\n    :helpMode=\"helpMode\"\n    ref=\"multiflatmap\"\n    :displayMinimap=\"true\"\n    :enableOpenMapUI=\"true\"\n    :openMapOptions=\"openMapOptions\"\n    :flatmapAPI=\"flatmapAPI\"\n    :sparcAPI=\"apiLocation\"\n    @pan-zoom-callback=\"flatmapPanZoomCallback\"\n    @open-map=\"openMap\"\n  />\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport { availableSpecies } from \"../scripts/utilities.js\";\nimport { MultiFlatmapVuer } from \"@abi-software/flatmapvuer/src/components/index.js\";\nimport ContentMixin from \"../../mixins/ContentMixin\";\nimport EventBus from \"../EventBus\";\nimport store from \"../../store\";\nimport { getBodyScaffoldInfo } from \"../scripts/utilities\";\nimport DyncamicMarkerMixin from \"../../mixins/DynamicMarkerMixin\";\n\nimport YellowStar from \"../../icons/yellowstar\";\n\nconst getOpenMapOptions = (species) => {\n  const options = [\n    {\n      display: \"Open AC Map\",\n      key: \"AC\"\n    },\n    {\n      display: \"Open FC Map\",\n      key: \"FC\"\n    },\n    {\n      display: \"Open 3D Human Map\", \n      key: \"3D\"\n    },\n  ]\n  switch (species) {\n    case \"Human Male\":\n    case \"Human Female\":\n    case \"Rat\":\n      options.push({\n        display: \"Open Sync Map\", \n        key: \"SYNC\"\n      });\n      break;\n    default:\n      break;\n  }\n  return options;\n}\n\nexport default {\n  name: \"MultiFlatmap\",\n  mixins: [ContentMixin, DyncamicMarkerMixin],\n  components: {\n    MultiFlatmapVuer,\n  },\n  data: function () {\n    return {\n      zoomLevel: 6,\n      flatmapReady: false,\n      availableSpecies: availableSpecies(),\n      scaffoldResource: { },\n      openMapOptions: getOpenMapOptions(\"Rat\")\n    }\n  },\n  methods: {\n    /**\n     * Toggle sync mode on/off depending on species and current state\n     */\n    toggleSyncMode: async function () {\n      if (this.syncMode == false) {\n        let action = undefined;\n        if (this.activeSpecies === \"Rat\") {\n          action = {\n            contextCard: undefined,\n            discoverId: undefined,\n            label: \"Rat Body\",\n            resource: \"https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/31-May-2021/ratBody/ratBody_syncmap_metadata.json\",\n            title: \"View 3D scaffold\",\n            layout: \"2horpanel\",\n            type: \"SyncMap\",\n          };\n        } else if ((this.activeSpecies === \"Human Male\") || (this.activeSpecies === \"Human Female\")) {\n          //Dynamically construct the whole body scaffold for human and store it\n          if (!(\"human\" in this.scaffoldResource)) {\n            this.scaffoldResource[\"human\"] = await getBodyScaffoldInfo(store.state.settings.sparcApi, \"human\");\n          }\n          action = {\n            contextCardUrl: this.scaffoldResource[\"human\"].datasetInfo.contextCardUrl,\n            discoverId: this.scaffoldResource[\"human\"].datasetInfo.discoverId,\n            s3uri: this.scaffoldResource[\"human\"].datasetInfo.s3uri,\n            version: this.scaffoldResource[\"human\"].datasetInfo.version,\n            label: \"Human Body\",\n            resource: this.scaffoldResource[\"human\"].url,\n            title: \"View 3D scaffold\",\n            layout: \"2vertpanel\",\n            type: \"SyncMap\",\n            isBodyScaffold: true,\n          };\n        }\n        if (action)\n          EventBus.$emit(\"SyncModeRequest\", { flag: true, action: action });\n      } else {\n        EventBus.$emit(\"SyncModeRequest\", { flag: false });\n      }\n    },\n    getState: function () {\n      if (this.flatmapReady) return this.$refs.multiflatmap.getState();\n      else return undefined;\n    },\n    flatmapPanZoomCallback: function (payload) {\n      if (this.mouseHovered) {\n        const result = {\n          paneIndex: this.entry.id,\n          eventType: \"panZoom\",\n          payload: payload,\n          type: this.entry.type,\n        };\n        this.flatmapMarkerZoomUpdate(false, undefined);\n        this.$emit(\"resource-selected\", result);\n      }\n    },\n    /**\n     * Perform a local search on this contentvuer\n     */\n    search: function (term) {\n      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();\n      //First search and show the result\n      return flatmap.searchAndShowResult(term, true);\n    },\n    /**\n     * Append the list of suggested terms to suggestions\n     */\n    searchSuggestions: function (term, suggestions) {\n      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();\n      if (term && flatmap.mapImp) {\n        const results = flatmap.mapImp.search(term);\n        results.__featureIds.forEach(id => {\n          const annotation = flatmap.mapImp.annotation(id);\n          if (annotation && annotation.label)\n            suggestions.push(annotation.label);\n        });\n      }\n    },\n    /**\n     * Handle sync pan zoom event\n     */\n    handleSyncPanZoomEvent: function (data) {\n      //Prevent recursive callback\n      if (!this.mouseHovered) {\n        if (data.type !== this.entry.type) {\n          const zoom = data.payload.zoom;\n          const center = data.payload.target;\n          const height = this.$el.clientHeight;\n          const width = this.$el.clientWidth;\n          const max = Math.max(width, height);\n          let sW = width / max / zoom;\n          const sH = height / max / zoom;\n          const origin = [\n            center[0] / 2 + 0.5 - sW / 2,\n            0.5 - center[1] / 2 - sH / 2,\n          ];\n          this.$refs.multiflatmap\n            .getCurrentFlatmap()\n            .mapImp.panZoomTo(origin, [sW, sH]);\n          this.flatmapMarkerZoomUpdate(false, undefined);\n        }\n      }\n    },\n    displayTooltip: function (info) {\n      if (info) {\n        let name = info.name;\n        if (name) {\n          this.search(name);\n        } else {\n          const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();\n          flatmap.mapImp.clearSearchResults();\n        }\n      }\n    },\n    zoomToFeatures: function (info, forceSelect) {\n      let name = info.name;\n      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;\n      if (name) {\n        const results = flatmap.search(name);\n        if (results.featureIds.length) {\n          let externalId = flatmap.modelForFeature(results.featureIds[0]);\n          if (externalId) {\n            if (forceSelect) {\n              flatmap.selectFeatures(externalId);\n            }\n            flatmap.zoomToFeatures(externalId);\n          } else flatmap.clearSearchResults();\n        }\n      } else {\n        flatmap.clearSearchResults();\n      }\n    },\n    highlightFeatures: function (info) {\n      let name = info.name;\n      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;\n      if (name) {\n        const results = flatmap.search(name);\n        if (results.featureIds[0]) {\n          flatmap.highlightFeatures([\n            flatmap.modelForFeature(results.featureIds[0]),\n          ]);\n        }\n      }\n    },\n    flatmapChanged: async function (activeSpecies) {\n      this.activeSpecies = activeSpecies;\n      this.openMapOptions = getOpenMapOptions(activeSpecies);\n      this.$emit(\"species-changed\", activeSpecies);\n      if (!(this.entry.state && (this.entry.state.species === this.activeSpecies))) {\n        if (this.syncMode == true)\n          await this.toggleSyncMode();\n      }\n    },\n    multiFlatmapReady: function (flatmap) {\n      let newMapImp = this.$refs.multiflatmap.getCurrentFlatmap()[\"mapImp\"]; // get latest map\n      if (flatmap) {\n        flatmap.enablePanZoomEvents(true); // Use zoom events for dynamic markers\n        this.flatmapReady = true;\n        const flatmapImp = flatmap.mapImp;\n        this.flatmapMarkerZoomUpdate(true, flatmapImp);\n        let provClone = {id: this.entry.id, prov: newMapImp.provenance}; //create clone of provenance\n        EventBus.$emit(\"mapImpProv\", provClone); // send provenance close to the context card for display\n        this.$emit(\"flatmap-provenance-ready\", provClone);\n      }\n    },\n    getFlatmapImp: function () {\n      if (this.entry.type === \"MultiFlatmap\") {\n        return this.$refs.multiflatmap.getCurrentFlatmap()[\"mapImp\"];\n      } else {\n        return undefined;\n      }\n    },\n    flatmapAreaSearch() {\n      const flatmapImp = this.getFlatmapImp();\n      let shownMarkers = flatmapImp.visibleMarkerAnatomicalIds();\n      let returnedAction = {\n        type: \"Facets\",\n        label: \"Unused\",\n        val: shownMarkers.map(marker => this.idNamePair[marker]),\n      };\n      EventBus.$emit(\"PopoverActionClick\", returnedAction);\n    },\n    restoreFeaturedMarkers: function (flatmap) {\n      store.commit(\"settings/resetFeaturedMarkerIdentifier\");\n      const markers = store.state.settings.featuredMarkers;\n      this.updateFeatureMarkers(markers, flatmap);\n    },\n    updateFeatureMarkers: function (markers, flatmap) {\n      for (let index = 0; index < markers.length; ++index) {\n        if (markers[index]) {\n          const markerIdentifier =\n            store.state.settings.featuredMarkerIdentifiers[index];\n          if (!markerIdentifier) {\n            this.addFeaturedMarker(markers[index], index, flatmap);\n          }\n        }\n      }\n    },\n    addFeaturedMarker: function (marker, index, flatmap) {\n      const markerSpecies =\n        store.getters[\"settings/featuredMarkerSpecies\"](index);\n      if (markerSpecies && !this.activeSpecies.startsWith(markerSpecies)) {\n        return false;\n      }\n      let flatmapImp = flatmap;\n      if (!flatmapImp) {\n        flatmapImp = this.getFlatmapImp();\n      }\n\n      if (flatmapImp) {\n        let wrapperElement = document.createElement(\"div\");\n        wrapperElement.innerHTML = YellowStar;\n\n        const markerIdentifier = flatmapImp.addMarker(marker, {\n          element: wrapperElement,\n        });\n        store.commit(\"settings/updateFeaturedMarkerIdentifier\", {\n          index,\n          markerIdentifier,\n        });\n        return true;\n      }\n      return false;\n    },\n  },\n  computed: {\n    facetSpecies() {\n      return store.state.settings.facets.species;\n    },\n    featuredMarkers() {\n      return store.state.settings.featuredMarkers;\n    },\n  },\n  watch: {\n    syncMode: function (val) {\n      if (this.$refs.multiflatmap.getCurrentFlatmap())\n        this.$refs.multiflatmap.getCurrentFlatmap().enablePanZoomEvents(val);\n    },\n    featuredMarkers: function (markers) {\n      if (!this.flatmapReady) {\n        return;\n      }\n\n      this.updateFeatureMarkers(markers, undefined);\n    },\n  },\n  mounted: function () {\n    this.getAvailableTerms();\n    this.getFeaturedDatasets();\n\n    EventBus.$on(\"markerUpdate\", () => {\n      this.flatmapMarkerZoomUpdate(true, undefined);\n    });\n  },\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/button\";\n</style>\n\n<style src=\"@/../assets/mapicon-species-style.css\"></style>\n"]}]}