+ Viewing Mode
Date: Wed, 21 Aug 2024 15:47:40 +1200
Subject: [PATCH 12/47] Add plot type.
---
src/components/FlatmapVuer.vue | 17 ++++++------
src/mixins/flatmapImageMixin.js | 3 +--
src/services/scicrunchMixin.js | 46 ++++++++++++++++++++++++++++++---
3 files changed, 53 insertions(+), 13 deletions(-)
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 6c155a13..8e38deaf 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -2491,19 +2491,20 @@ export default {
if (this.mapImp) {
this.mapImp.clearMarkers()
const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
- if (type === "Scaffolds") {
+ if (type === "Images") {
+ let images = await this.getBiolucidaThumbnails("id", anatomicalIdentifiers)
+ this.images = images
+ } else if (type === "Scaffolds") {
let images = await this.getScaffoldThumbnails("id", anatomicalIdentifiers)
this.images = images
- this.populateFlatmapWithImages(this.mapImp, images, type)
} else if (type === "Segmentations") {
- let images = await this.getSegmentationsThumbnails("id", anatomicalIdentifiers)
+ let images = await this.getSegmentationThumbnails("id", anatomicalIdentifiers)
this.images = images
- this.populateFlatmapWithImages(this.mapImp, images, type)
- } else if (type === "Images") {
- let images = await this.getBiolucidaThumbnails("id", anatomicalIdentifiers)
+ } else if (type === "Plots") {
+ let images = await this.getPlotThumbnails("id", anatomicalIdentifiers)
this.images = images
- this.populateFlatmapWithImages(this.mapImp, images, type)
}
+ this.populateFlatmapWithImages(this.mapImp, this.images, type)
}
},
},
@@ -2792,7 +2793,7 @@ export default {
drawnType: 'All tools',
drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
imageType: 'None',
- imageTypes: ['Images', 'Scaffolds', 'Segmentations', 'None'],
+ imageTypes: ['Images', 'Scaffolds', 'Segmentations', 'Plots', 'None'],
annotatedType: 'Anyone',
annotatedTypes: ['Anyone', 'Me', 'Others'],
openMapRef: undefined,
diff --git a/src/mixins/flatmapImageMixin.js b/src/mixins/flatmapImageMixin.js
index e2c28288..6d15df92 100644
--- a/src/mixins/flatmapImageMixin.js
+++ b/src/mixins/flatmapImageMixin.js
@@ -63,8 +63,7 @@ export default {
getThumbnail: async function(url, type) {
return new Promise((resolve, reject) => {
if (type === "Segmentations" ||
- type === "Images" ||
- type === "Scaffolds") {
+ type === "Images") {
this.getBinaryThumbnail(url)
.then((response) => resolve(response))
.catch((response) => reject(response))
diff --git a/src/services/scicrunchMixin.js b/src/services/scicrunchMixin.js
index fa38cc89..7d3de2f5 100644
--- a/src/services/scicrunchMixin.js
+++ b/src/services/scicrunchMixin.js
@@ -110,7 +110,7 @@ export default {
const thumbnailEntry = this.findEntryWithPathInArray(
viewEntry, list, "abi-thumbnail");
if (thumbnailEntry) {
- return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}?${new URLSearchParams({encodeBase64: true})}`;
+ return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}`;
}
return undefined;
},
@@ -146,14 +146,13 @@ export default {
}
return {};
},
-
//Get representative segmentations thumbnails
// key - can either be
// id - use the uberon id as key or
// name - anatomical name as key
// idsList - Only id / name from the server matching the one in this list
// will be used
- getSegmentationsThumbnails: async function (key, idsList) {
+ getSegmentationThumbnails: async function (key, idsList) {
try {
const data = await getFilesInfo(this.sparcAPI, key, idsList, ["mbf-segmentation"]);
if (data['files_info']) {
@@ -183,6 +182,47 @@ export default {
getSegmentationThumbnailURL: function(datasetId, datasetVersion, filePath) {
return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
},
+ getPlotThumbnailURL: function(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 `${this.sparcAPI}/s3-resource/${entry.id}/files/${entry.isSourceOf[0]}`;
+ }
+ return undefined;
+ },
+ getPlotThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList,
+ ["abi-plot", "abi-thumbnail"]);
+ if (data['files_info']) {
+ const images = {};
+ for (const [key, value] of Object.entries(data['files_info'])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.type === "abi-plot") {
+ console.log(entry);
+ const thumbnailURL = this.getPlotThumbnailURL(entry);
+ if (thumbnailURL) {
+ let image = {
+ thumbnail: thumbnailURL,
+ resource: entry.file_path,
+ datasetId: entry.id,
+ }
+ list.push(image);
+ }
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ return {};
+ },
getImagesFromScicrunch: async function () {
try {
const response = await fetch(`${this.sparcAPI}/multiple_dataset_info/using_multiple_mimetype/?${new URLSearchParams({q: imageQuery})}`);
From e6bbb6ce73a156881451b83dab126e6afa146313 Mon Sep 17 00:00:00 2001
From: alan-wu
Date: Wed, 21 Aug 2024 15:50:39 +1200
Subject: [PATCH 13/47] Clean up unused codes.
---
src/mixins/flatmapImageMixin.js | 31 -------------
src/services/scicrunchMixin.js | 80 ---------------------------------
2 files changed, 111 deletions(-)
diff --git a/src/mixins/flatmapImageMixin.js b/src/mixins/flatmapImageMixin.js
index 6d15df92..1cd2768c 100644
--- a/src/mixins/flatmapImageMixin.js
+++ b/src/mixins/flatmapImageMixin.js
@@ -22,43 +22,12 @@ export default {
for (const [key, list] of Object.entries(images)) {
this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type)
}
- /*
- images.forEach((image) => {
- if (image.value && image.value.length > 0)
- image.value.forEach((image) => {
- if (image.anatomy && image.anatomy.length > 0) {
- image.anatomy.forEach((anatomy) => {
- if (!anatomyList.includes(anatomy.curie) && ids.includes(anatomy.curie)) {
- console.log(anatomy.curie)
- anatomyList.push(anatomy.curie)
- this.createImageThumbnailMarkerUrl(mapImp, anatomy.curie, image.thumbnail)
- }
- })
- }
- })
- })
- */
},
findImagesForAnatomy: function (images = [], anatomyToFind) {
if (anatomyToFind in images) {
return images[anatomyToFind]
}
return []
- /*
- images.forEach((image) => {
- if (image.value && image.value.length > 0)
- image.value.forEach((image) => {
- if (image.anatomy && image.anatomy.length > 0) {
- image.anatomy.forEach((anatomy) => {
- if (anatomy.curie === anatomyToFind) {
- imageList.push(image)
- }
- })
- }
- })
- })
- return imageList
- */
},
getThumbnail: async function(url, type) {
return new Promise((resolve, reject) => {
diff --git a/src/services/scicrunchMixin.js b/src/services/scicrunchMixin.js
index 7d3de2f5..d34e3143 100644
--- a/src/services/scicrunchMixin.js
+++ b/src/services/scicrunchMixin.js
@@ -1,27 +1,4 @@
/* eslint-disable no-alert, no-console */
-const imageQuery = '"*jp2* OR *vnd.ome.xml* OR *jpx*"';
-
-const getBiolucidaInfo = async (sparcAPI, datasetId) => {
- return new Promise((resolve, reject) => {
- const endpoint = `${sparcAPI}/image_search/${datasetId}`
- fetch(endpoint)
- .then((response) => {
- if (response.status >= 200 && response.status < 300) {
- return response.json();
- } else {
- reject();
- }
- })
- .then((data) => {
- if (data.status == 'success') {
- resolve(data);
- } else {
- reject();
- }
- })
- })
-}
-
const getFilesInfo = async (api, key, idsList, types) => {
let params = new URLSearchParams();
types.forEach((type) => {
@@ -201,7 +178,6 @@ export default {
const list = [];
value.forEach((entry) => {
if (entry.type === "abi-plot") {
- console.log(entry);
const thumbnailURL = this.getPlotThumbnailURL(entry);
if (thumbnailURL) {
let image = {
@@ -223,61 +199,5 @@ export default {
}
return {};
},
- getImagesFromScicrunch: async function () {
- try {
- const response = await fetch(`${this.sparcAPI}/multiple_dataset_info/using_multiple_mimetype/?${new URLSearchParams({q: imageQuery})}`);
- const data = await response.json();
-
- console.log('number of hits:', data.numberOfHits);
- if (data.numberOfHits >= 1) {
- let images = await this.processResults(data.results);
- return {success: true, images: images};
- }
- return {success: false};
- } catch (error) {
- console.error('Error:', error);
- return {success: false};
- }
- },
-
- processResults: async function (results) {
- try {
- let images = [];
- const dataType = 'segmentation';
- console.log('starting promise list')
- let promiseList = results.map(async (result, i) => {
- const datasetId = result.dataset_identifier;
- const datasetVersion = result.dataset_version;
- const s3uri = result.s3uri;
- const biolucidaInfo = await getBiolucidaInfo(this.sparcAPI, datasetId);
- return biolucidaInfo.dataset_images.map(bioImage => {
- return {
- resource: {
- share_link: bioImage.share_link,
- },
- title: 'Image',
- anatomy: result.organs,
- species: result.organisms,
- datasetId: datasetId,
- datasetVersion: datasetVersion,
- link: bioImage.share_link,
- s3uri: s3uri,
- type: dataType,
- thumbnail: bioImage.thumbnail_url,
- };
- });
- });
- console.log('promiseList:', promiseList);
- let biolucidaInfos = await Promise.allSettled(promiseList);
- images = biolucidaInfos.flat();
- console.log('biolucidaInfos:', biolucidaInfos);
- console.log('finished!')
- return images;
- } catch (error) {
- console.error('Error:', error);
- return [];
- }
- }
}
}
-
\ No newline at end of file
From 3722c4c9342878f77fb08a43195554347d5c1466 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 21 Aug 2024 16:40:31 +1200
Subject: [PATCH 14/47] Make some changes after merge in upstream
---
src/components/FlatmapVuer.vue | 14 +--
src/mixins/flatmapImageMixin.js | 104 ----------------
src/mixins/imageMixin.js | 2 +-
src/mixins/scicrunchMixin.js | 52 +++++++-
src/services/scicrunchMixin.js | 203 --------------------------------
5 files changed, 55 insertions(+), 320 deletions(-)
delete mode 100644 src/mixins/flatmapImageMixin.js
delete mode 100644 src/services/scicrunchMixin.js
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 585e7d1a..9e61b1e5 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -795,8 +795,7 @@ export default {
ElIconWarningFilled,
ElIconArrowDown,
ElIconArrowLeft,
- DrawToolbar,
- IframeImageDialog
+ DrawToolbar
},
beforeCreate: function () {
//The state watcher may triggered before
@@ -2804,10 +2803,12 @@ export default {
},
drawnType: 'All tools',
drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
- imageType: 'None',
- imageTypes: ['Images', 'Scaffolds', 'Segmentations', 'Plots', 'None'],
annotatedType: 'Anyone',
annotatedTypes: ['Anyone', 'Me', 'Others'],
+ anatomyImages: markRaw({}),
+ imageRadio: false,
+ imageType: 'Image',
+ imageTypes: ['Image', 'Plot', 'Scaffold', 'Segmentation'],
openMapRef: undefined,
backgroundIconRef: undefined,
toolbarOptions: [
@@ -2846,11 +2847,6 @@ export default {
without: true,
}
}),
- anatomyImages: markRaw({}),
- imageRadio: false,
- imageIds: [],
- imageType: 'Image',
- imageTypes: ['Image', 'Plot', 'Scaffold', 'Segmentation'],
}
},
computed: {
diff --git a/src/mixins/flatmapImageMixin.js b/src/mixins/flatmapImageMixin.js
deleted file mode 100644
index 1cd2768c..00000000
--- a/src/mixins/flatmapImageMixin.js
+++ /dev/null
@@ -1,104 +0,0 @@
-export default {
- // Note that the setting store is included in MapContent.vue
- methods: {
- downloadAndCreateImageThumbnailMarkerUrl: function(mapImp, key, list, type) {
- const count = list.length
- if (count > 0) {
- //Pick a random image
- const index = Math.floor(Math.random() * count)
- const thumbnail = list[index].thumbnail
- this.getThumbnail(thumbnail, type)
- .then((wrappedElement) => {
- this.createImageThumbnailMarkerUrl(mapImp, key, wrappedElement)
- })
- .catch(() => {
- //Failed to download, pick another one
- list.splice(index)
- this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type)
- })
- }
- },
- populateFlatmapWithImages: function (mapImp, images = [], type) {
- for (const [key, list] of Object.entries(images)) {
- this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type)
- }
- },
- findImagesForAnatomy: function (images = [], anatomyToFind) {
- if (anatomyToFind in images) {
- return images[anatomyToFind]
- }
- return []
- },
- getThumbnail: async function(url, type) {
- return new Promise((resolve, reject) => {
- if (type === "Segmentations" ||
- type === "Images") {
- 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;
- });
- },
- createImageThumbnailMarkerUrl: function (mapImp, id, wrapperElement) {
- // add it to the flatmap
- const markerIdentifier = mapImp.addMarker(id, {
- element: wrapperElement,
- className: "highlight-marker",
- cluster: false,
- type: "image",
- });
-
- const marker = mapImp.addMarker(id);
- return marker
- }
-
- }
-}
diff --git a/src/mixins/imageMixin.js b/src/mixins/imageMixin.js
index 93d123be..0b7e3cf8 100644
--- a/src/mixins/imageMixin.js
+++ b/src/mixins/imageMixin.js
@@ -34,7 +34,7 @@ export default {
},
getThumbnail: async function (url, type) {
return new Promise((resolve, reject) => {
- if (type === "Image" || type === "Segmentation" || type === "Scaffold") {
+ if (type === "Image" || type === "Segmentation") {
this.getBinaryThumbnail(url)
.then((response) => resolve(response))
.catch((response) => reject(response));
diff --git a/src/mixins/scicrunchMixin.js b/src/mixins/scicrunchMixin.js
index cd740de5..ab4f4f3d 100644
--- a/src/mixins/scicrunchMixin.js
+++ b/src/mixins/scicrunchMixin.js
@@ -54,6 +54,7 @@ export default {
thumbnail: this.getBiolucidaThumbnailURL(
entry.biolucida_id
),
+ resource: entry.file_path,
id: entry.id,
title: getFileName(entry.file_path),
type: "Image",
@@ -96,6 +97,7 @@ export default {
entry.version,
entry.file_path
),
+ resource: entry.file_path,
id: entry.id,
title: getFileName(entry.file_path),
type: "Segmentation",
@@ -186,9 +188,7 @@ export default {
"abi-thumbnail"
);
if (thumbnailEntry) {
- return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${
- thumbnailEntry.file_path
- }?${new URLSearchParams({ encodeBase64: true })}`;
+ return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}`;
}
return undefined;
},
@@ -209,5 +209,51 @@ export default {
}
return undefined;
},
+ getPlotThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "abi-plot",
+ "abi-thumbnail",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.type === "abi-plot") {
+ const thumbnailURL = this.getPlotThumbnailURL(entry);
+ if (thumbnailURL) {
+ let image = {
+ thumbnail: thumbnailURL,
+ resource: entry.file_path,
+ datasetId: entry.id,
+ title: getFileName(entry.file_path),
+ type: "Plot",
+ link: thumbnailURL,
+ mimetype: entry.mimetype,
+ };
+ list.push(image);
+ }
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ return {};
+ },
+ getPlotThumbnailURL: function (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 `${this.sparcAPI}/s3-resource/${entry.id}/files/${entry.isSourceOf[0]}`;
+ }
+ return undefined;
+ },
},
};
diff --git a/src/services/scicrunchMixin.js b/src/services/scicrunchMixin.js
deleted file mode 100644
index d34e3143..00000000
--- a/src/services/scicrunchMixin.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/* eslint-disable no-alert, no-console */
-const getFilesInfo = async (api, key, idsList, types) => {
- let params = new URLSearchParams();
- types.forEach((type) => {
- params.append('filetypes', type);
- });
- let response = await fetch(`${api}/get-organ-curies/?${params}`);
- let data = await response.json();
- const identifiers = [];
- data.uberon.array.forEach(pair => {
- const identifier = {
- id: pair.id.toUpperCase(),
- name: pair.name
- };
- if (idsList.includes(identifier[key])) {
- identifiers.push(identifier);
- }
- });
- const keys = identifiers.map((item) => item[key]);
- response = await fetch(`${api}/get-files-info-for-curies`, {
- method: "POST",
- body: JSON.stringify(
- {
- filetypes: types,
- curies: keys,
- }
- ),
- headers: {
- "Content-Type": "application/json",
- },
- });
- data = await response.json();
- return data;
-}
-
-export default {
- // Note that the setting store is included in MapContent.vue
- methods: {
- getBiolucidaThumbnailURL: function(thumbnailId) {
- return `${this.sparcAPI}/thumbnail/${thumbnailId}`
- },
- getBiolucidaThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, ["biolucida-2d", "biolucida-3d"]);
- if (data['files_info']) {
- const images = {};
- for (const [key, value] of Object.entries(data['files_info'])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.biolucida_id) {
- let image = {
- thumbnail: this.getBiolucidaThumbnailURL(entry.biolucida_id),
- resource: entry.file_path,
- datasetId: entry.id,
- }
- list.push(image);
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error('Error:', error);
- }
- return {};
- },
- 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
- },
- getScaffoldThumbnailURL: function(entry, list) {
- const viewEntry = this.findEntryWithPathInArray(
- entry, list, "abi-scaffold-view-file");
- const thumbnailEntry = this.findEntryWithPathInArray(
- viewEntry, list, "abi-thumbnail");
- if (thumbnailEntry) {
- return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}`;
- }
- return undefined;
- },
- getScaffoldThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList,
- ["abi-thumbnail", "abi-scaffold-metadata-file", 'abi-scaffold-view-file']);
- if (data['files_info']) {
- const images = {};
- for (const [key, value] of Object.entries(data['files_info'])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.type === "abi-scaffold-metadata-file") {
- const thumbnailURL = this.getScaffoldThumbnailURL(entry, value);
- if (thumbnailURL) {
- let image = {
- thumbnail: thumbnailURL,
- resource: entry.file_path,
- datasetId: entry.id,
- }
- list.push(image);
- }
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error('Error:', error);
- }
- return {};
- },
- //Get representative segmentations thumbnails
- // key - can either be
- // id - use the uberon id as key or
- // name - anatomical name as key
- // idsList - Only id / name from the server matching the one in this list
- // will be used
- getSegmentationThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, ["mbf-segmentation"]);
- if (data['files_info']) {
- const images = {};
- for (const [key, value] of Object.entries(data['files_info'])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- let image = {
- thumbnail: this.getSegmentationThumbnailURL(entry.id,
- entry.version, entry.file_path),
- resource: entry.file_path,
- datasetId: entry.id,
- }
- list.push(image);
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error('Error:', error);
- }
- return {};
- },
- getSegmentationThumbnailURL: function(datasetId, datasetVersion, filePath) {
- return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
- },
- getPlotThumbnailURL: function(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 `${this.sparcAPI}/s3-resource/${entry.id}/files/${entry.isSourceOf[0]}`;
- }
- return undefined;
- },
- getPlotThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList,
- ["abi-plot", "abi-thumbnail"]);
- if (data['files_info']) {
- const images = {};
- for (const [key, value] of Object.entries(data['files_info'])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.type === "abi-plot") {
- const thumbnailURL = this.getPlotThumbnailURL(entry);
- if (thumbnailURL) {
- let image = {
- thumbnail: thumbnailURL,
- resource: entry.file_path,
- datasetId: entry.id,
- }
- list.push(image);
- }
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error('Error:', error);
- }
- return {};
- },
- }
-}
From ff4517136a0180ea08ee539f06369f7246f9d339 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:08:01 +1200
Subject: [PATCH 15/47] Change scicrunch mixin to service
---
src/components/FlatmapVuer.vue | 103 ++++++------
src/mixins/scicrunchMixin.js | 259 -------------------------------
src/services/scicrunchQueries.js | 255 ++++++++++++++++++++++++++++++
3 files changed, 314 insertions(+), 303 deletions(-)
delete mode 100644 src/mixins/scicrunchMixin.js
create mode 100644 src/services/scicrunchQueries.js
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 9e61b1e5..9057ec8d 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -685,7 +685,12 @@ import { mapState } from 'pinia'
import { useMainStore } from '@/store/index'
import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
import '@abi-software/map-utilities/dist/style.css'
-import scicrunchMixin from '../mixins/scicrunchMixin'
+import {
+ getBiolucidaThumbnails,
+ getSegmentationThumbnails,
+ getScaffoldThumbnails,
+ getPlotThumbnails
+} from '../services/scicrunchQueries'
import imageMixin from '../mixins/imageMixin'
const centroid = (geometry) => {
@@ -775,7 +780,7 @@ const createUnfilledTooltipData = function () {
*/
export default {
name: 'FlatmapVuer',
- mixins:[scicrunchMixin,imageMixin],
+ mixins:[imageMixin],
components: {
Button,
Col,
@@ -808,6 +813,57 @@ export default {
return { annotator }
},
methods: {
+ /**
+ * @vuese
+ * Function to add image thumbnails to the map.
+ */
+ populateImageThumbnails: async function (type) {
+ if (this.mapImp) {
+ this.loading = true
+ const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
+ this.closeTooltip()
+ this.mapImp.clearMarkers();
+ if (type === 'Image' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await getBiolucidaThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
+ } else if (type === 'Segmentation' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await getSegmentationThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
+ } else if (type === 'Scaffold' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await getScaffoldThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
+ } else if (type === 'Plot' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await getPlotThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
+ }
+ if (this.anatomyImages[type]) {
+ this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
+ }
+ this.loading = false
+ }
+ },
+ /**
+ * @vuese
+ * Function to switch the type of displayed image.
+ * @arg type
+ */
+ setImageType: function (type) {
+ this.imageType = type
+ if (this.mapImp) {
+ this.populateImageThumbnails(type)
+ }
+ },
+ /**
+ * @vuese
+ * Function to switch show or hide images.
+ * @arg flag
+ */
+ setImage: function (flag) {
+ this.imageRadio = flag
+ if (this.mapImp) {
+ if (flag) {
+ this.setImageType(this.imageType)
+ } else {
+ this.mapImp.clearMarkers();
+ }
+ }
+ },
/**
* @vuese
* Function to initialise drawing.
@@ -1122,47 +1178,6 @@ export default {
this.addAnnotationFeature()
}
},
- /**
- * @vuese
- * Function to switch the type of displayed image.
- * @arg type
- */
- setImageType: async function (type) {
- this.imageType = type
- if (this.mapImp) {
- this.loading = true
- const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
- this.mapImp.clearMarkers();
- if (type === 'Image' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await this.getBiolucidaThumbnails("id", anatomicalIdentifiers)
- } else if (type === 'Segmentation' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await this.getSegmentationThumbnails("id", anatomicalIdentifiers)
- } else if (type === 'Scaffold' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await this.getScaffoldThumbnails("id", anatomicalIdentifiers)
- } else if (type === 'Plot' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await this.getPlotThumbnails("id", anatomicalIdentifiers)
- }
- if (this.anatomyImages[type]) {
- this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
- }
- this.loading = false
- }
- },
- /**
- * @vuese
- * Function to switch show or hide images.
- * @arg flag
- */
- setImage: function (flag) {
- this.imageRadio = flag
- if (this.mapImp) {
- if (flag) {
- this.setImageType(this.imageType)
- } else {
- this.mapImp.clearMarkers();
- }
- }
- },
/**
* @vuese
* Function to switch from 2D to 3D
@@ -2808,7 +2823,7 @@ export default {
anatomyImages: markRaw({}),
imageRadio: false,
imageType: 'Image',
- imageTypes: ['Image', 'Plot', 'Scaffold', 'Segmentation'],
+ imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
openMapRef: undefined,
backgroundIconRef: undefined,
toolbarOptions: [
diff --git a/src/mixins/scicrunchMixin.js b/src/mixins/scicrunchMixin.js
deleted file mode 100644
index ab4f4f3d..00000000
--- a/src/mixins/scicrunchMixin.js
+++ /dev/null
@@ -1,259 +0,0 @@
-const getFilesInfo = async (api, key, idsList, types) => {
- let params = new URLSearchParams();
- types.forEach((type) => {
- params.append("filetypes", type);
- });
- let response = await fetch(`${api}/get-organ-curies/?${params}`);
- let data = await response.json();
- const identifiers = [];
- data.uberon.array.forEach((pair) => {
- const identifier = {
- id: pair.id.toUpperCase(),
- name: pair.name,
- };
- if (idsList.includes(identifier[key])) {
- identifiers.push(identifier);
- }
- });
- const keys = identifiers.map((item) => item[key]);
- response = await fetch(`${api}/get-files-info-for-curies`, {
- method: "POST",
- body: JSON.stringify({
- filetypes: types,
- curies: keys,
- species: ["Rat"],
- }),
- headers: {
- "Content-Type": "application/json",
- },
- });
- data = await response.json();
- return data;
-};
-
-const getFileName = (filePath) => {
- return filePath.substring(filePath.lastIndexOf("/") + 1);
-};
-
-export default {
- methods: {
- getBiolucidaThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "biolucida-2d",
- "biolucida-3d",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.biolucida_id) {
- let image = {
- thumbnail: this.getBiolucidaThumbnailURL(
- entry.biolucida_id
- ),
- resource: entry.file_path,
- id: entry.id,
- title: getFileName(entry.file_path),
- type: "Image",
- link: this.getBiolucidaThumbnailLink(entry.biolucida_id),
- mimetype: entry.mimetype,
- };
- list.push(image);
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getBiolucidaThumbnailURL: function (biolucidaId) {
- return `${this.sparcAPI}/thumbnail/${biolucidaId}`;
- },
- getBiolucidaThumbnailLink: function (biolucidaId) {
- return `${this.sparcAPI}/thumbnail/${biolucidaId}`;
- },
- getSegmentationThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "mbf-segmentation",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- let image = {
- thumbnail: this.getSegmentationThumbnailURL(
- entry.id,
- entry.version,
- entry.file_path
- ),
- resource: entry.file_path,
- id: entry.id,
- title: getFileName(entry.file_path),
- type: "Segmentation",
- link: this.getSegmentationThumbnailLink(
- entry.id,
- entry.version,
- entry.file_path
- ),
- mimetype: entry.mimetype,
- };
- list.push(image);
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getSegmentationThumbnailURL: function (
- datasetId,
- datasetVersion,
- filePath
- ) {
- return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
- },
- getSegmentationThumbnailLink: function (
- datasetId,
- datasetVersion,
- filePath
- ) {
- return `https://sparc.biolucida.net:8081/thumbnail?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
- },
- getScaffoldThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "abi-thumbnail",
- "abi-scaffold-metadata-file",
- "abi-scaffold-view-file",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.type === "abi-scaffold-metadata-file") {
- const thumbnailURL = this.getScaffoldThumbnailURL(
- entry,
- value
- );
- if (thumbnailURL) {
- let image = {
- thumbnail: thumbnailURL,
- resource: entry.file_path,
- id: entry.id,
- title: getFileName(entry.file_path),
- type: "Scaffold",
- link: thumbnailURL,
- mimetype: entry.mimetype,
- };
- list.push(image);
- }
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getScaffoldThumbnailURL: function (entry, list) {
- const viewEntry = this.findEntryWithPathInArray(
- entry,
- list,
- "abi-scaffold-view-file"
- );
- const thumbnailEntry = this.findEntryWithPathInArray(
- viewEntry,
- list,
- "abi-thumbnail"
- );
- if (thumbnailEntry) {
- return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}`;
- }
- return undefined;
- },
- 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;
- },
- getPlotThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "abi-plot",
- "abi-thumbnail",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.type === "abi-plot") {
- const thumbnailURL = this.getPlotThumbnailURL(entry);
- if (thumbnailURL) {
- let image = {
- thumbnail: thumbnailURL,
- resource: entry.file_path,
- datasetId: entry.id,
- title: getFileName(entry.file_path),
- type: "Plot",
- link: thumbnailURL,
- mimetype: entry.mimetype,
- };
- list.push(image);
- }
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getPlotThumbnailURL: function (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 `${this.sparcAPI}/s3-resource/${entry.id}/files/${entry.isSourceOf[0]}`;
- }
- return undefined;
- },
- },
-};
diff --git a/src/services/scicrunchQueries.js b/src/services/scicrunchQueries.js
new file mode 100644
index 00000000..d4416e65
--- /dev/null
+++ b/src/services/scicrunchQueries.js
@@ -0,0 +1,255 @@
+const getFilesInfo = async (sparcApi, key, idsList, types) => {
+ let params = new URLSearchParams();
+ types.forEach((type) => {
+ params.append("filetypes", type);
+ });
+ let response = await fetch(`${sparcApi}/get-organ-curies/?${params}`);
+ let data = await response.json();
+ const identifiers = [];
+ data.uberon.array.forEach((pair) => {
+ const identifier = {
+ id: pair.id.toUpperCase(),
+ name: pair.name,
+ };
+ if (idsList.includes(identifier[key])) {
+ identifiers.push(identifier);
+ }
+ });
+ const keys = identifiers.map((item) => item[key]);
+ response = await fetch(`${sparcApi}/get-files-info-for-curies`, {
+ method: "POST",
+ body: JSON.stringify({
+ filetypes: types,
+ curies: keys,
+ species: ["Rat"],
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ data = await response.json();
+ return data;
+};
+
+const getFileName = (filePath) => {
+ return filePath.substring(filePath.lastIndexOf("/") + 1);
+};
+
+const getBiolucidaThumbnailURL = (sparcApi, biolucidaId) => {
+ return `${sparcApi}/thumbnail/${biolucidaId}`;
+};
+const getBiolucidaThumbnails = async (sparcApi, key, idsList) => {
+ try {
+ const data = await getFilesInfo(sparcApi, key, idsList, [
+ "biolucida-2d",
+ "biolucida-3d",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const 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: getFileName(entry.file_path),
+ type: "Image",
+ link: thumbnailURL,
+ mimetype: entry.mimetype,
+ };
+ 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, key, idsList) => {
+ try {
+ const data = await getFilesInfo(sparcApi, key, idsList, [
+ "mbf-segmentation",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const 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: getFileName(entry.file_path),
+ type: "Segmentation",
+ link: thumbnailURL,
+ mimetype: entry.mimetype,
+ };
+ 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, key, idsList) => {
+ try {
+ const data = await getFilesInfo(sparcApi, key, idsList, [
+ "abi-thumbnail",
+ "abi-scaffold-metadata-file",
+ "abi-scaffold-view-file",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const 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: getFileName(entry.file_path),
+ type: "Scaffold",
+ link: thumbnailURL,
+ };
+ 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, key, idsList) => {
+ try {
+ const data = await getFilesInfo(sparcApi, key, idsList, [
+ "abi-plot",
+ "abi-thumbnail",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.type === "abi-plot") {
+ const thumbnailURL = getPlotThumbnailURL(sparcApi, entry);
+ if (thumbnailURL) {
+ let image = {
+ thumbnail: thumbnailURL,
+ resource: entry.file_path,
+ datasetId: entry.id,
+ title: getFileName(entry.file_path),
+ type: "Plot",
+ link: thumbnailURL,
+ };
+ list.push(image);
+ }
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ return {};
+};
+
+export {
+ getBiolucidaThumbnails,
+ getSegmentationThumbnails,
+ getScaffoldThumbnails,
+ getPlotThumbnails,
+};
From 6f45801cd10e728bc0ba913373f6663106dee62a Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:17:42 +1200
Subject: [PATCH 16/47] Rename function
---
src/mixins/imageMixin.js | 26 ++++++--------------------
1 file changed, 6 insertions(+), 20 deletions(-)
diff --git a/src/mixins/imageMixin.js b/src/mixins/imageMixin.js
index 0b7e3cf8..f9ba2db8 100644
--- a/src/mixins/imageMixin.js
+++ b/src/mixins/imageMixin.js
@@ -2,33 +2,23 @@ export default {
methods: {
populateMapWithImages: function (mapImp, images, type) {
for (const [key, list] of Object.entries(images)) {
- this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type);
+ this.downloadImageThumbnail(mapImp, key, list, type);
}
},
- downloadAndCreateImageThumbnailMarkerUrl: function (
- mapImp,
- key,
- list,
- type
- ) {
+ downloadImageThumbnail: function (mapImp, key, list, type) {
const count = list.length;
if (count > 0) {
//Pick a random image
const index = Math.floor(Math.random() * count);
const thumbnail = list[index].thumbnail;
this.getThumbnail(thumbnail, type)
- .then((wrappedElement) => {
- this.createImageThumbnailMarkerUrl(mapImp, key, wrappedElement);
+ .then((wrapperElement) => {
+ this.addImageThumbnailMarker(mapImp, key, wrapperElement);
})
.catch(() => {
//Failed to download, pick another one
list.splice(index);
- this.downloadAndCreateImageThumbnailMarkerUrl(
- mapImp,
- key,
- list,
- type
- );
+ this.downloadImageThumbnail(mapImp, key, list, type);
});
}
},
@@ -89,17 +79,13 @@ export default {
img.src = url;
});
},
- createImageThumbnailMarkerUrl: function (mapImp, id, wrapperElement) {
- // add it to the flatmap
+ addImageThumbnailMarker: function (mapImp, id, wrapperElement) {
const markerIdentifier = mapImp.addMarker(id, {
element: wrapperElement,
className: "highlight-marker",
cluster: false,
type: "image",
});
-
- const marker = mapImp.addMarker(id);
- return marker;
},
},
};
From 326c1e6b1c1d6715e5a6cbed1672fc42ffdf195d Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Thu, 22 Aug 2024 16:42:58 +1200
Subject: [PATCH 17/47] Fix image size issue
---
package-lock.json | 8 ++++----
package.json | 2 +-
src/components/FlatmapVuer.vue | 1 -
3 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9d52dd9e..93345a70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "Apache-2.0",
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.2",
- "@abi-software/map-utilities": "^1.0.0-beta.1",
+ "@abi-software/map-utilities": "^1.1.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
@@ -83,9 +83,9 @@
}
},
"node_modules/@abi-software/map-utilities": {
- "version": "1.0.0-beta.1",
- "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.0.0-beta.1.tgz",
- "integrity": "sha512-gOMGlaAqY8Rv6rXJ64oqOeTJHO1W0FigQZnTJKMOj9wMA0jWYsHHREyP8FKbEZZ0YGk9l2cJGL38K/sHTkcNpw==",
+ "version": "1.1.0-beta.1",
+ "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.0-beta.1.tgz",
+ "integrity": "sha512-HMVxeoNn+iTGhw2Y2YOTXGjrxXeFyS1zrpUklLN9+5lGoCt2bakUbB+Xpc2rwgZUmTvWpPAeUzff1iDH5v/W3A==",
"dependencies": {
"@abi-software/gallery": "^1.1.0",
"@abi-software/svg-sprite": "^1.0.0",
diff --git a/package.json b/package.json
index 97cac0de..a9ed2736 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
},
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.2",
- "@abi-software/map-utilities": "^1.0.0-beta.1",
+ "@abi-software/map-utilities": "^1.1.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 9057ec8d..a6664d0c 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -1799,7 +1799,6 @@ export default {
* @arg data
*/
checkAndCreatePopups: async function (data) {
- console.log("checkandcreate")
if (data.feature.type === 'marker') {
this.tooltipType = 'image'
if (data.resource[0] in this.anatomyImages[this.imageType]) {
From b4cecee48721fe72c147b1f19794afd883c6be41 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:07:43 +1200
Subject: [PATCH 18/47] Create settings store
---
src/App.vue | 9 ++-
src/components/FlatmapVuer.vue | 37 +++++----
src/main.js | 2 +-
src/services/scicrunchQueries.js | 134 ++++++++++++++++++++++---------
src/{store => stores}/index.js | 0
src/stores/settings.js | 17 ++++
6 files changed, 140 insertions(+), 59 deletions(-)
rename src/{store => stores}/index.js (100%)
create mode 100644 src/stores/settings.js
diff --git a/src/App.vue b/src/App.vue
index 6a6658d0..21449e0c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,11 +110,12 @@ import './icons/mapicon-species-style.css'
import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
import { HelpModeDialog } from '@abi-software/map-utilities'
import '@abi-software/map-utilities/dist/style.css'
-import imageMixin from './mixins/imageMixin.js'
+import { mapStores } from 'pinia';
+import { useSettingsStore } from './stores/settings';
+import { getOrganCuries } from './services/scicrunchQueries'
export default {
name: 'app',
- mixins: [imageMixin],
components: {
Autocomplete,
Button,
@@ -298,6 +299,10 @@ export default {
},
mounted: function () {
this.multiflatmapRef = this.$refs.multi;
+ getOrganCuries(this.sparcAPI).then((organCuries) => this.settingsStore.updateOrganCuries(organCuries))
+ },
+ computed: {
+ ...mapStores(useSettingsStore),
},
watch: {
helpMode: function (newVal) {
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index a6664d0c..92861dce 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -426,7 +426,7 @@ Please use `const` to assign meaningful names to them...
ref="backgroundPopover"
:virtual-ref="backgroundIconRef"
placement="top-start"
- width="320"
+ width="330"
:teleported="false"
trigger="click"
popper-class="background-popper h-auto"
@@ -501,7 +501,7 @@ Please use `const` to assign meaningful names to them...
Images Display
+ Types display
- Hide
- Show
+ Marker
+ Image
@@ -681,8 +681,9 @@ import yellowstar from '../icons/yellowstar'
import ResizeSensor from 'css-element-queries/src/ResizeSensor'
import * as flatmap from '@abi-software/flatmap-viewer'
import { AnnotationService } from '@abi-software/sparc-annotation'
-import { mapState } from 'pinia'
-import { useMainStore } from '@/store/index'
+import { mapState, mapStores } from 'pinia'
+import { useMainStore } from '@/stores/index'
+import { useSettingsStore } from '@/stores/settings'
import { DrawToolbar, Tooltip, TreeControls } from '@abi-software/map-utilities'
import '@abi-software/map-utilities/dist/style.css'
import {
@@ -820,19 +821,22 @@ export default {
populateImageThumbnails: async function (type) {
if (this.mapImp) {
this.loading = true
- const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
+ const identifiers = this.mapImp.anatomicalIdentifiers
+ const organCuries = this.settingsStore.organCuries
this.closeTooltip()
this.mapImp.clearMarkers();
- if (type === 'Image' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await getBiolucidaThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
- } else if (type === 'Segmentation' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await getSegmentationThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
- } else if (type === 'Scaffold' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await getScaffoldThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
- } else if (type === 'Plot' && !(type in this.anatomyImages)) {
- this.anatomyImages[type] = await getPlotThumbnails(this.sparcAPI, "id", anatomicalIdentifiers)
+ if (!(type in this.anatomyImages)) {
+ if (type === 'Image') {
+ this.anatomyImages[type] = await getBiolucidaThumbnails(this.sparcAPI, "id", identifiers, organCuries)
+ } else if (type === 'Segmentation') {
+ this.anatomyImages[type] = await getSegmentationThumbnails(this.sparcAPI, "id", identifiers, organCuries)
+ } else if (type === 'Scaffold') {
+ this.anatomyImages[type] = await getScaffoldThumbnails(this.sparcAPI, "id", identifiers, organCuries)
+ } else if (type === 'Plot') {
+ this.anatomyImages[type] = await getPlotThumbnails(this.sparcAPI, "id", identifiers, organCuries)
+ }
}
- if (this.anatomyImages[type]) {
+ if (type in this.anatomyImages) {
this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
}
this.loading = false
@@ -2865,6 +2869,7 @@ export default {
},
computed: {
...mapState(useMainStore, ['userToken']),
+ ...mapStores(useSettingsStore),
isValidDrawnCreated: function () {
return Object.keys(this.drawnCreatedEvent).length > 0
},
diff --git a/src/main.js b/src/main.js
index c7585f1b..99b5d454 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/services/scicrunchQueries.js b/src/services/scicrunchQueries.js
index d4416e65..487ebef3 100644
--- a/src/services/scicrunchQueries.js
+++ b/src/services/scicrunchQueries.js
@@ -1,49 +1,75 @@
-const getFilesInfo = async (sparcApi, key, idsList, types) => {
+const getOrganCuries = async (sparcApi, filetypes = [], species = []) => {
let params = new URLSearchParams();
- types.forEach((type) => {
+ filetypes.forEach((type) => {
params.append("filetypes", type);
});
- let response = await fetch(`${sparcApi}/get-organ-curies/?${params}`);
- let data = await response.json();
- const identifiers = [];
+ 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 identifier = {
+ const organCurie = {
id: pair.id.toUpperCase(),
name: pair.name,
};
- if (idsList.includes(identifier[key])) {
- identifiers.push(identifier);
- }
+ organCuries.push(organCurie);
});
- const keys = identifiers.map((item) => item[key]);
- response = await fetch(`${sparcApi}/get-files-info-for-curies`, {
+
+ return organCuries;
+};
+
+const getFilesInfoForCuries = async (
+ sparcApi,
+ key,
+ identifiers,
+ organCuries,
+ filetypes
+) => {
+ const curies = organCuries
+ .filter((item) => identifiers.includes(item[key]))
+ .map((item) => item.id);
+
+ const response = await fetch(`${sparcApi}/get-files-info-for-curies`, {
method: "POST",
body: JSON.stringify({
- filetypes: types,
- curies: keys,
- species: ["Rat"],
+ curies: curies,
+ filetypes: filetypes,
}),
headers: {
"Content-Type": "application/json",
},
});
- data = await response.json();
+ const data = await response.json();
+
return data;
};
-const getFileName = (filePath) => {
+const getFileNameFromPath = (filePath) => {
return filePath.substring(filePath.lastIndexOf("/") + 1);
};
const getBiolucidaThumbnailURL = (sparcApi, biolucidaId) => {
return `${sparcApi}/thumbnail/${biolucidaId}`;
};
-const getBiolucidaThumbnails = async (sparcApi, key, idsList) => {
+
+const getBiolucidaThumbnails = async (
+ sparcApi,
+ key,
+ identifiers,
+ organCuries
+) => {
try {
- const data = await getFilesInfo(sparcApi, key, idsList, [
- "biolucida-2d",
- "biolucida-3d",
- ]);
+ const data = await getFilesInfoForCuries(
+ sparcApi,
+ key,
+ identifiers,
+ organCuries,
+ ["biolucida-2d", "biolucida-3d"]
+ );
if (data["files_info"]) {
const images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
@@ -59,10 +85,11 @@ const getBiolucidaThumbnails = async (sparcApi, key, idsList) => {
thumbnail: thumbnailURL,
resource: entry.file_path,
id: entry.id,
- title: getFileName(entry.file_path),
+ title: getFileNameFromPath(entry.file_path),
type: "Image",
link: thumbnailURL,
mimetype: entry.mimetype,
+ species: entry.species,
};
list.push(image);
}
@@ -86,11 +113,21 @@ const getSegmentationThumbnailURL = (
) => {
return `${sparcApi}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
};
-const getSegmentationThumbnails = async (sparcApi, key, idsList) => {
+
+const getSegmentationThumbnails = async (
+ sparcApi,
+ key,
+ identifiers,
+ organCuries
+) => {
try {
- const data = await getFilesInfo(sparcApi, key, idsList, [
- "mbf-segmentation",
- ]);
+ const data = await getFilesInfoForCuries(
+ sparcApi,
+ key,
+ identifiers,
+ organCuries,
+ ["mbf-segmentation"]
+ );
if (data["files_info"]) {
const images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
@@ -107,10 +144,11 @@ const getSegmentationThumbnails = async (sparcApi, key, idsList) => {
thumbnail: thumbnailURL,
resource: entry.file_path,
id: entry.id,
- title: getFileName(entry.file_path),
+ title: getFileNameFromPath(entry.file_path),
type: "Segmentation",
link: thumbnailURL,
mimetype: entry.mimetype,
+ species: entry.species,
};
list.push(image);
});
@@ -142,6 +180,7 @@ const findEntryWithPathInArray = (entry, list, type) => {
}
return undefined;
};
+
const getScaffoldThumbnailURL = (sparcApi, entry, list) => {
const viewEntry = findEntryWithPathInArray(
entry,
@@ -158,13 +197,21 @@ const getScaffoldThumbnailURL = (sparcApi, entry, list) => {
}
return undefined;
};
-const getScaffoldThumbnails = async (sparcApi, key, idsList) => {
+
+const getScaffoldThumbnails = async (
+ sparcApi,
+ key,
+ identifiers,
+ organCuries
+) => {
try {
- const data = await getFilesInfo(sparcApi, key, idsList, [
- "abi-thumbnail",
- "abi-scaffold-metadata-file",
- "abi-scaffold-view-file",
- ]);
+ const data = await getFilesInfoForCuries(
+ sparcApi,
+ key,
+ identifiers,
+ organCuries,
+ ["abi-thumbnail", "abi-scaffold-metadata-file", "abi-scaffold-view-file"]
+ );
if (data["files_info"]) {
const images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
@@ -182,9 +229,10 @@ const getScaffoldThumbnails = async (sparcApi, key, idsList) => {
thumbnail: thumbnailURL,
resource: entry.file_path,
id: entry.id,
- title: getFileName(entry.file_path),
+ title: getFileNameFromPath(entry.file_path),
type: "Scaffold",
link: thumbnailURL,
+ species: entry.species,
};
list.push(image);
}
@@ -209,12 +257,16 @@ const getPlotThumbnailURL = (sparcApi, entry) => {
}
return undefined;
};
-const getPlotThumbnails = async (sparcApi, key, idsList) => {
+
+const getPlotThumbnails = async (sparcApi, key, identifiers, organCuries) => {
try {
- const data = await getFilesInfo(sparcApi, key, idsList, [
- "abi-plot",
- "abi-thumbnail",
- ]);
+ const data = await getFilesInfoForCuries(
+ sparcApi,
+ key,
+ identifiers,
+ organCuries,
+ ["abi-plot", "abi-thumbnail"]
+ );
if (data["files_info"]) {
const images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
@@ -228,9 +280,10 @@ const getPlotThumbnails = async (sparcApi, key, idsList) => {
thumbnail: thumbnailURL,
resource: entry.file_path,
datasetId: entry.id,
- title: getFileName(entry.file_path),
+ title: getFileNameFromPath(entry.file_path),
type: "Plot",
link: thumbnailURL,
+ species: entry.species,
};
list.push(image);
}
@@ -248,6 +301,7 @@ const getPlotThumbnails = async (sparcApi, key, idsList) => {
};
export {
+ getOrganCuries,
getBiolucidaThumbnails,
getSegmentationThumbnails,
getScaffoldThumbnails,
diff --git a/src/store/index.js b/src/stores/index.js
similarity index 100%
rename from src/store/index.js
rename to src/stores/index.js
diff --git a/src/stores/settings.js b/src/stores/settings.js
new file mode 100644
index 00000000..465d6751
--- /dev/null
+++ b/src/stores/settings.js
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+/* eslint-disable no-alert, no-console */
+
+export const useSettingsStore = defineStore("settings", {
+ state: () => {
+ return {
+ organCuries: [],
+ };
+ },
+ getters: {},
+ actions: {
+ updateOrganCuries(organCuries) {
+ this.organCuries = organCuries;
+ },
+ },
+});
From 2fc3286cf386b64cfb319e89c4fc7fc4f7bc854b Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Mon, 26 Aug 2024 09:53:56 +1200
Subject: [PATCH 19/47] Emit image data to sidebar
---
src/components/FlatmapVuer.vue | 30 ++++++++++++++---------------
src/components/MultiFlatmapVuer.vue | 12 ++++++++++++
2 files changed, 27 insertions(+), 15 deletions(-)
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 92861dce..f9f1168f 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -1808,19 +1808,7 @@ export default {
if (data.resource[0] in this.anatomyImages[this.imageType]) {
this.imageEntry = this.anatomyImages[this.imageType][data.resource[0]]
}
- // this.displayTooltip(data.feature.models)
-
- let options = { className: 'flatmapvuer-popover' }
- let featureId = this.mapImp.modelFeatureIds(data.feature.models)[0]
- if (!this.activeDrawTool) {
- options.positionAtLastClick = true
- }
- this.tooltipDisplay = true;
- this.$nextTick(() => {
- this.mapImp.showPopup(featureId, this.$refs.tooltip.$el, options);
- this.popUpCssHacks();
- });
-
+ this.displayTooltip(data.feature.models)
} else {
// Call flatmap database to get the connection data
if (this.viewingMode === 'Annotation') {
@@ -2123,6 +2111,9 @@ export default {
}
this.$emit('connectivity-info-open', this.provenanceEntry);
}
+ if (this.imageThumbnailSidebar && this.imageEntry.length && this.viewingMode === 'Exploration') {
+ this.$emit('image-thumbnail-open', this.imageEntry)
+ }
// If UI is not disabled,
// And connectivityInfoSidebar is not set (default) or set to `false`
// Provenance popup will be shown on map
@@ -2132,8 +2123,10 @@ export default {
this.viewingMode === 'Annotation' ||
(
this.viewingMode === 'Exploration' &&
- !this.connectivityInfoSidebar &&
- this.hasTooltipEntry()
+ (
+ (!this.connectivityInfoSidebar && this.hasTooltipEntry()) ||
+ (!this.imageThumbnailSidebar && this.imageEntry.length)
+ )
)
)
) {
@@ -2733,6 +2726,13 @@ export default {
type: Boolean,
default: false,
},
+ /**
+ * The option to show image thumbnail in sidebar
+ */
+ imageThumbnailSidebar: {
+ type: Boolean,
+ default: false,
+ },
},
provide() {
return {
diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index d6591266..c2be68e5 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -81,6 +81,8 @@
style="height: 100%"
:flatmapAPI="flatmapAPI"
:sparcAPI="sparcAPI"
+ :imageThumbnailSidebar="imageThumbnailSidebar"
+ @image-thumbnail-open="onImageThumbnailOpen"
/>
@@ -264,6 +266,9 @@ export default {
onConnectivityInfoOpen: function (entryData) {
this.$emit('connectivity-info-open', entryData);
},
+ onImageThumbnailOpen: function (payload) {
+ this.$emit('image-thumbnail-open', payload);
+ },
onSelectionsDataChanged: function (data) {
this.$emit('pathway-selection-changed', data);
},
@@ -716,6 +721,13 @@ export default {
type: Boolean,
default: false,
},
+ /**
+ * The option to show image thumbnail in sidebar
+ */
+ imageThumbnailSidebar: {
+ type: Boolean,
+ default: false,
+ },
},
data: function () {
return {
From fe64a8d6a4f352e56fa1ec4ef484a7df5ab652ce Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 27 Aug 2024 12:41:41 +1200
Subject: [PATCH 20/47] minor update
---
package-lock.json | 45 +++++++++++----------------------------------
package.json | 2 +-
2 files changed, 12 insertions(+), 35 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 703e1934..43cdc974 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
"@cypress/webpack-dev-server": "^3.6.1",
"@vitejs/plugin-vue": "^4.6.2",
"@vuese/markdown-render": "^2.11.3",
- "@vuese/parser": "^2.10.3",
+ "@vuese/parser": "^2.9.1",
"auto-changelog": "^2.4.0",
"babel-eslint": "^10.1.0",
"chokidar": "^3.6.0",
@@ -2619,17 +2619,10 @@
"dev": true
},
"node_modules/@vuese/parser": {
- "version": "2.10.3",
- "resolved": "https://registry.npmjs.org/@vuese/parser/-/parser-2.10.3.tgz",
- "integrity": "sha512-Vcn++EJps0KS8fs9aBllFC6CKx6ttVPXtbbZCyXXWtoQC5VyDaydU0UFVaDciznUNGqwSzjNNVvxQqOPdmV0vQ==",
- "dev": true,
- "dependencies": {
- "@babel/generator": "^7.12.10",
- "@babel/parser": "^7.12.0",
- "@babel/traverse": "^7.12.0",
- "@babel/types": "^7.3.4",
- "vue-template-compiler": "^2.6.11"
- }
+ "version": "2.9.1",
+ "resolved": "https://registry.npmjs.org/@vuese/parser/-/parser-2.9.1.tgz",
+ "integrity": "sha512-5XVgmg9TviosbQEzo0Et1n/WX6s+fmK2l3DKEX8tGaPJLKN+Qh5GEosjHVYw1E4nZllPv2kDa7HqKwqR+0QUUw==",
+ "dev": true
},
"node_modules/@vueuse/core": {
"version": "9.13.0",
@@ -3579,9 +3572,9 @@
"dev": true
},
"node_modules/axios": {
- "version": "1.7.2",
- "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
- "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+ "version": "1.7.5",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz",
+ "integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
@@ -4842,12 +4835,6 @@
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
"integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
},
- "node_modules/de-indent": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
- "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
- "dev": true
- },
"node_modules/debug": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -9192,9 +9179,9 @@
"integrity": "sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ=="
},
"node_modules/micromatch": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
- "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+ "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dependencies": {
"braces": "^3.0.3",
"picomatch": "^2.3.1"
@@ -13201,16 +13188,6 @@
"url": "https://opencollective.com/eslint"
}
},
- "node_modules/vue-template-compiler": {
- "version": "2.7.16",
- "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
- "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
- "dev": true,
- "dependencies": {
- "de-indent": "^1.0.2",
- "he": "^1.2.0"
- }
- },
"node_modules/watchpack": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
diff --git a/package.json b/package.json
index f7a7d7c1..541ec61b 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
"@cypress/webpack-dev-server": "^3.6.1",
"@vitejs/plugin-vue": "^4.6.2",
"@vuese/markdown-render": "^2.11.3",
- "@vuese/parser": "^2.10.3",
+ "@vuese/parser": "^2.9.1",
"auto-changelog": "^2.4.0",
"babel-eslint": "^10.1.0",
"chokidar": "^3.6.0",
From 76e6d53130b59c4c40c2684cc474d5b7ec023603 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:01:25 +1200
Subject: [PATCH 21/47] Try to fix testing
---
package-lock.json | 211 ++++++++++++++++++++++++++++++++++++++++++++++
package.json | 5 +-
2 files changed, 215 insertions(+), 1 deletion(-)
diff --git a/package-lock.json b/package-lock.json
index 43cdc974..6ee3dec0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
+ "@rollup/rollup-linux-x64-gnu": "*",
"css-element-queries": "^1.2.2",
"element-plus": "2.5.5",
"mitt": "^3.0.1",
@@ -40,6 +41,9 @@
"sass": "^1.69.5",
"vite": "^5.0.10",
"vitepress": "^1.0.0-rc.44"
+ },
+ "optionalDependencies": {
+ "@rollup/rollup-linux-x64-gnu": "^4.21.1"
}
},
"node_modules/@abi-software/flatmap-viewer": {
@@ -1669,6 +1673,32 @@
}
}
},
+ "node_modules/@rollup/rollup-android-arm-eabi": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
+ "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
+ "node_modules/@rollup/rollup-android-arm64": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz",
+ "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.18.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz",
@@ -1682,6 +1712,174 @@
"darwin"
]
},
+ "node_modules/@rollup/rollup-darwin-x64": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz",
+ "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz",
+ "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz",
+ "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-gnu": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz",
+ "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-musl": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz",
+ "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz",
+ "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz",
+ "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-s390x-gnu": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz",
+ "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==",
+ "cpu": [
+ "s390x"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-gnu": {
+ "version": "4.21.1",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.1.tgz",
+ "integrity": "sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-musl": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz",
+ "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-arm64-msvc": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz",
+ "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-ia32-msvc": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz",
+ "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-x64-msvc": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz",
+ "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
"node_modules/@shikijs/core": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.6.3.tgz",
@@ -11148,6 +11346,19 @@
"fsevents": "~2.3.2"
}
},
+ "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": {
+ "version": "4.18.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz",
+ "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 541ec61b..6de22d58 100644
--- a/package.json
+++ b/package.json
@@ -92,5 +92,8 @@
"browserslist": [
"> 1%",
"last 2 versions"
- ]
+ ],
+ "optionalDependencies": {
+ "@rollup/rollup-linux-x64-gnu": "^4.21.1"
+ }
}
From 9a943edafa2acb579d9ae9453abb998dfb5714b9 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:11:48 +1200
Subject: [PATCH 22/47] Add more stored state
---
package-lock.json | 58 +++++-----------
package.json | 2 +-
src/components/FlatmapVuer.vue | 52 +++++++-------
src/services/scicrunchQueries.js | 115 ++++++++++++-------------------
src/stores/settings.js | 31 ++++++++-
5 files changed, 120 insertions(+), 138 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6ee3dec0..a044d644 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,10 @@
"license": "Apache-2.0",
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.4",
- "@abi-software/map-utilities": "^1.1.0-beta.1",
+ "@abi-software/map-utilities": "^1.1.0-beta.2",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
- "@rollup/rollup-linux-x64-gnu": "*",
"css-element-queries": "^1.2.2",
"element-plus": "2.5.5",
"mitt": "^3.0.1",
@@ -87,11 +86,11 @@
}
},
"node_modules/@abi-software/map-utilities": {
- "version": "1.1.0-beta.1",
- "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.0-beta.1.tgz",
- "integrity": "sha512-HMVxeoNn+iTGhw2Y2YOTXGjrxXeFyS1zrpUklLN9+5lGoCt2bakUbB+Xpc2rwgZUmTvWpPAeUzff1iDH5v/W3A==",
+ "version": "1.1.0-beta.2",
+ "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.0-beta.2.tgz",
+ "integrity": "sha512-pDK6H8eciFgYl2XGVJIVuXmm+zvPI9VsM2NoN0mOX3kC1sMD7yL+dIO9VJe1xARg8zSZidAf1ra55je6Z31yTA==",
"dependencies": {
- "@abi-software/gallery": "^1.1.0",
+ "@abi-software/gallery": "^1.1.1",
"@abi-software/svg-sprite": "^1.0.0",
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.7.3",
@@ -2311,28 +2310,6 @@
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
"integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
},
- "node_modules/@types/eslint": {
- "version": "8.56.10",
- "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
- "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
- "dev": true,
- "peer": true,
- "dependencies": {
- "@types/estree": "*",
- "@types/json-schema": "*"
- }
- },
- "node_modules/@types/eslint-scope": {
- "version": "3.7.7",
- "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
- "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
- "dev": true,
- "peer": true,
- "dependencies": {
- "@types/eslint": "*",
- "@types/estree": "*"
- }
- },
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3262,10 +3239,10 @@
"node": ">=0.4.0"
}
},
- "node_modules/acorn-import-assertions": {
- "version": "1.9.0",
- "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
- "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+ "node_modules/acorn-import-attributes": {
+ "version": "1.9.5",
+ "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+ "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
"dev": true,
"peer": true,
"peerDependencies": {
@@ -5406,9 +5383,9 @@
}
},
"node_modules/enhanced-resolve": {
- "version": "5.17.0",
- "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz",
- "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==",
+ "version": "5.17.1",
+ "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+ "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
"dev": true,
"peer": true,
"dependencies": {
@@ -13436,22 +13413,21 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/webpack": {
- "version": "5.91.0",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
- "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+ "version": "5.94.0",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+ "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
"dev": true,
"peer": true,
"dependencies": {
- "@types/eslint-scope": "^3.7.3",
"@types/estree": "^1.0.5",
"@webassemblyjs/ast": "^1.12.1",
"@webassemblyjs/wasm-edit": "^1.12.1",
"@webassemblyjs/wasm-parser": "^1.12.1",
"acorn": "^8.7.1",
- "acorn-import-assertions": "^1.9.0",
+ "acorn-import-attributes": "^1.9.5",
"browserslist": "^4.21.10",
"chrome-trace-event": "^1.0.2",
- "enhanced-resolve": "^5.16.0",
+ "enhanced-resolve": "^5.17.1",
"es-module-lexer": "^1.2.1",
"eslint-scope": "5.1.1",
"events": "^3.2.0",
diff --git a/package.json b/package.json
index 6de22d58..b8fbb11e 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
},
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.4",
- "@abi-software/map-utilities": "^1.1.0-beta.1",
+ "@abi-software/map-utilities": "^1.1.0-beta.2",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 587578de..ae4dbeba 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -820,36 +820,44 @@ export default {
*/
populateImageThumbnails: async function (type) {
if (this.mapImp) {
- this.loading = true
- const identifiers = this.mapImp.anatomicalIdentifiers
- const organCuries = this.settingsStore.organCuries
this.closeTooltip()
this.mapImp.clearMarkers();
- if (!(type in this.anatomyImages)) {
- if (type === 'Image') {
- this.anatomyImages[type] = await getBiolucidaThumbnails(this.sparcAPI, "id", identifiers, organCuries)
- } else if (type === 'Segmentation') {
- this.anatomyImages[type] = await getSegmentationThumbnails(this.sparcAPI, "id", identifiers, organCuries)
- } else if (type === 'Scaffold') {
- this.anatomyImages[type] = await getScaffoldThumbnails(this.sparcAPI, "id", identifiers, organCuries)
- } else if (type === 'Plot') {
- this.anatomyImages[type] = await getPlotThumbnails(this.sparcAPI, "id", identifiers, organCuries)
- }
- }
- if (type in this.anatomyImages) {
- this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
- }
- this.loading = false
+ const identifiers = this.mapImp.anatomicalIdentifiers
+ const imageThumbnails = this.settingsStore.getImageThumbnails(type, identifiers)
+ this.populateMapWithImages(this.mapImp, imageThumbnails, type)
+ }
+ },
+ /**
+ * @vuese
+ * Function to fetching image thumbnails.
+ */
+ fetchImageThumbnails: async function (type) {
+ let thumbnails = {}
+ const organCuries = this.settingsStore.organCuries
+ if (type === 'Image') {
+ thumbnails = await getBiolucidaThumbnails(this.sparcAPI, organCuries, type)
+ } else if (type === 'Segmentation') {
+ thumbnails = await getSegmentationThumbnails(this.sparcAPI, organCuries, type)
+ } else if (type === 'Scaffold') {
+ thumbnails = await getScaffoldThumbnails(this.sparcAPI, organCuries, type)
+ } else if (type === 'Plot') {
+ thumbnails = await getPlotThumbnails(this.sparcAPI, organCuries, type)
}
+ this.settingsStore.updateImageThumbnails(type, thumbnails)
},
/**
* @vuese
* Function to switch the type of displayed image.
* @arg type
*/
- setImageType: function (type) {
+ setImageType: async function (type) {
this.imageType = type
if (this.mapImp) {
+ if (!this.settingsStore.imageTypeCached(type)) {
+ this.loading = true
+ await this.fetchImageThumbnails(type)
+ this.loading = false
+ }
this.populateImageThumbnails(type)
}
},
@@ -1805,9 +1813,8 @@ export default {
checkAndCreatePopups: async function (data) {
if (data.feature.type === 'marker') {
this.tooltipType = 'image'
- if (data.resource[0] in this.anatomyImages[this.imageType]) {
- this.imageEntry = this.anatomyImages[this.imageType][data.resource[0]]
- }
+ const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, [data.resource[0]])
+ this.imageEntry = imageThumbnails[data.resource[0]]
this.displayTooltip(data.feature.models)
} else {
// Call flatmap database to get the connection data
@@ -2829,7 +2836,6 @@ export default {
drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
annotatedType: 'Anyone',
annotatedTypes: ['Anyone', 'Me', 'Others'],
- anatomyImages: markRaw({}),
imageRadio: false,
imageType: 'Image',
imageTypes: ['Image', 'Segmentation', 'Scaffold', 'Plot'],
diff --git a/src/services/scicrunchQueries.js b/src/services/scicrunchQueries.js
index 487ebef3..a6ab34af 100644
--- a/src/services/scicrunchQueries.js
+++ b/src/services/scicrunchQueries.js
@@ -22,21 +22,11 @@ const getOrganCuries = async (sparcApi, filetypes = [], species = []) => {
return organCuries;
};
-const getFilesInfoForCuries = async (
- sparcApi,
- key,
- identifiers,
- organCuries,
- filetypes
-) => {
- const curies = organCuries
- .filter((item) => identifiers.includes(item[key]))
- .map((item) => item.id);
-
+const getFilesInfoForCuries = async (sparcApi, organCuries, filetypes) => {
const response = await fetch(`${sparcApi}/get-files-info-for-curies`, {
method: "POST",
body: JSON.stringify({
- curies: curies,
+ curies: organCuries.map((item) => item.id),
filetypes: filetypes,
}),
headers: {
@@ -56,25 +46,18 @@ const getBiolucidaThumbnailURL = (sparcApi, biolucidaId) => {
return `${sparcApi}/thumbnail/${biolucidaId}`;
};
-const getBiolucidaThumbnails = async (
- sparcApi,
- key,
- identifiers,
- organCuries
-) => {
+const getBiolucidaThumbnails = async (sparcApi, organCuries, type) => {
try {
- const data = await getFilesInfoForCuries(
- sparcApi,
- key,
- identifiers,
- organCuries,
- ["biolucida-2d", "biolucida-3d"]
- );
+ const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+ "biolucida-2d",
+ "biolucida-3d",
+ ]);
+
if (data["files_info"]) {
- const images = {};
+ let images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
if (value.length > 0) {
- const list = [];
+ let list = [];
value.forEach((entry) => {
const thumbnailURL = getBiolucidaThumbnailURL(
sparcApi,
@@ -86,10 +69,11 @@ const getBiolucidaThumbnails = async (
resource: entry.file_path,
id: entry.id,
title: getFileNameFromPath(entry.file_path),
- type: "Image",
+ type: type,
link: thumbnailURL,
mimetype: entry.mimetype,
species: entry.species,
+ version: entry.version,
};
list.push(image);
}
@@ -114,25 +98,17 @@ const getSegmentationThumbnailURL = (
return `${sparcApi}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
};
-const getSegmentationThumbnails = async (
- sparcApi,
- key,
- identifiers,
- organCuries
-) => {
+const getSegmentationThumbnails = async (sparcApi, organCuries, type) => {
try {
- const data = await getFilesInfoForCuries(
- sparcApi,
- key,
- identifiers,
- organCuries,
- ["mbf-segmentation"]
- );
+ const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+ "mbf-segmentation",
+ ]);
+
if (data["files_info"]) {
- const images = {};
+ let images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
if (value.length > 0) {
- const list = [];
+ let list = [];
value.forEach((entry) => {
const thumbnailURL = getSegmentationThumbnailURL(
sparcApi,
@@ -145,10 +121,11 @@ const getSegmentationThumbnails = async (
resource: entry.file_path,
id: entry.id,
title: getFileNameFromPath(entry.file_path),
- type: "Segmentation",
+ type: type,
link: thumbnailURL,
mimetype: entry.mimetype,
species: entry.species,
+ version: entry.version,
};
list.push(image);
});
@@ -198,25 +175,19 @@ const getScaffoldThumbnailURL = (sparcApi, entry, list) => {
return undefined;
};
-const getScaffoldThumbnails = async (
- sparcApi,
- key,
- identifiers,
- organCuries
-) => {
+const getScaffoldThumbnails = async (sparcApi, organCuries, type) => {
try {
- const data = await getFilesInfoForCuries(
- sparcApi,
- key,
- identifiers,
- organCuries,
- ["abi-thumbnail", "abi-scaffold-metadata-file", "abi-scaffold-view-file"]
- );
+ const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+ "abi-thumbnail",
+ "abi-scaffold-metadata-file",
+ "abi-scaffold-view-file",
+ ]);
+
if (data["files_info"]) {
- const images = {};
+ let images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
if (value.length > 0) {
- const list = [];
+ let list = [];
value.forEach((entry) => {
if (entry.type === "abi-scaffold-metadata-file") {
const thumbnailURL = getScaffoldThumbnailURL(
@@ -230,9 +201,10 @@ const getScaffoldThumbnails = async (
resource: entry.file_path,
id: entry.id,
title: getFileNameFromPath(entry.file_path),
- type: "Scaffold",
+ type: type,
link: thumbnailURL,
species: entry.species,
+ version: entry.version,
};
list.push(image);
}
@@ -258,20 +230,18 @@ const getPlotThumbnailURL = (sparcApi, entry) => {
return undefined;
};
-const getPlotThumbnails = async (sparcApi, key, identifiers, organCuries) => {
+const getPlotThumbnails = async (sparcApi, organCuries, type) => {
try {
- const data = await getFilesInfoForCuries(
- sparcApi,
- key,
- identifiers,
- organCuries,
- ["abi-plot", "abi-thumbnail"]
- );
+ const data = await getFilesInfoForCuries(sparcApi, organCuries, [
+ "abi-plot",
+ "abi-thumbnail",
+ ]);
+
if (data["files_info"]) {
- const images = {};
+ let images = {};
for (const [key, value] of Object.entries(data["files_info"])) {
if (value.length > 0) {
- const list = [];
+ let list = [];
value.forEach((entry) => {
if (entry.type === "abi-plot") {
const thumbnailURL = getPlotThumbnailURL(sparcApi, entry);
@@ -279,11 +249,12 @@ const getPlotThumbnails = async (sparcApi, key, identifiers, organCuries) => {
let image = {
thumbnail: thumbnailURL,
resource: entry.file_path,
- datasetId: entry.id,
+ id: entry.id,
title: getFileNameFromPath(entry.file_path),
- type: "Plot",
+ type: type,
link: thumbnailURL,
species: entry.species,
+ version: entry.version,
};
list.push(image);
}
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 465d6751..67bc5a73 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -6,12 +6,41 @@ export const useSettingsStore = defineStore("settings", {
state: () => {
return {
organCuries: [],
+ imageTypes: [],
+ imageThumbnails: {},
};
},
- getters: {},
+ 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]);
+ });
+ },
},
});
From 965a49e05852e9b77016143cf0ba2f0b566650fb Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 28 Aug 2024 15:08:50 +1200
Subject: [PATCH 23/47] Add markRaw
---
src/components/FlatmapVuer.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index ae4dbeba..cbfebfbe 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -1814,7 +1814,7 @@ export default {
if (data.feature.type === 'marker') {
this.tooltipType = 'image'
const imageThumbnails = this.settingsStore.getImageThumbnails(this.imageType, [data.resource[0]])
- this.imageEntry = imageThumbnails[data.resource[0]]
+ this.imageEntry = markRaw(imageThumbnails[data.resource[0]])
this.displayTooltip(data.feature.models)
} else {
// Call flatmap database to get the connection data
@@ -2767,7 +2767,7 @@ export default {
serverURL: undefined,
layers: [],
pathways: [],
- imageEntry: [],
+ imageEntry: markRaw([]),
tooltipType: 'provenance',
sckanDisplay: [
{
From cc056e176a05bc49671dd42858e36a7f292398f2 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:09:45 +1200
Subject: [PATCH 24/47] Update image select box
---
src/components/FlatmapVuer.vue | 21 +++++++++++++--------
1 file changed, 13 insertions(+), 8 deletions(-)
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index cbfebfbe..c05a1b47 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -460,7 +460,7 @@ Please use `const` to assign meaningful names to them...
:teleported="false"
v-model="drawnType"
placeholder="Select"
- class="select-box"
+ class="select-box annotationSelector"
popper-class="flatmap_dropdown"
@change="setDrawnType"
>
@@ -483,7 +483,7 @@ Please use `const` to assign meaningful names to them...
:teleported="false"
v-model="annotatedType"
placeholder="Select"
- class="select-box"
+ class="select-box annotationSelector"
popper-class="flatmap_dropdown"
@change="setAnnotatedType"
>
@@ -501,24 +501,24 @@ Please use `const` to assign meaningful names to them...
@@ -453,6 +454,7 @@ Please use `const` to assign meaningful names to them...
+ Drawn By*
+ Annotated By*
+ View Image
+
+
+ Hide
+ Show
+
+
Flight path display
@@ -640,7 +655,6 @@ import {
FlatmapQueries,
findTaxonomyLabel,
} from '../services/flatmapQueries.js'
-import imageMixin from '../mixins/imageMixin.js'
import yellowstar from '../icons/yellowstar'
import ResizeSensor from 'css-element-queries/src/ResizeSensor'
import * as flatmap from '@abi-software/flatmap-viewer'
@@ -737,7 +751,6 @@ const createUnfilledTooltipData = function () {
*/
export default {
name: 'FlatmapVuer',
- mixins: [imageMixin],
components: {
Button,
Col,
@@ -1084,6 +1097,26 @@ export default {
this.addAnnotationFeature()
}
},
+ /**
+ * @vuese
+ * Function to switch the type of person who annotated.
+ * @arg flag
+ */
+ setImage: function (flag) {
+ this.imageRadio = flag
+ if (this.mapImp) {
+ if (flag) {
+ for (const [key, value] of Object.entries(this.anatomyImages)) {
+ this.mapImp.addMarker(key, { className: "slandered-marker", cluster: false })
+ const id = this.mapImp.addImage(key, value[0].thumbnail)
+ if (id) this.imageIds.push(id)
+ }
+ } else {
+ this.mapImp.clearMarkers();
+ this.imageIds.forEach((id) => this.mapImp.removeImage(id))
+ }
+ }
+ },
/**
* @vuese
* Function to switch from 2D to 3D
@@ -2356,7 +2389,6 @@ export default {
this.computePathControlsMaximumHeight()
this.drawerOpen = true
this.mapResize()
- this.addImagesToMap()
this.handleMapClick();
/**
* This is ``onFlatmapReady`` event.
@@ -2452,14 +2484,6 @@ export default {
if (this.mapImp) return this.mapImp.search(term)
return []
},
- addImagesToMap: async function () {
- if (this.mapImp) {
- let response = await this.getImageDatasetFromScicrunch()
- if (response && response.success) {
- this.anatomyImages = this.populateViewerWithImages(response.datasets, this.mapImp)
- }
- }
- },
},
props: {
/**
@@ -2652,6 +2676,10 @@ export default {
type: Boolean,
default: false,
},
+ anatomyImages: {
+ type: Object,
+ default: {},
+ },
},
provide() {
return {
@@ -2781,7 +2809,8 @@ export default {
without: true,
}
}),
- anatomyImages: {}
+ imageRadio: false,
+ imageIds: [],
}
},
computed: {
diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 1ea3adf8..53502ba1 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -82,6 +82,7 @@
:flatmapAPI="flatmapAPI"
:rootURL="rootURL"
:sparcAPI="sparcAPI"
+ :anatomyImages="anatomyImages"
/>
@@ -724,6 +725,13 @@ export default {
type: Boolean,
default: false,
},
+ /**
+ * The option to show connectivity information in sidebar
+ */
+ anatomyImages: {
+ type: Object,
+ default: {},
+ },
},
data: function () {
return {
diff --git a/src/mixins/imageMixin.js b/src/mixins/imageMixin.js
index 89faf1a4..fc4b520f 100644
--- a/src/mixins/imageMixin.js
+++ b/src/mixins/imageMixin.js
@@ -78,30 +78,9 @@ const getAnnotatedBiolucida = function (data) {
export default {
// Note that the setting store is included in MapContent.vue
methods: {
- createThumbnailMarkers: function (mapImp, id, image) {
- return new Promise((resolve, reject) => {
- let wrapperElement = document.createElement("div");
- let img = new Image();
- img.src = image;
- img.style = "height: auto;width: 50px;margin-right: 80px;";
- img.onload = function () {
- wrapperElement.appendChild(img);
- const markerIdentifier = mapImp.addMarker(id, {
- element: wrapperElement,
- className: "highlight-marker",
- cluster: false,
- type: "image",
- });
- resolve(markerIdentifier);
- };
- img.onerror = function () {
- reject(new Error("Failed to load image at " + image));
- };
- });
- },
-
- populateViewerWithImages: function (datasets, mapImp = undefined) {
- let anatomyImageObjects = {};
+ populateAnatomyImageObjects: function (datasets) {
+ let anatomyCurieImageObjects = {};
+ let anatomyNameImageObjects = {};
const datasetsLength = datasets.length;
for (let i = 0; i < datasetsLength; i++) {
const dataset = datasets[i];
@@ -113,26 +92,23 @@ export default {
const anatomyLength = image.anatomy.length;
for (let k = 0; k < anatomyLength; k++) {
const anatomy = image.anatomy[k];
- const locationIdentifier = mapImp
- ? anatomy.curie
- : anatomy.name;
- if (!(locationIdentifier in anatomyImageObjects)) {
- anatomyImageObjects[locationIdentifier] = [];
- if (mapImp) {
- this.createThumbnailMarkers(
- mapImp,
- locationIdentifier,
- image.thumbnail
- );
- }
+ if (!(anatomy.curie in anatomyCurieImageObjects)) {
+ anatomyCurieImageObjects[anatomy.curie] = [];
+ }
+ anatomyCurieImageObjects[anatomy.curie].push(image);
+ if (!(anatomy.name in anatomyNameImageObjects)) {
+ anatomyNameImageObjects[anatomy.name] = [];
}
- anatomyImageObjects[locationIdentifier].push(image);
+ anatomyNameImageObjects[anatomy.name].push(image);
}
}
}
}
}
- return anatomyImageObjects;
+ return {
+ "anatomyCurie": anatomyCurieImageObjects,
+ "anatomyName": anatomyNameImageObjects
+ };
},
processResults: async function (results) {
@@ -159,17 +135,17 @@ export default {
const datasetImage = biolucidaInfo[bioImage.biolucida.identifier];
const link = bio2DIds.includes(bioImage.biolucida.identifier)
? getView2DImageLink(
- this.rootURL,
- datasetId,
- datasetVersion,
- bioImage.dataset.path
- )
+ this.rootURL,
+ datasetId,
+ datasetVersion,
+ bioImage.dataset.path
+ )
: getView3DImageLink(
- this.rootURL,
- datasetId,
- datasetVersion,
- datasetImage
- );
+ this.rootURL,
+ datasetId,
+ datasetVersion,
+ datasetImage
+ );
return {
title: bioImage.name,
anatomy: result.organs,
From 61ce7b0823016464ccfc11e974a8a4d11a541c1f Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Fri, 16 Aug 2024 14:16:04 +1200
Subject: [PATCH 06/47] Package version update
removeImage fixed
---
package-lock.json | 357 ++++++++++++++++++++++++++++-----
package.json | 4 +-
src/components/FlatmapVuer.vue | 4 +-
3 files changed, 309 insertions(+), 56 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9d690e43..9ec79a49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
"version": "1.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@abi-software/flatmap-viewer": "3.0.2",
- "@abi-software/map-utilities": "1.1.0",
+ "@abi-software/flatmap-viewer": "3.1.0",
+ "@abi-software/map-utilities": "1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
@@ -43,9 +43,9 @@
}
},
"node_modules/@abi-software/flatmap-viewer": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-3.0.2.tgz",
- "integrity": "sha512-rhqUlwvrqFg3pEIKKaBNSW3+95FnQcBU2C/VdXFa2NSQ3ohZ0pdQrn+ZSmh6WlkqH9OKVayKggQy2o16WX0H4A==",
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-3.1.0.tgz",
+ "integrity": "sha512-5X8KgSv95qFWg7cYFRnsiIOgfZMrE0j3ZznIjUIljKMtid/FhuuopmqMTY/YKEwaHIAW8rQvBss4edybPsPhnA==",
"dependencies": {
"@deck.gl/core": "^9.0.17",
"@deck.gl/geo-layers": "^9.0.18",
@@ -55,6 +55,8 @@
"@turf/area": "^6.5.0",
"@turf/bbox": "^6.5.0",
"@turf/helpers": "^6.5.0",
+ "@turf/length": "^7.0.0",
+ "@turf/nearest-point-on-line": "^7.0.0",
"@turf/projection": "^6.5.0",
"bezier-js": "^6.1.0",
"colord": "^2.9.3",
@@ -63,17 +65,29 @@
"graphology-operators": "^1.6.0",
"graphology-shortest-path": "^2.1.0",
"html-es6cape": "^2.0.2",
- "maplibre-gl": ">=4.3.0",
+ "maplibre-gl": ">=4.5.0",
"mathjax-full": "^3.2.2",
"minisearch": "^2.2.1",
"polylabel": "^1.1.0"
}
},
+ "node_modules/@abi-software/gallery": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@abi-software/gallery/-/gallery-1.1.1.tgz",
+ "integrity": "sha512-EOnKEQpL/6R7UZQpjiaBn5g4KPxc8RHrIfyTf4ukA+WJ2SU5T+R5GIYzi8Kuzgh797NehPpe/iFzPa21FvN+HQ==",
+ "dependencies": {
+ "axios": "^1.6.5",
+ "element-plus": "^2.4.4",
+ "unplugin-vue-components": "^0.26.0",
+ "vue": "^3.3.13"
+ }
+ },
"node_modules/@abi-software/map-utilities": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.1.0.tgz",
- "integrity": "sha512-icRE0/VTa4RollDDHSqKsK63gwUAxAepDoAYPJCljgsnW6TxVyXOt9Olacwd3k2u0jfKOaUt1QfdTlpVxY4QpQ==",
+ "version": "1.0.0-beta.1",
+ "resolved": "https://registry.npmjs.org/@abi-software/map-utilities/-/map-utilities-1.0.0-beta.1.tgz",
+ "integrity": "sha512-gOMGlaAqY8Rv6rXJ64oqOeTJHO1W0FigQZnTJKMOj9wMA0jWYsHHREyP8FKbEZZ0YGk9l2cJGL38K/sHTkcNpw==",
"dependencies": {
+ "@abi-software/gallery": "^1.1.0",
"@abi-software/svg-sprite": "^1.0.0",
"@element-plus/icons-vue": "^2.3.1",
"element-plus": "^2.7.3",
@@ -1517,6 +1531,11 @@
"gl-style-validate": "dist/gl-style-validate.mjs"
}
},
+ "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+ "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+ },
"node_modules/@maplibre/maplibre-gl-style-spec/node_modules/rw": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@@ -1702,6 +1721,45 @@
"url": "https://opencollective.com/turf"
}
},
+ "node_modules/@turf/bearing": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-7.1.0.tgz",
+ "integrity": "sha512-X5lackrZ6FW+YhgjWxwVFRgWD1j4xm4t5VvE6EE6v/1PVaHQ5OCjf6u1oaLx5LSG+gaHUhjTlAHrn9MYPFaeTA==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@turf/invariant": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/bearing/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/bearing/node_modules/@turf/invariant": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+ "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
"node_modules/@turf/boolean-clockwise": {
"version": "5.1.5",
"resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-5.1.5.tgz",
@@ -1727,6 +1785,84 @@
"url": "https://opencollective.com/turf"
}
},
+ "node_modules/@turf/destination": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-7.1.0.tgz",
+ "integrity": "sha512-97XuvB0iaAiMg86hrnZ529WwP44TQAA9mmI5PMlchACiA4LFrEtWjjDzvO6234coieoqhrw6dZYcJvd5O2PwrQ==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@turf/invariant": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/destination/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/destination/node_modules/@turf/invariant": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+ "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/distance": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-7.1.0.tgz",
+ "integrity": "sha512-hhNHhxCHB3ddzAGCNY4BtE29OZh+DAJPvUapQz+wOjISnlwvMcwLKvslgHWSYF536QDVe/93FEU2q67+CsZTPA==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@turf/invariant": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/distance/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/distance/node_modules/@turf/invariant": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+ "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
"node_modules/@turf/helpers": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -1748,6 +1884,71 @@
"resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
"integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw=="
},
+ "node_modules/@turf/length": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/length/-/length-7.1.0.tgz",
+ "integrity": "sha512-wUJj9WLKEudG1ngNao2ZwD+Dt6UkvWIbubuJ6lR6FndFDL3iezFhNGy0IXS+0xH9kXi2apiTnM9Vk5+i8BTEvQ==",
+ "dependencies": {
+ "@turf/distance": "^7.1.0",
+ "@turf/helpers": "^7.1.0",
+ "@turf/meta": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/length/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/length/node_modules/@turf/meta": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
+ "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/line-intersect": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-7.1.0.tgz",
+ "integrity": "sha512-JI3dvOsAoCqd4vUJ134FIzgcC42QpC/tBs+b4OJoxWmwDek3REv4qGaZY6wCg9X4hFSlCKFcnhMIQQZ/n720Qg==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "sweepline-intersections": "^1.5.0",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/line-intersect/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
"node_modules/@turf/meta": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
@@ -1759,6 +1960,62 @@
"url": "https://opencollective.com/turf"
}
},
+ "node_modules/@turf/nearest-point-on-line": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/nearest-point-on-line/-/nearest-point-on-line-7.1.0.tgz",
+ "integrity": "sha512-aTjAOm7ab0tl5JoxGYRx/J/IbRL1DY1ZCIYQDMEQjK5gOllhclgeBC0wDXDkEZFGaVftjw0W2RtE2I0jX7RG4A==",
+ "dependencies": {
+ "@turf/bearing": "^7.1.0",
+ "@turf/destination": "^7.1.0",
+ "@turf/distance": "^7.1.0",
+ "@turf/helpers": "^7.1.0",
+ "@turf/invariant": "^7.1.0",
+ "@turf/line-intersect": "^7.1.0",
+ "@turf/meta": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/nearest-point-on-line/node_modules/@turf/helpers": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.1.0.tgz",
+ "integrity": "sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==",
+ "dependencies": {
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/nearest-point-on-line/node_modules/@turf/invariant": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-7.1.0.tgz",
+ "integrity": "sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10",
+ "tslib": "^2.6.2"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
+ "node_modules/@turf/nearest-point-on-line/node_modules/@turf/meta": {
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.1.0.tgz",
+ "integrity": "sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==",
+ "dependencies": {
+ "@turf/helpers": "^7.1.0",
+ "@types/geojson": "^7946.0.10"
+ },
+ "funding": {
+ "url": "https://opencollective.com/turf"
+ }
+ },
"node_modules/@turf/projection": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/@turf/projection/-/projection-6.5.0.tgz",
@@ -1962,11 +2219,6 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
- "node_modules/@types/junit-report-builder": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz",
- "integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA=="
- },
"node_modules/@types/linkify-it": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
@@ -3267,8 +3519,7 @@
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
- "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
- "dev": true
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
@@ -3331,9 +3582,6 @@
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
- "dev": true,
- "optional": true,
- "peer": true,
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
@@ -3344,9 +3592,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
- "dev": true,
- "optional": true,
- "peer": true,
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
@@ -3359,10 +3604,7 @@
"node_modules/axios/node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
- "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
- "dev": true,
- "optional": true,
- "peer": true
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/babel-eslint": {
"version": "10.1.0",
@@ -3985,7 +4227,6 @@
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
- "dev": true,
"dependencies": {
"delayed-stream": "~1.0.0"
},
@@ -4753,7 +4994,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
- "dev": true,
"engines": {
"node": ">=0.4.0"
}
@@ -6433,7 +6673,6 @@
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
- "dev": true,
"funding": [
{
"type": "individual",
@@ -6593,9 +6832,9 @@
"integrity": "sha512-k/6BCd0qAt7vdqdM1LkLfAy72EsLDy0laNwX0x2h49vfYCiQkRc4PSra8DNEdJ10EKRpwEvDXMb0dBknTJuWpQ=="
},
"node_modules/geojson-vt": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
- "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
+ "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="
},
"node_modules/get-caller-file": {
"version": "2.0.5",
@@ -8816,9 +9055,9 @@
}
},
"node_modules/maplibre-gl": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.3.2.tgz",
- "integrity": "sha512-/oXDsb9I+LkjweL/28aFMLDZoIcXKNEhYNAZDLA4xgTNkfvKQmV/r0KZdxEMcVthincJzdyc6Y4N8YwZtHKNnQ==",
+ "version": "4.5.2",
+ "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.5.2.tgz",
+ "integrity": "sha512-vlWL9EY2bSGg5FAt0mKPfYqlfX15uLW5D3kKv4Xjn54nIVn01MKdfUJMAVIr+8fXVqfSX6c095Iy5XnV+T76kQ==",
"dependencies": {
"@mapbox/geojson-rewind": "^0.5.2",
"@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -8827,25 +9066,24 @@
"@mapbox/unitbezier": "^0.0.1",
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
- "@maplibre/maplibre-gl-style-spec": "^20.2.0",
+ "@maplibre/maplibre-gl-style-spec": "^20.3.0",
"@types/geojson": "^7946.0.14",
"@types/geojson-vt": "3.2.5",
- "@types/junit-report-builder": "^3.0.2",
"@types/mapbox__point-geometry": "^0.1.4",
"@types/mapbox__vector-tile": "^1.3.4",
"@types/pbf": "^3.0.5",
"@types/supercluster": "^7.1.3",
- "earcut": "^2.2.4",
- "geojson-vt": "^3.2.1",
+ "earcut": "^3.0.0",
+ "geojson-vt": "^4.0.2",
"gl-matrix": "^3.4.3",
"global-prefix": "^3.0.0",
"kdbush": "^4.0.2",
"murmurhash-js": "^1.0.0",
- "pbf": "^3.2.1",
+ "pbf": "^3.3.0",
"potpack": "^2.0.0",
- "quickselect": "^2.0.0",
+ "quickselect": "^3.0.0",
"supercluster": "^8.0.1",
- "tinyqueue": "^2.0.3",
+ "tinyqueue": "^3.0.0",
"vt-pbf": "^3.1.3"
},
"engines": {
@@ -8856,6 +9094,16 @@
"url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
}
},
+ "node_modules/maplibre-gl/node_modules/earcut": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.0.tgz",
+ "integrity": "sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg=="
+ },
+ "node_modules/maplibre-gl/node_modules/tinyqueue": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-3.0.0.tgz",
+ "integrity": "sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g=="
+ },
"node_modules/mark.js": {
"version": "8.11.1",
"resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
@@ -8971,7 +9219,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
- "dev": true,
"engines": {
"node": ">= 0.6"
}
@@ -8980,7 +9227,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
- "dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
@@ -10127,9 +10373,9 @@
"dev": true
},
"node_modules/pbf": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
- "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+ "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
"dependencies": {
"ieee754": "^1.1.12",
"resolve-protobuf-schema": "^2.1.0"
@@ -10521,9 +10767,9 @@
]
},
"node_modules/quickselect": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
- "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+ "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
},
"node_modules/randombytes": {
"version": "2.1.0",
@@ -11957,6 +12203,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/sweepline-intersections": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/sweepline-intersections/-/sweepline-intersections-1.5.0.tgz",
+ "integrity": "sha512-AoVmx72QHpKtItPu72TzFL+kcYjd67BPLDoR0LarIk+xyaRg+pDTMFXndIEvZf9xEKnJv6JdhgRMnocoG0D3AQ==",
+ "dependencies": {
+ "tinyqueue": "^2.0.0"
+ }
+ },
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -12213,8 +12467,7 @@
"node_modules/tslib": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
- "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
- "dev": true
+ "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
},
"node_modules/tunnel-agent": {
"version": "0.6.0",
diff --git a/package.json b/package.json
index 5690b537..c964ce9a 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
"./src/*": "./src/*"
},
"dependencies": {
- "@abi-software/flatmap-viewer": "3.0.2",
- "@abi-software/map-utilities": "1.1.0",
+ "@abi-software/flatmap-viewer": "3.1.0",
+ "@abi-software/map-utilities": "1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 988f308c..dee39440 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -433,7 +433,6 @@ Please use `const` to assign meaningful names to them...
virtual-triggering
>
- Viewing Mode
Date: Wed, 21 Aug 2024 14:43:23 +1200
Subject: [PATCH 10/47] Support scaffold in display image mode.
---
src/components/FlatmapVuer.vue | 8 +++-
src/mixins/flatmapImageMixin.js | 3 +-
src/services/scicrunchMixin.js | 72 +++++++++++++++++++++++++++++----
3 files changed, 73 insertions(+), 10 deletions(-)
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 5705b1cc..6c155a13 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -2491,7 +2491,11 @@ export default {
if (this.mapImp) {
this.mapImp.clearMarkers()
const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
- if (type === "Segmentations") {
+ if (type === "Scaffolds") {
+ let images = await this.getScaffoldThumbnails("id", anatomicalIdentifiers)
+ this.images = images
+ this.populateFlatmapWithImages(this.mapImp, images, type)
+ } else if (type === "Segmentations") {
let images = await this.getSegmentationsThumbnails("id", anatomicalIdentifiers)
this.images = images
this.populateFlatmapWithImages(this.mapImp, images, type)
@@ -2788,7 +2792,7 @@ export default {
drawnType: 'All tools',
drawnTypes: ['All tools', 'Point', 'LineString', 'Polygon', 'None'],
imageType: 'None',
- imageTypes: ['Segmentations', 'Images', 'None'],
+ imageTypes: ['Images', 'Scaffolds', 'Segmentations', 'None'],
annotatedType: 'Anyone',
annotatedTypes: ['Anyone', 'Me', 'Others'],
openMapRef: undefined,
diff --git a/src/mixins/flatmapImageMixin.js b/src/mixins/flatmapImageMixin.js
index 6d15df92..e2c28288 100644
--- a/src/mixins/flatmapImageMixin.js
+++ b/src/mixins/flatmapImageMixin.js
@@ -63,7 +63,8 @@ export default {
getThumbnail: async function(url, type) {
return new Promise((resolve, reject) => {
if (type === "Segmentations" ||
- type === "Images") {
+ type === "Images" ||
+ type === "Scaffolds") {
this.getBinaryThumbnail(url)
.then((response) => resolve(response))
.catch((response) => reject(response))
diff --git a/src/services/scicrunchMixin.js b/src/services/scicrunchMixin.js
index 954d7355..fa38cc89 100644
--- a/src/services/scicrunchMixin.js
+++ b/src/services/scicrunchMixin.js
@@ -25,8 +25,7 @@ const getBiolucidaInfo = async (sparcAPI, datasetId) => {
const getFilesInfo = async (api, key, idsList, types) => {
let params = new URLSearchParams();
types.forEach((type) => {
- params.append('arrayparams', type);
- params.append('arrayparams', type);
+ params.append('filetypes', type);
});
let response = await fetch(`${api}/get-organ-curies/?${params}`);
let data = await response.json();
@@ -60,12 +59,9 @@ const getFilesInfo = async (api, key, idsList, types) => {
export default {
// Note that the setting store is included in MapContent.vue
methods: {
- getThumbnailURL: function(thumbnailId) {
+ getBiolucidaThumbnailURL: function(thumbnailId) {
return `${this.sparcAPI}/thumbnail/${thumbnailId}`
},
- getSegmentationThumbnailURL: function(datasetId, datasetVersion, filePath) {
- return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
- },
getBiolucidaThumbnails: async function (key, idsList) {
try {
const data = await getFilesInfo(this.sparcAPI, key, idsList, ["biolucida-2d", "biolucida-3d"]);
@@ -77,7 +73,8 @@ export default {
value.forEach((entry) => {
if (entry.biolucida_id) {
let image = {
- thumbnail: this.getThumbnailURL(entry.biolucida_id),
+ thumbnail: this.getBiolucidaThumbnailURL(entry.biolucida_id),
+ resource: entry.file_path,
datasetId: entry.id,
}
list.push(image);
@@ -93,6 +90,63 @@ export default {
}
return {};
},
+ 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
+ },
+ getScaffoldThumbnailURL: function(entry, list) {
+ const viewEntry = this.findEntryWithPathInArray(
+ entry, list, "abi-scaffold-view-file");
+ const thumbnailEntry = this.findEntryWithPathInArray(
+ viewEntry, list, "abi-thumbnail");
+ if (thumbnailEntry) {
+ return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${thumbnailEntry.file_path}?${new URLSearchParams({encodeBase64: true})}`;
+ }
+ return undefined;
+ },
+ getScaffoldThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList,
+ ["abi-thumbnail", "abi-scaffold-metadata-file", 'abi-scaffold-view-file']);
+ if (data['files_info']) {
+ const images = {};
+ for (const [key, value] of Object.entries(data['files_info'])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.type === "abi-scaffold-metadata-file") {
+ const thumbnailURL = this.getScaffoldThumbnailURL(entry, value);
+ if (thumbnailURL) {
+ let image = {
+ thumbnail: thumbnailURL,
+ resource: entry.file_path,
+ datasetId: entry.id,
+ }
+ list.push(image);
+ }
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error('Error:', error);
+ }
+ return {};
+ },
+
//Get representative segmentations thumbnails
// key - can either be
// id - use the uberon id as key or
@@ -111,6 +165,7 @@ export default {
let image = {
thumbnail: this.getSegmentationThumbnailURL(entry.id,
entry.version, entry.file_path),
+ resource: entry.file_path,
datasetId: entry.id,
}
list.push(image);
@@ -125,6 +180,9 @@ export default {
}
return {};
},
+ getSegmentationThumbnailURL: function(datasetId, datasetVersion, filePath) {
+ return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
+ },
getImagesFromScicrunch: async function () {
try {
const response = await fetch(`${this.sparcAPI}/multiple_dataset_info/using_multiple_mimetype/?${new URLSearchParams({q: imageQuery})}`);
From c0dbe1bbeb904a41ca56b64929fd5ade64814f76 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:46:24 +1200
Subject: [PATCH 11/47] Modify code and add scaffold support
---
src/App.vue | 5 +-
src/components/FlatmapVuer.vue | 47 ++----
src/components/MultiFlatmapVuer.vue | 10 +-
src/mixins/imageMixin.js | 119 +---------------
src/mixins/scicrunchMixin.js | 213 ++++++++++++++++++++++++++++
5 files changed, 228 insertions(+), 166 deletions(-)
create mode 100644 src/mixins/scicrunchMixin.js
diff --git a/src/App.vue b/src/App.vue
index 26b8e3d6..6a6658d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -77,7 +77,6 @@
:displayMinimap="true"
:enableOpenMapUI="true"
:flatmapAPI="flatmapAPI"
- :rootURL="rootURL"
:sparcAPI="sparcAPI"
:disableUI="disableUI"
@open-pubmed-url="onOpenPubmedUrl"
@@ -286,13 +285,11 @@ export default {
useHelpModeDialog: true,
multiflatmapRef: null,
mapSettings: [],
- rootURL: "http://localhost:3000/",
sparcAPI: import.meta.env.VITE_SPARC_API,
- flatmapAPI: import.meta.env.FLATMAP_API,
//flatmapAPI: "https://mapcore-demo.org/current/flatmap/v2/"
//flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v3/"
//flatmapAPI: "https://mapcoe-demo.org/current/flatmap/v3/",
- // flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
+ flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
//flatmapAPI: "https://mapcore-demo.org/fccb/flatmap/"
//flatmapAPI: "https://mapcore-demo.org/staging/flatmap/v1/"
// flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v1/",
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index 93e8e6d0..e4acfbac 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -501,7 +501,7 @@ Please use `const` to assign meaningful names to them...
View Image
+ Images Display
{
@@ -774,7 +775,7 @@ const createUnfilledTooltipData = function () {
*/
export default {
name: 'FlatmapVuer',
- mixins:[imageMixin],
+ mixins:[scicrunchMixin,imageMixin],
components: {
Button,
Col,
@@ -1121,26 +1122,6 @@ export default {
this.addAnnotationFeature()
}
},
- removeImageFromMap: function () {
- if (this.mapImp) {
- this.mapImp.clearMarkers();
- this.imageIds.forEach((id) => this.mapImp.removeImage(id))
- this.imageIds = []
- }
- },
- populateImageToMap: function () {
- if (this.mapImp) {
- for (const [key, value] of Object.entries(this.anatomyImages[this.imageType])) {
- if (value.length) {
- const id = this.mapImp.addImage(key, value[0].thumbnail)
- if (id) {
- this.imageIds.push(id)
- this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
- }
- }
- }
- }
- },
/**
* @vuese
* Function to switch the type of displayed image.
@@ -1151,15 +1132,19 @@ export default {
if (this.mapImp) {
this.loading = true
const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
- this.removeImageFromMap()
+ this.mapImp.clearMarkers();
if (type === 'Image' && !(type in this.anatomyImages)) {
this.anatomyImages[type] = await this.getBiolucidaThumbnails("id", anatomicalIdentifiers)
} else if (type === 'Segmentation' && !(type in this.anatomyImages)) {
this.anatomyImages[type] = await this.getSegmentationThumbnails("id", anatomicalIdentifiers)
+ } else if (type === 'Scaffold' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await this.getScaffoldThumbnails("id", anatomicalIdentifiers)
} else {
console.log('switch to', type);
}
- this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
+ if (this.anatomyImages[type]) {
+ this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
+ }
// this.populateImageToMap()
this.loading = false
}
@@ -1175,7 +1160,7 @@ export default {
if (flag) {
this.setImageType(this.imageType)
} else {
- this.removeImageFromMap()
+ this.mapImp.clearMarkers();
}
}
},
@@ -2710,19 +2695,12 @@ export default {
type: String,
default: 'https://mapcore-demo.org/current/flatmap/v3/',
},
- /**
- * Specify the root url of the SPARC portal.
- */
- rootURL: {
- type: String,
- default: 'https://sparc.science/',
- },
/**
* Specify the endpoint of the SPARC API.
*/
sparcAPI: {
type: String,
- default: 'https://api.sparc.science/',
+ default: 'https://api.sparc.science',
},
/**
* Flag to disable UIs on Map
@@ -2742,7 +2720,6 @@ export default {
provide() {
return {
flatmapAPI: this.flatmapAPI,
- sparcAPI: this.sparcAPI,
$annotator: this.annotator,
getFeaturesAlert: () => this.featuresAlert,
userApiKey: this.userToken,
@@ -2867,7 +2844,7 @@ export default {
without: true,
}
}),
- anatomyImages: {},
+ anatomyImages: markRaw({}),
imageRadio: false,
imageIds: [],
imageType: 'Image',
diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 1ea3adf8..d6591266 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -80,7 +80,6 @@
:showStarInLegend="showStarInLegend"
style="height: 100%"
:flatmapAPI="flatmapAPI"
- :rootURL="rootURL"
:sparcAPI="sparcAPI"
/>
@@ -696,19 +695,12 @@ export default {
type: String,
default: 'https://mapcore-demo.org/current/flatmap/v3/',
},
- /**
- * Specify the root url of the SPARC portal.
- */
- rootURL: {
- type: String,
- default: 'https://sparc.science/',
- },
/**
* Specify the endpoint of the SPARC API.
*/
sparcAPI: {
type: String,
- default: 'https://api.sparc.science/',
+ default: 'https://api.sparc.science',
},
/**
* Flag to disable UIs on Map
diff --git a/src/mixins/imageMixin.js b/src/mixins/imageMixin.js
index ca8b4365..93d123be 100644
--- a/src/mixins/imageMixin.js
+++ b/src/mixins/imageMixin.js
@@ -1,122 +1,5 @@
-const getFilesInfo = async (api, key, idsList, types) => {
- let params = new URLSearchParams();
- types.forEach((type) => {
- params.append("arrayparams", type);
- params.append("arrayparams", type);
- });
- let response = await fetch(`${api}get-organ-curies/?${params}`);
- let data = await response.json();
- const identifiers = [];
- data.uberon.array.forEach((pair) => {
- const identifier = {
- id: pair.id.toUpperCase(),
- name: pair.name,
- };
- if (idsList.includes(identifier[key])) {
- identifiers.push(identifier);
- }
- });
- const keys = identifiers.map((item) => item[key]);
- response = await fetch(`${api}get-files-info-for-curies`, {
- method: "POST",
- body: JSON.stringify({
- filetypes: types,
- curies: keys,
- }),
- headers: {
- "Content-Type": "application/json",
- },
- });
- data = await response.json();
- return data;
-};
-
export default {
methods: {
- getBiolucidaThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "biolucida-2d",
- "biolucida-3d",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- if (entry.biolucida_id) {
- let image = {
- thumbnail: this.getBiolucidaThumbnailURL(
- entry.biolucida_id
- ),
- id: entry.id,
- title: entry.file_path.substring(
- entry.file_path.lastIndexOf("/") + 1
- ),
- type: "Image",
- link: `https://sparc.biolucida.net/api/v1/thumbnail/${entry.biolucida_id}`,
- mimetype: 'image/png'
- };
- list.push(image);
- }
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getBiolucidaThumbnailURL: function (biolucidaId) {
- return `${this.sparcAPI}thumbnail/${biolucidaId}`;
- },
- getSegmentationThumbnails: async function (key, idsList) {
- try {
- const data = await getFilesInfo(this.sparcAPI, key, idsList, [
- "mbf-segmentation",
- ]);
- if (data["files_info"]) {
- const images = {};
- for (const [key, value] of Object.entries(data["files_info"])) {
- if (value.length > 0) {
- const list = [];
- value.forEach((entry) => {
- let image = {
- thumbnail: this.getSegmentationThumbnailURL(
- entry.id,
- entry.version,
- entry.file_path
- ),
- id: entry.id,
- title: entry.file_path.substring(
- entry.file_path.lastIndexOf("/") + 1
- ),
- type: "Segmentation",
- link: this.getBiolucidaThumbnailURL(entry.biolucida_id),
- };
- list.push(image);
- });
- images[key] = list;
- }
- }
- return images;
- }
- } catch (error) {
- console.error("Error:", error);
- }
- return {};
- },
- getSegmentationThumbnailURL: function (
- datasetId,
- datasetVersion,
- filePath
- ) {
- return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
- },
populateMapWithImages: function (mapImp, images, type) {
for (const [key, list] of Object.entries(images)) {
this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type);
@@ -151,7 +34,7 @@ export default {
},
getThumbnail: async function (url, type) {
return new Promise((resolve, reject) => {
- if (type === "Segmentation" || type === "Image") {
+ if (type === "Image" || type === "Segmentation" || type === "Scaffold") {
this.getBinaryThumbnail(url)
.then((response) => resolve(response))
.catch((response) => reject(response));
diff --git a/src/mixins/scicrunchMixin.js b/src/mixins/scicrunchMixin.js
new file mode 100644
index 00000000..cd740de5
--- /dev/null
+++ b/src/mixins/scicrunchMixin.js
@@ -0,0 +1,213 @@
+const getFilesInfo = async (api, key, idsList, types) => {
+ let params = new URLSearchParams();
+ types.forEach((type) => {
+ params.append("filetypes", type);
+ });
+ let response = await fetch(`${api}/get-organ-curies/?${params}`);
+ let data = await response.json();
+ const identifiers = [];
+ data.uberon.array.forEach((pair) => {
+ const identifier = {
+ id: pair.id.toUpperCase(),
+ name: pair.name,
+ };
+ if (idsList.includes(identifier[key])) {
+ identifiers.push(identifier);
+ }
+ });
+ const keys = identifiers.map((item) => item[key]);
+ response = await fetch(`${api}/get-files-info-for-curies`, {
+ method: "POST",
+ body: JSON.stringify({
+ filetypes: types,
+ curies: keys,
+ species: ["Rat"],
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ data = await response.json();
+ return data;
+};
+
+const getFileName = (filePath) => {
+ return filePath.substring(filePath.lastIndexOf("/") + 1);
+};
+
+export default {
+ methods: {
+ getBiolucidaThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "biolucida-2d",
+ "biolucida-3d",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.biolucida_id) {
+ let image = {
+ thumbnail: this.getBiolucidaThumbnailURL(
+ entry.biolucida_id
+ ),
+ id: entry.id,
+ title: getFileName(entry.file_path),
+ type: "Image",
+ link: this.getBiolucidaThumbnailLink(entry.biolucida_id),
+ mimetype: entry.mimetype,
+ };
+ list.push(image);
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ return {};
+ },
+ getBiolucidaThumbnailURL: function (biolucidaId) {
+ return `${this.sparcAPI}/thumbnail/${biolucidaId}`;
+ },
+ getBiolucidaThumbnailLink: function (biolucidaId) {
+ return `${this.sparcAPI}/thumbnail/${biolucidaId}`;
+ },
+ getSegmentationThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "mbf-segmentation",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ let image = {
+ thumbnail: this.getSegmentationThumbnailURL(
+ entry.id,
+ entry.version,
+ entry.file_path
+ ),
+ id: entry.id,
+ title: getFileName(entry.file_path),
+ type: "Segmentation",
+ link: this.getSegmentationThumbnailLink(
+ entry.id,
+ entry.version,
+ entry.file_path
+ ),
+ mimetype: entry.mimetype,
+ };
+ list.push(image);
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ return {};
+ },
+ getSegmentationThumbnailURL: function (
+ datasetId,
+ datasetVersion,
+ filePath
+ ) {
+ return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
+ },
+ getSegmentationThumbnailLink: function (
+ datasetId,
+ datasetVersion,
+ filePath
+ ) {
+ return `https://sparc.biolucida.net:8081/thumbnail?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
+ },
+ getScaffoldThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "abi-thumbnail",
+ "abi-scaffold-metadata-file",
+ "abi-scaffold-view-file",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.type === "abi-scaffold-metadata-file") {
+ const thumbnailURL = this.getScaffoldThumbnailURL(
+ entry,
+ value
+ );
+ if (thumbnailURL) {
+ let image = {
+ thumbnail: thumbnailURL,
+ resource: entry.file_path,
+ id: entry.id,
+ title: getFileName(entry.file_path),
+ type: "Scaffold",
+ link: thumbnailURL,
+ mimetype: entry.mimetype,
+ };
+ list.push(image);
+ }
+ }
+ });
+ images[key] = list;
+ }
+ }
+ return images;
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ return {};
+ },
+ getScaffoldThumbnailURL: function (entry, list) {
+ const viewEntry = this.findEntryWithPathInArray(
+ entry,
+ list,
+ "abi-scaffold-view-file"
+ );
+ const thumbnailEntry = this.findEntryWithPathInArray(
+ viewEntry,
+ list,
+ "abi-thumbnail"
+ );
+ if (thumbnailEntry) {
+ return `${this.sparcAPI}/s3-resource/${thumbnailEntry.id}/files/${
+ thumbnailEntry.file_path
+ }?${new URLSearchParams({ encodeBase64: true })}`;
+ }
+ return undefined;
+ },
+ 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;
+ },
+ },
+};
From 00455dccb5ad92db048c8707ad2db8f402084042 Mon Sep 17 00:00:00 2001
From: alan-wu
@@ -1107,13 +1106,14 @@ export default {
if (this.mapImp) {
if (flag) {
for (const [key, value] of Object.entries(this.anatomyImages)) {
- this.mapImp.addMarker(key, { className: "slandered-marker", cluster: false })
+ this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
const id = this.mapImp.addImage(key, value[0].thumbnail)
if (id) this.imageIds.push(id)
}
} else {
this.mapImp.clearMarkers();
this.imageIds.forEach((id) => this.mapImp.removeImage(id))
+ this.imageIds = []
}
}
},
From 3021eaa2b578591736142177512d585a96a717ca Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:28:44 +1200
Subject: [PATCH 07/47] Update flatmap-viewer version
---
package-lock.json | 8 ++++----
package.json | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9ec79a49..6b9207b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.4.0",
"license": "Apache-2.0",
"dependencies": {
- "@abi-software/flatmap-viewer": "3.1.0",
+ "@abi-software/flatmap-viewer": "3.1.2",
"@abi-software/map-utilities": "1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
@@ -43,9 +43,9 @@
}
},
"node_modules/@abi-software/flatmap-viewer": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-3.1.0.tgz",
- "integrity": "sha512-5X8KgSv95qFWg7cYFRnsiIOgfZMrE0j3ZznIjUIljKMtid/FhuuopmqMTY/YKEwaHIAW8rQvBss4edybPsPhnA==",
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/@abi-software/flatmap-viewer/-/flatmap-viewer-3.1.2.tgz",
+ "integrity": "sha512-fwpBE+LsJtxqkwnfJXCD0BrP1wdfw6632cKOaXRUnfQ5LnzXuvbbJL5NAo6K7PmmWsvnJYTqy/ssBEgmltCmNw==",
"dependencies": {
"@deck.gl/core": "^9.0.17",
"@deck.gl/geo-layers": "^9.0.18",
diff --git a/package.json b/package.json
index c964ce9a..214b0b16 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
"./src/*": "./src/*"
},
"dependencies": {
- "@abi-software/flatmap-viewer": "3.1.0",
+ "@abi-software/flatmap-viewer": "3.1.2",
"@abi-software/map-utilities": "1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
From 08e94b7f7a8b211b20627f37dfbf55a487344dbc Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:17:51 +1200
Subject: [PATCH 08/47] Add select box for selecting different image type
---
package-lock.json | 2 +-
package.json | 2 +-
src/components/FlatmapVuer.vue | 85 +++++++++++++++++++++++++++-------
3 files changed, 70 insertions(+), 19 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6b9207b7..9d52dd9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"license": "Apache-2.0",
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.2",
- "@abi-software/map-utilities": "1.0.0-beta.1",
+ "@abi-software/map-utilities": "^1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
diff --git a/package.json b/package.json
index 214b0b16..97cac0de 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
},
"dependencies": {
"@abi-software/flatmap-viewer": "3.1.2",
- "@abi-software/map-utilities": "1.0.0-beta.1",
+ "@abi-software/map-utilities": "^1.0.0-beta.1",
"@abi-software/sparc-annotation": "0.3.1",
"@abi-software/svg-sprite": "1.0.0",
"@element-plus/icons-vue": "^2.3.1",
diff --git a/src/components/FlatmapVuer.vue b/src/components/FlatmapVuer.vue
index dee39440..2c8456c6 100644
--- a/src/components/FlatmapVuer.vue
+++ b/src/components/FlatmapVuer.vue
@@ -503,14 +503,37 @@ Please use `const` to assign meaningful names to them...
View Image
-
- Hide
- Show
-
+
+
+ Hide
+ Show
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
Flight path display
@@ -1096,24 +1119,50 @@ export default {
this.addAnnotationFeature()
}
},
+ removeImageFromMap: function () {
+ if (this.mapImp) {
+ this.mapImp.clearMarkers();
+ this.imageIds.forEach((id) => this.mapImp.removeImage(id))
+ this.imageIds = []
+ }
+ },
+ populateImageToMap: function () {
+ if (this.mapImp) {
+ for (const [key, value] of Object.entries(this.anatomyImages)) {
+ this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
+ const id = this.mapImp.addImage(key, value[0].thumbnail)
+ if (id) this.imageIds.push(id)
+ }
+ }
+ },
/**
* @vuese
- * Function to switch the type of person who annotated.
+ * Function to switch the type of displayed image.
+ * @arg flag
+ */
+ setImageType: function (flag) {
+ this.imageType = flag
+ if (this.mapImp) {
+ if (flag === 'Biolucida') {
+ this.populateImageToMap()
+ } else {
+ console.log('switch to', flag);
+ this.removeImageFromMap()
+ }
+ }
+ },
+ /**
+ * @vuese
+ * Function to switch show or hide images.
* @arg flag
*/
setImage: function (flag) {
this.imageRadio = flag
if (this.mapImp) {
if (flag) {
- for (const [key, value] of Object.entries(this.anatomyImages)) {
- this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
- const id = this.mapImp.addImage(key, value[0].thumbnail)
- if (id) this.imageIds.push(id)
- }
+ this.setImageType(this.imageType)
} else {
- this.mapImp.clearMarkers();
- this.imageIds.forEach((id) => this.mapImp.removeImage(id))
- this.imageIds = []
+ this.removeImageFromMap()
}
}
},
@@ -2811,6 +2860,8 @@ export default {
}),
imageRadio: false,
imageIds: [],
+ imageType: 'Biolucida',
+ imageTypes: ['Biolucida', 'Plot', 'Scaffold', 'Segmentation'],
}
},
computed: {
From 3ee9039fa72fd6b037389ee7fa5e547b984c90d7 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:36:21 +1200
Subject: [PATCH 09/47] Modify image selector based on new image api
---
src/App.vue | 14 +-
src/components/FlatmapVuer.vue | 48 ++--
src/components/MultiFlatmapVuer.vue | 8 -
src/mixins/imageMixin.js | 369 +++++++++++++++-------------
4 files changed, 233 insertions(+), 206 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 49e33907..26b8e3d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -83,7 +83,6 @@
@open-pubmed-url="onOpenPubmedUrl"
@pathway-selection-changed="onPathwaySelectionChanged"
@flatmapChanged="onFlatmapChanged"
- :anatomyImages="anatomyImages"
/>
{
let featureGeometry = { lng: 0, lat: 0, }
@@ -773,6 +774,7 @@ const createUnfilledTooltipData = function () {
*/
export default {
name: 'FlatmapVuer',
+ mixins:[imageMixin],
components: {
Button,
Col,
@@ -1128,27 +1130,38 @@ export default {
},
populateImageToMap: function () {
if (this.mapImp) {
- for (const [key, value] of Object.entries(this.anatomyImages)) {
- this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
- const id = this.mapImp.addImage(key, value[0].thumbnail)
- if (id) this.imageIds.push(id)
+ for (const [key, value] of Object.entries(this.anatomyImages[this.imageType])) {
+ if (value.length) {
+ const id = this.mapImp.addImage(key, value[0].thumbnail)
+ if (id) {
+ this.imageIds.push(id)
+ this.mapImp.addMarker(key, { className: "standard-marker", cluster: false })
+ }
+ }
}
}
},
/**
* @vuese
* Function to switch the type of displayed image.
- * @arg flag
+ * @arg type
*/
- setImageType: function (flag) {
- this.imageType = flag
+ setImageType: async function (type) {
+ this.imageType = type
if (this.mapImp) {
- if (flag === 'Biolucida') {
- this.populateImageToMap()
+ this.loading = true
+ const anatomicalIdentifiers = this.mapImp.anatomicalIdentifiers
+ this.removeImageFromMap()
+ if (type === 'Image' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await this.getBiolucidaThumbnails("id", anatomicalIdentifiers)
+ } else if (type === 'Segmentation' && !(type in this.anatomyImages)) {
+ this.anatomyImages[type] = await this.getSegmentationThumbnails("id", anatomicalIdentifiers)
} else {
- console.log('switch to', flag);
- this.removeImageFromMap()
+ console.log('switch to', type);
}
+ this.populateMapWithImages(this.mapImp, this.anatomyImages[type], type)
+ // this.populateImageToMap()
+ this.loading = false
}
},
/**
@@ -1790,8 +1803,8 @@ export default {
if (data.feature.type === 'marker') {
this.tooltipType = 'image'
- if (data.resource[0] in this.anatomyImages) {
- this.imageEntry = this.anatomyImages[data.resource[0]]
+ if (data.resource[0] in this.anatomyImages[this.imageType]) {
+ this.imageEntry = this.anatomyImages[this.imageType][data.resource[0]]
}
// this.displayTooltip(data.feature.models)
@@ -2725,10 +2738,6 @@ export default {
type: Boolean,
default: false,
},
- anatomyImages: {
- type: Object,
- default: {},
- },
},
provide() {
return {
@@ -2858,10 +2867,11 @@ export default {
without: true,
}
}),
+ anatomyImages: {},
imageRadio: false,
imageIds: [],
- imageType: 'Biolucida',
- imageTypes: ['Biolucida', 'Plot', 'Scaffold', 'Segmentation'],
+ imageType: 'Image',
+ imageTypes: ['Image', 'Plot', 'Scaffold', 'Segmentation'],
}
},
computed: {
diff --git a/src/components/MultiFlatmapVuer.vue b/src/components/MultiFlatmapVuer.vue
index 53502ba1..1ea3adf8 100644
--- a/src/components/MultiFlatmapVuer.vue
+++ b/src/components/MultiFlatmapVuer.vue
@@ -82,7 +82,6 @@
:flatmapAPI="flatmapAPI"
:rootURL="rootURL"
:sparcAPI="sparcAPI"
- :anatomyImages="anatomyImages"
/>
@@ -725,13 +724,6 @@ export default {
type: Boolean,
default: false,
},
- /**
- * The option to show connectivity information in sidebar
- */
- anatomyImages: {
- type: Object,
- default: {},
- },
},
data: function () {
return {
diff --git a/src/mixins/imageMixin.js b/src/mixins/imageMixin.js
index fc4b520f..ca8b4365 100644
--- a/src/mixins/imageMixin.js
+++ b/src/mixins/imageMixin.js
@@ -1,189 +1,222 @@
-const imageQuery = '"*jp2* OR *vnd.ome.xml* OR *jpx*"';
-
-const getView2DImageLink = (rootURL, datasetId, datasetVersion, filePath) => {
- return `${rootURL}datasets/file/${datasetId}/${datasetVersion}?path=files/${filePath}`;
-};
-
-const getView3DImageLink = (
- rootURL,
- datasetId,
- datasetVersion,
- dataset_image
-) => {
- const viewEncoding = dataset_image.share_link.replace(
- "https://sparc.biolucida.net/image?c=",
- ""
- );
- return (
- rootURL +
- "datasets/biolucidaviewer/" +
- dataset_image.image_id +
- "?view=" +
- viewEncoding +
- "&dataset_version=" +
- datasetVersion +
- "&dataset_id=" +
- datasetId +
- "&item_id=" +
- dataset_image.sourcepkg_id
- );
-};
-
-const getBiolucidaInfo = async function (sparcAPI, datasetId) {
- return new Promise((resolve, reject) => {
- const endpoint = `${sparcAPI}image_search/${datasetId}`;
- fetch(endpoint)
- .then((response) => response.json())
- .then((data) => {
- if (data.status == "success") {
- let imageObjects = {};
- data.dataset_images.forEach((image) => {
- if (!(image.image_id in imageObjects)) {
- imageObjects[image.image_id] = image;
- }
- });
- resolve(imageObjects);
- } else {
- reject(data.reason);
- }
- });
+const getFilesInfo = async (api, key, idsList, types) => {
+ let params = new URLSearchParams();
+ types.forEach((type) => {
+ params.append("arrayparams", type);
+ params.append("arrayparams", type);
});
-};
-
-const getAnnotatedBiolucida = function (data) {
- let bioList = [];
- let bio2DIds = [];
- if ("biolucida-2d" in data) {
- const bio2DLength = data["biolucida-2d"].length;
- for (let i = 0; i < bio2DLength; i++) {
- const biolucida = data["biolucida-2d"][i];
- if (biolucida.biolucida) {
- bioList.push(biolucida);
- bio2DIds.push(biolucida.biolucida.identifier);
- }
+ let response = await fetch(`${api}get-organ-curies/?${params}`);
+ let data = await response.json();
+ const identifiers = [];
+ data.uberon.array.forEach((pair) => {
+ const identifier = {
+ id: pair.id.toUpperCase(),
+ name: pair.name,
+ };
+ if (idsList.includes(identifier[key])) {
+ identifiers.push(identifier);
}
- }
- if ("biolucida-3d" in data) {
- const bio3DLength = data["biolucida-3d"].length;
- for (let i = 0; i < bio3DLength; i++) {
- const biolucida = data["biolucida-3d"][i];
- if (biolucida.biolucida) {
- bioList.push(biolucida);
- }
- }
- }
- return { bioList, bio2DIds };
+ });
+ const keys = identifiers.map((item) => item[key]);
+ response = await fetch(`${api}get-files-info-for-curies`, {
+ method: "POST",
+ body: JSON.stringify({
+ filetypes: types,
+ curies: keys,
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+ data = await response.json();
+ return data;
};
export default {
- // Note that the setting store is included in MapContent.vue
methods: {
- populateAnatomyImageObjects: function (datasets) {
- let anatomyCurieImageObjects = {};
- let anatomyNameImageObjects = {};
- const datasetsLength = datasets.length;
- for (let i = 0; i < datasetsLength; i++) {
- const dataset = datasets[i];
- if (dataset.value && dataset.value.length) {
- const imagesLength = dataset.value.length;
- for (let j = 0; j < imagesLength; j++) {
- const image = dataset.value[j];
- if (image.anatomy && image.anatomy.length) {
- const anatomyLength = image.anatomy.length;
- for (let k = 0; k < anatomyLength; k++) {
- const anatomy = image.anatomy[k];
- if (!(anatomy.curie in anatomyCurieImageObjects)) {
- anatomyCurieImageObjects[anatomy.curie] = [];
- }
- anatomyCurieImageObjects[anatomy.curie].push(image);
- if (!(anatomy.name in anatomyNameImageObjects)) {
- anatomyNameImageObjects[anatomy.name] = [];
+ getBiolucidaThumbnails: async function (key, idsList) {
+ try {
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "biolucida-2d",
+ "biolucida-3d",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ if (entry.biolucida_id) {
+ let image = {
+ thumbnail: this.getBiolucidaThumbnailURL(
+ entry.biolucida_id
+ ),
+ id: entry.id,
+ title: entry.file_path.substring(
+ entry.file_path.lastIndexOf("/") + 1
+ ),
+ type: "Image",
+ link: `https://sparc.biolucida.net/api/v1/thumbnail/${entry.biolucida_id}`,
+ mimetype: 'image/png'
+ };
+ list.push(image);
}
- anatomyNameImageObjects[anatomy.name].push(image);
- }
+ });
+ images[key] = list;
}
}
+ return images;
}
- }
- return {
- "anatomyCurie": anatomyCurieImageObjects,
- "anatomyName": anatomyNameImageObjects
- };
- },
-
- processResults: async function (results) {
- try {
- let datasets = [];
- const dataType = "Image";
- console.log("starting promise list");
- let promiseList = results.map(async (result) => {
- const datasetId = result.dataset_identifier;
- const datasetVersion = result.dataset_version;
- const biolucidaInfo = await getBiolucidaInfo(
- this.sparcAPI,
- datasetId
- );
- const imageIds = Object.values(biolucidaInfo).map(
- (image) => image.image_id
- );
- const { bioList, bio2DIds } = getAnnotatedBiolucida(result);
- return bioList
- .filter((bioImage) =>
- imageIds.includes(bioImage.biolucida.identifier)
- )
- .map((bioImage) => {
- const datasetImage = biolucidaInfo[bioImage.biolucida.identifier];
- const link = bio2DIds.includes(bioImage.biolucida.identifier)
- ? getView2DImageLink(
- this.rootURL,
- datasetId,
- datasetVersion,
- bioImage.dataset.path
- )
- : getView3DImageLink(
- this.rootURL,
- datasetId,
- datasetVersion,
- datasetImage
- );
- return {
- title: bioImage.name,
- anatomy: result.organs,
- species: result.organisms,
- datasetId: datasetId,
- datasetVersion: datasetVersion,
- link: link,
- type: dataType,
- thumbnail: datasetImage.thumbnail_url,
- };
- });
- });
- console.log("promiseList:", promiseList);
- let promiseResult = await Promise.allSettled(promiseList);
- datasets = promiseResult.flat();
- console.log("promiseResult:", promiseResult);
- return datasets;
} catch (error) {
console.error("Error:", error);
- return [];
}
+ return {};
},
-
- getImageDatasetFromScicrunch: async function () {
- const endpoint =
- `${this.sparcAPI}multiple_dataset_info/using_multiple_mimetype/?` +
- `${new URLSearchParams({ q: imageQuery })}`;
+ getBiolucidaThumbnailURL: function (biolucidaId) {
+ return `${this.sparcAPI}thumbnail/${biolucidaId}`;
+ },
+ getSegmentationThumbnails: async function (key, idsList) {
try {
- const response = await fetch(endpoint);
- const data = await response.json();
- if (data.numberOfHits >= 1) {
- let datasets = await this.processResults(data.results);
- return { success: true, datasets: datasets };
+ const data = await getFilesInfo(this.sparcAPI, key, idsList, [
+ "mbf-segmentation",
+ ]);
+ if (data["files_info"]) {
+ const images = {};
+ for (const [key, value] of Object.entries(data["files_info"])) {
+ if (value.length > 0) {
+ const list = [];
+ value.forEach((entry) => {
+ let image = {
+ thumbnail: this.getSegmentationThumbnailURL(
+ entry.id,
+ entry.version,
+ entry.file_path
+ ),
+ id: entry.id,
+ title: entry.file_path.substring(
+ entry.file_path.lastIndexOf("/") + 1
+ ),
+ type: "Segmentation",
+ link: this.getBiolucidaThumbnailURL(entry.biolucida_id),
+ };
+ list.push(image);
+ });
+ images[key] = list;
+ }
+ }
+ return images;
}
- return { success: false, error: "No datasets found" };
} catch (error) {
- return { success: false, error: error };
+ console.error("Error:", error);
+ }
+ return {};
+ },
+ getSegmentationThumbnailURL: function (
+ datasetId,
+ datasetVersion,
+ filePath
+ ) {
+ return `${this.sparcAPI}/thumbnail/neurolucida?datasetId=${datasetId}&version=${datasetVersion}&path=files/${filePath}`;
+ },
+ populateMapWithImages: function (mapImp, images, type) {
+ for (const [key, list] of Object.entries(images)) {
+ this.downloadAndCreateImageThumbnailMarkerUrl(mapImp, key, list, type);
}
},
+ downloadAndCreateImageThumbnailMarkerUrl: function (
+ mapImp,
+ key,
+ list,
+ type
+ ) {
+ const count = list.length;
+ if (count > 0) {
+ //Pick a random image
+ const index = Math.floor(Math.random() * count);
+ const thumbnail = list[index].thumbnail;
+ this.getThumbnail(thumbnail, type)
+ .then((wrappedElement) => {
+ this.createImageThumbnailMarkerUrl(mapImp, key, wrappedElement);
+ })
+ .catch(() => {
+ //Failed to download, pick another one
+ list.splice(index);
+ this.downloadAndCreateImageThumbnailMarkerUrl(
+ mapImp,
+ key,
+ list,
+ type
+ );
+ });
+ }
+ },
+ getThumbnail: async function (url, type) {
+ return new Promise((resolve, reject) => {
+ if (type === "Segmentation" || type === "Image") {
+ 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;
+ });
+ },
+ createImageThumbnailMarkerUrl: function (mapImp, id, wrapperElement) {
+ // add it to the flatmap
+ const markerIdentifier = mapImp.addMarker(id, {
+ element: wrapperElement,
+ className: "highlight-marker",
+ cluster: false,
+ type: "image",
+ });
+
+ const marker = mapImp.addMarker(id);
+ return marker;
+ },
},
};
From e23211ea3117b882151671411a49e228e18eae9e Mon Sep 17 00:00:00 2001
From: alan-wu 
'
\ No newline at end of file
diff --git a/src/icons/imageThumbnail2.js b/src/icons/imageThumbnail2.js
deleted file mode 100644
index 32771fe5..00000000
--- a/src/icons/imageThumbnail2.js
+++ /dev/null
@@ -1 +0,0 @@
-export default '
'
\ No newline at end of file
diff --git a/src/icons/imageThumbnail3.js b/src/icons/imageThumbnail3.js
deleted file mode 100644
index 5f2ca2da..00000000
--- a/src/icons/imageThumbnail3.js
+++ /dev/null
@@ -1 +0,0 @@
-export default '
'
\ No newline at end of file
From 0745f7e5b318c483b18720398ef88d829d893f05 Mon Sep 17 00:00:00 2001
From: alan-wu