visualifyjs 2.5.3-2.dev

package/src/core/modules/codeEditorWithPreview.js

@@ -0,0 +1,104 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 22:17:15
+ * @FilePath     : /visualifyjs/src/core/modules/codeEditorWithPreview.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+import EChartSwitcher from './echartswitcher';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+
+const CodeEditorWithPreview = ({ config }) => {
+	const supportedThemes = ['', 'monokai'];
+	const supportedMode = ['javascript'];
+
+	const {
+		theme = '',
+		mode = 'javascript',
+		width,
+		height = '400px',
+		title = 'Rechart Preview',
+		editorProps = { $blockScrolling: true },
+	} = config;
+
+	if (!supportedThemes.includes(theme)) {
+		throw new Error(
+			`Theme '${theme}' not supported. Supported themes are: ${supportedThemes.join(
+				', ',
+			)}`,
+		);
+	}
+
+	if (!supportedMode.includes(mode)) {
+		throw new Error(
+			`Mode '${mode}' not supported. Supported modes are: ${supportedMode.join(
+				', ',
+			)}`,
+		);
+	}
+
+	const [code, setCode] = useState(config.code);
+
+	// Function to evaluate the code and return the chart options
+	const getChartOptions = () => {
+		try {
+			// eslint-disable-next-line no-new-func
+			const func = new Function(code);
+			return func()();
+		} catch (error) {
+			console.error('Error evaluating chart options:', error);
+			return {};
+		}
+	};
+
+	const blockStyles = {
+		display: 'flex',
+		justifyContent: 'space-between',
+	};
+	if (width) blockStyles.width = width;
+
+	const editorStyles = {
+		flexGrow: 1,
+		border: '1px solid #ddd',
+		borderRadius: '4px',
+		marginBottom: '10px',
+		width: '50%',
+	};
+
+	const editorTitleStyles = {
+		backgroundColor: '#f4f4f4',
+		padding: '10px',
+		borderBottom: '1px solid #ddd',
+		width: '100%',
+	};
+
+	return (
+		<div style={blockStyles}>
+			<div style={editorStyles}>
+				<div style={editorTitleStyles}>{title}</div>
+				<AceEditor
+					mode={mode}
+					theme={theme}
+					value={code}
+					onChange={setCode}
+					name={title}
+					editorProps={editorProps}
+					width='100%'
+					height={height}
+					setOptions={{
+						wrap: true,
+						useWorker: false,
+					}}
+				/>
+			</div>
+			<div style={{ width: '50%' }}>
+				<EChartSwitcher props={{ config: getChartOptions() }} />
+			</div>
+		</div>
+	);
+};
+
+export default CodeEditorWithPreview;

package/src/core/modules/echarts/common.js

@@ -0,0 +1,20 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-01 21:43:02
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/common.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const minimumPreset = {
+	title: {},
+	tooltip: {},
+	legend: {
+		top: 25,
+	},
+	xAxis: {},
+	yAxis: {},
+	series: [],
+	// ... other default settings for charts
+};
+
+export default minimumPreset;

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

@@ -0,0 +1,41 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-02 21:36:01
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/presetHandler.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+// presetHandler.js
+import minimumPreset from './common';
+import mmtrbc from './presets/mmtrbc';
+import esodev_chromium from './presets/esodev.chromium';
+import esodev_codex from './presets/esodev.codex';
+import esodev_visium from './presets/esodev.visium';
+
+// Example embedded presets
+const embeddedPresets = {
+	mmtrbc: mmtrbc,
+	esodev_chromium: esodev_chromium,
+	esodev_codex: esodev_codex,
+	esodev_visium: esodev_visium,
+	// 'presetName': { ...preset data... }
+	// Define embedded presets here
+};
+
+// Function to fetch preset data from a URL
+export const fetchPresetFromURL = async (url) => {
+	try {
+		const response = await fetch(url);
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		console.error('Error fetching preset from URL:', error);
+		return null; // Return null or appropriate error handling
+	}
+};
+
+// Function to get an embedded preset based on a string key
+export const getEmbeddedPreset = (presetKey) => {
+	// Return minimumPreset if preset not found
+	return embeddedPresets[presetKey] || minimumPreset;
+};

package/src/core/modules/echarts/presets/esodev.chromium.js

