{"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/map-side-bar/src/components/ImageGallery.vue?vue&type=style&index=0&id=1343506a&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/@abi-software/map-side-bar/src/components/ImageGallery.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:Ci5mdWxsLXNpemUgewogIGhlaWdodDogMTAwJTsKICB3aWR0aDogMjQ0cHg7Cn0KCi5rZXktaW1hZ2Utc3Bhbi5hY3RpdmUgewogIHRyYW5zZm9ybTogc2NhbGUoMS4xNik7CiAgYm9yZGVyOiA0cHggJGFwcC1wcmltYXJ5LWNvbG9yIHNvbGlkOwp9Cgoua2V5LWltYWdlLXNwYW4gewogIGRpc3BsYXk6IGZsZXg7CiAgcG9zaXRpb246IHJlbGF0aXZlOwp9Cgoub3ZlcmxheSB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIHJpZ2h0OiA1cHg7CiAgdG9wOiA1cHg7CiAgd2lkdGg6IDEuNjFlbTsKICBoZWlnaHQ6IDFlbTsKICBib3JkZXItcmFkaXVzOiAzcHg7CiAgb3BhY2l0eTogMC44Owp9CgppbWcgewogIHZlcnRpY2FsLWFsaWduOiBib3R0b207Cn0KCmEucHJldiwKYS5uZXh0IHsKICBkaXNwbGF5OiBmbGV4OwogIGZvbnQtc2l6ZTogM2VtOwp9CgphLnByZXY6bm90KC51bmRlcmxpbmUpLAphLm5leHQ6bm90KC51bmRlcmxpbmUpIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCmEucHJldiB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0Owp9CgphLm5leHQgewogIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7Cn0KCi5zdGFuZGFyZC1nYWxsZXJ5IHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogbm93cmFwOwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KCi5pbWFnZS1saW5lIHsKICBkaXNwbGF5OiBmbGV4OwogIG1hcmdpbi10b3A6IDElOwogIG1hcmdpbi1ib3R0b206IDElOwogIGZsZXgtZ3JvdzogMTsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47Cn0KLmRpc2FibGVkIHsKICBvcGFjaXR5OiAwLjI7CiAgY3Vyc29yOiBkZWZhdWx0Owp9CgoucmVjdGFuZ2xlIHsKICBoZWlnaHQ6IDFlbTsKICB3aWR0aDogMmVtOwogIGJvcmRlci1yYWRpdXM6IDNweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1Owp9CgouZnVsbC1zaXplIDo6di1kZWVwIC5lbC1jYXJkIHsKICBib3JkZXI6IDBweDsKfQo="},{"version":3,"sources":["ImageGallery.vue"],"names":[],"mappings":";AAqcA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"ImageGallery.vue","sourceRoot":"node_modules/@abi-software/map-side-bar/src/components","sourcesContent":["<template>\n  <div class=\"full-size\">\n    <gallery\n      :bottomSpacer=\"bottomSpacer\"\n      :cardWidth=\"10\"\n      :items=\"galleryItems\"\n      :max-width=\"maxWidth\"\n      :show-indicator-bar=\"false\"\n      :show-card-details=\"true\"\n      :highlight-active=\"false\"\n      :image-style=\"imageStyle\"\n      :image-container-style=\"imageContainerStyle\"\n      :body-style=\"bodyStyle\"\n      :shadow=\"shadow\"\n      @card-clicked=\"cardClicked\"\n      ref=\"gallery\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable no-alert, no-console */\nconst baseName = (str) => {\n  return str.split(\"\\\\\").pop().split(\"/\").pop();\n};\n\nconst capitalise = function (string) {\n  return string.replace(/\\b\\w/g, (v) => v.toUpperCase());\n};\n\nimport GalleryHelper from \"@abi-software/gallery/src/mixins/GalleryHelpers\";\nimport Gallery from \"@abi-software/gallery/src/main-bundle.js\";\n//provide the s3Bucket related methods and data.\nimport S3Bucket from \"../mixins/S3Bucket\";\n\nexport default {\n  name: \"ImageGallery\",\n  components: { Gallery },\n  mixins: [GalleryHelper, S3Bucket],\n  props: {\n    datasetBiolucida: {\n      type: Object,\n      default: () => {\n        return {};\n      },\n    },\n    envVars: {\n      type: Object,\n      default: () => {},\n    },\n    label: {\n      type: String,\n      default: \"\",\n    },\n    plots: {\n      type: Array,\n      default: () => {\n        return [];\n      },\n    },\n    datasetId: {\n      type: Number,\n      default: -1,\n    },\n    datasetVersion: {\n      type: Number,\n      default: -1,\n    },\n    datasetThumbnail: {\n      type: String,\n      default: \"\",\n    },\n    category: {\n      type: String,\n      default: \"All\",\n    },\n    entry:  {\n      type: Object,\n      default: () => {\n        return {};\n      },\n    },\n  },\n  data() {\n    return {\n      currentIndex: 0,\n      ro: null,\n      maxWidth: 3,\n      items: {\n        //Use the Images instead for Biolucida Images\n        //\"Biolucida Images\": [],\n        'Dataset': [],\n        'Images': [],\n        'Scaffolds': [],\n        'Segmentations': [],\n        'Simulations': [],\n        'Videos': [],\n        'Plots': [],\n      },\n      bodyStyle: { padding: '0px', background: '#ffffff' },\n      imageContainerStyle: {\n        width: '160px',\n        height: '160px',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n      imageStyle: { maxWidth: '160px', maxHeight: '160px'},\n      shadow: \"never\",\n      bottomSpacer: { minHeight: '0rem' },\n      resetIndex: false,\n    };\n  },\n  methods: {\n    cardClicked: function(payload) {\n      this.$emit('card-clicked', payload);\n    },\n    createSciCurnchItems: function () {\n      this.updateS3Bucket(this.entry.s3uri);\n      this.createDatasetItem();\n      this.createScaffoldItems();\n      this.createSimulationItems();\n      this.createPlotItems();\n      this.createSegmentationItems();\n      /* Disable these two\n      this.createImageItems();\n      this.createVideoItems();\n      */\n    },\n    createDatasetItem: function () {\n      const link = `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`\n      if (this.datasetThumbnail) {\n        this.items['Dataset'].push({\n          id: -1,\n          //Work around gallery requires a truthy string\n          title: \" \",\n          type: `Dataset ${this.datasetId}`,\n          thumbnail: this.datasetThumbnail,\n          link,\n          hideType: true,\n          hideTitle: true,\n        });\n      }\n    },\n    createImageItems: function () {\n      if (this.entry.images) {\n        this.entry.images.forEach((image) => {\n          const filePath = image.dataset.path;\n          const id = image.identifier;\n          const linkUrl = `${this.envVars.ROOT_URL}/datasets/imageviewer?dataset_id=${this.datasetId}&dataset_version=${this.datasetVersion}&file_path=${filePath}&mimetype=${image.mimetype.name}`;\n          this.items['Images'].push({\n            id,\n            title: baseName(filePath),\n            type: \"Image\",\n            link: linkUrl,\n            hideType: true,\n          });\n        });\n      }\n    },\n    createPlotItems: function () {\n      if (this.entry.plots) {\n        this.entry.plots.forEach((plot) => {\n          const filePath = plot.dataset.path;\n          const id = plot.identifier;\n          const thumbnail = this.getThumbnailForPlot(plot, this.entry.thumbnails);\n          let thumbnailURL = undefined;\n          let mimetype = '';\n          if (thumbnail) {\n            thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {\n              id,\n              datasetId: this.datasetId,\n              datasetVersion: this.datasetVersion,\n              file_path: thumbnail.dataset.path,\n              s3Bucket: this.s3Bucket,\n            });\n            mimetype = thumbnail.mimetype.name;\n          }\n          const plotAnnotation = plot.datacite;\n          const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;\n          const sourceUrl = filePathPrefix + plot.dataset.path + this.getS3Args();\n\n          //plotAnnotation.supplemental_json_metadata.description can be undefined or\n          //contain an empty string causing an error with JSON.parse\n          let metadata = {};\n          try { \n            metadata = JSON.parse(\n              plotAnnotation.supplemental_json_metadata.description\n            );\n          } catch (error) {\n            console.warn(error);\n          }\n\n          let supplementalData = [];\n          if (plotAnnotation.isDescribedBy) {\n            supplementalData.push({\n              url: filePathPrefix + plotAnnotation.isDescribedBy.path\n            });\n          }\n\n          const resource = {\n            dataSource: {url: sourceUrl},\n            metadata,\n            supplementalData\n          }\n\n          let action = {\n            label: capitalise(this.label),\n            resource: resource,\n            s3uri: this.entry.s3uri,\n            title: \"View plot\",\n            type: \"Plot\",\n            discoverId: this.discoverId,\n            version: this.datasetVersion,\n          };\n          this.items['Plots'].push({\n            id,\n            title: baseName(filePath),\n            type: \"Plot\",\n            thumbnail: thumbnailURL,\n            userData: action,\n            hideType: true,\n            mimetype\n          });\n        });\n      }\n    },\n    createScaffoldItems: function () {\n      if (this.entry.scaffolds) {\n        let index = 0;\n        this.entry.scaffolds.forEach((scaffold, i) => {\n          const filePath = scaffold.dataset.path;\n          const id = scaffold.identifier;\n          const thumbnail = this.getThumbnailForScaffold(\n            scaffold,\n            this.entry.scaffoldViews,\n            this.entry.thumbnails,\n            index\n          );\n          let mimetype = '';\n          let thumbnailURL = undefined;\n          if (thumbnail) {\n            thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {\n              id,\n              datasetId: this.datasetId,\n              datasetVersion: this.datasetVersion,\n              file_path: thumbnail.dataset.path,\n              s3Bucket: this.s3Bucket,\n            });\n            mimetype = thumbnail.mimetype.name;\n          }\n          let action = {\n            label: capitalise(this.label),\n            resource: `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}${this.getS3Args()}`,\n            title: \"View 3D scaffold\",\n            type: \"Scaffold\",\n            discoverId: this.datasetId,\n            apiLocation: this.envVars.API_LOCATION,\n            version: this.datasetVersion,\n            banner: this.datasetThumbnail,\n            s3uri: this.entry.s3uri,\n            contextCardUrl: this.getContextCardUrl(i)\n          };\n          this.items['Scaffolds'].push({\n            id,\n            title: baseName(filePath),\n            type: \"Scaffold\",\n            thumbnail: thumbnailURL,\n            userData: action,\n            hideType: true,\n            mimetype\n          });\n        });\n      }\n    },\n    createSegmentationItems: function () {\n      if (this.entry.segmentation) {\n        this.entry.segmentation.forEach((segmentation) => {\n          const id = segmentation.id;\n          let filePath = segmentation.dataset.path;\n          filePath = filePath.replaceAll(\" \", \"_\");\n          filePath = filePath.replaceAll(\",\", \"_\");\n          const prefix = this.envVars.NL_LINK_PREFIX;\n          const resource = {\n            share_link: `${prefix}/dataviewer?datasetId=${this.datasetId}&version=${this.datasetVersion}&path=files/${filePath}`,\n          };\n          let action = {\n            label: capitalise(this.label),\n            resource: resource,\n            datasetId: this.datasetId,\n            s3uri: this.entry.s3uri,\n            title: \"View segmentation\",\n            type: \"Segmentation\",\n          };\n          const thumbnailURL = this.getSegmentationThumbnailURL(\n            this.envVars.API_LOCATION,\n            {\n              id,\n              datasetId: this.datasetId,\n              datasetVersion: this.datasetVersion,\n              segmentationFilePath: filePath,\n              s3Bucket: this.s3Bucket,\n            }\n          );\n          this.items['Segmentations'].push({\n            id,\n            title: baseName(filePath),\n            type: \"Segmentation\",\n            thumbnail: thumbnailURL,\n            userData: action,\n            hideType: true,\n            mimetype: 'image/png',\n          });\n        });\n      }\n    },\n    createSimulationItems: function () {\n      if (this.entry.simulation && this.entry.simulation.length > 0) {\n        let action = {\n          label: undefined,\n          apiLocation: this.envVars.API_LOCATION,\n          s3uri: this.entry.s3uri,\n          version: this.datasetVersion,\n          title: \"View simulation\",\n          type: \"Simulation\",\n          name: this.entry.name,\n          description: this.entry.description,\n          discoverId: this.datasetId,\n          dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`\n        };\n        this.items['Simulations'].push({\n          id: \"simulation\",\n          title: \" \",\n          type: \"Simulation\",\n          hideType: true,\n          hideTitle: true,\n          userData: action,\n        });\n      }\n    },\n    createVideoItems: function () {\n      if (this.entry.videos) {\n        this.entry.videos.forEach((video) => {\n          const filePath = this.getS3FilePath(\n            this.datasetId,\n            this.datasetVersion,\n            video.dataset.path\n          );\n          const linkUrl = `${this.envVars.ROOT_URL}/datasets/videoviewer?dataset_version=${this.datasetVersion}&dataset_id=${this.datasetId}&file_path=${filePath}&mimetype=${video.mimetype.name}`;\n          this.items['Videos'].push({\n            title: video.name,\n            type: \"Video\",\n            thumbnail: this.defaultVideoImg,\n            hideType: true,\n            link: linkUrl,\n          });\n        });\n      }\n    },\n    onResize: function () {\n      this.maxWidth = this.$el.clientWidth;\n      // this.$emit('resize', this.$el.clientWidth)\n    },\n    getContextCardUrl(scaffoldIndex){\n      if(!this.entry.contextualInformation || this.entry.contextualInformation.length == 0){\n        return undefined\n      } else {\n        // The line below checks if there is a context file for each scaffold. If there is not, we use the first context card for each scaffold.\n        let contextIndex = this.entry['abi-contextual-information'].length == this.entry.scaffolds.length ? scaffoldIndex : 0\n        return `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}${this.getS3Args()}`\n      }\n    }\n  },\n  computed: {\n    galleryItems() {\n      if (this.resetIndex) {\n        this.$refs.gallery.indicatorClicked(0);\n      }\n      let items = [...this.items[\"Dataset\"]];\n      if (this.category === \"All\") {\n        for (const [key, value] of Object.entries(this.items)) {\n          if (key !== \"Dataset\")\n            items = items.concat(value);\n        }\n        return items;\n      }\n      else\n        return this.items[this.category];\n    },\n  },\n  created: function () {\n    this.createSciCurnchItems();\n  },\n  watch: {\n    category: function() {\n      this.resetIndex = true;\n    },\n    galleryItems: function() {\n      this.resetIndex = false;\n    },\n    datasetBiolucida: {\n      deep: true,\n      immediate: true,\n      handler: function (biolucidaData) {\n        let items = [];\n        if (\"dataset_images\" in biolucidaData) {\n          items.push(\n            ...Array.from(biolucidaData.dataset_images, (dataset_image) => {\n              const thumbnailURL = this.getThumbnailURLFromBiolucida(\n                this.envVars.API_LOCATION,\n                {\n                  id: dataset_image.image_id,\n                }\n              );\n              const resource = {\n                share_link: dataset_image.share_link,\n                id: dataset_image.image_id,\n                itemId: dataset_image.sourcepkg_id,\n              };\n              let action = {\n                label: capitalise(this.label),\n                resource: resource,\n                datasetId: this.datasetId,\n                title: \"View image\",\n                name: capitalise(this.label),\n                type: \"Biolucida\",\n              };\n              return {\n                id: dataset_image.image_id,\n                title: `Image`,\n                type: \"Image\",\n                thumbnail: thumbnailURL,\n                userData: action,\n                mimetype: 'image/png',\n                hideType: true,\n              };\n            })\n          );\n        }\n        this.items['Images'] = items;\n      },\n    },\n  },\n  mounted() {\n    this.ro = new ResizeObserver(this.onResize).observe(this.$el);\n  },\n  destroyed() {\n    delete this.ro;\n  },\n};\n</script>\n\n<style scoped lang=\"scss\">\n.full-size {\n  height: 100%;\n  width: 244px;\n}\n\n.key-image-span.active {\n  transform: scale(1.16);\n  border: 4px $app-primary-color solid;\n}\n\n.key-image-span {\n  display: flex;\n  position: relative;\n}\n\n.overlay {\n  position: absolute;\n  right: 5px;\n  top: 5px;\n  width: 1.61em;\n  height: 1em;\n  border-radius: 3px;\n  opacity: 0.8;\n}\n\nimg {\n  vertical-align: bottom;\n}\n\na.prev,\na.next {\n  display: flex;\n  font-size: 3em;\n}\n\na.prev:not(.underline),\na.next:not(.underline) {\n  text-decoration: none;\n}\n\na.prev {\n  justify-content: flex-start;\n}\n\na.next {\n  justify-content: flex-end;\n}\n\n.standard-gallery {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: center;\n}\n\n.image-line {\n  display: flex;\n  margin-top: 1%;\n  margin-bottom: 1%;\n  flex-grow: 1;\n  justify-content: space-between;\n}\n.disabled {\n  opacity: 0.2;\n  cursor: default;\n}\n\n.rectangle {\n  height: 1em;\n  width: 2em;\n  border-radius: 3px;\n  background-color: #555;\n}\n\n.full-size ::v-deep .el-card {\n  border: 0px;\n}\n</style>\n"]}]}