@abi-software/map-side-bar 2.14.1-simulation.0 → 2.14.1-simulation.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.1-simulation.0",
+  "version": "2.14.1-simulation.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -19,6 +19,7 @@
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
+      <el-button @click="displayFileInfo()">Display file info</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -367,6 +368,10 @@ export default {
     },
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
+    },
+    displayFileInfo: function() {
+      this.$refs.sideBar.displayFileInfo(1024, "csv", "reveal")
+
     }
   },
   mounted: async function () {

package/src/components/BadgesGroup.vue

@@ -73,6 +73,7 @@ export default {
         this.addToCategories(this.entry.flatmaps, 'Flatmaps')
         this.addToCategories(this.entry.plots, 'Plots')
         this.addToCategories(this.entry.scaffolds, 'Scaffolds')
+        this.addToCategories(this.entry['protocol-data'], 'Protocol Data')
         this.addSimulationsToCategories(this.entry.simulation)
         /** disable the following
         this.addToCategories(this.entry.images, 'Images');

package/src/components/DatasetCard.vue

@@ -6,12 +6,7 @@
         <span class="card-left">
           <ImageGallery
             v-if="!loading && discoverId"
-            :datasetId="discoverId"
-            :datasetVersion="version"
-            :entry="entry"
-            :envVars="envVars"
-            :label="label"
-            :datasetThumbnail="thumbnail"
+            :items="items"
             :category="currentCategory"
             @card-clicked="galleryClicked"
             @datalink-clicked="galleryDatalinkClicked"
@@ -44,7 +39,15 @@
               @categoryChanged="categoryChanged"
             />
           </div>
-
+          <div v-if="totalFiles" class="browsable-list" @click="openFiles">
+            <el-button
+              @click="openFileBrowser"
+              size="small"
+              class="button"
+              :icon="ElIconView"
+              >Open file browser</el-button
+            >
+          </div>
           <!-- Copy to clipboard button container -->
           <div class="float-button-container">
             <CopyToClipboard :content="copyContent" />
@@ -56,6 +59,15 @@
 </template>
 
 <script>
+/* eslint-disable no-alert, no-console */
+const baseName = (str) => {
+  return str.split('\\').pop().split('/').pop()
+}
+
+const capitalise = function (string) {
+  return string.replace(/\b\w/g, (v) => v.toUpperCase())
+}
+
 /* eslint-disable no-alert, no-console */
 import { View as ElIconView } from '@element-plus/icons-vue'
 import BadgesGroup from './BadgesGroup.vue'
@@ -68,7 +80,10 @@ import speciesMap from './species-map.js'
 import ImageGallery from './ImageGallery.vue'
 import MissingImage from '@/../assets/missing-image.svg'
 import { CopyToClipboard } from '@abi-software/map-utilities';
+import S3Bucket from '../mixins/S3Bucket.vue';
 import '@abi-software/map-utilities/dist/style.css';
+import GalleryHelper from '@abi-software/gallery/src/mixins/GalleryHelpers.js'
+import { resolveURL } from "./scripts/utilities.js";
 
 export default {
   data() {
@@ -84,6 +99,7 @@ export default {
     Icon,
     CopyToClipboard,
   },
+  mixins: [GalleryHelper, S3Bucket],
   props: {
     /**
      * Object containing information for
@@ -103,6 +119,14 @@ export default {
       thumbnail: MissingImage,
       dataLocation: this.entry.doi,
       discoverId: undefined,
+      items: {
+        Dataset: [],
+        Flatmaps:[],
+        Scaffolds: [],
+        Simulations: [],
+        Plots: [],
+        "Protocol Data": [],
+      },
       loading: true,
       version: 1,
       lastDoi: undefined,
@@ -127,6 +151,15 @@ export default {
       }
       return text
     },
+    totalFiles: function() {
+      let total = 0
+      Object.keys(this.items).forEach(key => {
+        if (key !== 'Dataset') {
+          total += this.items[key].length
+        }
+      });
+      return total
+    },
     samples: function () {
       let text = ''
       if (this.entry.species) {
@@ -170,15 +203,383 @@ export default {
     categoryChanged: function (name) {
       this.currentCategory = name
     },
+    createSciCurnchItems: function () {
+      if (this.entry.detailsReady) {
+        this.updateS3Bucket(this.entry.s3uri)
+        this.createDatasetItem()
+        this.createFlatmapItems()
+        this.createScaffoldItems()
+        this.createSimulationItems()
+        this.createPlotItems()
+        this.createProtocolDataItems()
+        this.$nextTick(() => {
+          this.$emit("fileInfoReady", {instance: this, id: this.discoverId})
+        })
+      }
+
+      /* Disable these two
+      this.createImageItems();
+      this.createVideoItems();
+      */
+    },
+    createDatasetItem: function () {
+      const link = `${this.envVars.ROOT_URL}/datasets/${this.discoverId}?type=dataset`
+      if (this.thumbnail) {
+        this.items['Dataset'].push({
+          id: -1,
+          //Work around gallery requires a truthy string
+          title: ' ',
+          type: `Dataset ${this.discoverId}`,
+          thumbnail: this.thumbnail,
+          link,
+          hideType: true,
+          hideTitle: true,
+        })
+      }
+    },
+    createFlatmapItems: function () {
+      if (this.entry.flatmaps) {
+        this.entry.flatmaps.forEach((flatmap) => {
+          if (flatmap.associated_flatmap?.identifier) {
+            const filePath = flatmap.dataset.path
+            const id = flatmap.identifier
+            let thumbnailURL = undefined
+            if (flatmap.thumbnail?.url) {
+              thumbnailURL = resolveURL(flatmap.thumbnail.url,
+                this.envVars.TEST_DATA_LOCATION)
+            }
+            let mimetype = ''
+            if (!thumbnailURL) {
+              let thumbnail = this.getThumbnailForPlot(
+                flatmap,
+                this.entry.thumbnails
+              )
+              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
+              }
+            }
+            let action = {
+              label: capitalise(this.label),
+              resource: flatmap.associated_flatmap.identifier,
+              title: 'View Flatmap',
+              type: 'Flatmap',
+              discoverId: this.discoverId,
+              version: this.version,
+            }
+            this.items['Flatmaps'].push({
+              id,
+              title: baseName(filePath),
+              filePath: filePath,
+              type: 'Flatmap',
+              thumbnail: thumbnailURL,
+              userData: action,
+              hideType: true,
+              mimetype,
+            })
+          }
+        })
+      }
+    },
+    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.discoverId}&dataset_version=${this.version}&file_path=${filePath}&mimetype=${image.mimetype.name}`
+          this.items['Images'].push({
+            id,
+            title: baseName(filePath),
+            filePath: filePath,
+            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
+          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();
+
+          //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
+            )
+          } catch (error) {
+            console.warn(error)
+          }
+
+          let supplementalData = []
+          if (plotAnnotation.isDescribedBy) {
+            supplementalData.push({
+              url: filePathPrefix + plotAnnotation.isDescribedBy.path,
+            })
+          }
+
+          const resource = {
+            dataSource: { url: sourceUrl },
+            metadata,
+            supplementalData,
+          }
+
+          let action = {
+            label: capitalise(this.label),
+            resource: resource,
+            s3uri: this.entry.s3uri,
+            title: 'View plot',
+            type: 'Plot',
+            discoverId: this.discoverId,
+            version: this.version,
+          }
+          this.items['Plots'].push({
+            id,
+            title: baseName(filePath),
+            filePath: filePath,
+            type: 'Plot',
+            thumbnail: thumbnailURL,
+            userData: action,
+            hideType: true,
+            mimetype,
+          })
+        })
+      }
+    },
+    createScaffoldItems: function () {
+      if (this.entry.scaffolds) {
+        let index = 0
+        this.entry.scaffolds.forEach((scaffold, i) => {
+          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
+          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
+          }
+          let action = {
+            label: capitalise(this.label),
+            resource: `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`,
+            title: "View 3D scaffold",
+            type: "Scaffold",
+            discoverId: this.discoverId,
+            apiLocation: this.envVars.API_LOCATION,
+            version: this.version,
+            banner: this.datasetThumbnail,
+            s3uri: this.entry.s3uri,
+            contextCardUrl: this.getContextCardUrl(i),
+          }
+          this.items['Scaffolds'].push({
+            id,
+            title: baseName(filePath),
+            filePath: filePath,
+            type: 'Scaffold',
+            thumbnail: thumbnailURL,
+            userData: action,
+            hideType: true,
+            mimetype,
+          })
+        })
+      }
+    },
+    createSimulationItems: function () {
+      if (this.entry.simulation) {
+        this.entry.simulation.forEach((simulation) => {
+          if (simulation.additional_mimetype.name === "application/x.vnd.abi.simulation+json") {
+            let action = {
+              label: undefined,
+              apiLocation: this.envVars.API_LOCATION,
+              s3uri: this.entry.s3uri,
+              version: this.version,
+              title: 'View simulation',
+              type: 'Simulation',
+              name: this.entry.name,
+              description: this.entry.description,
+              discoverId: this.discoverId,
+              dataset: `${this.envVars.ROOT_URL}/datasets/${this.discoverId}?type=dataset`,
+            }
+            this.items['Simulations'].push({
+              id: 'simulation',
+              title: ' ',
+              type: 'Simulation',
+              hideType: true,
+              hideTitle: true,
+              userData: action,
+            })
+          } else {
+            const filePath = simulation.dataset.path
+            const id = simulation.identifier
+            //Despite of the name, this method can be used to retreive
+            //the thumbnail information for any none scaffold type thumbnail
+            let thumbnailURL = undefined;
+            if (simulation.thumbnail?.url) {
+              thumbnailURL = resolveURL(simulation.thumbnail.url,
+                this.envVars.TEST_DATA_LOCATION)
+            }
+            let mimetype = ''
+            if (!thumbnailURL) {
+              const thumbnail = this.getThumbnailForPlot(
+                simulation,
+                this.entry.thumbnails
+              )
+              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
+              }
+            }
+            let resource = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`
+            if (simulation.resource?.url) {
+              resource = resolveURL(simulation.resource.url,
+                this.envVars.TEST_DATA_LOCATION)
+            }
+            let action = {
+              label: capitalise(this.label),
+              resource: resource,
+              s3uri: this.entry.s3uri,
+              title: 'View simulation',
+              type: 'Simulation',
+              discoverId: this.discoverId,
+              version: this.version,
+            }
+            this.items['Simulations'].push({
+              id,
+              title: baseName(filePath),
+              filePath: filePath,
+              type: 'Simulation',
+              thumbnail: thumbnailURL,
+              userData: action,
+              hideType: true,
+              mimetype,
+            })
+          }
+        })
+      }
+    },
+    createProtocolDataItems: function () {
+      if (this.entry['protocol-data']) {
+        this.entry['protocol-data'].forEach((protocol) => {
+          //Despite of the name, this method can be used to retreive
+          //the thumbnail information for any none scaffold type thumbnail
+          let thumbnailURL = protocol.thumbnail
+          let mimetype = ''
+          let resource = protocol.protocol
+          let action = {
+            label: capitalise(this.label),
+            csv_file: protocol.csv_file,
+            columns: protocol.columns,
+            resource: resource,
+            title: 'View protocol',
+            type: 'Protocol',
+            discoverId: this.discoverId,
+            version: this.version,
+          }
+          this.items['Protocol Data'].push({
+            title: baseName(protocol.csv_file),
+            description: protocol.description,
+            filePath: protocol.csv_file,
+            protocol: protocol.protocol,
+            columns: protocol.columns,
+            type: 'Protocol',
+            thumbnail: thumbnailURL,
+            userData: action,
+            hideType: true,
+            mimetype,
+          })
+        })
+      }
+    },
+    createVideoItems: function () {
+      if (this.entry.videos) {
+        this.entry.videos.forEach((video) => {
+          const filePath = this.getS3FilePath(
+            this.discoverId,
+            this.version,
+            video.dataset.path
+          )
+          const linkUrl = `${this.envVars.ROOT_URL}/datasets/videoviewer?dataset_version=${this.version}&dataset_id=${this.discoverId}&file_path=${filePath}&mimetype=${video.mimetype.name}`
+          this.items['Videos'].push({
+            title: video.name,
+            type: 'Video',
+            thumbnail: this.defaultVideoImg,
+            hideType: true,
+            link: linkUrl,
+          })
+        })
+      }
+    },
     galleryClicked: function (payload) {
       this.propogateCardAction(payload)
     },
     galleryDatalinkClicked: function (payload) {
       EventBus.emit('datalink-clicked', payload); // Pass to mapintegratedvuer
     },
