@abi-software/gallery 0.2.1 → 0.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/gallery",
-  "version": "0.2.1",
+  "version": "0.3.0-beta.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/hsorby/mapcore-gallery.git"
@@ -17,6 +17,8 @@
   "main": "dist/gallery.common.js",
   "dependencies": {
     "@babel/code-frame": "^7.12.11",
+    "axios": "^0.26.1",
+    "babel-plugin-component": "^1.1.1",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.0",
     "vue": "^2.6.11"
@@ -34,6 +36,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "prettier": "^2.2.1",
+    "vue-svg-inline-loader": "^2.1.3",
     "vue-template-compiler": "^2.6.11"
   }
 }

package/src/assets/logo-sparc-wave-primary.svg

@@ -0,0 +1 @@
+<svg id="logo-sparc-wave-primary" data-name="logo-sparc-wave-primary" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 190.5854"><defs><linearGradient id="linear-gradient" y1="96.3505" x2="400" y2="96.3505" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b00bf"/><stop offset="1" stop-color="#bc00fc"/></linearGradient></defs><title>SPARC Logo</title><path d="M396.6976,128.6248l-146.2735-3.38a6.5358,6.5358,0,0,0-6.1378,3.9236l-.0612.1407-13.673,31.4482L202.9416,9.5333l-.01-.0685a8.9823,8.9823,0,0,0-17.6624-.0114L163.673,125.3819,3.298,129.2886a3.38,3.38,0,0,0,.0269,6.7592L169.34,138.7635a6.5939,6.5939,0,0,0,6.5373-5.1457l.0571-.2546,17.8534-79.5649L221.26,185.1237l.0256.1243A6.7593,6.7593,0,0,0,234.092,186.52L254.9005,138.66l141.7971-3.2762a3.3805,3.3805,0,0,0,0-6.7592Z" style="fill:url(#linear-gradient)"/><path d="M25.6793,0C41.3957,0,51.057,10.0926,51.057,26.0972v9.5162H36.2053V26.0972c0-7.3532-3.8945-11.8219-10.526-11.8219-6.7768,0-10.6691,4.4687-10.6691,11.8219,0,3.8945,1.2982,7.3533,5.4786,11.3908l19.754,18.601C46.5861,62.1441,52.21,68.7778,52.21,79.88c0,16.0047-9.95,26.0973-25.9543,26.0973C10.108,105.9776.1585,95.885.1585,79.88V70.362H15.01V79.88c0,7.3533,4.0375,11.822,11.2455,11.822,7.065,0,11.1025-4.4687,11.1025-11.822,0-4.4709-2.1628-8.6514-6.0551-12.2576L11.1158,48.7357C3.043,41.2372.1585,34.8939.1585,25.666.1585,10.0926,9.82,0,25.6793,0Z" style="fill:#0e0e19"/><path d="M99.7971,69.7856v35.1821H84.9454V1.01h25.3755c16.0047,0,26.0973,10.0926,26.0973,26.0973V43.6883c0,16.15-10.0926,26.0973-26.0973,26.0973Zm10.3808-13.9849c7.2081,0,11.3908-4.3257,11.3908-11.6789V26.6759c0-7.21-4.1827-11.6811-11.3908-11.6811H99.7971V55.8007Z" style="fill:#0e0e19"/><path d="M278.5812,108.147H263.73V4.1893h26.0972c16.0047,0,26.0973,10.0926,26.0973,26.0972v14.13c0,9.95-4.3257,17.7363-11.3908,22.205,4.1827,12.6889,10.0926,29.9917,13.8418,41.5254h-15.14L290.6914,70.3708h-12.11Zm11.1-51.7632c7.21,0,11.3907-4.3257,11.3907-11.5338V29.8553c0-7.21-4.18-11.6812-11.3907-11.6812h-11.1v38.21Z" style="fill:#0e0e19"/><path d="M399.844,73.5414V83.06c0,16.0047-9.9474,26.0973-25.9521,26.0973-16.15,0-26.0972-10.0926-26.0972-26.0973V29.2766c0-16.0046,9.9473-26.0972,26.0972-26.0972,16.0047,0,25.9521,10.0926,25.9521,26.0972v9.5161h-14.85V29.2766c0-7.3532-4.0374-11.822-11.1025-11.822-7.21,0-11.2477,4.4688-11.2477,11.822V83.06c0,7.3533,4.0375,11.822,11.2477,11.822,7.0651,0,11.1025-4.4687,11.1025-11.822V73.5414Z" style="fill:#0e0e19"/></svg>

