visualifyjs 2.5.3-2.dev → 2.5.3-9-dev

package/src/core/router/alias.js

@@ -1,49 +1,49 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-04 12:47:02
- * @FilePath     : /visualifyjs/src/core/router/alias.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import { Navigate, useLocation } from 'react-router-dom';
-
-const AliasRoute = ({ alias, children }) => {
-	const location = useLocation();
-
-	for (const pattern in alias) {
-		const regex = new RegExp(pattern);
-		if (regex.test(location.pathname)) {
-			const target = alias[pattern];
-
-			// Check if the target is defined and is a string
-			if (typeof target === 'string') {
-				// Check if target is a URL or a path
-				if (
-					target.startsWith('http://') ||
-					target.startsWith('https://')
-				) {
-					window.location.href = target;
-					return null;
-				}
-
-				// Redirect to the matched route
-				const newPath = location.pathname.replace(regex, target);
-				return (
-					<Navigate
-						to={newPath}
-						replace
-					/>
-				);
-			} else {
-				console.error(
-					`Alias target for pattern '${pattern}' is not defined or not a string.`,
-				);
-				continue; // Skip to the next pattern
-			}
-		}
-	}
-
-	return children;
-};
-
-export default AliasRoute;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-04 12:47:02
+ * @FilePath     : /visualifyjs/src/core/router/alias.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import { Navigate, useLocation } from 'react-router-dom';
+
+const AliasRoute = ({ alias, children }) => {
+	const location = useLocation();
+
+	for (const pattern in alias) {
+		const regex = new RegExp(pattern);
+		if (regex.test(location.pathname)) {
+			const target = alias[pattern];
+
+			// Check if the target is defined and is a string
+			if (typeof target === 'string') {
+				// Check if target is a URL or a path
+				if (
+					target.startsWith('http://') ||
+					target.startsWith('https://')
+				) {
+					window.location.href = target;
+					return null;
+				}
+
+				// Redirect to the matched route
+				const newPath = location.pathname.replace(regex, target);
+				return (
+					<Navigate
+						to={newPath}
+						replace
+					/>
+				);
+			} else {
+				console.error(
+					`Alias target for pattern '${pattern}' is not defined or not a string.`,
+				);
+				continue; // Skip to the next pattern
+			}
+		}
+	}
+
+	return children;
+};
+
+export default AliasRoute;

package/src/core/router/jsonRouter.js

@@ -1,31 +1,31 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 21:58:14
- * @FilePath     : /visualifyjs/src/core/router/jsonRouter.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import { HashRouter, Route, Routes } from 'react-router-dom';
-import AliasRoute from './alias';
-
-function JsonRouter({ config, children }) {
-	const { alias } = config;
-
-	return (
-		<HashRouter>
-			<Routes>
-				<Route
-					path='/'
-					element={children}
-				/>
-				<Route
-					path='/*'
-					element={<AliasRoute alias={alias}>{children}</AliasRoute>}
-				/>
-			</Routes>
-		</HashRouter>
-	);
-}
-
-export default JsonRouter;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 21:58:14
+ * @FilePath     : /visualifyjs/src/core/router/jsonRouter.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+import AliasRoute from './alias';
+
+function JsonRouter({ config, children }) {
+	const { alias } = config;
+
+	return (
+		<HashRouter>
+			<Routes>
+				<Route
+					path='/'
+					element={children}
+				/>
+				<Route
+					path='/*'
+					element={<AliasRoute alias={alias}>{children}</AliasRoute>}
+				/>
+			</Routes>
+		</HashRouter>
+	);
+}
+
+export default JsonRouter;

package/src/core/themes/modern.js

@@ -1,32 +1,32 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 22:03:28
- * @FilePath     : /visualifyjs/src/core/themes/modern.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-
-import React from 'react';
-import Vheader from '../widgets/header';
-import Vfooter from '../widgets/footer';
-import { Container } from 'react-bootstrap';
-import JsonPage from '../pages/jsonPage';
-
-import '../../_css/modern.css';
-
-function Modern({ config, children }) {
-	//console.log('Modern config', config);
-	const { homepage = 'home.json' } = config;
-	return (
-		<>
-			<Vheader config={config} />
-			<Container className='text-center'>
-				<JsonPage homepage={homepage} />
-				{children}
-			</Container>
-			<Vfooter config={config} />
-		</>
-	);
-}
-
-export default Modern;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 22:03:28
+ * @FilePath     : /visualifyjs/src/core/themes/modern.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+import React from 'react';
+import Vheader from '../widgets/header';
+import Vfooter from '../widgets/footer';
+import { Container } from 'react-bootstrap';
+import JsonPage from '../pages/jsonPage';
+
+import '../../_css/modern.css';
+
+function Modern({ config, children }) {
+	//console.log('Modern config', config);
+	const { homepage = 'home.json' } = config;
+	return (
+		<>
+			<Vheader config={config} />
+			<Container className='text-center'>
+				<JsonPage homepage={homepage} />
+				{children}
+			</Container>
+			<Vfooter config={config} />
+		</>
+	);
+}
+
+export default Modern;

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,47 @@
-/*
- * @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 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;

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,83 @@
-/*
- * @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 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;

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;