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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.1-demo.0",
+  "version": "2.14.1-simulation.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "1.3.0",
-    "@abi-software/map-utilities": "^1.8.1",
+    "@abi-software/map-utilities": "1.8.1",
     "@abi-software/svg-sprite": "^1.0.2",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/App.vue

@@ -135,6 +135,7 @@ export default {
         PENNSIEVE_API_LOCATION: import.meta.env.VITE_APP_PENNSIEVE_API_LOCATION,
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
+        TEST_DATA_LOCATION: import.meta.env.VITE_APP_TEST_DATA_LOCATION,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
       },
       connectivityEntry: [],

package/src/components/DatasetCard.vue

@@ -230,6 +230,9 @@ export default {
           })
           .then((data) => {
             this.thumbnail = data.banner
+            if (this.entry.thumbnail) {
+              this.thumbnail = this.entry.thumbnail
+            }
             this.discoverId = data.id
             this.version = data.version
             this.dataLocation = `https://sparc.science/datasets/${data.id}?type=dataset`
@@ -239,6 +242,10 @@ export default {
           .catch(() => {
             //set defaults if we hit an error
             this.thumbnail = MissingImage
+            if (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
           })

package/src/components/DatasetExplorer.vue

@@ -406,6 +406,23 @@ export default {
       let i = this.results.findIndex((res) => res.doi === doi)
       if (this.results[i]) this.results[i].detailsReady = true
     },
+    readTestData: function () {
+      const endpoint = this.envVars.TEST_DATA_LOCATION
+      if (endpoint) {
+        fetch(endpoint)
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`Cannot download test data from server: ${response.status}`)
+            }
+            return response.json()
+          })
+          .then((data) => {
+            if (this.searchInput.toLowerCase().includes("reveal")) {
+              this.results.unshift(...data)
+            }
+          })
+      }
+    },
     perItemSearch: function (signal, data) {
       //Maximum 10 downloads at once to prevent long waiting time
       //between unfinished search and new search
@@ -434,6 +451,11 @@ export default {
           //Check and make another request until it gets to max downloads
           this.perItemSearch(signal, data)
         }
+      } else {
+        //Do some post downloading hacking
+        if (this.searchInput.toLowerCase().includes("reveal")) {
+          this.readTestData();
+        }
       }
     },
     scrollToTop: function () {

package/src/components/ImageGallery.vue

@@ -25,10 +25,15 @@ const baseName = (str) => {
   return str.split('\\').pop().split('/').pop()
 }
 
-const capitalise = function (string) {
+const capitalise = (string) => {
   return string.replace(/\b\w/g, (v) => v.toUpperCase())
 }
 
+const resolveURL = (relative, base) => {
+  const resolved = new URL(relative, base);
+  return resolved.href;
+}
+
 import GalleryHelper from '@abi-software/gallery/src/mixins/GalleryHelpers.js'
 import Gallery from "@abi-software/gallery";
 import "@abi-software/gallery/dist/style.css";
@@ -145,20 +150,26 @@ export default {
           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
+            if (flatmap.thumbnail?.url) {
+              thumbnailURL = resolveURL(flatmap.thumbnail.url,
+                this.envVars.TEST_DATA_LOCATION)
+            }
             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
+            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),
@@ -343,22 +354,32 @@ export default {
             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 thumbnailURL = undefined;
+            if (simulation.thumbnail?.url) {
+              thumbnailURL = resolveURL(simulation.thumbnail.url,
+                this.envVars.TEST_DATA_LOCATION)
+            }
             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
+            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)
             }
-            const resource = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix()}files/${filePath}${this.getS3Args()}`
             let action = {
               label: capitalise(this.label),
               resource: resource,

package/src/components/SideBar.vue

@@ -53,8 +53,8 @@
                 :connectivityEntry="connectivityEntry"
                 :availableAnatomyFacets="availableAnatomyFacets"
                 :showLongLabel="showLongLabel"
-                :connectivityFilterOptions="filterOptions"
                 @filter-visibility="$emit('filter-visibility', $event)"
+                :connectivityFilterOptions="filterOptions"
                 :showVisibilityFilter="showVisibilityFilter"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged(tab.id, $event)"