visualifyjs 2.5.3-2.dev

package/src/core/modules/echarts/presets/mmtrbc.js

@@ -0,0 +1,186 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-22 22:37:23
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/presets/mmtrbc.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const mmtrbc = {
+	title: {
+		text: 'MmTrBC Preset',
+		textStyle: {
+			fontFamily: 'Arial, sans-serif',
+			fontSize: 24,
+			color: 'black',
+			margin: '0 0 20px 0',
+		},
+		left: 'center',
+		top: 0,
+	},
+	tooltip: {
+		trigger: 'item',
+		axisPointer: {
+			type: 'cross',
+		},
+		formatter: (params) => {
+			let express = params.data.value[2];
+			let round_epxress = express
+				? Math.round(express * 10000) / 10000
+				: 0;
+
+			let round = (num, n = 2) =>
+				Math.round(num * Math.pow(10, n)) / Math.pow(10, n);
+
+			return ` ${params.data.Cell_ID} <br/> 
+					Type: ${params.seriesName} <br/> 
+					UMI: ${params.data.UMI ?? 'not found'} <br/>
+					FMT: ${round(params.data.Frac_MT, 5) ?? 'not found'} <br/>
+					${express !== undefined ? 'Expression: ' + round_epxress : ''} `;
+		},
+	},
+	legend: {
+		top: 30,
+		textStyle: {
+			fontFamily: 'Arial, sans-serif',
+			fontSize: 18,
+		},
+		type: 'scroll',
+		orient: 'horizontal',
+		right: 'center',
+		width: '80%',
+	},
+	xAxis: {
+		name: 'TSNE-2',
+		type: 'value',
+		axisLabel: false,
+		nameGap: 10,
+		nameLocation: 'middle',
+		axisTick: false,
+		splitLine: false,
+		nameTextStyle: {
+			fontSize: '18',
+			fontWeight: 'bold',
+		},
+	},
+	yAxis: {
+		name: 'TSNE-1',
+		type: 'value',
+		axisLabel: false,
+		nameGap: 10,
+		nameLocation: 'middle',
+		axisTick: false,
+		splitLine: false,
+		nameTextStyle: {
+			fontSize: '18',
+			fontWeight: 'bold',
+		},
+	},
+	series: [],
+	grid: {
+		containLabel: true,
+		left: '5%',
+		right: '13%',
+		top: '13%',
+		bottom: '13%',
+	},
+	// ... other default settings for charts
+	toolbox: {
+		feature: {
+			saveAsImage: {
+				show: true,
+				icon: `path://M30 20.75c-0.69 0.001-1.249 0.56-1.25 1.25v6.75h-25.5v-6.75c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 8c0 0.69 0.56 1.25 1.25 1.25h28c0.69-0.001 1.249-0.56 1.25-1.25v-8c-0.001-0.69-0.56-1.249-1.25-1.25h-0zM15.116 24.885c0.012 0.012 0.029 0.016 0.041 0.027 0.103 0.099 0.223 0.18 0.356 0.239l0.008 0.003 0.001 0c0.141 0.060 0.306 0.095 0.478 0.095 0.345 0 0.657-0.139 0.883-0.365l5.001-5c0.226-0.226 0.366-0.539 0.366-0.884 0-0.691-0.56-1.251-1.251-1.251-0.345 0-0.658 0.14-0.884 0.366l-2.865 2.867v-18.982c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 18.981l-2.866-2.866c-0.226-0.226-0.539-0.366-0.884-0.366-0.691 0-1.251 0.56-1.251 1.251 0 0.346 0.14 0.658 0.367 0.885v0z`,
+			},
+		},
+	},
+	dataZoom: [
+		{ type: 'inside', xAxisIndex: 0 },
+		{ type: 'inside', yAxisIndex: 0 },
+		{
+			type: 'slider',
+			xAxisIndex: 0,
+		},
+		{ type: 'slider', yAxisIndex: 0, orient: 'vertical' },
+	],
+	visualMap: {
+		min: 0,
+		max: 8,
+		dimension: 2,
+		orient: 'vertical',
+		top: 'center',
+		right: 35,
+		text: ['log2\n(tpm+1)', ''],
+		textGap: 10,
+		calculable: true,
+		inRange: {
+			color: [
+				'rgb(43, 120, 182)',
+				'rgb(247, 126, 11)',
+				'rgb(59, 160, 30)',
+				'rgb(206, 37, 41)',
+				'rgb(143, 103, 191)',
+				'rgb(134, 86, 74)',
+			],
+		},
+		textStyle: {
+			writingMode: 'vertical-lr',
+		},
+	},
+	visualify: {
+		colors_for_celltype: [
+			{
+				name: 'BC-1',
+				color: 'rgb(43, 120, 182)',
+				symbol: 'circle',
+			},
+			{
+				name: 'BC-2',
+				color: 'rgb(247, 126, 11)',
+				symbol: 'circle',
+			},
+			{
+				name: 'BC-Sec',
+				color: 'rgb(59, 160, 30)',
+				symbol: 'circle',
+			},
+			{
+				name: 'BC-Sq',
+				color: 'rgb(206, 37, 41)',
+				symbol: 'circle',
+			},
+			{
+				name: 'BC-Mes',
+				color: 'rgb(143, 103, 191)',
+				symbol: 'circle',
+			},
+			{
+				name: 'BC-Pro',
+				color: 'rgb(134, 86, 74)',
+				symbol: 'circle',
+			},
+		],
+		mapping: {
+			extra: {
+				UMI: 'N_UMI',
+				N_gene: 'N_gene',
+				Frac_MT: 'Frac_MT',
+				Cell_ID: 'Cell_ID',
+			},
+		},
+		exclude: ['BC-Mes', 'BC-NE', 'BC-Im'],
+		seriesBy: 'Cell_Type',
+		symbolSize: 5,
+		symbol: 'circle',
+		merger: {
+			gene: {
+				item: 'Cell_ID',
+				label: 'Expression',
+				visualMap: true,
+			},
+		},
+		filter: {
+			Expression: '>-1',
+		},
+	},
+};
+
+export default mmtrbc;

