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];
+}

src/pydase/frontend/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "/static/css/main.d5ec2545.css",
-    "main.js": "/static/js/main.f745d155.js",
+    "main.js": "/static/js/main.0683ca07.js",
     "index.html": "/index.html",
     "main.d5ec2545.css.map": "/static/css/main.d5ec2545.css.map",
-    "main.f745d155.js.map": "/static/js/main.f745d155.js.map"
+    "main.0683ca07.js.map": "/static/js/main.0683ca07.js.map"
   },
   "entrypoints": [
     "static/css/main.d5ec2545.css",
-    "static/js/main.f745d155.js"
+    "static/js/main.0683ca07.js"
   ]
 }

src/pydase/frontend/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.f745d155.js"></script><link href="/static/css/main.d5ec2545.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.0683ca07.js"></script><link href="/static/css/main.d5ec2545.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/pydase/utils/helpers.py

@@ -4,6 +4,8 @@ from typing import Any, Optional
 
 from loguru import logger
 
+STANDARD_TYPES = ("int", "float", "bool", "str", "Enum", "NoneType", "Quantity")
+
 
 def get_class_and_instance_attributes(obj: object) -> dict[str, Any]:
     """Dictionary containing all attributes (both instance and class level) of a
@@ -124,9 +126,6 @@ def generate_paths_from_DataService_dict(
     return paths
 
 
-STANDARD_TYPES = ("int", "float", "bool", "str", "Enum", "NoneType", "Quantity")
-
-
 def get_nested_value_by_path_and_key(data: dict, path: str, key: str = "value") -> Any:
     """
     Get the value associated with a specific key from a dictionary given a path.