diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx
index f3915b2..70be699 100644
--- a/frontend/src/components/ButtonComponent.tsx
+++ b/frontend/src/components/ButtonComponent.tsx
@@ -19,7 +19,8 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   const { name, parentPath, value, readOnly, docString, mapping, addNotification } =
     props;
   const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   const renderCount = useRef(0);
 
diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx
index d2b8393..5863f7b 100644
--- a/frontend/src/components/ColouredEnumComponent.tsx
+++ b/frontend/src/components/ColouredEnumComponent.tsx
@@ -26,7 +26,8 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
     addNotification
   } = props;
   const renderCount = useRef(0);
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index 00f2ca3..1971e0c 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -20,14 +20,14 @@ export const DataServiceComponent = React.memo(
   ({
     name,
     props,
-    parentPath = 'DataService',
+    parentPath = '',
     isInstantUpdate,
     addNotification
   }: DataServiceProps) => {
     const [open, setOpen] = useState(true);
     let fullAccessPath = parentPath;
     if (name) {
-      fullAccessPath = parentPath.concat('.' + name);
+      fullAccessPath = [parentPath, name].filter((element) => element).join('.');
     }
     const id = getIdFromFullAccessPath(fullAccessPath);
 
diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index e53cd83..03f556c 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } 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';
 
@@ -24,6 +25,8 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   } = props;
 
   const renderCount = useRef(0);
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
@@ -38,7 +41,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   };
 
   return (
-    <div className={'enumComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <div>Render count: {renderCount.current}</div>
       )}
diff --git a/frontend/src/components/ImageComponent.tsx b/frontend/src/components/ImageComponent.tsx
index c1b41fa..23294c7 100644
--- a/frontend/src/components/ImageComponent.tsx
+++ b/frontend/src/components/ImageComponent.tsx
@@ -20,7 +20,8 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
 
   const renderCount = useRef(0);
   const [open, setOpen] = useState(true);
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx
index 5286321..8272277 100644
--- a/frontend/src/components/ListComponent.tsx
+++ b/frontend/src/components/ListComponent.tsx
@@ -18,7 +18,8 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
     props;
 
   const renderCount = useRef(0);
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx
index a877b15..cad7317 100644
--- a/frontend/src/components/MethodComponent.tsx
+++ b/frontend/src/components/MethodComponent.tsx
@@ -21,7 +21,8 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   const [hideOutput, setHideOutput] = useState(false);
   // Add a new state variable to hold the list of function calls
   const [functionCalls, setFunctionCalls] = useState([]);
-  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx
index 0612833..3e5220e 100644
--- a/frontend/src/components/NumberComponent.tsx
+++ b/frontend/src/components/NumberComponent.tsx
@@ -146,7 +146,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const [cursorPosition, setCursorPosition] = useState(null);
   // Create a state for the input string
   const [inputString, setInputString] = useState(props.value.toString());
-  const fullAccessPath = parentPath.concat('.' + name);
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index 36f91d6..b050595 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -34,7 +34,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     isInstantUpdate,
     addNotification
   } = props;
-  const fullAccessPath = parentPath.concat('.' + name);
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx
index 4a084e8..e8d06c6 100644
--- a/frontend/src/components/StringComponent.tsx
+++ b/frontend/src/components/StringComponent.tsx
@@ -24,7 +24,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
 
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
-  const fullAccessPath = parentPath.concat('.' + name);
+  const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
   const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
diff --git a/frontend/src/utils/stringUtils.ts b/frontend/src/utils/stringUtils.ts
index 892341d..a2c9c6c 100644
--- a/frontend/src/utils/stringUtils.ts
+++ b/frontend/src/utils/stringUtils.ts
@@ -1,12 +1,16 @@
 export function getIdFromFullAccessPath(fullAccessPath: string) {
-  // Replace '].' with a single dash
-  let id = fullAccessPath.replace(/\]\./g, '-');
+  if (fullAccessPath) {
+    // Replace '].' with a single dash
+    let id = fullAccessPath.replace(/\]\./g, '-');
 
-  // Replace any character that is not a word character or underscore with a dash
-  id = id.replace(/[^\w_]+/g, '-');
+    // Replace any character that is not a word character or underscore with a dash
+    id = id.replace(/[^\w_]+/g, '-');
 
-  // Remove any trailing dashes
-  id = id.replace(/-+$/, '');
+    // Remove any trailing dashes
+    id = id.replace(/-+$/, '');
 
-  return id;
+    return id;
+  } else {
+    return 'main';
+  }
 }