package/src/core/modules/echarts.js

@@ -0,0 +1,71 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 14:18:43
+ * @FilePath     : /visualifyjs/src/core/libs/echarts.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useRef, forwardRef } from 'react';
+import ReactEcharts from 'echarts-for-react';
+
+const ReCharts = forwardRef(({ options, style, onEvents = {} }, ref) => {
+	const internalRef = useRef(null);
+
+	// Use the provided ref or the internalRef
+	const chartRef = ref || internalRef;
+
+	useEffect(() => {
+		// Ensure the chart instance is available
+		if (chartRef.current) {
+			const chart = chartRef.current.getEchartsInstance();
+
+			// Set the 'silent' option to suppress warnings
+			chart.setOption({
+				...options,
+				silent: true,
+			});
+
+			// Efficiently update options
+			if (JSON.stringify(options) !== JSON.stringify(chart.getOption())) {
+				chart.clear();
+				chart.setOption(options);
+			}
+
+			// Handle events
+			Object.keys(onEvents).forEach((eventName) => {
+				chart.off(eventName); // Remove old listener
+				chart.on(eventName, onEvents[eventName]); // Attach new listener
+			});
+
+			// Resize observer for responsive charts
+			const resizeObserver = new ResizeObserver(() => {
+				chart.resize();
+			});
+			const parent = chart.getDom().parentElement;
+			if (parent) {
+				resizeObserver.observe(parent);
+			}
+
+			// Cleanup
+			return () => {
+				resizeObserver.disconnect();
+
+				if (!chart.isDisposed()) {
+					chart.off();
+					chart.dispose();
+				}
+			};
+		}
+	}, [options, chartRef, onEvents]); // Include onEvents in the dependency array
+
+	return (
+		<ReactEcharts
+			ref={chartRef}
+			option={options}
+			style={style}
+			onEvents={onEvents}
+		/>
+	);
+});
+
+export default ReCharts;

package/src/core/modules/echartsUtils.js

@@ -0,0 +1,43 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-11 23:09:44
+ * @FilePath     : /visualifyjs/src/core/lib/echartsUtils
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+// echartsUtils.js
+import * as echarts from 'echarts';
+
+export const initChart = (chartRef, chartOption) => {
+	if (!chartRef.current) {
+		throw new Error('Chart container DOM element not available.');
+	}
+
+	let chartInstance = echarts.getInstanceByDom(chartRef.current);
+	if (!chartInstance) {
+		chartInstance = echarts.init(chartRef.current);
+	}
+	chartInstance.setOption(chartOption);
+	return chartInstance;
+};
+
+export const disposeChart = (chartInstance) => {
+	chartInstance && chartInstance.dispose();
+};
+
+export const handleChartForSharedDataChange = (
+	chartRef,
+	sharedData,
+	previousSharedDataRef,
+	extra_Excute_Func = null,
+) => {
+	if (sharedData !== previousSharedDataRef.current) {
+		const chartInstance = echarts.getInstanceByDom(chartRef.current);
+		disposeChart(chartInstance);
+		previousSharedDataRef.current = sharedData;
+		if (extra_Excute_Func) {
+			//console.log('excute func: ', extra_Excute_Func);
+			extra_Excute_Func();
+		}
+	}
+};

