visualifyjs 2.5.3-2.dev

package/src/core/widgets/layout/Grid.js

@@ -0,0 +1,31 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-20 22:21:11
+ * @FilePath     : /visualifyjs/src/core/widgets/layout/Grid.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+
+function DynamicGrid({ config = {}, children }) {
+	const {
+		rows = 2,
+		cols = 2,
+		gap = '1px',
+		style = {},
+		debug = false,
+	} = config;
+	// Custom styles for the grid
+	const gridStyles = {
+		display: 'grid',
+		gridTemplateRows: `repeat(${rows}, auto)`,
+		gridTemplateColumns: `repeat(${cols}, 1fr)`,
+		gap: gap,
+		border: debug ? '1px solid red' : 'none',
+		...style,
+	};
+
+	return <div style={gridStyles}>{children}</div>;
+}
+
+export default DynamicGrid;

package/src/core/widgets/layout.js

@@ -0,0 +1,36 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-20 21:48:29
+ * @FilePath     : /visualifyjs/src/core/widgets/layout.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import DynamicGrid from './layout/Grid';
+
+function LayoutParser({ config = {}, children }) {
+	const { type = 'grid', ...rest } = config;
+
+	if (type === 'grid') {
+		return (
+			<>
+				<DynamicGrid config={{ ...rest }}>
+					{React.cloneElement(children, { layout: type })}
+				</DynamicGrid>
+			</>
+		);
+	}
+
+	return (
+		<div>
+			<h1>LayoutParser</h1>
+			<span>
+				We are not support <b>{type}</b> layout type yet
+			</span>
+			<br></br>
+			{children}
+		</div>
+	);
+}
+
+export default LayoutParser;

package/src/core/widgets/mapping.js

@@ -0,0 +1,42 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-21 13:52:36
+ * @FilePath     : /visualifyjs/src/core/widgets/mapping.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+import SearchBar from '../components/searchbar';
+import NaiveHTML from '../components/html';
+import Markdown from '../components/markdown';
+import Browser from '../components/browser';
+import Macaron from '../components/macaron';
+import EChartSwitcher from '../modules/echartswitcher';
+import ScatterL from '../components/scatterL';
+import RatioBox from '../components/ratio';
+import Selection from '../components/selection';
+import Timeline from '../components/timeline';
+import VisiumPlot from '../components/VisiumPlot';
+import RePlotly from '../modules/replotly';
+import List from '../components/list';
+import DotBio from '../components/dotplot';
+
+const widgetMapping = {
+	// Add  components here
+	SearchBar,
+	Echart: EChartSwitcher,
+	HTML: NaiveHTML,
+	Markdown,
+	Browser,
+	Macaron,
+	ScatterL,
+	RatioBox,
+	Selection,
+	Timeline,
+	Visium: VisiumPlot,
+	Plotly: RePlotly,
+	List,
+	DotBio,
+};
+
+export default widgetMapping;

package/src/index.js

@@ -0,0 +1,62 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 15:35:28
+ * @FilePath     : /visualifyjs/src/index.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import './_css/index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import reportWebVitals from './_utils/reportWebVitals';
+import Recharts from './core/recharts';
+import CreateApp from './core/visualify';
+import LiveEditor from './core/liveEditor';
+
+try {
+	if (window.$visualify) {
+		if (process.env.NODE_ENV === 'development') {
+			console.log('window.$visualify', window.$visualify);
+			window.$visualify.Recharts = Recharts;
+			window.$visualify.LiveEditor = LiveEditor;
+		}
+		if (window.$visualify.mode === 'charts') {
+			window.$visualify.Recharts = Recharts;
+			window.$visualify.LiveEditor = LiveEditor;
+		} else if (
+			window.$visualify.mode === 'pages' ||
+			window.$visualify.mode === undefined
+		) {
+			// loads the visualify in pages mode
+			CreateApp(window.$visualify);
+		} else {
+			console.error('mode should be recharts or pages');
+		}
+
+		// If you want to start measuring performance in your app, pass a function
+		// to log results (for example: reportWebVitals(console.log))
+		// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+		reportWebVitals();
+	} else {
+		// If load js before $visualify is set
+		let _visualify;
+		Object.defineProperty(window, '$visualify', {
+			set(config) {
+				// Store the value internally
+				_visualify = config;
+				// Additional code for after $visualify is set
+				if (config.mode === 'charts')
+					throw new Error(
+						'You need to initialize $visualify before using recharts',
+					);
+				// loads the visualify in page mode
+				else if (config.mode === 'pages') CreateApp(window.$visualify);
+				else console.warn(`Unsupported mode: ${config.mode}`);
+			},
+			get() {
+				return _visualify;
+			},
+		});
+	}
+} catch (e) {
+	console.error(e);
+}

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';