frontend: fixes displayName for dotted dictionary keys

2025-06-03 20:30:40 +02:00 · 2024-04-30 09:59:54 +02:00 · 2024-04-30 09:59:54 +02:00 · 33aa8708fd
commit 33aa8708fd
parent 37d698a1b2
8 changed files with 36 additions and 10 deletions
--- a/frontend/src/components/GenericComponent.tsx
+++ b/frontend/src/components/GenericComponent.tsx
@ -15,6 +15,7 @@ import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { WebSettingsContext } from '../WebSettings';
 import { updateValue } from '../socket';
 import { DictComponent } from './DictComponent';
+import { parseFullAccessPath } from '../utils/stateUtils';

 type AttributeType =
  | 'str'
@ -51,12 +52,37 @@ type GenericComponentProps = {
  addNotification: (message: string, levelname?: LevelName) => void;
 };

+const getPathFromPathParts = (pathParts: string[]): string => {
+  let path = '';
+  for (const pathPart of pathParts) {
+    if (!pathPart.startsWith('[') && path !== '') {
+      path += '.';
+    }
+    path += pathPart;
+  }
+  return path;
+};
+
+const createDisplayNameFromAccessPath = (fullAccessPath: string): string => {
+  const displayNameParts = [];
+  const parsedFullAccessPath = parseFullAccessPath(fullAccessPath);
+  for (let i = parsedFullAccessPath.length - 1; i >= 0; i--) {
+    const item = parsedFullAccessPath[i];
+    displayNameParts.unshift(item);
+    if (!item.startsWith('[')) {
+      break;
+    }
+  }
+  return getPathFromPathParts(displayNameParts);
+};
+
 export const GenericComponent = React.memo(
  ({ attribute, isInstantUpdate, addNotification }: GenericComponentProps) => {
    const { full_access_path: fullAccessPath } = attribute;
    const id = getIdFromFullAccessPath(fullAccessPath);
    const webSettings = useContext(WebSettingsContext);
-    let displayName = fullAccessPath.split('.').at(-1);
+
+    let displayName = createDisplayNameFromAccessPath(fullAccessPath);

    if (webSettings[fullAccessPath]) {
      if (webSettings[fullAccessPath].display === false) {
--- a/frontend/src/utils/stateUtils.ts
+++ b/frontend/src/utils/stateUtils.ts
@ -15,7 +15,7 @@ export type State = {
 * @returns An array of components that make up the path, including attribute names,
 *          numeric indices, and string keys as separate elements.
 */
-function parseFullAccessPath(path: string): string[] {
+export function parseFullAccessPath(path: string): string[] {
  // The pattern matches:
  // \w+ - Words
  // \[\d+\.\d+\] - Floating point numbers inside brackets
--- a/src/pydase/frontend/asset-manifest.json
+++ b/src/pydase/frontend/asset-manifest.json
@ -1,13 +1,13 @@
 {
  "files": {
    "main.css": "/static/css/main.7ef670d5.css",
-    "main.js": "/static/js/main.ee3ff1c7.js",
+    "main.js": "/static/js/main.57f8ec4c.js",
    "index.html": "/index.html",
    "main.7ef670d5.css.map": "/static/css/main.7ef670d5.css.map",
-    "main.ee3ff1c7.js.map": "/static/js/main.ee3ff1c7.js.map"
+    "main.57f8ec4c.js.map": "/static/js/main.57f8ec4c.js.map"
  },
  "entrypoints": [
    "static/css/main.7ef670d5.css",
-    "static/js/main.ee3ff1c7.js"
+    "static/js/main.57f8ec4c.js"
  ]
 }
--- a/src/pydase/frontend/index.html
+++ b/src/pydase/frontend/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pydase UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pydase App</title><script defer="defer" src="/static/js/main.ee3ff1c7.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.57f8ec4c.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>
--- a/src/pydase/frontend/static/js/main.57f8ec4c.js
+++ b/src/pydase/frontend/static/js/main.57f8ec4c.js
--- a/src/pydase/frontend/static/js/main.57f8ec4c.js.LICENSE.txt
+++ b/src/pydase/frontend/static/js/main.57f8ec4c.js.LICENSE.txt
--- a/src/pydase/frontend/static/js/main.57f8ec4c.js.map
+++ b/src/pydase/frontend/static/js/main.57f8ec4c.js.map
--- a/src/pydase/frontend/static/js/main.ee3ff1c7.js.map
+++ b/src/pydase/frontend/static/js/main.ee3ff1c7.js.map