@abi-software/map-side-bar 2.0.0-response.0 → 2.0.0

package/src/components/ImageGallery.vue

@@ -1,53 +1,48 @@
 <template>
   <div class="full-size">
-    <gallery
-      :bottomSpacer="bottomSpacer"
-      :cardWidth="10"
-      :items="galleryItems"
-      :max-width="maxWidth"
-      :show-indicator-bar="false"
-      :show-card-details="true"
-      :highlight-active="false"
-      :image-style="imageStyle"
-      :image-container-style="imageContainerStyle"
-      :body-style="bodyStyle"
-      :shadow="shadow"
-      @card-clicked="cardClicked"
-      ref="gallery"
-    />
+    <Gallery
+        :bottomSpacer="bottomSpacer"
+        :cardWidth="10"
+        :items="galleryItems"
+        :max-width="maxWidth"
+        :show-indicator-bar="false"
+        :show-card-details="true"
+        :highlight-active="false"
+        :image-style="imageStyle"
+        :image-container-style="imageContainerStyle"
+        :body-style="bodyStyle"
+        :shadow="shadow"
+        @card-clicked="cardClicked"
+        ref="gallery"
+      />
   </div>
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 const baseName = (str) => {
-  return str.split("\\").pop().split("/").pop();
-};
+  return str.split('\\').pop().split('/').pop()
+}
 
 const capitalise = function (string) {
-  return string.replace(/\b\w/g, (v) => v.toUpperCase());
-};
+  return string.replace(/\b\w/g, (v) => v.toUpperCase())
+}
 
-import GalleryHelper from "@abi-software/gallery/src/mixins/GalleryHelpers";
+import GalleryHelper from '@abi-software/gallery/src/mixins/GalleryHelpers.js'
 import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
 //provide the s3Bucket related methods and data.
