Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | /**
* @fileoverview Simulation Info Component
* @description Displays real-time simulation statistics and energy values
* @module components/SimulationInfo
*/
import { useSimulation } from '../context/SimulationContext';
import './SimulationInfo.css';
/**
* Simulation Info Component
* Shows atoms, bonds, time, status, and energy values in a compact bar
* @returns {JSX.Element} Simulation info bar
*/
function SimulationInfo() {
const simulation = useSimulation();
return (
<div className="simulation-info-bar">
<div className="info-group">
<span className="info-title">Simulation</span>
<div className="info-items">
<div className="info-item">
<span className="info-label">Atoms</span>
<span className="info-value">{simulation.atoms.length}</span>
</div>
<div className="info-item">
<span className="info-label">Bonds</span>
<span className="info-value">{simulation.bonds?.length || 0}</span>
</div>
<div className="info-item">
<span className="info-label">Time</span>
<span className="info-value">{simulation.time}</span>
</div>
<div className="info-item">
<span className="info-label">Status</span>
<span className={`info-value status-${simulation.isPaused ? 'paused' : 'running'}`}>
{simulation.isPaused ? '⏸ Paused' : '▶ Running'}
</span>
</div>
</div>
</div>
<div className="info-group energy-group">
<span className="info-title">Energy (kcal/mol)</span>
<div className="info-items">
<div className="info-item">
<span className="info-label">Kinetic</span>
<span className="info-value kinetic">{simulation.energy?.kinetic?.toFixed(2) || '0.00'}</span>
</div>
<div className="info-item">
<span className="info-label">Potential</span>
<span className="info-value potential">{simulation.energy?.potential?.toFixed(2) || '0.00'}</span>
</div>
<div className="info-item">
<span className="info-label">Total</span>
<span className="info-value total">{simulation.energy?.total?.toFixed(2) || '0.00'}</span>
</div>
<div className="info-item">
<span className="info-label">Temp</span>
<span className="info-value temp">{simulation.temperature?.toFixed(0) || '0'} K</span>
</div>
</div>
</div>
</div>
);
}
export default SimulationInfo;
|