ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-25 10:30:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #103 from tiqi-group/90-display-the-functions-its-names-differently-in-the-ui

Browse Source 
feat: updates functions and how they are rendered
This commit is contained in:
Mose Müller 2024-02-28 11:28:04 +01:00 committed by GitHub
commit e5d7f4709f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
39 changed files with 897 additions and 662 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
README.md
View File

@ -53,7 +53,7 @@
<!--installation-start--> <!--installation-start-->
Install pydase using [`poetry`](https://python-poetry.org/): Install `pydase` using [`poetry`](https://python-poetry.org/):
```bash ```bash
poetry add pydase poetry add pydase
@ -81,6 +81,7 @@ Here's an example:
```python ```python
from pydase import DataService, Server from pydase import DataService, Server
from pydase.utils.decorators import frontend
class Device(DataService): class Device(DataService):
@ -118,6 +119,7 @@ class Device(DataService):
# run code to set power state # run code to set power state
self._power = value self._power = value
@frontend
def reset(self) -> None: def reset(self) -> None:
self.current = 0.0 self.current = 0.0
self.voltage = 0.0 self.voltage = 0.0
@ -191,11 +193,35 @@ In `pydase`, components are fundamental building blocks that bridge the Python b
- `enum.Enum`: Presented as an `EnumComponent`, facilitating dropdown selection. - `enum.Enum`: Presented as an `EnumComponent`, facilitating dropdown selection.
### Method Components ### Method Components
Within the `DataService` class of `pydase`, only methods devoid of arguments can be represented in the frontend, classified into two distinct categories
Methods within the `DataService` class have frontend representations: 1. [**Tasks**](#understanding-tasks-in-pydase): Argument-free asynchronous functions, identified within `pydase` as tasks, are inherently designed for frontend interaction. These tasks are automatically rendered with a start/stop button, allowing users to initiate or halt the task execution directly from the web interface.
2. **Synchronous Methods with `@frontend` Decorator**: Synchronous methods without arguments can also be presented in the frontend. For this, they have to be decorated with the `@frontend` decorator.
- Regular Methods: These are rendered as a `MethodComponent` in the frontend, allowing users to execute the method via an "execute" button. ```python
- Asynchronous Methods: These are manifested as the `AsyncMethodComponent` with "start"/"stop" buttons to manage the execution of [tasks](#understanding-tasks-in-pydase). import pydase
import pydase.components
import pydase.units as u
from pydase.utils.decorators import frontend
class MyService(pydase.DataService):
@frontend
def exposed_method(self) -> None:
...
async def my_task(self) -> None:
while True:
# ...
```
![Method Components](docs/images/method_components.png)
You can still define synchronous tasks with arguments and call them using a python client. However, decorating them with the `@frontend` decorator will raise a `FunctionDefinitionError`. Defining a task with arguments will raise a `TaskDefinitionError`.
I decided against supporting function arguments for functions rendered in the frontend due to the following reasons:
1. Feature Request Pitfall: supporting function arguments create a bottomless pit of feature requests. As users encounter the limitations of supported types, demands for extending support to more complex types would grow.
2. Complexity in Supported Argument Types: while simple types like `int`, `float`, `bool` and `str` could be easily supported, more complicated types are not (representation, (de-)serialization).
### DataService Instances (Nested Classes) ### DataService Instances (Nested Classes)
@ -209,9 +235,9 @@ from pydase import DataService, Server
class Channel(DataService): class Channel(DataService):
def __init__(self, channel_id: int) -> None: def __init__(self, channel_id: int) -> None:
super().__init__()
self._channel_id = channel_id self._channel_id = channel_id
self._current = 0.0 self._current = 0.0
super().__init__()
@property @property
def current(self) -> float: def current(self) -> float:
@ -227,9 +253,8 @@ class Channel(DataService):
class Device(DataService): class Device(DataService):
def __init__(self) -> None: def __init__(self) -> None:
self.channels = [Channel(i) for i in range(2)]
super().__init__() super().__init__()
self.channels = [Channel(i) for i in range(2)]
if __name__ == "__main__": if __name__ == "__main__":
@ -256,6 +281,36 @@ The `DeviceConnection` component acts as a base class within the `pydase` framew
In the frontend, this class abstracts away the direct interaction with the `connect` method and the `connected` property. Instead, it showcases user-defined attributes, methods, and properties. When the `connected` status is `False`, the frontend displays an overlay that prompts manual reconnection through the `connect()` method. Successful reconnection removes the overlay. In the frontend, this class abstracts away the direct interaction with the `connect` method and the `connected` property. Instead, it showcases user-defined attributes, methods, and properties. When the `connected` status is `False`, the frontend displays an overlay that prompts manual reconnection through the `connect()` method. Successful reconnection removes the overlay.
```python
import pydase.components
import pydase.units as u
class Device(pydase.components.DeviceConnection):
def __init__(self) -> None:
super().__init__()
self._voltage = 10 * u.units.V
def connect(self) -> None:
if not self._connected:
self._connected = True
@property
def voltage(self) -> float:
return self._voltage
class MyService(pydase.DataService):
def __init__(self) -> None:
super().__init__()
self.device = Device()
if __name__ == "__main__":
service_instance = MyService()
pydase.Server(service_instance).run()
```
![DeviceConnection Component](docs/images/DeviceConnection_component.png) ![DeviceConnection Component](docs/images/DeviceConnection_component.png)
##### Customizing Connection Logic ##### Customizing Connection Logic
@ -301,7 +356,7 @@ class MyDeviceConnection(pydase.components.DeviceConnection):
##### Reconnection Interval ##### Reconnection Interval
The automatic reconnection feature checks for device availability at a default interval of every 10 seconds. This interval is adjustable by modifying the `_reconnection_wait_time` attribute on the class instance. The `DeviceConnection` component automatically executes a task that checks for device availability at a default interval of 10 seconds. This interval is adjustable by modifying the `_reconnection_wait_time` attribute on the class instance.
#### `Image` #### `Image`
@ -312,7 +367,6 @@ The component offers methods to load images seamlessly, ensuring that visual con
```python ```python
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
import numpy as np import numpy as np
import pydase import pydase
from pydase.components.image import Image from pydase.components.image import Image
@ -390,12 +444,14 @@ class MySlider(pydase.components.NumberSlider):
@property @property
def value(self) -> float: def value(self) -> float:
"""Slider value."""
return self._value return self._value
@value.setter @value.setter
def value(self, value: float) -> None: def value(self, value: float) -> None:
if value < self._min or value > self._max: if value < self._min or value > self._max:
raise ValueError("Value is either below allowed min or above max value.") raise ValueError("Value is either below allowed min or above max value.")
self._value = value self._value = value
@ -471,7 +527,7 @@ In this example, `MySlider` overrides the `min`, `max`, `step_size`, and `value`
- Incorporating units in `NumberSlider` - Incorporating units in `NumberSlider`
The `NumberSlider` is capable of displaying units alongside values, enhancing its usability in contexts where unit representation is crucial. When utilizing `pydase.units`, you can specify units for the slider's value, allowing the component to reflect these units in the frontend. The `NumberSlider` is capable of [displaying units](#understanding-units-in-pydase) alongside values, enhancing its usability in contexts where unit representation is crucial. When utilizing `pydase.units`, you can specify units for the slider's value, allowing the component to reflect these units in the frontend.
Here's how to implement a `NumberSlider` with unit display: Here's how to implement a `NumberSlider` with unit display:
@ -606,9 +662,9 @@ Note: If the service class structure has changed since the last time its state w
## Understanding Tasks in pydase ## Understanding Tasks in pydase
In `pydase`, a task is defined as an asynchronous function contained in a class that inherits from `DataService`. These tasks usually contain a while loop and are designed to carry out periodic functions. In `pydase`, a task is defined as an asynchronous function without arguments contained in a class that inherits from `DataService`. These tasks usually contain a while loop and are designed to carry out periodic functions.
For example, a task might be used to periodically read sensor data, update a database, or perform any other recurring job. The core feature of `pydase` is its ability to automatically generate start and stop functions for these tasks. This allows you to control task execution via both the frontend and an `rpyc` client, giving you flexible and powerful control over your service's operation. For example, a task might be used to periodically read sensor data, update a database, or perform any other recurring job. One core feature of `pydase` is its ability to automatically generate start and stop functions for these tasks. This allows you to control task execution via both the frontend and python clients, giving you flexible and powerful control over your service's operation.
Another powerful feature of `pydase` is its ability to automatically start tasks upon initialization of the service. By specifying the tasks and their arguments in the `_autostart_tasks` dictionary in your service class's `__init__` method, `pydase` will automatically start these tasks when the server is started. Here's an example: Another powerful feature of `pydase` is its ability to automatically start tasks upon initialization of the service. By specifying the tasks and their arguments in the `_autostart_tasks` dictionary in your service class's `__init__` method, `pydase` will automatically start these tasks when the server is started. Here's an example:
@ -617,9 +673,9 @@ from pydase import DataService, Server
class SensorService(DataService): class SensorService(DataService):
def __init__(self): def __init__(self):
self.readout_frequency = 1.0
self._autostart_tasks["read_sensor_data"] = () # args passed to the function go there
super().__init__() super().__init__()
self.readout_frequency = 1.0
self._autostart_tasks["read_sensor_data"] = ()
def _process_data(self, data: ...) -> None: def _process_data(self, data: ...) -> None:
... ...
@ -639,22 +695,22 @@ if __name__ == "__main__":
Server(service).run() Server(service).run()
``` ```
In this example, `read_sensor_data` is a task that continuously reads data from a sensor. The readout frequency can be updated using the `readout_frequency` attribute. In this example, `read_sensor_data` is a task that continuously reads data from a sensor. By adding it to the `_autostart_tasks` dictionary, it will automatically start running when `Server(service).run()` is executed.
By listing it in the `_autostart_tasks` dictionary, it will automatically start running when `Server(service).run()` is executed. As with all tasks, `pydase` will generate `start_read_sensor_data` and `stop_read_sensor_data` methods, which can be called to manually start and stop the data reading task. The readout frequency can be updated using the `readout_frequency` attribute.
As with all tasks, `pydase` will also generate `start_read_sensor_data` and `stop_read_sensor_data` methods, which can be called to manually start and stop the data reading task.
## Understanding Units in pydase ## Understanding Units in pydase
`pydase` integrates with the [`pint`](https://pint.readthedocs.io/en/stable/) package to allow you to work with physical quantities within your service. This enables you to define attributes with units, making your service more expressive and ensuring consistency in the handling of physical quantities. `pydase` integrates with the [`pint`](https://pint.readthedocs.io/en/stable/) package to allow you to work with physical quantities within your service. This enables you to define attributes with units, making your service more expressive and ensuring consistency in the handling of physical quantities.
You can define quantities in your `DataService` subclass using `pydase`'s `units` functionality. These quantities can be set and accessed like regular attributes, and `pydase` will automatically handle the conversion between floats and quantities with units. You can define quantities in your `DataService` subclass using `pydase`'s `units` functionality.
Here's an example: Here's an example:
```python ```python
from typing import Any from typing import Any
from pydase import DataService, Server
import pydase.units as u import pydase.units as u
from pydase import DataService, Server
class ServiceClass(DataService): class ServiceClass(DataService):
@ -666,17 +722,15 @@ class ServiceClass(DataService):
return self._current return self._current
@current.setter @current.setter
def current(self, value: Any) -> None: def current(self, value: u.Quantity) -> None:
self._current = value self._current = value
if __name__ == "__main__": if __name__ == "__main__":
service = ServiceClass() service = ServiceClass()
# You can just set floats to the Quantity objects. The DataService __setattr__ will service.voltage = 10.0 * u.units.V
# automatically convert this service.current = 1.5 * u.units.mA
service.voltage = 10.0
service.current = 1.5
Server(service).run() Server(service).run()
``` ```

194
docs/dev-guide/Adding_Components.md
View File

@ -18,7 +18,7 @@ For example, for a `Image` component, create a file named `image.py`.
### Step 2: Define the Backend Class ### Step 2: Define the Backend Class
Within the newly created file, define a Python class representing the component. This class should inherit from `DataService` and contains the attributes that the frontend needs to render the component. Every public attribute defined in this class will synchronise across the clients. It can also contain methods which can be used to interact with the component from the backend. Within the newly created file, define a Python class representing the component. This class should inherit from `DataService` and contains the attributes that the frontend needs to render the component. Every public attribute defined in this class will synchronise across the clients. It can also contain (public) methods which you can provide for the user to interact with the component from the backend (or python clients).
For the `Image` component, the class may look like this: For the `Image` component, the class may look like this:
@ -31,21 +31,25 @@ from pydase.data_service.data_service import DataService
class Image(DataService): class Image(DataService):
def __init__( def __init__(
self, self,
image_representation: bytes = b"",
) -> None: ) -> None:
self.image_representation = image_representation
super().__init__() super().__init__()
self._value: str = ""
self._format: str = ""
# need to decode the bytes @property
def __setattr__(self, __name: str, __value: Any) -> None: def value(self) -> str:
if __name == "value": return self._value
if isinstance(__value, bytes):
__value = __value.decode()
return super().__setattr__(__name, __value)
@property
def format(self) -> str:
return self._format
def load_from_path(self, path: Path | str) -> None:
# changing self._value and self._format
...
``` ```
So, changing the `image_representation` will push the updated value to the browsers connected to the service. So, calling `load_from_path` will push the updated value and format to the browsers clients connected to the service.
### Step 3: Register the Backend Class ### Step 3: Register the Backend Class
@ -85,10 +89,11 @@ def test_Image(capsys: CaptureFixture) -> None:
class ServiceClass(DataService): class ServiceClass(DataService):
image = Image() image = Image()
service = ServiceClass() service_instance = ServiceClass()
# ...
```
service_instance.image.load_from_path("<path/to/image>.png")
assert service_instance.image.format == "PNG"
```
## Adding a Frontend Component to `pydase` ## Adding a Frontend Component to `pydase`
@ -107,43 +112,41 @@ Write the React component code, following the structure and patterns used in exi
For example, for the `Image` component, a template could look like this: For example, for the `Image` component, a template could look like this:
```tsx ```tsx
import { setAttribute, runMethod } from '../socket'; // use this when your component should sets values of attributes
// or runs a method, respectively
import { DocStringComponent } from './DocStringComponent';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Card, Collapse, Image } from 'react-bootstrap'; import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type ImageComponentProps = { type ImageComponentProps = {
name: string; name: string; // needed to create the fullAccessPath
parentPath?: string; parentPath: string; // needed to create the fullAccessPath
readOnly: boolean; readOnly: boolean; // component changable through frontend?
docString: string; docString: string; // contains docstring of your component
displayName: string; // name defined in the web_settings.json
id: string; // unique identifier - created from fullAccessPath
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
// Define your component specific props here changeCallback?: ( // function used to communicate changes to the backend
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
// component-specific properties
value: string; value: string;
format: string; format: string;
} };
export const ImageComponent = React.memo((props: ImageComponentProps) => { export const ImageComponent = React.memo((props: ImageComponentProps) => {
const { name, parentPath, value, docString, format, addNotification } = props; const { value, docString, format, addNotification, displayName, id } = props;
const renderCount = useRef(0); const renderCount = useRef(0);
const [open, setOpen] = useState(true); // add this if you want to expand/collapse your component const [open, setOpen] = useState(true); // add this if you want to expand/collapse your component
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [props.parentPath, props.name]
const id = getIdFromFullAccessPath(fullAccessPath); .filter((element) => element)
.join('.');
// Web settings contain the user-defined display name of the components (and possibly more later) // Your component logic here
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
@ -151,13 +154,11 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
// This will trigger a notification if notifications are enabled. // This will trigger a notification if notifications are enabled.
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`); addNotification(`${fullAccessPath} changed.`);
}, [props.value]); }, [props.value]);
// Your component logic here
return ( return (
<div className={'imageComponent'} id={id}> <div className="component imageComponent" id={id}>
{/* Add the Card and Collapse components here if you want to be able to expand and {/* Add the Card and Collapse components here if you want to be able to expand and
collapse your component. */} collapse your component. */}
<Card> <Card>
@ -185,57 +186,98 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
### Step 3: Emitting Updates to the Backend ### Step 3: Emitting Updates to the Backend
React components in the frontend often need to send updates to the backend, particularly when user interactions modify the component's state or data. In `pydase`, we use `socketio` for smooth communication of these changes. To handle updates, we primarily use two events: `setAttribute` for updating attributes, and `runMethod` for executing backend methods. Below is a detailed guide on how to emit these events from your frontend component: React components in the frontend often need to send updates to the backend, particularly when user interactions modify the component's state or data. In `pydase`, we use `socketio` for communicating these changes.<br>
There are two different events a component might want to trigger: updating an attribute or triggering a method. Below is a guide on how to emit these events from your frontend component:
1. **Setup for emitting events**: 1. **Updating Attributes**
First, ensure you've imported the necessary functions from the `socket` module for both updating attributes and executing methods:
Updating the value of an attribute or property in the backend is a very common requirement. However, we want to define components in a reusable way, i.e. they can be linked to the backend but also be used without emitting change events.<br>
This is why we pass a `changeCallback` function as a prop to the component which it can use to communicate changes. If no function is passed, the component can be used in forms, for example.
The `changeCallback` function takes the following arguments:
- `value`: the new value for the attribute, which must match the backend attribute type.
- `attributeName`: the name of the attribute within the `DataService` instance to update. Defaults to the `name` prop of the component.
- `prefix`: the access path for the parent object of the attribute to be updated. Defaults to the `parentPath` prop of the component.
- `callback`: the function that will be called when the server sends an acknowledgement. Defaults to `undefined`
For illustration, take the `ButtonComponent`. When the button state changes, we want to send this update to the backend:
```tsx ```tsx
import { setAttribute, runMethod } from '../socket'; // file: frontend/src/components/ButtonComponent.tsx
``` // ... (import statements)
2. **Event Parameters**: type ButtonComponentProps = {
// ...
- When using **`setAttribute`**, we send three main pieces of data: changeCallback?: (
- `name`: The name of the attribute within the `DataService` instance to update. value: unknown,
- `parentPath`: The access path for the parent object of the attribute to be updated. attributeName?: string,
- `value`: The new value for the attribute, which must match the backend attribute type. prefix?: string,
- For **`runMethod`**, the parameters are slightly different: callback?: (ack: unknown) => void
- `name`: The name of the method to be executed in the backend. ) => void;
- `parentPath`: Similar to `setAttribute`, it's the access path to the object containing the method. };
- `kwargs`: A dictionary of keyword arguments that the method requires.
3. **Implementation**:
For illustation, take the `ButtonComponent`. When the button state changes, we want to send this update to the backend:
```tsx
import { setAttribute } from '../socket';
// ... (other imports)
export const ButtonComponent = React.memo((props: ButtonComponentProps) => { export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
// ... const {
const { name, parentPath, value } = props; // ...
let displayName = ... // to access the user-defined display name changeCallback = () => {},
} = props;
const setChecked = (checked: boolean) => { const setChecked = (checked: boolean) => {
setAttribute(name, parentPath, checked); changeCallback(checked);
}; };
return ( return (
<ToggleButton <ToggleButton
checked={value}
value={parentPath}
// ... other props // ... other props
onChange={(e) => setChecked(e.currentTarget.checked)}> onChange={(e) => setChecked(e.currentTarget.checked)}>
{displayName} {/* component TSX */}
</ToggleButton> </ToggleButton>
); );
}); });
``` ```
In this example, whenever the button's checked state changes (`onChange` event), we invoke the `setChecked` method, which in turn emits the new state to the backend using `setAttribute`. In this example, whenever the button's checked state changes (`onChange` event), we invoke the `setChecked` method, which in turn emits the new state to the backend using `changeCallback`.
2. **Triggering Methods**
To trigger method through your component, you can either use the `MethodComponent` (which will render a button in the frontend), or use the low-level `runMethod` function. Its parameters are slightly different to the `changeCallback` function:
- `name`: the name of the method to be executed in the backend.
- `parentPath`: the access path to the object containing the method.
- `kwargs`: a dictionary of keyword arguments that the method requires.
To see how to use the `MethodComponent` in your component, have a look at the `DeviceConnection.tsx` file. Here is an example that demonstrates the usage of the `runMethod` function (also, have a look at the `MethodComponent.tsx` file):
```tsx
import { runMethod } from '../socket';
// ... (other imports)
type ComponentProps = {
name: string;
parentPath: string;
// ...
};
export const Component = React.memo((props: ComponentProps) => {
const {
name,
parentPath,
// ...
} = props;
// ...
const someFunction = () => {
// ...
runMethod(name, parentPath, {});
};
return (
{/* component TSX */}
);
});
```
### Step 4: Add the New Component to the GenericComponent ### Step 4: Add the New Component to the GenericComponent
@ -282,15 +324,17 @@ Inside the `GenericComponent` function, add a new conditional branch to render t
<ImageComponent <ImageComponent
name={name} name={name}
parentPath={parentPath} parentPath={parentPath}
readOnly={attribute.readonly} docString={attribute.value['value'].doc}
docString={attribute.doc} displayName={displayName}
id={id}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
// Add any other specific props for the ImageComponent here // Add any other specific props for the ImageComponent here
value={attribute.value['value']['value'] as string} value={attribute.value['value']['value'] as string}
format={attribute.value['format']['value'] as string} format={attribute.value['format']['value'] as string}
/> />
); );
} else { } else if (...) {
// other code // other code
``` ```
@ -305,12 +349,14 @@ For example, updating an `Image` component corresponds to setting a very long st
To create a custom notification message, you can update the message passed to the `addNotification` method in the `useEffect` hook in the component file file. For the `ImageComponent`, this could look like this: To create a custom notification message, you can update the message passed to the `addNotification` method in the `useEffect` hook in the component file file. For the `ImageComponent`, this could look like this:
```tsx ```tsx
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed.`); addNotification(`${fullAccessPath} changed.`);
}, [props.value]); }, [props.value]);
``` ```
However, you might want to use the `addNotification` at different places. For an example, see the [MethodComponent](../../frontend/src/components/MethodComponent.tsx). However, you might want to use the `addNotification` at different places. For an example, see the `MethodComponent`.
**Note**: you can specify the notification level by passing a string of type `LevelName` (one of 'CRITICAL', 'ERROR', 'WARNING', 'INFO', 'DEBUG'). The default value is 'DEBUG'. **Note**: you can specify the notification level by passing a string of type `LevelName` (one of 'CRITICAL', 'ERROR', 'WARNING', 'INFO', 'DEBUG'). The default value is 'DEBUG'.
### Step 6: Write Tests for the Component (TODO) ### Step 6: Write Tests for the Component (TODO)

BIN
docs/images/ColouredEnum_component.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/images/DeviceConnection_component.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/images/Example_App.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/images/Image_component.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 69 KiB

BIN
docs/images/Nested_Class_App.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
docs/images/Slider_component.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/images/Units_App.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/images/method_components.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

6
frontend/src/App.tsx
View File

@ -8,9 +8,9 @@ import {
LevelName LevelName
} from './components/NotificationsComponent'; } from './components/NotificationsComponent';
import { ConnectionToast } from './components/ConnectionToast'; import { ConnectionToast } from './components/ConnectionToast';
import { SerializedValue, setNestedValueByPath, State } from './utils/stateUtils'; import { setNestedValueByPath, State } from './utils/stateUtils';
import { WebSettingsContext, WebSetting } from './WebSettings'; import { WebSettingsContext, WebSetting } from './WebSettings';
import { Attribute, GenericComponent } from './components/GenericComponent'; import { SerializedValue, GenericComponent } from './components/GenericComponent';
type Action = type Action =
| { type: 'SET_DATA'; data: State } | { type: 'SET_DATA'; data: State }
@ -187,7 +187,7 @@ const App = () => {
<GenericComponent <GenericComponent
name="" name=""
parentPath="" parentPath=""
attribute={state as Attribute} attribute={state as SerializedValue}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
/> />

99
frontend/src/components/AsyncMethodComponent.tsx
View File

@ -1,63 +1,49 @@
import React, { useContext, useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { runMethod } from '../socket'; import { runMethod } from '../socket';
import { InputGroup, Form, Button } from 'react-bootstrap'; import { Form, Button, InputGroup } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
type AsyncMethodProps = { type AsyncMethodProps = {
name: string; name: string;
parentPath: string; parentPath: string;
parameters: Record<string, string>; value: 'RUNNING' | null;
value: Record<string, string>;
docString?: string; docString?: string;
hideOutput?: boolean; hideOutput?: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
render: boolean;
}; };
export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const { name, parentPath, docString, value: runningTask, addNotification } = props; const {
name,
parentPath,
docString,
value: runningTask,
addNotification,
displayName,
id
} = props;
// Conditional rendering based on the 'render' prop.
if (!props.render) {
return null;
}
const renderCount = useRef(0); const renderCount = useRef(0);
const formRef = useRef(null); const formRef = useRef(null);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
// updates the value of each form control that has a matching name in the
// runningTask object
if (runningTask) {
const formElement = formRef.current;
if (formElement) {
Object.entries(runningTask).forEach(([name, value]) => {
const inputElement = formElement.elements.namedItem(name);
if (inputElement) {
inputElement.value = value;
}
});
}
}
}, [runningTask]);
useEffect(() => {
let message: string; let message: string;
if (runningTask === null) { if (runningTask === null) {
message = `${parentPath}.${name} task was stopped.`; message = `${fullAccessPath} task was stopped.`;
} else { } else {
const runningTaskEntries = Object.entries(runningTask) message = `${fullAccessPath} was started.`;
.map(([key, value]) => `${key}: "${value}"`)
.join(', ');
message = `${parentPath}.${name} was started with parameters { ${runningTaskEntries} }.`;
} }
addNotification(message); addNotification(message);
}, [props.value]); }, [props.value]);
@ -65,50 +51,31 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const execute = async (event: React.FormEvent) => { const execute = async (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();
let method_name: string; let method_name: string;
const kwargs: Record<string, unknown> = {};
if (runningTask !== undefined && runningTask !== null) { if (runningTask !== undefined && runningTask !== null) {
method_name = `stop_${name}`; method_name = `stop_${name}`;
} else { } else {
Object.keys(props.parameters).forEach(
(name) => (kwargs[name] = event.target[name].value)
);
method_name = `start_${name}`; method_name = `start_${name}`;
} }
runMethod(method_name, parentPath, kwargs); runMethod(method_name, parentPath, {});
}; };
const args = Object.entries(props.parameters).map(([name, type], index) => {
const form_name = `${name} (${type})`;
const value = runningTask && runningTask[name];
const isRunning = value !== undefined && value !== null;
return (
<InputGroup key={index}>
<InputGroup.Text className="component-label">{form_name}</InputGroup.Text>
<Form.Control
type="text"
name={name}
defaultValue={isRunning ? value : ''}
disabled={isRunning}
/>
</InputGroup>
);
});
return ( return (
<div className="component asyncMethodComponent" id={id}> <div className="component asyncMethodComponent" id={id}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div> <div>Render count: {renderCount.current}</div>
)} )}
<h5>Function: {displayName}</h5>
<Form onSubmit={execute} ref={formRef}> <Form onSubmit={execute} ref={formRef}>
{args} <InputGroup>
<Button id={`button-${id}`} name={name} value={parentPath} type="submit"> <InputGroup.Text>
{runningTask ? 'Stop ' : 'Start '} {displayName}
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
</Button> </InputGroup.Text>
<Button id={`button-${id}`} type="submit">
{runningTask === 'RUNNING' ? 'Stop ' : 'Start '}
</Button>
</InputGroup>
</Form> </Form>
</div> </div>
); );