package/src/core/modules/echartswitcher.js

@@ -0,0 +1,152 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 14:21:40
+ * @FilePath     : /visualify.js/src/core/modules/echartswitcher.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import ReCharts from './echarts';
+import Loading from '../pages/loading';
+import _ from 'lodash';
+import _parser_gereral from '../parser/echart.general';
+import _parser_data from '../parser/echart.data';
+import _fetch_data, { _process_fetched_data } from '../parser/echart.parser';
+
+import {
+	fetchPresetFromURL,
+	getEmbeddedPreset,
+} from '../modules/echarts/presetHandler';
+import minimumPreset from './echarts/common';
+
+import ErrorBoundary from '../widgets/errorBoundary';
+import { useAppContext } from '../appContext';
+
+import downsampleSeries from '../parser/echart.hilbert';
+
+const EChartSwitcher = ({ props, style }) => {
+	const { config = {}, parser, advanced, style: _style } = props;
+
+	const [loading, setLoading] = useState({
+		active: true,
+		message: null,
+		style: advanced?.loadingStlye ?? {},
+	});
+	// Store the previous sharedData value using a ref
+	const previousSharedDataRef = useRef(null);
+	const chartRef = useRef(null);
+	const [presetData, setPresetData] = useState(null);
+	const [Options, setOptions] = useState({});
+	const [onEvents] = useState({});
+	const { width, height = '400px' } = config;
+	const { sharedData } = useAppContext();
+
+	useEffect(() => {
+		let fetched_data, combinedOptions;
+		const parsedGeneral = _parser_gereral(config, presetData);
+		const parsedData = _parser_data(config, parsedGeneral);
+
+		const loadPreset = async () => {
+			try {
+				if (typeof config.preset === 'string') {
+					if (
+						config.preset.startsWith('http://') ||
+						config.preset.startsWith('https://')
+					) {
+						const presetData = await fetchPresetFromURL(
+							config.preset,
+						);
+						setPresetData(presetData);
+					} else {
+						const embeddedPreset = getEmbeddedPreset(config.preset);
+						setPresetData(embeddedPreset);
+					}
+				} else {
+					setPresetData(minimumPreset);
+				}
+			} catch (error) {
+				console.error('Error loading preset:', error);
+				// Handle error or set to a default value
+				setPresetData(minimumPreset);
+			}
+		};
+
+		const updatePlot = async () => {
+			try {
+				let parsedAPI = parsedData;
+
+				if (parser) {
+					// fetch data from api
+					fetched_data = await _fetch_data(
+						parser,
+						parsedData,
+						sharedData,
+					);
+					parsedAPI = _process_fetched_data(
+						fetched_data,
+						parser,
+						parsedData,
+					);
+				}
+
+				combinedOptions = _.merge(parsedAPI, config.overrides);
+
+				if (advanced?.hilbert)
+					combinedOptions.series = downsampleSeries(
+						combinedOptions.series,
+						advanced.hilbert,
+					);
+
+				console.log('Final Options:', combinedOptions);
+				setOptions(combinedOptions);
+
+				setLoading((prev) => ({
+					...prev,
+					active: false,
+					message: null,
+				}));
+			} catch (error) {
+				setLoading((prev) => ({
+					...prev,
+					active: true,
+					message: error.message,
+				}));
+			}
+		};
+
+		loadPreset();
+
+		updatePlot();
+
+		if (!_.isEqual(sharedData, previousSharedDataRef.current))
+			previousSharedDataRef.current = sharedData;
+	}, [config, parser, advanced, presetData, sharedData]);
+
+	return (
+		<div
+			id={props.id}
+			style={{ ...style, position: 'relative' }}>
+			{loading.active && (
+				<Loading
+					message={loading.message}
+					style={loading.style}
+				/>
+			)}
+			<ErrorBoundary>
+				<ReCharts
+					options={Options}
+					style={{
+						opacity: loading.active ? 0 : 1,
+						width,
+						height,
+						..._style,
+					}}
+					onEvents={onEvents}
+					ref={chartRef}
+				/>
+			</ErrorBoundary>
+		</div>
+	);
+};
+
+export default EChartSwitcher;

