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