updates frontend components to not have DataService in the fullAccessPath

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);
 

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++;

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);
 

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>
       )}

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++;

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++;

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++;

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(() => {

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(() => {

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(() => {

frontend/src/utils/stringUtils.ts

@@ -1,4 +1,5 @@
 export function getIdFromFullAccessPath(fullAccessPath: string) {
+  if (fullAccessPath) {
     // Replace '].' with a single dash
     let id = fullAccessPath.replace(/\]\./g, '-');
 
@@ -9,4 +10,7 @@ export function getIdFromFullAccessPath(fullAccessPath: string) {
     id = id.replace(/-+$/, '');
 
     return id;
+  } else {
+    return 'main';
+  }
 }