@abi-software/map-side-bar 2.14.1-simulation.8 → 2.14.2-demo.0

package/src/components/ImageGallery.vue

@@ -20,36 +20,77 @@
 </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',
     },
-    items: {
+    entry: {
       type: Object,
-      defualt: () => {
-        return  {
-          Dataset: [],
-          Flatmaps:[],
-          Scaffolds: [],
-          Simulations: [],
-          Plots: [],
-        }
-      }
-    }
+      default: () => {
+        return {}
+      },
+    },
   },
   data() {
     return {
       currentIndex: 0,
       ro: null,
       maxWidth: 3,
+      items: {
+        Dataset: [],
+        Flatmaps:[],
+        Images: [],
+        Scaffolds: [],
+        Simulations: [],
+        Videos: [],
+        Plots: [],
+      },
       bodyStyle: { padding: '0px', background: '#ffffff' },
       imageContainerStyle: {
         width: '160px',
@@ -71,10 +112,314 @@ 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
+            const thumbnail = this.getThumbnailForPlot(
+              flatmap,
+              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
+            }
+            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
+            const thumbnail = this.getThumbnailForPlot(
+              simulation,
+              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 resource = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`
+            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() {
@@ -90,6 +435,9 @@ export default {
       } else return [...this.items[this.category]]
     },
   },
+  created: function () {
+    this.createSciCurnchItems()
+  },
   watch: {
     category: function () {
       this.resetIndex = true

package/src/components/SideBar.vue

@@ -299,14 +299,6 @@ 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.d.ts

@@ -19,7 +19,6 @@ 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']
@@ -35,7 +34,6 @@ 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']
@@ -44,10 +42,7 @@ 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']

package/src/components/FileBrowser.vue

@@ -1,252 +0,0 @@
-<template>
-  <div class="file-browser-container">
-    <div class="badges-container">
-      <BadgesGroup
-        :displayDataset="false"
-        :displayText="false"
-        :items="items"
-        @categoryChanged="categoryChanged"
-      />
-    </div>
-    <div class="table-container">
-      <el-table
-        v-if="fileLists"
-        :data="fileLists"
-        style="width: 100%;"
-        height="100%"
-        :stripe="true"
-      >
-        <el-table-column type="expand">
-          <template #default="props">
-            <div class="file-details" m="4">
-              <p m="t-0 b-2" v-if="props.row.description">
-                <b>Description:</b> {{ props.row.description }}
-              </p>
-              <p m="t-0 b-2" v-if="props.row.protocol">
-                <b>Protocol</b>: {{ props.row.protocol }}
-              </p>
-              <div v-for="(val, key) in props.row.columns">
-                <p :key="key" m="t-0 b-2"><b>Column {{ key + 1 }}</b>: {{ val }}</p>
-              </div>
-              <p m="t-0 b-2">
-                <b>File path:</b> {{ props.row.filePath }}
-              </p>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="thumbnail"
-          label="Thumbnail"
-          width="170"
-        >
-          <template #default="scope">
-            <el-image
-              v-if="scope.row.thumbnail"
-              :src="scope.row.thumbnail"
-              style="max-width: 150px; max-height: 150px"
-              fit="contain"
-              lazy
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="fileName"
-          label="File name"
-          width="200"
-          class-name="column-text"
-        />
-        <el-table-column
-          prop="type"
-          label="Type"
-          width="100"
-          class-name="column-text"
-        />
-        <el-table-column
-          fixed="right"
-        >
-          <template #header>
-            <el-input v-model="search" size="small" placeholder="Type to search" clearable/>
-          </template>
-          <template #default="scope">
-            <el-button
-              class="file-button"
-              @click="handleView(scope.row)"
-              :icon="ElIconView"
-              type="primary"
-            />
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script>
-//provide the s3Bucket related methods and data.
-import { shallowRef } from 'vue';
-import BadgesGroup from './BadgesGroup.vue'
-import {
-  ElButton as Button,
-  ElImage as Image,
-  ElIcon as Icon,
-  ElInput as Input,
-  ElTable as Table,
-  ElTableColumn as TableColumn
-} from "element-plus";
-import { ref } from 'vue'
-import {
-  View as ElIconView,
-} from '@element-plus/icons-vue'
-
-
-export default {
-  name: 'FileBrowser',
-  components: {
-    BadgesGroup,
-    Button,
-    ElIconView,
-    Icon,
-    Image,
-    Input,
-    Table,
-    TableColumn
-  },
-  data() {
-    return {
-      category: "All",
-      ElIconView: shallowRef(ElIconView),
-      items: {
-        Dataset: [],
-        Flatmaps:[],
-        Scaffolds: [],
-        Simulations: [],
-        Plots: [],
-      },
-      search: "",
-      tableData: undefined,
-    }
-  },
-  methods: {
-    categoryChanged: function(name) {
-      this.category = name
-    },
-    setSearchTerm: function(searchTerm) {
-      this.search = searchTerm
-    },
-    handleView: function(row) {
-      this.$emit("fileActionTriggered", row.action)
-    },
-    downloadThumbnail: async function(url, entry) {
-      const response = await fetch(url)
-      if (response.ok) {
-        let data = await response.text()
-        if (typeof data === 'string' && data.startsWith('data:')) {
-          entry.thumbnail = data
-        } else {
-          if (entry.mimetype) {
-            entry.thumbnail = `data:${entry.mimetype};base64,${data}`
-          } else {
-            entry.thumbnail = data
-          }
-          let index = this.tableData.findIndex((item) => item.filePath === entry.filePath);
-          if (index > -1) {
-            this.tableData[index] = {...entry}
-          }
-        }
-      }
-    },
-    setData: function(data) {
-      Object.assign(this.items, data)
-      this.tableData = ref([])
-      this.category = "All"
-      this.search = ""
-      Object.keys(data).forEach((key) => {
-        if (key !== "Dataset") {
-          data[key].forEach((item) => {
-            const entry = {
-              action: item.userData,
-              description: item.description ? item.description : "",
-              protocol: item.protocol ? item.protocol : "",
-              columns: [],
-              fileName: item.title,
-              filePath: item.filePath,
-              mimetype: item.mimetype,
-              type: key,
-            }
-            if (item.columns && item.columns.length > 0) {
-              item.columns.forEach((column) => entry.columns.push(JSON.stringify(column)))
-            }
-
-            this.tableData.push(entry)
-            if (item.thumbnail?.includes("encodeBase64")) {
-              this.downloadThumbnail(item.thumbnail, entry)
-            } else {
-              entry.thumbnail = item.thumbnail
-            }
-          })
-        }
-      })
-    }
-  },
-  computed: {
-    fileLists() {
-      if (!this.search && this.category === "All") return this.tableData
-      const keys = ["fileName", "filePath", "description", "type", "protocol"]
-      const lower = this.search.toLowerCase()
-      const list = this.tableData.filter((data) => {
-        if (this.category !== "All") {
-          if (data.type !== this.category) {
-            return false
-          }
-        }
-        for (let key of keys) {
-          if (data[key] && data[key].toLowerCase().includes(lower)) {
-            return true
-          }
-        }
-        if (data.columns) {
-          for (let column of data.columns) {
-            if (column.toLowerCase().includes(lower)) {
-              return true
-            }
-          }
-        }
-      })
-      return list
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.badges-container {
-  padding-bottom: 8px;
-}
-
-:deep(.el-table__body-wrapper) {
-  .column-text {
-    font-size: 12px;
-  }
-}
-
-.file-button {
-  border-radius: 50%;
-  width: 26px;
-  height: 26px;
-  padding:5px;
-  :deep(svg) {
-    scale: 1.2;
-  }
-}
-
-.file-details {
-  padding-left: 8px;
-  font-size: 12px;
-}
-
-
-.file-browser-container {
-  max-height: 75vh;
-  overflow: auto;
-}
-</style>