visualifyjs 2.5.3-2.dev → 2.5.3-9-dev

package/src/core/components/visium.js

@@ -1,97 +1,97 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2024-01-08 16:34:20
- * @FilePath     : /visualifyjs/src/core/components/Visium.js
- * @Description  :
- * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useEffect, useState } from 'react';
-import { useAppContext } from '../appContext';
-import conditionalFetch from '../fetch/condfetch';
-import EChartSwitcher from '../modules/echartswitcher';
-import Loading from '../pages/loading';
-import { isEmpty } from 'lodash';
-
-const Visium = ({ props, style }) => {
-	const [loading, setLoading] = useState({
-		active: true,
-		message: 'Please Select the Section',
-	});
-	const { sharedData } = useAppContext();
-	const [Options, setOptions] = useState(props);
-
-	useEffect(() => {
-		const { cellfrac, metadata, gene, image } = props.settings;
-		if (!metadata || !gene || !image)
-			throw new Error('missing metadata, gene, or image');
-		let trigger = {
-			metadata: metadata.trigger,
-			gene: gene.trigger,
-			image: image.trigger,
-		};
-
-		const updatePlot = async () => {
-			try {
-				const cellval = isEmpty(sharedData[cellfrac])
-					? 'All'
-					: sharedData[cellfrac][0];
-
-				if (sharedData?.[trigger.image]) {
-					console.log('image trigger', sharedData?.[trigger.image]);
-					const imageBuffer = await conditionalFetch(
-						image,
-						sharedData,
-						{},
-					);
-
-					const blob = new Blob([new Uint8Array(imageBuffer.data)], {
-						type: 'image/png',
-					});
-					const dataURL = URL.createObjectURL(blob);
-
-					console.log('image', dataURL);
-					setOptions((prev) => ({
-						...prev,
-						config: {
-							...prev.config,
-							overrides: {
-								...prev.config.overrides,
-								backgroundColor: {
-									image: dataURL,
-								},
-							},
-						},
-					}));
-				}
-
-				console.log('update plot', cellval, trigger);
-			} catch (e) {
-				setLoading({ active: true, message: e.message });
-			}
-		};
-
-		updatePlot();
-	}, [props, sharedData]);
-
-	return (
-		<div
-			id={props.id}
-			style={{ ...style, position: 'relative' }}>
-			{loading.active && (
-				<Loading
-					message={loading.message}
-					style={loading.style}
-				/>
-			)}
-			<EChartSwitcher
-				props={Options}
-				style={{
-					opacity: loading.active ? 0 : 1,
-					...style,
-				}}
-			/>
-		</div>
-	);
-};
-
-export default Visium;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-08 16:34:20
+ * @FilePath     : /visualifyjs/src/core/components/Visium.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useState } from 'react';
+import { useAppContext } from '../appContext';
+import conditionalFetch from '../fetch/condfetch';
+import EChartSwitcher from '../modules/echartswitcher';
+import Loading from '../pages/loading';
+import { isEmpty } from 'lodash';
+
+const Visium = ({ props, style }) => {
+	const [loading, setLoading] = useState({
+		active: true,
+		message: 'Please Select the Section',
+	});
+	const { sharedData } = useAppContext();
+	const [Options, setOptions] = useState(props);
+
+	useEffect(() => {
+		const { cellfrac, metadata, gene, image } = props.settings;
+		if (!metadata || !gene || !image)
+			throw new Error('missing metadata, gene, or image');
+		let trigger = {
+			metadata: metadata.trigger,
+			gene: gene.trigger,
+			image: image.trigger,
+		};
+
+		const updatePlot = async () => {
+			try {
+				const cellval = isEmpty(sharedData[cellfrac])
+					? 'All'
+					: sharedData[cellfrac][0];
+
+				if (sharedData?.[trigger.image]) {
+					console.log('image trigger', sharedData?.[trigger.image]);
+					const imageBuffer = await conditionalFetch(
+						image,
+						sharedData,
+						{},
+					);
+
+					const blob = new Blob([new Uint8Array(imageBuffer.data)], {
+						type: 'image/png',
+					});
+					const dataURL = URL.createObjectURL(blob);
+
+					console.log('image', dataURL);
+					setOptions((prev) => ({
+						...prev,
+						config: {
+							...prev.config,
+							overrides: {
+								...prev.config.overrides,
+								backgroundColor: {
+									image: dataURL,
+								},
+							},
+						},
+					}));
+				}
+
+				console.log('update plot', cellval, trigger);
+			} catch (e) {
+				setLoading({ active: true, message: e.message });
+			}
+		};
+
+		updatePlot();
+	}, [props, sharedData]);
+
+	return (
+		<div
+			id={props.id}
+			style={{ ...style, position: 'relative' }}>
+			{loading.active && (
+				<Loading
+					message={loading.message}
+					style={loading.style}
+				/>
+			)}
+			<EChartSwitcher
+				props={Options}
+				style={{
+					opacity: loading.active ? 0 : 1,
+					...style,
+				}}
+			/>
+		</div>
+	);
+};
+
+export default Visium;

