visualifyjs 2.5.3 → 3.0.0

package/src/core/themes/themeSelector.js

@@ -1,33 +1,33 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 22:52:11
- * @FilePath     : /visualifyjs/src/core/themes/themeSelector.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import Modern from './modern';
-
-function ThemeSelector({ theme, config, children }) {
-	switch (theme) {
-		case 'modern':
-			return (
-				<Modern
-					config={config}
-					children={children}
-				/>
-			);
-		// ... more cases as needed
-		default:
-			console.warn('Unsupported theme:', theme, 'using default theme');
-			// Fallback to default theme
-			return (
-				<Modern
-					config={config}
-					children={children}
-				/>
-			);
-	}
-}
-
-export default ThemeSelector;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 22:52:11
+ * @FilePath     : /visualifyjs/src/core/themes/themeSelector.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import Modern from './modern';
+
+function ThemeSelector({ theme, config, children }) {
+	switch (theme) {
+		case 'modern':
+			return (
+				<Modern
+					config={config}
+					children={children}
+				/>
+			);
+		// ... more cases as needed
+		default:
+			console.warn('Unsupported theme:', theme, 'using default theme');
+			// Fallback to default theme
+			return (
+				<Modern
+					config={config}
+					children={children}
+				/>
+			);
+	}
+}
+
+export default ThemeSelector;

package/src/core/visualify.js

