feat: formatting of notification message

- added function to get the value of a specified key in the serialized
DataService object by the full access path
- formatting notification message in "onNotify" function

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useReducer, useState } from 'react';
+import { useEffect, useReducer, useRef, useState } from 'react';
 import {
   Navbar,
   Form,
@@ -13,6 +13,7 @@ import {
   DataServiceJSON
 } from './components/DataServiceComponent';
 import './App.css';
+import { getDataServiceJSONValueByPathAndKey } from './utils/nestedObjectUtils';
 
 type ValueType = boolean | string | number | object;
 
@@ -117,6 +118,8 @@ const reducer = (state: State, action: Action): State => {
 
 const App = () => {
   const [state, dispatch] = useReducer(reducer, null);
+  const stateRef = useRef(state); // Declare a reference to hold the current state
+
   const [isInstantUpdate, setIsInstantUpdate] = useState(true);
   const [showSettings, setShowSettings] = useState(false);
   const [showNotification, setShowNotification] = useState(false);
@@ -133,20 +136,37 @@ const App = () => {
   const handleShowSettings = () => setShowSettings(true);
 
   function onNotify(value: UpdateNotification) {
-    const currentTime = new Date();
-    const timeString = currentTime.toISOString().substr(11, 8);
+    // Extracting data from the notification
+    const { parent_path, name, value: newValue } = value.data;
 
+    // Getting the current time in the required format
+    const timeString = new Date().toISOString().substring(11, 8);
+
+    // Dispatching the update to the reducer
     dispatch({
       type: 'UPDATE_ATTRIBUTE',
-      parent_path: value.data.parent_path,
-      name: value.data.name,
-      value: value.data.value
+      parent_path,
+      name,
+      value: newValue
     });
+
+    // Formatting the value if it is of type 'Quantity'
+    let notificationMsg: object | string = newValue;
+    const path = parent_path.concat('.', name);
+    if (
+      getDataServiceJSONValueByPathAndKey(stateRef.current, path, 'type') === 'Quantity'
+    ) {
+      notificationMsg = `${newValue['magnitude']} ${newValue['unit']}`;
+    }
+
+    // Creating a new notification
     const newNotification = {
       id: Math.random(),
       time: timeString,
-      text: `Attribute ${value.data.parent_path}.${value.data.name} updated to ${value.data.value}.`
+      text: `Attribute ${parent_path}.${name} updated to ${notificationMsg}.`
     };
+
+    // Adding the new notification to the list
     setNotifications((prevNotifications) => [newNotification, ...prevNotifications]);
   }
 
@@ -163,6 +183,11 @@ const App = () => {
     setExceptions((prevNotifications) => [newNotification, ...prevNotifications]);
   }
 
+  // Keep the state reference up to date
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+
   useEffect(() => {
     // Fetch data from the API when the component mounts
     fetch(`http://${hostname}:${port}/service-properties`)

frontend/src/utils/nestedObjectUtils.ts

@@ -0,0 +1,45 @@
+type Data = {
+  [key: string]: any;
+};
+
+const STANDARD_TYPES = [
+  'int',
+  'float',
+  'bool',
+  'str',
+  'Enum',
+  'method',
+  'NoneType',
+  'Quantity'
+];
+
+export function getDataServiceJSONValueByPathAndKey(
+  data: Data,
+  path: string,
+  key = 'value'
+): string {
+  // Split the path into parts
+  const parts = path.split(/\.|(?=\[\d+\])/);
+  parts.shift(); // Remove the first element
+
+  // Traverse the dictionary according to the path parts
+  for (const part of parts) {
+    if (part.startsWith('[')) {
+      // List index
+      const idx = parseInt(part.substring(1, part.length - 1)); // Strip the brackets and convert to integer
+      data = data[idx];
+    } else {
+      // Dictionary key
+      data = data[part];
+    }
+
+    // When the attribute is a class instance, the attributes are nested in the
+    // "value" key
+    if (!STANDARD_TYPES.includes(data['type'])) {
+      data = data['value'];
+    }
+  }
+
+  // Return the value at the terminal point of the path
+  return data[key];
+}