package/src/core/fetch/condfetch.js

@@ -1,82 +1,82 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-27 17:34:06
- * @FilePath     : /visualifyjs/src/core/fetch/condfetch.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import fetchApi from './vfetch';
-import { isEmpty } from 'lodash';
-
-const conditionalFetch = async (
-	source,
-	sharedData,
-	title,
-	visualify = {},
-	body = null,
-) => {
-	const {
-		name,
-		method = 'GET',
-		url,
-		responseKey,
-		mapping: api_mapping = visualify?.api_mapping ?? {},
-		trigger,
-	} = source;
-
-	if (!name) throw new Error('name is required for api sources');
-	if (!url) throw new Error('url is required for api sources');
-
-	if (Array.isArray(trigger)) {
-		// Handle complex trigger configurations
-		const triggerValues = trigger.map((triggerItem) => {
-			const triggerValue =
-				sharedData[triggerItem.name] || sharedData[triggerItem];
-			if (triggerItem.title && title) title.text = triggerValue;
-
-			return triggerValue !== undefined &&
-				triggerValue !== null &&
-				triggerValue !== '' &&
-				!isEmpty(triggerValue)
-				? api_mapping?.[triggerValue] || triggerValue
-				: null;
-		});
-
-		if (triggerValues.some((val) => val === null)) {
-			// If any trigger value is not available, skip this source
-			return null;
-		}
-
-		// Replace multiple {trigger} placeholders in the URL with trigger values
-		let finalUrl = url;
-		triggerValues.forEach((triggerValue) => {
-			finalUrl = finalUrl.replace('{trigger}', triggerValue);
-		});
-
-		const response = await fetchApi(finalUrl, method, body, {}, true);
-
-		return responseKey ? response[responseKey] : response;
-	} else if (trigger) {
-		// Handle simple string trigger
-		const triggerValue = sharedData[trigger.name] || sharedData[trigger];
-
-		if (
-			triggerValue !== undefined &&
-			triggerValue !== null &&
-			triggerValue !== '' &&
-			!isEmpty(triggerValue)
-		) {
-			if (trigger.title && title) title.text = triggerValue;
-			const triggerVal = api_mapping?.[triggerValue] || triggerValue;
-			const finalUrl = url.replace('{trigger}', triggerVal);
-
-			const response = await fetchApi(finalUrl, method, null, {}, true);
-			return responseKey ? response[responseKey] : response;
-		}
-	} else {
-		const response = await fetchApi(url, method, null, {}, true);
-		return responseKey ? response[responseKey] : response;
-	}
-};
-
-export default conditionalFetch;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-27 17:34:06
+ * @FilePath     : /visualifyjs/src/core/fetch/condfetch.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import fetchApi from './vfetch';
+import { isEmpty } from 'lodash';
+
+const conditionalFetch = async (
+	source,
+	sharedData,
+	title,
+	visualify = {},
+	body = null,
+) => {
+	const {
+		name,
+		method = 'GET',
+		url,
+		responseKey,
+		mapping: api_mapping = visualify?.api_mapping ?? {},
+		trigger,
+	} = source;
+
+	if (!name) throw new Error('name is required for api sources');
+	if (!url) throw new Error('url is required for api sources');
+
+	if (Array.isArray(trigger)) {
+		// Handle complex trigger configurations
+		const triggerValues = trigger.map((triggerItem) => {
+			const triggerValue =
+				sharedData[triggerItem.name] || sharedData[triggerItem];
+			if (triggerItem.title && title) title.text = triggerValue;
+
+			return triggerValue !== undefined &&
+				triggerValue !== null &&
+				triggerValue !== '' &&
+				!isEmpty(triggerValue)
+				? api_mapping?.[triggerValue] || triggerValue
+				: null;
+		});
+
+		if (triggerValues.some((val) => val === null)) {
+			// If any trigger value is not available, skip this source
+			return null;
+		}
+
+		// Replace multiple {trigger} placeholders in the URL with trigger values
+		let finalUrl = url;
+		triggerValues.forEach((triggerValue) => {
+			finalUrl = finalUrl.replace('{trigger}', triggerValue);
+		});
+
+		const response = await fetchApi(finalUrl, method, body, {}, true);
+
+		return responseKey ? response[responseKey] : response;
+	} else if (trigger) {
+		// Handle simple string trigger
+		const triggerValue = sharedData[trigger.name] || sharedData[trigger];
+
+		if (
+			triggerValue !== undefined &&
+			triggerValue !== null &&
+			triggerValue !== '' &&
+			!isEmpty(triggerValue)
+		) {
+			if (trigger.title && title) title.text = triggerValue;
+			const triggerVal = api_mapping?.[triggerValue] || triggerValue;
+			const finalUrl = url.replace('{trigger}', triggerVal);
+
+			const response = await fetchApi(finalUrl, method, null, {}, true);
+			return responseKey ? response[responseKey] : response;
+		}
+	} else {
+		const response = await fetchApi(url, method, null, {}, true);
+		return responseKey ? response[responseKey] : response;
+	}
+};
+
+export default conditionalFetch;