-import S3Bucket from "../mixins/S3Bucket";
-import "@abi-software/gallery/dist/gallery.css";
+import S3Bucket from '../mixins/S3Bucket.vue'
 
 export default {
-  name: "ImageGallery",
+  name: 'ImageGallery',
   components: { Gallery },
-  inject: {
-    'alternateSearch' : {
-      default: undefined,
-    },
-  },  
   mixins: [GalleryHelper, S3Bucket],
   props: {
     datasetBiolucida: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
     },
     envVars: {
@@ -56,18 +51,17 @@ export default {
     },
     label: {
       type: String,
-      default: "",
+      default: '',
     },
     plots: {
       type: Array,
       default: () => {
-        return [];
+        return []
       },
     },
-    datasetId: [String, Number],
-    dataLocation: {
-      type: String,
-      default: "",
+    datasetId: {
+      type: Number,
+      default: -1,
     },
     datasetVersion: {
       type: Number,
@@ -75,16 +69,16 @@ export default {
     },
     datasetThumbnail: {
       type: String,
-      default: "",
+      default: '',
     },
     category: {
       type: String,
-      default: "All",
+      default: 'All',
     },
-    entry:  {
+    entry: {
       type: Object,
       default: () => {
-        return {};
+        return {}
       },
     },
   },
@@ -96,13 +90,13 @@ export default {
       items: {
         //Use the Images instead for Biolucida Images
         //"Biolucida Images": [],
-        'Dataset': [],
-        'Images': [],
-        'Scaffolds': [],
-        'Segmentations': [],
-        'Simulations': [],
-        'Videos': [],
-        'Plots': [],
+        Dataset: [],
+        Images: [],
+        Scaffolds: [],
+        Segmentations: [],
+        Simulations: [],
+        Videos: [],
+        Plots: [],
       },
       bodyStyle: { padding: '0px', background: '#ffffff' },
       imageContainerStyle: {
@@ -112,167 +106,155 @@ export default {
         alignItems: 'center',
         justifyContent: 'center',
       },
-      imageStyle: { maxWidth: '160px', maxHeight: '160px'},
-      shadow: "never",
+      imageStyle: { maxWidth: '160px', maxHeight: '160px' },
+      shadow: 'never',
       bottomSpacer: { minHeight: '0rem' },
       resetIndex: false,
-    };
+    }
   },
   methods: {
-    cardClicked: function(payload) {
-      this.$emit('card-clicked', payload);
+    cardClicked: function (payload) {
+      this.$emit('card-clicked', payload)
     },
     createSciCurnchItems: function () {
-      if (this.entry.s3uri) this.updateS3Bucket(this.entry.s3uri);
-      this.createDatasetItem();
-      if (this.alternateSearch) this.createScaffoldViewItems();
-      else this.createScaffoldItems();
-      this.createSimulationItems();
-      this.createPlotItems();
-      this.createSegmentationItems();
+      this.updateS3Bucket(this.entry.s3uri)
+      this.createDatasetItem()
+      this.createScaffoldItems()
+      this.createSimulationItems()
+      this.createPlotItems()
+      this.createSegmentationItems()
       /* Disable these two
       this.createImageItems();
       this.createVideoItems();
       */
     },
     createDatasetItem: function () {
-      const link = this.dataLocation;
-      let name = String(this.datasetId);
-      if (name.length <= 5) name = `Dataset ${name}`;
-      else name = "Dataset";
-
+      const link = `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`
       if (this.datasetThumbnail) {
         this.items['Dataset'].push({
           id: -1,
           //Work around gallery requires a truthy string
-          title: " ",
-          type: name,
+          title: ' ',
+          type: `Dataset ${this.datasetId}`,
           thumbnail: this.datasetThumbnail,
           link,
           hideType: true,
           hideTitle: true,
-        });
+        })
       }
     },
     createImageItems: function () {
       if (this.entry.images) {
         this.entry.images.forEach((image) => {
-          const filePath = image.dataset.path;
-          const id = image.identifier;
-          const linkUrl = `${this.envVars.ROOT_URL}/datasets/imageviewer?dataset_id=${this.datasetId}&dataset_version=${this.datasetVersion}&file_path=${filePath}&mimetype=${image.mimetype.name}`;
+          const filePath = image.dataset.path
+          const id = image.identifier
+          const linkUrl = `${this.envVars.ROOT_URL}/datasets/imageviewer?dataset_id=${this.datasetId}&dataset_version=${this.datasetVersion}&file_path=${filePath}&mimetype=${image.mimetype.name}`
           this.items['Images'].push({
             id,
             title: baseName(filePath),
-            type: "Image",
+            type: 'Image',
             link: linkUrl,
             hideType: true,
-          });
-        });
+          })
+        })
       }
     },
     createPlotItems: function () {
       if (this.entry.plots) {
         this.entry.plots.forEach((plot) => {
-          const filePath = plot.dataset.path;
-          const id = plot.identifier;
-          let thumbnailURL = undefined;
-          let mimetype = '';
-          let supplementalData = [];
-          let sourceUrl = "";
-          let metadata = undefined;
-          let filePathPrefix = ""; `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
+          const filePath = plot.dataset.path
+          const id = plot.identifier
+          const thumbnail = this.getThumbnailForPlot(
+            plot,
+            this.entry.thumbnails
+          )
+          let thumbnailURL = undefined
+          let mimetype = ''
+          if (thumbnail) {
+            
+            thumbnailURL = this.getImageURL(this.envVars.API_LOCATION, {
+              id,
+              prefix: this.getS3Prefix(),
+              file_path: thumbnail.dataset.path,
+              s3Bucket: this.s3Bucket,
+            })
+            mimetype = thumbnail.mimetype.name
+          }
           const plotAnnotation = plot.datacite;
+          const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.getS3Prefix()}files/`;
+          const sourceUrl = filePathPrefix + plot.dataset.path + this.getS3Args();
 
-          if (!this.alternateSearch) {
-            const thumbnail = this.getThumbnailForPlot(plot, this.entry.thumbnails);
-            if (thumbnail) {
-              thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {
-                id,
-                datasetId: this.datasetId,
-                datasetVersion: this.datasetVersion,
-                file_path: thumbnail.dataset.path,
-                s3Bucket: this.s3Bucket,
-              });
-              mimetype = thumbnail.mimetype.name;
-            }
-            
-            filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.datasetId}/${this.datasetVersion}/files/`;
-            sourceUrl = filePathPrefix + plot.dataset.path + this.getS3Args();
+          //plotAnnotation.supplemental_json_metadata.description can be undefined or
+          //contain an empty string causing an error with JSON.parse
+          let metadata = {}
+          try {
             metadata = JSON.parse(
               plotAnnotation.supplemental_json_metadata.description
-            );
-          } else {
-            thumbnailURL = this.datasetThumbnail;
-            mimetype = plot.additional_mimetype.name;
-            sourceUrl = this.entry.source_url_prefix + plot.dataset.path;
-            metadata = plotAnnotation.supplemental_json_metadata.description;
-            if (metadata !== "") {
-              metadata = JSON.parse(
-                plotAnnotation.supplemental_json_metadata.description.replaceAll("'", '"'));
-            }
-            filePathPrefix = this.entry.source_url_prefix;
+            )
+          } catch (error) {
+            console.warn(error)
           }
 
+          let supplementalData = []
           if (plotAnnotation.isDescribedBy) {
             supplementalData.push({
-              url: filePathPrefix + plotAnnotation.isDescribedBy.path
-            });
+              url: filePathPrefix + plotAnnotation.isDescribedBy.path,
+            })
           }
 
           const resource = {
-            dataSource: {url: sourceUrl},
+            dataSource: { url: sourceUrl },
             metadata,
-            supplementalData
+            supplementalData,
           }
 
           let action = {
             label: capitalise(this.label),
             resource: resource,
             s3uri: this.entry.s3uri,
-            title: "View plot",
-            type: "Plot",
-            discoverId: this.datasetId,
+            title: 'View plot',
+            type: 'Plot',
+            discoverId: this.discoverId,
             version: this.datasetVersion,
-          };
+          }
           this.items['Plots'].push({
             id,
             title: baseName(filePath),
-            type: "Plot",
+            type: 'Plot',
             thumbnail: thumbnailURL,
             userData: action,
             hideType: true,
-            mimetype
-          });
-        });
+            mimetype,
+          })
+        })
       }
     },
     createScaffoldItems: function () {
       if (this.entry.scaffolds) {
-        let index = 0;
+        let index = 0
         this.entry.scaffolds.forEach((scaffold, i) => {
-          const filePath = scaffold.dataset.path;
-          const id = scaffold.identifier;
+          const filePath = scaffold.dataset.path
+          const id = scaffold.identifier
           const thumbnail = this.getThumbnailForScaffold(
             scaffold,
             this.entry.scaffoldViews,
             this.entry.thumbnails,
             index
-          );
-          let mimetype = '';
-          let thumbnailURL = undefined;
+          )
+          let mimetype = ''
+          let thumbnailURL = undefined
           if (thumbnail) {
-            thumbnailURL = this.getImageURLFromS3(this.envVars.API_LOCATION, {
+            thumbnailURL = this.getImageURL(this.envVars.API_LOCATION, {
               id,
-              datasetId: this.datasetId,
-              datasetVersion: this.datasetVersion,
+              prefix: this.getS3Prefix(),
               file_path: thumbnail.dataset.path,
               s3Bucket: this.s3Bucket,
-            });
-            mimetype = thumbnail.mimetype.name;
+            })
+            mimetype = thumbnail.mimetype.name
           }
           let action = {
             label: capitalise(this.label),
-            resource: `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${filePath}${this.getS3Args()}`,
+            resource: `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`,
             title: "View 3D scaffold",
             type: "Scaffold",
             discoverId: this.datasetId,
@@ -280,70 +262,39 @@ export default {
             version: this.datasetVersion,
             banner: this.datasetThumbnail,
             s3uri: this.entry.s3uri,
-            contextCardUrl: this.getContextCardUrl(i)
-          };
+            contextCardUrl: this.getContextCardUrl(i),
+          }
           this.items['Scaffolds'].push({
             id,
             title: baseName(filePath),
-            type: "Scaffold",
+            type: 'Scaffold',
             thumbnail: thumbnailURL,
             userData: action,
             hideType: true,
-            mimetype
-          });
-        });
-      }
-    },
-    createScaffoldViewItems: function() {
-      if (this.entry.scaffoldViews) {
-        // let index = 0;
-        this.entry.scaffoldViews.forEach((scaffold) => {
-          const filePath = scaffold.dataset.path;
-          const id = scaffold.identifier;
-          let thumbnailURL = scaffold.image_url;
-          let action = {
-            label: capitalise(this.label),
-            resource:
-              this.entry.source_url_prefix + scaffold.datacite.isDerivedFrom.path,
-            viewUrl: this.entry.source_url_prefix + scaffold.dataset.path,
-            title: "View 3D scaffold",
-            type: "Scaffold",
-            discoverId: this.datasetId,
-            apiLocation: this.envVars.API_LOCATION,
-            version: this.datasetVersion,
-            banner: this.datasetThumbnail,
-            // contextCardUrl: this.getContextCardUrl(i),
-          };
-          this.items["Scaffolds"].push({
-            id,
-            title: baseName(filePath),
-            type: "Scaffold",
-            thumbnail: thumbnailURL,
-            userData: action,
-            hideType: true,
-          });
-        });
+            mimetype,
+          })
+        })
       }
     },
     createSegmentationItems: function () {
       if (this.entry.segmentation) {
         this.entry.segmentation.forEach((segmentation) => {
-          const id = segmentation.id;
-          let filePath = segmentation.dataset.path;
-          filePath = filePath.replaceAll(" ", "_");
-          filePath = filePath.replaceAll(",", "_");
-          const prefix = this.envVars.NL_LINK_PREFIX;
+          const id = segmentation.id
+          let filePath = segmentation.dataset.path
+          filePath = filePath.replaceAll(' ', '_')
+          filePath = filePath.replaceAll(',', '_')
+          const prefix = this.envVars.NL_LINK_PREFIX
           const resource = {
             share_link: `${prefix}/dataviewer?datasetId=${this.datasetId}&version=${this.datasetVersion}&path=files/${filePath}`,
-          };
+          }
           let action = {
             label: capitalise(this.label),
             resource: resource,
             datasetId: this.datasetId,
             s3uri: this.entry.s3uri,
-            title: "View segmentation",
-            type: "Segmentation",
-          };
+            title: 'View segmentation',
+            type: 'Segmentation',
+          }
           const thumbnailURL = this.getSegmentationThumbnailURL(
             this.envVars.API_LOCATION,
             {
@@ -353,17 +304,17 @@ export default {
               segmentationFilePath: filePath,
               s3Bucket: this.s3Bucket,
             }
-          );
+          )
           this.items['Segmentations'].push({
             id,
             title: baseName(filePath),
-            type: "Segmentation",
+            type: 'Segmentation',
             thumbnail: thumbnailURL,
             userData: action,
             hideType: true,
             mimetype: 'image/png',
-          });
-        });
+          })
+        })
       }
     },
     createSimulationItems: function () {
@@ -373,21 +324,21 @@ export default {
           apiLocation: this.envVars.API_LOCATION,
           s3uri: this.entry.s3uri,
           version: this.datasetVersion,
-          title: "View simulation",
-          type: "Simulation",
+          title: 'View simulation',
+          type: 'Simulation',
           name: this.entry.name,
           description: this.entry.description,
           discoverId: this.datasetId,
-          dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`
-        };
+          dataset: `${this.envVars.ROOT_URL}/datasets/${this.datasetId}?type=dataset`,
+        }
         this.items['Simulations'].push({
-          id: "simulation",
-          title: " ",
-          type: "Simulation",
+          id: 'simulation',
+          title: ' ',
+          type: 'Simulation',
           hideType: true,
           hideTitle: true,
           userData: action,
-        });
+        })
       }
     },
     createVideoItems: function () {
@@ -397,65 +348,69 @@ export default {
             this.datasetId,
             this.datasetVersion,
             video.dataset.path
-          );
-          const linkUrl = `${this.envVars.ROOT_URL}/datasets/videoviewer?dataset_version=${this.datasetVersion}&dataset_id=${this.datasetId}&file_path=${filePath}&mimetype=${video.mimetype.name}`;
+          )
+          const linkUrl = `${this.envVars.ROOT_URL}/datasets/videoviewer?dataset_version=${this.datasetVersion}&dataset_id=${this.datasetId}&file_path=${filePath}&mimetype=${video.mimetype.name}`
           this.items['Videos'].push({
             title: video.name,
-            type: "Video",
+            type: 'Video',
             thumbnail: this.defaultVideoImg,
             hideType: true,
             link: linkUrl,
-          });
-        });
+          })
+        })
       }
     },
     onResize: function () {
-      this.maxWidth = this.$el.clientWidth;
+      this.maxWidth = this.$el.clientWidth
       // this.$emit('resize', this.$el.clientWidth)
     },
