visualifyjs 2.5.3 → 3.0.0

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

@@ -1,18 +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;
+/*
+ * @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

@@ -1,114 +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;
+/*
+ * @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

@@ -1,100 +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;
+/*
+ * @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;

package/src/core/modules/replotly.js

@@ -1,71 +1,74 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2024-01-14 14:39:52
- * @FilePath     : /visualifyjs/src/core/modules/replotly.js
- * @Description  :
- * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useEffect, useState } from 'react';
-import Plot from 'react-plotly.js';
-import { getPreset } from './replotly/presetHandler';
-import { useAppContext } from '../appContext';
-import handle_Data, { __process_fetched_data } from '../parser/plotly.data';
-import { handle_violin_plot } from '../parser/plotly.violin';
-
-const RePlotly = ({ props, style }) => {
-	const [data, setData] = useState(props.data ?? []);
-	const [layout, setLayout] = useState(props.layout ?? {});
-	const [config, setConfig] = useState(props.config ?? {});
-	const { sharedData } = useAppContext();
-
-	useEffect(() => {
-		const updatePlot = async () => {
-			const { settings, parser } = props;
-			let preset = getPreset(settings?.preset);
-			if (parser) {
-				try {
-					// fetch data from api
-					const fetched_data = await handle_Data(
-						parser,
-						preset.layout,
-						sharedData,
-					);
-					const processed_data = __process_fetched_data(
-						fetched_data,
-						parser,
-						preset.visualify,
-					);
-
-					if (parser.type === 'violin') {
-						preset.data = handle_violin_plot(processed_data);
-						setData(() => preset.data);
-					}
-				} catch (err) {
-					if (
-						err.message === 'No data fetched from api' &&
-						settings?.ignoreEmptyData
-					) {
-					} else console.log(err.message);
-				}
-			}
-
-			setData((data) => [...preset.data]);
-			setLayout((layout) => ({ ...preset.layout }));
-			setConfig((config) => ({ ...preset.config }));
-		};
-
-		updatePlot();
-	}, [props, sharedData]);
-
-	return (
-		<div style={style}>
-			<Plot
-				data={data}
-				layout={layout}
-				config={config}
-			/>
-		</div>
-	);
-};
-
-export default RePlotly;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2024-01-14 14:39:52
+ * @FilePath     : /visualifyjs/src/core/modules/replotly.js
+ * @Description  :
+ * Copyright (c) 2024 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useState } from 'react';
+import Plot from 'react-plotly.js';
+import { getPreset } from './replotly/presetHandler';
+import { useAppContext } from '../appContext';
+import handle_Data, { __process_fetched_data } from '../parser/plotly.data';
+import { handle_violin_plot } from '../parser/plotly.violin';
+
+const RePlotly = ({ props, style }) => {
+	const [data, setData] = useState(props.data ?? []);
+	const [layout, setLayout] = useState(props.layout ?? {});
+	const [config, setConfig] = useState(props.config ?? {});
+	const { sharedData } = useAppContext();
+
+	useEffect(() => {
+		const updatePlot = async () => {
+			const { settings, parser } = props;
+			let preset = getPreset(settings?.preset);
+
+			if (parser) {
+				try {
+					const fetched_data = await handle_Data(
+						parser,
+						preset.layout,
+						sharedData,
+					);
+					const processed_data = __process_fetched_data(
+						fetched_data,
+						parser,
+						preset.visualify,
+					);
+
+					if (parser.type === 'violin') {
+						preset.data = handle_violin_plot(processed_data);
+					}
+				} catch (err) {
+					if (
+						err.message === 'No data fetched from api' &&
+						settings?.ignoreEmptyData
+					) {
+						// silently ignore empty data when configured
+					} else console.error(err.message);
+				}
+			}
+
+			// Use props.data if provided directly (e.g., from DotBio),
+			// otherwise fall back to preset data
+			const finalData = props.data?.length ? props.data : preset.data;
+			setData([...finalData]);
+			setLayout({ ...preset.layout });
+			setConfig({ ...preset.config });
+		};
+
+		updatePlot();
+	}, [props, sharedData]);
+
+	return (
+		<div style={style}>
+			<Plot
+				data={data}
+				layout={layout}
+				config={config}
+			/>
+		</div>
+	);
+};
+
+export default RePlotly;