@@ -1,47 +1,213 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 15:35:28
- * @FilePath     : /visualifyjs/src/core/visualify.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import ThemeSelector from './themes/themeSelector';
-import JsonRouter from './router/jsonRouter';
-import { VisualifyProvider } from './appContext';
-
-function Visualify({ config }) {
-	// global variable
-	const { theme = 'modern' } = config;
-
-	return (
-		<VisualifyProvider>
-			<JsonRouter config={config}>
-				<ThemeSelector
-					theme={theme}
-					config={config}
-				/>
-			</JsonRouter>
-		</VisualifyProvider>
-	);
-}
-
-function CreateApp(config) {
-	if (!config) throw new Error('Missing configuration.');
-	const el = document.querySelector(config.el || '#root');
-	if (!el) throw new Error('el not found. Please check your `el` option.');
-	const app = ReactDOM.createRoot(el);
-
-	// deletion used configuration
-	delete config.el;
-	delete config.mode;
-
-	app.render(
-		<React.StrictMode>
-			<Visualify config={{ ...config }} />
-		</React.StrictMode>,
-	);
-}
-
-export default CreateApp;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 15:35:28
+ * @FilePath     : /visualifyjs/src/core/visualify.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import ThemeSelector from './themes/themeSelector';
+import JsonRouter from './router/jsonRouter';
+import { VisualifyProvider, useAppContext } from './appContext';
+import { initHMR, useHMR } from './hmr-client';
+import { initializeI18n } from '../i18n';
+
+/**
+ * Global app state for HMR preservation
+ * @type {Object|null}
+ */
+let preservedAppState = null;
+
+/**
+ * Visualify root component with HMR support
+ * @param {Object} props - Component props
+ * @param {Object} props.config - Visualify configuration
+ * @param {Object} [props.initialState] - Preserved state from HMR
+ */
+function Visualify({ config, initialState }) {
+	// global variable
+	const { theme = 'modern' } = config;
+	const { setSharedData } = useAppContext();
+	const isFirstRender = useRef(true);
+
+	// Restore preserved state on mount
+	useEffect(() => {
+		if (initialState?.sharedData && isFirstRender.current) {
+			setSharedData(initialState.sharedData);
+		}
+		isFirstRender.current = false;
+	}, [initialState, setSharedData]);
+
+	// Setup HMR integration
+	useHMR({
+		configType: 'main',
+		onUpdate: (update) => {
+			console.log('[Visualify] Received config update:', update.file);
+			// Reload the page to apply new config
+			// In a more advanced implementation, we could hot-swap the config
+			if (update.config) {
+				window.location.reload();
+			}
+		},
+		onError: (error) => {
+			console.error('[Visualify] HMR error:', error.message);
+		},
+		preserveState: () => ({
+			sharedData: preservedAppState?.sharedData,
+		}),
+	});
+
+	return (
+		<JsonRouter config={config}>
+			<ThemeSelector
+				theme={theme}
+				config={config}
+			/>
+		</JsonRouter>
+	);
+}
+
+/**
+ * State preservation wrapper component
+ * @param {Object} props - Component props
+ * @param {Object} props.config - Visualify configuration
+ */
+function VisualifyWithStatePreservation({ config }) {
+	const [currentConfig, setCurrentConfig] = useState(config);
+	const [initialState, setInitialState] = useState(null);
+	const { sharedData } = useAppContext();
+
+	// Preserve state before unloading
+	useEffect(() => {
+		const preserveState = () => {
+			preservedAppState = {
+				sharedData,
+				config: currentConfig,
+				timestamp: Date.now(),
+			};
+		};
+
+		window.addEventListener('beforeunload', preserveState);
+		return () => window.removeEventListener('beforeunload', preserveState);
+	}, [sharedData, currentConfig]);
+
+	// Handle HMR updates
+	useEffect(() => {
+		if (typeof window !== 'undefined' && window.__VISUALIFY_HMR__?.enabled) {
+			const hmrClient = initHMR();
+
+			if (hmrClient) {
+				// Register update handler for main config
+				const unsubscribe = hmrClient.onUpdate('main', (update) => {
+					console.log('[Visualify] Config update received:', update);
+
+					if (update.config) {
+						// Preserve current state
+						preservedAppState = { sharedData };
+
+						// Update config
+						setCurrentConfig(update.config);
+						setInitialState(preservedAppState);
+					}
+				});
+
+				return () => unsubscribe();
+			}
+		}
+	}, [sharedData]);
+
+	return (
+		<Visualify
+			config={currentConfig}
+			initialState={initialState}
+		/>
+	);
+}
+
+/**
+ * Create and render the Visualify application
+ * @param {Object} config - Application configuration
+ */
+function CreateApp(config) {
+	if (!config) throw new Error('Missing configuration.');
+	const el = document.querySelector(config.el || '#root');
+	if (!el) throw new Error('el not found. Please check your `el` option.');
+
+	// Initialize i18n before rendering any components that use useTranslation
+	initializeI18n(config.i18n || {});
+
+	// Store original config for HMR reloads
+	const originalConfig = { ...config };
+
+	// deletion used configuration
+	delete config.el;
+	delete config.mode;
+
+	const app = ReactDOM.createRoot(el);
+
+	// Initialize HMR client if enabled
+	if (typeof window !== 'undefined' && window.__VISUALIFY_HMR__?.enabled) {
+		initHMR();
+	}
+
+	// Render the app — VisualifyProvider must wrap everything that uses useAppContext
+	app.render(
+		<React.StrictMode>
+			<VisualifyProvider>
+				<VisualifyWithStatePreservation config={originalConfig} />
+			</VisualifyProvider>
+		</React.StrictMode>,
+	);
+
+	// Expose reload function for HMR
+	if (typeof window !== 'undefined') {
+		window.__VISUALIFY_RELOAD__ = (newConfig) => {
+			app.render(
+				<React.StrictMode>
+					<VisualifyProvider>
+						<VisualifyWithStatePreservation
+							config={newConfig || originalConfig}
+						/>
+					</VisualifyProvider>
+				</React.StrictMode>,
+			);
+		};
+	}
+}
+
+/**
+ * Reload the application with new configuration (for HMR)
+ * @param {Object} newConfig - New configuration object
+ * @param {Object} [preservedState] - State to preserve during reload
+ */
+export function reloadApp(newConfig, preservedState) {
+	if (typeof window !== 'undefined' && window.__VISUALIFY_RELOAD__) {
+		// Store preserved state globally
+		if (preservedState) {
+			preservedAppState = preservedState;
+		}
+
+		// Trigger reload
+		window.__VISUALIFY_RELOAD__(newConfig);
+	} else {
+		console.warn('[Visualify] Reload function not available');
+	}
+}
+
+/**
+ * Get the current preserved application state
+ * @returns {Object|null} The preserved state
+ */
+export function getPreservedState() {
+	return preservedAppState;
+}
+
+/**
+ * Clear the preserved application state
+ */
+export function clearPreservedState() {
+	preservedAppState = null;
+}
+
+export default CreateApp;