-    getContextCardUrl(scaffoldIndex){
+    getContextCardUrl: function(scaffoldIndex){
       if(!this.entry.contextualInformation || this.entry.contextualInformation.length == 0){
         return undefined
       } else {
         // 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.
         let contextIndex = this.entry['abi-contextual-information'].length == this.entry.scaffolds.length ? scaffoldIndex : 0
-        return `${this.envVars.API_LOCATION}s3-resource/${this.datasetId}/${this.datasetVersion}/files/${this.entry.contextualInformation[contextIndex]}${this.getS3Args()}`
+        return `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${this.entry.contextualInformation[contextIndex]}${this.getS3Args()}`
+      }
+    },
+    getImageURL: function(apiEndpoint, info) {
+      let url = `${apiEndpoint}/s3-resource/${info.prefix}files/${info.file_path}?encodeBase64=true`
+      if (info.s3Bucket) {
+        url = url + `&s3BucketName=${info.s3Bucket}`
       }
+      return url
     },
-   },
+  },
   computed: {
     galleryItems() {
       if (this.resetIndex) {
-        this.$refs.gallery.indicatorClicked(0);
+        this.$refs.gallery.indicatorClicked(0)
       }
-      let items = [...this.items["Dataset"]];
-      if (this.category === "All") {
+      let items = [...this.items['Dataset']]
+      if (this.category === 'All') {
         for (const [key, value] of Object.entries(this.items)) {
-          if (key !== "Dataset")
-            items = items.concat(value);
+          if (key !== 'Dataset') items = items.concat(value)
         }
-        return items;
-      }
-      else
-        return this.items[this.category];
+        return items
+      } else return [...this.items[this.category]]
     },
   },
   created: function () {
-    this.createSciCurnchItems();
+    this.createSciCurnchItems()
   },
   watch: {
-    category: function() {
-      this.resetIndex = true;
+    category: function () {
+      this.resetIndex = true
     },
-    galleryItems: function() {
-      this.resetIndex = false;
+    galleryItems: function () {
+      this.resetIndex = false
     },
     datasetBiolucida: {
       deep: true,
       immediate: true,
       handler: function (biolucidaData) {
-        let items = [];
-        if ("dataset_images" in biolucidaData) {
+        let items = []
+        if ('dataset_images' in biolucidaData) {
           items.push(
             ...Array.from(biolucidaData.dataset_images, (dataset_image) => {
               const thumbnailURL = this.getThumbnailURLFromBiolucida(
@@ -463,46 +418,46 @@ export default {
                 {
                   id: dataset_image.image_id,
                 }
-              );
+              )
               const resource = {
                 share_link: dataset_image.share_link,
                 id: dataset_image.image_id,
                 itemId: dataset_image.sourcepkg_id,
-              };
+              }
               let action = {
                 label: capitalise(this.label),
                 resource: resource,
                 datasetId: this.datasetId,
-                title: "View image",
+                title: 'View image',
                 name: capitalise(this.label),
-                type: "Biolucida",
-              };
+                type: 'Biolucida',
+              }
               return {
                 id: dataset_image.image_id,
                 title: `Image`,
-                type: "Image",
+                type: 'Image',
                 thumbnail: thumbnailURL,
                 userData: action,
                 mimetype: 'image/png',
                 hideType: true,
-              };
+              }
             })
-          );
+          )
         }
-        this.items['Images'] = items;
+        this.items['Images'] = items
       },
     },
   },
   mounted() {
-    this.ro = new ResizeObserver(this.onResize).observe(this.$el);
+    this.ro = new ResizeObserver(this.onResize).observe(this.$el)
   },
-  destroyed() {
-    delete this.ro;
+  unmounted() {
+    delete this.ro
   },
-};
+}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .full-size {
   height: 100%;
   width: 244px;
@@ -510,7 +465,7 @@ export default {
 
 .key-image-span.active {
   transform: scale(1.16);
-  border: 4px #8300bf solid;
+  border: 4px $app-primary-color solid;
 }
 
 .key-image-span {
@@ -577,7 +532,7 @@ a.next {
   background-color: #555;
 }
 
-.full-size >>> .el-card {
+.full-size :deep(.el-card) {
   border: 0px;
 }
 </style>