visualifyjs 2.5.3-2.dev → 3.0.0

package/src/core/components/ratio.js

@@ -1,80 +1,82 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-30 15:11:35
- * @FilePath     : /visualifyjs/src/core/components/ratio.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useState, useEffect } from 'react';
-import { useAppContext } from '../appContext';
-
-function RatioBox({ props, style }) {
-	const { debug } = props;
-
-	const { style: blockStyle } = props;
-	// if debug is true, then border is red, else no border
-	style = {
-		...style,
-		...blockStyle,
-		border: debug ? '1px solid red' : 'none',
-	};
-
-	const { title } = props;
-	const renderTitle = () => {
-		return title && <h3>{title}</h3>;
-	};
-
-	const { setSharedData } = useAppContext();
-	const { choice = [] } = props;
-
-	// State to keep track of selected choice
-	const [selectedChoice, setSelectedChoice] = useState(
-		choice.length > 0 ? choice[0] : null,
-	);
-
-	// Handler for radio button change
-	const handleRadioChange = (event) => {
-		setSelectedChoice(event.target.value);
-	};
-
-	const {
-		id,
-		val,
-		ratio_style = {
-			margin: 'auto 15px',
-		},
-	} = props;
-
-	// Store the selected choice in shared data whenever it changes
-	useEffect(() => {
-		if (val) {
-			setSharedData((prevSharedData) => {
-				return { ...prevSharedData, [val]: selectedChoice };
-			});
-		}
-	}, [selectedChoice, val, setSharedData]);
-
-	return (
-		<div
-			key={id}
-			style={style}
-			className='ratio-box-container'>
-			{renderTitle()}
-			{choice.map((item, index) => (
-				<label
-					key={index}
-					style={ratio_style}>
-					<input
-						type='radio'
-						value={item}
-						checked={selectedChoice === item}
-						onChange={handleRadioChange}
-					/>
-					{item}
-				</label>
-			))}
-		</div>
-	);
-}
-
-export default RatioBox;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-30 15:11:35
+ * @FilePath     : /visualifyjs/src/core/components/ratio.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useState, useEffect } from 'react';
+import { useAppContext } from '../appContext';
+
+function RatioBox({ props, style }) {
+	const { debug } = props;
+
+	const { style: blockStyle } = props;
+	// if debug is true, then border is red, else no border
+	style = {
+		...style,
+		...blockStyle,
+		border: debug ? '1px solid red' : 'none',
+	};
+
+	const { title } = props;
+	const renderTitle = () => {
+		return title && <h3>{title}</h3>;
+	};
+
+	const { setSharedData } = useAppContext();
+	const { choice = [] } = props;
+
+	// State to keep track of selected choice
+	const [selectedChoice, setSelectedChoice] = useState(
+		choice.length > 0 ? choice[0] : null,
+	);
+
+	// Handler for radio button change
+	const handleRadioChange = (event) => {
+		setSelectedChoice(event.target.value);
+	};
+
+	const {
+		id,
+		val,
+		ratio_style = {
+			margin: 'auto 15px',
+		},
+	} = props;
+
+	// Store the selected choice in shared data whenever it changes
+	useEffect(() => {
+		if (val) {
+			setSharedData((prevSharedData) => {
+				// Skip update if the value is already the same
+				if (prevSharedData[val] === selectedChoice) return prevSharedData;
+				return { ...prevSharedData, [val]: selectedChoice };
+			});
+		}
+	}, [selectedChoice, val, setSharedData]);
+
+	return (
+		<div
+			key={id}
+			style={style}
+			className='ratio-box-container'>
+			{renderTitle()}
+			{choice.map((item, index) => (
+				<label
+					key={index}
+					style={ratio_style}>
+					<input
+						type='radio'
+						value={item}
+						checked={selectedChoice === item}
+						onChange={handleRadioChange}
+					/>
+					{item}
+				</label>
+			))}
+		</div>
+	);
+}
+
+export default RatioBox;

package/src/core/components/scatterL.js

@@ -1,173 +1,206 @@
-/*
- * @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;
+/*
+ * @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);
+
+	// Use refs for sharedData and props to access latest values without depending on them
+	const sharedDataRef = useRef(sharedData);
+	sharedDataRef.current = sharedData;
+	const propsRef = useRef(props);
+	propsRef.current = props;
+
+	// Extract stable dependency keys from props.config.api and colourby
+	// These are the only sharedData keys this component actually reads
+	const apiConfig = props.config?.api;
+	const colourbyKey = props.config?.colourby;
+	const apiVals = apiConfig
+		? Object.values(apiConfig).map((attr) => attr.val).sort().join(',')
+		: '';
+	// Build a serialized snapshot of the specific sharedData values we depend on
+	const relevantKeys = [];
+	if (apiConfig) {
+		Object.values(apiConfig).forEach((attr) => {
+			if (attr.val) relevantKeys.push(attr.val);
+		});
+	}
+	if (colourbyKey) relevantKeys.push(colourbyKey);
+	const sharedDataSnapshot = JSON.stringify(
+		relevantKeys.reduce((acc, key) => {
+			acc[key] = sharedData[key];
+			return acc;
+		}, {}),
+	);
+
+	useEffect(() => {
+		const currentProps = propsRef.current;
+		const currentSharedData = sharedDataRef.current;
+
+		let option = parseConfig(currentProps);
+		//console.log('option: ', option);
+		let fetched_dat = null;
+
+		// Check if the sharedData has changed
+		handleChartForSharedDataChange(
+			chartRef,
+			currentSharedData,
+			previousSharedDataRef,
+			() => {
+				option.xAxis.min = currentProps?.echart?.xAxis?.min;
+				option.xAxis.max = currentProps?.echart?.xAxis?.max;
+				option.yAxis.min = currentProps?.echart?.yAxis?.min;
+				option.yAxis.max = currentProps?.echart?.yAxis?.max;
+			},
+		);
+
+		// Simulate fetching data asynchronously (replace with your data fetching logic)
+		const updatePlot = async () => {
+			try {
+				setLoading({ active: true, message: null });
+				validateConfig(currentProps.config);
+				const myChart = initChart(chartRef, option);
+				if (currentProps.config.simpleload)
+					handleSimplyLoad(currentProps.config.simpleload);
+				else {
+					const ibox = currentProps.config?.ibox ?? {
+						xMin: -9999,
+						yMin: -9999,
+						xMax: 9999,
+						yMax: 9999,
+					};
+					fetched_dat = await handleAPI(
+						currentProps.config,
+						currentSharedData,
+						ibox,
+					);
+					//console.log(fetched_dat, 'fetched_dat');
+				}
+				var { series, legend, visualMap, title } = parseData(
+					fetched_dat,
+					currentProps.config,
+					currentSharedData,
+				);
+				// Chart options
+				option.series = currentProps?.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(
+							currentProps,
+							sharedDataRef.current,
+							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();
+		};
+		// Only re-run when relevant sharedData values actually change (serialized comparison)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [sharedDataSnapshot, apiVals, colourbyKey]);
+
+	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;