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

package/src/components/ImageGallery.vue

@@ -20,77 +20,36 @@
 </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())
-}
-
-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.vue';
 
 export default {
   name: 'ImageGallery',
   components: { Gallery },
-  mixins: [GalleryHelper, S3Bucket],
   props: {
-    envVars: {
-      type: Object,
-      default: () => {},
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    plots: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    datasetId: {
-      type: Number,
-      default: -1,
-    },
-    datasetVersion: {
-      type: Number,
-      default: -1,
-    },
-    datasetThumbnail: {
-      type: String,
-      default: '',
-    },
     category: {
       type: String,
       default: 'All',
     },
-    entry: {
+    items: {
       type: Object,
-      default: () => {
-        return {}
-      },
-    },
+      defualt: () => {
+        return  {
+          Dataset: [],
+          Flatmaps:[],
+          Scaffolds: [],
+          Simulations: [],
+          Plots: [],
+        }
+      }
+    }
   },
   data() {
     return {
       currentIndex: 0,
       ro: null,
       maxWidth: 3,
-      items: {
-        Dataset: [],
-        Flatmaps:[],
-        Images: [],
-        Scaffolds: [],
-        Simulations: [],
-        Videos: [],
-        Plots: [],
-      },
       bodyStyle: { padding: '0px', background: '#ffffff' },
       imageContainerStyle: {
         width: '160px',
@@ -112,321 +71,10 @@ export default {
     datalinkClicked: function (payload) {
       this.$emit('datalink-clicked', payload);
     },
-    createSciCurnchItems: function () {
-      this.updateS3Bucket(this.entry.s3uri)
-      this.createDatasetItem()
-      this.createFlatmapItems()
-      this.createScaffoldItems()
-      this.createSimulationItems()
-      this.createPlotItems()
-      /* Disable these two
-      this.createImageItems();
-      this.createVideoItems();
-      */
-    },
-    createDatasetItem: function () {
-      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: `Dataset ${this.datasetId}`,
-          thumbnail: this.datasetThumbnail,
-          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 = flatmap.thumbnail?.url
-            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.datasetId,
-              version: this.datasetVersion,
-            }
-            this.items['Flatmaps'].push({
-              id,
-              title: baseName(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.datasetId}&dataset_version=${this.datasetVersion}&file_path=${filePath}&mimetype=${image.mimetype.name}`
-          this.items['Images'].push({
-            id,
-            title: baseName(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.datasetVersion,
-          }
-          this.items['Plots'].push({
-            id,
-            title: baseName(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.datasetId,
-            apiLocation: this.envVars.API_LOCATION,
-            version: this.datasetVersion,
-            banner: this.datasetThumbnail,
-            s3uri: this.entry.s3uri,
-            contextCardUrl: this.getContextCardUrl(i),
-          }
-          this.items['Scaffolds'].push({
-            id,
-            title: baseName(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.datasetVersion,
-              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`,
-            }
-            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 = simulation.thumbnail?.url
-            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 = simulation.resource.url
-            }
-            let action = {
-              label: capitalise(this.label),
-              resource: resource,
-              s3uri: this.entry.s3uri,
-              title: 'View simulation',
-              type: 'Simulation',
-              discoverId: this.discoverId,
-              version: this.datasetVersion,
-            }
-            this.items['Simulations'].push({
-              id,
-              title: baseName(filePath),
-              type: 'Simulation',
-              thumbnail: thumbnailURL,
-              userData: action,
-              hideType: true,
-              mimetype,
-            })
-          }
-        })
-      }
-    },
-    createVideoItems: function () {
-      if (this.entry.videos) {
-        this.entry.videos.forEach((video) => {
-          const filePath = this.getS3FilePath(
-            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}`
-          this.items['Videos'].push({
-            title: video.name,
-            type: 'Video',
-            thumbnail: this.defaultVideoImg,
-            hideType: true,
-            link: linkUrl,
-          })
-        })
-      }
-    },
     onResize: function () {
       this.maxWidth = this.$el.clientWidth
       // this.$emit('resize', this.$el.clientWidth)
     },
-    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
-    },
   },
   computed: {
     galleryItems() {
@@ -442,9 +90,6 @@ export default {
       } else return [...this.items[this.category]]
     },
   },
-  created: function () {
-    this.createSciCurnchItems()
-  },
   watch: {
     category: function () {
       this.resetIndex = true

package/src/components/SideBar.vue

@@ -299,6 +299,14 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
+    displayFileInfo: function (datasetID, fileSearch, searchTerm = "") {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const datasetExplorerTabRef = this.getTabRef(undefined, 'datasetExplorer', true);
+        datasetExplorerTabRef.displayFileInfo(datasetID, fileSearch, searchTerm);
+      })
+    },
     /**
      * Get the ref id of the tab by id and type.
      */

package/src/components/scripts/utilities.js

@@ -0,0 +1,50 @@
+const resolveURL = (relative, base) => {
+  const resolved = new URL(relative, base);
+  return resolved.href;
+}
+
+const readProtocolData = async (item, baseUrl) => {
+  if (item && item.resource?.url) {
+    const resolvedUrl = resolveURL(item.resource.url, baseUrl)
+    const response = await fetch(resolvedUrl)
+    const data = await response.json()
+    //convert url
+    const fields = ["csv_file", "protocol", "thumbnail"]
+    data.forEach((protocol) => {
+      fields.forEach((field) => {
+        if (field in protocol) {
+          protocol[field] = resolveURL(protocol[field], resolvedUrl)
+        }
+      });
+    })
+    return data
+  }
+
+  return
+}
+
+const updateProtocolData = async (entry, baseUrl) => {
+  if (entry["simulation-protocols"]) {
+    const processedData = []
+    for (const item of entry["simulation-protocols"]) {
+      const data = await readProtocolData(item, baseUrl)
+      if (data) {
+        processedData.push(...data)
+      }
+    }
+    return processedData
+  }
+}
+
+const processProtocolsData = async (results, data, baseUrl) => {
+  for (const entry of data) {
+    const protocolData = await updateProtocolData(entry, baseUrl)
+    entry["protocol-data"] = protocolData
+  }
+  results.unshift(...data)
+}
+
+export {
+  processProtocolsData,
+  resolveURL,
+}

package/src/components.d.ts

@@ -19,6 +19,7 @@ declare module 'vue' {
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -34,6 +35,7 @@ declare module 'vue' {
     ElIconSearch: typeof import('@element-plus/icons-vue')['Search']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -42,7 +44,10 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    FileBrowser: typeof import('./components/FileBrowser.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']