@@ -0,0 +1,172 @@
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-22 22:37:23
+ * @FilePath     : /visualifyjs/src/core/modules/echarts/presets/esodev.chromium.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+const esodev_chromium = {
+	title: {
+		textStyle: {
+			fontSize: 20,
+		},
+		left: 'center',
+		top: 0,
+	},
+	animation: false,
+	legend: {
+		textStyle: {
+			fontSize: 18,
+		},
+		orient: 'horizontal',
+		right: 'center', // "top" | "bottom" | "center"
+		itemWidth: 20,
+		width: 600,
+		top: 25,
+	},
+	xAxis: {
+		name: 'UMAP 1',
+		type: 'value',
+		nameLocation: 'middle',
+		nameGap: 10,
+		nameTextStyle: {
+			fontSize: 18, // Set font size
+			fontWeight: 'bold', // Set font weight to bold
+		},
+		axisLine: { show: false },
+		axisTick: { show: false },
+		splitLine: { show: false },
+		axisLabel: { show: false },
+		//min: -20,
+		//max: 20,
+	},
+	yAxis: {
+		name: 'UMAP 2',
+		type: 'value',
+		nameLocation: 'middle',
+		nameGap: 10,
+		nameTextStyle: {
+			fontSize: 18, // Set font size
+			fontWeight: 'bold', // Set font weight to bold
+		},
+		//min: -20,
+		//max: 20,
+		axisLine: { show: false },
+		axisTick: { show: false },
+		splitLine: { show: false },
+		axisLabel: { show: false },
+	},
+	series: [],
+	grid: {
+		top: '20%',
+		bottom: '12%',
+		left: '10%',
+		right: '10%',
+	},
+	// ... 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: [
+		// Inside type for X-axis
+		{
+			type: 'inside',
+			xAxisIndex: 0,
+			filterMode: 'filter',
+		},
+		// Inside type for Y-axis
+		{
+			type: 'inside',
+			yAxisIndex: 0,
+			filterMode: 'filter',
+			orient: 'vertical',
+		},
+	],
+	visualMap: {
+		min: 0,
+		max: 3,
+		dimension: 2,
+		orient: 'vertical',
+		top: 'center',
+		left: 0,
+		text: ['log2\n(tpm+1)', ''],
+		textGap: 10,
+		calculable: true,
+		inRange: {
+			color: ['#808080', '#FFA500', '#FF0000'],
+		},
+		textStyle: {
+			writingMode: 'vertical-lr',
+		},
+	},
+	tooltip: {
+		trigger: 'item',
+		axisPointer: {
+			type: 'cross',
+		},
+		formatter: (params) => {
+			let express = params.data.value[2];
+			let round_epxress = express
+				? Math.round(express * 10000) / 10000
+				: 0;
+			return `
+                    <div style="text-align: center;">
+                        ${params.data.Cell_ID} 
+                        <br/> Type: <strong>${params.data.Cell_Type} </strong>
+                        <br/> Stage: <strong>${params.data.Stage}</strong>
+                        <br/> #UMI: <strong>${params.data.UMI}</strong>
+                        <br/> #Gene: <strong>${params.data.Gene}</strong>
+                        <br/> MT%: <strong>${params.data.MT}</strong>
+                        ${
+							express !== undefined
+								? '<br/> Expression: <strong>' +
+								  round_epxress +
+								  '</strong>'
+								: ''
+						}
+                    </div>
+                `;
+		},
+	},
+	visualify: {
+		mapping: {
+			x: '2D_UMAP_1',
+			y: '2D_UMAP_2',
+			extra: {
+				Stage: 'Stage',
+				UMI: 'n_UMIs',
+				MT: 'percent_MT',
+				Gene: 'n_Genes',
+				Cell_Type: 'Cell_Type',
+				Cell_ID: 'Cell_ID',
+			},
+		},
+		seriesBy: 'Cell_Type',
+		symbolSize: 5,
+		symbol: 'circle',
+		merger: {
+			gene: {
+				item: 'Cell_ID',
+				label: 'Expression',
+				visualMap: true,
+			},
+		},
+		api_mapping: {
+			'ENS (S)': 'ens_iter_2',
+			'IM (S)': 'im_iter_2',
+			'MES (S)': 'mes_iter_2',
+			'SKM (S)': 'skm_iter_2',
+			'ENDO (S)': 'endo_iter_2',
+			'EPI (E)': 'epi_iter_2',
+			Stroma: 'stroma_iter_1',
+			Epithelium: 'epi_iter_1',
+		},
+	},
+};
+
+export default esodev_chromium;

package/src/core/modules/echarts/presets/esodev.codex.js