40
frontend/src/components/ButtonComponent.tsx
View File

@ -1,9 +1,6 @@
import React, { useContext, useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { ToggleButton } from 'react-bootstrap'; import { ToggleButton } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type ButtonComponentProps = { type ButtonComponentProps = {
@ -14,19 +11,30 @@ type ButtonComponentProps = {
docString: string; docString: string;
mapping?: [string, string]; // Enforce a tuple of two strings mapping?: [string, string]; // Enforce a tuple of two strings
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName: string;
id: string;
}; };
export const ButtonComponent = React.memo((props: ButtonComponentProps) => { export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
const { name, parentPath, value, readOnly, docString, addNotification } = props; const {
value,
readOnly,
docString,
addNotification,
changeCallback = () => {},
displayName,
id
} = props;
// const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name; // const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [props.parentPath, props.name]
const id = getIdFromFullAccessPath(fullAccessPath); .filter((element) => element)
const webSettings = useContext(WebSettingsContext); .join('.');
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
const renderCount = useRef(0); const renderCount = useRef(0);
@ -35,11 +43,11 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
}); });
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`); addNotification(`${fullAccessPath} changed to ${value}.`);
}, [props.value]); }, [props.value]);
const setChecked = (checked: boolean) => { const setChecked = (checked: boolean) => {
setAttribute(name, parentPath, checked); changeCallback(checked);
}; };
return ( return (
@ -53,7 +61,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
type="checkbox" type="checkbox"
variant={value ? 'success' : 'secondary'} variant={value ? 'success' : 'secondary'}
checked={value} checked={value}
value={parentPath} value={displayName}
disabled={readOnly} disabled={readOnly}
onChange={(e) => setChecked(e.currentTarget.checked)}> onChange={(e) => setChecked(e.currentTarget.checked)}>
{displayName} {displayName}

61
frontend/src/components/ColouredEnumComponent.tsx
View File

@ -1,9 +1,6 @@
import React, { useContext, useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col } from 'react-bootstrap'; import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type ColouredEnumComponentProps = { type ColouredEnumComponentProps = {
@ -14,40 +11,54 @@ type ColouredEnumComponentProps = {
readOnly: boolean; readOnly: boolean;
enumDict: Record<string, string>; enumDict: Record<string, string>;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName: string;
id: string;
}; };
export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => { export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => {
const { const {
name, name,
parentPath: parentPath,
value, value,
docString, docString,
enumDict, enumDict,
readOnly, readOnly,
addNotification addNotification,
displayName,
id
} = props; } = props;
const renderCount = useRef(0); let { changeCallback } = props;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); if (changeCallback === undefined) {
const id = getIdFromFullAccessPath(fullAccessPath); changeCallback = (value: string) => {
const webSettings = useContext(WebSettingsContext); setEnumValue(() => {
let displayName = name; return value;
});
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) { };
displayName = webSettings[fullAccessPath].displayName;
} }
const renderCount = useRef(0);
const [enumValue, setEnumValue] = useState(value);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
}); });
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`); setEnumValue(() => {
return props.value;
});
addNotification(`${fullAccessPath} changed to ${value}.`);
}, [props.value]); }, [props.value]);
const handleValueChange = (newValue: string) => {
setAttribute(name, parentPath, newValue);
};
return ( return (
<div className={'component enumComponent'} id={id}> <div className={'component enumComponent'} id={id}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
@ -62,17 +73,19 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
{readOnly ? ( {readOnly ? (
// Display the Form.Control when readOnly is true // Display the Form.Control when readOnly is true
<Form.Control <Form.Control
value={value} value={enumValue}
name={name}
disabled={true} disabled={true}
style={{ backgroundColor: enumDict[value] }} style={{ backgroundColor: enumDict[enumValue] }}
/> />
) : ( ) : (
// Display the Form.Select when readOnly is false // Display the Form.Select when readOnly is false
<Form.Select <Form.Select
aria-label="coloured-enum-select" aria-label="coloured-enum-select"
value={value} value={enumValue}
style={{ backgroundColor: enumDict[value] }} name={name}
onChange={(event) => handleValueChange(event.target.value)}> style={{ backgroundColor: enumDict[enumValue] }}
onChange={(event) => changeCallback(event.target.value)}>
{Object.entries(enumDict).map(([key]) => ( {Object.entries(enumDict).map(([key]) => (
<option key={key} value={key}> <option key={key} value={key}>
{key} {key}

81
frontend/src/components/DataServiceComponent.tsx
View File

@ -1,11 +1,9 @@
import { useContext, useState } from 'react'; import { useState } from 'react';
import React from 'react'; import React from 'react';
import { Card, Collapse } from 'react-bootstrap'; import { Card, Collapse } from 'react-bootstrap';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { Attribute, GenericComponent } from './GenericComponent'; import { SerializedValue, GenericComponent } from './GenericComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
type DataServiceProps = { type DataServiceProps = {
name: string; name: string;
@ -13,45 +11,35 @@ type DataServiceProps = {
parentPath?: string; parentPath?: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
}; };
export type DataServiceJSON = Record<string, Attribute>; export type DataServiceJSON = Record<string, SerializedValue>;
export const DataServiceComponent = React.memo( export const DataServiceComponent = React.memo(
({ ({
name, name,
props, props,
parentPath = '', parentPath = undefined,
isInstantUpdate, isInstantUpdate,
addNotification addNotification,
displayName,
id
}: DataServiceProps) => { }: DataServiceProps) => {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
let fullAccessPath = parentPath; const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
if (name) {
fullAccessPath = [parentPath, name].filter((element) => element).join('.');
}
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext); if (displayName !== '') {
let displayName = fullAccessPath; return (
<div className="component dataServiceComponent" id={id}>
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) { <Card>
displayName = webSettings[fullAccessPath].displayName; <Card.Header onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }}>
} {displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
return ( <Collapse in={open}>
<div className="component dataServiceComponent" id={id}> <Card.Body>
<Card> {Object.entries(props).map(([key, value]) => (
<Card.Header
onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover
>
{displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
<Collapse in={open}>
<Card.Body>
{Object.entries(props).map(([key, value]) => {
return (
<GenericComponent <GenericComponent
key={key} key={key}
attribute={value} attribute={value}
@ -60,12 +48,27 @@ export const DataServiceComponent = React.memo(
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
/> />
); ))}
})} </Card.Body>
</Card.Body> </Collapse>
</Collapse> </Card>
</Card> </div>
</div> );
); } else {
return (
<div className="component dataServiceComponent" id={id}>
{Object.entries(props).map(([key, value]) => (
<GenericComponent
key={key}
attribute={value}
name={key}
parentPath={fullAccessPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
/>
))}
</div>
);
}
} }
); );

28
frontend/src/components/DeviceConnection.tsx
View File

@ -1,8 +1,5 @@
import { useContext } from 'react';
import React from 'react'; import React from 'react';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent'; import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
import { MethodComponent } from './MethodComponent'; import { MethodComponent } from './MethodComponent';
@ -12,6 +9,8 @@ type DeviceConnectionProps = {
parentPath: string; parentPath: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
}; };
export const DeviceConnectionComponent = React.memo( export const DeviceConnectionComponent = React.memo(
@ -20,23 +19,14 @@ export const DeviceConnectionComponent = React.memo(
props, props,
parentPath, parentPath,
isInstantUpdate, isInstantUpdate,
addNotification addNotification,
displayName,
id
}: DeviceConnectionProps) => { }: DeviceConnectionProps) => {
const { connected, connect, ...updatedProps } = props; const { connected, connect, ...updatedProps } = props;
const connectedVal = connected.value; const connectedVal = connected.value;
let fullAccessPath = parentPath; const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
if (name) {
fullAccessPath = [parentPath, name].filter((element) => element).join('.');
}
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = fullAccessPath;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
return ( return (
<div className="deviceConnectionComponent" id={id}> <div className="deviceConnectionComponent" id={id}>
@ -48,9 +38,11 @@ export const DeviceConnectionComponent = React.memo(
<MethodComponent <MethodComponent
name="connect" name="connect"
parentPath={fullAccessPath} parentPath={fullAccessPath}
parameters={connect.parameters}
docString={connect.doc} docString={connect.doc}
addNotification={addNotification} addNotification={addNotification}
displayName={'reconnect'}
id={id + '-connect'}
render={true}
/> />
</div> </div>
)} )}
@ -60,6 +52,8 @@ export const DeviceConnectionComponent = React.memo(
parentPath={parentPath} parentPath={parentPath}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
displayName={displayName}
id={id}
/> />
</div> </div>
); );

75
frontend/src/components/EnumComponent.tsx
View File

@ -1,8 +1,5 @@
import React, { useContext, useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col } from 'react-bootstrap'; import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
@ -11,42 +8,54 @@ type EnumComponentProps = {
parentPath: string; parentPath: string;
value: string; value: string;
docString?: string; docString?: string;
readOnly: boolean;
enumDict: Record<string, string>; enumDict: Record<string, string>;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName: string;
id: string;
}; };
export const EnumComponent = React.memo((props: EnumComponentProps) => { export const EnumComponent = React.memo((props: EnumComponentProps) => {
const { const {
name, name,
parentPath: parentPath,
value, value,
docString, docString,
enumDict, enumDict,
addNotification addNotification,
displayName,
id,
readOnly
} = props; } = props;
const renderCount = useRef(0); let { changeCallback } = props;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); if (changeCallback === undefined) {
const id = getIdFromFullAccessPath(fullAccessPath); changeCallback = (value: string) => {
const webSettings = useContext(WebSettingsContext); setEnumValue(() => {
let displayName = name; return value;
});
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) { };
displayName = webSettings[fullAccessPath].displayName;
} }
const renderCount = useRef(0);
const [enumValue, setEnumValue] = useState(value);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
}); });
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`); addNotification(`${fullAccessPath} changed to ${value}.`);
}, [props.value]); }, [props.value]);
const handleValueChange = (newValue: string) => {
setAttribute(name, parentPath, newValue);
};
return ( return (
<div className={'component enumComponent'} id={id}> <div className={'component enumComponent'} id={id}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
@ -58,16 +67,24 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
{displayName} {displayName}
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
</InputGroup.Text> </InputGroup.Text>
<Form.Select
aria-label="Default select example" {readOnly ? (
value={value} // Display the Form.Control when readOnly is true
onChange={(event) => handleValueChange(event.target.value)}> <Form.Control value={enumValue} name={name} disabled={true} />
{Object.entries(enumDict).map(([key, val]) => ( ) : (
<option key={key} value={key}> // Display the Form.Select when readOnly is false
{key} - {val} <Form.Select
</option> aria-label="example-select"
))} value={enumValue}
</Form.Select> name={name}
onChange={(event) => changeCallback(event.target.value)}>
{Object.entries(enumDict).map(([key, val]) => (
<option key={key} value={key}>
{key} - {val}
</option>
))}
</Form.Select>
)}
</Col> </Col>
</Row> </Row>
</div> </div>

77
frontend/src/components/GenericComponent.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useContext } from 'react';
import { ButtonComponent } from './ButtonComponent'; import { ButtonComponent } from './ButtonComponent';
import { NumberComponent } from './NumberComponent'; import { NumberComponent } from './NumberComponent';
import { SliderComponent } from './SliderComponent'; import { SliderComponent } from './SliderComponent';
@ -12,6 +12,9 @@ import { DeviceConnectionComponent } from './DeviceConnection';
import { ImageComponent } from './ImageComponent'; import { ImageComponent } from './ImageComponent';
import { ColouredEnumComponent } from './ColouredEnumComponent'; import { ColouredEnumComponent } from './ColouredEnumComponent';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { WebSettingsContext } from '../WebSettings';
import { setAttribute } from '../socket';
type AttributeType = type AttributeType =
| 'str' | 'str'
@ -28,18 +31,18 @@ type AttributeType =
| 'Image' | 'Image'
| 'ColouredEnum'; | 'ColouredEnum';
type ValueType = boolean | string | number | object; type ValueType = boolean | string | number | Record<string, unknown>;
export type Attribute = { export type SerializedValue = {
type: AttributeType; type: AttributeType;
value?: ValueType | ValueType[]; value?: ValueType | ValueType[];
readonly: boolean; readonly: boolean;
doc?: string | null; doc?: string | null;
parameters?: Record<string, string>;
async?: boolean; async?: boolean;
frontend_render?: boolean;
enum?: Record<string, string>; enum?: Record<string, string>;
}; };
type GenericComponentProps = { type GenericComponentProps = {
attribute: Attribute; attribute: SerializedValue;
name: string; name: string;
parentPath: string; parentPath: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
@ -54,6 +57,24 @@ export const GenericComponent = React.memo(
isInstantUpdate, isInstantUpdate,
addNotification addNotification
}: GenericComponentProps) => { }: GenericComponentProps) => {
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
function changeCallback(
value: unknown,
attributeName: string = name,
prefix: string = parentPath,
callback: (ack: unknown) => void = undefined
) {
setAttribute(attributeName, prefix, value, callback);
}
if (attribute.type === 'bool') { if (attribute.type === 'bool') {
return ( return (
<ButtonComponent <ButtonComponent
@ -63,6 +84,9 @@ export const GenericComponent = React.memo(
readOnly={attribute.readonly} readOnly={attribute.readonly}
value={Boolean(attribute.value)} value={Boolean(attribute.value)}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'float' || attribute.type === 'int') { } else if (attribute.type === 'float' || attribute.type === 'int') {
@ -76,6 +100,9 @@ export const GenericComponent = React.memo(
value={Number(attribute.value)} value={Number(attribute.value)}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'Quantity') { } else if (attribute.type === 'Quantity') {
@ -90,6 +117,9 @@ export const GenericComponent = React.memo(
unit={attribute.value['unit']} unit={attribute.value['unit']}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'NumberSlider') { } else if (attribute.type === 'NumberSlider') {
@ -105,6 +135,9 @@ export const GenericComponent = React.memo(
stepSize={attribute.value['step_size']} stepSize={attribute.value['step_size']}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'Enum') { } else if (attribute.type === 'Enum') {
@ -114,8 +147,12 @@ export const GenericComponent = React.memo(
parentPath={parentPath} parentPath={parentPath}
docString={attribute.doc} docString={attribute.doc}
value={String(attribute.value)} value={String(attribute.value)}
readOnly={attribute.readonly}
enumDict={attribute.enum} enumDict={attribute.enum}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'method') { } else if (attribute.type === 'method') {
@ -125,8 +162,10 @@ export const GenericComponent = React.memo(
name={name} name={name}
parentPath={parentPath} parentPath={parentPath}
docString={attribute.doc} docString={attribute.doc}
parameters={attribute.parameters}
addNotification={addNotification} addNotification={addNotification}
displayName={displayName}
id={id}
render={attribute.frontend_render}
/> />
); );
} else { } else {
@ -135,9 +174,11 @@ export const GenericComponent = React.memo(
name={name} name={name}
parentPath={parentPath} parentPath={parentPath}
docString={attribute.doc} docString={attribute.doc}
parameters={attribute.parameters}
value={attribute.value as Record<string, string>} value={attribute.value as Record<string, string>}
addNotification={addNotification} addNotification={addNotification}
displayName={displayName}
id={id}
render={attribute.frontend_render}
/> />
); );
} }
@ -151,6 +192,9 @@ export const GenericComponent = React.memo(
parentPath={parentPath} parentPath={parentPath}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'DataService') { } else if (attribute.type === 'DataService') {
@ -161,6 +205,8 @@ export const GenericComponent = React.memo(
parentPath={parentPath} parentPath={parentPath}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'DeviceConnection') { } else if (attribute.type === 'DeviceConnection') {
@ -171,17 +217,20 @@ export const GenericComponent = React.memo(
parentPath={parentPath} parentPath={parentPath}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
displayName={displayName}
id={id}
/> />
); );
} else if (attribute.type === 'list') { } else if (attribute.type === 'list') {
return ( return (
<ListComponent <ListComponent
name={name} name={name}
value={attribute.value as Attribute[]} value={attribute.value as SerializedValue[]}
docString={attribute.doc} docString={attribute.doc}
parentPath={parentPath} parentPath={parentPath}
isInstantUpdate={isInstantUpdate} isInstantUpdate={isInstantUpdate}
addNotification={addNotification} addNotification={addNotification}
id={id}
/> />
); );
} else if (attribute.type === 'Image') { } else if (attribute.type === 'Image') {
@ -189,12 +238,13 @@ export const GenericComponent = React.memo(
<ImageComponent <ImageComponent
name={name} name={name}
parentPath={parentPath} parentPath={parentPath}
value={attribute.value['value']['value'] as string}
readOnly={attribute.readonly}
docString={attribute.value['value'].doc} docString={attribute.value['value'].doc}
// Add any other specific props for the ImageComponent here displayName={displayName}
format={attribute.value['format']['value'] as string} id={id}
addNotification={addNotification} addNotification={addNotification}
// Add any other specific props for the ImageComponent here
value={attribute.value['value']['value'] as string}
format={attribute.value['format']['value'] as string}
/> />
); );
} else if (attribute.type === 'ColouredEnum') { } else if (attribute.type === 'ColouredEnum') {
@ -207,6 +257,9 @@ export const GenericComponent = React.memo(
readOnly={attribute.readonly} readOnly={attribute.readonly}
enumDict={attribute.enum} enumDict={attribute.enum}
addNotification={addNotification} addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/> />
); );
} else { } else {

26
frontend/src/components/ImageComponent.tsx
View File

@ -1,48 +1,39 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Card, Collapse, Image } from 'react-bootstrap'; import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type ImageComponentProps = { type ImageComponentProps = {
name: string; name: string;
parentPath: string; parentPath: string;
value: string; value: string;
readOnly: boolean;
docString: string; docString: string;
format: string; format: string;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
}; };
export const ImageComponent = React.memo((props: ImageComponentProps) => { export const ImageComponent = React.memo((props: ImageComponentProps) => {
const { name, parentPath, value, docString, format, addNotification } = props; const { value, docString, format, addNotification, displayName, id } = props;
const renderCount = useRef(0); const renderCount = useRef(0);
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [props.parentPath, props.name]
const id = getIdFromFullAccessPath(fullAccessPath); .filter((element) => element)
const webSettings = useContext(WebSettingsContext); .join('.');
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
}); });
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed.`); addNotification(`${fullAccessPath} changed.`);
}, [props.value]); }, [props.value]);
return ( return (
<div className="component imageComponent" id={id}> <div className="component imageComponent" id={id}>
{process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div>
)}
<Card> <Card>
<Card.Header <Card.Header
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
@ -57,7 +48,6 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>
)} )}
{/* Your component JSX here */}
{format === '' && value === '' ? ( {format === '' && value === '' ? (
<p>No image set in the backend.</p> <p>No image set in the backend.</p>
) : ( ) : (

10
frontend/src/components/ListComponent.tsx
View File

@ -1,25 +1,23 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { Attribute, GenericComponent } from './GenericComponent'; import { SerializedValue, GenericComponent } from './GenericComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type ListComponentProps = { type ListComponentProps = {
name: string; name: string;
parentPath?: string; parentPath?: string;
value: Attribute[]; value: SerializedValue[];
docString: string; docString: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
id: string;
}; };
export const ListComponent = React.memo((props: ListComponentProps) => { export const ListComponent = React.memo((props: ListComponentProps) => {
const { name, parentPath, value, docString, isInstantUpdate, addNotification } = const { name, parentPath, value, docString, isInstantUpdate, addNotification, id } =
props; props;
const renderCount = useRef(0); const renderCount = useRef(0);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;

101
frontend/src/components/MethodComponent.tsx
View File

@ -1,85 +1,46 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { runMethod } from '../socket'; import { runMethod } from '../socket';
import { Button, InputGroup, Form, Collapse } from 'react-bootstrap'; import { Button, Form } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type MethodProps = { type MethodProps = {
name: string; name: string;
parentPath: string; parentPath: string;
parameters: Record<string, string>;
docString?: string; docString?: string;
hideOutput?: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
render: boolean;
}; };
export const MethodComponent = React.memo((props: MethodProps) => { export const MethodComponent = React.memo((props: MethodProps) => {
const { name, parentPath, docString, addNotification } = props; const { name, parentPath, docString, addNotification, displayName, id } = props;
const renderCount = useRef(0); // Conditional rendering based on the 'render' prop.
const [hideOutput, setHideOutput] = useState(false); if (!props.render) {
// Add a new state variable to hold the list of function calls return null;
const [functionCalls, setFunctionCalls] = useState([]);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
} }
useEffect(() => { const renderCount = useRef(0);
renderCount.current++; const formRef = useRef(null);
if (props.hideOutput !== undefined) { const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
setHideOutput(props.hideOutput);
}
});
const triggerNotification = (args: Record<string, string>) => { const triggerNotification = () => {
const argsString = Object.entries(args) const message = `Method ${fullAccessPath} was triggered.`;
.map(([key, value]) => `${key}: "${value}"`)
.join(', ');
let message = `Method ${parentPath}.${name} was triggered`;
if (argsString === '') {
message += '.';
} else {
message += ` with arguments {${argsString}}.`;
}
addNotification(message); addNotification(message);
}; };
const execute = async (event: React.FormEvent) => { const execute = async (event: React.FormEvent) => {
event.preventDefault(); event.preventDefault();
runMethod(name, parentPath, {});
const kwargs = {}; triggerNotification();
Object.keys(props.parameters).forEach(
(name) => (kwargs[name] = event.target[name].value)
);
runMethod(name, parentPath, kwargs, (ack) => {
// Update the functionCalls state with the new call if we get an acknowledge msg
if (ack !== undefined) {
setFunctionCalls((prevCalls) => [
...prevCalls,
{ name, args: kwargs, result: ack }
]);
}
});
triggerNotification(kwargs);
}; };
const args = Object.entries(props.parameters).map(([name, type], index) => { useEffect(() => {
const form_name = `${name} (${type})`; renderCount.current++;
return (
<InputGroup key={index}>
<InputGroup.Text className="component-label">{form_name}</InputGroup.Text>
<Form.Control type="text" name={name} />
</InputGroup>
);
}); });
return ( return (
@ -87,32 +48,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div> <div>Render count: {renderCount.current}</div>
)} )}
<h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}> <Form onSubmit={execute} ref={formRef}>
Function: {displayName} <Button className="component" variant="primary" type="submit">
</h5> {`${displayName} `}
<Form onSubmit={execute}>
{args}
<Button variant="primary" type="submit">
Execute
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
</Button> </Button>
</Form> </Form>
<Collapse in={!hideOutput}>
<div id="function-output">
{functionCalls.map((call, index) => (
<div key={index}>
<div style={{ color: 'grey', fontSize: 'small' }}>
{Object.entries(call.args)
.map(([key, val]) => `${key}=${JSON.stringify(val)}`)
.join(', ') +
' => ' +
JSON.stringify(call.result)}
</div>
</div>
))}
</div>
</Collapse>
</div> </div>
); );
}); });