package/src/core/fetch/fetch.js

@@ -1,92 +1,92 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-09-22 21:19:16
- * @FilePath     : /visualifyjs/src/core/fetch/fetch.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-
-const MAX_CACHE_SIZE = 512 * 1024 * 1024; // 512MB
-
-const cache = {};
-const lruOrder = [];
-
-// Function to manage the cache size and eviction
-const manageCache = (cacheKey, data) => {
-	// Add the cacheKey to the LRU order
-	lruOrder.push(cacheKey);
-
-	// Check if the cache size exceeds the maximum limit
-	let currentCacheSize = 0;
-	for (const key of lruOrder) {
-		if (cache[key]) {
-			currentCacheSize += JSON.stringify(cache[key]).length;
-		}
-		if (currentCacheSize > MAX_CACHE_SIZE) {
-			// Remove the least recently used item from the cache and the LRU order
-			const lruKey = lruOrder.shift();
-			delete cache[lruKey];
-		}
-	}
-
-	// Cache the data
-	cache[cacheKey] = data;
-};
-
-const simplefetch = async (url, options = {}) => {
-	const { id = undefined, type, key, debug = false, bbox = {} } = options;
-	const hasBbox = Object.keys(bbox).length > 0;
-	const cacheKey = hasBbox ? `${id}_${JSON.stringify(bbox)}` : `${id}_nobbox`;
-
-	if (cache[cacheKey]) {
-		if (debug) console.warn('simplefetch: cache hit ', cacheKey);
-		return cache[cacheKey];
-	}
-
-	if (typeof url === 'object') {
-		if (id && id !== '') return url[id] ?? {};
-		else return url;
-	} else if (typeof url === 'string') {
-		let result = {};
-		if (type && type === 'gene' && (id === '' || id === undefined))
-			return {};
-		if (type && (type === 'gene' || type === 'metadata') && id && id !== '')
-			url += (url.charAt(url.length - 1) === '/' ? '' : '/') + id;
-		if (type && type === 'metadata' && id && id !== '' && hasBbox) {
-			const { xMin, yMin, xMax, yMax } = bbox;
-			url += `/${xMin}/${yMin}/${xMax}/${yMax}`;
-			//console.log('simplefetch: url', url);
-		}
-
-		//console.log("simplefetch: fetch url", url);
-		const res = await fetch(url, debug ? { mode: 'cors' } : {}); // using await here
-		//console.log("simplefetch: fetch res", res);
-
-		if (res.ok) {
-			const data = await res.json(); // using await here
-			if (data.code === 200) {
-				if (key) {
-					result = data[key];
-				} else if (type === 'metadata') result = data.metadata;
-				else if (type === 'gene') result = data.gene;
-				else if (type === 'image') result = data.image;
-				else result = data;
-
-				// When caching data, use the manageCache function
-				if (id && !cache[cacheKey]) {
-					manageCache(cacheKey, result);
-				}
-
-				if (debug) console.log('simplefetch: fetch success', result);
-			} else console.error('simplefetch: fetch failed', data.code, data.msg);
-		} else console.error('simplefetch: fetch error', res);
-
-		//console.log("simplefetch: after fetch", result);
-		return result;
-	} else {
-		console.error('Unsupported type or Invalid url:', url);
-		return {};
-	}
-};
-
-export default simplefetch;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-09-22 21:19:16
+ * @FilePath     : /visualifyjs/src/core/fetch/fetch.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+const MAX_CACHE_SIZE = 512 * 1024 * 1024; // 512MB
+
+const cache = {};
+const lruOrder = [];
+
+// Function to manage the cache size and eviction
+const manageCache = (cacheKey, data) => {
+	// Add the cacheKey to the LRU order
+	lruOrder.push(cacheKey);
+
+	// Check if the cache size exceeds the maximum limit
+	let currentCacheSize = 0;
+	for (const key of lruOrder) {
+		if (cache[key]) {
+			currentCacheSize += JSON.stringify(cache[key]).length;
+		}
+		if (currentCacheSize > MAX_CACHE_SIZE) {
+			// Remove the least recently used item from the cache and the LRU order
+			const lruKey = lruOrder.shift();
+			delete cache[lruKey];
+		}
+	}
+
+	// Cache the data
+	cache[cacheKey] = data;
+};
+
+const simplefetch = async (url, options = {}) => {
+	const { id = undefined, type, key, debug = false, bbox = {} } = options;
+	const hasBbox = Object.keys(bbox).length > 0;
+	const cacheKey = hasBbox ? `${id}_${JSON.stringify(bbox)}` : `${id}_nobbox`;
+
+	if (cache[cacheKey]) {
+		if (debug) console.warn('simplefetch: cache hit ', cacheKey);
+		return cache[cacheKey];
+	}
+
+	if (typeof url === 'object') {
+		if (id && id !== '') return url[id] ?? {};
+		else return url;
+	} else if (typeof url === 'string') {
+		let result = {};
+		if (type && type === 'gene' && (id === '' || id === undefined))
+			return {};
+		if (type && (type === 'gene' || type === 'metadata') && id && id !== '')
+			url += (url.charAt(url.length - 1) === '/' ? '' : '/') + id;
+		if (type && type === 'metadata' && id && id !== '' && hasBbox) {
+			const { xMin, yMin, xMax, yMax } = bbox;
+			url += `/${xMin}/${yMin}/${xMax}/${yMax}`;
+			//console.log('simplefetch: url', url);
+		}
+
+		//console.log("simplefetch: fetch url", url);
+		const res = await fetch(url, debug ? { mode: 'cors' } : {}); // using await here
+		//console.log("simplefetch: fetch res", res);
+
+		if (res.ok) {
+			const data = await res.json(); // using await here
+			if (data.code === 200) {
+				if (key) {
+					result = data[key];
+				} else if (type === 'metadata') result = data.metadata;
+				else if (type === 'gene') result = data.gene;
+				else if (type === 'image') result = data.image;
+				else result = data;
+
+				// When caching data, use the manageCache function
+				if (id && !cache[cacheKey]) {
+					manageCache(cacheKey, result);
+				}
+
+				if (debug) console.log('simplefetch: fetch success', result);
+			} else console.error('simplefetch: fetch failed', data.code, data.msg);
+		} else console.error('simplefetch: fetch error', res);
+
+		//console.log("simplefetch: after fetch", result);
+		return result;
+	} else {
+		console.error('Unsupported type or Invalid url:', url);
+		return {};
+	}
+};
+
+export default simplefetch;

