visualifyjs 2.5.3-2.dev

package/src/core/components/scatterL.js

@@ -0,0 +1,173 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-06 17:23:59
+ * @FilePath     : /visualify.js/src/core/components/scatterL.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { useAppContext } from '../appContext';
+import Loading from '../pages/loading';
+import {
+	initChart,
+	handleChartForSharedDataChange,
+} from '../modules/echartsUtils';
+import {
+	parseConfig,
+	validateConfig,
+	handleAPI,
+	handleSimplyLoad,
+	onDataZoom,
+	parseData,
+	outputAxisValues,
+} from './parser.scatterBio';
+
+function ScatterBio({ props, style }) {
+	const chartRef = useRef(null);
+	const { sharedData } = useAppContext();
+	const [loading, setLoading] = useState({ active: true, message: null });
+
+	// Store the previous sharedData value using a ref
+	const previousSharedDataRef = useRef(null);
+
+	useEffect(() => {
+		let option = parseConfig(props);
+		//console.log('option: ', option);
+		let fetched_dat = null;
+
+		// Check if the sharedData has changed
+		handleChartForSharedDataChange(
+			chartRef,
+			sharedData,
+			previousSharedDataRef,
+			() => {
+				option.xAxis.min = props?.echart?.xAxis?.min;
+				option.xAxis.max = props?.echart?.xAxis?.max;
+				option.yAxis.min = props?.echart?.yAxis?.min;
+				option.yAxis.max = props?.echart?.yAxis?.max;
+			},
+		);
+
+		// Simulate fetching data asynchronously (replace with your data fetching logic)
+		const updatePlot = async () => {
+			try {
+				setLoading({ active: true, message: null });
+				validateConfig(props.config);
+				const myChart = initChart(chartRef, option);
+				if (props.config.simpleload)
+					handleSimplyLoad(props.config.simpleload);
+				else {
+					const ibox = props.config?.ibox ?? {
+						xMin: -9999,
+						yMin: -9999,
+						xMax: 9999,
+						yMax: 9999,
+					};
+					fetched_dat = await handleAPI(
+						props.config,
+						sharedData,
+						ibox,
+					);
+					//console.log(fetched_dat, 'fetched_dat');
+				}
+				var { series, legend, visualMap, title } = parseData(
+					fetched_dat,
+					props.config,
+					sharedData,
+				);
+				// Chart options
+				option.series = props?.echart?.series ?? series;
+				option.legend = {
+					...option.legend,
+					...legend,
+				};
+
+				option.visualMap = visualMap;
+				option.title = {
+					...option.title,
+					text: title,
+				};
+
+				// Set the initial option
+				myChart.setOption(option);
+
+				let zoomTimeout;
+				const zoom_action = () => {
+					clearTimeout(zoomTimeout);
+					zoomTimeout = setTimeout(async () => {
+						await onDataZoom(
+							props,
+							sharedData,
+							fetched_dat,
+							myChart,
+							option,
+						);
+					}, 500);
+				};
+
+				myChart.on('dataZoom', zoom_action);
+
+				setLoading({ active: false, message: null });
+
+				let bbox = outputAxisValues(myChart);
+				option.xAxis.min = option.xAxis.min ?? bbox.xMin;
+				option.xAxis.max = option.xAxis.max ?? bbox.xMax;
+				option.yAxis.min = option.yAxis.min ?? bbox.yMin;
+				option.yAxis.max = option.yAxis.max ?? bbox.yMax;
+
+				// Cleanup event listeners on component unmount
+				return () => {
+					myChart.off('dataZoom', zoom_action);
+					myChart.dispose();
+				};
+			} catch (error) {
+				setLoading({ active: true, message: error.message });
+			}
+		};
+
+		// Execute the updatePlot function
+		updatePlot();
+
+		// Observe changes to the size of the chart container
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (let entry of entries) {
+				if (entry.contentRect.width && entry.contentRect.height) {
+					updatePlot();
+					resizeObserver.disconnect();
+				}
+			}
+		});
+
+		if (chartRef.current) {
+			resizeObserver.observe(chartRef.current);
+		}
+
+		// Cleanup function
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [props, sharedData]);
+
+	return (
+		<div
+			id={props.id}
+			style={{ ...style, position: 'relative' }}>
+			{loading.active && (
+				<Loading
+					message={loading.message}
+					style={{ marginTop: '10px' }}
+				/>
+			)}
+			<div
+				ref={chartRef}
+				style={{
+					opacity: loading.active ? 0 : 1,
+					width: props.config?.size?.width || '100%',
+					height: props.config?.size?.height || '100%',
+				}}
+			/>
+		</div>
+	);
+}
+
+export default ScatterBio;

