Merge pull request #31 from aerubanov/burn-in-param-input

Add burn-in param input

Author: aerubanov

src/App.jsx

@@ -38,6 +38,7 @@ function App() {
     setInitialPosition2,
     setSeed2,
     burnIn,
+    setBurnIn,
     rHat,
     ess,
   } = useSamplingController();
@@ -71,6 +72,8 @@ function App() {
           setUseSecondChain={setUseSecondChain}
           setInitialPosition2={setInitialPosition2}
           setSeed2={setSeed2}
+          burnIn={burnIn}
+          setBurnIn={setBurnIn}
         />
       </div>
       <div className="App-main">

src/components/Controls.jsx

@@ -28,6 +28,8 @@ function Controls({
   setUseSecondChain,
   setInitialPosition2,
   setSeed2,
+  burnIn,
+  setBurnIn,
 }) {
   const [nSteps, setNSteps] = useState(params.steps || 10);
   const [draftLogP, setDraftLogP] = useState(logP);
@@ -40,6 +42,9 @@ function Controls({
   const [localY2, setLocalY2] = useState(initialPosition2?.y ?? 1);
   const [localSeed2, setLocalSeed2] = useState(seed2 || 43);
 
+  // Burn-in local state
+  const [localBurnIn, setLocalBurnIn] = useState(burnIn);
+
   // Sync draft with prop when it changes externally (e.g., on reset)
   useEffect(() => {
     setDraftLogP(logP);
@@ -59,6 +64,11 @@ function Controls({
     }
   }, [initialPosition2]);
 
+  // Sync burn-in state with props
+  useEffect(() => {
+    setLocalBurnIn(burnIn);
+  }, [burnIn]);
+
   const handleLogPChange = (e) => {
     setDraftLogP(e.target.value);
   };
@@ -137,6 +147,14 @@ function Controls({
     setSeed2(newSeed);
   };
 
+  const handleBurnInChange = (e) => {
+    const value = parseInt(e.target.value, 10);
+    setLocalBurnIn(value);
+    if (!isNaN(value) && value >= 0) {
+      setBurnIn(value);
+    }
+  };
+
   const acceptanceRate =
     iterationCount > 0
       ? ((acceptedCount / iterationCount) * 100).toFixed(1)
@@ -220,6 +238,21 @@ function Controls({
             />
           </div>
 
+          <div className="control-group">
+            <label htmlFor="burnin-input" className="control-label">
+              Burn-in Samples
+            </label>
+            <input
+              id="burnin-input"
+              type="number"
+              className="control-input"
+              step="1"
+              min="0"
+              value={localBurnIn}
+              onChange={handleBurnInChange}
+            />
+          </div>
+
           {/* Random Seed */}
           <div className="control-group">
             <div className="checkbox-group">
@@ -652,6 +685,8 @@ Controls.propTypes = {
   setUseSecondChain: PropTypes.func.isRequired,
   setInitialPosition2: PropTypes.func.isRequired,
   setSeed2: PropTypes.func.isRequired,
+  burnIn: PropTypes.number.isRequired,
+  setBurnIn: PropTypes.func.isRequired,
 };
 
 export default Controls;

src/hooks/useSamplingController.js

@@ -41,7 +41,7 @@ export default function useSamplingController() {
   const [ess, setEss] = useState(null);
 
   // Visualization params
-  const [burnIn] = useState(10);
+  const [burnIn, setBurnIn] = useState(10);
 
   // Refs to hold instances/values that don't trigger re-renders or need to be accessed in loops
   const logpInstanceRef = useRef(null);
@@ -382,6 +382,7 @@ export default function useSamplingController() {
     setInitialPosition2,
     setSeed2,
     burnIn,
+    setBurnIn,
     rHat,
     ess,
   };

tests/components/Controls.test.jsx

@@ -29,6 +29,8 @@ describe('Controls Component', () => {
     setUseSecondChain: vi.fn(),
     setInitialPosition2: vi.fn(),
     setSeed2: vi.fn(),
+    burnIn: 10,
+    setBurnIn: vi.fn(),
   };
 
   beforeEach(() => {
@@ -275,4 +277,63 @@ describe('Controls Component', () => {
       expect(screen.getByRole('button', { name: /reset/i })).toBeDisabled();
     });
   });
+
+  describe('Burn-in Parameter Input', () => {
+    it('should render burn-in input with correct initial value', () => {
+      const props = { ...mockProps, burnIn: 10, setBurnIn: vi.fn() };
+      render(<Controls {...props} />);
+
+      const burnInInput = screen.getByLabelText(/burn-in samples/i);
+      expect(burnInInput).toBeInTheDocument();
+      expect(burnInInput.value).toBe('10');
+    });
+
+    it('should call setBurnIn when burn-in value changes', () => {
+      const setBurnIn = vi.fn();
+      const props = { ...mockProps, burnIn: 10, setBurnIn };
+      render(<Controls {...props} />);
+
+      const burnInInput = screen.getByLabelText(/burn-in samples/i);
+      fireEvent.change(burnInInput, { target: { value: '15' } });
+
+      expect(setBurnIn).toHaveBeenCalledWith(15);
+    });
+
+    it('should have correct input attributes for validation', () => {
+      const props = { ...mockProps, burnIn: 10, setBurnIn: vi.fn() };
+      render(<Controls {...props} />);
+
+      const burnInInput = screen.getByLabelText(/burn-in samples/i);
+      expect(burnInInput).toHaveAttribute('type', 'number');
+      expect(burnInInput).toHaveAttribute('min', '0');
+      expect(burnInInput).toHaveAttribute('step', '1');
+    });
+
+    it('should sync local state when burnIn prop changes', () => {
+      const props = { ...mockProps, burnIn: 10, setBurnIn: vi.fn() };
+      const { rerender } = render(<Controls {...props} />);
+
+      const burnInInput = screen.getByLabelText(/burn-in samples/i);
+      expect(burnInInput.value).toBe('10');
+
+      // External change (e.g., from hook state update)
+      rerender(<Controls {...props} burnIn={20} />);
+
+      expect(burnInInput.value).toBe('20');
+    });
+
+    it('should not call setBurnIn with invalid values', () => {
+      const setBurnIn = vi.fn();
+      const props = { ...mockProps, burnIn: 10, setBurnIn };
+      render(<Controls {...props} />);
+
+      const burnInInput = screen.getByLabelText(/burn-in samples/i);
+
+      // Try to set non-numeric value
+      fireEvent.change(burnInInput, { target: { value: 'abc' } });
+
+      // setBurnIn should not be called with NaN
+      expect(setBurnIn).not.toHaveBeenCalled();
+    });
+  });
 });