Merge pull request #38 from tiqi-group/refactor/extract-use-experiments-hook

Refactor: extract useExperiments hook

Author: mosmuell

frontend/src/App.tsx

@@ -5,12 +5,8 @@ import { Outlet } from "react-router";
 import { ReactRouterAppProvider } from "@toolpad/core/react-router";
 import type { Navigation } from "@toolpad/core/AppProvider";
 import { NotificationsProvider } from "@toolpad/core/useNotifications";
-import { useEffect, useReducer, useState } from "react";
-import { runMethod } from "./socket";
-import { deserialize } from "./utils/deserializer";
-import { SerializedObject } from "./types/SerializedObject";
+import { useReducer } from "react";
 import { ExperimentsContext } from "./contexts/ExperimentsContext";
-import { ExperimentDict } from "./types/ExperimentMetadata";
 import { SvgIcon } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { ParameterDisplayGroupsContext } from "./contexts/ParameterDisplayGroupsContext";
@@ -23,6 +19,7 @@ import { DeviceStateContext, deviceStateReducer } from "./contexts/DeviceStateCo
 import logo from "./assets/logo.png";
 import { useParameterStore } from "./hooks/useParameterStore";
 import { useParameterDisplayGroups } from "./hooks/useParameterDisplayGroups";
+import { useExperiments } from "./hooks/useExperiments";
 
 const NAVIGATION: Navigation = [
   {
@@ -76,21 +73,16 @@ export const BRANDING = {
 };
 
 export default function App() {
-  const [experiments, setExperiments] = useState<ExperimentDict>({});
   const [scheduledJobs, schedulerDispatch] = useReducer(reducer, {});
   const [deviceInfo, deviceInfoDispatch] = useReducer(deviceInfoReducer, {});
   const [deviceStates, deviceStateDispatch] = useReducer(deviceStateReducer, null);
   const parameterStore = useParameterStore();
   const { parameterDisplayGroups, parameterNamespaceToDisplayGroups } =
     useParameterDisplayGroups();
+  const experiments = useExperiments();
 
   useJobsSync(schedulerDispatch);
   useDevicesSync(deviceStateDispatch, deviceInfoDispatch);
-  useEffect(() => {
-    runMethod("experiments.get_experiments", [], {}, (ack) => {
-      setExperiments(deserialize(ack as SerializedObject) as ExperimentDict);
-    });
-  }, []);
 
   return (
     <ReactRouterAppProvider navigation={NAVIGATION} branding={BRANDING}>

frontend/src/components/parameterComponents/ParameterNumberComponent.tsx

@@ -58,7 +58,6 @@ export const ParameterNumberComponent = React.memo(
       [setError, id],
     );
 
-    console.log("something changed");
     return (
       <Input
         id={id}

frontend/src/hooks/useExperiments.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState, useCallback } from "react";
+import { runMethod, socket } from "../socket";
+import { deserialize } from "../utils/deserializer";
+import { SerializedObject } from "../types/SerializedObject";
+import { ExperimentDict } from "../types/ExperimentMetadata";
+
+/**
+ * React hook that provides access to experiment metadata.
+ *
+ * This hook:
+ * - Fetches the full set of experiments from the backend using
+ *   `experiments.get_experiments`.
+ * - Subscribes to `experiments.update` socket events to refresh data
+ *   when the backend notifies of changes.
+ * - Cleans up the socket listener on unmount.
+ *
+ * @returns The current experiment metadata as an ExperimentDict.
+ */
+export function useExperiments(): ExperimentDict {
+  const [experiments, setExperiments] = useState<ExperimentDict>({});
+
+  const fetchExperiments = useCallback(() => {
+    runMethod("experiments.get_experiments", [], {}, (ack) => {
+      setExperiments(deserialize(ack as SerializedObject) as ExperimentDict);
+    });
+  }, []);
+
+  useEffect(() => {
+    fetchExperiments();
+    socket.on("experiments.update", fetchExperiments);
+
+    return () => {
+      socket.off("experiments.update", fetchExperiments);
+    };
+  }, [fetchExperiments]);
+
+  return experiments;
+}

src/icon/server/api/experiments_controller.py

@@ -5,6 +5,7 @@
 from icon.server.api.models.experiment_dict import (
     ExperimentDict,
 )
+from icon.server.api.parameters_controller import get_added_removed_and_updated_keys
 from icon.server.web_server.socketio_emit_queue import emit_queue
 
 logger = logging.getLogger(__name__)
@@ -21,11 +22,15 @@ def get_experiments(self) -> ExperimentDict:
     def _update_experiment_metadata(self, new_experiments: ExperimentDict) -> None:
         logger.debug("Updating experiment metadata...")
 
+        added_exps, removes_exps, updated_exps = get_added_removed_and_updated_keys(
+            self._experiments, new_experiments
+        )
         self._experiments = new_experiments
 
-        emit_queue.put(
-            {
-                "event": "experiments.update",
-                "data": new_experiments,
-            }
-        )
+        if added_exps or removes_exps or updated_exps:
+            emit_queue.put(
+                {
+                    "event": "experiments.update",
+                    "data": new_experiments,
+                }
+            )