package/src/core/widgets/circularProgress.js

@@ -1,24 +1,24 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-23 13:24:11
- * @FilePath     : /visualifyjs/src/core/widgets/CircularProgress.js
- * @Description  : 
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import '../../_css/circular-progress.css';
-
-function CircularProgress({ color }) {
-	return (
-		<div className='circular-progress'>
-			<div className={`spinner ${color}`} />
-		</div>
-	);
-}
-
-CircularProgress.propTypes = {
-	color: PropTypes.oneOf(['primary', 'secondary']),
-};
-
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 13:24:11
+ * @FilePath     : /visualifyjs/src/core/widgets/CircularProgress.js
+ * @Description  : 
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../../_css/circular-progress.css';
+
+function CircularProgress({ color }) {
+	return (
+		<div className='circular-progress'>
+			<div className={`spinner ${color}`} />
+		</div>
+	);
+}
+
+CircularProgress.propTypes = {
+	color: PropTypes.oneOf(['primary', 'secondary']),
+};
+
 export default CircularProgress;

package/src/core/widgets/controller.js

@@ -1,83 +1,116 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-21 13:07:59
- * @FilePath     : /visualifyjs/src/core/widgets/controller.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import widgetMapping from './mapping';
-
-function Vcontroller({ components = [], layout }) {
-	// ----------------------------------------------------------------------
-	const UUIDs = new Set();
-	function generateUniqueId() {
-		let uniqueId;
-		do {
-			uniqueId = 'xxxx-xxxx-4xxx-yxxx-xxxx-xxxx'.replace(
-				/[xy]/g,
-				function (c) {
-					const r = (Math.random() * 16) | 0;
-					const v = c === 'x' ? r : (r & 0x3) | 0x8;
-					return v.toString(16);
-				},
-			);
-		} while (UUIDs.has(uniqueId));
-		UUIDs.add(uniqueId);
-		return uniqueId;
-	}
-
-	const _components = {};
-	// ----------------------------------------------------------------------
-	// Iterate over the config array and render the components based on their type and position
-	const Allcomponents = components.map((componentConfig, index) => {
-		const {
-			row = 1,
-			col = 1,
-			colspan = 1,
-			rowspan = 1,
-			debug = false,
-		} = componentConfig;
-
-		const componentStyle =
-			layout === 'grid'
-				? {
-						gridColumn: `${col} / span ${colspan}`,
-						gridRow: `${row} / span ${rowspan}`,
-						border: debug ? '1px solid red' : 'none',
-				  }
-				: {};
-
-		const Component = widgetMapping[componentConfig.type];
-
-		// Generate a unique ID for the component using both ID and index
-		const uniqueId = generateUniqueId();
-
-		//console.log(uniqueId);
-
-		if (!Component) {
-			return (
-				<span
-					key={uniqueId}
-					style={componentStyle}>
-					Error: Component{' '}
-					<b style={{ color: 'red' }}>{componentConfig.type}</b> not
-					found.
-				</span>
-			);
-		}
-
-		const _Component = React.cloneElement(<Component key={uniqueId} />, {
-			style: componentStyle,
-			props: componentConfig,
-		});
-
-		_components[uniqueId] = _Component;
-		// Clone the Component element with the necessary styles and props
-		return _Component;
-	});
-
-	return <>{Allcomponents}</>;
-}
-
-export default Vcontroller;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-21 13:07:59
+ * @FilePath     : /visualifyjs/src/core/widgets/controller.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useRef, useEffect } from 'react';
+import widgetMapping from './mapping';
+import { applyA11yStyles } from '../../a11y';
+
+function Vcontroller({ components = [], layout, ariaLabel = 'Dashboard' }) {
+	const containerRef = useRef(null);
+
+	// Apply accessibility styles on mount
+	useEffect(() => {
+		applyA11yStyles();
+	}, []);
+
+	// ----------------------------------------------------------------------
+	// Iterate over the config array and render the components based on their type and position
+	// Use stable keys derived from component id/index to prevent unmount/remount on re-render
+	const Allcomponents = components.map((componentConfig, index) => {
+		const {
+			row = 1,
+			col = 1,
+			colspan = 1,
+			rowspan = 1,
+			debug = false,
+		} = componentConfig;
+
+		// Stable key: prefer component id, fall back to type+index
+		const stableKey = componentConfig.id || `${componentConfig.type}-${index}`;
+
+		const componentStyle =
+			layout === 'grid'
+				? {
+						gridColumn: `${col} / span ${colspan}`,
+						gridRow: `${row} / span ${rowspan}`,
+						border: debug ? '1px solid red' : 'none',
+				  }
+				: {};
+
+		const Component = widgetMapping[componentConfig.type];
+
+		const componentAriaLabel = componentConfig.ariaLabel ||
+			`${componentConfig.type} widget ${index + 1} of ${components.length}`;
+
+		if (!Component) {
+			return (
+				<span
+					key={stableKey}
+					style={componentStyle}
+					role="alert"
+					aria-live="assertive">
+					Error: Component{' '}
+					<b style={{ color: 'red' }}>{componentConfig.type}</b> not
+					found.
+				</span>
+			);
+		}
+
+		return React.cloneElement(<Component key={stableKey} />, {
+			style: componentStyle,
+			props: {
+				...componentConfig,
+				id: componentConfig.id || stableKey,
+			},
+			'aria-label': componentAriaLabel,
+			role: 'region',
+		});
+	});
+
+	return (
+		<div
+			ref={containerRef}
+			className="visualify-controller"
+			role="main"
+			aria-label={ariaLabel}
+			tabIndex={-1}
+			style={{ display: 'contents' }}
+		>
+			{/* Skip link for keyboard navigation */}
+			<a
+				href="#visualify-main-content"
+				className="sr-only sr-only-focusable"
+				style={{
+					position: 'absolute',
+					top: '-40px',
+					left: '0',
+					background: '#000',
+					color: '#fff',
+					padding: '8px 16px',
+					zIndex: 9999,
+					textDecoration: 'none',
+					transition: 'top 0.2s',
+				}}
+				onFocus={(e) => {
+					e.target.style.top = '0';
+				}}
+				onBlur={(e) => {
+					e.target.style.top = '-40px';
+				}}
+			>
+				Skip to main content
+			</a>
+
+			{/* Main content — display:contents makes grid items direct participants */}
+			<div id="visualify-main-content" className="visualify-components-container" style={{ display: 'contents' }}>
+				{Allcomponents}
+			</div>
+		</div>
+	);
+}
+
+export default Vcontroller;

