ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-25 02:20: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-->
Install pydase using [`poetry`](https://python-poetry.org/):
Install `pydase` using [`poetry`](https://python-poetry.org/):
```bash
poetry add pydase
@ -81,6 +81,7 @@ Here's an example:
```python
from pydase import DataService, Server
from pydase.utils.decorators import frontend
class Device(DataService):
@ -118,6 +119,7 @@ class Device(DataService):
# run code to set power state
self._power = value
@frontend
def reset(self) -> None:
self.current = 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.
### 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.
- Asynchronous Methods: These are manifested as the `AsyncMethodComponent` with "start"/"stop" buttons to manage the execution of [tasks](#understanding-tasks-in-pydase).
```python
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)
@ -209,9 +235,9 @@ from pydase import DataService, Server
class Channel(DataService):
def __init__(self, channel_id: int) -> None:
super().__init__()
self._channel_id = channel_id
self._current = 0.0
super().__init__()
@property
def current(self) -> float:
@ -227,9 +253,8 @@ class Channel(DataService):
class Device(DataService):
def __init__(self) -> None:
self.channels = [Channel(i) for i in range(2)]
super().__init__()
self.channels = [Channel(i) for i in range(2)]
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.
```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)
##### Customizing Connection Logic
@ -301,7 +356,7 @@ class MyDeviceConnection(pydase.components.DeviceConnection):
##### 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`
@ -312,7 +367,6 @@ The component offers methods to load images seamlessly, ensuring that visual con
```python
import matplotlib.pyplot as plt
import numpy as np
import pydase
from pydase.components.image import Image
@ -390,12 +444,14 @@ class MySlider(pydase.components.NumberSlider):
@property
def value(self) -> float:
"""Slider value."""
return self._value
@value.setter
def value(self, value: float) -> None:
if value < self._min or value > self._max:
raise ValueError("Value is either below allowed min or above max value.")
self._value = value
@ -471,7 +527,7 @@ In this example, `MySlider` overrides the `min`, `max`, `step_size`, and `value`
- 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:
@ -606,9 +662,9 @@ Note: If the service class structure has changed since the last time its state w
## 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:
@ -617,9 +673,9 @@ from pydase import DataService, Server
class SensorService(DataService):
def __init__(self):
self.readout_frequency = 1.0
self._autostart_tasks["read_sensor_data"] = () # args passed to the function go there
super().__init__()
self.readout_frequency = 1.0
self._autostart_tasks["read_sensor_data"] = ()
def _process_data(self, data: ...) -> None:
...
@ -639,22 +695,22 @@ if __name__ == "__main__":
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.
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 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.
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.
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.
## 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.
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:
```python
from typing import Any
from pydase import DataService, Server
import pydase.units as u
from pydase import DataService, Server
class ServiceClass(DataService):
@ -666,17 +722,15 @@ class ServiceClass(DataService):
return self._current
@current.setter
def current(self, value: Any) -> None:
def current(self, value: u.Quantity) -> None:
self._current = value
if __name__ == "__main__":
service = ServiceClass()
# You can just set floats to the Quantity objects. The DataService __setattr__ will
# automatically convert this
service.voltage = 10.0
service.current = 1.5
service.voltage = 10.0 * u.units.V
service.current = 1.5 * u.units.mA
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
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:
@ -31,21 +31,25 @@ from pydase.data_service.data_service import DataService
class Image(DataService):
def __init__(
self,
image_representation: bytes = b"",
) -> None:
self.image_representation = image_representation
super().__init__()
self._value: str = ""
self._format: str = ""
# need to decode the bytes
def __setattr__(self, __name: str, __value: Any) -> None:
if __name == "value":
if isinstance(__value, bytes):
__value = __value.decode()
return super().__setattr__(__name, __value)
@property
def value(self) -> str:
return self._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
@ -85,10 +89,11 @@ def test_Image(capsys: CaptureFixture) -> None:
class ServiceClass(DataService):
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`
@ -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:
```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 { WebSettingsContext } from '../WebSettings';
import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
type ImageComponentProps = {
name: string;
parentPath?: string;
readOnly: boolean;
docString: string;
name: string; // needed to create the fullAccessPath
parentPath: string; // needed to create the fullAccessPath
readOnly: boolean; // component changable through frontend?
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;
// 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;
format: string;
}
};
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 [open, setOpen] = useState(true); // add this if you want to expand/collapse your component
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
// Web settings contain the user-defined display name of the components (and possibly more later)
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
// Your component logic here
useEffect(() => {
renderCount.current++;
@ -151,13 +154,11 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
// This will trigger a notification if notifications are enabled.
useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`);
addNotification(`${fullAccessPath} changed.`);
}, [props.value]);
// Your component logic here
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
collapse your component. */}
<Card>
@ -185,57 +186,98 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
### 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**:
First, ensure you've imported the necessary functions from the `socket` module for both updating attributes and executing methods:
1. **Updating Attributes**
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
import { setAttribute, runMethod } from '../socket';
```
// file: frontend/src/components/ButtonComponent.tsx
// ... (import statements)
2. **Event Parameters**:
- When using **`setAttribute`**, we send three main pieces of data:
- `name`: The name of the attribute within the `DataService` instance to update.
- `parentPath`: The access path for the parent object of the attribute to be updated.
- `value`: The new value for the attribute, which must match the backend attribute type.
- For **`runMethod`**, the parameters are slightly different:
- `name`: The name of the method to be executed in the backend.
- `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)
type ButtonComponentProps = {
// ...
changeCallback?: (
value: unknown,
attributeName?: string,
prefix?: string,
callback?: (ack: unknown) => void
) => void;
};
export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
// ...
const { name, parentPath, value } = props;
let displayName = ... // to access the user-defined display name
const {
// ...
changeCallback = () => {},
} = props;
const setChecked = (checked: boolean) => {
setAttribute(name, parentPath, checked);
changeCallback(checked);
};
return (
<ToggleButton
checked={value}
value={parentPath}
// ... other props
onChange={(e) => setChecked(e.currentTarget.checked)}>
{displayName}
{/* component TSX */}
</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
@ -282,15 +324,17 @@ Inside the `GenericComponent` function, add a new conditional branch to render t
<ImageComponent
name={name}
parentPath={parentPath}
readOnly={attribute.readonly}
docString={attribute.doc}
docString={attribute.value['value'].doc}
displayName={displayName}
id={id}
addNotification={addNotification}
changeCallback={changeCallback}
// Add any other specific props for the ImageComponent here
value={attribute.value['value']['value'] as string}
format={attribute.value['format']['value'] as string}
/>
);
} else {
} else if (...) {
// 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:
```tsx
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
useEffect(() => {
addNotification(`${parentPath}.${name} changed.`);
addNotification(`${fullAccessPath} changed.`);
}, [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'.
### 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
} from './components/NotificationsComponent';
import { ConnectionToast } from './components/ConnectionToast';
import { SerializedValue, setNestedValueByPath, State } from './utils/stateUtils';
import { setNestedValueByPath, State } from './utils/stateUtils';
import { WebSettingsContext, WebSetting } from './WebSettings';
import { Attribute, GenericComponent } from './components/GenericComponent';
import { SerializedValue, GenericComponent } from './components/GenericComponent';
type Action =
| { type: 'SET_DATA'; data: State }
@ -187,7 +187,7 @@ const App = () => {
<GenericComponent
name=""
parentPath=""
attribute={state as Attribute}
attribute={state as SerializedValue}
isInstantUpdate={isInstantUpdate}
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 { InputGroup, Form, Button } from 'react-bootstrap';
import { Form, Button, InputGroup } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
type AsyncMethodProps = {
name: string;
parentPath: string;
parameters: Record<string, string>;
value: Record<string, string>;
value: 'RUNNING' | null;
docString?: string;
hideOutput?: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
render: boolean;
};
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 formRef = useRef(null);
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(() => {
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;
if (runningTask === null) {
message = `${parentPath}.${name} task was stopped.`;
message = `${fullAccessPath} task was stopped.`;
} else {
const runningTaskEntries = Object.entries(runningTask)
.map(([key, value]) => `${key}: "${value}"`)
.join(', ');
message = `${parentPath}.${name} was started with parameters { ${runningTaskEntries} }.`;
message = `${fullAccessPath} was started.`;
}
addNotification(message);
}, [props.value]);
@ -65,50 +51,31 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const execute = async (event: React.FormEvent) => {
event.preventDefault();
let method_name: string;
const kwargs: Record<string, unknown> = {};
if (runningTask !== undefined && runningTask !== null) {
method_name = `stop_${name}`;
} else {
Object.keys(props.parameters).forEach(
(name) => (kwargs[name] = event.target[name].value)
);
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 (
<div className="component asyncMethodComponent" id={id}>
{process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div>
)}
<h5>Function: {displayName}</h5>
<Form onSubmit={execute} ref={formRef}>
{args}
<Button id={`button-${id}`} name={name} value={parentPath} type="submit">
{runningTask ? 'Stop ' : 'Start '}
<DocStringComponent docString={docString} />
</Button>
<InputGroup>
<InputGroup.Text>
{displayName}
<DocStringComponent docString={docString} />
</InputGroup.Text>
<Button id={`button-${id}`} type="submit">
{runningTask === 'RUNNING' ? 'Stop ' : 'Start '}
</Button>
</InputGroup>
</Form>
</div>
);

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

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

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

@ -1,9 +1,6 @@
import React, { useContext, useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import React, { useEffect, useRef, useState } from 'react';
import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
type ColouredEnumComponentProps = {
@ -14,40 +11,54 @@ type ColouredEnumComponentProps = {
readOnly: boolean;
enumDict: Record<string, string>;
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) => {
const {
name,
parentPath: parentPath,
value,
docString,
enumDict,
readOnly,
addNotification
addNotification,
displayName,
id
} = props;
const renderCount = useRef(0);
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;
let { changeCallback } = props;
if (changeCallback === undefined) {
changeCallback = (value: string) => {
setEnumValue(() => {
return value;
});
};
}
const renderCount = useRef(0);
const [enumValue, setEnumValue] = useState(value);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => {
renderCount.current++;
});
useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`);
setEnumValue(() => {
return props.value;
});
addNotification(`${fullAccessPath} changed to ${value}.`);
}, [props.value]);
const handleValueChange = (newValue: string) => {
setAttribute(name, parentPath, newValue);
};
return (
<div className={'component enumComponent'} id={id}>
{process.env.NODE_ENV === 'development' && (
@ -62,17 +73,19 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
{readOnly ? (
// Display the Form.Control when readOnly is true
<Form.Control
value={value}
value={enumValue}
name={name}
disabled={true}
style={{ backgroundColor: enumDict[value] }}
style={{ backgroundColor: enumDict[enumValue] }}
/>
) : (
// Display the Form.Select when readOnly is false
<Form.Select
aria-label="coloured-enum-select"
value={value}
style={{ backgroundColor: enumDict[value] }}
onChange={(event) => handleValueChange(event.target.value)}>
value={enumValue}
name={name}
style={{ backgroundColor: enumDict[enumValue] }}
onChange={(event) => changeCallback(event.target.value)}>
{Object.entries(enumDict).map(([key]) => (
<option key={key} value={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 { Card, Collapse } from 'react-bootstrap';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { Attribute, GenericComponent } from './GenericComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { SerializedValue, GenericComponent } from './GenericComponent';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
type DataServiceProps = {
name: string;
@ -13,45 +11,35 @@ type DataServiceProps = {
parentPath?: string;
isInstantUpdate: boolean;
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(
({
name,
props,
parentPath = '',
parentPath = undefined,
isInstantUpdate,
addNotification
addNotification,
displayName,
id
}: DataServiceProps) => {
const [open, setOpen] = useState(true);
let fullAccessPath = parentPath;
if (name) {
fullAccessPath = [parentPath, name].filter((element) => element).join('.');
}
const id = getIdFromFullAccessPath(fullAccessPath);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const webSettings = useContext(WebSettingsContext);
let displayName = fullAccessPath;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
return (
<div className="component dataServiceComponent" id={id}>
<Card>
<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 (
if (displayName !== '') {
return (
<div className="component dataServiceComponent" id={id}>
<Card>
<Card.Header onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }}>
{displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
<Collapse in={open}>
<Card.Body>
{Object.entries(props).map(([key, value]) => (
<GenericComponent
key={key}
attribute={value}
@ -60,12 +48,27 @@ export const DataServiceComponent = React.memo(
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
/>
);
})}
</Card.Body>
</Collapse>
</Card>
</div>
);
))}
</Card.Body>
</Collapse>
</Card>
</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 { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
import { MethodComponent } from './MethodComponent';
@ -12,6 +9,8 @@ type DeviceConnectionProps = {
parentPath: string;
isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
id: string;
};
export const DeviceConnectionComponent = React.memo(
@ -20,23 +19,14 @@ export const DeviceConnectionComponent = React.memo(
props,
parentPath,
isInstantUpdate,
addNotification
addNotification,
displayName,
id
}: DeviceConnectionProps) => {
const { connected, connect, ...updatedProps } = props;
const connectedVal = connected.value;
let fullAccessPath = parentPath;
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;
}
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
return (
<div className="deviceConnectionComponent" id={id}>
@ -48,9 +38,11 @@ export const DeviceConnectionComponent = React.memo(
<MethodComponent
name="connect"
parentPath={fullAccessPath}
parameters={connect.parameters}
docString={connect.doc}
addNotification={addNotification}
displayName={'reconnect'}
id={id + '-connect'}
render={true}
/>
</div>
)}
@ -60,6 +52,8 @@ export const DeviceConnectionComponent = React.memo(
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
id={id}
/>
</div>
);

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

@ -1,8 +1,5 @@
import React, { useContext, useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import React, { useEffect, useRef, useState } from 'react';
import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent';
@ -11,42 +8,54 @@ type EnumComponentProps = {
parentPath: string;
value: string;
docString?: string;
readOnly: boolean;
enumDict: Record<string, string>;
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) => {
const {
name,
parentPath: parentPath,
value,
docString,
enumDict,
addNotification
addNotification,
displayName,
id,
readOnly
} = props;
const renderCount = useRef(0);
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;
let { changeCallback } = props;
if (changeCallback === undefined) {
changeCallback = (value: string) => {
setEnumValue(() => {
return value;
});
};
}
const renderCount = useRef(0);
const [enumValue, setEnumValue] = useState(value);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => {
renderCount.current++;
});
useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`);
addNotification(`${fullAccessPath} changed to ${value}.`);
}, [props.value]);
const handleValueChange = (newValue: string) => {
setAttribute(name, parentPath, newValue);
};
return (
<div className={'component enumComponent'} id={id}>
{process.env.NODE_ENV === 'development' && (
@ -58,16 +67,24 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
{displayName}
<DocStringComponent docString={docString} />
</InputGroup.Text>
<Form.Select
aria-label="Default select example"
value={value}
onChange={(event) => handleValueChange(event.target.value)}>
{Object.entries(enumDict).map(([key, val]) => (
<option key={key} value={key}>
{key} - {val}
</option>
))}
</Form.Select>
{readOnly ? (
// Display the Form.Control when readOnly is true
<Form.Control value={enumValue} name={name} disabled={true} />
) : (
// Display the Form.Select when readOnly is false
<Form.Select
aria-label="example-select"
value={enumValue}
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>
</Row>
</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 { NumberComponent } from './NumberComponent';
import { SliderComponent } from './SliderComponent';
@ -12,6 +12,9 @@ import { DeviceConnectionComponent } from './DeviceConnection';
import { ImageComponent } from './ImageComponent';
import { ColouredEnumComponent } from './ColouredEnumComponent';
import { LevelName } from './NotificationsComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { WebSettingsContext } from '../WebSettings';
import { setAttribute } from '../socket';
type AttributeType =
| 'str'
@ -28,18 +31,18 @@ type AttributeType =
| 'Image'
| 'ColouredEnum';
type ValueType = boolean | string | number | object;
export type Attribute = {
type ValueType = boolean | string | number | Record<string, unknown>;
export type SerializedValue = {
type: AttributeType;
value?: ValueType | ValueType[];
readonly: boolean;
doc?: string | null;
parameters?: Record<string, string>;
async?: boolean;
frontend_render?: boolean;
enum?: Record<string, string>;
};
type GenericComponentProps = {
attribute: Attribute;
attribute: SerializedValue;
name: string;
parentPath: string;
isInstantUpdate: boolean;
@ -54,6 +57,24 @@ export const GenericComponent = React.memo(
isInstantUpdate,
addNotification
}: 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') {
return (
<ButtonComponent
@ -63,6 +84,9 @@ export const GenericComponent = React.memo(
readOnly={attribute.readonly}
value={Boolean(attribute.value)}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'float' || attribute.type === 'int') {
@ -76,6 +100,9 @@ export const GenericComponent = React.memo(
value={Number(attribute.value)}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'Quantity') {
@ -90,6 +117,9 @@ export const GenericComponent = React.memo(
unit={attribute.value['unit']}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'NumberSlider') {
@ -105,6 +135,9 @@ export const GenericComponent = React.memo(
stepSize={attribute.value['step_size']}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'Enum') {
@ -114,8 +147,12 @@ export const GenericComponent = React.memo(
parentPath={parentPath}
docString={attribute.doc}
value={String(attribute.value)}
readOnly={attribute.readonly}
enumDict={attribute.enum}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'method') {
@ -125,8 +162,10 @@ export const GenericComponent = React.memo(
name={name}
parentPath={parentPath}
docString={attribute.doc}
parameters={attribute.parameters}
addNotification={addNotification}
displayName={displayName}
id={id}
render={attribute.frontend_render}
/>
);
} else {
@ -135,9 +174,11 @@ export const GenericComponent = React.memo(
name={name}
parentPath={parentPath}
docString={attribute.doc}
parameters={attribute.parameters}
value={attribute.value as Record<string, string>}
addNotification={addNotification}
displayName={displayName}
id={id}
render={attribute.frontend_render}
/>
);
}
@ -151,6 +192,9 @@ export const GenericComponent = React.memo(
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'DataService') {
@ -161,6 +205,8 @@ export const GenericComponent = React.memo(
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'DeviceConnection') {
@ -171,17 +217,20 @@ export const GenericComponent = React.memo(
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
id={id}
/>
);
} else if (attribute.type === 'list') {
return (
<ListComponent
name={name}
value={attribute.value as Attribute[]}
value={attribute.value as SerializedValue[]}
docString={attribute.doc}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
id={id}
/>
);
} else if (attribute.type === 'Image') {
@ -189,12 +238,13 @@ export const GenericComponent = React.memo(
<ImageComponent
name={name}
parentPath={parentPath}
value={attribute.value['value']['value'] as string}
readOnly={attribute.readonly}
docString={attribute.value['value'].doc}
// Add any other specific props for the ImageComponent here
format={attribute.value['format']['value'] as string}
displayName={displayName}
id={id}
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') {
@ -207,6 +257,9 @@ export const GenericComponent = React.memo(
readOnly={attribute.readonly}
enumDict={attribute.enum}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
/>
);
} else {

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

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

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

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

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

@ -1,10 +1,7 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import React, { useEffect, useState, useRef } from 'react';
import { Form, InputGroup } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import '../App.css';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
// TODO: add button functionality
@ -41,8 +38,15 @@ type NumberComponentProps = {
docString: string;
isInstantUpdate: boolean;
unit?: string;
showName?: boolean;
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
@ -128,92 +132,57 @@ const handleDeleteKey = (
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) => {
const {
name,
parentPath,
value,
readOnly,
type,
docString,
isInstantUpdate,
unit,
addNotification
addNotification,
changeCallback = () => {},
displayName,
id
} = 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
const [cursorPosition, setCursorPosition] = useState(null);
// Create a state for the input string
const [inputString, setInputString] = useState(props.value.toString());
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
const [inputString, setInputString] = useState(value.toString());
const renderCount = useRef(0);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.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 { key, target } = event;
if (
@ -256,7 +225,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
selectionStart,
selectionEnd
));
} else if (key === '.') {
} else if (key === '.' && type === 'float') {
({ value: newValue, selectionStart } = handleNumericKey(
key,
value,
@ -283,7 +252,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
selectionEnd
));
} else if (key === 'Enter' && !isInstantUpdate) {
setAttribute(name, parentPath, Number(newValue));
changeCallback(Number(newValue));
return;
} else {
console.debug(key);
@ -292,7 +261,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
// Update the input value and maintain the cursor position
if (isInstantUpdate) {
setAttribute(name, parentPath, Number(newValue));
changeCallback(Number(newValue));
}
setInputString(newValue);
@ -304,35 +273,59 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
const handleBlur = () => {
if (!isInstantUpdate) {
// 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 (
<div className="component numberComponent" id={id}>
{process.env.NODE_ENV === 'development' && (
<div>Render count: {renderCount.current}</div>
)}
<div className="d-flex">
<InputGroup>
{showName && (
<InputGroup.Text>
{displayName}
<DocStringComponent docString={docString} />
</InputGroup.Text>
)}
<Form.Control
type="text"
value={inputString}
disabled={readOnly}
name={fullAccessPath}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
/>
{unit && <InputGroup.Text>{unit}</InputGroup.Text>}
</InputGroup>
</div>
<InputGroup>
{displayName && (
<InputGroup.Text>
{displayName}
<DocStringComponent docString={docString} />
</InputGroup.Text>
)}
<Form.Control
type="text"
value={inputString}
disabled={readOnly}
name={name}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
/>
{unit && <InputGroup.Text>{unit}</InputGroup.Text>}
</InputGroup>
</div>
);
});

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

@ -1,11 +1,8 @@
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import React, { useEffect, useRef, useState } from 'react';
import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import { Slider } from '@mui/material';
import { NumberComponent, NumberObject } from './NumberComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
type SliderComponentProps = {
@ -19,6 +16,14 @@ type SliderComponentProps = {
stepSize: NumberObject;
isInstantUpdate: boolean;
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) => {
@ -33,35 +38,31 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
stepSize,
docString,
isInstantUpdate,
addNotification
addNotification,
changeCallback = () => {},
displayName,
id
} = props;
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(() => {
renderCount.current++;
});
useEffect(() => {
addNotification(`${parentPath}.${name} changed to ${value}.`);
addNotification(`${fullAccessPath} changed to ${value.value}.`);
}, [props.value]);
useEffect(() => {
addNotification(`${parentPath}.${name}.min changed to ${min}.`);
addNotification(`${fullAccessPath}.min changed to ${min.value}.`);
}, [props.min]);
useEffect(() => {
addNotification(`${parentPath}.${name}.max changed to ${max}.`);
addNotification(`${fullAccessPath}.max changed to ${max.value}.`);
}, [props.max]);
useEffect(() => {
addNotification(`${parentPath}.${name}.stepSize changed to ${stepSize}.`);
addNotification(`${fullAccessPath}.stepSize changed to ${stepSize.value}.`);
}, [props.stepSize]);
const handleOnChange = (event, newNumber: number | number[]) => {
@ -70,11 +71,11 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
if (Array.isArray(newNumber)) {
newNumber = newNumber[0];
}
setAttribute(`${name}.value`, parentPath, newNumber);
changeCallback(newNumber, `${name}.value`);
};
const handleValueChange = (newValue: number, valueType: string) => {
setAttribute(`${name}.${valueType}`, parentPath, newValue);
changeCallback(newValue, `${name}.${valueType}`);
};
const deconstructNumberDict = (
@ -139,8 +140,9 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
type="float"
value={valueMagnitude}
unit={valueUnit}
showName={false}
addNotification={() => null}
addNotification={() => {}}
changeCallback={(value) => changeCallback(value, name + '.value')}
id={id + '-value'}
/>
</Col>
<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 { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import '../App.css';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
// TODO: add button functionality
@ -17,22 +14,33 @@ type StringComponentProps = {
docString: string;
isInstantUpdate: boolean;
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) => {
const { name, parentPath, readOnly, docString, isInstantUpdate, addNotification } =
props;
const {
name,
readOnly,
docString,
isInstantUpdate,
addNotification,
changeCallback = () => {},
displayName,
id
} = props;
const renderCount = useRef(0);
const [inputString, setInputString] = useState(props.value);
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;
}
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => {
renderCount.current++;
@ -43,25 +51,26 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
if (props.value !== inputString) {
setInputString(props.value);
}
addNotification(`${parentPath}.${name} changed to ${props.value}.`);
addNotification(`${fullAccessPath} changed to ${props.value}.`);
}, [props.value]);
const handleChange = (event) => {
setInputString(event.target.value);
if (isInstantUpdate) {
setAttribute(name, parentPath, event.target.value);
changeCallback(event.target.value);
}
};
const handleKeyDown = (event) => {
if (event.key === 'Enter' && !isInstantUpdate) {
setAttribute(name, parentPath, inputString);
changeCallback(inputString);
event.preventDefault();
}
};
const handleBlur = () => {
if (!isInstantUpdate) {
setAttribute(name, parentPath, inputString);
changeCallback(inputString);
}
};
@ -77,9 +86,9 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
</InputGroup.Text>
<Form.Control
type="text"
name={name}
value={inputString}
disabled={readOnly}
name={name}
onChange={handleChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}

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

@ -1,11 +1,5 @@
export interface SerializedValue {
type: string;
value: Record<string, unknown> | Array<Record<string, unknown>>;
readonly: boolean;
doc: string | null;
async?: boolean;
parameters?: unknown;
}
import { SerializedValue } from '../components/GenericComponent';
export type State = {
type: string;
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 inspect
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.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:
from collections.abc import Callable
@ -16,9 +21,12 @@ if TYPE_CHECKING:
logger = logging.getLogger(__name__)
class TaskDict(TypedDict):
task: asyncio.Task[None]
kwargs: dict[str, Any]
class TaskDefinitionError(Exception):
pass
class TaskStatus(Enum):
RUNNING = "running"
class TaskManager:
@ -78,7 +86,7 @@ class TaskManager:
def __init__(self, service: DataService) -> None:
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
tasks and the values are TaskDict instances which include the task itself and
its kwargs.
@ -91,13 +99,26 @@ class TaskManager:
return asyncio.get_running_loop()
def _set_start_and_stop_for_async_methods(self) -> None:
# inspect the methods of the class
for name, method in inspect.getmembers(
self.service, predicate=inspect.iscoroutinefunction
):
# 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))
for name in dir(self.service):
# circumvents calling properties
if is_property_attribute(self.service, name):
continue
method = getattr(self.service, 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:
if self.service._autostart_tasks is not None:
@ -137,7 +158,7 @@ class TaskManager:
# cancel the task
task = self.tasks.get(name, None)
if task is not None:
self._loop.call_soon_threadsafe(task["task"].cancel)
self._loop.call_soon_threadsafe(task.cancel)
return stop_task
@ -156,7 +177,7 @@ class TaskManager:
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:
"""Handles tasks that have finished.
@ -180,36 +201,16 @@ class TaskManager:
)
raise exception
async def task(*args: Any, **kwargs: Any) -> None:
async def task() -> None:
try:
await method(*args, **kwargs)
await method()
except asyncio.CancelledError:
logger.info("Task '%s' was cancelled", 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
# 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(
lambda task: task_done_callback(task, name)
)
@ -217,13 +218,10 @@ class TaskManager:
# Store the task and its arguments in the '__tasks' dictionary. The
# key is the name of the method, and the value is a dictionary
# containing the task object and the updated keyword arguments.
self.tasks[name] = {
"task": task_object,
"kwargs": kwargs_updated,
}
self.tasks[name] = task_object
# emit the notification that the task was started
self.service._notify_changed(name, kwargs_updated)
self.service._notify_changed(name, TaskStatus.RUNNING)
else:
logger.error("Task '%s' is already running!", name)

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

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

21
tests/data_service/test_data_service.py
View File

@ -1,9 +1,14 @@
from enum import Enum
from typing import Any
import pydase
import pydase.units as u
import pytest
from pydase import DataService
from pydase.data_service.data_service_observer import DataServiceObserver
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
@ -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 "
"unexpected behaviour!"
) 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")[
"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)
service_instance._task_manager.start_autostart_tasks()
assert "'my_task' changed to '{}'" in caplog.text
assert "'my_other_task' changed to '{}'" in caplog.text
assert "'my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "'my_other_task' changed to 'TaskStatus.RUNNING'" in caplog.text
@pytest.mark.asyncio
@ -62,8 +62,8 @@ async def test_DataService_subclass_autostart_task_callback(
DataServiceObserver(state_manager)
service_instance._task_manager.start_autostart_tasks()
assert "'sub_service.my_task' changed to '{}'" in caplog.text
assert "'sub_service.my_other_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 'TaskStatus.RUNNING'" in caplog.text
@pytest.mark.asyncio
@ -92,10 +92,20 @@ async def test_DataService_subclass_list_autostart_task_callback(
DataServiceObserver(state_manager)
service_instance._task_manager.start_autostart_tasks()
assert "'sub_services_list[0].my_task' changed to '{}'" in caplog.text
assert "'sub_services_list[0].my_other_task' changed to '{}'" 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_task' changed to 'TaskStatus.RUNNING'" 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
@ -104,20 +114,20 @@ async def test_start_and_stop_task_methods(caplog: LogCaptureFixture) -> None:
def __init__(self) -> None:
super().__init__()
async def my_task(self, param: str) -> None:
async def my_task(self) -> None:
while True:
logger.debug("Logging param: %s", param)
logger.debug("Logging message")
await asyncio.sleep(0.1)
# Your test code here
service_instance = MyService()
state_manager = StateManager(service_instance)
DataServiceObserver(state_manager)
service_instance.start_my_task("Hello")
service_instance.start_my_task()
await asyncio.sleep(0.01)
assert "'my_task' changed to '{'param': 'Hello'}'" in caplog.text
assert "Logging param: Hello" in caplog.text
assert "'my_task' changed to 'TaskStatus.RUNNING'" in caplog.text
assert "Logging message" in caplog.text
caplog.clear()
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 pytest
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 (
SerializationPathError,
dump,
@ -133,29 +135,34 @@ async def test_method_serialization() -> None:
def some_method(self) -> str:
return "some method"
async def some_task(self, sleep_time: int) -> None:
async def some_task(self) -> None:
while True:
await asyncio.sleep(sleep_time)
await asyncio.sleep(10)
instance = ClassWithMethod()
instance.start_some_task(10) # type: ignore
instance.start_some_task() # type: ignore
assert dump(instance)["value"] == {
"some_method": {
"async": False,
"doc": None,
"parameters": {},
"readonly": True,
"type": "method",
"value": None,
"readonly": True,
"doc": None,
"async": False,
"signature": {"parameters": {}, "return_annotation": {}},
"frontend_render": False,
},
"some_task": {
"async": True,
"doc": None,
"parameters": {"sleep_time": "int"},
"readonly": True,
"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) == {
"async": False,
"doc": None,
"parameters": {"arg_without_type_hint": None},
"signature": {
"parameters": {
"arg_without_type_hint": {
"annotation": "<class 'inspect._empty'>",
"default": {},
}
},
"return_annotation": {},
},
"readonly": True,
"type": "method",
"value": None,
"frontend_render": False,
}
assert dump(method_with_type_hint) == {
"async": False,
"doc": None,
"parameters": {"some_argument": "int"},
"readonly": True,
"type": "method",
"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,
"doc": None,
"parameters": {"some_argument": "int | float"},
"readonly": True,
def test_exposed_function_serialization() -> None:
class MyService(pydase.DataService):
@frontend
def some_method(self) -> None:
pass
@frontend
def some_function() -> None:
pass
assert dump(MyService().some_method) == {
"type": "method",
"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,
"readonly": False,
"type": "DataService",
"name": "MySubclass",
"value": {
"bool_attr": {
"doc": None,
@ -268,6 +327,7 @@ def test_dict_serialization() -> None:
"type": "dict",
"value": {
"DataService_key": {
"name": "MyClass",
"doc": None,
"readonly": False,
"type": "DataService",
@ -317,9 +377,14 @@ def test_derived_data_service_serialization() -> None:
class DerivedService(BaseService):
...
base_instance = BaseService()
service_instance = DerivedService()
assert service_instance.serialize() == base_instance.serialize()
base_service_serialization = dump(BaseService())
derived_service_serialization = dump(DerivedService())
# 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