diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx index 97e2419..8eded7c 100644 --- 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) { diff --git a/frontend/src/utils/stateUtils.ts b/frontend/src/utils/stateUtils.ts index c1bd223..5891603 100644 --- 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 diff --git a/src/pydase/frontend/asset-manifest.json b/src/pydase/frontend/asset-manifest.json index 06ee835..fd4f27c 100644 --- 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" ] } \ No newline at end of file diff --git a/src/pydase/frontend/index.html b/src/pydase/frontend/index.html index 039cf53..213c530 100644 --- a/src/pydase/frontend/index.html +++ b/src/pydase/frontend/index.html @@ -1 +1 @@ -pydase App
\ No newline at end of file +pydase App
\ No newline at end of file diff --git a/src/pydase/frontend/static/js/main.ee3ff1c7.js b/src/pydase/frontend/static/js/main.57f8ec4c.js similarity index 63% rename from src/pydase/frontend/static/js/main.ee3ff1c7.js rename to src/pydase/frontend/static/js/main.57f8ec4c.js index c751d49..999d6ca 100644 --- a/src/pydase/frontend/static/js/main.ee3ff1c7.js +++ b/src/pydase/frontend/static/js/main.57f8ec4c.js @@ -1,3 +1,3 @@ -/*! For license information please see main.ee3ff1c7.js.LICENSE.txt */ -(()=>{var e={694:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t{"use strict";e.exports=function(e,t,n,r,o,a,i,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,o,a,i,s],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},888:(e,t,n)=>{"use strict";var r=n(47);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},7:(e,t,n)=>{e.exports=n(888)()},47:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},463:(e,t,n)=>{"use strict";var r=n(791),o=n(296);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n