refactor: address code review feedback on oscilloscope

- Improve ring buffer efficiency: one array copy instead of two (slice+shift+push vs slice+spread)
- Fix extra whitespace in canvas dimension assignments
- Add explanatory comments for eslint-disable-next-line react-hooks/exhaustive-deps

Co-authored-by: davidmonterocrespo24 <47928504+davidmonterocrespo24@users.noreply.github.com>

frontend/src/components/simulator/Oscilloscope.tsx

@@ -226,6 +226,8 @@ const ChannelCanvas: React.FC<ChannelCanvasProps> = ({
     const ctx = canvas.getContext('2d');
     if (ctx) ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     drawWaveform(canvas, samples, channel.color, windowEndMs, windowMs);
+    // Intentionally exclude canvasRef/wrapRef (stable refs) and the
+    // module-level drawWaveform function from the dependency array.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [samples, channel.color, windowEndMs, windowMs]);
 
@@ -261,6 +263,7 @@ const RulerCanvas: React.FC<RulerCanvasProps> = ({ windowEndMs, windowMs, timeDi
     const ctx = canvas.getContext('2d');
     if (ctx) ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
     drawRuler(canvas, windowEndMs, windowMs, timeDivMs);
+    // Intentionally exclude stable canvasRef/wrapRef and module-level drawRuler.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [windowEndMs, windowMs, timeDivMs]);
 

frontend/src/store/useOscilloscopeStore.ts

@@ -103,13 +103,10 @@ export const useOscilloscopeStore = create<OscilloscopeState>((set, get) => ({
       const buf = s.samples[channelId];
       if (!buf) return s;
 
-      let next: OscSample[];
-      if (buf.length >= MAX_SAMPLES) {
-        // Drop the oldest entry (shift)
-        next = [...buf.slice(1), { timeMs, state }];
-      } else {
-        next = [...buf, { timeMs, state }];
-      }
+      // Efficient copy: one allocation instead of two (avoids spread + slice).
+      const next = buf.slice();
+      if (next.length >= MAX_SAMPLES) next.shift(); // drop oldest
+      next.push({ timeMs, state });
       return { samples: { ...s.samples, [channelId]: next } };
     });
   },