visualifyjs 2.5.3-2.dev

package/src/core/router/jsonRouter.js

@@ -0,0 +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;

package/src/core/themes/modern.js

@@ -0,0 +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;

package/src/core/themes/themeSelector.js

@@ -0,0 +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;

package/src/core/visualify.js

@@ -0,0 +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;

package/src/core/widgets/circularProgress.js

@@ -0,0 +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']),
+};
+
+export default CircularProgress;

package/src/core/widgets/controller.js

@@ -0,0 +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;

package/src/core/widgets/errorBoundary.js

@@ -0,0 +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;

package/src/core/widgets/footer.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+import { Container, Row, Col } from 'react-bootstrap';
+import { ReactComponent as ICON } from '../../_media/icon.svg';
+import pkg from '../../../package.json';
+
+function Vfooter({ config }) {
+	// Download -------------------------------------------------------------------------
+	const { download, download_style } = config;
+
+	const _renderDownloads = () => {
+		if (download === undefined) return null;
+		if (Object.keys(download).length === 0) return null;
+
+		let button_style = {
+			marginRight: '1rem',
+		};
+
+		if (
+			download_style !== undefined &&
+			typeof download_style === 'object'
+		) {
+			button_style = download_style;
+		}
+
+		return (
+			<Row>
+				<Col>
+					<b style={{ marginRight: '1rem' }}>Download: </b>
+					{Object.keys(download).map((key) => (
+						<a
+							key={key}
+							href={download[key]}
+							download>
+							<button style={button_style}>{`${key}`}</button>
+						</a>
+					))}
+				</Col>
+			</Row>
+		);
+	};
+
+	// References -------------------------------------------------------------------------
+	// get references config for rendering references
+	const { references, references_style } = config;
+
+	const _renderRefs = () => {
+		let refs = [];
+		var ref_list_style = references_style;
+		if (references === undefined || references.length === 0) return null;
+		if (references_style === undefined || references_style === '')
+			ref_list_style = 'circle';
+
+		references.map((reference, index) =>
+			refs.push(
+				<li
+					key={index}
+					className={`reference-item ${ref_list_style}`}
+					dangerouslySetInnerHTML={{
+						__html: DOMPurify.sanitize(reference),
+					}}
+				/>,
+			),
+		);
+
+		return (
+			<Row>
+				<Col>
+					<ul className='reference-list'>{refs}</ul>
+				</Col>
+			</Row>
+		);
+	};
+
+	// CopyRight -------------------------------------------------------------------------
+	const { copyright = pkg.name } = config;
+	const _renderCopyRight = () => {
+		return (
+			<Col>
+				<p
+					className='mb-0'
+					dangerouslySetInnerHTML={{
+						__html: DOMPurify.sanitize(
+							`${copyright} Copyright © ${new Date().getFullYear()} powered by ${
+								pkg.name
+							}@<a href="${pkg.homepage}">${pkg.version}</a>`,
+						),
+					}}
+				/>
+			</Col>
+		);
+	};
+
+	// Icons -------------------------------------------------------------------------
+	const { icons } = config;
+
+	const _renderIcons = () => {
+		let Icons = [];
+
+		if (icons === undefined) {
+			Icons.push(
+				<li
+					key='visualify'
+					className='list-inline-item'>
+					<a href='https://visualify.pharmacy.arizona.edu/'>
+						<ICON />
+					</a>
+				</li>,
+			);
+
+			Icons.push(
+				<li
+					key='v_github'
+					className='list-inline-item'>
+					<a href='https://github.com/visualify/visualify.js'>
+						<i className='fa-brands fa-github fa-lg'></i>
+					</a>
+				</li>,
+			);
+		} else {
+			for (const [icon, link] of Object.entries(icons)) {
+				let IconElement = null;
+				if (icon.startsWith('fa')) {
+					IconElement = <i className={`${icon}`} />;
+				} else if (icon.startsWith('<svg')) {
+					IconElement = (
+						<div
+							dangerouslySetInnerHTML={{
+								__html: DOMPurify.sanitize(icon),
+							}}
+						/>
+					);
+				} else {
+					IconElement = (
+						<img
+							src={icon}
+							alt=''
+						/>
+					);
+				}
+				Icons.push(
+					<li
+						key={link}
+						className='list-inline-item'>
+						<a href={link}>{IconElement}</a>
+					</li>,
+				);
+			}
+		}
+
+		return (
+			<Col>
+				<ul
+					id='footer_icon'
+					className='list-inline mb-0'>
+					{Icons}
+				</ul>
+			</Col>
+		);
+	};
+
+	return (
+		<footer className='v-footer'>
+			<Container className='py-4 py-lg-5'>
+				{_renderDownloads()}
+				{_renderRefs()}
+				<hr />
+				<Row className='text-muted d-flex justify-content-between align-items-center pt-3 list-inline mb-0'>
+					{_renderCopyRight()}
+					{_renderIcons()}
+				</Row>
+			</Container>
+		</footer>
+	);
+}
+
+export default Vfooter;