package/src/core/modules/replotly/presetHandler.js

@@ -0,0 +1,24 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:54:27
+ * @FilePath     : /visualifyjs/src/core/modules/replotly/presetHandler.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+import minimumPreset from './presets/minimum';
+import mmtrbc_violin from './presets/mmtrbc.violin';
+import mmtrbc_dot from './presets/mmtrbc.dot';
+
+// Example embedded presets
+const embeddedPresets = {
+	mmtrbc_violin,
+	mmtrbc_dot,
+	// 'presetName': { ...preset data... }
+	// Define embedded presets here
+};
+
+export const getPreset = (presetKey) => {
+	// Return minimumPreset if preset not found
+	return embeddedPresets[presetKey] || minimumPreset;
+};

package/src/core/modules/replotly/presets/minimum.js

@@ -0,0 +1,18 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:55:51
+ * @FilePath     : /visualifyjs/src/core/modules/replotly/presets/minimum.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const minimumPreset = {
+	data: [],
+	config: {},
+	layout: {
+		title: 'Minimum Preset of RePlotly',
+		chartWidth: 800,
+		chartHeight: 400,
+	},
+};
+
+export default minimumPreset;

package/src/core/modules/replotly/presets/mmtrbc.dot.js

@@ -0,0 +1,114 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 15:25:40
+ * @FilePath     : /visualifyjs/src/core/modules/replotly/presets/mmtrbc.dot.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+import Plotly from 'react-plotly.js';
+
+const DownloadIcon = {
+	width: 32,
+	height: 40,
+	path: `M30 20.75c-0.69 0.001-1.249 0.56-1.25 1.25v6.75h-25.5v-6.75c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 8c0 0.69 0.56 1.25 1.25 1.25h28c0.69-0.001 1.249-0.56 1.25-1.25v-8c-0.001-0.69-0.56-1.249-1.25-1.25h-0zM15.116 24.885c0.012 0.012 0.029 0.016 0.041 0.027 0.103 0.099 0.223 0.18 0.356 0.239l0.008 0.003 0.001 0c0.141 0.060 0.306 0.095 0.478 0.095 0.345 0 0.657-0.139 0.883-0.365l5.001-5c0.226-0.226 0.366-0.539 0.366-0.884 0-0.691-0.56-1.251-1.251-1.251-0.345 0-0.658 0.14-0.884 0.366l-2.865 2.867v-18.982c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 18.981l-2.866-2.866c-0.226-0.226-0.539-0.366-0.884-0.366-0.691 0-1.251 0.56-1.251 1.251 0 0.346 0.14 0.658 0.367 0.885v0z`,
+};
+
+const mmtrbc_dot = {
+	data: [],
+	config: {
+		displaylogo: false,
+		modeBarButtonsToRemove: [
+			'toImage',
+			'zoom2d',
+			'pan2d',
+			'zoomIn2d',
+			'zoomOut2d',
+			'boxSelect',
+			'select2d',
+			'lasso2d',
+			'resetScale2d',
+			'hoverClosestCartesian',
+			'hoverCompareCartesian',
+			'toggleSpikelines',
+		],
+		modeBarButtonsToAdd: [
+			{
+				name: 'Save As Image',
+				icon: DownloadIcon, // Your custom SVG or base64 encoded image
+				click: function (gd) {
+					Plotly.downloadImage(gd, { format: 'png' });
+				},
+			},
+		],
+	},
+	layout: {
+		title: {
+			text: 'Add genes to update Dot Plot',
+			font: {
+				family: 'Arial, sans-serif',
+				size: 24,
+				color: 'black',
+			},
+		},
+		margin: {
+			l: 110,
+			r: 40,
+			b: 30,
+			t: 80,
+		},
+		legend: {
+			//hide the legend
+			x: 0.5, // left align
+			y: -0.5, // top align
+			xanchor: 'center', // anchor the legend to the left
+			yanchor: 'bottom', // anchor the legend to the top
+			orientation: 'h', // horizontal legend
+			font: {
+				size: 16,
+				family: 'Arial, sans-serif',
+				color: '#6699CC',
+			},
+		},
+		xaxis: {
+			showgrid: false,
+			showline: false,
+			showticklabels: true,
+			linecolor: 'rgb(102, 102, 102)',
+			tickcolor: 'rgb(102, 102, 102)',
+		},
+		yaxis: {
+			showgrid: true,
+			showline: false,
+			showticklabels: true,
+			gridcolor: '#E5ECF6',
+			tickfont: {
+				size: 16,
+				family: 'Arial',
+				color: '#037e8c',
+			},
+		},
+		width: 500,
+		height: 300,
+		hovermode: 'closest',
+	},
+	visualify: {
+		mapping: {
+			extra: {
+				UMI: 'N_UMI',
+				N_gene: 'N_gene',
+				Frac_MT: 'Frac_MT',
+				Cell_ID: 'Cell_ID',
+			},
+		},
+		merger: {
+			gene: {
+				item: 'Cell_ID',
+				label: 'Expression',
+				visualMap: true,
+			},
+		},
+	},
+};
+
+export default mmtrbc_dot;