197
frontend/src/components/NumberComponent.tsx
View File

@ -1,10 +1,7 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Form, InputGroup } from 'react-bootstrap'; import { Form, InputGroup } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import '../App.css'; import '../App.css';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
// TODO: add button functionality // TODO: add button functionality
@ -41,8 +38,15 @@ type NumberComponentProps = {
docString: string; docString: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
unit?: string; unit?: string;
showName?: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName?: string;
id: string;
}; };
// TODO: highlight the digit that is being changed by setting both selectionStart and // TODO: highlight the digit that is being changed by setting both selectionStart and
@ -128,92 +132,57 @@ const handleDeleteKey = (
return { value, selectionStart }; return { value, selectionStart };
}; };
const handleNumericKey = (
key: string,
value: string,
selectionStart: number,
selectionEnd: number
) => {
// Check if a number key or a decimal point key is pressed
if (key === '.' && value.includes('.')) {
// Check if value already contains a decimal. If so, ignore input.
console.warn('Invalid input! Ignoring...');
return { value, selectionStart };
}
let newValue = value;
// Add the new key at the cursor's position
if (selectionEnd > selectionStart) {
// If there is a selection, replace it with the key
newValue = value.slice(0, selectionStart) + key + value.slice(selectionEnd);
} else {
// otherwise, append the key after the selection start
newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
}
return { value: newValue, selectionStart: selectionStart + 1 };
};
export const NumberComponent = React.memo((props: NumberComponentProps) => { export const NumberComponent = React.memo((props: NumberComponentProps) => {
const { const {
name, name,
parentPath, value,
readOnly, readOnly,
type,
docString, docString,
isInstantUpdate, isInstantUpdate,
unit, unit,
addNotification addNotification,
changeCallback = () => {},
displayName,
id
} = props; } = props;
// Whether to show the name infront of the component (false if used with a slider)
const showName = props.showName !== undefined ? props.showName : true;
const renderCount = useRef(0);
// Create a state for the cursor position // Create a state for the cursor position
const [cursorPosition, setCursorPosition] = useState(null); const [cursorPosition, setCursorPosition] = useState(null);
// Create a state for the input string // Create a state for the input string
const [inputString, setInputString] = useState(props.value.toString()); const [inputString, setInputString] = useState(value.toString());
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const renderCount = useRef(0);
const id = getIdFromFullAccessPath(fullAccessPath); const fullAccessPath = [props.parentPath, props.name]
const webSettings = useContext(WebSettingsContext); .filter((element) => element)
let displayName = name; .join('.');
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
// Set the cursor position after the component re-renders
const inputElement = document.getElementsByName(
fullAccessPath
)[0] as HTMLInputElement;
if (inputElement && cursorPosition !== null) {
inputElement.setSelectionRange(cursorPosition, cursorPosition);
}
});
useEffect(() => {
// Parse the input string to a number for comparison
const numericInputString =
props.type === 'int' ? parseInt(inputString) : parseFloat(inputString);
// Only update the inputString if it's different from the prop value
if (props.value !== numericInputString) {
setInputString(props.value.toString());
}
// emitting notification
let notificationMsg = `${parentPath}.${name} changed to ${props.value}`;
if (unit === undefined) {
notificationMsg += '.';
} else {
notificationMsg += ` ${unit}.`;
}
addNotification(notificationMsg);
}, [props.value]);
const handleNumericKey = (
key: string,
value: string,
selectionStart: number,
selectionEnd: number
) => {
// Check if a number key or a decimal point key is pressed
if (key === '.' && (value.includes('.') || props.type === 'int')) {
// Check if value already contains a decimal. If so, ignore input.
// eslint-disable-next-line no-console
console.warn('Invalid input! Ignoring...');
return { value, selectionStart };
}
let newValue = value;
// Add the new key at the cursor's position
if (selectionEnd > selectionStart) {
// If there is a selection, replace it with the key
newValue = value.slice(0, selectionStart) + key + value.slice(selectionEnd);
} else {
// otherwise, append the key after the selection start
newValue = value.slice(0, selectionStart) + key + value.slice(selectionStart);
}
return { value: newValue, selectionStart: selectionStart + 1 };
};
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
const { key, target } = event; const { key, target } = event;
if ( if (
@ -256,7 +225,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
selectionStart, selectionStart,
selectionEnd selectionEnd
)); ));
} else if (key === '.') { } else if (key === '.' && type === 'float') {
({ value: newValue, selectionStart } = handleNumericKey( ({ value: newValue, selectionStart } = handleNumericKey(
key, key,
value, value,
@ -283,7 +252,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
selectionEnd selectionEnd
)); ));
} else if (key === 'Enter' && !isInstantUpdate) { } else if (key === 'Enter' && !isInstantUpdate) {
setAttribute(name, parentPath, Number(newValue)); changeCallback(Number(newValue));
return; return;
} else { } else {
console.debug(key); console.debug(key);
@ -292,7 +261,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
// Update the input value and maintain the cursor position // Update the input value and maintain the cursor position
if (isInstantUpdate) { if (isInstantUpdate) {
setAttribute(name, parentPath, Number(newValue)); changeCallback(Number(newValue));
} }
setInputString(newValue); setInputString(newValue);
@ -304,35 +273,59 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
const handleBlur = () => { const handleBlur = () => {
if (!isInstantUpdate) { if (!isInstantUpdate) {
// If not in "instant update" mode, emit an update when the input field loses focus // If not in "instant update" mode, emit an update when the input field loses focus
setAttribute(name, parentPath, Number(inputString)); changeCallback(Number(inputString));
} }
}; };
useEffect(() => {
// Parse the input string to a number for comparison
const numericInputString =
type === 'int' ? parseInt(inputString) : parseFloat(inputString);
// Only update the inputString if it's different from the prop value
if (value !== numericInputString) {
setInputString(value.toString());
}
// emitting notification
let notificationMsg = `${fullAccessPath} changed to ${props.value}`;
if (unit === undefined) {
notificationMsg += '.';
} else {
notificationMsg += ` ${unit}.`;
}
addNotification(notificationMsg);
}, [value]);
useEffect(() => {
// Set the cursor position after the component re-renders
const inputElement = document.getElementsByName(name)[0] as HTMLInputElement;
if (inputElement && cursorPosition !== null) {
inputElement.setSelectionRange(cursorPosition, cursorPosition);
}
});
return ( return (
<div className="component numberComponent" id={id}> <div className="component numberComponent" id={id}>
{process.env.NODE_ENV === 'development' && ( {process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div> <div>Render count: {renderCount.current}</div>
)} )}
<div className="d-flex"> <InputGroup>
<InputGroup> {displayName && (
{showName && ( <InputGroup.Text>
<InputGroup.Text> {displayName}
{displayName} <DocStringComponent docString={docString} />
<DocStringComponent docString={docString} /> </InputGroup.Text>
</InputGroup.Text> )}
)} <Form.Control
<Form.Control type="text"
type="text" value={inputString}
value={inputString} disabled={readOnly}
disabled={readOnly} name={name}
name={fullAccessPath} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} onBlur={handleBlur}
onBlur={handleBlur} className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''} />
/> {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
{unit && <InputGroup.Text>{unit}</InputGroup.Text>} </InputGroup>
</InputGroup>
</div>
</div> </div>
); );
}); });

