passing fullAccessPath instead of parentPath and name

frontend/src/App.tsx

@@ -188,8 +188,6 @@ const App = () => {
       <div className="App navbarOffset">
         <WebSettingsContext.Provider value={webSettings}>
           <GenericComponent
-            name=""
-            parentPath=""
             attribute={state as SerializedValue}
             isInstantUpdate={isInstantUpdate}
             addNotification={addNotification}

frontend/src/components/AsyncMethodComponent.tsx

@@ -5,8 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
 type AsyncMethodProps = {
-  name: string;
+  fullAccessPath: string;
-  parentPath: string;
   value: 'RUNNING' | null;
   docString?: string;
   hideOutput?: boolean;
@@ -18,8 +17,7 @@ type AsyncMethodProps = {
 
 export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const {
-    name,
+    fullAccessPath,
-    parentPath,
     docString,
     value: runningTask,
     addNotification,
@@ -34,7 +32,8 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
 
   const renderCount = useRef(0);
   const formRef = useRef(null);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const name = fullAccessPath.split('.').at(-1);
+  const parentPath = fullAccessPath.slice(0, -(name.length + 1));
 
   useEffect(() => {
     renderCount.current++;

frontend/src/components/ButtonComponent.tsx

@@ -4,8 +4,7 @@ import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
 type ButtonComponentProps = {
-  name: string;
+  fullAccessPath: string;
-  parentPath?: string;
   value: boolean;
   readOnly: boolean;
   docString: string;
@@ -24,6 +23,7 @@ type ButtonComponentProps = {
 export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   const {
     value,
+    fullAccessPath,
     readOnly,
     docString,
     addNotification,
@@ -32,9 +32,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
     id
   } = props;
   // const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
-  const fullAccessPath = [props.parentPath, props.name]
-    .filter((element) => element)
-    .join('.');
 
   const renderCount = useRef(0);
 

frontend/src/components/DataServiceComponent.tsx

@@ -6,9 +6,7 @@ import { SerializedValue, GenericComponent } from './GenericComponent';
 import { LevelName } from './NotificationsComponent';
 
 type DataServiceProps = {
-  name: string;
   props: DataServiceJSON;
-  parentPath?: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
@@ -18,17 +16,8 @@ type DataServiceProps = {
 export type DataServiceJSON = Record<string, SerializedValue>;
 
 export const DataServiceComponent = React.memo(
-  ({
+  ({ props, isInstantUpdate, addNotification, displayName, id }: DataServiceProps) => {
-    name,
-    props,
-    parentPath = undefined,
-    isInstantUpdate,
-    addNotification,
-    displayName,
-    id
-  }: DataServiceProps) => {
     const [open, setOpen] = useState(true);
-    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
 
     if (displayName !== '') {
       return (
@@ -43,8 +32,6 @@ export const DataServiceComponent = React.memo(
                   <GenericComponent
                     key={key}
                     attribute={value}
-                    name={key}
-                    parentPath={fullAccessPath}
                     isInstantUpdate={isInstantUpdate}
                     addNotification={addNotification}
                   />
@@ -61,8 +48,6 @@ export const DataServiceComponent = React.memo(
             <GenericComponent
               key={key}
               attribute={value}
-              name={key}
-              parentPath={fullAccessPath}
               isInstantUpdate={isInstantUpdate}
               addNotification={addNotification}
             />

frontend/src/components/DeviceConnection.tsx

@@ -4,9 +4,8 @@ import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
 import { MethodComponent } from './MethodComponent';
 
 type DeviceConnectionProps = {
-  name: string;
+  fullAccessPath: string;
   props: DataServiceJSON;
-  parentPath: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
@@ -15,9 +14,8 @@ type DeviceConnectionProps = {
 
 export const DeviceConnectionComponent = React.memo(
   ({
-    name,
+    fullAccessPath,
     props,
-    parentPath,
     isInstantUpdate,
     addNotification,
     displayName,
@@ -26,8 +24,6 @@ export const DeviceConnectionComponent = React.memo(
     const { connected, connect, ...updatedProps } = props;
     const connectedVal = connected.value;
 
-    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
-
     return (
       <div className="deviceConnectionComponent" id={id}>
         {!connectedVal && (
@@ -36,8 +32,7 @@ export const DeviceConnectionComponent = React.memo(
               {displayName != '' ? displayName : 'Device'} is currently not available!
             </div>
             <MethodComponent
-              name="connect"
+              fullAccessPath={`${fullAccessPath}.connect`}
-              parentPath={fullAccessPath}
               docString={connect.doc}
               addNotification={addNotification}
               displayName={'reconnect'}
@@ -47,9 +42,7 @@ export const DeviceConnectionComponent = React.memo(
           </div>
         )}
         <DataServiceComponent
-          name={name}
           props={updatedProps}
-          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           displayName={displayName}

frontend/src/components/GenericComponent.tsx

@@ -45,24 +45,16 @@ export type SerializedValue = {
 };
 type GenericComponentProps = {
   attribute: SerializedValue;
-  name: string;
-  parentPath: string;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
 };
 
 export const GenericComponent = React.memo(
-  ({
+  ({ attribute, isInstantUpdate, addNotification }: GenericComponentProps) => {
-    attribute,
+    const { full_access_path: fullAccessPath } = attribute;
-    name,
-    parentPath,
-    isInstantUpdate,
-    addNotification
-  }: GenericComponentProps) => {
-    const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
     const id = getIdFromFullAccessPath(fullAccessPath);
     const webSettings = useContext(WebSettingsContext);
-    let displayName = name;
+    let displayName = fullAccessPath.split('.').at(-1);
 
     if (webSettings[fullAccessPath]) {
       if (webSettings[fullAccessPath].display === false) {
@@ -83,8 +75,7 @@ export const GenericComponent = React.memo(
     if (attribute.type === 'bool') {
       return (
         <ButtonComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
-          parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Boolean(attribute.value)}
@@ -97,9 +88,8 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'float' || attribute.type === 'int') {
       return (
         <NumberComponent
-          name={name}
           type={attribute.type}
-          parentPath={parentPath}
+          fullAccessPath={fullAccessPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Number(attribute.value)}
@@ -113,9 +103,8 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'Quantity') {
       return (
         <NumberComponent
-          name={name}
           type="float"
-          parentPath={parentPath}
+          fullAccessPath={fullAccessPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Number(attribute.value['magnitude'])}
@@ -130,8 +119,7 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'NumberSlider') {
       return (
         <SliderComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
-          parentPath={parentPath}
           docString={attribute.value['value'].doc}
           readOnly={attribute.readonly}
           value={attribute.value['value']}
@@ -148,8 +136,7 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'Enum') {
       return (
         <EnumComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
-          parentPath={parentPath}
           docString={attribute.doc}
           value={String(attribute.value)}
           readOnly={attribute.readonly}
@@ -164,8 +151,7 @@ export const GenericComponent = React.memo(
       if (!attribute.async) {
         return (
           <MethodComponent
-            name={name}
+            fullAccessPath={fullAccessPath}
-            parentPath={parentPath}
             docString={attribute.doc}
             addNotification={addNotification}
             displayName={displayName}
@@ -176,10 +162,9 @@ export const GenericComponent = React.memo(
       } else {
         return (
           <AsyncMethodComponent
-            name={name}
+            fullAccessPath={fullAccessPath}
-            parentPath={parentPath}
             docString={attribute.doc}
-            value={attribute.value as Record<string, string>}
+            value={attribute.value as 'RUNNING' | null}
             addNotification={addNotification}
             displayName={displayName}
             id={id}
@@ -190,11 +175,10 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'str') {
       return (
         <StringComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
           value={attribute.value as string}
           readOnly={attribute.readonly}
           docString={attribute.doc}
-          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           changeCallback={changeCallback}
@@ -205,9 +189,7 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'DataService') {
       return (
         <DataServiceComponent
-          name={name}
           props={attribute.value as DataServiceJSON}
-          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           displayName={displayName}
@@ -217,9 +199,8 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'DeviceConnection') {
       return (
         <DeviceConnectionComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
           props={attribute.value as DataServiceJSON}
-          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           displayName={displayName}
@@ -229,10 +210,8 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'list') {
       return (
         <ListComponent
-          name={name}
           value={attribute.value as SerializedValue[]}
           docString={attribute.doc}
-          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
           id={id}
@@ -241,8 +220,7 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'Image') {
       return (
         <ImageComponent
-          name={name}
+          fullAccessPath={fullAccessPath}
-          parentPath={parentPath}
           docString={attribute.value['value'].doc}
           displayName={displayName}
           id={id}
@@ -255,20 +233,15 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'ColouredEnum') {
       return (
         <ColouredEnumComponent
-          name={name}
+          attribute={attribute}
-          parentPath={parentPath}
-          docString={attribute.doc}
-          value={String(attribute.value)}
-          readOnly={attribute.readonly}
-          enumDict={attribute.enum}
           addNotification={addNotification}
-          changeCallback={changeCallback}
           displayName={displayName}
           id={id}
+          changeCallback={changeCallback}
         />
       );
     } else {
-      return <div key={name}>{name}</div>;
+      return <div key={fullAccessPath}>{fullAccessPath}</div>;
     }
   }
 );

frontend/src/components/ImageComponent.tsx

@@ -5,8 +5,7 @@ import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
 import { LevelName } from './NotificationsComponent';
 
 type ImageComponentProps = {
-  name: string;
+  fullAccessPath: string;
-  parentPath: string;
   value: string;
   docString: string;
   format: string;
@@ -16,13 +15,11 @@ type ImageComponentProps = {
 };
 
 export const ImageComponent = React.memo((props: ImageComponentProps) => {
-  const { value, docString, format, addNotification, displayName, id } = props;
+  const { fullAccessPath, value, docString, format, addNotification, displayName, id } =
+    props;
 
   const renderCount = useRef(0);
   const [open, setOpen] = useState(true);
-  const fullAccessPath = [props.parentPath, props.name]
-    .filter((element) => element)
-    .join('.');
 
   useEffect(() => {
     renderCount.current++;

frontend/src/components/ListComponent.tsx

@@ -4,8 +4,6 @@ import { SerializedValue, GenericComponent } from './GenericComponent';
 import { LevelName } from './NotificationsComponent';
 
 type ListComponentProps = {
-  name: string;
-  parentPath?: string;
   value: SerializedValue[];
   docString: string;
   isInstantUpdate: boolean;
@@ -14,8 +12,7 @@ type ListComponentProps = {
 };
 
 export const ListComponent = React.memo((props: ListComponentProps) => {
-  const { name, parentPath, value, docString, isInstantUpdate, addNotification, id } =
+  const { value, docString, isInstantUpdate, addNotification, id } = props;
-    props;
 
   const renderCount = useRef(0);
 
@@ -34,8 +31,6 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
           <GenericComponent
             key={`${name}[${index}]`}
             attribute={item}
-            name={`${name}[${index}]`}
-            parentPath={parentPath}
             isInstantUpdate={isInstantUpdate}
             addNotification={addNotification}
           />

frontend/src/components/MethodComponent.tsx

@@ -5,8 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 import { LevelName } from './NotificationsComponent';
 
 type MethodProps = {
-  name: string;
+  fullAccessPath: string;
-  parentPath: string;
   docString?: string;
   addNotification: (message: string, levelname?: LevelName) => void;
   displayName: string;
@@ -15,7 +14,7 @@ type MethodProps = {
 };
 
 export const MethodComponent = React.memo((props: MethodProps) => {
-  const { name, parentPath, docString, addNotification, displayName, id } = props;
+  const { fullAccessPath, docString, addNotification, displayName, id } = props;
 
   // Conditional rendering based on the 'render' prop.
   if (!props.render) {
@@ -24,7 +23,6 @@ export const MethodComponent = React.memo((props: MethodProps) => {
 
   const renderCount = useRef(0);
   const formRef = useRef(null);
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
 
   const triggerNotification = () => {
     const message = `Method ${fullAccessPath} was triggered.`;

frontend/src/components/NumberComponent.tsx

@@ -30,9 +30,8 @@ export type FloatObject = {
 export type NumberObject = IntObject | FloatObject | QuantityObject;
 
 type NumberComponentProps = {
-  name: string;
   type: 'float' | 'int';
-  parentPath?: string;
+  fullAccessPath: string;
   value: number;
   readOnly: boolean;
   docString: string;
@@ -161,7 +160,7 @@ const handleNumericKey = (
 
 export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const {
-    name,
+    fullAccessPath,
     value,
     readOnly,
     type,
@@ -179,9 +178,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   // Create a state for the input string
   const [inputString, setInputString] = useState(value.toString());
   const renderCount = useRef(0);
-  const fullAccessPath = [props.parentPath, props.name]
+  const name = fullAccessPath.split('.').at(-1);
-    .filter((element) => element)
-    .join('.');
 
   const handleKeyDown = (event) => {
     const { key, target } = event;

frontend/src/components/SliderComponent.tsx

@@ -6,10 +6,9 @@ import { NumberComponent, NumberObject } from './NumberComponent';
 import { LevelName } from './NotificationsComponent';
 
 type SliderComponentProps = {
-  name: string;
+  fullAccessPath: string;
   min: NumberObject;
   max: NumberObject;
-  parentPath?: string;
   value: NumberObject;
   readOnly: boolean;
   docString: string;
@@ -30,8 +29,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const renderCount = useRef(0);
   const [open, setOpen] = useState(false);
   const {
-    name,
+    fullAccessPath,
-    parentPath,
     value,
     min,
     max,
@@ -43,7 +41,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     displayName,
     id
   } = props;
-  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
 
   useEffect(() => {
     renderCount.current++;
@@ -133,8 +130,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
         <Col xs="3" xl>
           <NumberComponent
             isInstantUpdate={isInstantUpdate}
-            parentPath={parentPath}
+            fullAccessPath={`${fullAccessPath}.value`}
-            name={`${name}.value`}
             docString=""
             readOnly={valueReadOnly}
             type="float"

frontend/src/components/StringComponent.tsx

@@ -7,8 +7,7 @@ import { LevelName } from './NotificationsComponent';
 // TODO: add button functionality
 
 type StringComponentProps = {
-  name: string;
+  fullAccessPath: string;
-  parentPath?: string;
   value: string;
   readOnly: boolean;
   docString: string;
@@ -26,7 +25,7 @@ type StringComponentProps = {
 
 export const StringComponent = React.memo((props: StringComponentProps) => {
   const {
-    name,
+    fullAccessPath,
     readOnly,
     docString,
     isInstantUpdate,
@@ -38,9 +37,6 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
 
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
-  const fullAccessPath = [props.parentPath, props.name]
-    .filter((element) => element)
-    .join('.');
 
   useEffect(() => {
     renderCount.current++;
@@ -86,7 +82,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
         </InputGroup.Text>
         <Form.Control
           type="text"
-          name={name}
+          name={fullAccessPath}
           value={inputString}
           disabled={readOnly}
           onChange={handleChange}