package/src/core/modules/replotly/presets/mmtrbc.violin.js

@@ -0,0 +1,100 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 15:25:40
+ * @FilePath     : /visualifyjs/src/core/modules/replotly/presets/mmtrbc.violin.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+
+import Plotly from 'react-plotly.js';
+
+const DownloadIcon = {
+	width: 32,
+	height: 40,
+	path: `M30 20.75c-0.69 0.001-1.249 0.56-1.25 1.25v6.75h-25.5v-6.75c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 8c0 0.69 0.56 1.25 1.25 1.25h28c0.69-0.001 1.249-0.56 1.25-1.25v-8c-0.001-0.69-0.56-1.249-1.25-1.25h-0zM15.116 24.885c0.012 0.012 0.029 0.016 0.041 0.027 0.103 0.099 0.223 0.18 0.356 0.239l0.008 0.003 0.001 0c0.141 0.060 0.306 0.095 0.478 0.095 0.345 0 0.657-0.139 0.883-0.365l5.001-5c0.226-0.226 0.366-0.539 0.366-0.884 0-0.691-0.56-1.251-1.251-1.251-0.345 0-0.658 0.14-0.884 0.366l-2.865 2.867v-18.982c0-0.69-0.56-1.25-1.25-1.25s-1.25 0.56-1.25 1.25v0 18.981l-2.866-2.866c-0.226-0.226-0.539-0.366-0.884-0.366-0.691 0-1.251 0.56-1.251 1.251 0 0.346 0.14 0.658 0.367 0.885v0z`,
+};
+
+const mmtrbc_violin = {
+	data: [],
+	config: {
+		displaylogo: false,
+		modeBarButtonsToRemove: [
+			'toImage',
+			'zoom2d',
+			'pan2d',
+			'zoomIn2d',
+			'zoomOut2d',
+			'autoScale2d',
+			//"resetScale2d",
+			'hoverClosestCartesian',
+			'hoverCompareCartesian',
+			'toggleSpikelines',
+		],
+		modeBarButtonsToAdd: [
+			{
+				name: 'Save As Image',
+				icon: DownloadIcon, // Your custom SVG or base64 encoded image
+				click: function (gd) {
+					Plotly.downloadImage(gd, { format: 'png' });
+				},
+			},
+		],
+	},
+	layout: {
+		title: {
+			text: 'Search a gene to update Violin Plot',
+			font: {
+				family: 'Arial, sans-serif',
+				size: 24,
+				color: 'black',
+			},
+		},
+		margin: {
+			l: 10,
+			r: 10,
+			b: 20,
+			t: 60,
+		},
+		legend: {
+			font: {
+				size: 13,
+				family: 'Arial, sans-serif',
+				color: '#6699CC',
+			},
+			x: 0.5, // left align
+			y: -0.3, // top align
+			xanchor: 'center', // anchor the legend to the left
+			yanchor: 'bottom', // anchor the legend to the top
+			orientation: 'h', // horizontal legend
+		},
+		xaxis: {
+			tickvals: [],
+			showgrid: false,
+			showline: true,
+			linecolor: 'rgb(102, 102, 102)',
+			tickcolor: 'rgb(102, 102, 102)',
+			type: 'category',
+		},
+		width: 500,
+		height: 300,
+	},
+	visualify: {
+		mapping: {
+			extra: {
+				UMI: 'N_UMI',
+				N_gene: 'N_gene',
+				Frac_MT: 'Frac_MT',
+				Cell_ID: 'Cell_ID',
+			},
+		},
+		merger: {
+			gene: {
+				item: 'Cell_ID',
+				label: 'Expression',
+				visualMap: true,
+			},
+		},
+	},
+};
+
+export default mmtrbc_violin;