package/src/core/fetch/json.js

@@ -1,29 +1,29 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 12:28:29
- * @FilePath     : /visualifyjs/src/core/fetch/json.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-function fetchJson(jsonFileName, externalURL) {
-	let jsonUrl;
-	if (externalURL) {
-		jsonUrl = externalURL;
-	} else {
-		jsonUrl = `./${jsonFileName}.json`;
-	}
-
-	return fetch(jsonUrl).then((response) => {
-		if (!response.ok) {
-			throw new Error(`Failed to fetch JSON for ${jsonFileName}`);
-		}
-		if (
-			!response.headers.get('content-type')?.includes('application/json')
-		) {
-			throw new TypeError('Response not in JSON format');
-		}
-		return response.json();
-	});
-}
-
-export default fetchJson;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 12:28:29
+ * @FilePath     : /visualifyjs/src/core/fetch/json.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+function fetchJson(jsonFileName, externalURL) {
+	let jsonUrl;
+	if (externalURL) {
+		jsonUrl = externalURL;
+	} else {
+		jsonUrl = `./${jsonFileName}.json`;
+	}
+
+	return fetch(jsonUrl).then((response) => {
+		if (!response.ok) {
+			throw new Error(`Failed to fetch JSON for ${jsonFileName}`);
+		}
+		if (
+			!response.headers.get('content-type')?.includes('application/json')
+		) {
+			throw new TypeError('Response not in JSON format');
+		}
+		return response.json();
+	});
+}
+
+export default fetchJson;