[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: pre-commit-ci[bot]

app/src/components/containers/VisualizationContainer.tsx

@@ -23,7 +23,6 @@ interface VisualizationContainerProps {
 	onDrop: (event: React.DragEvent) => void;
 }
 
-
 export const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
 	onPointerMissed,
 	onDragOver,
@@ -79,7 +78,7 @@ export const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
 	// Extract constrained atom indices from frame constraints
 	const constrainedAtomIds = useMemo(() => {
 		const constrainedIds = new Set<number>();
-		
+
 		if (currentFrame?.constraints) {
 			for (const constraint of currentFrame.constraints) {
 				if (constraint.type === "FixAtoms" && constraint.indices) {
@@ -89,7 +88,7 @@ export const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
 				}
 			}
 		}
-		
+
 		return constrainedIds;
 	}, [currentFrame?.constraints]);
 
@@ -126,14 +125,20 @@ export const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
 								position={[0, 100, 0]}
 								intensity={1.0}
 								castShadow
-								shadow-mapSize-width={(roomConfig.Camera.camera_far || 300) * 10} // Adjust the width of the shadow map
-								shadow-mapSize-height={(roomConfig.Camera.camera_far || 300) * 10} // Adjust the height of the shadow map
+								shadow-mapSize-width={
+									(roomConfig.Camera.camera_far || 300) * 10
+								} // Adjust the width of the shadow map
+								shadow-mapSize-height={
+									(roomConfig.Camera.camera_far || 300) * 10
+								} // Adjust the height of the shadow map
 								shadow-camera-near={10} // Adjust the near clipping plane of the shadow camera
 								shadow-camera-far={800} // Adjust the far clipping plane of the shadow camera
 								shadow-camera-left={-1 * (roomConfig.Camera.camera_far || 300)} // Set the left boundary for the shadow camera frustum
-								shadow-camera-right={(roomConfig.Camera.camera_far || 300)} // Set the right boundary for the shadow camera frustum
-								shadow-camera-top={(roomConfig.Camera.camera_far || 300)} // Set the top boundary for the shadow camera frustum
-								shadow-camera-bottom={-1 * (roomConfig.Camera.camera_far || 300)} // Set the bottom boundary for the shadow camera frustum
+								shadow-camera-right={roomConfig.Camera.camera_far || 300} // Set the right boundary for the shadow camera frustum
+								shadow-camera-top={roomConfig.Camera.camera_far || 300} // Set the top boundary for the shadow camera frustum
+								shadow-camera-bottom={
+									-1 * (roomConfig.Camera.camera_far || 300)
+								} // Set the bottom boundary for the shadow camera frustum
 							/>
 						</>
 					) : (
@@ -147,10 +152,23 @@ export const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
 								vectors={vectorFieldData}
 								arrowsConfig={{
 									normalize: roomConfig.VectorDisplay.normalize || true,
-									colorrange: (roomConfig.VectorDisplay.colorrange || [0, 1.0]) as [number, number],
-									scale_vector_thickness: roomConfig.VectorDisplay.scale_vector_thickness || false,
+									colorrange: (roomConfig.VectorDisplay.colorrange || [
+										0, 1.0,
+									]) as [number, number],
+									scale_vector_thickness:
+										roomConfig.VectorDisplay.scale_vector_thickness || false,
 									opacity: roomConfig.VectorDisplay.opacity || 1.0,
-									colormap: vectorColormap.length > 0 ? vectorColormap : (roomConfig.VectorDisplay.default_colormap as [number, number, number][]) || [[0.66, 1.0, 0.5], [0.0, 1.0, 0.5]],
+									colormap:
+										vectorColormap.length > 0
+											? vectorColormap
+											: (roomConfig.VectorDisplay.default_colormap as [
+													number,
+													number,
+													number,
+												][]) || [
+													[0.66, 1.0, 0.5],
+													[0.0, 1.0, 0.5],
+												],
 								}}
 								pathTracingSettings={roomConfig.PathTracer}
 							/>

app/src/components/particles.tsx

@@ -64,8 +64,11 @@ export const Player = ({
 		if (playing) {
 			if (selectedFrames.indices.size > 0 && selectedFrames.active) {
 				// Selection mode - check if we're at the last selected frame
-				const selectedFramesList = Array.from(selectedFrames.indices).sort((a, b) => a - b);
-				const lastSelectedFrame = selectedFramesList[selectedFramesList.length - 1];
+				const selectedFramesList = Array.from(selectedFrames.indices).sort(
+					(a, b) => a - b,
+				);
+				const lastSelectedFrame =
+					selectedFramesList[selectedFramesList.length - 1];
 				if (step >= lastSelectedFrame) {
 					setStep(selectedFramesList[0]); // Jump to first selected frame
 				}
@@ -93,18 +96,24 @@ export const Player = ({
 					// Check if frame selection is active
 					if (selectedFrames.indices.size > 0 && selectedFrames.active) {
 						// Playing within selected frames only
-						const selectedFramesList = Array.from(selectedFrames.indices).sort((a, b) => a - b);
+						const selectedFramesList = Array.from(selectedFrames.indices).sort(
+							(a, b) => a - b,
+						);
 						const currentIndex = selectedFramesList.indexOf(prevStep);
-						
+
 						if (currentIndex !== -1) {
 							// Current frame is in selection, move to next selected frame
 							let nextIndex = currentIndex;
-							
+
 							// Apply frame rate (skip selected frames)
-							for (let i = 0; i < frameRate && nextIndex < selectedFramesList.length - 1; i++) {
+							for (
+								let i = 0;
+								i < frameRate && nextIndex < selectedFramesList.length - 1;
+								i++
+							) {
 								nextIndex++;
 							}
-							
+
 							if (nextIndex < selectedFramesList.length) {
 								nextStep = selectedFramesList[nextIndex];
 							} else {
@@ -120,7 +129,9 @@ export const Player = ({
 							}
 						} else {
 							// Current frame is not in selection, find next selected frame
-							const nextSelectedFrame = selectedFramesList.find(frame => frame > prevStep);
+							const nextSelectedFrame = selectedFramesList.find(
+								(frame) => frame > prevStep,
+							);
 							if (nextSelectedFrame !== undefined) {
 								nextStep = nextSelectedFrame;
 							} else if (loop) {
@@ -265,7 +276,6 @@ export const ParticleInstances = ({
 }) => {
 	const meshRef = useRef<THREE.InstancedMesh | null>(null);
 
-
 	useEffect(() => {
 		console.log("Updating frame:", frame);
 	}, [frame]);
@@ -313,10 +323,14 @@ export const ParticleInstances = ({
 
 			const visibleArray = Array.from(actualVisibleIndices);
 			const highlightColor = highlight ? selection_color : null;
-			
+
 			// Pre-calculate scale multipliers to avoid repeated conditionals
-			const scaleMultiplier = highlight === "backside" ? 1.25 : 
-								   highlight === "selection" ? 1.01 : 1.0;
+			const scaleMultiplier =
+				highlight === "backside"
+					? 1.25
+					: highlight === "selection"
+						? 1.01
+						: 1.0;
 
 			for (let i = 0; i < visibleArray.length; i++) {
 				const atomIdx = visibleArray[i];
@@ -327,12 +341,12 @@ export const ParticleInstances = ({
 				}
 
 				const radius = radii[atomIdx] * scaleMultiplier;
-				
+
 				// Optimize matrix operations by setting elements directly
 				matrix.makeScale(radius, radius, radius);
 				matrix.setPosition(position);
 				meshRef.current.setMatrixAt(i, matrix);
-				
+
 				// Set color efficiently
 				color.set(highlightColor || colors[atomIdx] || "#ffffff");
 				meshRef.current.setColorAt(i, color);
@@ -712,7 +726,10 @@ export const PerParticleVectors: React.FC<PerParticleVectorsProps> = ({
 
 	// Group vectors by type
 	const vectorsByType = useMemo(() => {
-		const grouped: Record<string, { start: THREE.Vector3; end: THREE.Vector3 }[]> = {};
+		const grouped: Record<
+			string,
+			{ start: THREE.Vector3; end: THREE.Vector3 }[]
+		> = {};
 		for (const vector of vectors) {
 			if (!grouped[vector.vectorType]) {
 				grouped[vector.vectorType] = [];
@@ -728,54 +745,67 @@ export const PerParticleVectors: React.FC<PerParticleVectorsProps> = ({
 	// Helper function to convert hex color to HSL colormap
 	const hexToHSLColormap = (hexColor: string): [number, number, number][] => {
 		// Simple hex to HSL conversion for single color
-		const hex = hexColor.replace('#', '');
+		const hex = hexColor.replace("#", "");
 		const r = parseInt(hex.substr(0, 2), 16) / 255;
 		const g = parseInt(hex.substr(2, 2), 16) / 255;
 		const b = parseInt(hex.substr(4, 2), 16) / 255;
-		
+
 		const max = Math.max(r, g, b);
 		const min = Math.min(r, g, b);
 		const diff = max - min;
 		const l = (max + min) / 2;
-		
+
 		let h = 0;
 		let s = 0;
-		
+
 		if (diff !== 0) {
 			s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
-			
+
 			switch (max) {
-				case r: h = (g - b) / diff + (g < b ? 6 : 0); break;
-				case g: h = (b - r) / diff + 2; break;
-				case b: h = (r - g) / diff + 4; break;
+				case r:
+					h = (g - b) / diff + (g < b ? 6 : 0);
+					break;
+				case g:
+					h = (b - r) / diff + 2;
+					break;
+				case b:
+					h = (r - g) / diff + 4;
+					break;
 			}
 			h /= 6;
 		}
-		
+
 		return [[h, s, l]];
 	};
 
 	return (
 		<>
 			{Object.entries(vectorsByType).map(([vectorType, typeVectors]) => {
-				const vectorColor = arrowsConfig.vector_colors?.[vectorType] || "#ff0000";
+				const vectorColor =
+					arrowsConfig.vector_colors?.[vectorType] || "#ff0000";
 				const colormap = hexToHSLColormap(vectorColor);
-				
+
 				const startMap = typeVectors.map((vec) => vec.start.toArray());
 				const endMap = typeVectors.map((vec) => vec.end.toArray());
-				
+
 				// Calculate color range for this vector type
-				const distances = typeVectors.map((vector) => vector.start.distanceTo(vector.end));
-				const colorRange: [number, number] = arrowsConfig.normalize 
+				const distances = typeVectors.map((vector) =>
+					vector.start.distanceTo(vector.end),
+				);
+				const colorRange: [number, number] = arrowsConfig.normalize
 					? [0, Math.max(...distances)]
-					: (Array.isArray(arrowsConfig.colorrange) ? arrowsConfig.colorrange : [0, 1]);
+					: Array.isArray(arrowsConfig.colorrange)
+						? arrowsConfig.colorrange
+						: [0, 1];
 
 				return (
 					<Arrows
 						key={vectorType}
 						start={startMap}
 						end={endMap}
-						scale_vector_thickness={arrowsConfig.scale_vector_thickness || false}
+						scale_vector_thickness={
+							arrowsConfig.scale_vector_thickness || false
+						}
 						colormap={colormap}
 						colorrange={colorRange}
 						opacity={arrowsConfig.opacity || 1.0}

app/src/components/progressbar.tsx

@@ -183,67 +183,67 @@ const FrameRateControl: React.FC<FrameRateControlProps> = ({
 			className="d-flex justify-content-center align-items-center user-select-none"
 			style={{ display: "flex", height: "100%" }}
 		>
-				<FormControl
-					type="number"
-					value={frameRate}
-					onChange={handleChange}
-					min={1}
-					size="sm"
+			<FormControl
+				type="number"
+				value={frameRate}
+				onChange={handleChange}
+				min={1}
+				size="sm"
+				style={{
+					width: "40px",
+					height: "18px",
+					fontSize: "10px",
+					textAlign: "center",
+				}}
+				title="Frame rate (1 = every frame, 2 = every 2nd frame, etc.)"
+			/>
+
+			{/* Frame loading icon */}
+			<OverlayTrigger
+				placement="top"
+				delay={{ show: 0, hide: 100 }}
+				overlay={<Tooltip>Loading frame data...</Tooltip>}
+			>
+				<div
 					style={{
-						width: "40px",
-						height: "18px",
-						fontSize: "10px",
-						textAlign: "center",
+						height: "100%",
+						animation: showLoadingIcon ? "pulse 1s infinite" : "none",
+						visibility: showLoadingIcon ? "visible" : "hidden",
+						alignItems: "center",
+						justifyContent: "center",
+						display: "flex",
 					}}
-					title="Frame rate (1 = every frame, 2 = every 2nd frame, etc.)"
-				/>
+					title="Loading frame data..."
+				>
+					<IoMdCodeDownload />
+				</div>
+			</OverlayTrigger>
 
-				{/* Frame loading icon */}
+			{/* Server connection spinner */}
+			{!connected && (
 				<OverlayTrigger
 					placement="top"
 					delay={{ show: 0, hide: 100 }}
-					overlay={<Tooltip>Loading frame data...</Tooltip>}
+					overlay={<Tooltip>Not connected to server</Tooltip>}
 				>
 					<div
 						style={{
-							height: "100%",
-							animation: showLoadingIcon ? "pulse 1s infinite" : "none",
-							visibility: showLoadingIcon ? "visible" : "hidden",
-							alignItems: "center",
-							justifyContent: "center",
-							display: "flex",
+							height: "25px",
+							width: "25px",
 						}}
-						title="Loading frame data..."
-					>
-						<IoMdCodeDownload />
-					</div>
-				</OverlayTrigger>
-
-				{/* Server connection spinner */}
-				{!connected && (
-					<OverlayTrigger
-						placement="top"
-						delay={{ show: 0, hide: 100 }}
-						overlay={<Tooltip>Not connected to server</Tooltip>}
 					>
 						<div
+							className="spinner-border spinner-border-sm text-primary"
+							role="status"
 							style={{
-								height: "25px",
-								width: "25px",
+								width: "15px",
+								height: "15px",
 							}}
-						>
-							<div
-								className="spinner-border spinner-border-sm text-primary"
-								role="status"
-								style={{
-									width: "15px",
-									height: "15px",
-								}}
-							></div>
-							<span className="visually-hidden">Loading...</span>
-						</div>
-					</OverlayTrigger>
-				)}
+						></div>
+						<span className="visually-hidden">Loading...</span>
+					</div>
+				</OverlayTrigger>
+			)}
 		</div>
 	);
 };

app/src/contexts/AppContext.tsx

@@ -103,7 +103,11 @@ interface AppState {
 	// Vector data
 	vectorProperties: Record<string, unknown>;
 	setVectorProperties: (properties: Record<string, unknown>) => void;
-	perParticleVectors: { start: THREE.Vector3; end: THREE.Vector3; vectorType: string }[];
+	perParticleVectors: {
+		start: THREE.Vector3;
+		end: THREE.Vector3;
+		vectorType: string;
+	}[];
 	vectorFieldData: [number, number, number][][];
 	// Computed colormap for vectors
 	vectorColormap: HSLColor[];