Merge pull request #113 from tiqi-group/feat/frontend_display_toggle

Feat: frontend display toggle
This commit is contained in:
Mose Müller 2024-03-12 07:40:50 +01:00 committed by GitHub
commit 8310a51a74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 29 additions and 16 deletions

View File

@ -831,7 +831,8 @@ Please ensure that the CSS file path is accessible from the server's running loc
`pydase` enables users to customize the frontend layout via the `web_settings.json` file. Each key in the file corresponds to the full access path of public attributes, properties, and methods of the exposed service, using dot-notation.
- **Custom Display Names**: Modify the `"displayName"` value in the file to change how each component appears in the frontend.
<!-- - **Adjustable Component Order**: The `"index"` values determine the order of components. Alter these values to rearrange the components as desired. -->
- **Control Component Visibility**: Utilize the `"display"` key-value pair to control whether a component is rendered in the frontend. Set the value to `true` to make the component visible or `false` to hide it.
<!-- - **Adjustable Component Order**: The `"displayOrder"` values determine the order of components. Alter these values to rearrange the components as desired. -->
The `web_settings.json` file will be stored in the directory specified by `SERVICE_CONFIG_DIR`. You can generate a `web_settings.json` file by setting the `GENERATE_WEB_SETTINGS` to `True`. For more information, see the [configuration section](#configuring-pydase-via-environment-variables).

View File

@ -4,5 +4,6 @@ export const WebSettingsContext = createContext<Record<string, WebSetting>>({});
export type WebSetting = {
displayName: string;
display: boolean;
index: number;
};

View File

@ -62,8 +62,13 @@ export const GenericComponent = React.memo(
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
if (webSettings[fullAccessPath]) {
if (webSettings[fullAccessPath].display === false) {
return null;
}
if (webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
}
function changeCallback(

View File

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

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.ca0b4800.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.97ef73ea.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>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -130,7 +130,10 @@ class WebServer:
if path in current_web_settings:
continue
current_web_settings[path] = {"displayName": path.split(".")[-1]}
current_web_settings[path] = {
"displayName": path.split(".")[-1],
"display": True,
}
return current_web_settings

View File

@ -26,8 +26,8 @@ def test_web_settings() -> None:
observer = DataServiceObserver(state_manager)
with tempfile.TemporaryDirectory() as tmp:
web_settings = {
"attr_1": {"displayName": "Attribute"},
"attr_1.name": {"displayName": "Attribute name"},
"attr_1": {"displayName": "Attribute", "display": False},
"attr_1.name": {"displayName": "Attribute name", "display": True},
}
web_settings_file = Path(tmp) / "web_settings.json"
@ -44,8 +44,11 @@ def test_web_settings() -> None:
new_web_settings = server.web_settings
# existing entries are not overwritten, new entries are appended
assert new_web_settings == {**web_settings, "added": {"displayName": "added"}}
assert new_web_settings == {
**web_settings,
"added": {"displayName": "added", "display": True},
}
assert json.loads(web_settings_file.read_text()) == {
**web_settings,
"added": {"displayName": "added"},
"added": {"displayName": "added", "display": True},
}