visualifyjs 2.5.3-2.dev → 3.0.0

package/src/core/liveEditor.js

@@ -1,44 +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;
+/*
+ * @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;

package/src/core/modules/codeEditorWithPreview.js

@@ -1,104 +1,104 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 22:17:15
- * @FilePath     : /visualifyjs/src/core/modules/codeEditorWithPreview.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useState } from 'react';
-import AceEditor from 'react-ace';
-import EChartSwitcher from './echartswitcher';
-import 'ace-builds/src-noconflict/mode-javascript';
-import 'ace-builds/src-noconflict/theme-monokai';
-
-const CodeEditorWithPreview = ({ config }) => {
-	const supportedThemes = ['', 'monokai'];
-	const supportedMode = ['javascript'];
-
-	const {
-		theme = '',
-		mode = 'javascript',
-		width,
-		height = '400px',
-		title = 'Rechart Preview',
-		editorProps = { $blockScrolling: true },
-	} = config;
-
-	if (!supportedThemes.includes(theme)) {
-		throw new Error(
-			`Theme '${theme}' not supported. Supported themes are: ${supportedThemes.join(
-				', ',
-			)}`,
-		);
-	}
-
-	if (!supportedMode.includes(mode)) {
-		throw new Error(
-			`Mode '${mode}' not supported. Supported modes are: ${supportedMode.join(
-				', ',
-			)}`,
-		);
-	}
-
-	const [code, setCode] = useState(config.code);
-
-	// Function to evaluate the code and return the chart options
-	const getChartOptions = () => {
-		try {
-			// eslint-disable-next-line no-new-func
-			const func = new Function(code);
-			return func()();
-		} catch (error) {
-			console.error('Error evaluating chart options:', error);
-			return {};
-		}
-	};
-
-	const blockStyles = {
-		display: 'flex',
-		justifyContent: 'space-between',
-	};
-	if (width) blockStyles.width = width;
-
-	const editorStyles = {
-		flexGrow: 1,
-		border: '1px solid #ddd',
-		borderRadius: '4px',
-		marginBottom: '10px',
-		width: '50%',
-	};
-
-	const editorTitleStyles = {
-		backgroundColor: '#f4f4f4',
-		padding: '10px',
-		borderBottom: '1px solid #ddd',
-		width: '100%',
-	};
-
-	return (
-		<div style={blockStyles}>
-			<div style={editorStyles}>
-				<div style={editorTitleStyles}>{title}</div>
-				<AceEditor
-					mode={mode}
-					theme={theme}
-					value={code}
-					onChange={setCode}
-					name={title}
-					editorProps={editorProps}
-					width='100%'
-					height={height}
-					setOptions={{
-						wrap: true,
-						useWorker: false,
-					}}
-				/>
-			</div>
-			<div style={{ width: '50%' }}>
-				<EChartSwitcher props={{ config: getChartOptions() }} />
-			</div>
-		</div>
-	);
-};
-
-export default CodeEditorWithPreview;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 22:17:15
+ * @FilePath     : /visualifyjs/src/core/modules/codeEditorWithPreview.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+import EChartSwitcher from './echartswitcher';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+const CodeEditorWithPreview = ({ config }) => {
+	const supportedThemes = ['', 'monokai'];
+	const supportedMode = ['javascript'];
+
+	const {
+		theme = '',
+		mode = 'javascript',
+		width,
+		height = '400px',
+		title = 'Rechart Preview',
+		editorProps = { $blockScrolling: true },
+	} = config;
+
+	if (!supportedThemes.includes(theme)) {
+		throw new Error(
+			`Theme '${theme}' not supported. Supported themes are: ${supportedThemes.join(
+				', ',
+			)}`,
+		);
+	}
+
+	if (!supportedMode.includes(mode)) {
+		throw new Error(
+			`Mode '${mode}' not supported. Supported modes are: ${supportedMode.join(
+				', ',
+			)}`,
+		);
+	}
+
+	const [code, setCode] = useState(config.code);
+
+	// Function to evaluate the code and return the chart options
+	const getChartOptions = () => {
+		try {
+			// eslint-disable-next-line no-new-func
+			const func = new Function(code);
+			return func()();
+		} catch (error) {
+			console.error('Error evaluating chart options:', error);
+			return {};
+		}
+	};
+
+	const blockStyles = {
+		display: 'flex',
+		justifyContent: 'space-between',
+	};
+	if (width) blockStyles.width = width;
+
+	const editorStyles = {
+		flexGrow: 1,
+		border: '1px solid #ddd',
+		borderRadius: '4px',
+		marginBottom: '10px',
+		width: '50%',
+	};
+
+	const editorTitleStyles = {
+		backgroundColor: '#f4f4f4',
+		padding: '10px',
+		borderBottom: '1px solid #ddd',
+		width: '100%',
+	};
+
+	return (
+		<div style={blockStyles}>
+			<div style={editorStyles}>
+				<div style={editorTitleStyles}>{title}</div>
+				<AceEditor
+					mode={mode}
+					theme={theme}
+					value={code}
+					onChange={setCode}
+					name={title}
+					editorProps={editorProps}
+					width='100%'
+					height={height}
+					setOptions={{
+						wrap: true,
+						useWorker: false,
+					}}
+				/>
+			</div>
+			<div style={{ width: '50%' }}>
+				<EChartSwitcher props={{ config: getChartOptions() }} />
+			</div>
+		</div>
+	);
+};
+
+export default CodeEditorWithPreview;

package/src/core/modules/echarts/common.js

@@ -1,20 +1,20 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-01 21:43:02
- * @FilePath     : /visualifyjs/src/core/modules/echarts/common.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-const minimumPreset = {
-	title: {},
-	tooltip: {},
-	legend: {
-		top: 25,
-	},
-	xAxis: {},
-	yAxis: {},
-	series: [],
-	// ... other default settings for charts
-};
-
-export default minimumPreset;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 21:43:02
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/common.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const minimumPreset = {
+	title: {},
+	tooltip: {},
+	legend: {
+		top: 25,
+	},
+	xAxis: {},
+	yAxis: {},
+	series: [],
+	// ... other default settings for charts
+};
+
+export default minimumPreset;

package/src/core/modules/echarts/gl.js

@@ -0,0 +1,228 @@
+/**
+ * ECharts GL Integration Module
+ * Provides lazy loading and WebGL support detection for 3D charts
+ * @module echarts/gl
+ */
+
+import { toast } from 'react-toastify';
+
+/**
+ * Checks if the browser supports WebGL
+ * @returns {boolean} True if WebGL is supported
+ */
+export function isWebGLSupported() {
+	try {
+		const canvas = document.createElement('canvas');
+		const gl =
+			canvas.getContext('webgl2') ||
+			canvas.getContext('webgl') ||
+			canvas.getContext('experimental-webgl');
+		return !!gl;
+	} catch (e) {
+		return false;
+	}
+}
+
+/**
+ * Gets WebGL context information for debugging
+ * @returns {Object|null} WebGL context info or null if not supported
+ */
+export function getWebGLInfo() {
+	try {
+		const canvas = document.createElement('canvas');
+		const gl =
+			canvas.getContext('webgl2') ||
+			canvas.getContext('webgl') ||
+			canvas.getContext('experimental-webgl');
+		if (!gl) return null;
+
+		return {
+			vendor: gl.getParameter(gl.VENDOR),
+			renderer: gl.getParameter(gl.RENDERER),
+			version: gl.getParameter(gl.VERSION),
+			shadingLanguageVersion: gl.getParameter(gl.SHADING_LANGUAGE_VERSION),
+			maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
+			maxViewportDims: gl.getParameter(gl.MAX_VIEWPORT_DIMS),
+		};
+	} catch (e) {
+		return null;
+	}
+}
+
+// Module cache for lazy loading
+let echartsGLModule = null;
+let loadingPromise = null;
+
+/**
+ * Lazy loads ECharts GL module
+ * Only loads when 3D charts are actually rendered
+ * @returns {Promise<Object>} ECharts GL module
+ * @throws {Error} If WebGL is not supported or module fails to load
+ */
+export async function loadEChartsGL() {
+	// Return cached module if available
+	if (echartsGLModule) {
+		return echartsGLModule;
+	}
+
+	// Return existing promise if already loading
+	if (loadingPromise) {
+		return loadingPromise;
+	}
+
+	// Check WebGL support before attempting to load
+	if (!isWebGLSupported()) {
+		const error = new Error(
+			'WebGL is not supported in this browser. 3D charts require WebGL support.',
+		);
+		error.code = 'WEBGL_NOT_SUPPORTED';
+		throw error;
+	}
+
+	// Check if echarts-gl is already loaded globally (e.g., from CDN)
+	if (typeof window !== 'undefined' && window['echarts-gl']) {
+		echartsGLModule = window['echarts-gl'];
+		return Promise.resolve(echartsGLModule);
+	}
+
+	// Lazy load ECharts GL
+	loadingPromise = import('echarts-gl')
+		.then((module) => {
+			echartsGLModule = module;
+			return module;
+		})
+		.catch((error) => {
+			loadingPromise = null;
+			const loadError = new Error(
+				`Failed to load ECharts GL: ${error.message}`,
+			);
+			loadError.code = 'ECHARTS_GL_LOAD_ERROR';
+			loadError.originalError = error;
+			throw loadError;
+		});
+
+	return loadingPromise;
+}
+
+/**
+ * Preloads ECharts GL module in the background
+ * Useful for improving perceived performance when 3D charts are expected
+ */
+export function preloadEChartsGL() {
+	if (!echartsGLModule && !loadingPromise && isWebGLSupported()) {
+		loadEChartsGL().catch(() => {
+			// Silently fail preload - actual error handling happens at render time
+		});
+	}
+}
+
+/**
+ * Gets the current loading state of ECharts GL
+ * @returns {Object} Loading state information
+ */
+export function getLoadingState() {
+	return {
+		isLoaded: !!echartsGLModule,
+		isLoading: !!loadingPromise,
+		isSupported: isWebGLSupported(),
+	};
+}
+
+/**
+ * Displays a user-friendly error message for WebGL/3D chart errors
+ * @param {Error} error - The error object
+ * @param {Object} options - Display options
+ * @param {boolean} options.useToast - Whether to use toast notification (default: true)
+ * @param {string} options.fallbackMessage - Custom fallback message
+ */
+export function display3DError(error, options = {}) {
+	const { useToast = true, fallbackMessage } = options;
+
+	let message =
+		fallbackMessage || 'Unable to display 3D chart. Please try a different browser.';
+
+	if (error.code === 'WEBGL_NOT_SUPPORTED') {
+		message =
+			'Your browser does not support WebGL, which is required for 3D charts. ' +
+			'Please use a modern browser like Chrome, Firefox, Safari, or Edge.';
+	} else if (error.code === 'ECHARTS_GL_LOAD_ERROR') {
+		message =
+			'Failed to load 3D chart library. Please check your internet connection and try again.';
+	}
+
+	if (useToast && typeof toast !== 'undefined') {
+		toast.error(message, {
+			position: 'top-center',
+			autoClose: 5000,
+			hideProgressBar: false,
+			closeOnClick: true,
+			pauseOnHover: true,
+			draggable: true,
+		});
+	}
+
+	return message;
+}
+
+/**
+ * Cleanup function to dispose of WebGL resources
+ * Should be called when 3D chart components unmount
+ * @param {Object} chartInstance - ECharts instance
+ */
+export function cleanupWebGL(chartInstance) {
+	if (!chartInstance) return;
+
+	try {
+		// Remove all event listeners
+		chartInstance.off();
+
+		// Dispose the chart instance
+		if (!chartInstance.isDisposed()) {
+			chartInstance.dispose();
+		}
+	} catch (error) {
+		// Silently handle cleanup errors
+		console.warn('Error during WebGL cleanup:', error);
+	}
+}
+
+/**
+ * Hook for handling WebGL context loss
+ * @param {HTMLCanvasElement} canvas - The canvas element
+ * @param {Function} onRestore - Callback when context is restored
+ * @returns {Function} Cleanup function
+ */
+export function handleWebGLContextLoss(canvas, onRestore) {
+	if (!canvas) return () => {};
+
+	const handleContextLost = (event) => {
+		event.preventDefault();
+		console.warn('WebGL context lost');
+	};
+
+	const handleContextRestored = () => {
+		console.info('WebGL context restored');
+		if (typeof onRestore === 'function') {
+			onRestore();
+		}
+	};
+
+	canvas.addEventListener('webglcontextlost', handleContextLost);
+	canvas.addEventListener('webglcontextrestored', handleContextRestored);
+
+	return () => {
+		canvas.removeEventListener('webglcontextlost', handleContextLost);
+		canvas.removeEventListener('webglcontextrestored', handleContextRestored);
+	};
+}
+
+export default {
+	isWebGLSupported,
+	getWebGLInfo,
+	loadEChartsGL,
+	preloadEChartsGL,
+	getLoadingState,
+	display3DError,
+	cleanupWebGL,
+	handleWebGLContextLoss,
+};