package/src/core/widgets/header.js

@@ -0,0 +1,234 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Container } from 'react-bootstrap';
+import { ReactComponent as Corner } from '../../_media/corner.svg';
+import { useLocation, Link } from 'react-router-dom';
+import { ReactComponent as Logo } from '../../_media/logo.svg';
+
+function Vheader({ config }) {
+	const location = useLocation();
+	const [Navgation, setNavgation] = useState(null);
+	const [activeNav, setActiveNav] = useState('home');
+
+	const {
+		logo = <Logo />,
+		logolink = 'https://www.lgcyaxi.net/visualify',
+		name = 'Visualify',
+		nav = false,
+		alias = {},
+		nav_alignment = 'start',
+		repo,
+	} = config;
+
+	// Function to get the current directory path
+	const getCurrentDirectoryPath = () => {
+		// Extract the path from the hash, removing the leading '#/'
+		const hashPath = window.location.hash.slice(2);
+		const pathSegments = hashPath.split('/');
+		// Remove the last segment (file name or empty string if it ends with '/')
+		pathSegments.pop();
+		// Rejoin the remaining segments to form the directory path
+		let directoryPath = pathSegments.join('/');
+		// Ensure the directory path ends with '/'
+		if (!directoryPath.endsWith('/')) {
+			directoryPath += '/';
+		}
+		return directoryPath;
+	};
+
+	const renderLogo = () => {
+		return (
+			<a
+				className='navbar-brand d-flex align-items-center'
+				href={logolink}
+				target='_blank'
+				rel='noreferrer'>
+				{typeof logo === 'string' ? (
+					<img
+						src={logo}
+						alt='logo'
+						width='65'
+						height='65'
+						className='d-inline-block align-top'
+					/>
+				) : (
+					logo
+				)}
+			</a>
+		);
+	};
+
+	const renderTitle = () => {
+		if (typeof name === 'string') {
+			return <h1 className='rainbow-text'>{name}</h1>;
+		}
+		const {
+			text = 'Visualify',
+			font_weight = 'bold',
+			color = 'rainbow',
+			...rest
+		} = name;
+
+		if (color === 'rainbow') {
+			return (
+				<h1
+					className='rainbow-text'
+					style={{ fontWeight: font_weight }}>
+					{text}
+				</h1>
+			);
+		} else {
+			return (
+				<h1 style={{ fontWeight: font_weight, color: color, ...rest }}>
+					{text}
+				</h1>
+			);
+		}
+	};
+
+	useEffect(() => {
+		const resolveNavUrl = () => {
+			let pathSegments = location.pathname.split('/');
+			//console.log('pathseg:' + pathSegments);
+			pathSegments.pop();
+			let directoryPath = pathSegments.join('/');
+			
+			if (directoryPath === '') directoryPath = window.location.pathname;
+			//console.log('directoryPath:' + directoryPath,'windows.pathname:' + window.location.pathname,);
+			
+			if (!directoryPath.endsWith('/')) directoryPath += '/';
+
+			const fullNavPath = directoryPath + '_nav.json';
+			const aliasPath = alias && alias[fullNavPath];
+
+			return aliasPath ? aliasPath : fullNavPath;
+		};
+
+		if (nav && typeof nav === 'boolean') {
+			const navUrl = resolveNavUrl();
+
+			// Fetch the navigation data only if the URL has changed
+			if (navUrl !== previousNavUrl.current) {
+				fetch(navUrl)
+					.then((res) => res.json())
+					.then((data) => {
+						// Check if the fetched data is different from the current state
+						if (
+							JSON.stringify(data) !== JSON.stringify(Navgation)
+						) {
+							setNavgation(data);
+						}
+					})
+					.catch((err) => {
+						console.error(
+							`Failed to fetch navigation data: ${err}`,
+						);
+						setNavgation(null);
+					});
+
+				// Update the ref with the new URL
+				previousNavUrl.current = navUrl;
+			}
+		} else if (
+			nav &&
+			typeof nav === 'object' &&
+			JSON.stringify(nav) !== JSON.stringify(Navgation)
+		) {
+			setNavgation(nav);
+		} else if (!nav) {
+			setNavgation(null);
+		}
+	}, [nav, alias, Navgation, location.pathname]); // Use location.pathname if only the path is relevant
+
+	// Use a ref to store the previous navigation URL
+	const previousNavUrl = useRef();
+
+	useEffect(() => {
+		// Update the active nav item based on the current location
+		let path = location.pathname === '/' ? '/home' : location.pathname;
+		setActiveNav(path.slice(1));
+	}, [location]);
+
+	const renderNav = () => {
+		if (!Navgation) return <Container />;
+		const currentDirectoryPath = getCurrentDirectoryPath();
+		const navs = Navgation.map((navItem, index) => {
+			let fullPath = `${currentDirectoryPath}${navItem.link}`;
+			if (fullPath.startsWith('/')) {
+				fullPath = fullPath.slice(1);
+			}
+			const isActive = activeNav === fullPath;
+			let navLinkClass = 'nav-link';
+			if (navItem.type === 'primary')
+				navLinkClass = 'btn btn-primary shadow no-border-radius';
+			if (isActive) navLinkClass += ' active';
+			const isExternal = navItem.link.startsWith('http');
+
+			return (
+				<li
+					className='nav-item'
+					key={index}>
+					{isExternal ? (
+						<a
+							className={navLinkClass}
+							href={fullPath}
+							target='_blank'
+							rel='noreferrer'>
+							{navItem.title}
+						</a>
+					) : (
+						<Link
+							className={navLinkClass}
+							to={fullPath}>
+							{navItem.title}
+						</Link>
+					)}
+				</li>
+			);
+		});
+
+		return (
+			<Container>
+				<ul
+					className={`navbar-nav d-flex justify-content-${nav_alignment} mx-auto`}
+					id='navtabs'>
+					{navs}
+				</ul>
+			</Container>
+		);
+	};
+
+	const renderGitHubCorner = () => {
+		if (!repo) return null;
+
+		// Check if it's a full URL or a "username/repo" string
+		const isFullUrl =
+			repo.startsWith('http://') || repo.startsWith('https://');
+		const githubUrl = isFullUrl ? repo : `https://github.com/${repo}`;
+
+		return (
+			<a
+				href={githubUrl}
+				className='github-corner'
+				aria-label='View source on GitHub'
+				target='_blank'
+				rel='noreferrer'>
+				{<Corner />}
+			</a>
+		);
+	};
+
+	return (
+		<header className='v-header'>
+			<nav className='navbar navbar-light navbar-expand-md py-3'>
+				<Container>
+					{renderLogo()}
+					{renderTitle()}
+					{renderNav()}
+				</Container>
+			</nav>
+			{renderGitHubCorner()}
+		</header>
+	);
+}
+
+export default Vheader;