package/src/components/Card.vue

@@ -1,7 +1,10 @@
 <template>
-  <el-card :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
+  <el-card :shadow="shadow" :body-style="bodyStyle" :style="{ padding: '0px', maxWidth: width + 'rem' }" class="card">
     <div v-loading="!isReady">
-      <img :src="data.thumbnail" alt="thumbnail loading ..." />
+      <div :style="imageContainerStyle">
+        <img v-if="useDefaultImg" src="../assets/logo-sparc-wave-primary.svg" svg-inline :style="imageStyle" />
+        <img v-else :src="thumbnail" alt="thumbnail loading ..." :style="imageStyle" />
+      </div>
       <div v-if="false" class="image-overlay">
         <div
           class="triangle-right-corner"
@@ -21,18 +24,45 @@
         <p>
           <b>{{ data.type }}</b>
         </p>
-        <el-tooltip :content="data.title" placement="top">
-          <p class="title">
-            {{ data.title }}
-          </p>
-        </el-tooltip>
-        <el-button @click.prevent="openLinkInNewTab"> View {{ data.type }}</el-button>
+        <el-popover ref="galleryPopover" :content="data.title" placement="top" trigger="hover" popper-class="gallery-popper" />
+        <p class="title" v-popover:galleryPopover>
+          {{ data.title }}
+        </p>
+        <el-button class="button" @click.prevent="cardClicked"> View {{ data.type }}</el-button>
       </div>
     </div>
   </el-card>
 </template>
 
 <script>
+// import { SvgIcon } from '@abi-software/svg-sprite'
+import axios from 'axios'
+import Vue from 'vue'
+import { Button, Card, Popover } from 'element-ui'
+Vue.use(Button)
+Vue.use(Card)
+Vue.use(Popover)
+
+function isValidHttpUrl(string) {
+  let url = undefined
+
+  try {
+    url = new URL(string)
+  } catch (_) {
+    return false
+  }
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}
+
+const getRequest = async (url, params, timeout) => {
+  return await axios({
+    method: 'get',
+    url,
+    params,
+    timeout,
+  })
+}
+
 export default {
   name: 'GalleryCard',
   props: {
@@ -51,16 +81,40 @@ export default {
     showCardDetails: {
       type: Boolean,
     },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return { padding: '20px', background: '#ffffff' }
+      },
+    },
+    imageStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    imageContainerStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    shadow: {
+      type: String,
+      default: 'always',
+    },
   },
   data() {
     return {
       ro: null,
       triangleSize: 4,
+      thumbnail: undefined,
+      useDefaultImg: false,
     }
   },
   computed: {
     isReady() {
-      return this.data.title && this.data.thumbnail && this.data.link
+      return this.data.title && (this.thumbnail || this.useDefaultImg) && (this.data.link || this.data.userData)
     },
     imageHeight() {
       return this.showCardDetails ? this.height * 0.525 : this.height
@@ -79,19 +133,89 @@ export default {
     },
   },
   methods: {
-    openLinkInNewTab() {
-      const link = document.createElement('a')
-      link.href = this.data.link
-      link.target = '_blank'
-      document.body.appendChild(link)
-      link.click()
-      link.remove()
+    cardClicked: function () {
+      if (this.data.link) {
+        const link = document.createElement('a')
+        link.href = this.data.link
+        link.target = '_blank'
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+      }
+      if (this.data.userData) {
+        this.$emit('card-clicked', this.data.userData)
+      }
+    },
+    downloadThumbnail: function (url, info) {
+      getRequest(url, {}, 11000).then(
+        (response) => {
+          let data = response.data
+          if (data.startsWith('data:')) {
+            this.thumbnail = response.data
+          } else {
+            if (this.data.mimetype) {
+              this.thumbnail = `data:${this.data.mimetype};base64,${response.data}`
+            } else {
+              this.thumbnail = response.data
+            }
+          }
+        },
+        (reason) => {
+          if (reason.message.includes('timeout') && reason.message.includes('exceeded') && info.fetchAttempts < 3) {
+            info.fetchAttempts += 1
+            this.downloadThumbnail(url, info)
+          } else {
+            this.useDefaultImg = true
+          }
+        }
+      )
+    },
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler: function () {
+        this.thumbnail = undefined
+        this.useDefaultImg = false
+        if (this.data.thumbnail) {
+          if (isValidHttpUrl(this.data.thumbnail) && this.data.mimetype) {
+            this.downloadThumbnail(this.data.thumbnail, { fetchAttempts: 0 })
+          } else {
+            this.thumbnail = this.data.thumbnail
+          }
+        } else {
+          this.useDefaultImg = true
+        }
+      },
     },
   },
 }
 </script>
 
 <style scoped>
