Bug/multiple research updates

backend/target_zone_estimation.py

@@ -16,7 +16,7 @@ async def handle_data_streaming(websocket):
                 data = await asyncio.wait_for(websocket.receive_text(), timeout=0.1)
                 parsed_data = json.loads(data)
                 threshold = list(parsed_data.values())[0]
-                print(f"First value received: {threshold}")
+                print(f"Received data: {str(parsed_data)}")
             except asyncio.TimeoutError:
                 pass
             except json.JSONDecodeError:

frontend/src/App.js

@@ -118,11 +118,14 @@ function App() {
     };
   }, [reconnectWebsocket]);
 
-  function sendThresholdToBackend() {
+  function sendDataToBackend(data) {
     if (websocket.current && websocket.current.readyState === WebSocket.OPEN) {
-      const data = { threshold };
-      websocket.current.send(JSON.stringify(data));
-      console.log("Threshold sent to backend:", data);
+      if (typeof data !== "object") {
+        console.error(`Error: Invalid data type - expected an object, but found a ${typeof data}`)
+      } else {
+        websocket.current.send(JSON.stringify(data));
+        console.log("Data sent to backend:", data);
+      }
     } else {
       console.error("WebSocket is not open");
     }
@@ -158,7 +161,7 @@ function App() {
             setMovingAverageFactor={setMovingAverageFactor}
             threshold={threshold} 
             setThreshold={setThreshold}
-            sendThresholdToBackend={sendThresholdToBackend}
+            sendDataToBackend={sendDataToBackend}
           />
         </div>
         <div className="main-view">

frontend/src/__tests__/App.test.js

@@ -159,7 +159,7 @@ describe("WebSocket in App Component", () => {
     consoleLogSpy.mockRestore();
   });
 
-  test("sendThresholdToBackend sends correct data", async () => {
+  test("sendDataToBackend sends correct data", async () => {
     const consoleLogSpy = jest.spyOn(console, "log");
 
     render(<App />);
@@ -168,11 +168,15 @@ describe("WebSocket in App Component", () => {
     const thresholdInput = screen.getByTestId("threshold-input");
     await userEvent.clear(thresholdInput);
     await userEvent.type(thresholdInput, "25");
+
+    const MFAInput = screen.getByTestId("moving-average-input");
+    await userEvent.clear(MFAInput);
+    await userEvent.type(MFAInput, "20");
 
-    const sendButton = screen.getByTestId("threshold-btn");
+    const sendButton = screen.getByTestId("send-data-btn");
     await userEvent.click(sendButton);
 
-    expect(consoleLogSpy).toHaveBeenCalledWith("Threshold sent to backend:", { threshold: 25 });
+    expect(consoleLogSpy).toHaveBeenCalledWith("Data sent to backend:", { threshold: 25, movingAverageFactor: 20 });
 
     consoleLogSpy.mockRestore();
 });

frontend/src/__tests__/ResearcherToolbar.test.js

@@ -0,0 +1,78 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ResearcherToolbar from "../components/ResearcherToolbar";
+import { useState } from "react";
+
+function Wrapper({ sendDataToBackend }) {
+    const [threshold, setThreshold] = useState(5);
+    const [movingAverageFactor, setMovingAverageFactor] = useState(10);
+
+    return (
+      <ResearcherToolbar
+        threshold={threshold}
+        setThreshold={setThreshold}
+        movingAverageFactor={movingAverageFactor}
+        setMovingAverageFactor={setMovingAverageFactor}
+        sendDataToBackend={sendDataToBackend}
+      />
+    );
+  }
+
+describe("ResearcherToolbar data submission", () => {
+  let sendDataToBackend;
+
+  beforeEach(() => sendDataToBackend = jest.fn());
+
+  test("Submit sends only threshold when only threshold is changed", () => {
+    render(<Wrapper sendDataToBackend={sendDataToBackend}/>);
+
+    const thresholdInput = screen.getByTestId("threshold-input");
+    fireEvent.change(thresholdInput, { target: { value: "15" } });
+
+    const submitButton = screen.getByTestId("send-data-btn");
+    fireEvent.click(submitButton);
+
+    expect(sendDataToBackend).toHaveBeenCalledTimes(1);
+    expect(sendDataToBackend).toHaveBeenCalledWith({ threshold: 15 });
+  });
+
+  test("Submit sends only movingAverageFactor when only MAF is changed", () => {
+    render(<Wrapper sendDataToBackend={sendDataToBackend}/>);
+
+    const mafInput = screen.getByTestId("moving-average-input");
+    fireEvent.change(mafInput, { target: { value: "20" } });
+
+    const submitButton = screen.getByTestId("send-data-btn");
+    fireEvent.click(submitButton);
+
+    expect(sendDataToBackend).toHaveBeenCalledTimes(1);
+    expect(sendDataToBackend).toHaveBeenCalledWith({ movingAverageFactor: 20 });
+  });
+
+  test("Submit sends both values when both inputs are changed", () => {
+    render(<Wrapper sendDataToBackend={sendDataToBackend}/>);
+
+    const thresholdInput = screen.getByTestId("threshold-input");
+    const mafInput = screen.getByTestId("moving-average-input");
+
+    fireEvent.change(thresholdInput, { target: { value: "30" } });
+    fireEvent.change(mafInput, { target: { value: "40" } });
+
+    const submitButton = screen.getByTestId("send-data-btn");
+    fireEvent.click(submitButton);
+
+    expect(sendDataToBackend).toHaveBeenCalledTimes(1);
+    expect(sendDataToBackend).toHaveBeenCalledWith({
+      threshold: 30,
+      movingAverageFactor: 40,
+    });
+  });
+
+  test("Submit does not send data when nothing has changed", () => {
+    render(<Wrapper sendDataToBackend={sendDataToBackend}/>);
+
+    const submitButton = screen.getByTestId("send-data-btn");
+    fireEvent.click(submitButton);
+
+    expect(sendDataToBackend).not.toHaveBeenCalled();
+  });
+});

frontend/src/components/ResearcherToolbar.js

@@ -1,20 +1,24 @@
 import "./ResearcherToolbar.css";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import ToastNotification from "./toast/Toast";
 
 function ResearcherToolbar({
   movingAverageFactor,
   setMovingAverageFactor,
   threshold,
   setThreshold,
-  sendThresholdToBackend,
+  sendDataToBackend,
 }) {
-  const threshold_toast = useRef(null);
+  const toast = useRef(null);
+  const [sendThreshold, setSendThreshold] = useState(false);
+  const [sendMAF, setSendMAF] = useState(false);
 
-  function activateToast() {
-    threshold_toast.current.show({ severity: "success", summary: "Submitted", detail: "Threshold successfully submitted!" });
-  }
+  function toastNotifyChanged(parameterName="") {
+    if (parameterName !== "") toast.current.show({ severity: "success",  detail: `${parameterName} updated successfully!` });
 
+    else toast.current.show({ severity: "warn", summary: "Warning:", detail: "There are no changes to sumbit." });
+  }
+
   return (
     <div className="researcher-toolbar">
       <h3 className="toolbar-header">Researcher Toolbar</h3>
@@ -24,7 +28,10 @@ function ResearcherToolbar({
         <input
           type="number"
           value={movingAverageFactor}
-          onChange={(e) => setMovingAverageFactor(Number(e.target.value))}
+          onChange={ (e) => {
+            setMovingAverageFactor(Number(e.target.value));
+            setSendMAF(true);
+          }}
           className="tool-input"
           data-testid="moving-average-input"
         />
@@ -37,20 +44,37 @@ function ResearcherToolbar({
         <input
           type="number"
           value={threshold}
-          onChange={(e) => setThreshold(Number(e.target.value))}
+          onChange={(e) => {
+            setThreshold(Number(e.target.value));
+            setSendThreshold(true);
+          }}
           className="tool-input"
           data-testid="threshold-input"
         />
       </div>
 
-      <ToastNotification ref={threshold_toast} />
+      <ToastNotification ref={toast} />
       <button
         className="toolbar-button"
         onClick={() => {
-          sendThresholdToBackend();
-          activateToast();
+          const data = {}
+
+          if (sendThreshold) data.threshold = threshold
+          if (sendMAF) data.movingAverageFactor = movingAverageFactor;
+
+          let keys = Object.keys(data)
+
+          if (keys.length) sendDataToBackend(data);
+          else console.log("Tried to send old toolbar parameters to backend")
+
+          // empty string notification warns user of no change
+          toastNotifyChanged(keys.join(", "));
+
+          // reset send data flags
+          setSendMAF(false);
+          setSendThreshold(false);
         }}
-        data-testid="threshold-btn"
+        data-testid="send-data-btn"
       >
         Submit
       </button>