Add qubits validation to resourc-estimator (#25)

* Add max qubits for helmi and q50

* Update tests

* Update changelog

Author: JMuff22

CHANGELOG.rst

@@ -2,6 +2,12 @@
 Changelog
 =========
 
+Version 0.3.1
+==========================
+
+* Add device-specific qubit limits
+* Display maximum qubit count hint in the UI for each device
+
 Version 0.3.0
 ============
 

src/components/ResourceEstimator.jsx

@@ -7,7 +7,7 @@ import { DEVICE_PARAMS, calculateQPUSeconds } from '../utils/ResourceEstimatorMo
 
 const fontFamily = '-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif';
 
-const ParameterInput = ({ label, value, onChange }) => {
+const ParameterInput = ({ label, value, onChange, hint, error }) => {
 	const inputContainerStyle = {
 		flex: '1 0 45%',
 		marginBottom: '0.75rem',
@@ -25,12 +25,29 @@ const ParameterInput = ({ label, value, onChange }) => {
 		fontFamily: fontFamily
 	};
 
+	const hintStyle = {
+		display: 'block',
+		fontSize: '0.85rem',
+		color: '#6B7280',
+		marginTop: '0.25rem',
+		fontFamily: fontFamily
+	};
+
+	const errorStyle = {
+		display: 'block',
+		fontSize: '0.85rem',
+		color: '#DC2626',
+		marginTop: '0.25rem',
+		fontFamily: fontFamily,
+		fontWeight: '500'
+	};
+
 	const inputStyle = {
 		display: 'block',
 		width: '100%',
 		padding: '0.5rem 0.7rem',
 		backgroundColor: 'white',
-		border: '1px solid #D1D5DB',
+		border: error ? '2px solid #DC2626' : '1px solid #D1D5DB',
 		borderRadius: '0.35rem',
 		boxSizing: 'border-box',
 		color: '#000',
@@ -65,6 +82,7 @@ const ParameterInput = ({ label, value, onChange }) => {
 				style={inputStyle}
 				placeholder="Enter value"
 			/>
+			{error ? <span style={errorStyle}>{error}</span> : hint && <span style={hintStyle}>{hint}</span>}
 		</div>
 	);
 };
@@ -81,30 +99,69 @@ const ResourceEstimator = () => {
 	const [estimatedQPU, setEstimatedQPU] = useState(null);
 	const [history, setHistory] = useState([]);
 	const [basket, setBasket] = useState([]);
+	const [validationErrors, setValidationErrors] = useState({});
 
 	// Load history and basket from localStorage on component mount
 	useEffect(() => {
 		setHistory(JobHistoryManager.loadHistory());
 		setBasket(JobHistoryManager.loadBasket());
 	}, []);
 
+	// Re-validate qubits when device changes
+	useEffect(() => {
+		if (formData.qubits) {
+			validateField('qubits', formData.qubits);
+		}
+	}, [selectedDevice]);
+
+	const validateField = (field, value) => {
+		const numValue = parseInt(value, 10);
+		const newErrors = { ...validationErrors };
+
+		if (field === 'qubits') {
+			const deviceConfig = DEVICE_PARAMS[selectedDevice];
+			if (value === '' || value === undefined || value === null) {
+				newErrors.qubits = 'Qubits is required';
+			} else if (numValue < 1) {
+				newErrors.qubits = 'Must be at least 1 qubit';
+			} else if (deviceConfig.max_qubits && numValue > deviceConfig.max_qubits) {
+				newErrors.qubits = `${deviceConfig.name} supports max ${deviceConfig.max_qubits} qubits`;
+			} else {
+				delete newErrors.qubits;
+			}
+		} else {
+			// Validate other fields for positive values
+			if (value === '' || value === undefined || value === null) {
+				newErrors[field] = 'This field is required';
+			} else if (numValue < 1) {
+				newErrors[field] = 'Must be a positive integer';
+			} else {
+				delete newErrors[field];
+			}
+		}
+
+		setValidationErrors(newErrors);
+	};
+
 	const handleInputChange = (field, value) => {
 		console.log(`Updating ${field} to ${value}`);
 		setFormData(prevState => ({
 			...prevState,
 			[field]: value
 		}));
+		validateField(field, value);
 	};
 
 	const calculateQPU = () => {
-		// Validate all inputs are present before calculating
+		// Validate all fields first
 		const requiredFields = ['batches', 'depth', 'shots', 'qubits'];
-		const missingFields = requiredFields.filter(field =>
-			formData[field] === '' || formData[field] === undefined || formData[field] === null
-		);
+		requiredFields.forEach(field => validateField(field, formData[field]));
+
+		// Check if there are any validation errors
+		const hasErrors = Object.keys(validationErrors).length > 0 ||
+			requiredFields.some(field => formData[field] === '' || formData[field] === undefined || formData[field] === null);
 
-		if (missingFields.length > 0) {
-			alert('Please fill in all parameter fields before calculating.');
+		if (hasErrors) {
 			return;
 		}
 
@@ -114,7 +171,7 @@ const ResourceEstimator = () => {
 			depth: parseInt(formData.depth, 10),
 			shots: parseInt(formData.shots, 10),
 			qubits: parseInt(formData.qubits, 10)
-		};
+		}
 
 		// Calculate QPU seconds using our model
 		const qpuSeconds = calculateQPUSeconds(selectedDevice, numericFormData);
@@ -273,8 +330,10 @@ const ResourceEstimator = () => {
 						<ParameterInput
 							label="Number of Qubits"
 							value={formData.qubits}
-							onChange={(value) => handleInputChange('qubits', value)}
-						/>
+						onChange={(value) => handleInputChange('qubits', value)}
+						hint={`Max: ${DEVICE_PARAMS[selectedDevice].max_qubits} qubits`}
+						error={validationErrors.qubits}
+					/>
 					</div>
 
 					<div style={{marginTop: '1rem', textAlign: 'center'}}>

src/utils/ResourceEstimatorModel.js

@@ -8,6 +8,7 @@
 const DEVICE_PARAMS = {
 	helmi: {
 		name: 'Helmi',
+		max_qubits: 5,
 		intercept: 2.361885,
 		terms: [
 			{type: 'interaction', variables: ['batches', 'kshots'], coefficient: 0.432804},
@@ -27,6 +28,7 @@ const DEVICE_PARAMS = {
 	},
 	'vtt-q50': {
 		name: 'VTT Q50',
+		max_qubits: 54,
 		// Model: Log-transform (captures multiplicative structure)
 		logTransform: true,  // Model trained on log(y), must apply exp()
 		epsilon: 0.001000,

test_js_python_consistency.js

@@ -1,5 +1,22 @@
 // Test JavaScript model consistency with Python
-import { calculateQPUSeconds } from './src/utils/ResourceEstimatorModel.js';
+import { calculateQPUSeconds, DEVICE_PARAMS } from './src/utils/ResourceEstimatorModel.js';
+
+// First, verify device configurations
+console.log('Verifying device configurations...');
+console.log('Helmi max_qubits:', DEVICE_PARAMS.helmi.max_qubits);
+console.log('VTT Q50 max_qubits:', DEVICE_PARAMS['vtt-q50'].max_qubits);
+
+if (DEVICE_PARAMS.helmi.max_qubits !== 5) {
+	console.error('❌ Helmi should have max_qubits = 5');
+	process.exit(1);
+}
+
+if (DEVICE_PARAMS['vtt-q50'].max_qubits !== 54) {
+	console.error('❌ VTT Q50 should have max_qubits = 54');
+	process.exit(1);
+}
+
+console.log('✅ Device configurations are correct\n');
 
 // Test cases from CSV (verify JavaScript matches Python, not necessarily actual values)
 // The goal is to ensure JS and Python produce identical predictions