42
frontend/src/components/SliderComponent.tsx
View File

@ -1,11 +1,8 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap'; import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { Slider } from '@mui/material'; import { Slider } from '@mui/material';
import { NumberComponent, NumberObject } from './NumberComponent'; import { NumberComponent, NumberObject } from './NumberComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
type SliderComponentProps = { type SliderComponentProps = {
@ -19,6 +16,14 @@ type SliderComponentProps = {
stepSize: NumberObject; stepSize: NumberObject;
isInstantUpdate: boolean; isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName: string;
id: string;
}; };
export const SliderComponent = React.memo((props: SliderComponentProps) => { export const SliderComponent = React.memo((props: SliderComponentProps) => {
@ -33,35 +38,31 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
stepSize, stepSize,
docString, docString,
isInstantUpdate, isInstantUpdate,
addNotification addNotification,
changeCallback = () => {},
displayName,
id
} = props; } = props;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
}); });
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`); addNotification(`${fullAccessPath} changed to ${value.value}.`);
}, [props.value]); }, [props.value]);
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name}.min changed to ${min}.`); addNotification(`${fullAccessPath}.min changed to ${min.value}.`);
}, [props.min]); }, [props.min]);
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name}.max changed to ${max}.`); addNotification(`${fullAccessPath}.max changed to ${max.value}.`);
}, [props.max]); }, [props.max]);
useEffect(() => { useEffect(() => {
addNotification(`${parentPath}.${name}.stepSize changed to ${stepSize}.`); addNotification(`${fullAccessPath}.stepSize changed to ${stepSize.value}.`);
}, [props.stepSize]); }, [props.stepSize]);
const handleOnChange = (event, newNumber: number | number[]) => { const handleOnChange = (event, newNumber: number | number[]) => {
@ -70,11 +71,11 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
if (Array.isArray(newNumber)) { if (Array.isArray(newNumber)) {
newNumber = newNumber[0]; newNumber = newNumber[0];
} }
setAttribute(`${name}.value`, parentPath, newNumber); changeCallback(newNumber, `${name}.value`);
}; };
const handleValueChange = (newValue: number, valueType: string) => { const handleValueChange = (newValue: number, valueType: string) => {
setAttribute(`${name}.${valueType}`, parentPath, newValue); changeCallback(newValue, `${name}.${valueType}`);
}; };
const deconstructNumberDict = ( const deconstructNumberDict = (
@ -139,8 +140,9 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
type="float" type="float"
value={valueMagnitude} value={valueMagnitude}
unit={valueUnit} unit={valueUnit}
showName={false} addNotification={() => {}}
addNotification={() => null} changeCallback={(value) => changeCallback(value, name + '.value')}
id={id + '-value'}
/> />
</Col> </Col>
<Col xs="auto"> <Col xs="auto">

47
frontend/src/components/StringComponent.tsx
View File

@ -1,11 +1,8 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Form, InputGroup } from 'react-bootstrap'; import { Form, InputGroup } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import '../App.css'; import '../App.css';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent'; import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
// TODO: add button functionality // TODO: add button functionality
@ -17,22 +14,33 @@ type StringComponentProps = {
docString: string; docString: string;
isInstantUpdate: boolean; isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
displayName: string;
id: string;
}; };
export const StringComponent = React.memo((props: StringComponentProps) => { export const StringComponent = React.memo((props: StringComponentProps) => {
const { name, parentPath, readOnly, docString, isInstantUpdate, addNotification } = const {
props; name,
readOnly,
docString,
isInstantUpdate,
addNotification,
changeCallback = () => {},
displayName,
id
} = props;
const renderCount = useRef(0); const renderCount = useRef(0);
const [inputString, setInputString] = useState(props.value); const [inputString, setInputString] = useState(props.value);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); const fullAccessPath = [props.parentPath, props.name]
const id = getIdFromFullAccessPath(fullAccessPath); .filter((element) => element)
const webSettings = useContext(WebSettingsContext); .join('.');
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
@ -43,25 +51,26 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
if (props.value !== inputString) { if (props.value !== inputString) {
setInputString(props.value); setInputString(props.value);
} }
addNotification(`${parentPath}.${name} changed to ${props.value}.`); addNotification(`${fullAccessPath} changed to ${props.value}.`);
}, [props.value]); }, [props.value]);
const handleChange = (event) => { const handleChange = (event) => {
setInputString(event.target.value); setInputString(event.target.value);
if (isInstantUpdate) { if (isInstantUpdate) {
setAttribute(name, parentPath, event.target.value); changeCallback(event.target.value);
} }
}; };
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (event.key === 'Enter' && !isInstantUpdate) { if (event.key === 'Enter' && !isInstantUpdate) {
setAttribute(name, parentPath, inputString); changeCallback(inputString);
event.preventDefault();
} }
}; };
const handleBlur = () => { const handleBlur = () => {
if (!isInstantUpdate) { if (!isInstantUpdate) {
setAttribute(name, parentPath, inputString); changeCallback(inputString);
} }
}; };
@ -77,9 +86,9 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
</InputGroup.Text> </InputGroup.Text>
<Form.Control <Form.Control
type="text" type="text"
name={name}
value={inputString} value={inputString}
disabled={readOnly} disabled={readOnly}
name={name}
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={handleBlur} onBlur={handleBlur}

10
frontend/src/utils/stateUtils.ts
View File

@ -1,11 +1,5 @@
export interface SerializedValue { import { SerializedValue } from '../components/GenericComponent';
type: string;
value: Record<string, unknown> | Array<Record<string, unknown>>;
readonly: boolean;
doc: string | null;
async?: boolean;
parameters?: unknown;
}
export type State = { export type State = {
type: string; type: string;
value: Record<string, SerializedValue> | null; value: Record<string, SerializedValue> | null;

84
src/pydase/data_service/task_manager.py
View File

@ -3,10 +3,15 @@ from __future__ import annotations
import asyncio import asyncio
import inspect import inspect
import logging import logging
from typing import TYPE_CHECKING, Any, TypedDict from enum import Enum
from typing import TYPE_CHECKING, Any
from pydase.data_service.abstract_data_service import AbstractDataService from pydase.data_service.abstract_data_service import AbstractDataService
from pydase.utils.helpers import get_class_and_instance_attributes from pydase.utils.helpers import (
function_has_arguments,
get_class_and_instance_attributes,
is_property_attribute,
)
if TYPE_CHECKING: if TYPE_CHECKING:
from collections.abc import Callable from collections.abc import Callable
@ -16,9 +21,12 @@ if TYPE_CHECKING:
logger = logging.getLogger(__name__) logger = logging.getLogger(__name__)
class TaskDict(TypedDict): class TaskDefinitionError(Exception):
task: asyncio.Task[None] pass
kwargs: dict[str, Any]
class TaskStatus(Enum):
RUNNING = "running"
class TaskManager: class TaskManager:
@ -78,7 +86,7 @@ class TaskManager:
def __init__(self, service: DataService) -> None: def __init__(self, service: DataService) -> None:
self.service = service self.service = service
self.tasks: dict[str, TaskDict] = {} self.tasks: dict[str, asyncio.Task[None]] = {}
"""A dictionary to keep track of running tasks. The keys are the names of the """A dictionary to keep track of running tasks. The keys are the names of the
tasks and the values are TaskDict instances which include the task itself and tasks and the values are TaskDict instances which include the task itself and
its kwargs. its kwargs.
@ -91,13 +99,26 @@ class TaskManager:
return asyncio.get_running_loop() return asyncio.get_running_loop()
def _set_start_and_stop_for_async_methods(self) -> None: def _set_start_and_stop_for_async_methods(self) -> None:
# inspect the methods of the class for name in dir(self.service):
for name, method in inspect.getmembers( # circumvents calling properties
self.service, predicate=inspect.iscoroutinefunction if is_property_attribute(self.service, name):
): continue
# create start and stop methods for each coroutine
setattr(self.service, f"start_{name}", self._make_start_task(name, method)) method = getattr(self.service, name)
setattr(self.service, f"stop_{name}", self._make_stop_task(name)) if inspect.iscoroutinefunction(method):
if function_has_arguments(method):
raise TaskDefinitionError(
"Asynchronous functions (tasks) should be defined without "
f"arguments. The task '{method.__name__}' has at least one "
"argument. Please remove the argument(s) from this function to "
"use it."
)
# create start and stop methods for each coroutine
setattr(
self.service, f"start_{name}", self._make_start_task(name, method)
)
setattr(self.service, f"stop_{name}", self._make_stop_task(name))
def _initiate_task_startup(self) -> None: def _initiate_task_startup(self) -> None:
if self.service._autostart_tasks is not None: if self.service._autostart_tasks is not None:
@ -137,7 +158,7 @@ class TaskManager:
# cancel the task # cancel the task
task = self.tasks.get(name, None) task = self.tasks.get(name, None)
if task is not None: if task is not None:
self._loop.call_soon_threadsafe(task["task"].cancel) self._loop.call_soon_threadsafe(task.cancel)
return stop_task return stop_task
@ -156,7 +177,7 @@ class TaskManager:
method (callable): The coroutine to be turned into an asyncio task. method (callable): The coroutine to be turned into an asyncio task.
""" """
def start_task(*args: Any, **kwargs: Any) -> None: def start_task() -> None:
def task_done_callback(task: asyncio.Task[None], name: str) -> None: def task_done_callback(task: asyncio.Task[None], name: str) -> None:
"""Handles tasks that have finished. """Handles tasks that have finished.
@ -180,36 +201,16 @@ class TaskManager:
) )
raise exception raise exception
async def task(*args: Any, **kwargs: Any) -> None: async def task() -> None:
try: try:
await method(*args, **kwargs) await method()
except asyncio.CancelledError: except asyncio.CancelledError:
logger.info("Task '%s' was cancelled", name) logger.info("Task '%s' was cancelled", name)
if not self.tasks.get(name): if not self.tasks.get(name):
# Get the signature of the coroutine method to start
sig = inspect.signature(method)
# Create a list of the parameter names from the method signature.
parameter_names = list(sig.parameters.keys())
# Extend the list of positional arguments with None values to match
# the length of the parameter names list. This is done to ensure
# that zip can pair each parameter name with a corresponding value.
args_padded = list(args) + [None] * (len(parameter_names) - len(args))
# Create a dictionary of keyword arguments by pairing the parameter
# names with the values in 'args_padded'. Then merge this dictionary
# with the 'kwargs' dictionary. If a parameter is specified in both
# 'args_padded' and 'kwargs', the value from 'kwargs' is used.
kwargs_updated = {
**dict(zip(parameter_names, args_padded, strict=True)),
**kwargs,
}
# creating the task and adding the task_done_callback which checks # creating the task and adding the task_done_callback which checks
# if an exception has occured during the task execution # if an exception has occured during the task execution
task_object = self._loop.create_task(task(*args, **kwargs)) task_object = self._loop.create_task(task())
task_object.add_done_callback( task_object.add_done_callback(
lambda task: task_done_callback(task, name) lambda task: task_done_callback(task, name)
) )
@ -217,13 +218,10 @@ class TaskManager:
# Store the task and its arguments in the '__tasks' dictionary. The # Store the task and its arguments in the '__tasks' dictionary. The
# key is the name of the method, and the value is a dictionary # key is the name of the method, and the value is a dictionary
# containing the task object and the updated keyword arguments. # containing the task object and the updated keyword arguments.
self.tasks[name] = { self.tasks[name] = task_object
"task": task_object,
"kwargs": kwargs_updated,
}
# emit the notification that the task was started # emit the notification that the task was started
self.service._notify_changed(name, kwargs_updated) self.service._notify_changed(name, TaskStatus.RUNNING)
else: else:
logger.error("Task '%s' is already running!", name) logger.error("Task '%s' is already running!", name)

6
src/pydase/frontend/asset-manifest.json
View File

@ -1,13 +1,13 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.7ef670d5.css", "main.css": "/static/css/main.7ef670d5.css",
"main.js": "/static/js/main.4736ff77.js", "main.js": "/static/js/main.ce19efa0.js",
"index.html": "/index.html", "index.html": "/index.html",
"main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map", "main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map",
"main.4736ff77.js.map": "/static/js/main.4736ff77.js.map" "main.ce19efa0.js.map": "/static/js/main.ce19efa0.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.7ef670d5.css", "static/css/main.7ef670d5.css",
"static/js/main.4736ff77.js" "static/js/main.ce19efa0.js"
] ]
} }

2
src/pydase/frontend/index.html
View File

@ -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.4736ff77.js"></script><link href="/static/css/main.7ef670d5.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.ce19efa0.js"></script><link href="/static/css/main.7ef670d5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

1
src/pydase/frontend/static/js/main.4736ff77.js.map
View File

File diff suppressed because one or more lines are too long

6
src/pydase/frontend/static/js/main.4736ff77.js → src/pydase/frontend/static/js/main.ce19efa0.js
View File

File diff suppressed because one or more lines are too long

0
src/pydase/frontend/static/js/main.4736ff77.js.LICENSE.txt → src/pydase/frontend/static/js/main.ce19efa0.js.LICENSE.txt
View File

1
src/pydase/frontend/static/js/main.ce19efa0.js.map Normal file
View File

File diff suppressed because one or more lines are too long

27
src/pydase/utils/decorators.py Normal file
View File

@ -0,0 +1,27 @@
from collections.abc import Callable
from typing import Any
from pydase.utils.helpers import function_has_arguments
class FunctionDefinitionError(Exception):
pass
def frontend(func: Callable[..., Any]) -> Callable[..., Any]:
"""
Decorator to mark a DataService method for frontend rendering. Ensures that the
method does not contain arguments, as they are not supported for frontend rendering.
"""
if function_has_arguments(func):
raise FunctionDefinitionError(
"The @frontend decorator requires functions without arguments. Function "
f"'{func.__name__}' has at least one argument. "
"Please remove the argument(s) from this function to use it with the "
"@frontend decorator."
)
# Mark the function for frontend display.
func._display_in_frontend = True # type: ignore
return func

27
src/pydase/utils/helpers.py
View File

@ -1,5 +1,6 @@
import inspect import inspect
import logging import logging
from collections.abc import Callable
from itertools import chain from itertools import chain
from typing import Any from typing import Any
@ -196,3 +197,29 @@ def get_data_service_class_reference() -> Any:
def is_property_attribute(target_obj: Any, attr_name: str) -> bool: def is_property_attribute(target_obj: Any, attr_name: str) -> bool:
return isinstance(getattr(type(target_obj), attr_name, None), property) return isinstance(getattr(type(target_obj), attr_name, None), property)
def function_has_arguments(func: Callable[..., Any]) -> bool:
sig = inspect.signature(func)
parameters = dict(sig.parameters)
# Remove 'self' parameter for instance methods.
parameters.pop("self", None)
# Check if there are any parameters left which would indicate additional arguments.
if len(parameters) > 0:
return True
return False
def render_in_frontend(func: Callable[..., Any]) -> bool:
"""Determines if the method should be rendered in the frontend.
It checks if the "@frontend" decorator was used or the method is a coroutine."""
if inspect.iscoroutinefunction(func):
return True
try:
return func._display_in_frontend # type: ignore
except AttributeError:
return False

35
src/pydase/utils/serializer.py
View File

@ -3,15 +3,17 @@ import logging
import sys import sys
from collections.abc import Callable from collections.abc import Callable
from enum import Enum from enum import Enum
from typing import Any from typing import Any, TypedDict
import pydase.units as u import pydase.units as u
from pydase.data_service.abstract_data_service import AbstractDataService from pydase.data_service.abstract_data_service import AbstractDataService
from pydase.data_service.task_manager import TaskStatus
from pydase.utils.helpers import ( from pydase.utils.helpers import (
get_attribute_doc, get_attribute_doc,
get_component_classes, get_component_classes,
get_data_service_class_reference, get_data_service_class_reference,
parse_list_attr_and_index, parse_list_attr_and_index,
render_in_frontend,
) )
logger = logging.getLogger(__name__) logger = logging.getLogger(__name__)
@ -133,22 +135,23 @@ class Serializer:
value = None value = None
readonly = True readonly = True
doc = get_attribute_doc(obj) doc = get_attribute_doc(obj)
frontend_render = render_in_frontend(obj)
# Store parameters and their anotations in a dictionary # Store parameters and their anotations in a dictionary
sig = inspect.signature(obj) sig = inspect.signature(obj)
parameters: dict[str, str | None] = {} sig.return_annotation
class SignatureDict(TypedDict):
parameters: dict[str, dict[str, Any]]
return_annotation: dict[str, Any]
signature: SignatureDict = {"parameters": {}, "return_annotation": {}}
for k, v in sig.parameters.items(): for k, v in sig.parameters.items():
annotation = v.annotation signature["parameters"][k] = {
if annotation is not inspect._empty: "annotation": str(v.annotation),
if isinstance(annotation, type): "default": dump(v.default) if v.default != inspect._empty else {},
# Handle regular types }
parameters[k] = annotation.__name__
else:
# Union, string annotation, Literal types, ...
parameters[k] = str(annotation)
else:
parameters[k] = None
return { return {
"type": obj_type, "type": obj_type,
@ -156,7 +159,8 @@ class Serializer:
"readonly": readonly, "readonly": readonly,
"doc": doc, "doc": doc,
"async": inspect.iscoroutinefunction(obj), "async": inspect.iscoroutinefunction(obj),
"parameters": parameters, "signature": signature,
"frontend_render": frontend_render,
} }
@staticmethod @staticmethod
@ -164,6 +168,7 @@ class Serializer:
readonly = False readonly = False
doc = get_attribute_doc(obj) doc = get_attribute_doc(obj)
obj_type = "DataService" obj_type = "DataService"
obj_name = obj.__class__.__name__
# Get component base class if any # Get component base class if any
component_base_cls = next( component_base_cls = next(
@ -202,8 +207,7 @@ class Serializer:
# If there's a running task for this method # If there's a running task for this method
if key in obj._task_manager.tasks: if key in obj._task_manager.tasks:
task_info = obj._task_manager.tasks[key] value[key]["value"] = TaskStatus.RUNNING.name
value[key]["value"] = task_info["kwargs"]
# If the DataService attribute is a property # If the DataService attribute is a property
if isinstance(getattr(obj.__class__, key, None), property): if isinstance(getattr(obj.__class__, key, None), property):
@ -212,6 +216,7 @@ class Serializer:
value[key]["doc"] = get_attribute_doc(prop) # overwrite the doc value[key]["doc"] = get_attribute_doc(prop) # overwrite the doc
return { return {
"name": obj_name,
"type": obj_type, "type": obj_type,
"value": value, "value": value,
"readonly": readonly, "readonly": readonly,

21
tests/data_service/test_data_service.py
View File

@ -1,9 +1,14 @@
from enum import Enum from enum import Enum
from typing import Any
import pydase
import pydase.units as u import pydase.units as u
import pytest
from pydase import DataService from pydase import DataService
from pydase.data_service.data_service_observer import DataServiceObserver from pydase.data_service.data_service_observer import DataServiceObserver
from pydase.data_service.state_manager import StateManager from pydase.data_service.state_manager import StateManager
from pydase.data_service.task_manager import TaskDefinitionError
from pydase.utils.decorators import FunctionDefinitionError, frontend
from pytest import LogCaptureFixture from pytest import LogCaptureFixture
@ -114,3 +119,19 @@ def test_protected_and_private_attribute_warning(caplog: LogCaptureFixture) -> N
"Class 'SubClass' does not inherit from DataService. This may lead to " "Class 'SubClass' does not inherit from DataService. This may lead to "
"unexpected behaviour!" "unexpected behaviour!"
) not in caplog.text ) not in caplog.text
def test_exposing_methods() -> None:
class ClassWithTask(pydase.DataService):
async def some_task(self, sleep_time: int) -> None:
pass
with pytest.raises(TaskDefinitionError):
ClassWithTask()
with pytest.raises(FunctionDefinitionError):
class ClassWithMethod(pydase.DataService):
@frontend
def some_method(self, *args: Any) -> str:
return "some method"

2
tests/data_service/test_data_service_cache.py
View File

@ -67,5 +67,5 @@ async def test_task_status_update() -> None:
state_manager._data_service_cache.get_value_dict_from_cache("my_method")[ state_manager._data_service_cache.get_value_dict_from_cache("my_method")[
"value" "value"
] ]
== {} == "RUNNING"
) )

36
tests/data_service/test_task_manager.py
View File

@ -32,8 +32,8 @@ async def test_autostart_task_callback(caplog: LogCaptureFixture) -> None:
DataServiceObserver(state_manager) DataServiceObserver(state_manager)
service_instance._task_manager.start_autostart_tasks() service_instance._task_manager.start_autostart_tasks()
assert "'my_task' changed to '{}'" in caplog.text assert "'my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "'my_other_task' changed to '{}'" in caplog.text assert "'my_other_task' changed to 'TaskStatus.RUNNING'" in caplog.text
@pytest.mark.asyncio @pytest.mark.asyncio
@ -62,8 +62,8 @@ async def test_DataService_subclass_autostart_task_callback(
DataServiceObserver(state_manager) DataServiceObserver(state_manager)
service_instance._task_manager.start_autostart_tasks() service_instance._task_manager.start_autostart_tasks()
assert "'sub_service.my_task' changed to '{}'" in caplog.text assert "'sub_service.my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "'sub_service.my_other_task' changed to '{}'" in caplog.text assert "'sub_service.my_other_task' changed to 'TaskStatus.RUNNING'" in caplog.text
@pytest.mark.asyncio @pytest.mark.asyncio
@ -92,10 +92,20 @@ async def test_DataService_subclass_list_autostart_task_callback(
DataServiceObserver(state_manager) DataServiceObserver(state_manager)
service_instance._task_manager.start_autostart_tasks() service_instance._task_manager.start_autostart_tasks()
assert "'sub_services_list[0].my_task' changed to '{}'" in caplog.text assert (
assert "'sub_services_list[0].my_other_task' changed to '{}'" in caplog.text "'sub_services_list[0].my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "'sub_services_list[1].my_task' changed to '{}'" in caplog.text )
assert "'sub_services_list[1].my_other_task' changed to '{}'" in caplog.text assert (
"'sub_services_list[0].my_other_task' changed to 'TaskStatus.RUNNING'"
in caplog.text
)
assert (
"'sub_services_list[1].my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
)
assert (
"'sub_services_list[1].my_other_task' changed to 'TaskStatus.RUNNING'"
in caplog.text
)
@pytest.mark.asyncio @pytest.mark.asyncio
@ -104,20 +114,20 @@ async def test_start_and_stop_task_methods(caplog: LogCaptureFixture) -> None:
def __init__(self) -> None: def __init__(self) -> None:
super().__init__() super().__init__()
async def my_task(self, param: str) -> None: async def my_task(self) -> None:
while True: while True:
logger.debug("Logging param: %s", param) logger.debug("Logging message")
await asyncio.sleep(0.1) await asyncio.sleep(0.1)
# Your test code here # Your test code here
service_instance = MyService() service_instance = MyService()
state_manager = StateManager(service_instance) state_manager = StateManager(service_instance)
DataServiceObserver(state_manager) DataServiceObserver(state_manager)
service_instance.start_my_task("Hello") service_instance.start_my_task()
await asyncio.sleep(0.01) await asyncio.sleep(0.01)
assert "'my_task' changed to '{'param': 'Hello'}'" in caplog.text assert "'my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "Logging param: Hello" in caplog.text assert "Logging message" in caplog.text
caplog.clear() caplog.clear()
service_instance.stop_my_task() service_instance.stop_my_task()

115
tests/utils/test_serializer.py
View File

@ -6,6 +6,8 @@ import pydase
import pydase.units as u import pydase.units as u
import pytest import pytest
from pydase.components.coloured_enum import ColouredEnum from pydase.components.coloured_enum import ColouredEnum
from pydase.data_service.task_manager import TaskStatus
from pydase.utils.decorators import frontend
from pydase.utils.serializer import ( from pydase.utils.serializer import (
SerializationPathError, SerializationPathError,
dump, dump,
@ -133,29 +135,34 @@ async def test_method_serialization() -> None:
def some_method(self) -> str: def some_method(self) -> str:
return "some method" return "some method"
async def some_task(self, sleep_time: int) -> None: async def some_task(self) -> None:
while True: while True:
await asyncio.sleep(sleep_time) await asyncio.sleep(10)
instance = ClassWithMethod() instance = ClassWithMethod()
instance.start_some_task(10) # type: ignore instance.start_some_task() # type: ignore
assert dump(instance)["value"] == { assert dump(instance)["value"] == {
"some_method": { "some_method": {
"async": False,
"doc": None,
"parameters": {},
"readonly": True,
"type": "method", "type": "method",
"value": None, "value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {"parameters": {}, "return_annotation": {}},
"frontend_render": False,
}, },
"some_task": { "some_task": {
"async": True,
"doc": None,
"parameters": {"sleep_time": "int"},
"readonly": True,
"type": "method", "type": "method",
"value": {"sleep_time": 10}, "value": TaskStatus.RUNNING.name,
"readonly": True,
"doc": None,
"async": True,
"signature": {
"parameters": {},
"return_annotation": {},
},
"frontend_render": True,
}, },
} }
@ -173,28 +180,79 @@ def test_methods_with_type_hints() -> None:
assert dump(method_without_type_hint) == { assert dump(method_without_type_hint) == {
"async": False, "async": False,
"doc": None, "doc": None,
"parameters": {"arg_without_type_hint": None}, "signature": {
"parameters": {
"arg_without_type_hint": {
"annotation": "<class 'inspect._empty'>",
"default": {},
}
},
"return_annotation": {},
},
"readonly": True, "readonly": True,
"type": "method", "type": "method",
"value": None, "value": None,
"frontend_render": False,
} }
assert dump(method_with_type_hint) == { assert dump(method_with_type_hint) == {
"async": False,
"doc": None,
"parameters": {"some_argument": "int"},
"readonly": True,
"type": "method", "type": "method",
"value": None, "value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {
"parameters": {
"some_argument": {"annotation": "<class 'int'>", "default": {}}
},
"return_annotation": {},
},
"frontend_render": False,
}
assert dump(method_with_union_type_hint) == {
"type": "method",
"value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {
"parameters": {
"some_argument": {"annotation": "int | float", "default": {}}
},
"return_annotation": {},
},
"frontend_render": False,
} }
assert dump(method_with_union_type_hint) == {
"async": False, def test_exposed_function_serialization() -> None:
"doc": None, class MyService(pydase.DataService):
"parameters": {"some_argument": "int | float"}, @frontend
"readonly": True, def some_method(self) -> None:
pass
@frontend
def some_function() -> None:
pass
assert dump(MyService().some_method) == {
"type": "method", "type": "method",
"value": None, "value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {"parameters": {}, "return_annotation": {}},
"frontend_render": True,
}
assert dump(some_function) == {
"type": "method",
"value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {"parameters": {}, "return_annotation": {}},
"frontend_render": True,
} }
@ -224,6 +282,7 @@ def test_list_serialization() -> None:
"doc": None, "doc": None,
"readonly": False, "readonly": False,
"type": "DataService", "type": "DataService",
"name": "MySubclass",
"value": { "value": {
"bool_attr": { "bool_attr": {
"doc": None, "doc": None,
@ -268,6 +327,7 @@ def test_dict_serialization() -> None:
"type": "dict", "type": "dict",
"value": { "value": {
"DataService_key": { "DataService_key": {
"name": "MyClass",
"doc": None, "doc": None,
"readonly": False, "readonly": False,
"type": "DataService", "type": "DataService",
@ -317,9 +377,14 @@ def test_derived_data_service_serialization() -> None:
class DerivedService(BaseService): class DerivedService(BaseService):
... ...
base_instance = BaseService() base_service_serialization = dump(BaseService())
service_instance = DerivedService() derived_service_serialization = dump(DerivedService())
assert service_instance.serialize() == base_instance.serialize()
# Names of the classes obviously differ
base_service_serialization.pop("name")
derived_service_serialization.pop("name")
assert base_service_serialization == derived_service_serialization
@pytest.fixture @pytest.fixture