visualifyjs 2.5.3-2.dev

package/src/core/components/timeline.js

@@ -0,0 +1,281 @@
+import React, { useEffect, useState } from 'react';
+import simplefetch from '../fetch/fetch';
+import { useAppContext } from '../appContext';
+
+const generateNodes = (data, split_pattern) => {
+	return data.reduce((groups, item) => {
+		const parts = item.split(split_pattern);
+		const main = parts[0];
+		const sub = parts.slice(1).join(split_pattern);
+
+		if (sub) {
+			if (!groups[main]) {
+				groups[main] = [];
+			}
+			groups[main].push(sub);
+		} else {
+			groups[main] = null;
+		}
+
+		return groups;
+	}, {});
+};
+
+function Timeline({ props, style }) {
+	const { debug } = props;
+
+	const { style: _style_parsed = {} } = props;
+	const { class: className, ...customStyle } = _style_parsed;
+
+	// if debug is true, then border is red, else no border
+	style = {
+		...style,
+		border: debug ? '1px solid red' : 'none',
+		maxHeight: '500px',
+		overflowY: 'auto',
+		overflowX: 'hidden',
+		...customStyle,
+		position: 'relative',
+	};
+
+	const { id, val, config = {}, title } = props;
+
+	const {
+		split_pattern = '_',
+		node_width = '50%',
+		sort_pattern = new RegExp(/E(\d+)/),
+		distance_pattern = undefined,
+		basicGap = 1,
+	} = config;
+	// Render title if it exists
+	const renderTitle = () => {
+		return title && <h3>{title}</h3>;
+	};
+
+	const [nodes, setNodes] = useState([]);
+
+	useEffect(() => {
+		const { selection, urlval, rm_suffix } = props;
+
+		const fetchData = async () => {
+			try {
+				const response = await simplefetch(selection, { key: urlval });
+				// remove the suffix "_metadata" from the options
+				try {
+					const removed_suffix = response.map((item) =>
+						item.replace(rm_suffix, ''),
+					);
+					//console.log('Removed suffix:', removed_suffix);
+					const groupedNodes = generateNodes(
+						removed_suffix,
+						split_pattern,
+					);
+					setNodes(groupedNodes);
+				} catch (error) {
+					setNodes(response);
+				}
+			} catch (error) {
+				console.error('Error fetching options:', error);
+			}
+		};
+
+		fetchData();
+	}, [props, split_pattern, debug]);
+
+	const { setSharedData } = useAppContext();
+
+	const handleNodeClick = (node) => {
+		if (debug) console.log(`Node [${node}] clicked!`);
+		if (val) {
+			setSharedData((prevSharedData) => {
+				return { ...prevSharedData, [val]: [node] };
+			});
+			alert(`Clicked: ${node}`);
+		}
+	};
+
+	const _sort_pattern =
+		typeof sort_pattern === 'string'
+			? new RegExp(sort_pattern)
+			: sort_pattern;
+
+	const sortedNodes = Object.keys(nodes)
+		.sort((a, b) => {
+			//console.log('a:', a, 'b:', b, 'sort_pattern:', _sort_pattern);
+			const numA = parseInt(a.match(_sort_pattern)[1]);
+			const numB = parseInt(b.match(_sort_pattern)[1]);
+			return numA - numB;
+		})
+		.reduce((acc, key) => {
+			acc[key] = nodes[key];
+			return acc;
+		}, {});
+
+	const extractNumber = (str) => {
+		const matchE = str.match(/E(\d+)/);
+
+		if (distance_pattern && distance_pattern.regex) {
+			const dis_regex =
+				typeof distance_pattern?.regex === 'string'
+					? new RegExp(distance_pattern.regex)
+					: distance_pattern.regex;
+
+			const match = str.match(dis_regex);
+
+			//console.log('str', str, 'match:', match, 'distance_pattern:', dis_regex);
+			if (match) {
+				for (let i = distance_pattern.pos; i >= 1; i--) {
+					if (match[i]) {
+						return parseInt(match[i]);
+					}
+				}
+			}
+		} else if (matchE) {
+			return parseInt(matchE[1]);
+		}
+		return 0;
+	};
+
+	const calculateDistance = (main, previousMain) => {
+		if (!previousMain) return 0;
+
+		const numA = extractNumber(main);
+		const numB = extractNumber(previousMain);
+
+		//console.log('numA:', numA, 'numB:', numB, 'diff:', Math.abs(numA - numB));
+
+		return Math.abs(numA - numB) * basicGap; // Distance based on the basic gap value
+	};
+
+	let previousMain = null;
+
+	return (
+		<div
+			key={id}
+			style={{ ...style }}
+			className={className}>
+			{renderTitle()}
+			<div
+				key={id + '.timeline'}
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'flex-start',
+					position: 'relative',
+				}}>
+				<div
+					style={{
+						borderLeft: '10px solid black',
+						//minHeight: '350px',
+						height: '100%',
+						position: 'absolute',
+						left: '0px',
+						top: '0px',
+					}}
+				/>
+				<div
+					style={{ ...style }}
+					className={className}>
+					<div
+						style={{
+							maxHeight: '500px',
+							overflowY: 'auto',
+							overflowX: 'hidden',
+						}}>
+						{Object.keys(sortedNodes).map((main, index) => {
+							const distance = calculateDistance(
+								main,
+								previousMain,
+							);
+							previousMain = main; // Update previousMain for the next iteration
+							return (
+								<div
+									key={index}
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										marginTop: distance + 'px', // Apply distance here
+										position: 'relative',
+										flexDirection: 'column',
+									}}>
+									<div
+										style={{
+											position: 'absolute',
+											left: '0%',
+											top: '10px',
+											width: node_width ?? '50%',
+											height: '2px',
+											background: 'black',
+										}}
+									/>
+									<div
+										id='Timeline.Dot'
+										style={{
+											position: 'absolute',
+											left: '0%',
+											top: '15px',
+											width: '10px',
+											height: '10px',
+											borderRadius: '50%',
+											background: 'black',
+										}}
+									/>
+									{nodes[main] ? (
+										<>
+											<div style={{ marginLeft: '15%' }}>
+												{main}
+											</div>
+											<div
+												style={{
+													marginLeft: '15%',
+													display: 'flex',
+													flexWrap: 'wrap',
+												}}>
+												{nodes[main].map(
+													(sub, subIndex) => (
+														<button
+															key={subIndex}
+															style={{
+																padding:
+																	'5px 3px',
+																marginLeft:
+																	'2px',
+																border: '1px solid black',
+																cursor: 'pointer',
+															}}
+															onClick={() =>
+																handleNodeClick(
+																	`${main}_${sub}`,
+																)
+															}>
+															{sub}
+														</button>
+													),
+												)}
+											</div>
+										</>
+									) : (
+										<div
+											style={{
+												marginLeft: '15%',
+												padding: '5px 3px',
+												border: '1px solid black',
+												cursor: 'pointer',
+											}}
+											onClick={() =>
+												handleNodeClick(main)
+											}>
+											{main}
+										</div>
+									)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Timeline;

package/src/core/components/visium.js

@@ -0,0 +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;

package/src/core/fetch/condfetch.js

@@ -0,0 +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;

package/src/core/fetch/fetch.js

@@ -0,0 +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;

package/src/core/fetch/json.js

@@ -0,0 +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;

package/src/core/fetch/vfetch.js

@@ -0,0 +1,42 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-21 16:49:22
+ * @FilePath     : /visualifyjs/src/core/fetch/vfetch.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const fetchApi = async (
+	url,
+	method = 'GET',
+	body = null,
+	headers = {},
+	debug = false,
+) => {
+	// Setup for CORS and headers
+	let fetchOptions = {
+		method: method,
+		headers: {
+			'Content-Type': 'application/json',
+			...headers,
+		},
+		mode: debug ? 'cors' : 'same-origin',
+	};
+
+	// Add body for POST request
+	if (method === 'POST' && body) {
+		fetchOptions.body = JSON.stringify(body);
+	}
+
+	try {
+		const response = await fetch(url, fetchOptions);
+		if (!response.ok) {
+			throw new Error(`HTTP error! status: ${response.status}`);
+		}
+		return await response.json();
+	} catch (err) {
+		console.error('Fetch API Error:', err);
+		throw err;
+	}
+};
+
+export default fetchApi;

package/src/core/liveEditor.js

@@ -0,0 +1,44 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 22:51:45
+ * @FilePath     : /visualifyjs/src/core/liveEditor.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import Recharts from './recharts';
+import { createRoot } from 'react-dom/client';
+import CodeEditorWithPreview from './modules/codeEditorWithPreview';
+import { VisualifyProvider } from './appContext';
+class LiveEditor extends Recharts {
+	constructor(config) {
+		super();
+		this.config = config;
+	}
+
+	mount(selector) {
+		const el =
+			typeof selector === 'string'
+				? document.querySelector(selector)
+				: selector;
+
+		if (!el) {
+			throw new Error(`Element not found with selector: ${selector}`);
+		}
+
+		try {
+			// Assuming createRoot is imported from 'react-dom/client'
+			const charts = createRoot(el);
+			charts.render(
+				<VisualifyProvider>
+					<CodeEditorWithPreview config={this.config} />
+				</VisualifyProvider>,
+			);
+			console.log('mounted ' + selector, el);
+		} catch (e) {
+			console.error('Error mounting chart:', e);
+		}
+	}
+}
+
+export default LiveEditor;