@@ -0,0 +1,130 @@
+const esodev_codex = {
+	title: {
+		textStyle: {
+			fontSize: 20,
+		},
+		left: 'center',
+		top: 0,
+	},
+	animation: false,
+	legend: {
+		textStyle: {
+			fontSize: 18,
+		},
+		orient: 'horizontal',
+		right: 'center', // "top" | "bottom" | "center"
+		itemWidth: 20,
+		width: 600,
+		top: 25,
+	},
+	xAxis: {
+		show: false,
+	},
+	yAxis: {
+		show: false,
+	},
+	series: [],
+	grid: {
+		top: '15%',
+		bottom: '12%',
+		left: '5%',
+		right: '10%',
+	},
+	// ... 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: [
+		// Inside type for X-axis
+		{
+			type: 'inside',
+			xAxisIndex: 0,
+			filterMode: 'filter',
+		},
+		// Inside type for Y-axis
+		{
+			type: 'inside',
+			yAxisIndex: 0,
+			filterMode: 'filter',
+			orient: 'vertical',
+		},
+		{
+			type: 'slider',
+			xAxisIndex: 0,
+			filterMode: 'filter',
+		},
+		{
+			type: 'slider',
+			yAxisIndex: 0,
+			filterMode: 'filter',
+			orient: 'vertical',
+		},
+	],
+	visualMap: {
+		min: 0,
+		max: 10,
+		dimension: 2,
+		orient: 'vertical',
+		top: 'center',
+		left: 0,
+		text: ['log2\n(tpm+1)', ''],
+		textGap: 10,
+		calculable: true,
+		inRange: {
+			color: ['#808080', '#FFA500', '#FF0000'],
+		},
+		textStyle: {
+			writingMode: 'vertical-lr',
+		},
+	},
+	tooltip: {
+		trigger: 'item',
+		axisPointer: {
+			type: 'cross',
+		},
+		formatter: (params) => {
+            let express = params.data.value[2];
+			let round_epxress = express
+				? Math.round(express * 10000) / 10000
+				: 0;
+			return `
+            <div style="text-align: center;">
+                ${params.data.Cell_ID} 
+                <br/> Type: <strong>${params.data.Celltype} </strong>
+                ${
+					express !== undefined
+						? '<br/> Expression: <strong>' + round_epxress + '</strong>'
+						: ''
+				}
+            </div>
+          `;
+		},
+	},
+	visualify: {
+		mapping: {
+			x: 'X_Coord',
+			y: 'Y_Coord',
+			extra: {
+                Cell_ID: 'Cell_ID',
+				Celltype: 'Cell_Type',
+			},
+		},
+		seriesBy: 'Cell_Type',
+		symbolSize: 5,
+		symbol: 'circle',
+		merger: {
+			gene: {
+				item: 'Cell_ID',
+				label: 'Expression',
+				visualMap: true,
+			},
+		},
+	},
+};
+
+export default esodev_codex;

package/src/core/modules/echarts/presets/esodev.visium.js

@@ -0,0 +1,123 @@
+const esodev_visium = {
+	title: {
+		textStyle: {
+			fontSize: 20,
+		},
+		left: 'center',
+		top: 0,
+	},
+	animation: false,
+	legend: {
+		show: false,
+	},
+	xAxis: {
+		show: false,
+	},
+	yAxis: {
+		show: false,
+	},
+	series: [],
+	grid: {
+		top: '15%',
+		bottom: '12%',
+		left: '5%',
+		right: '10%',
+	},
+	// ... 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: [],
+	visualMap: {
+		min: 0,
+		max: 10,
+		dimension: 2,
+		orient: 'horizontal',
+		top: 'bottom',
+		right: 'center',
+		text: ['log2\n(tpm+1)', ''],
+		textGap: 10,
+		calculable: true,
+		inRange: {
+			color: ['#808080', '#FFA500', '#FF0000'],
+		},
+		textStyle: {
+			writingMode: 'vertical-lr',
+		},
+	},
+	tooltip: {
+		trigger: 'item',
+		axisPointer: {
+			type: 'cross',
+		},
+		formatter: (params) => {
+			let resultHtml = '';
+			for (const [key, value] of Object.entries(params.data)) {
+				if (key === 'Expression') {
+					continue;
+				}
+				if (value > 0.5) {
+					// Only show the cell type with likelihood >= 0.5
+					resultHtml += `<br>${key}: ${value.toFixed(3)}`;
+				}
+			}
+			return `
+                    <div style="text-align: center;">
+                        ${params.name}
+                        <br> Cell2Location Cell Type Likelihood 
+                        <br> (Likelihood >= 0.5)
+                        ${resultHtml}
+                    </div>
+            `;
+		},
+	},
+	visualify: {
+		mapping: {
+			x: 'X_Coord',
+			y: 'Y_Coord',
+			extra: {
+				BC: 'BC',
+				'SB-1': 'SB-1',
+				'SB-2': 'SB-2',
+				'SB-3': 'SB-3',
+				'SB-4': 'SB-4',
+				'SB-5': 'SB-5',
+				'Cil-1': 'Cil-1',
+				'Cil-2': 'Cil-2',
+				'Cy.Epi': 'Cy.Epi',
+				Fib_PG: 'Fib_PG',
+				Fib_1: 'Fib_1',
+				Fib_2: 'Fib_2',
+				Fib_3: 'Fib_3',
+				Fib_4: 'Fib_4',
+				Fib_5: 'Fib_5',
+				MF: 'MF',
+				Fib_ICC: 'Fib_ICC',
+				'Cy.Fib': 'Cy.Fib',
+				ENS_PG: 'ENS_PG',
+				Neu: 'Neu',
+				Glia: 'Glia',
+				'Cy.ENS': 'Cy.ENS',
+				Ven: 'Ven',
+				Art: 'Art',
+				Lym: 'Lym',
+				Peri: 'Peri',
+				'Cy.Peri': 'Cy.Peri',
+				SM: 'SM',
+				'Cy.SM': 'Cy.SM',
+				MS: 'MS',
+				SkM: 'SkM',
+			},
+		},
+		merger: {},
+		symbolSize: 2,
+		symbol: 'circle',
+	},
+};
+
+export default esodev_visium;