package/src/core/components/searchbar.js

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import '../../_css/autoSuggestion.css';
+import { useAppContext } from '../appContext';
+import conditionalFetch from '../fetch/condfetch';
+
+function SearchBar({ props, style }) {
+	const [suggestions, setSuggestions] = useState([]);
+	const [wordlist, setWordlist] = useState([]);
+	const [inputValue, setInputValue] = useState('');
+
+	const { sharedData, setSharedData } = useAppContext();
+
+	const {
+		id,
+		title = 'Search',
+		className,
+		style: _style = { height: '130px', width: '200px' },
+		placeholder = 'Search...',
+		wordlimit = 15,
+		suggestLen = 3,
+		searchStyle = {
+			borderRadius: '15px',
+			width: '100%',
+		},
+		config = {},
+		debug,
+	} = props;
+
+	if (config.save && typeof config.save !== 'string') config.save = id;
+
+	useEffect(() => {
+		if (config.source) {
+			const fetchWordlist = async () => {
+				const response = await conditionalFetch(
+					config.source,
+					sharedData,
+					null,
+					null,
+				);
+				if (response) {
+					const newWordlist =
+						response[config.source.responseKey] || response;
+					setWordlist(newWordlist);
+				} else if (config.source.trigger) {
+					console.log('wait for trigger');
+				} else {
+					console.error('Error fetching wordlist.');
+				}
+			};
+
+			if (Array.isArray(config.source)) {
+				setWordlist(config.source);
+			} else if (typeof config.source === 'object') {
+				fetchWordlist();
+			}
+		}
+	}, [config.source, debug, sharedData]);
+
+	useEffect(() => {
+		// 更新inputValue，但不要影响其他组件的共享数据
+		setInputValue(sharedData[id] || '');
+	}, [sharedData, id]);
+
+	const handleInputChange = (e) => {
+		const inputValue = e.target.value;
+		const inputValueLowerCase = inputValue.trim().toLowerCase();
+		setInputValue(inputValue);
+
+		if (inputValue.length >= suggestLen) {
+			setSuggestions(
+				wordlist
+					.filter((word) =>
+						word.toLowerCase().includes(inputValueLowerCase),
+					)
+					.slice(0, wordlimit),
+			);
+		}
+
+		if (
+			config.save &&
+			(wordlist.includes(inputValue) || inputValue === '')
+		) {
+			setSharedData((prevSharedData) => ({
+				...prevSharedData,
+				[config.save]: inputValue,
+			}));
+		}
+	};
+
+	const handleSuggestionClick = (suggestion) => {
+		setInputValue(suggestion);
+		setSuggestions([]);
+
+		if (config.save) {
+			setSharedData((prevSharedData) => ({
+				...prevSharedData,
+				[config.save]: suggestion,
+			}));
+		}
+	};
+
+	return (
+		<div
+			id={id}
+			style={{ ...style, ..._style }}
+			className={className}>
+			{title && <h3>{title}</h3>}
+			<div className='autosuggestion'>
+				<input
+					type='text'
+					placeholder={placeholder}
+					style={searchStyle}
+					value={inputValue}
+					onChange={handleInputChange}
+				/>
+				<ul className='suggestion-list'>
+					{suggestions.map((suggestion, index) => (
+						<li
+							key={index}
+							className='suggestion-item'
+							onClick={() => handleSuggestionClick(suggestion)}>
+							{suggestion}
+						</li>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+}
+
+export default SearchBar;

package/src/core/components/selection.js

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import { useAppContext } from '../appContext';
+import simplefetch from '../fetch/fetch';
+import Select from 'react-select';
+
+function Selection({ props, style }) {
+	const { debug } = props;
+	const { style: _style } = props;
+
+	// Render title if it exists
+	const { title } = props;
+	const renderTitle = () => {
+		return title && <h3>{title}</h3>;
+	};
+
+	// If val is exist, store it to SharedData
+	const { sharedData, setSharedData } = useAppContext();
+
+	// store attr in state so that we can update it when it changes
+	const [selected, setSelected] = useState([]);
+
+	// store options in state so that we can update it when it changes
+	const [selectionOptions, setSelectionOptions] = useState([]);
+
+	const [menuIsOpen, setMenuIsOpen] = useState();
+
+	useEffect(() => {
+		const { selection, urlval, rm_suffix, nested = false, entry } = props;
+
+		const fetchData = async () => {
+			if (nested) {
+				if (entry) {
+					const entryValue = sharedData[entry];
+					if (entryValue && entryValue.length > 0) {
+						if (debug)
+							console.log('Selection: entryValue:', entryValue);
+						if (debug)
+							console.log(
+								'Selection: nested url:',
+								selection + entryValue[0],
+								urlval,
+							);
+						try {
+							const response = await simplefetch(
+								selection + entryValue[0],
+								{
+									key: urlval,
+									debug: debug,
+								},
+							);
+							// remove the suffix "_metadata" from the options
+							try {
+								const removed_suffix = response.map((item) =>
+									item.replace(rm_suffix, ''),
+								);
+								// insert the "None" into removed_Suffix
+								removed_suffix.unshift('None');
+								if (debug)
+									console.log(
+										'Removed suffix:',
+										removed_suffix,
+									);
+								setSelectionOptions(removed_suffix);
+							} catch (error) {
+								setSelectionOptions([]);
+							}
+						} catch (error) {
+							console.error('Error fetching options:', error);
+						}
+					}
+				} else
+					console.error(
+						'Error: nested is true but entry is not defined.',
+					);
+			} else {
+				try {
+					const response = await simplefetch(selection, {
+						key: urlval,
+						debug: debug,
+					});
+					// remove the suffix "_metadata" from the options
+					try {
+						const removed_suffix = response.map((item) =>
+							item.replace(rm_suffix, ''),
+						);
+						//console.log("Removed suffix:", removed_suffix);
+						setSelectionOptions(removed_suffix);
+					} catch (error) {
+						setSelectionOptions(response);
+					}
+				} catch (error) {
+					console.error('Error fetching options:', error);
+				}
+			}
+		};
+
+		fetchData();
+	}, [props, setSelectionOptions, sharedData, debug]);
+
+	const handleChange = (selectedOptions) => {
+		if (single) {
+			// If single selection, selectedOptions will be an object
+			setSelected(selectedOptions ? [selectedOptions] : []);
+		} else {
+			// If multi-selection, selectedOptions will be an array
+			setSelected(selectedOptions || []);
+		}
+	};
+
+	const onInputChange = (inputValue, { action, prevInputValue }) => {
+		if (action === 'input-change') return inputValue;
+		if (action === 'menu-close') {
+			if (prevInputValue) setMenuIsOpen(true);
+			else setMenuIsOpen(undefined);
+		}
+		return prevInputValue;
+	};
+
+	// ----------------- Selection bar ------------------------------------------------
+	const { config = {} } = props;
+	const {
+		bar_width = '300px',
+		bar_margin = '0 auto',
+		bar_maxHeight = '300px',
+		menu_maxHeight = '300px',
+		single = false,
+	} = config;
+
+	const renderSelection = () => {
+		const options = selectionOptions.map((item) => ({
+			value: item,
+			label: item,
+		}));
+
+		return (
+			<div className='select-wrapper'>
+				<Select
+					isMulti={!single}
+					options={options}
+					value={selected}
+					onChange={handleChange}
+					onInputChange={onInputChange}
+					menuIsOpen={menuIsOpen}
+					styles={{
+						container: (provided) => ({
+							...provided,
+							width: bar_width,
+							margin: bar_margin,
+							maxHeight: bar_maxHeight,
+						}),
+						valueContainer: (provided) => ({
+							...provided,
+							maxHeight: bar_maxHeight ?? 'auto',
+							overflowY: 'auto',
+						}),
+						menu: (provided) => ({
+							...provided,
+							maxHeight: menu_maxHeight ?? 'auto', // Set the max height as required
+							overflowY: 'auto', // Enable scroll if exceeds max height
+						}),
+					}}
+				/>
+			</div>
+		);
+	};
+
+	// Store value to SharedData
+	const { id, val } = props;
+
+	useEffect(() => {
+		if (val) {
+			setSharedData((prevSharedData) => {
+				const selectedValues = selected
+					? selected.map((option) => option.value)
+					: [];
+				//console.log("Selection: selected:", selectedValues);
+				return { ...prevSharedData, [val]: selectedValues };
+			});
+		}
+	}, [selected, val, setSharedData]);
+
+	return (
+		<div
+			key={id}
+			style={{ ...style, ..._style }}
+			className='selection-box-container'>
+			{renderTitle()}
+			{renderSelection()}
+		</div>
+	);
+}
+
+export default Selection;