ensure canvases use correct data point count when timeBase changes

Author: Ritika Mishra

src/app/muscle-strength/page.tsx

@@ -36,7 +36,7 @@ import { useTheme } from "next-themes";
 
 const MuscleStrength = () => {
     const [isDisplay, setIsDisplay] = useState<boolean>(true); // Display state
-    const sampingrateref = useRef<number>(250);
+    const samplingrateref = useRef<number>(250);
     const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState(false);
     const connectedDeviceRef = useRef<any | null>(null); // UseRef for device tracking
     const canvasContainerRef = useRef<HTMLDivElement>(null);
@@ -644,7 +644,7 @@ const MuscleStrength = () => {
         forceUpdate(); // Trigger re-render
     };
     useEffect(() => {
-        dataPointCountRef.current = (sampingrateref.current * timeBase);
+        dataPointCountRef.current = (samplingrateref.current * timeBase);
     }, [timeBase]);
     const zoomRef = useRef(Zoom);
 
@@ -675,10 +675,10 @@ const MuscleStrength = () => {
     );
 
     notchFilters.forEach((filter) => {
-        filter.setbits(sampingrateref.current);
+        filter.setbits(samplingrateref.current);
     });
     EXGFilters.forEach((filter) => {
-        filter.setbits("12", sampingrateref.current);
+        filter.setbits("12", samplingrateref.current);
     });
     function processSample(dataView: DataView): void {
         if (dataView.byteLength !== SINGLE_SAMPLE_LEN) {

src/app/npg-lite/page.tsx

@@ -56,7 +56,7 @@ const NPG_Ble = () => {
     const [recordingElapsedTime, setRecordingElapsedTime] = useState<number>(0); // State to store the recording duration
     const [customTimeInput, setCustomTimeInput] = useState<string>(""); // State to store the custom stop time input
     const existingRecordRef = useRef<any | undefined>(undefined);
-    const sampingrateref = useRef<number>(500);
+    const samplingrateref = useRef<number>(500);
     const recordingStartTimeRef = useRef<number>(0);
     const endTimeRef = useRef<number | null>(null); // Ref to store the end time of the recording
     const canvasElementCountRef = useRef<number>(1);
@@ -105,6 +105,10 @@ const NPG_Ble = () => {
             return; // Exit if the ref is null
         }
 
+        // Ensure dataPointCount is calculated from current sampling rate and timeBase
+        const dpCount = samplingrateref.current * timeBase;
+        dataPointCountRef.current = dpCount;
+
         currentSweepPos.current = new Array(numChannels).fill(0);
         sweepPositions.current = new Array(numChannels).fill(0);
 
@@ -137,7 +141,7 @@ const NPG_Ble = () => {
         const opacityDarkMinor = "0.05";
         const opacityLightMajor = "0.4";
         const opacityLightMinor = "0.1";
-        const distanceminor = sampingrateref.current * 0.04;
+        const distanceminor = samplingrateref.current * 0.04;
         const numGridLines = (500 * 4) / distanceminor;
 
         for (let j = 1; j < numGridLines; j++) {
@@ -188,10 +192,10 @@ const NPG_Ble = () => {
             wglp.gScaleY = Zoom;
 
 
-            const line = new WebglLine(getLineColor(channelNumber, theme), dataPointCountRef.current);
+            const line = new WebglLine(getLineColor(channelNumber, theme), dpCount);
             wglp.gOffsetY = 0;
             line.offsetY = 0;
-            line.lineSpaceX(-1, 2 / dataPointCountRef.current);
+            line.lineSpaceX(-1, 2 / dpCount);
 
             wglp.addLine(line);
             newLines.push(line);
@@ -314,7 +318,7 @@ const NPG_Ble = () => {
         forceUpdate(); // Trigger re-render
     };
     useEffect(() => {
-        dataPointCountRef.current = (sampingrateref.current * timeBase);
+        dataPointCountRef.current = (samplingrateref.current * timeBase);
     }, [timeBase]);
     const zoomRef = useRef(Zoom);
 
@@ -338,13 +342,13 @@ const NPG_Ble = () => {
     const exgFiltersRef     = useRef(Array.from({ length: maxCanvasElementCountRef.current }, () => new EXGFilter()));
     const pointoneFilterRef = useRef(Array.from({ length: maxCanvasElementCountRef.current }, () => new HighPassFilter()));
     notchFiltersRef.current.forEach((filter) => {
-        filter.setbits(sampingrateref.current);
+        filter.setbits(samplingrateref.current);
     });
     exgFiltersRef.current.forEach((filter) => {
-        filter.setbits("12", sampingrateref.current);
+        filter.setbits("12", samplingrateref.current);
     });
     pointoneFilterRef.current.forEach((filter) => {
-        filter.setSamplingRate(sampingrateref.current);
+        filter.setSamplingRate(samplingrateref.current);
     });
 
     // Inside your component
@@ -1510,6 +1514,7 @@ const NPG_Ble = () => {
                                             <div className="relative w-[28rem] flex items-center rounded-lg py-2 border border-gray-300 dark:border-gray-600">
                                                 {/* Button for setting Time Base to 1 */}
                                                 <button
+                                                    type="button"
                                                     className="text-gray-700 dark:text-gray-400 mx-1 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
                                                     onClick={() => setTimeBase(1)}
                                                 >
@@ -1528,6 +1533,7 @@ const NPG_Ble = () => {
                                                 />
                                                 {/* Button for setting Time Base to 10 */}
                                                 <button
+                                                    type="button"
                                                     className="text-gray-700 dark:text-gray-400 mx-2 px-2 py-1 border rounded hover:bg-gray-200 dark:hover:bg-gray-700"
                                                     onClick={() => setTimeBase(10)}
                                                 >

src/components/Connection.tsx

@@ -124,7 +124,7 @@ const Connection: React.FC<ConnectionProps> = ({
     const existingRecordRef = useRef<any | undefined>(undefined);
     const devicenameref = useRef<string>("");
     const [deviceReady, setDeviceReady] = useState(false);
-    const sampingrateref = useRef<number>(0);
+    const samplingrateref = useRef<number>(0);
     const [open, setOpen] = useState(false);
     const [openfft, setOpenfft] = useState(false);
     const [isPauseState, setIsPauseState] = useState(false);
@@ -358,7 +358,7 @@ const Connection: React.FC<ConnectionProps> = ({
             });
         }
     };
-    const setCanvasCountInWorker = (canvasCount: number) => {
+    const setCanvasCountInWorker = useCallback((canvasCount: number) => {
         if (!workerRef.current) {
             initializeWorker();
         }
@@ -370,13 +370,12 @@ const Connection: React.FC<ConnectionProps> = ({
 
         // Send canvasCount independently to the worker
         workerRef.current?.postMessage({ action: 'setCanvasCount', canvasCount: canvasElementCountRef.current });
-    };
+    }, [selectedChannels, setCanvasCount]);
 
     // Run the canvas count sync after render (and when selectedChannels change)
     useEffect(() => {
         setCanvasCountInWorker(canvasElementCountRef.current);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedChannels.length]);
+    }, [setCanvasCountInWorker]);
 
     const setSelectedChannelsInWorker = (selectedChannels: number[]) => {
         if (!workerRef.current) {
@@ -576,7 +575,7 @@ const Connection: React.FC<ConnectionProps> = ({
 
                 if (sampling_rate) {
                     setCurrentSamplingRate(sampling_rate);
-                    sampingrateref.current = sampling_rate;
+                    samplingrateref.current = sampling_rate;
                 }
 
                 return {
@@ -1172,7 +1171,7 @@ const Connection: React.FC<ConnectionProps> = ({
             maxCanvasElementCountRef.current = 3;
             setSelectedChannel(1);
             setCurrentSamplingRate(500);
-            sampingrateref.current = 500;
+            samplingrateref.current = 500;
             setInterval(() => {
                 if (samplesReceivedRef.current === 0) {
                     disconnect();
@@ -1304,13 +1303,13 @@ const Connection: React.FC<ConnectionProps> = ({
         const EXGFilters = Array.from({ length: maxCanvasElementCountRef.current }, () => new EXGFilter());
         const pointoneFilter = Array.from({ length: maxCanvasElementCountRef.current }, () => new HighPassFilter());
         notchFilters.forEach((filter) => {
-            filter.setbits(sampingrateref.current); // Set the bits value for all instances
+            filter.setbits(samplingrateref.current); // Set the bits value for all instances
         });
         pointoneFilter.forEach((filter) => {
-            filter.setSamplingRate(sampingrateref.current); // Set the bits value for all instances
+            filter.setSamplingRate(samplingrateref.current); // Set the bits value for all instances
         });
         EXGFilters.forEach((filter) => {
-            filter.setbits(detectedBitsRef.current.toString(), sampingrateref.current); // Set the bits value for all instances
+            filter.setbits(detectedBitsRef.current.toString(), samplingrateref.current); // Set the bits value for all instances
         });
         try {
             while (isDeviceConnectedRef.current) {