package/src/core/widgets/errorBoundary.js

@@ -1,36 +1,36 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-02 16:34:41
- * @FilePath     : /visualifyjs/src/core/widgets/errorBoundary.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-
-class ErrorBoundary extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = { hasError: false, error: null };
-	}
-
-	static getDerivedStateFromError(error) {
-		// Update state so the next render will show the fallback UI.
-		return { hasError: true, error };
-	}
-
-	componentDidCatch(error, errorInfo) {
-		// You can also log the error to an error reporting service
-		console.error('Caught an error:', error, errorInfo);
-	}
-
-	render() {
-		if (this.state.hasError) {
-			// You can render any custom fallback UI
-			return <h1>Something went wrong: {this.state.error.message}</h1>;
-		}
-
-		return this.props.children;
-	}
-}
-
-export default ErrorBoundary;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 16:34:41
+ * @FilePath     : /visualifyjs/src/core/widgets/errorBoundary.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false, error: null };
+	}
+
+	static getDerivedStateFromError(error) {
+		// Update state so the next render will show the fallback UI.
+		return { hasError: true, error };
+	}
+
+	componentDidCatch(error, errorInfo) {
+		// You can also log the error to an error reporting service
+		console.error('Caught an error:', error, errorInfo);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			// You can render any custom fallback UI
+			return <h1>Something went wrong: {this.state.error.message}</h1>;
+		}
+
+		return this.props.children;
+	}
+}
+
+export default ErrorBoundary;