handleResizeStart(e, handle.position)}
+ />
+ ))}
+
+ );
+};
+
+export default PlanarSliceWindow;
diff --git a/src/components/ResizablePlanarPlayer.js b/src/components/ResizablePlanarPlayer.js
new file mode 100644
index 0000000..b204053
--- /dev/null
+++ b/src/components/ResizablePlanarPlayer.js
@@ -0,0 +1,311 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+ GripHorizontal,
+ ChevronUp,
+ ChevronDown,
+ ArrowLeftCircle,
+ ArrowRightCircle,
+ Play,
+ Pause,
+ StopCircle,
+} from "lucide-react";
+import { Button, Slider, InputNumber, Switch, Card } from "antd";
+
+const ResizablePlanarPlayer = ({
+ currentVolume,
+ cameraMode,
+ updateClipRegion,
+ clipRegion,
+ onSliceChange,
+}) => {
+ const [isMinimized, setIsMinimized] = useState(false);
+ const [position, setPosition] = useState({
+ x: 20,
+ y: window.innerHeight - 400,
+ });
+ const [size, setSize] = useState({ width: 400, height: 300 });
+ const [isDragging, setIsDragging] = useState(false);
+ const [isResizing, setIsResizing] = useState(false);
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentSlice, setCurrentSlice] = useState(0);
+ const [playbackSpeed, setPlaybackSpeed] = useState(1);
+ const [isLooping, setIsLooping] = useState(true);
+ const [totalSlices, setTotalSlices] = useState(100);
+
+ const playerRef = useRef(null);
+ const dragStartRef = useRef({ x: 0, y: 0 });
+ const playbackIntervalRef = useRef(null);
+
+ useEffect(() => {
+ if (currentVolume?.imageInfo) {
+ const dimension =
+ cameraMode === "X" ? "sizeX" : cameraMode === "Y" ? "sizeY" : "sizeZ";
+ setTotalSlices(currentVolume.imageInfo[dimension] || 100);
+ }
+ }, [currentVolume, cameraMode]);
+
+ useEffect(() => {
+ return () => {
+ if (playbackIntervalRef.current) {
+ clearInterval(playbackIntervalRef.current);
+ }
+ };
+ }, []);
+
+ const handleDragStart = (e) => {
+ if (e.target.closest(".resize-handle")) return;
+ setIsDragging(true);
+ dragStartRef.current = {
+ x: e.clientX - position.x,
+ y: e.clientY - position.y,
+ };
+ };
+
+ const handleDrag = (e) => {
+ if (!isDragging) return;
+
+ const newX = Math.max(
+ 0,
+ Math.min(
+ window.innerWidth - size.width,
+ e.clientX - dragStartRef.current.x,
+ ),
+ );
+ const newY = Math.max(
+ 0,
+ Math.min(
+ window.innerHeight - size.height,
+ e.clientY - dragStartRef.current.y,
+ ),
+ );
+
+ setPosition({ x: newX, y: newY });
+ };
+
+ const handleResizeStart = (e) => {
+ e.stopPropagation();
+ setIsResizing(true);
+ dragStartRef.current = {
+ x: e.clientX,
+ y: e.clientY,
+ width: size.width,
+ height: size.height,
+ };
+ };
+
+ const handleResize = (e) => {
+ if (!isResizing) return;
+
+ const minWidth = 300;
+ const minHeight = 200;
+ const maxWidth = window.innerWidth - position.x;
+ const maxHeight = window.innerHeight - position.y;
+
+ const newWidth = Math.max(
+ minWidth,
+ Math.min(
+ maxWidth,
+ dragStartRef.current.width + (e.clientX - dragStartRef.current.x),
+ ),
+ );
+ const newHeight = Math.max(
+ minHeight,
+ Math.min(
+ maxHeight,
+ dragStartRef.current.height + (e.clientY - dragStartRef.current.y),
+ ),
+ );
+
+ setSize({ width: newWidth, height: newHeight });
+ };
+
+ const updateSlice = (newSlice) => {
+ if (!currentVolume) return;
+
+ const axisInfo = {
+ min: cameraMode === "X" ? "xmin" : cameraMode === "Y" ? "ymin" : "zmin",
+ max: cameraMode === "X" ? "xmax" : cameraMode === "Y" ? "ymax" : "zmax",
+ };
+
+ const normalizedPos = newSlice / (totalSlices - 1);
+ const sliceThickness = 0.01;
+
+ const newClipRegion = {
+ ...clipRegion,
+ [axisInfo.min]: Math.max(0, normalizedPos - sliceThickness / 2),
+ [axisInfo.max]: Math.min(1, normalizedPos + sliceThickness / 2),
+ };
+
+ updateClipRegion(newClipRegion);
+ setCurrentSlice(newSlice);
+ onSliceChange?.(newSlice);
+ };
+
+ const togglePlayback = () => {
+ if (isPlaying) {
+ clearInterval(playbackIntervalRef.current);
+ setIsPlaying(false);
+ } else {
+ setIsPlaying(true);
+ playbackIntervalRef.current = setInterval(() => {
+ setCurrentSlice((prev) => {
+ const next = prev + 1;
+ if (next >= totalSlices) {
+ if (isLooping) {
+ updateSlice(0);
+ return 0;
+ } else {
+ clearInterval(playbackIntervalRef.current);
+ setIsPlaying(false);
+ return prev;
+ }
+ }
+ updateSlice(next);
+ return next;
+ });
+ }, 1000 / playbackSpeed);
+ }
+ };
+
+ const stopPlayback = () => {
+ clearInterval(playbackIntervalRef.current);
+ setIsPlaying(false);
+ setCurrentSlice(0);
+ updateSlice(0);
+ };
+
+ return (
+
{
+ setIsDragging(false);
+ setIsResizing(false);
+ }}
+ onMouseLeave={() => {
+ setIsDragging(false);
+ setIsResizing(false);
+ }}
+ >
+
+
+
+ {cameraMode} Plane Control
+
+
+
:
+ }
+ onClick={() => setIsMinimized(!isMinimized)}
+ />
+
+
+
+
+
+
+
}
+ onClick={() => updateSlice(Math.max(0, currentSlice - 1))}
+ disabled={currentSlice === 0}
+ />
+
:
}
+ onClick={togglePlayback}
+ />
+
} onClick={stopPlayback} />
+
}
+ onClick={() =>
+ updateSlice(Math.min(totalSlices - 1, currentSlice + 1))
+ }
+ disabled={currentSlice === totalSlices - 1}
+ />
+
+
+
+
+ Speed (fps):
+
+
+ Loop Playback:
+
+
+
+
+ );
+};
+
+export default ResizablePlanarPlayer;
diff --git a/src/components/SidebarTabs.js b/src/components/SidebarTabs.js
new file mode 100644
index 0000000..03992c5
--- /dev/null
+++ b/src/components/SidebarTabs.js
@@ -0,0 +1,604 @@
+import React, { useState } from 'react';
+import { Layout, Tabs, Collapse, Switch, Slider, InputNumber, Row, Col, Select, Input, Button, Tooltip } from 'antd';
+import {
+ SettingOutlined,
+ FolderOutlined,
+ EyeOutlined,
+ CameraOutlined,
+ ControlOutlined,
+ BgColorsOutlined,
+ ApartmentOutlined,
+ BorderOutlined,
+ FileImageOutlined,
+ BulbOutlined // Changed from LightOutlined
+} from '@ant-design/icons';
+import { PRESET_COLOR_MAP } from './constants';
+
+const { Sider } = Layout;
+const { TabPane } = Tabs;
+const { Panel } = Collapse;
+const { Option } = Select;
+
+export const SidebarTabs = ({
+ settings,
+ updateSetting,
+ channels,
+ updateChannelOptions,
+ clipRegion,
+ updateClipRegion,
+ fileData,
+ handleFileSelect,
+ metadata,
+ lights,
+ updateLights,
+ currentPreset,
+ applyColorPreset
+}) => {
+ const [activeKey, setActiveKey] = useState('settings');
+
+ // Helper function to format color for input
+ const rgbToHex = (r, g, b) => {
+ const toHex = x => ('0' + Math.round(x).toString(16)).slice(-2);
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+ };
+
+ // Helper function to parse hex color
+ const hexToRgb = (hex) => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? [
+ parseInt(result[1], 16),
+ parseInt(result[2], 16),
+ parseInt(result[3], 16)
+ ] : null;
+ };
+
+ return (
+
+
+ {/* Settings Tab */}
+
+
+ {/* Render Settings */}
+
+
+ updateSetting('pathTrace', val)}
+ />
+
+
+
+ updateSetting('density', val)}
+ />
+
+
+
+ updateSetting('brightness', val)}
+ />
+
+
+
+ updateSetting('maskAlpha', val)}
+ />
+
+
+
+
+ {/* Camera Settings */}
+
+
+ updateSetting('cameraMode', val)}
+ style={{ width: '100%' }}
+ >
+ X
+ Y
+ Z
+ 3D
+
+
+
+
+ updateSetting('fov', val)}
+ style={{ width: '100%' }}
+ />
+
+
+
+ updateSetting('focalDistance', val)}
+ style={{ width: '100%' }}
+ />
+
+
+
+ updateSetting('aperture', val)}
+ style={{ width: '100%' }}
+ />
+
+
+
+
+ {/* Display Settings */}
+
+
+ updateSetting('showAxis', val)}
+ />
+
+
+
+ updateSetting('showScaleBar', val)}
+ />
+
+
+
+ updateSetting('showBoundingBox', val)}
+ />
+
+
+
+
+
+
+ {/* Channel Settings */}
+
+
+
+ {PRESET_COLOR_MAP.map(preset => (
+
+ {preset.name}
+
+ ))}
+
+
+
+ {channels.map((channel, index) => (
+
+
{channel.name || `Channel ${index + 1}`}
+
+ updateChannelOptions(index, { enabled: val })}
+ />
+
+
+
+ updateChannelOptions(index, { opacity: val })}
+ />
+
+
+
+
+
+ updateChannelOptions(index, {
+ isosurfaceEnabled: val
+ })}
+ />
+
+
+ {channel.isosurfaceEnabled && (
+ <>
+
+ updateChannelOptions(index, {
+ isovalue: val
+ })}
+ />
+
+
+
+ updateChannelOptions(index, {
+ isosurfaceOpacity: val
+ })}
+ />
+
+
+
+ )}
+
+ ))}
+
+
+ {/* Clipping Settings */}
+
+
+
{axis} Axis Clipping
+ {
+ updateClipRegion({
+ ...clipRegion,
+ [`${axis.toLowerCase()}min`]: min,
+ [`${axis.toLowerCase()}max`]: max
+ });
+ }}
+ />
+
+ ))}
+
+
+ {/* Lighting Settings */}
+
+
+
Sky Light
+ {['Top', 'Middle', 'Bottom'].map((position, index) => (
+
+
{position}
+
+ updateLights('sky', position.toLowerCase(), 'intensity', val)}
+ />
+
+
+
+
+
+ ))}
+
+
Area Light
+
+ updateLights('area', null, 'intensity', val)}
+ />
+
+
+
+
+
+ updateLights('area', null, 'theta', val * (Math.PI / 180))}
+ />
+
+
+
+ updateLights('area', null, 'phi', val * (Math.PI / 180))}
+ />
+
+
+
+
+
+ {/* Metadata Panel */}
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ No volume loaded
+ )}
+
+
+
+
+ {/* Files Tab */}
+
+
+
+ {Object.entries(fileData).map(([category, files]) => (
+
+ handleFileSelect(category, file)}
+ >
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+export default SidebarTabs;
\ No newline at end of file
diff --git a/src/components/ThreePointGammaSlider.js b/src/components/ThreePointGammaSlider.js
new file mode 100644
index 0000000..e6addbe
--- /dev/null
+++ b/src/components/ThreePointGammaSlider.js
@@ -0,0 +1,55 @@
+import React from "react";
+import { Slider } from "antd";
+
+const ThreePointGammaSlider = ({ onChange, value = [0, 128, 255] }) => {
+ const marks = {
+ 0: "Min",
+ 128: "Mid",
+ 255: "Max",
+ };
+
+ return (
+
+
+ );
+};
+
+export default ThreePointGammaSlider;
diff --git a/src/components/TransferFunctionEditor.js b/src/components/TransferFunctionEditor.js
new file mode 100644
index 0000000..3154559
--- /dev/null
+++ b/src/components/TransferFunctionEditor.js
@@ -0,0 +1,572 @@
+// src/components/TransferFunctionEditor.js
+
+import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
+import * as d3 from 'd3';
+import { Lut } from "@aics/volume-viewer";
+
+const MARGIN = {
+ top: 30,
+ right: 10,
+ bottom: 35,
+ left: 55
+};
+
+const TransferFunctionEditor = ({
+ channelIndex,
+ histogram,
+ onLutUpdate,
+ width = 380,
+ height = 220,
+ initialControlPoints,
+ useAdvancedMode = false,
+ channelColor = [255, 255, 255],
+ rampRange: externalRampRange,
+ onRampRangeChange,
+ onControlPointsChange
+}) => {
+ const svgRef = useRef(null);
+ const [controlPoints, setControlPoints] = useState(initialControlPoints || [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ]);
+ const [internalRampRange, setInternalRampRange] = useState(externalRampRange || [0, 255]);
+ const [selectedPoint, setSelectedPoint] = useState(null);
+ const [dragging, setDragging] = useState(false);
+
+ const innerWidth = width - MARGIN.left - MARGIN.right;
+ const innerHeight = height - MARGIN.top - MARGIN.bottom;
+
+ // Scale functions
+ const xScale = useMemo(() =>
+ d3.scaleLinear()
+ .domain([0, 255])
+ .range([0, innerWidth])
+ .nice(),
+ [innerWidth]
+ );
+
+ const yScale = useMemo(() =>
+ d3.scaleLinear()
+ .domain([-0.05, 1.05])
+ .range([innerHeight, 0]),
+ [innerHeight]
+ );
+
+ // Histogram y-scale with log transform
+ const histogramYScale = useMemo(() => {
+ if (!histogram) return null;
+
+ let maxValue = 0;
+ for (let i = 0; i < histogram.getNumBins(); i++) {
+ maxValue = Math.max(maxValue, histogram.getBin(i));
+ }
+
+ return d3.scaleLog()
+ .domain([1, maxValue])
+ .range([innerHeight, 0])
+ .nice();
+ }, [histogram, innerHeight]);
+
+ // Create gradient definition
+ const createGradientDef = useCallback((points) => {
+ const range = points[points.length - 1].x - points[0].x;
+ return points.map((cp, i) => {
+ const offset = `${((cp.x - points[0].x) / range) * 100}%`;
+ const opacity = Math.min(cp.opacity, 0.9);
+ return
;
+ });
+ }, []);
+
+ // Sync with external changes
+ useEffect(() => {
+ if (externalRampRange) {
+ setInternalRampRange(externalRampRange);
+ }
+ }, [externalRampRange]);
+
+ useEffect(() => {
+ if (initialControlPoints) {
+ setControlPoints(initialControlPoints);
+ }
+ }, [initialControlPoints]);
+
+ // Draw histogram
+ const drawHistogram = useCallback(() => {
+ if (!histogram || !svgRef.current || !histogramYScale) return;
+
+ const binData = Array.from({length: histogram.getNumBins()}, (_, i) => ({
+ bin: i,
+ value: histogram.getBin(i)
+ }));
+
+ const svg = d3.select(svgRef.current);
+ const g = svg.select('.histogram-group');
+
+ const barWidth = Math.max(1, (innerWidth / histogram.getNumBins()) - 1);
+
+ const bars = g.selectAll('.histogram-bar')
+ .data(binData);
+
+ bars.enter()
+ .append('rect')
+ .attr('class', 'histogram-bar')
+ .merge(bars)
+ .attr('x', d => xScale(d.bin))
+ .attr('y', d => histogramYScale(Math.max(1, d.value)))
+ .attr('width', barWidth)
+ .attr('height', d => innerHeight - histogramYScale(Math.max(1, d.value)))
+ .attr('fill', '#666')
+ .attr('opacity', 0.5);
+
+ bars.exit().remove();
+ }, [histogram, innerWidth, xScale, histogramYScale, innerHeight]);
+
+ // Update transfer function visualization
+ const updateVisualization = useCallback(() => {
+ if (!svgRef.current) return;
+
+ const svg = d3.select(svgRef.current);
+ const controlGroup = svg.select('.control-points-group');
+
+ // Clear existing elements
+ controlGroup.selectAll('*').remove();
+
+ // Add grid lines
+ controlGroup.append('g')
+ .attr('class', 'grid-lines')
+ .selectAll('line')
+ .data(yScale.ticks(5))
+ .enter()
+ .append('line')
+ .attr('x1', 0)
+ .attr('x2', innerWidth)
+ .attr('y1', d => yScale(d))
+ .attr('y2', d => yScale(d))
+ .attr('stroke', '#ddd')
+ .attr('stroke-dasharray', '2,2');
+
+ // Create gradient definition
+ const gradientId = `tf-gradient-${channelIndex}`;
+ const defs = svg.selectAll('defs').data([null]).join('defs');
+
+ if (useAdvancedMode) {
+ defs.html(`
+
+ ${createGradientDef(controlPoints).map(stop =>
+ `
+ `);
+
+ // Draw filled area with gradient
+ const area = d3.area()
+ .x(d => xScale(d.x))
+ .y0(innerHeight)
+ .y1(d => yScale(d.opacity))
+ .curve(d3.curveLinear);
+
+ controlGroup.append('path')
+ .attr('class', 'gradient-area')
+ .attr('d', area(controlPoints))
+ .attr('fill', `url(#${gradientId})`)
+ .attr('opacity', 0.85);
+
+ // Draw control point line
+ const line = d3.line()
+ .x(d => xScale(d.x))
+ .y(d => yScale(d.opacity))
+ .curve(d3.curveLinear);
+
+ controlGroup.append('path')
+ .datum(controlPoints)
+ .attr('class', 'control-line')
+ .attr('fill', 'none')
+ .attr('stroke', `rgb(${channelColor.join(',')})`)
+ .attr('stroke-width', 2.5)
+ .attr('d', line);
+
+ // Draw control points
+ controlGroup.selectAll('.control-point')
+ .data(controlPoints)
+ .enter()
+ .append('circle')
+ .attr('class', 'control-point')
+ .attr('cx', d => xScale(d.x))
+ .attr('cy', d => yScale(d.opacity))
+ .attr('r', 6)
+ .attr('fill', '#fff')
+ .attr('stroke', `rgb(${channelColor.join(',')})`)
+ .attr('stroke-width', 2);
+ } else {
+ // Basic mode visualization
+ const rampPoints = [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: internalRampRange[0], opacity: 0, color: channelColor },
+ { x: internalRampRange[1], opacity: 1, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ];
+
+ defs.html(`
+
+ ${createGradientDef(rampPoints).map(stop =>
+ `
+ `);
+
+ // Draw vertical guidelines
+ controlGroup.selectAll('.ramp-guideline')
+ .data(internalRampRange)
+ .enter()
+ .append('line')
+ .attr('class', 'ramp-guideline')
+ .attr('x1', d => xScale(d))
+ .attr('x2', d => xScale(d))
+ .attr('y1', 0)
+ .attr('y2', innerHeight)
+ .attr('stroke', '#666')
+ .attr('stroke-width', 1)
+ .attr('stroke-dasharray', '4,4');
+
+ // Draw filled area with gradient
+ const area = d3.area()
+ .x(d => xScale(d.x))
+ .y0(innerHeight)
+ .y1(d => yScale(d.opacity))
+ .curve(d3.curveLinear);
+
+ controlGroup.append('path')
+ .attr('class', 'gradient-area')
+ .attr('d', area(rampPoints))
+ .attr('fill', `url(#${gradientId})`)
+ .attr('opacity', 0.85);
+
+ // Draw ramp line
+ const line = d3.line()
+ .x(d => xScale(d.x))
+ .y(d => yScale(d.opacity))
+ .curve(d3.curveLinear);
+
+ // Draw ramp handles
+ controlGroup.selectAll('.ramp-handle')
+ .data(internalRampRange)
+ .enter()
+ .append('rect')
+ .attr('class', 'ramp-handle')
+ .attr('x', d => xScale(d) - 6)
+ .attr('y', (_, i) => yScale(i) - 6)
+ .attr('width', 12)
+ .attr('height', 12)
+ .attr('fill', '#fff')
+ .attr('stroke', `rgb(${channelColor.join(',')})`)
+ .attr('stroke-width', 2);
+ }
+ }, [controlPoints, internalRampRange, useAdvancedMode, xScale, yScale, channelColor, channelIndex, createGradientDef, innerHeight, innerWidth]);
+
+ // Update LUT
+ const updateLut = useCallback(() => {
+ const lut = new Lut();
+ if (useAdvancedMode) {
+ lut.createFromControlPoints(controlPoints);
+ } else {
+ lut.createFromMinMax(internalRampRange[0], internalRampRange[1]);
+ }
+ onLutUpdate(lut, channelIndex);
+ }, [useAdvancedMode, controlPoints, internalRampRange, channelIndex, onLutUpdate]);
+
+ // Mouse event handlers
+ const handleMouseDown = useCallback((event) => {
+ const point = d3.pointer(event);
+ const x = xScale.invert(point[0] - MARGIN.left);
+ const y = yScale.invert(point[1] - MARGIN.top);
+
+ if (useAdvancedMode) {
+ if (y < -0.05 || y > 1.05 || x < 0 || x > 255) return;
+
+ // Check if clicked near existing point
+ const existingPointIndex = controlPoints.findIndex(p =>
+ Math.abs(xScale(p.x) - (point[0] - MARGIN.left)) < 6 &&
+ Math.abs(yScale(p.opacity) - (point[1] - MARGIN.top)) < 6
+ );
+
+ if (existingPointIndex >= 0) {
+ setSelectedPoint(existingPointIndex);
+ } else {
+ const newPoint = {
+ x: Math.max(0, Math.min(255, x)),
+ opacity: Math.max(0, Math.min(1, y)),
+ color: channelColor
+ };
+ const newPoints = [...controlPoints, newPoint].sort((a, b) => a.x - b.x);
+ setControlPoints(newPoints);
+ setSelectedPoint(newPoints.findIndex(p => p === newPoint));
+ onControlPointsChange?.(newPoints);
+ }
+ } else {
+ const pointIndex = point[0] - MARGIN.left < innerWidth / 2 ? 0 : 1;
+ setSelectedPoint(pointIndex);
+ }
+ setDragging(true);
+ }, [useAdvancedMode, controlPoints, xScale, yScale, channelColor, onControlPointsChange, innerWidth]);
+
+ const handleMouseMove = useCallback((event) => {
+ if (!dragging || selectedPoint === null) return;
+
+ const point = d3.pointer(event);
+ const x = Math.min(255, Math.max(0, xScale.invert(point[0] - MARGIN.left)));
+ const y = Math.min(1, Math.max(0, yScale.invert(point[1] - MARGIN.top)));
+
+ if (useAdvancedMode) {
+ const newPoints = [...controlPoints];
+ newPoints[selectedPoint] = {
+ ...newPoints[selectedPoint],
+ x,
+ opacity: y
+ };
+ const sortedPoints = newPoints.sort((a, b) => a.x - b.x);
+ setControlPoints(sortedPoints);
+ onControlPointsChange?.(sortedPoints);
+ updateLut();
+ } else {
+ const newRange = [...internalRampRange];
+ newRange[selectedPoint] = x;
+ if (selectedPoint === 0) {
+ newRange[0] = Math.min(newRange[0], newRange[1] - 1);
+ } else {
+ newRange[1] = Math.max(newRange[1], newRange[0] + 1);
+ }
+ setInternalRampRange(newRange);
+ onRampRangeChange?.(newRange);
+ updateLut();
+ }
+ }, [dragging, selectedPoint, xScale, yScale, useAdvancedMode, controlPoints, internalRampRange, onControlPointsChange, onRampRangeChange, updateLut]);
+
+ const handleMouseUp = useCallback(() => {
+ if (dragging) {
+ updateLut();
+ }
+ setDragging(false);
+ setSelectedPoint(null);
+ }, [dragging, updateLut]);
+
+ // Initialize and set up event listeners
+ useEffect(() => {
+ if (!svgRef.current) return;
+
+ const svg = d3.select(svgRef.current);
+ svg.selectAll('*').remove();
+
+ // Title
+ svg.append('text')
+ .attr('class', 'graph-title')
+ .attr('x', width / 2)
+ .attr('y', MARGIN.top / 2)
+ .attr('text-anchor', 'middle')
+ .attr('dominant-baseline', 'middle')
+ .style('font-size', '14px')
+ .style('font-weight', '500')
+ .text('Intensity-to-Visibility Mapping');
+
+ // Create main container groups
+ const container = svg.append('g')
+ .attr('transform', `translate(${MARGIN.left},${MARGIN.top})`);
+
+ container.append('g')
+ .attr('class', 'histogram-group');
+
+ container.append('g')
+ .attr('class', 'control-points-group');
+
+ // Add axes
+ const xAxis = d3.axisBottom(xScale)
+ .tickValues([0, 50, 100, 150, 200, 255])
+ .tickFormat(d3.format('d'));
+
+ const yAxis = d3.axisLeft(yScale)
+ .ticks(5)
+ .tickFormat(d3.format('.2f'));
+
+ container.append('g')
+ .attr('class', 'x-axis')
+ .attr('transform', `translate(0,${innerHeight})`)
+ .call(xAxis);
+
+ container.append('g')
+ .attr('class', 'y-axis')
+ .call(yAxis);
+
+
+ // Draw initial state
+ drawHistogram();
+ updateVisualization();
+
+ // Event listeners
+ const svgElement = svg.node();
+ svgElement.addEventListener('mousedown', handleMouseDown);
+ svgElement.addEventListener('mousemove', handleMouseMove);
+ svgElement.addEventListener('mouseup', handleMouseUp);
+ svgElement.addEventListener('mouseleave', handleMouseUp);
+
+ return () => {
+ svgElement.removeEventListener('mousedown', handleMouseDown);
+ svgElement.removeEventListener('mousemove', handleMouseMove);
+ svgElement.removeEventListener('mouseup', handleMouseUp);
+ svgElement.removeEventListener('mouseleave', handleMouseUp);
+ };
+ }, [width, height, innerHeight, innerWidth, xScale, yScale, drawHistogram, updateVisualization, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+ return (
+
+
+
+ {!useAdvancedMode && (
+
+ )}
+
+
+
+ );
+};
+
+export default TransferFunctionEditor;
diff --git a/src/components/VolumeViewer.js b/src/components/VolumeViewer.js
new file mode 100644
index 0000000..f01d13b
--- /dev/null
+++ b/src/components/VolumeViewer.js
@@ -0,0 +1,2444 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import {
+ LoadSpec,
+ View3d,
+ VolumeFileFormat,
+ RENDERMODE_PATHTRACE,
+ RENDERMODE_RAYMARCH,
+ VolumeMaker,
+ Light,
+ AREA_LIGHT,
+ SKY_LIGHT,
+ Lut,
+} from "@aics/volume-viewer";
+import * as THREE from "three";
+import {
+ loaderContext,
+ PREFETCH_DISTANCE,
+ MAX_PREFETCH_CHUNKS,
+ myState,
+} from "./appConfig";
+import { useConstructor } from "./useConstructor";
+import {
+ Layout,
+ Tabs,
+ Collapse,
+ Switch,
+ Slider,
+ InputNumber,
+ Row,
+ Col,
+ Button,
+ Select,
+ Input,
+ Spin,
+ Tooltip,
+} from "antd";
+import {
+ Settings,
+ Files,
+ Info,
+ Sun,
+ Camera,
+ Eye,
+ Sliders,
+ Box,
+ Move3d,
+ Palette,
+ Scissors,
+ Maximize2,
+ Image,
+ Lightbulb,
+ Wand2,
+} from "lucide-react";
+import axios from "axios";
+import { API_URL } from "../config"; // Importing API_URL from your config
+import {
+ ALPHA_MASK_SLIDER_3D_DEFAULT,
+ BRIGHTNESS_SLIDER_LEVEL_DEFAULT,
+ CELL_SEGMENTATION_CHANNEL_NAME,
+ DENSITY_SLIDER_LEVEL_DEFAULT,
+ ISOSURFACE_OPACITY_SLIDER_MAX,
+ LEVELS_SLIDER_DEFAULT,
+ LUT_MAX_PERCENTILE,
+ LUT_MIN_PERCENTILE,
+ PRESET_COLORS_0,
+ PRESET_COLOR_MAP,
+ VIEWER_3D_SETTING,
+} from "./constants";
+import PlanarSlicePlayer from "./PlanarSlicePlayer";
+import FilesList from "./FilesList";
+import ThreePointGammaSlider from "./ThreePointGammaSlider";
+import ClipRegionSlider from "./ClipRegionSlider";
+import TransferFunctionEditor from "./TransferFunctionEditor";
+// Utility function to concatenate arrays
+const concatenateArrays = (arrays) => {
+ const totalLength = arrays.reduce((acc, arr) => acc + arr.length, 0);
+ const result = new Uint8Array(totalLength);
+ let offset = 0;
+ for (const arr of arrays) {
+ result.set(arr, offset);
+ offset += arr.length;
+ }
+ return result;
+};
+
+const { Sider, Content } = Layout;
+const { TabPane } = Tabs;
+const { Vector3 } = THREE;
+
+const VolumeViewer = () => {
+ const viewerRef = useRef(null);
+ const volumeRef = useRef(null);
+ const view3D = useConstructor(
+ () => new View3d({ parentElement: viewerRef.current }),
+ );
+ const loadContext = useConstructor(() => loaderContext);
+
+ const [loader, setLoader] = useState(null);
+ const [fileData, setFileData] = useState({});
+ const [selectedBodyPart, setSelectedBodyPart] = useState(null);
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [currentVolume, setCurrentVolume] = useState(null);
+ const [density, setDensity] = useState(myState.density);
+ const [exposure, setExposure] = useState(myState.exposure);
+ const [lights, setLights] = useState([
+ new Light(SKY_LIGHT),
+ new Light(AREA_LIGHT),
+ ]);
+ const [isPT, setIsPT] = useState(myState.isPT);
+ const [channels, setChannels] = useState([]);
+ const [cameraMode, setCameraMode] = useState("3D");
+ const [isTurntable, setIsTurntable] = useState(false);
+ const [showAxis, setShowAxis] = useState(false);
+ const [showBoundingBox, setShowBoundingBox] = useState(false);
+ const [showScaleBar, setShowScaleBar] = useState(true);
+ const [backgroundColor, setBackgroundColor] = useState(
+ myState.backgroundColor,
+ );
+ const [boundingBoxColor, setBoundingBoxColor] = useState(
+ myState.boundingBoxColor,
+ );
+ const [flipX, setFlipX] = useState(1);
+ const [flipY, setFlipY] = useState(1);
+ const [flipZ, setFlipZ] = useState(1);
+ const [gamma, setGamma] = useState([0, 0.5, 1]);
+ const [clipRegion, setClipRegion] = useState({
+ xmin: myState.xmin,
+ xmax: myState.xmax,
+ ymin: myState.ymin,
+ ymax: myState.ymax,
+ zmin: myState.zmin,
+ zmax: myState.zmax,
+ });
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentFrame, setCurrentFrame] = useState(0);
+ const [totalFrames, setTotalFrames] = useState(0);
+ const [timerId, setTimerId] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [maskAlpha, setMaskAlpha] = useState(myState.maskAlpha);
+ const [primaryRay, setPrimaryRay] = useState(myState.primaryRay);
+ const [secondaryRay, setSecondaryRay] = useState(myState.secondaryRay);
+ const [fov, setFov] = useState(myState.fov);
+ const [focalDistance, setFocalDistance] = useState(myState.focal_distance);
+ const [aperture, setAperture] = useState(myState.aperture);
+ const [samplingRate, setSamplingRate] = useState(myState.samplingRate);
+
+ const [skyTopIntensity, setSkyTopIntensity] = useState(
+ myState.skyTopIntensity,
+ );
+ const [skyMidIntensity, setSkyMidIntensity] = useState(
+ myState.skyMidIntensity,
+ );
+ const [skyBotIntensity, setSkyBotIntensity] = useState(
+ myState.skyBotIntensity,
+ );
+ const [skyTopColor, setSkyTopColor] = useState(myState.skyTopColor);
+ const [skyMidColor, setSkyMidColor] = useState(myState.skyMidColor);
+ const [skyBotColor, setSkyBotColor] = useState(myState.skyBotColor);
+ const [lightColor, setLightColor] = useState(myState.lightColor);
+ const [lightIntensity, setLightIntensity] = useState(myState.lightIntensity);
+ const [lightTheta, setLightTheta] = useState(myState.lightTheta);
+ const [lightPhi, setLightPhi] = useState(myState.lightPhi);
+ const [currentPreset, setCurrentPreset] = useState(0); // Default preset
+ const [settings, setSettings] = useState({
+ maskAlpha: ALPHA_MASK_SLIDER_3D_DEFAULT[0], // 50
+ brightness: BRIGHTNESS_SLIDER_LEVEL_DEFAULT[0], // 70
+ density: DENSITY_SLIDER_LEVEL_DEFAULT[0], // 50
+ levels: LEVELS_SLIDER_DEFAULT, // [35.0, 140.0, 255.0]
+ autoRotate: false,
+ pathTrace: false,
+ renderMode: RENDERMODE_RAYMARCH,
+ colorizeEnabled: false,
+ colorizeAlpha: 1.0,
+ selectedColorPalette: 0,
+ axisClip: { x: [0, 1], y: [0, 1], z: [0, 1] },
+ });
+
+ // Add new state for persisting view settings
+ const [persistentSettings, setPersistentSettings] = useState({
+ mode: "3D", // Default to 3D mode
+ channelSettings: {}, // Store channel-specific settings
+ density: 50,
+ brightness: 70,
+ maskAlpha: 50,
+ primaryRay: 1,
+ secondaryRay: 1,
+ clipRegion: {
+ xmin: 0,
+ xmax: 1,
+ ymin: 0,
+ ymax: 1,
+ zmin: 0,
+ zmax: 1,
+ },
+ });
+
+ const [isoSurfaceSettings, setIsoSurfaceSettings] = useState({
+ isosurfaceOpacityMax: ISOSURFACE_OPACITY_SLIDER_MAX,
+ defaultIsovalue: 128,
+ defaultOpacity: 1.0,
+ });
+ const [hasScrolledOnce, setHasScrolledOnce] = useState(false);
+ const [originalScrollPosition, setOriginalScrollPosition] = useState(0);
+
+ const densitySliderToView3D = (density) => density / 50.0;
+
+ const onChannelDataArrived = (volume, channelIndex) => {
+ if (volume !== volumeRef.current) return;
+
+ const histogram = volume.getHistogram(channelIndex);
+ if (!histogram) return;
+
+ // Find percentile values
+ const hmin = histogram.findBinOfPercentile(LUT_MIN_PERCENTILE);
+ const hmax = histogram.findBinOfPercentile(LUT_MAX_PERCENTILE);
+
+ // Create LUT using the Lut class
+ const lut = new Lut();
+ const lutData = lut.createFromMinMax(hmin, hmax);
+
+ // Set the LUT for the channel
+ volume.setLut(channelIndex, lutData);
+
+ view3D.onVolumeData(volume, [channelIndex]);
+
+ if (channels[channelIndex]) {
+ view3D.setVolumeChannelEnabled(
+ volume,
+ channelIndex,
+ channels[channelIndex].enabled,
+ );
+ view3D.setVolumeChannelOptions(volume, channelIndex, {
+ color: channels[channelIndex].color,
+ opacity: 1.0,
+ brightness: 1.2,
+ contrast: 1.1,
+ });
+ }
+
+ view3D.updateActiveChannels(volume);
+ view3D.updateLuts(volume);
+
+ if (volume.isLoaded()) {
+ // console.log("Volume " + volume.name + " is loaded");
+ }
+ view3D.redraw();
+ };
+
+ // Modify your onVolumeCreated function
+ const onVolumeCreated = (volume) => {
+ if (!volume || !volume.imageInfo) {
+ // console.error("Invalid volume data");
+ return;
+ }
+
+ // console.log("Volume created with info:", volume.imageInfo);
+
+ volumeRef.current = volume;
+ view3D.removeAllVolumes();
+
+ // Log the dimensions specifically
+ // console.log("Dimensions:", {
+ // sizeX: volume.imageInfo.sizeX,
+ // sizeY: volume.imageInfo.sizeY,
+ // sizeZ: volume.imageInfo.sizeZ,
+ // sizeC: volume.imageInfo.sizeC,
+ // });
+
+ // Initialize channels with persisted settings if available
+ const channelNames = volume.imageInfo.channelNames || [];
+ const newChannels = channelNames.map((name, index) => {
+ const persistedChannel = persistentSettings.channelSettings[index] || {};
+ const defaultColor = PRESET_COLORS_0[index % PRESET_COLORS_0.length];
+
+ return {
+ name,
+ enabled: persistedChannel.enabled ?? index < 3,
+ color: persistedChannel.color || defaultColor,
+ isosurfaceEnabled: persistedChannel.isosurfaceEnabled ?? false,
+ isovalue: persistedChannel.isovalue ?? 128,
+ opacity: persistedChannel.opacity ?? 1.0,
+ lut: ["p50", "p98"],
+ };
+ });
+
+ // Add volume with persisted settings
+ view3D.addVolume(volume, {
+ channels: newChannels.map((ch) => ({
+ enabled: ch.enabled,
+ color: ch.color,
+ isosurfaceEnabled: ch.isosurfaceEnabled,
+ isovalue: ch.isovalue,
+ isosurfaceOpacity: ch.opacity,
+ })),
+ });
+
+ // Apply persisted view mode and settings
+ setCameraMode(persistentSettings.mode);
+ view3D.setCameraMode(persistentSettings.mode);
+
+ // Apply other persisted settings
+ updateSetting("density", persistentSettings.density);
+ updateSetting("brightness", persistentSettings.brightness);
+ updateSetting("maskAlpha", persistentSettings.maskAlpha);
+ setPrimaryRay(persistentSettings.primaryRay);
+ setSecondaryRay(persistentSettings.secondaryRay);
+ setClipRegion(persistentSettings.clipRegion);
+
+ // 4. Apply initial volume settings
+ // Mask alpha
+ const alphaValue = 1 - settings.maskAlpha / 100;
+ view3D.updateMaskAlpha(volume, alphaValue);
+
+ // Brightness
+ const brightnessValue = settings.brightness / 100;
+ view3D.updateExposure(brightnessValue);
+
+ // Density
+ const densityValue = settings.density / 100;
+ view3D.updateDensity(volume, densityValue);
+
+ // Gamma levels
+ const [min, mid, max] = settings.levels.map((v) => v / 255);
+ const diff = max - min;
+ const x = (mid - min) / diff;
+ const scale = 4 * x * x;
+ view3D.setGamma(volume, min, scale, max);
+
+ channelNames.forEach((_, index) => {
+ if (volume.getHistogram) {
+ const histogram = volume.getHistogram(index);
+ if (histogram) {
+ // Find percentile values
+ const hmin = histogram.findBinOfPercentile(LUT_MIN_PERCENTILE);
+ const hmax = histogram.findBinOfPercentile(LUT_MAX_PERCENTILE);
+
+ // Create LUT using the Lut class
+ const lut = new Lut();
+ const lutData = lut.createFromMinMax(hmin, hmax);
+
+ // Set the LUT for the channel
+ volume.setLut(index, lutData);
+
+ // Save control points if needed
+ const controlPoints = [
+ { x: 0, opacity: 0, color: newChannels[index].color },
+ { x: hmin, opacity: 0.1, color: newChannels[index].color },
+ {
+ x: (hmin + hmax) / 2,
+ opacity: 0.5,
+ color: newChannels[index].color,
+ },
+ { x: hmax, opacity: 1.0, color: newChannels[index].color },
+ { x: 255, opacity: 1.0, color: newChannels[index].color },
+ ];
+
+ newChannels[index].controlPoints = controlPoints;
+ }
+ }
+ });
+
+ // Initialize masks and LUTs
+ const segIndex = channelNames.findIndex(
+ (name) => name === CELL_SEGMENTATION_CHANNEL_NAME,
+ );
+ if (segIndex !== -1) {
+ view3D.setVolumeChannelAsMask(volume, segIndex);
+ }
+
+ view3D.setVolumeRenderMode(
+ settings.pathTrace ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH,
+ );
+ view3D.updateActiveChannels(volume);
+ view3D.updateLuts(volume);
+
+ setChannels(newChannels);
+ setCurrentVolume(volume);
+ view3D.redraw();
+ };
+
+ const loadVolume = async (loadSpec, loader) => {
+ const volume = await loader.createVolume(loadSpec, onChannelDataArrived);
+ // console.log("Loaded volume metadata:", volume.imageInfo);
+ onVolumeCreated(volume);
+
+ // console.log(volume.imageInfo, volume.imageInfo.times);
+ // Set total frames based on the volume's metadata (assuming 'times' represents the number of frames)
+ setTotalFrames(volume.imageInfo.times || 1);
+ await loader.loadVolumeData(volume);
+ };
+
+ const loadVolumeFromServer = async (url) => {
+ setIsLoading(true);
+ try {
+ const loadSpec = new LoadSpec();
+ const isZarr = url.endsWith(".zarr");
+ const volumeFileType = isZarr
+ ? VolumeFileFormat.ZARR
+ : url.match(/\.(tiff?|ome\.tiff?)$/i)
+ ? VolumeFileFormat.TIFF
+ : null;
+
+ if (!volumeFileType) {
+ throw new Error("Unsupported file format");
+ }
+
+ const loader = await loadContext.createLoader(url, {
+ fileType: volumeFileType,
+ fetchOptions: {
+ maxPrefetchDistance: PREFETCH_DISTANCE,
+ maxPrefetchChunks: MAX_PREFETCH_CHUNKS,
+ },
+ });
+
+ setLoader(loader);
+ await loadVolume(loadSpec, loader);
+ } catch (error) {
+ // console.error("Error loading volume:", error);
+ // You might want to show an error message to the user here
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const createTestVolume = () => {
+ const sizeX = 64;
+ const sizeY = 64;
+ const sizeZ = 64;
+ const imgData = {
+ name: "AICS-10_5_5",
+ sizeX,
+ sizeY,
+ sizeZ,
+ sizeC: 3,
+ physicalPixelSize: [1, 1, 1],
+ spatialUnit: "",
+ channelNames: ["DRAQ5", "EGFP", "SEG_Memb"],
+ };
+
+ const channelVolumes = [
+ VolumeMaker.createSphere(sizeX, sizeY, sizeZ, 24),
+ VolumeMaker.createTorus(sizeX, sizeY, sizeZ, 24, 8),
+ VolumeMaker.createCone(sizeX, sizeY, sizeZ, 24, 24),
+ ];
+
+ const alldata = concatenateArrays(channelVolumes);
+ return {
+ metadata: imgData,
+ data: {
+ dtype: "uint8",
+ shape: [channelVolumes.length, sizeZ, sizeY, sizeX],
+ buffer: new DataView(alldata.buffer),
+ },
+ };
+ };
+
+ const fetchFiles = async () => {
+ try {
+ const response = await axios.get(`${API_URL}/files`);
+ setFileData(response.data);
+ } catch (error) {
+ console.error("Error fetching files:", error);
+ }
+ };
+
+ const handleFileSelect = async (category, fileName) => {
+ setSelectedBodyPart(category);
+ setSelectedFile(fileName);
+
+ const fileUrl = `${API_URL}/${category}/${fileName}`;
+ // console.log("Loading file:", fileUrl);
+
+ await loadVolumeFromServer(fileUrl);
+ };
+
+ useEffect(() => {
+ fetchFiles();
+ }, []);
+
+ useEffect(() => {
+ if (viewerRef.current) {
+ const container = viewerRef.current;
+ container.appendChild(view3D.getDOMElement());
+
+ const handleResize = () => view3D.resize();
+ window.addEventListener("resize", handleResize);
+
+ view3D.resize();
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ if (view3D.getDOMElement().parentNode) {
+ view3D.getDOMElement().parentNode.removeChild(view3D.getDOMElement());
+ }
+ view3D.removeAllVolumes();
+ };
+ }
+ }, [viewerRef, view3D]);
+
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+ const densityValue = settings.density / 100;
+ view3D.updateDensity(currentVolume, densityValue);
+ view3D.redraw();
+ }, [settings.density]);
+
+ useEffect(() => {
+ if (!view3D) return;
+ const brightnessValue = settings.brightness / 100;
+ view3D.updateExposure(brightnessValue);
+ view3D.redraw();
+ }, [settings.brightness]);
+
+ useEffect(() => {
+ view3D.setVolumeRenderMode(
+ isPT ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH,
+ );
+ view3D.redraw();
+ }, [isPT, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateLights(lights);
+ view3D.updateActiveChannels(currentVolume);
+ view3D.redraw();
+ }
+ }, [lights, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateActiveChannels(currentVolume);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }
+ }, [channels]);
+
+ useEffect(() => {
+ view3D.setCameraMode(cameraMode);
+ }, [cameraMode]);
+
+ useEffect(() => {
+ view3D.setAutoRotate(isTurntable);
+ }, [isTurntable, view3D]);
+
+ useEffect(() => {
+ view3D.setShowAxis(showAxis);
+ }, [showAxis, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setShowBoundingBox(currentVolume, showBoundingBox);
+ }
+ }, [currentVolume, showBoundingBox, view3D]);
+
+ useEffect(() => {
+ view3D.setShowScaleBar(showScaleBar);
+ }, [showScaleBar, view3D]);
+
+ useEffect(() => {
+ view3D.setBackgroundColor(backgroundColor);
+ }, [backgroundColor, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setBoundingBoxColor(currentVolume, boundingBoxColor);
+ }
+ }, [boundingBoxColor]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setFlipVolume(currentVolume, flipX, flipY, flipZ);
+ }
+ }, [flipX, flipY, flipZ]);
+
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+ const [min, mid, max] = settings.levels.map((v) => v / 255);
+ const diff = max - min;
+ const x = (mid - min) / diff;
+ const scale = 4 * x * x;
+ view3D.setGamma(currentVolume, min, scale, max);
+ view3D.redraw();
+ }, [settings.levels]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateClipRegion(
+ currentVolume,
+ clipRegion.xmin,
+ clipRegion.xmax,
+ clipRegion.ymin,
+ clipRegion.ymax,
+ clipRegion.zmin,
+ clipRegion.zmax,
+ );
+ }
+ }, [clipRegion]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateCamera(fov, focalDistance, aperture);
+ view3D.updateActiveChannels(currentVolume);
+ view3D.redraw();
+ }
+ }, [fov, focalDistance, aperture]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setRayStepSizes(currentVolume, primaryRay, secondaryRay);
+ view3D.updateActiveChannels(currentVolume);
+ view3D.redraw();
+ }
+ }, [primaryRay, secondaryRay]);
+
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+ const alphaValue = 1 - settings.maskAlpha / 100.0;
+ view3D.updateMaskAlpha(currentVolume, alphaValue);
+ view3D.updateActiveChannels(currentVolume);
+ // view3D.redraw();
+ // console.log("maskAlpha", settings.maskAlpha);
+ }, [settings.maskAlpha]);
+
+ useEffect(() => {
+ if (view3D && lights[0]) {
+ const skyLight = lights[0];
+ skyLight.mColorTop = new Vector3(
+ (skyTopColor[0] / 255.0) * skyTopIntensity,
+ (skyTopColor[1] / 255.0) * skyTopIntensity,
+ (skyTopColor[2] / 255.0) * skyTopIntensity,
+ );
+ skyLight.mColorMiddle = new Vector3(
+ (skyMidColor[0] / 255.0) * skyMidIntensity,
+ (skyMidColor[1] / 255.0) * skyMidIntensity,
+ (skyMidColor[2] / 255.0) * skyMidIntensity,
+ );
+ skyLight.mColorBottom = new Vector3(
+ (skyBotColor[0] / 255.0) * skyBotIntensity,
+ (skyBotColor[1] / 255.0) * skyBotIntensity,
+ (skyBotColor[2] / 255.0) * skyBotIntensity,
+ );
+ view3D.updateLights(lights);
+ view3D.updateActiveChannels(currentVolume);
+ view3D.redraw();
+ // console.log([
+ // skyTopColor,
+ // skyTopIntensity,
+ // skyMidColor,
+ // skyMidIntensity,
+ // skyBotColor,
+ // skyBotIntensity,
+ // ]);
+ }
+ }, [
+ skyTopColor,
+ skyTopIntensity,
+ skyMidColor,
+ skyMidIntensity,
+ skyBotColor,
+ skyBotIntensity,
+ ]);
+
+ // useEffect for area light
+ useEffect(() => {
+ if (view3D && lights[1]) {
+ const areaLight = lights[1];
+ areaLight.mColor = new Vector3(
+ (lightColor[0] / 255.0) * lightIntensity,
+ (lightColor[1] / 255.0) * lightIntensity,
+ (lightColor[2] / 255.0) * lightIntensity,
+ );
+ areaLight.mTheta = (lightTheta * Math.PI) / 180.0;
+ areaLight.mPhi = (lightPhi * Math.PI) / 180.0;
+ view3D.updateLights(lights);
+ view3D.updateActiveChannels(currentVolume);
+ view3D.redraw();
+ }
+ // console.log([lightColor, lightIntensity, lightTheta, lightPhi]);
+ }, [lightColor, lightIntensity, lightTheta, lightPhi]);
+
+ // Effect for handling isosurface enable/disable
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+
+ channels.forEach((channel, index) => {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: channel.isosurfaceEnabled,
+ isovalue: channel.isovalue,
+ opacity: channel.opacity,
+ });
+ });
+
+ view3D.updateMaterial(currentVolume);
+ view3D.redraw();
+ }, [channels.map((ch) => ch.isosurfaceEnabled).join(",")]); // Dependency on isosurfaceEnabled values
+
+ // Effect for handling isovalue changes
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+
+ channels.forEach((channel, index) => {
+ if (channel.isosurfaceEnabled) {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: true,
+ isovalue: channel.isovalue,
+ opacity: channel.opacity,
+ });
+ }
+ });
+
+ view3D.updateMaterial(currentVolume);
+ view3D.redraw();
+ }, [channels.map((ch) => ch.isovalue).join(",")]); // Dependency on isovalue changes
+
+ // Effect for handling opacity changes
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+
+ channels.forEach((channel, index) => {
+ if (channel.isosurfaceEnabled) {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: true,
+ isovalue: channel.isovalue,
+ isosurfaceOpacity: channel.opacity,
+ });
+ }
+ });
+
+ view3D.updateMaterial(currentVolume);
+ view3D.redraw();
+ }, [channels.map((ch) => ch.opacity).join(",")]); // Dependency on opacity changes
+
+ useEffect(() => {
+ if (!currentVolume || !view3D) return;
+ channels.forEach((channel, index) => {
+ if (channel.isosurfaceEnabled) {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: true,
+ isovalue: channel.isovalue,
+ isosurfaceOpacity: channel.opacity,
+ opacity: channel.opacity, // Include both for compatibility
+ });
+ // Force material update
+ view3D.updateMaterial(currentVolume);
+ }
+ });
+ view3D.redraw();
+ }, [channels.map((ch) => `${ch.isosurfaceEnabled}-${ch.opacity}`).join(",")]);
+
+ const setInitialRenderMode = () => {
+ view3D.setVolumeRenderMode(
+ isPT ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH,
+ );
+ view3D.setMaxProjectMode(currentVolume, false);
+ };
+
+ const DEFAULT_CHANNEL_COLOR = [128, 128, 128]; // Medium gray
+
+ // Modify your showChannelUI function
+ const showChannelUI = (volume) => {
+ const currentPresetColors = PRESET_COLOR_MAP[currentPreset].colors;
+
+ const channelGui = volume.imageInfo.channelNames.map((name, index) => {
+ const channelColor =
+ currentPresetColors[index % currentPresetColors.length];
+
+ return {
+ name,
+ enabled: index < 3,
+ colorD: channelColor,
+ colorS: [0, 0, 0],
+ colorE: [0, 0, 0],
+ glossiness: 0,
+ window: 1,
+ level: 0.5,
+ isovalue: 128,
+ isosurface: false,
+ brightness: 1.2,
+ contrast: 1.1,
+ // Add these new properties
+ useAdvancedMode: false,
+ controlPoints: [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ]
+ };
+ });
+
+ setChannels(channelGui);
+
+ // Force update channel materials
+ channelGui.forEach((channel, index) => {
+ if (channel.enabled) {
+ view3D.updateChannelMaterial(
+ volume,
+ index,
+ channel.colorD,
+ channel.colorS,
+ channel.colorE,
+ channel.glossiness,
+ );
+ }
+ });
+
+ view3D.updateMaterial(volume);
+ view3D.redraw();
+ };
+
+ const updateChannel = (index, key, value) => {
+ const updatedChannels = [...channels];
+ updatedChannels[index][key] = value;
+ setChannels(updatedChannels);
+
+ if (currentVolume) {
+ if (key === "enabled") {
+ view3D.setVolumeChannelEnabled(currentVolume, index, value);
+ } else if (key === "isosurface") {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: value,
+ });
+ if (value) {
+ view3D.createIsosurface(
+ currentVolume,
+ index,
+ updatedChannels[index].isovalue,
+ 1.0,
+ );
+ } else {
+ view3D.clearIsosurface(currentVolume, index);
+ }
+ } else if (["colorD", "colorS", "colorE", "glossiness"].includes(key)) {
+ view3D.updateChannelMaterial(
+ currentVolume,
+ index,
+ updatedChannels[index].colorD,
+ updatedChannels[index].colorS,
+ updatedChannels[index].colorE,
+ updatedChannels[index].glossiness,
+ );
+ view3D.updateMaterial(currentVolume);
+ } else if (key === "window" || key === "level") {
+ const lut = new Lut().createFromWindowLevel(
+ updatedChannels[index].window,
+ updatedChannels[index].level,
+ );
+ currentVolume.setLut(index, lut);
+ view3D.updateLuts(currentVolume);
+ }
+ view3D.redraw();
+ }
+ };
+
+ const updateChannelOptions = (index, options) => {
+ if (!currentVolume || !view3D) return;
+
+ const updatedChannels = [...channels];
+ updatedChannels[index] = { ...updatedChannels[index], ...options };
+ setChannels(updatedChannels);
+ };
+
+ const initializeChannelOptions = (volume) => {
+ const channelOptions = volume.imageInfo.channelNames.map((name, index) => ({
+ name,
+ enabled: index < 3,
+ color: volume.channelColorsDefault[index] || [128, 128, 128],
+ specularColor: [0, 0, 0],
+ emissiveColor: [0, 0, 0],
+ glossiness: 0,
+ isosurfaceEnabled: false,
+ isovalue: 127,
+ isosurfaceOpacity: 1.0,
+ }));
+ setChannels(channelOptions);
+ };
+
+ const updateIsovalue = (index, isovalue) => {
+ if (!currentVolume || !view3D) return;
+
+ const updatedChannels = [...channels];
+ updatedChannels[index] = {
+ ...updatedChannels[index],
+ isovalue,
+ };
+ setChannels(updatedChannels);
+
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ isosurfaceEnabled: updatedChannels[index].isosurfaceEnabled,
+ isovalue: isovalue,
+ isosurfaceOpacity: updatedChannels[index].opacity,
+ });
+
+ view3D.updateMaterial(currentVolume);
+ view3D.redraw();
+ };
+
+ // Histogram-based LUT adjustments
+ const updateChannelLut = (index, type) => {
+ if (currentVolume) {
+ let lut;
+ let newRange;
+ let newControlPoints;
+ const histogram = currentVolume.getHistogram(index);
+ const channelColor = channels[index].color;
+
+ switch(type) {
+ case "autoIJ": {
+ const [hmin, hmax] = histogram.findAutoIJBins();
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ newRange = [hmin, hmax];
+ // Create control points for advanced mode
+ newControlPoints = [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: hmin, opacity: 0, color: channelColor },
+ { x: hmax, opacity: 1, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ];
+ break;
+ }
+ case "auto0": {
+ const [hmin, hmax] = histogram.findAutoMinMax();
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ newRange = [hmin, hmax];
+ newControlPoints = [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: hmin, opacity: 0, color: channelColor },
+ { x: hmax, opacity: 1, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ];
+ break;
+ }
+ case "bestFit": {
+ const [hmin, hmax] = histogram.findBestFitBins();
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ newRange = [hmin, hmax];
+ newControlPoints = [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: hmin, opacity: 0, color: channelColor },
+ { x: hmax, opacity: 1, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ];
+ break;
+ }
+ case "pct50_98": {
+ const hmin = histogram.findBinOfPercentile(0.5);
+ const hmax = histogram.findBinOfPercentile(0.983);
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ newRange = [hmin, hmax];
+ newControlPoints = [
+ { x: 0, opacity: 0, color: channelColor },
+ { x: hmin, opacity: 0, color: channelColor },
+ { x: hmax, opacity: 1, color: channelColor },
+ { x: 255, opacity: 1, color: channelColor }
+ ];
+ break;
+ }
+ }
+
+ // Update channel settings
+ const updatedChannels = [...channels];
+ updatedChannels[index] = {
+ ...updatedChannels[index],
+ controlPoints: newControlPoints,
+ rampRange: newRange
+ };
+ setChannels(updatedChannels);
+
+ // Apply to volume
+ currentVolume.setLut(index, lut);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }
+ };
+
+ const setCameraModeHandler = (mode) => {
+ const previousMode = cameraMode;
+ setCameraMode(mode);
+
+ if (!currentVolume || !view3D) return;
+
+ if (mode === "3D") {
+ // Reset scroll flag when switching back to 3D
+ setHasScrolledOnce(false);
+ // Remove padding when returning to 3D
+ viewerRef.current.style.paddingBottom = "0";
+
+ const fullClipRegion = {
+ xmin: 0,
+ xmax: 1,
+ ymin: 0,
+ ymax: 1,
+ zmin: 0,
+ zmax: 1,
+ };
+
+ setClipRegion(fullClipRegion);
+ view3D.updateClipRegion(
+ currentVolume,
+ fullClipRegion.xmin,
+ fullClipRegion.xmax,
+ fullClipRegion.ymin,
+ fullClipRegion.ymax,
+ fullClipRegion.zmin,
+ fullClipRegion.zmax,
+ );
+
+ view3D.setCameraMode(mode);
+ view3D.setVolumeRenderMode(
+ isPT ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH,
+ );
+ view3D.setMaxProjectMode(currentVolume, false);
+
+ // Restore 3D settings
+ view3D.updateDensity(currentVolume, settings.density / 100);
+ view3D.updateExposure(settings.brightness / 100);
+ view3D.updateMaskAlpha(currentVolume, 1 - settings.maskAlpha / 100);
+ view3D.setRayStepSizes(currentVolume, primaryRay, secondaryRay);
+
+ channels.forEach((channel, index) => {
+ if (currentVolume) {
+ view3D.setVolumeChannelEnabled(currentVolume, index, channel.enabled);
+ if (channel.enabled) {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ color: channel.color,
+ opacity: 1.0,
+ brightness: 1.2,
+ contrast: 1.1,
+ });
+ }
+ }
+ });
+ } else {
+ // Add padding for the player in 2D modes
+ if (viewerRef.current) {
+ viewerRef.current.style.paddingBottom = "80px";
+ }
+
+ const defaultClipRegion = {
+ xmin: 0,
+ xmax: 1,
+ ymin: 0,
+ ymax: 1,
+ zmin: 0,
+ zmax: 1,
+ };
+
+ const sliceThickness = 0.01;
+ if (mode === "X") {
+ defaultClipRegion.xmin = 0;
+ defaultClipRegion.xmax = sliceThickness;
+ } else if (mode === "Y") {
+ defaultClipRegion.ymin = 0;
+ defaultClipRegion.ymax = sliceThickness;
+ } else if (mode === "Z") {
+ defaultClipRegion.zmin = 0;
+ defaultClipRegion.zmax = sliceThickness;
+ }
+
+ setClipRegion(defaultClipRegion);
+ view3D.updateClipRegion(
+ currentVolume,
+ defaultClipRegion.xmin,
+ defaultClipRegion.xmax,
+ defaultClipRegion.ymin,
+ defaultClipRegion.ymax,
+ defaultClipRegion.zmin,
+ defaultClipRegion.zmax,
+ );
+
+ view3D.setCameraMode(mode);
+ view3D.setVolumeRenderMode(RENDERMODE_RAYMARCH);
+ view3D.setMaxProjectMode(currentVolume, false);
+
+ // Set optimal 2D view settings
+ view3D.updateDensity(currentVolume, 0.5);
+ view3D.updateExposure(0.7);
+ view3D.updateMaskAlpha(currentVolume, 0.5);
+ view3D.setRayStepSizes(currentVolume, 1, 1);
+
+ channels.forEach((channel, index) => {
+ if (currentVolume) {
+ view3D.setVolumeChannelEnabled(currentVolume, index, channel.enabled);
+ if (channel.enabled) {
+ view3D.setVolumeChannelOptions(currentVolume, index, {
+ color: channel.color,
+ opacity: 1.0,
+ brightness: 1.2,
+ contrast: 1.1,
+ });
+ }
+ }
+ });
+ }
+
+ setPersistentSettings((prev) => ({
+ ...prev,
+ mode: mode,
+ }));
+
+ view3D.updateActiveChannels(currentVolume);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ };
+
+ const toggleTurntable = () => {
+ setIsTurntable(!isTurntable);
+ };
+
+ const toggleAxis = () => {
+ setShowAxis(!showAxis);
+ };
+
+ const toggleBoundingBox = () => {
+ setShowBoundingBox(!showBoundingBox);
+ };
+
+ const toggleScaleBar = () => {
+ setShowScaleBar(!showScaleBar);
+ };
+
+ const updateBackgroundColor = (color) => {
+ setBackgroundColor(color);
+ };
+
+ const updateBoundingBoxColor = (color) => {
+ setBoundingBoxColor(color);
+ };
+
+ const flipVolume = (axis) => {
+ if (axis === "X") {
+ setFlipX(flipX * -1);
+ } else if (axis === "Y") {
+ setFlipY(flipY * -1);
+ } else if (axis === "Z") {
+ setFlipZ(flipZ * -1);
+ }
+ };
+
+ const gammaSliderToImageValues = (sliderValues) => {
+ let min = Number(sliderValues[0]);
+ let mid = Number(sliderValues[1]);
+ let max = Number(sliderValues[2]);
+ if (mid > max || mid < min) {
+ mid = 0.5 * (min + max);
+ }
+ const div = 255;
+ min /= div;
+ max /= div;
+ mid /= div;
+ const diff = max - min;
+ const x = (mid - min) / diff;
+ let scale = 4 * x * x;
+ if ((mid - 0.5) * (mid - 0.5) < 0.0005) {
+ scale = 1.0;
+ }
+ return [min, max, scale];
+ };
+
+ const updateGamma = (newGamma) => {
+ setGamma(newGamma);
+ };
+
+ const captureScreenshot = () => {
+ view3D.capture((dataUrl) => {
+ const anchor = document.createElement("a");
+ anchor.href = dataUrl;
+ anchor.download = "screenshot.png";
+ anchor.click();
+ });
+ };
+
+ const updateClipRegion = (axis, values) => {
+ const [min, max] = values;
+ const updates = {};
+
+ if (axis === "X") {
+ updates.xmin = min;
+ updates.xmax = max;
+ } else if (axis === "Y") {
+ updates.ymin = min;
+ updates.ymax = max;
+ } else if (axis === "Z") {
+ updates.zmin = min;
+ updates.zmax = max;
+ }
+
+ const newClipRegion = { ...clipRegion, ...updates };
+ setClipRegion(newClipRegion);
+
+ if (currentVolume) {
+ view3D.updateClipRegion(
+ currentVolume,
+ newClipRegion.xmin,
+ newClipRegion.xmax,
+ newClipRegion.ymin,
+ newClipRegion.ymax,
+ newClipRegion.zmin,
+ newClipRegion.zmax,
+ );
+ }
+ };
+
+ const goToFrame = (frame) => {
+ if (frame >= 0 && frame < totalFrames) {
+ view3D.setTime(currentVolume, frame);
+ setCurrentFrame(frame);
+ }
+ };
+
+ const goToZSlice = (slice) => {
+ if (currentVolume && view3D.setZSlice(currentVolume, slice)) {
+ // Z slice updated successfully
+ const zSlider = document.getElementById("zSlider");
+ const zInput = document.getElementById("zValue");
+
+ if (zInput) {
+ zInput.value = slice;
+ }
+ if (zSlider) {
+ zSlider.value = slice;
+ }
+ } else {
+ console.log("Failed to update Z slice");
+ }
+ };
+
+ const playTimeSeries = () => {
+ if (timerId) {
+ clearInterval(timerId);
+ }
+ setIsPlaying(true);
+ const newTimerId = setInterval(() => {
+ setCurrentFrame((prevFrame) => {
+ const nextFrame = (prevFrame + 1) % totalFrames;
+ view3D.setTime(currentVolume, nextFrame);
+ return nextFrame;
+ });
+ }, 80);
+ setTimerId(newTimerId);
+ };
+
+ const pauseTimeSeries = () => {
+ if (timerId) {
+ clearInterval(timerId);
+ setTimerId(null);
+ }
+ setIsPlaying(false);
+ };
+
+ const rgbToHex = (r, g, b) => {
+ const toHex = (component) => {
+ const hex = Math.round(component).toString(16);
+ return hex.length === 1 ? "0" + hex : hex;
+ };
+
+ // Ensure values are between 0-255
+ r = Math.min(255, Math.max(0, Math.round(r)));
+ g = Math.min(255, Math.max(0, Math.round(g)));
+ b = Math.min(255, Math.max(0, Math.round(b)));
+
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+ };
+
+ const hexToRgb = (hex) => {
+ // Remove the hash if present
+ hex = hex.replace(/^#/, "");
+
+ // Parse the hex values
+ const bigint = parseInt(hex, 16);
+ const r = (bigint >> 16) & 255;
+ const g = (bigint >> 8) & 255;
+ const b = bigint & 255;
+
+ return [r, g, b];
+ };
+
+ const updatePixelSamplingRate = (rate) => {
+ setSamplingRate(rate);
+ view3D.updatePixelSamplingRate(rate);
+ view3D.redraw();
+ };
+
+ const updateSkyLight = (position, intensity, color) => {
+ if (position === "top") {
+ setSkyTopIntensity(intensity);
+ setSkyTopColor(color);
+ } else if (position === "mid") {
+ setSkyMidIntensity(intensity);
+ setSkyMidColor(color);
+ } else if (position === "bot") {
+ setSkyBotIntensity(intensity);
+ setSkyBotColor(color);
+ }
+ updateLights();
+ };
+
+ const updateAreaLight = (intensity, color, theta, phi) => {
+ setLightIntensity(intensity);
+ setLightColor(color);
+ setLightTheta(theta);
+ setLightPhi(phi);
+ updateLights();
+ };
+
+ const updateLights = () => {
+ const updatedLights = [...lights];
+ // Update sky light
+ updatedLights[0].mColorTop = new Vector3(
+ (skyTopColor[0] / 255.0) * skyTopIntensity,
+ (skyTopColor[1] / 255.0) * skyTopIntensity,
+ (skyTopColor[2] / 255.0) * skyTopIntensity,
+ );
+ updatedLights[0].mColorMiddle = new Vector3(
+ (skyMidColor[0] / 255.0) * skyMidIntensity,
+ (skyMidColor[1] / 255.0) * skyMidIntensity,
+ (skyMidColor[2] / 255.0) * skyMidIntensity,
+ );
+ updatedLights[0].mColorBottom = new Vector3(
+ (skyBotColor[0] / 255.0) * skyBotIntensity,
+ (skyBotColor[1] / 255.0) * skyBotIntensity,
+ (skyBotColor[2] / 255.0) * skyBotIntensity,
+ );
+
+ // Update area light
+ updatedLights[1].mColor = new Vector3(
+ (lightColor[0] / 255.0) * lightIntensity,
+ (lightColor[1] / 255.0) * lightIntensity,
+ (lightColor[2] / 255.0) * lightIntensity,
+ );
+ updatedLights[1].mTheta = (lightTheta * Math.PI) / 180.0;
+ updatedLights[1].mPhi = (lightPhi * Math.PI) / 180.0;
+
+ setLights(updatedLights);
+ view3D.updateLights(updatedLights);
+ view3D.redraw();
+ };
+
+ const applyColorPreset = (presetIndex) => {
+ if (!currentVolume) return;
+
+ const preset = PRESET_COLOR_MAP[presetIndex].colors;
+
+ const updatedChannels = channels.map((channel, index) => {
+ const newColor = preset[index % preset.length];
+ return {
+ ...channel,
+ colorD: newColor,
+ };
+ });
+
+ // Update state
+ setChannels(updatedChannels);
+ setCurrentPreset(presetIndex);
+
+ // Update each channel's material
+ updatedChannels.forEach((channel, index) => {
+ view3D.updateChannelMaterial(
+ currentVolume,
+ index,
+ channel.colorD,
+ channel.colorS,
+ channel.colorE,
+ channel.glossiness,
+ );
+ });
+
+ view3D.updateMaterial(currentVolume);
+ view3D.redraw();
+ };
+
+ const updateSetting = (key, value) => {
+ setSettings((prev) => ({
+ ...prev,
+ [key]: value,
+ }));
+ };
+
+ const handleClipRegionUpdate = (newClipRegion) => {
+ setClipRegion(newClipRegion);
+
+ if (currentVolume) {
+ view3D.updateClipRegion(
+ currentVolume,
+ newClipRegion.xmin,
+ newClipRegion.xmax,
+ newClipRegion.ymin,
+ newClipRegion.ymax,
+ newClipRegion.zmin,
+ newClipRegion.zmax,
+ );
+ }
+ };
+
+ // Optional: Add handler for slice changes if you need to do something when slices change
+ const handleSliceChange = (newSlice) => {
+ // Handle slice changes if needed
+ console.log("Slice changed:", newSlice);
+ };
+
+ // Function to save current view settings
+ const saveCurrentSettings = useCallback(() => {
+ setPersistentSettings((prev) => ({
+ ...prev,
+ mode: cameraMode,
+ density: settings.density,
+ brightness: settings.brightness,
+ maskAlpha: settings.maskAlpha,
+ primaryRay: primaryRay,
+ secondaryRay: secondaryRay,
+ clipRegion: clipRegion,
+ channelSettings: channels.reduce((acc, channel, index) => {
+ acc[index] = {
+ enabled: channel.enabled,
+ color: channel.color,
+ isosurfaceEnabled: channel.isosurfaceEnabled,
+ isovalue: channel.isovalue,
+ opacity: channel.opacity,
+ };
+ return acc;
+ }, {}),
+ }));
+ }, [cameraMode, settings, primaryRay, secondaryRay, clipRegion, channels]);
+
+ // Add effect to save settings when they change
+ useEffect(() => {
+ if (currentVolume) {
+ saveCurrentSettings();
+ }
+ }, [
+ cameraMode,
+ settings.density,
+ settings.brightness,
+ settings.maskAlpha,
+ primaryRay,
+ secondaryRay,
+ clipRegion,
+ channels,
+ saveCurrentSettings,
+ ]);
+
+ // Update the roundToSignificantFigure function:
+ const roundToSignificantFigure = (value, sigFigs = 1) => {
+ if (value === undefined || value === null) return "N/A";
+
+ // Convert value to number if it's a string
+ const numericValue = Number(value);
+
+ // Return NaN if conversion failed
+ if (isNaN(numericValue)) return "N/A";
+
+ // Return 0 if the value is 0
+ if (numericValue === 0) return "0µm";
+
+ // Calculate scale for rounding
+ const scale = Math.pow(
+ 10,
+ Math.floor(Math.log10(Math.abs(numericValue))) + 1 - sigFigs,
+ );
+
+ // Perform rounding
+ const roundedValue = Math.round(numericValue / scale) * scale;
+
+ return `${roundedValue}`;
+ };
+ // console.log(currentVolume?.imageMetadata);
+
+ const getDimensionOrder = (metadata) => {
+ let order = [];
+ if (metadata["Time series frames"] > 1) order.push("T");
+ if (metadata.Channels > 1) order.push("C");
+ order.push("Z", "Y", "X");
+ return order.join("");
+ };
+
+ return (
+
+
+
+
+ {/* Files Tab */}
+
+
+ handleFileSelect(category, file.name)
+ }
+ />
+
+ {/* Settings Tab */}
+
+
+ {/* Channels */}
+
+
+
+ {PRESET_COLOR_MAP.map((preset) => (
+
+ {preset.name}
+
+ ))}
+
+
+
+ {channels.map((channel, index) => (
+
+
+ {channel.name || `Channel ${index + 1}`}
+
+ {channel.enabled && (
+
+
{
+ if (currentVolume) {
+ currentVolume.setLut(channelIndex, lut);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }
+ }}
+ useAdvancedMode={channel.useAdvancedMode}
+ initialControlPoints={channel.controlPoints}
+ rampRange={channel.rampRange}
+ channelColor={channel.color}
+ onRampRangeChange={(newRange) => {
+ const updatedChannels = [...channels];
+ updatedChannels[index].rampRange = newRange;
+ setChannels(updatedChannels);
+ }}
+ onControlPointsChange={(newPoints) => {
+ const updatedChannels = [...channels];
+ updatedChannels[index].controlPoints = newPoints;
+ setChannels(updatedChannels);
+ }}
+ />
+ {/* Advanced Mode Toggle with improved styling */}
+
+ {
+ const updatedChannels = [...channels];
+ updatedChannels[index].useAdvancedMode = checked;
+ setChannels(updatedChannels);
+ }}
+ size="small"
+ />
+ Advanced Mode
+
+
+ )}
+
+
+ updateChannelOptions(index, { enabled })
+ }
+ />
+
+
+
+
+ updateChannelOptions(index, {
+ isosurfaceEnabled: enabled,
+ })
+ }
+ />
+
+
+ {channel.isosurfaceEnabled && (
+ <>
+
+
+ updateChannelOptions(index, {
+ isovalue: value,
+ })
+ }
+ />
+
+
+
+
+ updateChannelOptions(index, {
+ opacity: value / 100,
+ })
+ }
+ />
+
+
+
+ )}
+
+
+
+
+
+ {
+ // Get the initial LUT configuration
+ const histogram = currentVolume.getHistogram(index);
+ // Create a default LUT that maps full intensity range
+ const lut = new Lut().createFullRange();
+
+ // Reset channel settings to initial state
+ const defaultControlPoints = [
+ { x: 0, opacity: 0, color: channel.color },
+ { x: 255, opacity: 1, color: channel.color }
+ ];
+
+ const updatedChannels = [...channels];
+ updatedChannels[index] = {
+ ...updatedChannels[index],
+ controlPoints: defaultControlPoints,
+ rampRange: [0, 255]
+ };
+ setChannels(updatedChannels);
+
+ // Apply to volume
+ currentVolume.setLut(index, lut);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }}
+ >
+ None
+
+
+ updateChannelLut(index, "autoIJ")
+ }
+ >
+ Auto IJ
+
+ updateChannelLut(index, "auto0")}
+ >
+ Min/Max
+
+
+
+
+ updateChannelLut(index, "bestFit")
+ }
+ >
+ Best Fit
+
+
+ updateChannelLut(index, "pct50_98")
+ }
+ >
+ 50-98%
+
+
+
+
+
+ {/* Gamma */}
+
+ updateSetting("levels", values)}
+ />
+
+
+ {/* Exposure */}
+
+ updateSetting("brightness", val)}
+ />
+
+
+ {/* Camera Mode */}
+
+
+ X
+ Y
+ Z
+ 3D
+
+
+
+ {/* View Controls */}
+
+
+ {isTurntable ? "Stop Turntable" : "Start Turntable"}
+
+
+ {showAxis ? "Hide Axis" : "Show Axis"}
+
+
+ {showBoundingBox
+ ? "Hide Bounding Box"
+ : "Show Bounding Box"}
+
+
+ {showScaleBar ? "Hide Scale Bar" : "Show Scale Bar"}
+
+
+
+
+
+ flipVolume("X")}>Flip X
+ flipVolume("Y")}>Flip Y
+ flipVolume("Z")}>Flip Z
+
+
+ {/* Clip Region */}
+
+
+ {currentVolume && (
+ <>
+ updateClipRegion("X", values)}
+ totalSlices={currentVolume.imageMetadata.Dimensions.x}
+ />
+ updateClipRegion("Y", values)}
+ totalSlices={currentVolume.imageMetadata.Dimensions.y}
+ />
+ updateClipRegion("Z", values)}
+ totalSlices={currentVolume.imageMetadata.Dimensions.z}
+ />
+
+ )}
+
+
+
+ {/* Camera Settings */}
+
+
+
+
+
+
+
+
+
+ {/* Render Mode */}
+
+
+ setIsPT(checked)}
+ />
+
+
+
+ {isPT && (
+ <>
+ {/* Density */}
+
+ updateSetting("density", val)}
+ />
+
+
+ {/* Ray Steps */}
+
+
+ Primary Ray
+
+
+ Secondary Ray
+
+
+
+ {/* Sampling Rate */}
+
+
+
+
+
+ {/* Mask Alpha */}
+
+ updateSetting("maskAlpha", val)}
+ />
+
+
+ )}
+
+
+
+ {/* Metadata Tab */}
+
+
+
+ {currentVolume.name}
+
+
+
+ Dimension order:{" "}
+ {(() => {
+ const order = [];
+ if (currentVolume.imageMetadata["Time series frames"] > 1)
+ order.push("T");
+ if (currentVolume.imageMetadata.Channels > 1)
+ order.push("C");
+ order.push("Z", "Y", "X");
+ return order.join("");
+ })()}
+
+
+
+
+
+
+ x
+
+ {currentVolume.imageMetadata.Dimensions.x}
+
+
+
+ y
+
+ {currentVolume.imageMetadata.Dimensions.y}
+
+
+
+ z
+
+ {currentVolume.imageMetadata.Dimensions.z}
+
+
+
+
+
+
+
+ x
+
+ {
+ currentVolume.imageMetadata["Original dimensions"]
+ .x
+ }
+
+
+
+ y
+
+ {
+ currentVolume.imageMetadata["Original dimensions"]
+ .y
+ }
+
+
+
+ z
+
+ {
+ currentVolume.imageMetadata["Original dimensions"]
+ .z
+ }
+
+
+
+
+
+
+
+ x
+
+ {currentVolume.imageMetadata["Physical size"].x}
+
+
+
+ y
+
+ {currentVolume.imageMetadata["Physical size"].y}
+
+
+
+ z
+
+ {currentVolume.imageMetadata["Physical size"].z}
+
+
+
+
+
+
+
+ x
+
+ {
+ currentVolume.imageMetadata[
+ "Physical size per pixel"
+ ].x
+ }
+
+
+
+ y
+
+ {
+ currentVolume.imageMetadata[
+ "Physical size per pixel"
+ ].y
+ }
+
+
+
+ z
+
+ {
+ currentVolume.imageMetadata[
+ "Physical size per pixel"
+ ].z
+ }
+
+
+
+
+
+
+
+
+ Channels: {currentVolume.imageMetadata.Channels}
+
+
+ Time series frames:{" "}
+ {currentVolume.imageMetadata["Time series frames"]}
+
+
+ {currentVolume.imageMetadata.subresolutionLevels > 1 && (
+
+ Subresolution levels:{" "}
+ {currentVolume.imageMetadata.subresolutionLevels}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {/* Planar slice player */}
+ {cameraMode !== "3D" && currentVolume && (
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default VolumeViewer;
diff --git a/src/components/WelcomePage.js b/src/components/WelcomePage.js
new file mode 100755
index 0000000..8add83e
--- /dev/null
+++ b/src/components/WelcomePage.js
@@ -0,0 +1,68 @@
+import React from "react";
+import DatasetCard from "./DatasetCard";
+
+function WelcomePage() {
+ const gridContainerStyle = {
+ display: "grid",
+ gridTemplateColumns: "repeat(2, 1fr)", // 2x2 grid layout
+ gap: "20px",
+ marginTop: "60px", // Adjust according to navbar height
+ };
+
+ return (
+
+
+
Welcome to the ISAS LSFM Data Portal
+
+ Lightsheet fluorescence microscopy (LSFM) is a cutting-edge technique
+ offering high optical resolutions and superior sectioning
+ capabilities, ideal for whole-tissue, whole-organ, and potentially
+ even whole-body imaging at cellular resolution.
+
+
+ This portal hosts LSFM datasets collected at ISAS and our
+ collaborators, shared with permission for scientific research
+ purposes.
+
+
+ The portal offers an interactive platform for biomedical researchers
+ to explore these large biomedical image datasets. We aim to make these
+ datasets accessible to foster deeper exploration and innovative
+ discoveries.
+
+
+ Load a dataset to get started
+
+ {/* Example DatasetCard usage */}
+
+
+
+ );
+}
+
+export default WelcomePage;
diff --git a/src/components/appConfig.js b/src/components/appConfig.js
new file mode 100644
index 0000000..c35d006
--- /dev/null
+++ b/src/components/appConfig.js
@@ -0,0 +1,191 @@
+import * as THREE from 'three';
+import {
+ Volume,
+ Light,
+ VolumeLoaderContext,
+ JsonImageInfoLoader,
+ VolumeFileFormat,
+ SKY_LIGHT,
+ AREA_LIGHT,
+} from "@aics/volume-viewer";
+
+const { Vector2, Vector3 } = THREE;
+
+export const getDefaultImageInfo = () => ({
+ name: "",
+ originalSize: new Vector3(1, 1, 1),
+ atlasTileDims: new Vector2(1, 1),
+ volumeSize: new Vector3(1, 1, 1),
+ subregionSize: new Vector3(1, 1, 1),
+ subregionOffset: new Vector3(0, 0, 0),
+ physicalPixelSize: new Vector3(1, 1, 1),
+ spatialUnit: "",
+ numChannels: 0,
+ channelNames: [],
+ channelColors: [],
+ times: 1,
+ timeScale: 1,
+ timeUnit: "",
+ numMultiscaleLevels: 1,
+ multiscaleLevel: 0,
+ transform: {
+ translation: new Vector3(0, 0, 0),
+ rotation: new Vector3(0, 0, 0),
+ },
+});
+
+export const CACHE_MAX_SIZE = 2_000_000_000;
+export const CONCURRENCY_LIMIT = 8;
+export const PREFETCH_CONCURRENCY_LIMIT = 3;
+export const PREFETCH_DISTANCE = [5, 5, 5, 5];
+export const MAX_PREFETCH_CHUNKS = 25;
+export const PLAYBACK_INTERVAL = 80;
+export const DATARANGE_UINT8 = [0, 255];
+
+// Cache settings
+export const QUEUE_MAX_SIZE = 10;
+export const QUEUE_MAX_LOW_PRIORITY_SIZE = 4;
+
+export const TEST_DATA = {
+ timeSeries: {
+ type: VolumeFileFormat.JSON,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/timelapse/test_parent_T49.ome_%%_atlas.json",
+ times: 46,
+ },
+ omeTiff: {
+ type: VolumeFileFormat.TIFF,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/AICS-12_881.ome.tif",
+ },
+ zarrEMT: {
+ url: "https://dev-aics-dtp-001.int.allencell.org/dan-data/3500005818_20230811__20x_Timelapse-02(P27-E7).ome.zarr",
+ type: VolumeFileFormat.ZARR,
+ },
+ zarrIDR1: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0076A/10501752.zarr",
+ },
+ zarrIDR2: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0054A/5025553.zarr",
+ },
+ zarrVariance: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/variance/1.zarr",
+ },
+ zarrNucmorph0: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P13-C4.zarr/",
+ },
+ zarrNucmorph1: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P15-C3.zarr/",
+ },
+ zarrNucmorph2: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P7-B4.zarr/",
+ },
+ zarrNucmorph3: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/20200323_F01_001/P8-B4.zarr/",
+ },
+ zarrFlyBrain: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846152.zarr/",
+ },
+ zarrUK: {
+ type: VolumeFileFormat.ZARR,
+ url: "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr",
+ },
+ opencell: { type: "opencell", url: "" },
+ cfeJson: {
+ type: VolumeFileFormat.JSON,
+ url: "AICS-12_881_atlas.json",
+ },
+ abm: {
+ type: VolumeFileFormat.TIFF,
+ url: "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/HAMILTONIAN_TERM_FOV_VSAHJUP_0000_000192.ome.tif",
+ },
+ procedural: { type: VolumeFileFormat.DATA, url: "" },
+};
+
+export const myState = {
+ file: "",
+ volume: new Volume(),
+ currentFrame: 0,
+ lastFrameTime: 0,
+ isPlaying: false,
+ timerId: 0,
+ loader: new JsonImageInfoLoader(
+ "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/timelapse/test_parent_T49.ome_%%_atlas.json"
+ ),
+ density: 12.5,
+ maskAlpha: 0.0,
+ exposure: 0.75,
+ aperture: 0.0,
+ fov: 20,
+ focalDistance: 4.0,
+ lights: [new Light(SKY_LIGHT), new Light(AREA_LIGHT)],
+ skyTopIntensity: 0.3,
+ skyMidIntensity: 0.3,
+ skyBotIntensity: 0.3,
+ skyTopColor: [255, 255, 255],
+ skyMidColor: [255, 255, 255],
+ skyBotColor: [255, 255, 255],
+ lightColor: [255, 255, 255],
+ lightIntensity: 75.0,
+ lightTheta: 14, // deg
+ lightPhi: 54, // deg
+ xmin: 0.0,
+ ymin: 0.0,
+ zmin: 0.0,
+ xmax: 1.0,
+ ymax: 1.0,
+ zmax: 1.0,
+ samplingRate: 0.25,
+ primaryRay: 1.0,
+ secondaryRay: 1.0,
+ isPT: false,
+ isMP: false,
+ interpolationActive: true,
+ isTurntable: false,
+ isAxisShowing: false,
+ isAligned: true,
+ showScaleBar: true,
+ showBoundingBox: false,
+ boundingBoxColor: [255, 255, 0],
+ backgroundColor: [0, 0, 0],
+ flipX: 1,
+ flipY: 1,
+ flipZ: 1,
+ channelFolderNames: [],
+ infoObj: getDefaultImageInfo(),
+ channelGui: [],
+ currentImageStore: "",
+ currentImageName: "",
+ channelStates: [],
+};
+
+export const loaderContext = new VolumeLoaderContext(
+ CACHE_MAX_SIZE,
+ CONCURRENCY_LIMIT,
+ PREFETCH_CONCURRENCY_LIMIT
+);
+// new VolumeLoaderContext(
+// CACHE_MAX_SIZE,
+// QUEUE_MAX_SIZE,
+// QUEUE_MAX_LOW_PRIORITY_SIZE
+// );
+
+
+export const getDefaultChannelState = () => ({
+ volumeEnabled: true,
+ isosurfaceEnabled: false,
+ colorizeEnabled: false,
+ colorizeAlpha: 1.0,
+ isovalue: 128,
+ opacity: 1.0,
+ color: [255, 255, 255],
+ controlPoints: [],
+});
+
+export const DEFAULT_CHANNEL_COLOR = [128, 128, 128]; // Medium gray
diff --git a/src/components/constants.js b/src/components/constants.js
new file mode 100644
index 0000000..d125e04
--- /dev/null
+++ b/src/components/constants.js
@@ -0,0 +1,175 @@
+// constants.js
+
+// URL search parameter keys
+export const CELL_ID_QUERY = "cellId";
+export const FOV_ID_QUERY = "fovId";
+export const CELL_LINE_QUERY = "cellLine";
+export const IMAGE_NAME_QUERY = "name";
+
+// View modes
+export const YZ_MODE = "YZ";
+export const XZ_MODE = "XZ";
+export const XY_MODE = "XY";
+export const THREE_D_MODE = "3D";
+
+// App state values
+export const SEGMENTED_CELL = "segmented";
+export const FULL_FIELD_IMAGE = "full field";
+
+// Channel setting keys
+export const ISO_SURFACE_ENABLED = "isoSurfaceEnabled";
+export const VOLUME_ENABLED = "volumeEnabled";
+
+// App State Keys
+export const ALPHA_MASK_SLIDER_LEVEL = "alphaMaskSliderLevel";
+export const BRIGHTNESS_SLIDER_LEVEL = "brightnessSliderLevel";
+export const DENSITY_SLIDER_LEVEL = "densitySliderLevel";
+export const LEVELS_SLIDER = "levelsSlider";
+export const MODE = "mode";
+export const AUTO_ROTATE = "autorotate";
+export const MAX_PROJECT = "maxProject";
+export const VOLUMETRIC_RENDER = "volume";
+export const PATH_TRACE = "pathTrace";
+export const LUT_CONTROL_POINTS = "controlPoints";
+export const COLORIZE_ALPHA = "colorizeAlpha";
+export const COLORIZE_ENABLED = "colorizeEnabled";
+
+// Volume viewer keys
+export const ISO_VALUE = "isovalue";
+export const OPACITY = "opacity";
+export const COLOR = "color";
+export const SAVE_ISO_SURFACE = "saveIsoSurface";
+
+// LUT percentiles for remapping intensity values
+export const LUT_MIN_PERCENTILE = 0.1;
+export const LUT_MAX_PERCENTILE = 0.983;
+
+// Opacity control for isosurfaces
+export const ISOSURFACE_OPACITY_SLIDER_MAX = 255.0;
+
+// Default values for sliders
+export const ALPHA_MASK_SLIDER_3D_DEFAULT = [50];
+export const ALPHA_MASK_SLIDER_2D_DEFAULT = [0];
+export const BRIGHTNESS_SLIDER_LEVEL_DEFAULT = [70];
+export const DENSITY_SLIDER_LEVEL_DEFAULT = [50];
+export const LEVELS_SLIDER_DEFAULT = [35.0, 140.0, 255.0];
+
+// Channel group keys
+export const OTHER_CHANNEL_KEY = "Other";
+export const SINGLE_GROUP_CHANNEL_KEY = "Channels";
+
+// Special channel names
+export const CELL_SEGMENTATION_CHANNEL_NAME = "SEG_Memb";
+
+export const PRESET_COLORS_0 = [
+ [226, 205, 179], // Membrane
+ [111, 186, 17], // Structure
+ [141, 163, 192], // DNA
+ [245, 241, 203], // Brightfield
+ [224, 227, 209],
+ [221, 155, 245],
+ [227, 244, 245],
+ [255, 98, 0],
+ [247, 219, 120]
+ ];
+
+// Color presets for channels
+export const PRESET_COLORS_1 = [
+ [190, 68, 171, 255],
+ [189, 211, 75, 255],
+ [61, 155, 169, 255],
+ [128, 128, 128, 255],
+ [255, 255, 255, 255],
+ [239, 27, 45, 255],
+ [238, 77, 245, 255],
+ [96, 255, 255, 255]
+];
+
+export const PRESET_COLORS_2 = [
+ [128, 0, 0, 255],
+ [0, 128, 0, 255],
+ [0, 0, 128, 255],
+ [32, 32, 32, 255],
+ [255, 255, 0, 255],
+ [255, 0, 255, 255],
+ [0, 255, 0, 255],
+ [0, 0, 255, 255]
+];
+
+export const PRESET_COLORS_3 = [
+ [128, 0, 128, 255],
+ [128, 128, 128, 255],
+ [0, 128, 128, 255],
+ [128, 128, 0, 255],
+ [255, 255, 255, 255],
+ [255, 0, 0, 255],
+ [255, 0, 255, 255],
+ [0, 255, 255, 255]
+];
+
+// Map of preset color groups
+export const PRESET_COLOR_MAP = Object.freeze([
+ { colors: PRESET_COLORS_0, name: "Default", key: 0 },
+ { colors: PRESET_COLORS_1, name: "Thumbnail colors", key: 1 },
+ { colors: PRESET_COLORS_2, name: "RGB colors", key: 2 },
+ { colors: PRESET_COLORS_3, name: "White structure", key: 3 }
+ ]);
+
+// Application color scheme
+export default {
+ primary1Color: '#0B9AAB', // bright blue
+ primary2Color: '#827AA3', // aics purple
+ primary3Color: '#d8e0e2', // light blue gray
+ accent1Color: '#B8D637', // aics lime green light
+ accent2Color: '#C1F448', // aics lime green bright
+ accent3Color: '#d8e0e2', // light blue gray
+ textColor: '#003057', // dark blue
+ disabledColor: '#D1D1D1', // dull gray
+ pickerHeaderColor: '#316773' // cool blue green
+};
+
+// Default settings and constants
+export const DEFAULT_SETTINGS = {
+ LUT_MIN_PERCENTILE: 0.5,
+ LUT_MAX_PERCENTILE: 0.983,
+ ISOSURFACE_OPACITY_SLIDER_MAX: 255.0,
+ ALPHA_MASK_SLIDER_3D_DEFAULT: [50],
+ ALPHA_MASK_SLIDER_2D_DEFAULT: [0],
+ BRIGHTNESS_SLIDER_LEVEL_DEFAULT: [70],
+ DENSITY_SLIDER_LEVEL_DEFAULT: [50],
+ LEVELS_SLIDER_DEFAULT: [35.0, 140.0, 255.0],
+ PLAY_RATE_MS_PER_STEP: 125
+ };
+
+
+ // Constants and settings from the reference implementation
+export const VIEWER_3D_SETTING = {
+ groups: [
+ {
+ name: "Observed channels",
+ channels: [
+ { name: "Membrane", match: ["(CMDRP)"], color: "E2CDB3", enabled: true, lut: ["p50", "p98"] },
+ { name: "Labeled structure", match: ["(EGFP)|(RFPT)"], color: "6FBA11", enabled: true, lut: ["p50", "p98"] },
+ { name: "DNA", match: ["(H3342)"], color: "8DA3C0", enabled: true, lut: ["p50", "p98"] },
+ { name: "Bright field", match: ["(100)|(Bright)"], color: "F5F1CB", enabled: false, lut: ["p50", "p98"] },
+ ],
+ },
+ {
+ name: "Segmentation channels",
+ channels: [
+ { name: "Labeled structure", match: ["(SEG_STRUCT)"], color: "E0E3D1", enabled: false, lut: ["p50", "p98"] },
+ { name: "Membrane", match: ["(SEG_Memb)"], color: "DD9BF5", enabled: false, lut: ["p50", "p98"] },
+ { name: "DNA", match: ["(SEG_DNA)"], color: "E3F4F5", enabled: false, lut: ["p50", "p98"] },
+ ],
+ },
+ {
+ name: "Contour channels",
+ channels: [
+ { name: "Membrane", match: ["(CON_Memb)"], color: "FF6200", enabled: false, lut: ["p50", "p98"] },
+ { name: "DNA", match: ["(CON_DNA)"], color: "F7DB78", enabled: false, lut: ["p50", "p98"] },
+ ],
+ },
+ ],
+ maskChannelName: "SEG_Memb",
+ };
+
diff --git a/src/components/useConstructor.js b/src/components/useConstructor.js
new file mode 100644
index 0000000..5e06ac3
--- /dev/null
+++ b/src/components/useConstructor.js
@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+/**
+ * For objects which are persistent for the lifetime of the component, not
+ * a member of state, and require a constructor to create. Wraps `useRef`.
+ */
+export function useConstructor(constructor) {
+ const value = useRef(null);
+ if (value.current === null) {
+ value.current = constructor();
+ }
+ return value.current;
+}
diff --git a/src/components/viewSettingsManager.js b/src/components/viewSettingsManager.js
new file mode 100644
index 0000000..cf166cf
--- /dev/null
+++ b/src/components/viewSettingsManager.js
@@ -0,0 +1,120 @@
+// viewSettingsManager.js
+import { XY_MODE, XZ_MODE, YZ_MODE, THREE_D_MODE } from './constants';
+
+class ViewSettingsManager {
+ constructor() {
+ this.settings = {
+ viewMode: THREE_D_MODE,
+ channelSettings: [],
+ clipRegion: {
+ xmin: 0,
+ xmax: 1,
+ ymin: 0,
+ ymax: 1,
+ zmin: 0,
+ zmax: 1
+ },
+ density: 50,
+ exposure: 70,
+ maskAlpha: 50,
+ gamma: [35.0, 140.0, 255.0],
+ isPT: false,
+ lastKnown2DMode: XY_MODE, // Track the last used 2D mode
+ last3DSettings: null // Store 3D settings when switching to 2D
+ };
+ }
+
+ // Save current view settings
+ saveSettings(settings) {
+ // If switching modes, store or restore relevant settings
+ if (settings.viewMode) {
+ const isCurrently3D = this.settings.viewMode === THREE_D_MODE;
+ const switchingTo3D = settings.viewMode === THREE_D_MODE;
+ const switchingFrom3D = isCurrently3D && settings.viewMode !== THREE_D_MODE;
+
+ if (switchingFrom3D) {
+ // Store 3D settings when switching to 2D
+ this.settings.last3DSettings = {
+ clipRegion: { ...this.settings.clipRegion },
+ density: this.settings.density,
+ exposure: this.settings.exposure,
+ maskAlpha: this.settings.maskAlpha,
+ // Store any other relevant 3D settings
+ };
+ this.settings.lastKnown2DMode = settings.viewMode;
+ } else if (switchingTo3D && this.settings.last3DSettings) {
+ // Restore 3D settings when switching back to 3D
+ Object.assign(settings, this.settings.last3DSettings);
+ }
+ }
+
+ this.settings = {
+ ...this.settings,
+ ...settings
+ };
+ }
+
+ // Get current settings
+ getSettings() {
+ return { ...this.settings };
+ }
+
+ // Update view mode with proper state management
+ setViewMode(mode) {
+ if (mode !== THREE_D_MODE) {
+ this.settings.lastKnown2DMode = mode;
+ }
+ this.settings.viewMode = mode;
+ }
+
+ // Get current view mode
+ getViewMode() {
+ return this.settings.viewMode;
+ }
+
+ // Get last known 2D mode
+ getLastKnown2DMode() {
+ return this.settings.lastKnown2DMode;
+ }
+
+ // Save channel settings
+ saveChannelSettings(channels) {
+ this.settings.channelSettings = channels.map(channel => ({
+ enabled: channel.enabled,
+ color: channel.color,
+ isosurfaceEnabled: channel.isosurfaceEnabled,
+ isovalue: channel.isovalue,
+ opacity: channel.opacity
+ }));
+ }
+
+ // Get saved channel settings
+ getChannelSettings() {
+ return [...this.settings.channelSettings];
+ }
+
+ // Convert camera mode to internal view mode
+ convertCameraModeToViewMode(cameraMode) {
+ switch (cameraMode) {
+ case 'X': return YZ_MODE;
+ case 'Y': return XZ_MODE;
+ case 'Z': return XY_MODE;
+ case '3D': return THREE_D_MODE;
+ default: return THREE_D_MODE;
+ }
+ }
+
+ // Convert internal view mode to camera mode
+ convertViewModeToCameraMode(viewMode) {
+ switch (viewMode) {
+ case YZ_MODE: return 'X';
+ case XZ_MODE: return 'Y';
+ case XY_MODE: return 'Z';
+ case THREE_D_MODE: return '3D';
+ default: return '3D';
+ }
+ }
+}
+
+const viewSettingsManager = new ViewSettingsManager();
+export default viewSettingsManager;
\ No newline at end of file
diff --git a/src/components/volumeViewrKeep.js b/src/components/volumeViewrKeep.js
new file mode 100644
index 0000000..1816402
--- /dev/null
+++ b/src/components/volumeViewrKeep.js
@@ -0,0 +1,1070 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+ LoadSpec,
+ View3d,
+ VolumeFileFormat,
+ RENDERMODE_PATHTRACE,
+ RENDERMODE_RAYMARCH,
+ VolumeMaker,
+ Light,
+ AREA_LIGHT,
+ SKY_LIGHT,
+ Lut
+} from "@aics/volume-viewer";
+import * as THREE from 'three';
+import { loaderContext, PREFETCH_DISTANCE, MAX_PREFETCH_CHUNKS, myState } from "./appConfig";
+import { useConstructor } from './useConstructor';
+import { Slider, Switch, InputNumber, Row, Col, Collapse, Layout, Button, Select, Input, Tooltip, Spin, Menu, Tabs, Card} from 'antd';
+import axios from 'axios';
+import { API_URL } from '../config'; // Importing API_URL from your config
+
+// Utility function to concatenate arrays
+const concatenateArrays = (arrays) => {
+ const totalLength = arrays.reduce((acc, arr) => acc + arr.length, 0);
+ const result = new Uint8Array(totalLength);
+ let offset = 0;
+ for (const arr of arrays) {
+ result.set(arr, offset);
+ offset += arr.length;
+ }
+ return result;
+}
+
+const { Header, Sider, Content, Footer } = Layout;
+const { Panel } = Collapse;
+const { Option } = Select;
+const { Vector3 } = THREE;
+const { TabPane } = Tabs;
+
+const VolumeViewer = () => {
+ const viewerRef = useRef(null);
+ const view3D = useConstructor(() => new View3d({ parentElement: viewerRef.current }));
+ const loadContext = useConstructor(() => loaderContext);
+
+ const [loader, setLoader] = useState(null);
+ const [fileData, setFileData] = useState({});
+ const [selectedBodyPart, setSelectedBodyPart] = useState(null);
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [currentVolume, setCurrentVolume] = useState(null);
+ const [density, setDensity] = useState(myState.density);
+ const [exposure, setExposure] = useState(myState.exposure);
+ const [lights, setLights] = useState([
+ new Light(SKY_LIGHT),
+ new Light(AREA_LIGHT)
+ ]);
+ const [isPT, setIsPT] = useState(myState.isPT);
+ const [channels, setChannels] = useState([]);
+ const [cameraMode, setCameraMode] = useState('3D');
+ const [isTurntable, setIsTurntable] = useState(false);
+ const [showAxis, setShowAxis] = useState(false);
+ const [showBoundingBox, setShowBoundingBox] = useState(false);
+ const [showScaleBar, setShowScaleBar] = useState(true);
+ const [backgroundColor, setBackgroundColor] = useState(myState.backgroundColor);
+ const [boundingBoxColor, setBoundingBoxColor] = useState(myState.boundingBoxColor);
+ const [flipX, setFlipX] = useState(1);
+ const [flipY, setFlipY] = useState(1);
+ const [flipZ, setFlipZ] = useState(1);
+ const [gamma, setGamma] = useState([0, 0.5, 1]);
+ const [clipRegion, setClipRegion] = useState({
+ xmin: myState.xmin,
+ xmax: myState.xmax,
+ ymin: myState.ymin,
+ ymax: myState.ymax,
+ zmin: myState.zmin,
+ zmax: myState.zmax
+ });
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [currentFrame, setCurrentFrame] = useState(0);
+ const [totalFrames, setTotalFrames] = useState(0);
+ const [timerId, setTimerId] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+
+ const [maskAlpha, setMaskAlpha] = useState(myState.maskAlpha);
+ const [primaryRay, setPrimaryRay] = useState(myState.primaryRay);
+ const [secondaryRay, setSecondaryRay] = useState(myState.secondaryRay);
+ const [fov, setFov] = useState(myState.fov);
+ const [focalDistance, setFocalDistance] = useState(myState.focal_distance);
+ const [aperture, setAperture] = useState(myState.aperture);
+ const [samplingRate, setSamplingRate] = useState(myState.samplingRate);
+
+
+
+ const [skyTopIntensity, setSkyTopIntensity] = useState(myState.skyTopIntensity);
+ const [skyMidIntensity, setSkyMidIntensity] = useState(myState.skyMidIntensity);
+ const [skyBotIntensity, setSkyBotIntensity] = useState(myState.skyBotIntensity);
+ const [skyTopColor, setSkyTopColor] = useState(myState.skyTopColor);
+ const [skyMidColor, setSkyMidColor] = useState(myState.skyMidColor);
+ const [skyBotColor, setSkyBotColor] = useState(myState.skyBotColor);
+ const [lightColor, setLightColor] = useState(myState.lightColor);
+ const [lightIntensity, setLightIntensity] = useState(myState.lightIntensity);
+ const [lightTheta, setLightTheta] = useState(myState.lightTheta);
+ const [lightPhi, setLightPhi] = useState(myState.lightPhi);
+
+ const densitySliderToView3D = (density) => density / 50.0;
+
+ const onChannelDataArrived = (v, channelIndex) => {
+ view3D.onVolumeData(v, [channelIndex]);
+ if (channels[channelIndex]) {
+ view3D.setVolumeChannelEnabled(v, channelIndex, channels[channelIndex].enabled);
+ }
+ view3D.updateActiveChannels(v);
+ view3D.updateLuts(v);
+ if (v.isLoaded()) {
+ console.log("Volume " + v.name + " is loaded");
+ }
+ view3D.redraw();
+ };
+
+ const onVolumeCreated = (volume) => {
+ initializeChannelOptions(volume);
+
+ // volume.channelColorsDefault = volume.imageInfo.channelNames.map(() => DEFAULT_CHANNEL_COLOR);
+
+ setCurrentVolume(volume);
+ view3D.removeAllVolumes();
+ view3D.addVolume(volume);
+
+
+ // Log the channel colors to verify the change
+ console.log("Channel Default Colors:", volume.channelColors);
+
+
+ setInitialRenderMode();
+ showChannelUI(volume);
+ view3D.updateActiveChannels(volume);
+ view3D.updateLuts(volume);
+ view3D.updateLights(lights);
+ view3D.updateDensity(volume, densitySliderToView3D(density));
+ view3D.updateMaskAlpha(volume, maskAlpha);
+ view3D.setRayStepSizes(volume, primaryRay, secondaryRay);
+ view3D.updateExposure(exposure);
+ view3D.updateCamera(fov, focalDistance, aperture);
+ // view3D.updatePixelSamplingRate(samplingRate);
+ view3D.redraw();
+ };
+
+ const loadVolume = async (loadSpec, loader) => {
+ const volume = await loader.createVolume(loadSpec, onChannelDataArrived);
+ onVolumeCreated(volume);
+
+ console.log(volume.imageInfo, volume.imageInfo.times)
+ // Set total frames based on the volume's metadata (assuming 'times' represents the number of frames)
+ setTotalFrames(volume.imageInfo.times || 1);
+ await loader.loadVolumeData(volume);
+ };
+
+ const loadVolumeFromServer = async (url) => {
+ setIsLoading(true);
+ try {
+ const loadSpec = new LoadSpec();
+ const fileExtension = url.split('.').pop();
+ const volumeFileType = (fileExtension === 'tiff' || fileExtension === 'tif' || fileExtension === 'ome.tiff' || fileExtension === 'ome.tif') ? VolumeFileFormat.TIFF : VolumeFileFormat.ZARR;
+ const loader = await loadContext.createLoader(url, {
+ fileType: volumeFileType,
+ fetchOptions: { maxPrefetchDistance: PREFETCH_DISTANCE, maxPrefetchChunks: MAX_PREFETCH_CHUNKS },
+ });
+
+ setLoader(loader);
+ await loadVolume(loadSpec, loader);
+ } catch (error) {
+ console.error('Error loading volume:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const createTestVolume = () => {
+ const sizeX = 64;
+ const sizeY = 64;
+ const sizeZ = 64;
+ const imgData = {
+ name: "AICS-10_5_5",
+ sizeX,
+ sizeY,
+ sizeZ,
+ sizeC: 3,
+ physicalPixelSize: [1, 1, 1],
+ spatialUnit: "",
+ channelNames: ["DRAQ5", "EGFP", "SEG_Memb"],
+ };
+
+ const channelVolumes = [
+ VolumeMaker.createSphere(sizeX, sizeY, sizeZ, 24),
+ VolumeMaker.createTorus(sizeX, sizeY, sizeZ, 24, 8),
+ VolumeMaker.createCone(sizeX, sizeY, sizeZ, 24, 24),
+ ];
+
+ const alldata = concatenateArrays(channelVolumes);
+ return {
+ metadata: imgData,
+ data: {
+ dtype: "uint8",
+ shape: [channelVolumes.length, sizeZ, sizeY, sizeX],
+ buffer: new DataView(alldata.buffer),
+ },
+ };
+ };
+
+ const fetchFiles = async () => {
+ try {
+ const response = await axios.get(`${API_URL}/files`);
+ setFileData(response.data);
+ } catch (error) {
+ console.error('Error fetching files:', error);
+ }
+ };
+
+ const handleFileSelect = async (bodyPart, file) => {
+ setSelectedBodyPart(bodyPart);
+ setSelectedFile(file);
+ await loadVolumeFromServer(`${API_URL}/${bodyPart}/${file}`);
+ };
+
+ useEffect(() => {
+ fetchFiles();
+ }, []);
+
+ useEffect(() => {
+ if (viewerRef.current) {
+ const container = viewerRef.current;
+ container.appendChild(view3D.getDOMElement());
+
+ const handleResize = () => view3D.resize();
+ window.addEventListener("resize", handleResize);
+
+ view3D.resize();
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ if (view3D.getDOMElement().parentNode) {
+ view3D.getDOMElement().parentNode.removeChild(view3D.getDOMElement());
+ }
+ view3D.removeAllVolumes();
+ };
+ }
+ }, [viewerRef, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateDensity(currentVolume, densitySliderToView3D(density));
+ view3D.redraw();
+ }
+ }, [density]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateExposure(exposure);
+ view3D.redraw();
+ }
+ }, [currentVolume, exposure, view3D]);
+
+ useEffect(() => {
+ view3D.setVolumeRenderMode(isPT ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH);
+ view3D.redraw();
+ }, [isPT, view3D]);
+
+ useEffect(() => {
+ view3D.updateLights(lights);
+ view3D.redraw();
+ }, [lights, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateActiveChannels(currentVolume);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }
+ }, [channels]);
+
+ useEffect(() => {
+ view3D.setCameraMode(cameraMode);
+ }, [cameraMode]);
+
+ useEffect(() => {
+ view3D.setAutoRotate(isTurntable);
+ }, [isTurntable, view3D]);
+
+ useEffect(() => {
+ view3D.setShowAxis(showAxis);
+ }, [showAxis, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setShowBoundingBox(currentVolume, showBoundingBox);
+ }
+ }, [currentVolume, showBoundingBox, view3D]);
+
+ useEffect(() => {
+ view3D.setShowScaleBar(showScaleBar);
+ }, [showScaleBar, view3D]);
+
+ useEffect(() => {
+ view3D.setBackgroundColor(backgroundColor);
+ }, [backgroundColor, view3D]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setBoundingBoxColor(currentVolume, boundingBoxColor);
+ }
+ }, [boundingBoxColor]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setFlipVolume(currentVolume, flipX, flipY, flipZ);
+ }
+ }, [flipX, flipY, flipZ]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ const gammaValues = gammaSliderToImageValues(gamma);
+ view3D.setGamma(currentVolume, gammaValues[0], gammaValues[1], gammaValues[2]);
+ }
+ }, [gamma]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateClipRegion(
+ currentVolume,
+ clipRegion.xmin,
+ clipRegion.xmax,
+ clipRegion.ymin,
+ clipRegion.ymax,
+ clipRegion.zmin,
+ clipRegion.zmax
+ );
+ }
+ }, [clipRegion]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateCamera(fov, focalDistance, aperture);
+ view3D.redraw();
+ }
+ }, [fov, focalDistance, aperture]);
+
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.setRayStepSizes(currentVolume, primaryRay, secondaryRay);
+ view3D.redraw();
+ }
+ }, [primaryRay, secondaryRay]);
+
+ useEffect(() => {
+ if (currentVolume) {
+ view3D.updateMaskAlpha(currentVolume, maskAlpha);
+ view3D.redraw();
+ }
+ }, [maskAlpha])
+
+ useEffect(() => {
+ if (view3D && lights[0]) {
+ const skyLight = lights[0];
+ skyLight.mColorTop = new Vector3(
+ (skyTopColor[0] / 255.0) * skyTopIntensity,
+ (skyTopColor[1] / 255.0) * skyTopIntensity,
+ (skyTopColor[2] / 255.0) * skyTopIntensity
+ );
+ skyLight.mColorMiddle = new Vector3(
+ (skyMidColor[0] / 255.0) * skyMidIntensity,
+ (skyMidColor[1] / 255.0) * skyMidIntensity,
+ (skyMidColor[2] / 255.0) * skyMidIntensity
+ );
+ skyLight.mColorBottom = new Vector3(
+ (skyBotColor[0] / 255.0) * skyBotIntensity,
+ (skyBotColor[1] / 255.0) * skyBotIntensity,
+ (skyBotColor[2] / 255.0) * skyBotIntensity
+ );
+ view3D.updateLights(lights);
+ // view3D.redraw();
+ console.log([skyTopColor, skyTopIntensity, skyMidColor, skyMidIntensity, skyBotColor, skyBotIntensity]);
+ }
+
+ }, [skyTopColor, skyTopIntensity, skyMidColor, skyMidIntensity, skyBotColor, skyBotIntensity]);
+
+ // useEffect for area light
+ useEffect(() => {
+ if (view3D && lights[1]) {
+ const areaLight = lights[1];
+ areaLight.mColor = new Vector3(
+ (lightColor[0] / 255.0) * lightIntensity,
+ (lightColor[1] / 255.0) * lightIntensity,
+ (lightColor[2] / 255.0) * lightIntensity
+ );
+ areaLight.mTheta = (lightTheta * Math.PI) / 180.0;
+ areaLight.mPhi = (lightPhi * Math.PI) / 180.0;
+ view3D.updateLights(lights);
+ // view3D.redraw();
+ }
+ console.log([lightColor, lightIntensity, lightTheta, lightPhi]);
+ }, [lightColor, lightIntensity, lightTheta, lightPhi]);
+
+ const setInitialRenderMode = () => {
+ view3D.setVolumeRenderMode(isPT ? RENDERMODE_PATHTRACE : RENDERMODE_RAYMARCH);
+ view3D.setMaxProjectMode(currentVolume, false);
+ };
+
+ const DEFAULT_CHANNEL_COLOR = [128, 128, 128]; // Medium gray
+
+ const showChannelUI = (volume) => {
+ const channelGui = volume.imageInfo.channelNames.map((name, index) => ({
+ name,
+ enabled: index < 3,
+ colorD: volume.channelColorsDefault[index] || DEFAULT_CHANNEL_COLOR,
+ colorS: [0, 0, 0],
+ colorE: [0, 0, 0],
+ glossiness: 0,
+ window: 1,
+ level: 0.5,
+ isovalue: 128,
+ isosurface: false
+ }));
+ setChannels(channelGui);
+
+ // Log channel colors for verification
+ channelGui.forEach((channel, index) => {
+ console.log(`Channel ${index} (${channel.name}) color:`, channel.colorD);
+ });
+ };
+
+ const updateChannel = (index, key, value) => {
+ const updatedChannels = [...channels];
+ updatedChannels[index][key] = value;
+ setChannels(updatedChannels);
+
+ if (currentVolume) {
+ if (key === 'enabled') {
+ view3D.setVolumeChannelEnabled(currentVolume, index, value);
+ } else if (key === 'isosurface') {
+ view3D.setVolumeChannelOptions(currentVolume, index, { isosurfaceEnabled: value });
+ if (value) {
+ view3D.createIsosurface(currentVolume, index, updatedChannels[index].isovalue, 1.0);
+ } else {
+ view3D.clearIsosurface(currentVolume, index);
+ }
+ } else if (['colorD', 'colorS', 'colorE', 'glossiness'].includes(key)) {
+ view3D.updateChannelMaterial(
+ currentVolume,
+ index,
+ updatedChannels[index].colorD,
+ updatedChannels[index].colorS,
+ updatedChannels[index].colorE,
+ updatedChannels[index].glossiness
+ );
+ view3D.updateMaterial(currentVolume);
+ } else if (key === 'window' || key === 'level') {
+ const lut = new Lut().createFromWindowLevel(
+ updatedChannels[index].window,
+ updatedChannels[index].level
+ );
+ currentVolume.setLut(index, lut);
+ view3D.updateLuts(currentVolume);
+ }
+ view3D.redraw();
+ }
+ }
+
+
+ const updateChannelOptions = (index, options) => {
+ const updatedChannels = [...channels];
+ updatedChannels[index] = { ...updatedChannels[index], ...options };
+ setChannels(updatedChannels);
+
+ if (view3D) {
+ view3D.setVolumeChannelOptions(index, options);
+ if (options.isosurfaceEnabled !== undefined) {
+ if (options.isosurfaceEnabled) {
+ const channel = updatedChannels[index];
+ view3D.createIsosurface(
+ index,
+ channel.color,
+ channel.isovalue,
+ channel.isosurfaceOpacity,
+ channel.isosurfaceOpacity < 0.95
+ );
+ } else {
+ view3D.clearIsosurface(index);
+ }
+ }
+ if (options.isovalue !== undefined || options.isosurfaceOpacity !== undefined) {
+ const channel = updatedChannels[index];
+ view3D.updateIsosurface(index, channel.isovalue);
+ view3D.updateChannelMaterial(
+ index,
+ channel.color,
+ channel.specularColor,
+ channel.emissiveColor,
+ channel.glossiness
+ );
+ view3D.updateOpacity(index, channel.isosurfaceOpacity);
+ }
+ view3D.redraw();
+ }
+ };
+
+ const initializeChannelOptions = (volume) => {
+ const channelOptions = volume.imageInfo.channelNames.map((name, index) => ({
+ name,
+ enabled: index < 3,
+ color: volume.channelColorsDefault[index] || [128, 128, 128],
+ specularColor: [0, 0, 0],
+ emissiveColor: [0, 0, 0],
+ glossiness: 0,
+ isosurfaceEnabled: false,
+ isovalue: 127,
+ isosurfaceOpacity: 1.0
+ }));
+ setChannels(channelOptions);
+ };
+
+ const updateIsovalue = (index, isovalue) => {
+ if (currentVolume) {
+ view3D.updateIsosurface(currentVolume, index, isovalue);
+ view3D.redraw();
+ }
+ };
+
+ // Histogram-based LUT adjustments
+ const updateChannelLut = (index, type) => {
+ if (currentVolume) {
+ let lut;
+ if (type === 'autoIJ') {
+ const [hmin, hmax] = currentVolume.getHistogram(index).findAutoIJBins();
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ } else if (type === 'auto0') {
+ const [b, e] = currentVolume.getHistogram(index).findAutoMinMax();
+ lut = new Lut().createFromMinMax(b, e);
+ } else if (type === 'bestFit') {
+ const [hmin, hmax] = currentVolume.getHistogram(index).findBestFitBins();
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ } else if (type === 'pct50_98') {
+ const hmin = currentVolume.getHistogram(index).findBinOfPercentile(0.5);
+ const hmax = currentVolume.getHistogram(index).findBinOfPercentile(0.983);
+ lut = new Lut().createFromMinMax(hmin, hmax);
+ }
+
+ currentVolume.setLut(index, lut);
+ view3D.updateLuts(currentVolume);
+ view3D.redraw();
+ }
+ };
+
+ const setCameraModeHandler = (mode) => {
+ setCameraMode(mode);
+ };
+
+ const toggleTurntable = () => {
+ setIsTurntable(!isTurntable);
+ };
+
+ const toggleAxis = () => {
+ setShowAxis(!showAxis);
+ };
+
+ const toggleBoundingBox = () => {
+ setShowBoundingBox(!showBoundingBox);
+ };
+
+ const toggleScaleBar = () => {
+ setShowScaleBar(!showScaleBar);
+ };
+
+ const updateBackgroundColor = (color) => {
+ setBackgroundColor(color);
+ };
+
+ const updateBoundingBoxColor = (color) => {
+ setBoundingBoxColor(color);
+ };
+
+ const flipVolume = (axis) => {
+ if (axis === 'X') {
+ setFlipX(flipX * -1);
+ } else if (axis === 'Y') {
+ setFlipY(flipY * -1);
+ } else if (axis === 'Z') {
+ setFlipZ(flipZ * -1);
+ }
+ };
+
+ const gammaSliderToImageValues = (sliderValues) => {
+ let min = Number(sliderValues[0]);
+ let mid = Number(sliderValues[1]);
+ let max = Number(sliderValues[2]);
+ if (mid > max || mid < min) {
+ mid = 0.5 * (min + max);
+ }
+ const div = 255;
+ min /= div;
+ max /= div;
+ mid /= div;
+ const diff = max - min;
+ const x = (mid - min) / diff;
+ let scale = 4 * x * x;
+ if ((mid - 0.5) * (mid - 0.5) < 0.0005) {
+ scale = 1.0;
+ }
+ return [min, max, scale];
+ };
+
+ const updateGamma = (newGamma) => {
+ setGamma(newGamma);
+ };
+
+ const captureScreenshot = () => {
+ view3D.capture((dataUrl) => {
+ const anchor = document.createElement("a");
+ anchor.href = dataUrl;
+ anchor.download = "screenshot.png";
+ anchor.click();
+ });
+ };
+
+ const updateClipRegion = (key, value) => {
+ const updatedClipRegion = { ...clipRegion, [key]: value };
+ setClipRegion(updatedClipRegion);
+ };
+
+ const goToFrame = (frame) => {
+ if (frame >= 0 && frame < totalFrames) {
+ view3D.setTime(currentVolume, frame);
+ setCurrentFrame(frame);
+ }
+ };
+
+ const goToZSlice = (slice) => {
+ if (currentVolume && view3D.setZSlice(currentVolume, slice)) {
+ // Z slice updated successfully
+ const zSlider = document.getElementById("zSlider");
+ const zInput = document.getElementById("zValue");
+
+ if (zInput) {
+ zInput.value = slice;
+ }
+ if (zSlider) {
+ zSlider.value = slice;
+ }
+ } else {
+ console.log('Failed to update Z slice');
+ }
+ };
+
+ const playTimeSeries = () => {
+ if (timerId) {
+ clearInterval(timerId);
+ }
+ setIsPlaying(true);
+ const newTimerId = setInterval(() => {
+ setCurrentFrame((prevFrame) => {
+ const nextFrame = (prevFrame + 1) % totalFrames;
+ view3D.setTime(currentVolume, nextFrame);
+ return nextFrame;
+ });
+ }, 80);
+ setTimerId(newTimerId);
+ };
+
+ const pauseTimeSeries = () => {
+ if (timerId) {
+ clearInterval(timerId);
+ setTimerId(null);
+ }
+ setIsPlaying(false);
+ };
+
+ const rgbToHex = (r, g, b) => {
+ const toHex = (component) => {
+ const hex = Math.round(component).toString(16);
+ return hex.length === 1 ? '0' + hex : hex; // Ensures two digits
+ };
+
+ // Ensure r, g, b are valid numbers and fall back to 0 if undefined or invalid
+ r = isNaN(r) ? 0 : r;
+ g = isNaN(g) ? 0 : g;
+ b = isNaN(b) ? 0 : b;
+
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+ };
+
+ const updatePixelSamplingRate = (rate) => {
+ setSamplingRate(rate);
+ view3D.updatePixelSamplingRate(rate);
+ view3D.redraw();
+ };
+
+
+ const updateSkyLight = (position, intensity, color) => {
+ if (position === 'top') {
+ setSkyTopIntensity(intensity);
+ setSkyTopColor(color);
+ } else if (position === 'mid') {
+ setSkyMidIntensity(intensity);
+ setSkyMidColor(color);
+ } else if (position === 'bot') {
+ setSkyBotIntensity(intensity);
+ setSkyBotColor(color);
+ }
+ updateLights();
+ };
+
+ const updateAreaLight = (intensity, color, theta, phi) => {
+ setLightIntensity(intensity);
+ setLightColor(color);
+ setLightTheta(theta);
+ setLightPhi(phi);
+ updateLights();
+ };
+
+ const updateLights = () => {
+ const updatedLights = [...lights];
+ // Update sky light
+ updatedLights[0].mColorTop = new Vector3(
+ (skyTopColor[0] / 255.0) * skyTopIntensity,
+ (skyTopColor[1] / 255.0) * skyTopIntensity,
+ (skyTopColor[2] / 255.0) * skyTopIntensity
+ );
+ updatedLights[0].mColorMiddle = new Vector3(
+ (skyMidColor[0] / 255.0) * skyMidIntensity,
+ (skyMidColor[1] / 255.0) * skyMidIntensity,
+ (skyMidColor[2] / 255.0) * skyMidIntensity
+ );
+ updatedLights[0].mColorBottom = new Vector3(
+ (skyBotColor[0] / 255.0) * skyBotIntensity,
+ (skyBotColor[1] / 255.0) * skyBotIntensity,
+ (skyBotColor[2] / 255.0) * skyBotIntensity
+ );
+
+ // Update area light
+ updatedLights[1].mColor = new Vector3(
+ (lightColor[0] / 255.0) * lightIntensity,
+ (lightColor[1] / 255.0) * lightIntensity,
+ (lightColor[2] / 255.0) * lightIntensity
+ );
+ updatedLights[1].mTheta = (lightTheta * Math.PI) / 180.0;
+ updatedLights[1].mPhi = (lightPhi * Math.PI) / 180.0;
+
+ setLights(updatedLights);
+ view3D.updateLights(updatedLights);
+ view3D.redraw();
+ };
+
+ return (
+
+
+
+ Home
+ About
+ Help
+
+
+
+
+
+ {Object.keys(fileData).map((bodyPart) => (
+
+ {fileData[bodyPart].map((file) => (
+ handleFileSelect(bodyPart, file)}
+ >
+ {file}
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ setIsPT(checked)} /> Path Trace
+
+
+ Density:
+
+ Mask Alpha:
+
+ Primary Ray:
+
+ Secondary Ray:
+
+ Exposure:
+
+
+
+
+ FOV:
+
+ Focal Distance:
+
+ Aperture:
+
+ Pixel Sampling Rate:
+
+ Camera Mode:
+
+ X
+ Y
+ Z
+ 3D
+
+
+
+
+
+
+
+
+ Top Intensity:
+ updateSkyLight('top', value, skyTopColor)}
+ />
+
+
+ Top Color:
+
+
+ Mid Intensity:
+ updateSkyLight('mid', value, skyMidColor)}
+ />
+
+
+ Mid Color:
+
+
+
+
+
+ Intensity:
+ updateAreaLight(value, lightColor, lightTheta, lightPhi)}
+ />
+
+
+ Color:
+
+
+ Theta (deg):
+ updateAreaLight(lightIntensity, lightColor, value, lightPhi)}
+ />
+
+
+ Phi (deg):
+ updateAreaLight(lightIntensity, lightColor, lightTheta, value)}
+ />
+
+
+
+
+
+
+
{isTurntable ? "Stop Turntable" : "Start Turntable"}
+
{showAxis ? "Hide Axis" : "Show Axis"}
+
{showBoundingBox ? "Hide Bounding Box" : "Show Bounding Box"}
+
{showScaleBar ? "Hide Scale Bar" : "Show Scale Bar"}
+
flipVolume('X')}>Flip X
+
flipVolume('Y')}>Flip Y
+
flipVolume('Z')}>Flip Z
+
+ Background Color:
+
+
+ Bounding Box Color:
+
+
+
+
+ {channels.map((channel, index) => (
+
+
+ updateChannel(index, 'enabled', checked)} /> Enable
+
+ {channel.isosurfaceEnabled && (
+ <>
+
+ Isovalue:
+ updateChannelOptions(index, { isovalue: value })}
+ />
+
+
+ Isosurface Opacity:
+ updateChannelOptions(index, { isosurfaceOpacity: value })}
+ />
+
+
+ )}
+
+ Diffuse Color:
+
+
+ updateChannelLut(index, 'autoIJ')}>Auto IJ
+ updateChannelLut(index, 'auto0')}>Auto Min/Max
+ updateChannelLut(index, 'bestFit')}>Best Fit
+ updateChannelLut(index, 'pct50_98')}>50-98 Percentile
+
+
+ ))}
+
+
+
+
+ X Min:
+ updateClipRegion('xmin', value)} />
+
+
+ X Max:
+ updateClipRegion('xmax', value)} />
+
+
+ Y Min:
+ updateClipRegion('ymin', value)} />
+
+
+ Y Max:
+ updateClipRegion('ymax', value)} />
+
+
+ Z Min:
+ updateClipRegion('zmin', value)} />
+
+
+ Z Max:
+ updateClipRegion('zmax', value)} />
+
+
+
+
+
+ Play
+ Pause
+ goToFrame(currentFrame + 1)}>Forward
+ goToFrame(currentFrame - 1)}>Backward
+
+
+ Frame:
+
+ Z Slice:
+
+
+
+
+
+
+ Min: updateGamma([value, gamma[1], gamma[2]])} />
+
+
+ Mid: updateGamma([gamma[0], value, gamma[2]])} />
+
+
+ Max: updateGamma([gamma[0], gamma[1], value])} />
+
+
+
+
+
+
+
+
+ );
+}
+
+export default VolumeViewer;
\ No newline at end of file
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..5dacc8e
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,2 @@
+// API URL
+export const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:5000';
\ No newline at end of file
diff --git a/src/utils/colorUtils.js b/src/utils/colorUtils.js
new file mode 100644
index 0000000..faf14a8
--- /dev/null
+++ b/src/utils/colorUtils.js
@@ -0,0 +1,57 @@
+// src/utils/colorUtils.js
+
+import { Lut } from "@aics/volume-viewer";
+
+export const controlPointsToLut = (controlPoints) => {
+ if (!controlPoints || controlPoints.length < 2) {
+ return new Lut().createFromMinMax(0, 255);
+ }
+
+ const lut = new Lut();
+ const sortedPoints = [...controlPoints].sort((a, b) => a.x - b.x);
+
+ // Ensure the LUT spans the full range
+ if (sortedPoints[0].x > 0) {
+ sortedPoints.unshift({ ...sortedPoints[0], x: 0 });
+ }
+ if (sortedPoints[sortedPoints.length - 1].x < 1) {
+ sortedPoints.push({ ...sortedPoints[sortedPoints.length - 1], x: 1 });
+ }
+
+ // Create LUT from control points
+ for (let i = 0; i < sortedPoints.length - 1; i++) {
+ const p1 = sortedPoints[i];
+ const p2 = sortedPoints[i + 1];
+
+ const steps = Math.ceil((p2.x - p1.x) * 255);
+ for (let j = 0; j < steps; j++) {
+ const t = j / steps;
+ const x = p1.x + t * (p2.x - p1.x);
+ const y = p1.y + t * (p2.y - p1.y);
+
+ // Interpolate colors
+ const r = p1.color[0] + t * (p2.color[0] - p1.color[0]);
+ const g = p1.color[1] + t * (p2.color[1] - p1.color[1]);
+ const b = p1.color[2] + t * (p2.color[2] - p1.color[2]);
+
+ const index = Math.floor(x * 255);
+ lut.lut[index] = [r, g, b, 255];
+ }
+ }
+
+ return lut;
+};
+
+export const rgbaFromArray = (arr) => {
+ return {
+ r: arr[0] || 0,
+ g: arr[1] || 0,
+ b: arr[2] || 0,
+ a: arr[3] ? arr[3] / 255 : 1
+ };
+};
+
+export const rgbaToString = (rgba) => {
+ const { r, g, b, a } = rgba;
+ return `rgba(${r},${g},${b},${a})`;
+};
\ No newline at end of file