@abi-software/flatmapvuer 1.4.1 → 1.4.3-image.0

package/src/components/MultiFlatmapVuer.vue

@@ -81,6 +81,9 @@
       style="height: 100%"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
+      @imageThumbnailDisplay="onImageThumbnailDisplay"
+      :imageThumbnailSidebar="imageThumbnailSidebar"
+      @image-thumbnail-open="onImageThumbnailOpen"
     />
   </div>
 </template>
@@ -264,6 +267,12 @@ export default {
     onConnectivityInfoOpen: function (entryData) {
       this.$emit('connectivity-info-open', entryData);
     },
+    onImageThumbnailDisplay: function (payload) {
+      this.$emit('imageThumbnailDisplay', payload);
+    },
+    onImageThumbnailOpen: function (payload) {
+      this.$emit('image-thumbnail-open', payload);
+    },
     onSelectionsDataChanged: function (data) {
       this.$emit('pathway-selection-changed', data);
     },
@@ -700,7 +709,7 @@ export default {
      */
     sparcAPI: {
       type: String,
-      default: 'https://api.sparc.science/',
+      default: '',
     },
     /**
      * Flag to disable UIs on Map
@@ -716,6 +725,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The option to show image thumbnail in sidebar
+     */
+    imageThumbnailSidebar: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {

package/src/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-import { useMainStore } from '@/store/index'
+import { useMainStore } from '@/stores/index'
 
 const pinia = createPinia()
 const app = createApp(App)

package/src/mixins/imageMixin.js

@@ -0,0 +1,116 @@
+export default {
+  methods: {
+    populateMapWithImages: function (mapImp, images, type) {
+      this.downloadImageKeys = []; // to count downloaded images
+      for (const [key, list] of Object.entries(images)) {
+        // Exclude empty list
+        if (list.length) {
+          this.downloadImageThumbnail(mapImp, key, list, type);
+        }
+      }
+    },
+    downloadImageThumbnail: function (mapImp, key, list, type) {
+      // This inner list count will be updated by failed download
+      const count = list.length;
+
+      if (!this.downloadImageKeys.includes(key)) {
+        this.downloadImageKeys.push(key);
+      }
+
+      if (count > 0) {
+        //Pick a random image
+        const index = Math.floor(Math.random() * count);
+        const thumbnail = list[index].thumbnail;
+        this.getThumbnail(thumbnail, type)
+          .then((wrapperElement) => {
+            this.downloadImageKeys = this.downloadImageKeys.filter((item) => item !== key);
+            this.addImageThumbnailMarker(mapImp, key, wrapperElement);
+
+            // All images are downloaded
+            if (!this.downloadImageKeys.length) {
+              this.imagesDownloading = false;
+            }
+          })
+          .catch(() => {
+            //Failed to download, pick another one
+            list.splice(index);
+            this.downloadImageThumbnail(mapImp, key, list, type);
+          });
+      } else {
+        if (this.downloadImageKeys.includes(key)) {
+          this.downloadImageKeys = this.downloadImageKeys.filter((item) => item !== key);
+
+          // Failed to download, the last item
+          if (!this.downloadImageKeys.length) {
+            this.imagesDownloading = false;
+          }
+        }
+      }
+    },
+    getThumbnail: async function (url, type) {
+      return new Promise((resolve, reject) => {
+        if (type === "Image" || type === "Segmentation") {
+          this.getBinaryThumbnail(url)
+            .then((response) => resolve(response))
+            .catch((response) => reject(response));
+        } else {
+          this.getGenericThumbnail(url)
+            .then((response) => resolve(response))
+            .catch((response) => reject(response));
+        }
+      });
+    },
+    getBinaryThumbnail: async function (url) {
+      return new Promise((resolve, reject) => {
+        fetch(url)
+          .then((response) => {
+            if (response.status >= 200 && response.status < 300) {
+              return response.text();
+            } else {
+              reject();
+            }
+          })
+          .then((data) => {
+            if (data) {
+              let img = new Image();
+              let wrapperElement = document.createElement("div");
+              img.style = "height: auto;width: 50px;margin-right: 80px;";
+              img.onload = function () {
+                wrapperElement.appendChild(img);
+                resolve(wrapperElement);
+              };
+              img.onerror = function () {
+                reject(new Error("Failed to load image at " + url));
+              };
+              img.src = `data:'image/png';base64,${data}`;
+            } else {
+              reject(new Error("Failed to load image at " + url));
+            }
+          });
+      });
+    },
+    getGenericThumbnail: async function (url) {
+      return new Promise((resolve, reject) => {
+        let img = new Image();
+        let wrapperElement = document.createElement("div");
+        img.style = "height: auto;width: 50px;margin-right: 80px;";
+        img.onload = function () {
+          wrapperElement.appendChild(img);
+          resolve(wrapperElement);
+        };
+        img.onerror = function () {
+          reject(new Error("Failed to load image at " + url));
+        };
+        img.src = url;
+      });
+    },
+    addImageThumbnailMarker: function (mapImp, id, wrapperElement) {
+      const markerIdentifier = mapImp.addMarker(id, {
+        element: wrapperElement,
+        className: "highlight-marker",
+        cluster: false,
+        type: "image",
+      });
+    },
+  },
+};

package/src/services/flatmapQueries.js

@@ -256,7 +256,11 @@ let FlatmapQueries = function () {
           }
         })
         .catch((error) => {
-          console.error('Error:', error)
+          if (error.name === 'AbortError') {
+            // This error is from AbortController's abort method.
+          } else {
+            console.error('Error:', error)
+          }
           resolve(false)
         })
     })