package/src/core/modules/echarts/presetHandler.js

@@ -1,41 +1,41 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-02 21:36:01
- * @FilePath     : /visualifyjs/src/core/modules/echarts/presetHandler.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-// presetHandler.js
-import minimumPreset from './common';
-import mmtrbc from './presets/mmtrbc';
-import esodev_chromium from './presets/esodev.chromium';
-import esodev_codex from './presets/esodev.codex';
-import esodev_visium from './presets/esodev.visium';
-
-// Example embedded presets
-const embeddedPresets = {
-	mmtrbc: mmtrbc,
-	esodev_chromium: esodev_chromium,
-	esodev_codex: esodev_codex,
-	esodev_visium: esodev_visium,
-	// 'presetName': { ...preset data... }
-	// Define embedded presets here
-};
-
-// Function to fetch preset data from a URL
-export const fetchPresetFromURL = async (url) => {
-	try {
-		const response = await fetch(url);
-		const data = await response.json();
-		return data;
-	} catch (error) {
-		console.error('Error fetching preset from URL:', error);
-		return null; // Return null or appropriate error handling
-	}
-};
-
-// Function to get an embedded preset based on a string key
-export const getEmbeddedPreset = (presetKey) => {
-	// Return minimumPreset if preset not found
-	return embeddedPresets[presetKey] || minimumPreset;
-};
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 21:36:01
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/presetHandler.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+// presetHandler.js
+import minimumPreset from './common';
+import mmtrbc from './presets/mmtrbc';
+import esodev_chromium from './presets/esodev.chromium';
+import esodev_codex from './presets/esodev.codex';
+import esodev_visium from './presets/esodev.visium';
+
+// Example embedded presets
+const embeddedPresets = {
+	mmtrbc: mmtrbc,
+	esodev_chromium: esodev_chromium,
+	esodev_codex: esodev_codex,
+	esodev_visium: esodev_visium,
+	// 'presetName': { ...preset data... }
+	// Define embedded presets here
+};
+
+// Function to fetch preset data from a URL
+export const fetchPresetFromURL = async (url) => {
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		console.error('Error fetching preset from URL:', error);
+		return null; // Return null or appropriate error handling
+	}
+};
+
+// Function to get an embedded preset based on a string key
+export const getEmbeddedPreset = (presetKey) => {
+	// Return minimumPreset if preset not found
+	return embeddedPresets[presetKey] || minimumPreset;
+};