visualifyjs 2.5.3-2.dev

package/src/core/components/list.js

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { Button, InputGroup, FormControl, ListGroup } from 'react-bootstrap';
+import { useAppContext } from '../appContext';
+import SearchBar from './searchbar';
+
+const List = ({ props, style }) => {
+	const { debug } = props;
+
+	const { style: _style_parsed = {} } = props;
+	const { class: className, ...customStyle } = _style_parsed;
+
+	// if debug is true, then border is red, else no border
+	style = {
+		...style,
+		border: debug ? '1px solid red' : 'none',
+		margin: '0px auto',
+		width: '200px',
+		...customStyle,
+	};
+
+	// Title & Subtitle--------------------------------------------------
+	const { id = 'genelist', title, subtitle } = props;
+	// Render title
+	const renderTitle = () => {
+		return title && <h3>{title}</h3>;
+	};
+
+	const renderSubtitle = () => {
+		return subtitle && <h5>{subtitle}</h5>;
+	};
+	// Search | Typing --------------------------------------------------
+	const { search } = props;
+	const renderSearch = () => {
+		return search && <SearchBar props={search} />;
+	};
+	// Input --------------------------------------------------
+	const { input } = props;
+
+	const [items, setItems] = useState([]);
+	const [inputValue, setInputValue] = useState('');
+
+	const handleInputChange = (event) => {
+		setInputValue(event.target.value);
+	};
+
+	const renderInput = () => {
+		return (
+			input && (
+				<FormControl
+					placeholder={input.placeholder}
+					aria-label={input.ariaLabel}
+					aria-describedby='basic-addon2'
+					value={inputValue}
+					onChange={handleInputChange}
+				/>
+			)
+		);
+	};
+	// Button --------------------------------------------------
+	const { add, clear, remove } = props.btn;
+
+	const { sharedData, setSharedData } = useAppContext();
+	const { addfrom } = add;
+	const val_shared = sharedData[addfrom];
+
+	const handleAddItem = () => {
+		if (!input && !add.addfrom) {
+			alert('Please enable input first');
+		} else if (addfrom && val_shared) {
+			if (items.includes(val_shared)) {
+				alert('Item already exist');
+			} else {
+				setItems([...items, val_shared]);
+				setSharedData({ ...sharedData, [id]: [...items, val_shared] });
+			}
+		} else if (inputValue.trim() !== '') {
+			setItems([...items, inputValue]);
+			setInputValue('');
+		}
+	};
+
+	const handleRemoveItem = (itemIndex) => {
+		setItems(items.filter((_, index) => index !== itemIndex));
+
+		if (addfrom && val_shared) {
+			setSharedData({
+				...sharedData,
+				[id]: items.filter((_, index) => index !== itemIndex),
+			});
+		}
+	};
+
+	const handleClearItems = () => {
+		setItems([]);
+
+		if (addfrom && val_shared) {
+			setSharedData({ ...sharedData, [id]: [] });
+		}
+
+		if (clear.msg) {
+			alert(clear.msg === true ? 'All items cleared' : clear.msg);
+		}
+	};
+
+	const renderAddbtn = () => {
+		return (
+			add &&
+			add.show && (
+				<Button
+					style={add.style}
+					variant='outline-secondary'
+					onClick={handleAddItem}>
+					{add.text}
+				</Button>
+			)
+		);
+	};
+
+	const renderClearbtn = () => {
+		return (
+			clear &&
+			clear.show && (
+				<Button
+					style={clear.style}
+					variant='outline-secondary'
+					onClick={handleClearItems}>
+					{clear.text}
+				</Button>
+			)
+		);
+	};
+
+	const renderRemovebtn = (index) => {
+		return (
+			remove &&
+			remove.show && (
+				<Button
+					variant='outline-danger'
+					size='sm'
+					style={{ ...remove.style, float: 'right' }}
+					onClick={() => handleRemoveItem(index)}>
+					{remove.text ?? 'X'}
+				</Button>
+			)
+		);
+	};
+
+	const { liststyle = { maxHeight: '380px', overflow: 'auto' } } = props;
+
+	return (
+		<div
+			key={id}
+			style={style}
+			className={className}>
+			{renderTitle()}
+			{renderSubtitle()}
+			{renderSearch()}
+			<InputGroup
+				className='mb-3'
+				style={{ justifyContent: 'center' }}>
+				{renderInput()}
+				{renderAddbtn()}
+				{renderClearbtn()}
+			</InputGroup>
+
+			<ListGroup style={liststyle}>
+				{items.map((item, index) => (
+					<ListGroup.Item key={index}>
+						{item}
+						{renderRemovebtn(index)}
+					</ListGroup.Item>
+				))}
+			</ListGroup>
+		</div>
+	);
+};
+
+export default List;

package/src/core/components/macaron.js