+    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.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
+    },
     openDataset: function () {
       window.open(this.dataLocation, '_blank')
     },
+    openFileBrowser: function() {
+      this.$emit('openFileBrowser', {datasetID: this.discoverId, items: this.items})
+    },
     openRepository: function () {
       let apiLocation = this.envVars.API_LOCATION
       this.entry.additionalLinks.forEach(function (el) {
@@ -243,11 +644,15 @@ export default {
             //set defaults if we hit an error
             this.thumbnail = MissingImage
             if (this.entry.thumbnail) {
-              this.thumbnail = this.entry.thumbnail
+              const resolved = new URL(this.entry.thumbnail, this.envVars.TEST_DATA_LOCATION);
+              this.thumbnail = resolved.href;
             }
             this.discoverId = Number(this.entry.datasetId)
             this.loading = false
           })
+          .finally(() => {
+            this.createSciCurnchItems()
+          })
       }
     },
     lastName: function (fullName) {
@@ -420,6 +825,10 @@ export default {
   stroke: $app-primary-color;
 }
 
+.browsable-list {
+  margin-top: 12px;
+}
+
 .float-button-container {
   position: absolute;
   bottom: 8px;
@@ -432,4 +841,5 @@ export default {
     visibility: visible;
   }
 }
+
 </style>