package/src/services/scicrunchQueries.js

@@ -0,0 +1,280 @@
+const getOrganCuries = async (sparcApi, filetypes = [], species = []) => {
+  let params = new URLSearchParams();
+  filetypes.forEach((type) => {
+    params.append("filetypes", type);
+  });
+  species.forEach((name) => {
+    params.append("species", name);
+  });
+
+  const response = await fetch(`${sparcApi}/get-organ-curies/?${params}`);
+  const data = await response.json();
+
+  let organCuries = [];
+  data.uberon.array.forEach((pair) => {
+    const organCurie = {
+      id: pair.id.toUpperCase(),
+      name: pair.name,
+    };
+    organCuries.push(organCurie);
+  });
+
+  return organCuries;
+};
+
+const getFilesInfoForCuries = async (sparcApi, organCuries, filetypes) => {
+  const response = await fetch(`${sparcApi}/get-files-info-for-curies`, {
+    method: "POST",
+    body: JSON.stringify({
+      curies: organCuries.map((item) => item.id),
+      filetypes: filetypes,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+  const data = await response.json();
+
+  return data;
+};
+
+const getFileNameFromPath = (filePath) => {
+  return filePath.substring(filePath.lastIndexOf("/") + 1);
+};
+
+const getBiolucidaThumbnailURL = (sparcApi, biolucidaId) => {
+  return `${sparcApi}/thumbnail/${biolucidaId}`;
+};
+
+const getBiolucidaThumbnails = async (sparcApi, organCuries, type) => {
+  try {
+    const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+      "biolucida-2d",
+      "biolucida-3d",
+    ]);
+
+    if (data["files_info"]) {
+      let images = {};
+      for (const [key, value] of Object.entries(data["files_info"])) {
+        if (value.length > 0) {
+          let list = [];
+          value.forEach((entry) => {
+            const thumbnailURL = getBiolucidaThumbnailURL(
+              sparcApi,
+              entry.biolucida_id
+            );
+            if (entry.biolucida_id) {
+              let image = {
+                thumbnail: thumbnailURL,
+                resource: entry.file_path,
+                id: entry.id,
+                title: getFileNameFromPath(entry.file_path),
+                type: type,
+                link: thumbnailURL,
+                mimetype: entry.mimetype,
+                species: entry.species,
+                version: entry.version,
+              };
+              list.push(image);
+            }
+          });
+          images[key] = list;
+        }
+      }
+      return images;
+    }
+  } catch (error) {
+    console.error("Error:", error);
+  }
+  return {};
+};
+
+const getSegmentationThumbnailURL = (
+  sparcApi,
+  datasetId,
+  datasetVersion,
+  filePath
+) => {
+  return `${sparcApi}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
+};
+
+const getSegmentationThumbnails = async (sparcApi, organCuries, type) => {
+  try {
+    const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+      "mbf-segmentation",
+    ]);
+
+    if (data["files_info"]) {
+      let images = {};
+      for (const [key, value] of Object.entries(data["files_info"])) {
+        if (value.length > 0) {
+          let list = [];
+          value.forEach((entry) => {
+            const thumbnailURL = getSegmentationThumbnailURL(
+              sparcApi,
+              entry.id,
+              entry.version,
+              entry.file_path
+            );
+            let image = {
+              thumbnail: thumbnailURL,
+              resource: entry.file_path,
+              id: entry.id,
+              title: getFileNameFromPath(entry.file_path),
+              type: type,
+              link: thumbnailURL,
+              mimetype: entry.mimetype,
+              species: entry.species,
+              version: entry.version,
+            };
+            list.push(image);
+          });
+          images[key] = list;
+        }
+      }
+      return images;
+    }
+  } catch (error) {
+    console.error("Error:", error);
+  }
+  return {};
+};
+
+const findEntryWithPathInArray = (entry, list, type) => {
+  if (entry && list) {
+    for (let i = 0; i < entry.isSourceOf.length; i++) {
+      for (let l = 0; l < list.length; l++) {
+        const item = list[l];
+        if (
+          entry.id === item.id &&
+          (!type || item.type === type) &&
+          entry.isSourceOf[i] === item.file_path
+        ) {
+          return item;
+        }
+      }
+    }
+  }
+  return undefined;
+};
+
+const getScaffoldThumbnailURL = (sparcApi, entry, list) => {
+  const viewEntry = findEntryWithPathInArray(
+    entry,
+    list,
+    "abi-scaffold-view-file"
+  );
+  const thumbnailEntry = findEntryWithPathInArray(
+    viewEntry,
+    list,
+    "abi-thumbnail"
+  );
+  if (thumbnailEntry) {
+    return `${sparcApi}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}`;
+  }
+  return undefined;
+};
+
+const getScaffoldThumbnails = async (sparcApi, organCuries, type) => {
+  try {
+    const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+      "abi-thumbnail",
+      "abi-scaffold-metadata-file",
+      "abi-scaffold-view-file",
+    ]);
+
+    if (data["files_info"]) {
+      let images = {};
+      for (const [key, value] of Object.entries(data["files_info"])) {
+        if (value.length > 0) {
+          let list = [];
+          value.forEach((entry) => {
+            if (entry.type === "abi-scaffold-metadata-file") {
+              const thumbnailURL = getScaffoldThumbnailURL(
+                sparcApi,
+                entry,
+                value
+              );
+              if (thumbnailURL) {
+                let image = {
+                  thumbnail: thumbnailURL,
+                  resource: entry.file_path,
+                  id: entry.id,
+                  title: getFileNameFromPath(entry.file_path),
+                  type: type,
+                  link: thumbnailURL,
+                  species: entry.species,
+                  version: entry.version,
+                };
+                list.push(image);
+              }
+            }
+          });
+          images[key] = list;
+        }
+      }
+      return images;
+    }
+  } catch (error) {
+    console.error("Error:", error);
+  }
+  return {};
+};
+
+const getPlotThumbnailURL = (sparcApi, entry) => {
+  //None of the thumbnail for plot is properly annotated.
+  //We will use the first in is source of for testing.
+  if (entry.isSourceOf.length > 0) {
+    return `${sparcApi}/s3-resource/${entry.id}/files/${entry.isSourceOf[0]}`;
+  }
+  return undefined;
+};
+
+const getPlotThumbnails = async (sparcApi, organCuries, type) => {
+  try {
+    const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+      "abi-plot",
+      "abi-thumbnail",
+    ]);
+
+    if (data["files_info"]) {
+      let images = {};
+      for (const [key, value] of Object.entries(data["files_info"])) {
+        if (value.length > 0) {
+          let list = [];
+          value.forEach((entry) => {
+            if (entry.type === "abi-plot") {
+              const thumbnailURL = getPlotThumbnailURL(sparcApi, entry);
+              if (thumbnailURL) {
+                let image = {
+                  thumbnail: thumbnailURL,
+                  resource: entry.file_path,
+                  id: entry.id,
+                  title: getFileNameFromPath(entry.file_path),
+                  type: type,
+                  link: thumbnailURL,
+                  species: entry.species,
+                  version: entry.version,
+                };
+                list.push(image);
+              }
+            }
+          });
+          images[key] = list;
+        }
+      }
+      return images;
+    }
+  } catch (error) {
+    console.error("Error:", error);
+  }
+  return {};
+};
+
+export {
+  getOrganCuries,
+  getBiolucidaThumbnails,
+  getSegmentationThumbnails,
+  getScaffoldThumbnails,
+  getPlotThumbnails,
+};

package/src/stores/settings.js

@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+
+/* eslint-disable no-alert, no-console */
+
+export const useSettingsStore = defineStore("settings", {
+  state: () => {
+    return {
+      organCuries: [],
+      imageTypes: [],
+      imageThumbnails: {},
+    };
+  },
+  getters: {
+    imageTypeCached: (state) => (imageType) => {
+      return state.imageTypes.includes(imageType);
+    },
+    getImageThumbnails:
+      (state) =>
+        (imageType, uberonIds = undefined) => {
+          if (uberonIds) {
+            let thumbnails = {};
+            Object.entries(state.imageThumbnails).forEach(([key, value]) => {
+              if (uberonIds.includes(key)) {
+                thumbnails[key] = value.filter((item) => item.type === imageType);
+              }
+            });
+            return thumbnails;
+          }
+          return state.imageThumbnails;
+        },
+  },
+  actions: {
+    updateOrganCuries(organCuries) {
+      this.organCuries = organCuries;
+    },
+    updateImageThumbnails(imageType, imageThumbnails) {
+      this.imageTypes.push(imageType);
+      Object.keys(imageThumbnails).forEach((key) => {
+        if (!(key in this.imageThumbnails)) {
+          this.imageThumbnails[key] = [];
+        }
+        this.imageThumbnails[key].push(...imageThumbnails[key]);
+      });
+    },
+  },
+});