@@ -0,0 +1,201 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useAppContext } from '../appContext';
+import ReCharts from '../modules/echarts';
+
+function processData(
+	nodes,
+	selected,
+	_symbolSize,
+	maxValue,
+	inner_color,
+	unclickable,
+) {
+	const { nodes: selectedNodes, category: selectedCategory } = selected;
+
+	return nodes.nodes.map((node) => {
+		const symbolSize =
+			typeof _symbolSize === 'number'
+				? _symbolSize
+				: typeof _symbolSize === 'string'
+				? _symbolSize === 'default'
+					? (6 - node.category) * 6
+					: 10 + (parseFloat(node[_symbolSize]) / maxValue) * 30 ||
+					  (6 - node.category) * 6
+				: (6 - node.category) * 6; // Fallback to default
+
+		const isSelected = selectedNodes.includes(node.name);
+		const isSameCategory = node.category === selectedCategory;
+		const isOriginalState =
+			selectedCategory === null && selectedNodes.length === 0;
+		const isUnclickable =
+			unclickable.includes(node.name) ||
+			unclickable.includes(node.category);
+		const opacity = isUnclickable
+			? 0.8
+			: isOriginalState
+			? 1
+			: isSelected
+			? 1
+			: isSameCategory
+			? 1
+			: 0.2;
+		const color = isUnclickable
+			? 'gray'
+			: isOriginalState
+			? `hsl(${node.category * 110}, 50%, 50%)`
+			: isSelected
+			? inner_color.selected ?? 'red'
+			: isSameCategory
+			? `hsl(${node.category * 100}, 50%, 50%)`
+			: inner_color.unselectable ?? 'grey';
+
+		return {
+			...node,
+			symbolSize,
+			itemStyle: {
+				color,
+				opacity,
+			},
+			emphasis: {
+				focus: 'self',
+				itemStyle: {
+					color,
+					opacity,
+				},
+				label: {
+					position: 'insideTop',
+					show: true, // Show label
+				},
+			},
+		};
+	});
+}
+
+function Macaron({ props, style }) {
+	const { debug, style: _style, className } = props;
+	const { id, title, data } = props;
+
+	const {
+		animation = false,
+		draggable = true,
+		repulsion = 100,
+		edgeLength = 40,
+		height: inner_height = '93%',
+		width: inner_width = '100%',
+		unclickable = [],
+		symbolSize: _symbolSize = 'default',
+		color: inner_color = {
+			selected: 'red',
+			unselectable: 'grey',
+		},
+		singleclick = true,
+	} = props.config;
+
+	const [selected, setSelected] = useState({ nodes: [], category: null });
+	const { val = 'vnode' } = props;
+
+	const inner_style = {
+		border: debug ? '1px solid black' : 'none',
+		height: inner_height,
+		width: inner_width,
+	};
+
+	const maxValue = useMemo(() => {
+		const values = data.nodes.map(
+			(node) => parseFloat(node[_symbolSize]) || 50,
+		);
+		return Math.max(...values);
+	}, [data, _symbolSize]);
+
+	const processedData = useMemo(
+		() =>
+			processData(
+				data,
+				selected,
+				_symbolSize,
+				maxValue,
+				inner_color,
+				unclickable,
+			),
+		[data, selected, _symbolSize, maxValue, inner_color, unclickable],
+	);
+
+	const onChartClick = (params) => {
+		const category = params.data.category;
+		const name = params.data.name;
+		if (
+			params.dataType === 'node' &&
+			!unclickable.includes(category) &&
+			!unclickable.includes(name) &&
+			(selected.category === null || category === selected.category)
+		) {
+			let updatedSelectedNodes = [...selected.nodes];
+			let updatedSelectedCategory = selected.category;
+			if (selected.nodes.includes(name)) {
+				updatedSelectedNodes = updatedSelectedNodes.filter(
+					(nodeName) => nodeName !== name,
+				);
+				if (updatedSelectedNodes.length === 0) {
+					updatedSelectedCategory = null;
+				}
+			} else {
+				if (singleclick) updatedSelectedNodes = [name];
+				else updatedSelectedNodes.push(name);
+				updatedSelectedCategory = category;
+			}
+			setSelected({
+				nodes: updatedSelectedNodes,
+				category: updatedSelectedCategory,
+			});
+		}
+	};
+
+	const { setSharedData } = useAppContext();
+
+	useEffect(() => {
+		if (
+			val &&
+			Array.isArray(selected.nodes) &&
+			selected.nodes.length >= 0
+		) {
+			setSharedData((prevSharedData) => ({
+				...prevSharedData,
+				[val]: selected.nodes,
+			}));
+		}
+	}, [selected, val, setSharedData]);
+
+	return (
+		<div
+			key={id}
+			style={{ ...style, ..._style }}
+			className={className}>
+			{title && <h3>{title}</h3>}
+			<ReCharts
+				options={{
+					series: [
+						{
+							type: 'graph',
+							layout: 'force',
+							animation,
+							draggable,
+							label: {
+								position: 'top',
+								formatter: '{b}',
+								show: true,
+							},
+							data: processedData,
+							categories: data.categories,
+							edges: data.edges,
+							force: { repulsion, edgeLength },
+						},
+					],
+				}}
+				style={inner_style}
+				onEvents={{ click: onChartClick }}
+			/>
+		</div>
+	);
+}
+
+export default Macaron;

package/src/core/components/markdown.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkHtml from 'remark-html';
+
+function Markdown({ props, style }) {
+  const { path } = props;
+  const [markdownContent, setMarkdownContent] = useState('');
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Fetch the Markdown content from the specified path or file
+    axios.get(path).then(
+      (response) => {
+        const markdown = response.data;
+
+        // Create a new unified processor and use remark-parse and remark-html plugins
+        unified()
+          .use(remarkParse)
+          .use(remarkHtml)
+          .process(markdown, (err, file) => {
+            if (err) {
+              console.error('Error processing Markdown:', err);
+              setError('Error processing Markdown');
+            } else {
+              // Set the HTML content to be rendered
+              setMarkdownContent(String(file));
+            }
+          });
+      },
+      (error) => {
+        console.error('Error fetching Markdown:', error);
+        setError('Error fetching Markdown');
+      }
+    );
+  }, [path]);
+
+  if (error) {
+    return (
+      <div className='markdown-error' style={{ ...style }}>
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className='markdown-content'
+      style={{ ...style }}
+      dangerouslySetInnerHTML={{ __html: markdownContent }}
+    />
+  );
+}
+
+export default Markdown;