@abi-software/flatmapvuer 1.13.1-simulation.2 → 1.13.1-simulation.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.13.1-simulation.2",
+  "version": "1.13.1-simulation.4",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

package/src/App.vue

@@ -80,6 +80,7 @@
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
       :disableUI="disableUI"
+      :sparcAPI="sparcAPI"
       @open-pubmed-url="onOpenPubmedUrl"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @flatmapChanged="onFlatmapChanged"
@@ -231,6 +232,15 @@ export default {
       }
     },
   },
+  computed : {
+    testDataLocation() {
+      return import.meta.env.VITE_TEST_DATA_LOCATION
+
+    },
+    sparcAPI() {
+      return import.meta.env.VITE_API_LOCATION
+    },
+  },
   provide() {
     return {
       $annotator: this.annotator,

package/src/assets/styles.scss

@@ -3,3 +3,15 @@
 @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
 
 $--color-primary: $app-primary-color !default;
+
+.flatmap-dropdown {
+  min-width: 160px !important;
+  .el-select-dropdown__item {
+    white-space: nowrap;
+    text-align: left;
+    &.is-selected {
+      color: $app-primary-color;
+      font-weight: normal;
+    }
+  }
+}

package/src/components/FlatmapVuer.vue

@@ -187,7 +187,7 @@ Please use `const` to assign meaningful names to them...
       >
         <template #reference>
           <div
-            class="popover-location top"
+            class="popover-location simulation top"
             :class="{
               open: simulationDrawerOpen,
               close: !simulationDrawerOpen,
@@ -206,6 +206,7 @@ Please use `const` to assign meaningful names to them...
                 Available Protocols
               </h4>
               <el-select
+                popper-class="flatmap-dropdown"
                 v-model="selectedSimulation"
                 placeholder="Select a simulation"
                 size="default"
@@ -705,6 +706,9 @@ import {
   getKnowledgeSource,
   getReferenceConnectivitiesByAPI,
 } from '../services/flatmapKnowledge.js'
+import {
+  retrieveOmexData,
+} from '../services/apsTestData.js'
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
@@ -3468,7 +3472,7 @@ export default {
       }
 
       // If not in cache, call the API
-      const apiLocation = import.meta.env.VITE_API_LOCATION
+      const apiLocation = this.sparcAPI
       if (!apiLocation) {
         console.warn('VITE_API_LOCATION is not defined.')
         return
@@ -3479,12 +3483,22 @@ export default {
         // Ensure the URL matches your backend route structure
         const response = await fetch(`${apiLocation}flatmap/uuid?uuid=${uuid}`)
 
-        if (!response.ok)
-          throw new Error(`API call failed: ${response.statusText}`)
+        let data = undefined;
 
-        const data = await response.json()
+        if (!response.ok) {
+          if (this.testDataLocation) {
+            data = await retrieveOmexData(this.testDataLocation, uuid)
+          }
+        } else {
+          data = await response.json()
+        }
+
+        if (!data) {
+          throw new Error(`No protocol data available for map`)
+        }
 
         // Save to cache and process
+
         this.setSessionCache(cacheKey, data)
         this.datasetInfo = data
         this.processDatasetFiles(data)
@@ -3513,30 +3527,44 @@ export default {
      * Iterates through the file list, constructs full URLs, and checks for simulation content.
      */
     async processDatasetFiles(data) {
-      if (!data || data.length === 0) return
-
-      this.simulationInfo = [] // Reset list
-
-      //FIXME: Currently only process the first dataset entry
-      const firstData = data[0]
-      const apiLocation = import.meta.env.VITE_API_LOCATION
-      // Base URL for Pennsieve public assets
-      const baseUrl = `${apiLocation}/s3-resource/${firstData.dataset_id}/files`
-      const bucketName = this.extractBucketNameFromS3Uri(firstData.s3uri)
-
-      firstData.urls.map(async (filePath) => {
-        const fullUrl = `${baseUrl}/${filePath}?s3BucketName=${bucketName}`
-        // Add to our list of valid files
-        this.simulationInfo.push({
-          label: firstData.title,
-          s3uri: firstData.s3uri,
-          dataset_id: firstData.dataset_id,
-          version: firstData.version,
-          path: filePath,
-          type: 'Simulation',
-          resource: fullUrl,
+      if (!data) return
+
+      if (data.testData) {
+        this.simulationInfo = [] // Reset list
+        data.simulation.forEach((item) => {
+          this.simulationInfo.push({
+            label: item.name,
+            path: item.dataset.path,
+            dataset_id: item.datasetId,
+            type: 'Simulation',
+            resource: item.resource.url,
+          })
         })
-      })
+      } else {
+        if (data.length !== 0) {
+          this.simulationInfo = [] // Reset list
+          //FIXME: Currently only process the first dataset entry
+          const firstData = data[0]
+          const apiLocation = this.sparcAPI
+          // Base URL for Pennsieve public assets
+          const baseUrl = `${apiLocation}/s3-resource/${firstData.dataset_id}/files`
+          const bucketName = this.extractBucketNameFromS3Uri(firstData.s3uri)
+
+          firstData.urls.map(async (filePath) => {
+            const fullUrl = `${baseUrl}/${filePath}?s3BucketName=${bucketName}`
+            // Add to our list of valid files
+            this.simulationInfo.push({
+              label: firstData.title,
+              s3uri: firstData.s3uri,
+              dataset_id: firstData.dataset_id,
+              version: firstData.version,
+              path: filePath,
+              type: 'Simulation',
+              resource: fullUrl,
+            })
+          })
+        }
+      }
     },
     /**
      * Retrieve data from session storage if it hasn't expired.
@@ -3580,7 +3608,6 @@ export default {
       }
     },
     getSimulationLabel(info) {
-      console.log(info.path)
       return info.path.split('/').pop()
     },
     openSimulation() {
@@ -3776,6 +3803,13 @@ export default {
       type: String,
       default: 'https://api.sparc.science/',
     },
+    /**
+     * Specify the endpoint of the SPARC API.
+     */
+    testDataLocation: {
+      type: String,
+      default: '',
+    },
     /**
      * Flag to disable UIs on Map
      */
@@ -4228,6 +4262,14 @@ export default {
   flex-direction: row;
   align-items: center;
 
+  &.simulation {
+    .el-button {
+      background: $app-primary-color;
+    }
+}
+
+
+
   &.open {
     transform: translateX(0);
   }
@@ -4580,7 +4622,6 @@ export default {
     border-color: $app-primary-color;
     color: $app-primary-color;
   }
-
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;
@@ -4935,4 +4976,4 @@ export default {
     }
   }
 }
-</style>
+</style>

package/src/services/apsTestData.js

@@ -0,0 +1,40 @@
+const resolveURL = (relative, base) => {
+  const resolved = new URL(relative, base);
+  return resolved.href;
+}
+
+const retrieveOmexData = async (url, uuid) => {
+  if (url) {
+    const response = await fetch(url);
+    const data = await response.json();
+    const simulation = [];
+    for (const entry of data) {
+      let found = false;
+      if (entry.flatmaps) {
+        for (const flatmap of entry.flatmaps) {
+          if (flatmap.associated_flatmap?.identifier === uuid) {
+            found = true;
+          }
+        }
+      }
+      if (found && ('simulation' in entry)) {
+        entry.simulation.forEach((item) => {
+          if (item.resource?.url) {
+            item.resource.url = resolveURL(item.resource.url, url);
+          }
+          item.datasetId = entry.datasetId;
+        });
+        simulation.push(...entry.simulation);
+      }
+    }
+    if (simulation.length) {
+      return {testData: true, simulation};
+    }
+  }
+  return undefined;
+}
+
+
+export {
+  retrieveOmexData,
+};

package/src/services/flatmapLoader.js

@@ -1,6 +1,6 @@
 /**
  * a single source for the flatmap-viewer library import
  */
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.6.0/+esm';
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.6.1/+esm';
 
 export default flatmap;