+.button {
+  z-index: 10;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  background-color: #8300bf;
+  border: #8300bf;
+  color: white;
+  cursor: pointer;
+  margin-top: 8px;
+}
+
+.button:hover {
+  background: #8300bf;
+  box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.25);
+  color: #fff;
+}
+
 .card {
   position: relative;
 }
@@ -126,3 +250,22 @@ p.bold {
   border-top: solid #8300bf;
 }
 </style>
+
+<style>
+.gallery-popper {
+  background: #f3ecf6 !important;
+  border: 1px solid #8300bf;
+  border-radius: 4px;
+  color: #303133 !important;
+  font-size: 12px;
+  line-height: 1rem;
+  height: 1rem;
+  padding: 10px;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow {
+  border-top-color: #8300bf !important;
+}
+.gallery-popper.el-popper[x-placement^='top'] .popper__arrow:after {
+  border-top-color: #f3ecf6 !important;
+}
+</style>

package/src/components/Gallery.vue

@@ -1,21 +1,33 @@
 <template>
   <div ref="myButton" class="gallery">
     <div class="gallery-strip">
-      <a href="#" :class="['oval', 'prev', { disabled: !isPrevPossible }]" @click.prevent="goPrev">
+      <a v-if="items.length > 1" href="#" :class="['oval', 'prev', { disabled: !isPrevPossible }]" @click.prevent="goPrev">
         <span class="progress-button">&lsaquo;</span>
       </a>
+      <div v-else style="width: 2rem" />
       <div class="filler" />
       <div class="card-line">
         <span v-for="(item, index) in windowedItems" :key="'card_' + index" :class="['key-image-span', { active: isActive(index) }]">
-          <card :data="item" :width="cardWidth" :height="cardHeight" :show-card-details="showCardDetails" />
+          <card
+            :data="item"
+            :body-style="bodyStyle"
+            :image-container-style="imageContainerStyle"
+            :image-style="imageStyle"
+            :width="cardWidth"
+            :height="cardHeight"
+            :shadow="shadow"
+            :show-card-details="showCardDetails"
+            @card-clicked="cardClicked"
+          />
         </span>
       </div>
       <div class="filler" />
-      <a href="#" :class="['oval', 'next', { disabled: !isNextPossible }]" @click.prevent="goNext">
+      <a v-if="items.length > 1" href="#" :class="['oval', 'next', { disabled: !isNextPossible }]" @click.prevent="goNext">
         <span class="progress-button">&rsaquo;</span>
       </a>
+      <div v-else style="width: 2rem" />
     </div>
-    <div v-if="canShowIndicatorBar" class="bottom-spacer" />
+    <div v-if="canShowIndicatorBar" :style="bottomSpacer" />
     <index-indicator v-if="canShowIndicatorBar" :count="itemCount" :current="currentIndex" @clicked="indicatorClicked" />
   </div>
 </template>
@@ -61,6 +73,30 @@ export default {
       type: Boolean,
       default: true,
     },
+    bodyStyle: {
+      type: Object,
+      default: () => {
+        return { padding: '20px', background: '#ffffff' }
+      },
+    },
+    bottomSpacer: {
+      type: Object,
+      default: () => {
+        return { minHeight: '4rem' }
+      },
+    },
+    imageContainerStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    imageStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
     metaData: {
       type: Object,
       default: () => {
@@ -74,6 +110,10 @@ export default {
       type: String,
       default: '',
     },
+    shadow: {
+      type: String,
+      default: 'always',
+    },
   },
   data() {
     return {
@@ -81,6 +121,7 @@ export default {
       currentIndex: 0,
       controlHeight: 2,
       controlWidth: 2,
+      visibleIndecies: [],
     }
   },
   computed: {
@@ -108,7 +149,7 @@ export default {
       const buttonPx = convertRemToPixels(2)
       const cardWidthPx = convertRemToPixels(this.cardWidth)
       const cardItems = (this.maxWidth - 2 * buttonPx - 2 * cardSpacingPx) / (1.1 * cardWidthPx)
-      return Math.floor(cardItems)
+      return Math.max(1, Math.floor(cardItems))
     },
     canShowIndicatorBar() {
       const indicatorWidth = convertRemToPixels(1)
@@ -135,9 +176,15 @@ export default {
     },
   },
   methods: {
+    cardClicked(payload) {
+      this.$emit('card-clicked', payload)
+    },
     isActive(index) {
       return this.currentIndex - this.valueAdjustment === index && this.highlightActive
     },
+    isVisible(index) {
+      return this.visibleIndecies.includes(index)
+    },
     goNext() {
       this.currentIndex += 1
     },
@@ -150,6 +197,40 @@ export default {
       }
     },
   },
+  created() {
+    this._visibleIndecies = []
+  },
+  watch: {
+    currentIndex: {
+      handler: function () {
+        const oddImagesVisible = this.numberOfItemsVisible % 2 === 1
+        let halfVisible = this.numberOfItemsVisible / 2
+        if (oddImagesVisible) {
+          halfVisible = (this.numberOfItemsVisible - 1) / 2
+        }
+        let rawIndicies = [this.currentIndex]
+        for (let i = 1; i <= halfVisible; i++) {
+          rawIndicies.push(this.currentIndex + i)
+          rawIndicies.push(this.currentIndex - i)
+        }
+
+        if (!oddImagesVisible) {
+          rawIndicies.pop()
+        }
+        this.visibleIndecies = []
+        for (let v of rawIndicies) {
+          if (v < 0) {
+            this.visibleIndecies.push(v + this.numberOfItemsVisible)
+          } else if (v >= this.itemCount) {
+            this.visibleIndecies.push(v - this.numberOfItemsVisible)
+          } else {
+            this.visibleIndecies.push(v)
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
 }
 </script>
 
@@ -182,10 +263,7 @@ export default {
 .progress-button {
   font-size: 1.5rem;
   font-weight: bold;
-}
-
-.bottom-spacer {
-  min-height: 4rem;
+  color: #8300bf;
 }
 
 .filler {

package/src/mixins/GalleryHelpers.js

@@ -0,0 +1,105 @@
+import axios from 'axios'
+
+const getRequest = async (url, params, timeout) => {
+  return await axios({
+    method: "get",
+    url,
+    params,
+    timeout
+  })
+}
+
+export default {
+  data() {
+    return {
+      defaultImg: require('../assets/logo-sparc-wave-primary.svg'),
+    }
+  },
+  methods: {
+    /**
+     * Returns a file path for S3.
+     * @param {String} dataset_id dataset id.
+     * @param {String} dataset_version dataset version.
+     * @param {String} file_path file path.
+     * @returns {String} full path to S3 file.
+     */
+    getS3FilePath(dataset_id, dataset_version, file_path) {
+      const encoded_file_path = encodeURIComponent(file_path)
+      return `${dataset_id}/${dataset_version}/files/${encoded_file_path}`
+    },
+    findEntryWithPathInArray(array, path) {
+      if (path && array) {
+        for (let i = 0; i < array.length; i++) {
+          if (path === array[i].dataset.path)
+            return array[i];
+        }
+      }
+      return undefined;
+    },
+    getThumbnailForPlot(plot, thumbnails) {
+      if (thumbnails && plot) {
+        return this.findEntryWithPathInArray(thumbnails, plot.datacite.isSourceOf.path[0]);
+      }
+      return undefined;
+    },
+    getThumbnailForScaffold(scaffold, scaffoldViews, thumbnails, index) {
+      if (thumbnails && (thumbnails.length > 0)) {
+        let thumbnail = undefined;
+        if (scaffold && scaffoldViews) {
+          const view = this.findEntryWithPathInArray(scaffoldViews, scaffold.datacite.isSourceOf.path[0])
+          if (view) {
+            thumbnail = this.findEntryWithPathInArray(thumbnails, view.datacite.isSourceOf.path[0]);
+          }
+        }
+        if (thumbnail) {
+          return thumbnail
+        } else if (index < thumbnails.length) {
+          return thumbnails[index]
+        }
+      }
+      return undefined;
+    },
+    getImageURLFromS3(apiEndpoint, info) {
+      return `${apiEndpoint}/s3-resource/${info.datasetId}/${info.datasetVersion}/files/${info.file_path}?encodeBase64=true`
+    },
+    getSegmentationThumbnailURL(apiEndpoint, info) {
+      let endpoint = `${apiEndpoint}/thumbnail/neurolucida`
+      endpoint = endpoint + `?datasetId=${info.datasetId}`
+      endpoint = endpoint + `&version=${info.datasetVersion}`
+      endpoint = endpoint + `&path=files/${info.segmentationFilePath}`
+      return endpoint
+    },
+    getThumbnailURLFromBiolucida(apiEndpoint, info) {
+      return`${apiEndpoint}/thumbnail/${info.id}`
+    },
+    getImageInfoFromBiolucida(apiEndpoint, items, info) {
+      const endpoint = `${apiEndpoint}/image/${info.id}`
+      const params = { }
+      getRequest(endpoint, params, 20000)
+        .then(
+          response => {
+            let item = items.find(x => x.id === info.id)
+            const name = response.name
+            if (name) {
+              this.$set(item, 'title', name.substring(0, name.lastIndexOf('.')))
+            }
+          },
+          reason => {
+            if (
+              reason.message.includes('timeout') &&
+              reason.message.includes('exceeded') &&
+              info.fetchAttempts < 3
+            ) {
+              info.fetchAttempts += 1
+              this.getImageInfoFromBiolucida(apiEndpoint, items, info)
+            } else {
+              let item = items.find(x => x.id === info.id)
+              this.$set(item, 'thumbnail', this.defaultImg)
+            }
+
+            return Promise.reject('Maximum iterations reached.')
+          }
+        )
+    }
+  }
+};

package/vue.config.js

@@ -1,4 +1,12 @@
 // vue.config.js
 module.exports = {
+  chainWebpack: config => {
+    // GraphQL Loader
+    config.module
+      .rule('vue')
+      .use('vue-svg-inline-loader')
+        .loader('vue-svg-inline-loader')
+        .end()
+  },
   css: { extract: false },
 }