fix: component ids adhere to html guidelines now

frontend/src/App.tsx

@@ -258,6 +258,7 @@ const App = () => {
 
       <div className="App navbarOffset">
         <DataServiceComponent
+          name={''}
           props={state as DataServiceJSON}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}

frontend/src/components/AsyncMethodComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { emit_update } from '../socket';
 import { InputGroup, Form, Button } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface AsyncMethodProps {
   name: string;
@@ -17,6 +18,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const { name, parentPath, docString, value: runningTask, addNotification } = props;
   const renderCount = useRef(0);
   const formRef = useRef(null);
+  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
 
   useEffect(() => {
     renderCount.current++;
@@ -87,9 +89,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   });
 
   return (
-    <div
-      className="align-items-center asyncMethodComponent"
-      id={parentPath.concat('.' + name)}>
+    <div className="align-items-center asyncMethodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -99,11 +99,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       </h5>
       <Form onSubmit={execute} ref={formRef}>
         {args}
-        <Button
-          id={`button-${parentPath}.${name}`}
-          name={name}
-          value={parentPath}
-          type="submit">
+        <Button id={`button-${id}`} name={name} value={parentPath} type="submit">
           {runningTask ? 'Stop' : 'Start'}
         </Button>
       </Form>

frontend/src/components/ButtonComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { ToggleButton } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface ButtonComponentProps {
   name: string;
@@ -17,6 +18,7 @@ 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 renderCount = useRef(0);
 
@@ -33,14 +35,14 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   };
 
   return (
-    <div className={'buttonComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'buttonComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
 
       <DocStringComponent docString={docString} />
       <ToggleButton
-        id={`toggle-check-${parentPath}.${name}`}
+        id={`toggle-check-${id}`}
         type="checkbox"
         variant={value ? 'success' : 'secondary'}
         checked={value}

frontend/src/components/ColouredEnumComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { InputGroup, Form, Row, Col } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface ColouredEnumComponentProps {
   name: string;
@@ -24,6 +25,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
     addNotification
   } = props;
   const renderCount = useRef(0);
+  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
 
   useEffect(() => {
     renderCount.current++;
@@ -33,13 +35,12 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
     addNotification(`${parentPath}.${name} changed to ${value}.`);
   }, [props.value]);
 
-  const handleValueChange = (newValue) => {
-    console.log(newValue);
+  const handleValueChange = (newValue: string) => {
     emit_update(name, parentPath, newValue);
   };
 
   return (
-    <div className={'enumComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/DataServiceComponent.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { Card, Collapse } from 'react-bootstrap';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
 import { Attribute, GenericComponent } from './GenericComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 type DataServiceProps = {
+  name: string;
   props: DataServiceJSON;
   parentPath?: string;
   isInstantUpdate: boolean;
@@ -15,21 +17,29 @@ export type DataServiceJSON = Record<string, Attribute>;
 
 export const DataServiceComponent = React.memo(
   ({
+    name,
     props,
     parentPath = 'DataService',
     isInstantUpdate,
     addNotification
   }: DataServiceProps) => {
     const [open, setOpen] = useState(true);
+    let fullAccessPath = parentPath;
+    if (name) {
+      fullAccessPath = parentPath.concat('.' + name);
+    }
+    console.log(fullAccessPath);
+    const id = getIdFromFullAccessPath(fullAccessPath);
+    console.log(id);
 
     return (
-      <div className="dataServiceComponent">
+      <div className="dataServiceComponent" id={id}>
         <Card className="mb-3">
           <Card.Header
             onClick={() => setOpen(!open)}
             style={{ cursor: 'pointer' }} // Change cursor style on hover
           >
-            {parentPath} {open ? <ChevronDown /> : <ChevronRight />}
+            {fullAccessPath} {open ? <ChevronDown /> : <ChevronRight />}
           </Card.Header>
           <Collapse in={open}>
             <Card.Body>
@@ -39,7 +49,7 @@ export const DataServiceComponent = React.memo(
                     key={key}
                     attribute={value}
                     name={key}
-                    parentPath={parentPath}
+                    parentPath={fullAccessPath}
                     isInstantUpdate={isInstantUpdate}
                     addNotification={addNotification}
                   />

frontend/src/components/GenericComponent.tsx

@@ -153,8 +153,9 @@ export const GenericComponent = React.memo(
     } else if (attribute.type === 'DataService') {
       return (
         <DataServiceComponent
+          name={name}
           props={attribute.value as DataServiceJSON}
-          parentPath={parentPath.concat('.', name)}
+          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
         />

frontend/src/components/ImageComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Card, Collapse, Image } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface ImageComponentProps {
   name: string;
@@ -18,6 +19,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
 
   const renderCount = useRef(0);
   const [open, setOpen] = useState(true);
+  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
 
   useEffect(() => {
     renderCount.current++;
@@ -28,7 +30,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
   }, [props.value]);
 
   return (
-    <div className={'imageComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'imageComponent'} id={id}>
       <Card>
         <Card.Header
           onClick={() => setOpen(!open)}

frontend/src/components/ListComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { DocStringComponent } from './DocStringComponent';
 import { Attribute, GenericComponent } from './GenericComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface ListComponentProps {
   name: string;
@@ -16,13 +17,14 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
     props;
 
   const renderCount = useRef(0);
+  const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
 
   useEffect(() => {
     renderCount.current++;
   }, [props]);
 
   return (
-    <div className={'listComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'listComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/MethodComponent.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { emit_update } from '../socket';
 import { Button, InputGroup, Form, Collapse } from 'react-bootstrap';
 import { DocStringComponent } from './DocStringComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface MethodProps {
   name: string;
@@ -19,6 +20,7 @@ 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));
 
   useEffect(() => {
     renderCount.current++;
@@ -69,9 +71,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   });
 
   return (
-    <div
-      className="align-items-center methodComponent"
-      id={parentPath.concat('.' + name)}>
+    <div className="align-items-center methodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/NumberComponent.tsx

@@ -3,6 +3,7 @@ import { Form, InputGroup } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import '../App.css';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 // TODO: add button functionality
 
@@ -131,14 +132,14 @@ 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 id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
 
     // Set the cursor position after the component re-renders
-    const inputElement = document.getElementsByName(
-      parentPath.concat('.' + name)
-    )[0] as HTMLInputElement;
+    const inputElement = document.getElementsByName(id)[0] as HTMLInputElement;
     if (inputElement && cursorPosition !== null) {
       inputElement.setSelectionRange(cursorPosition, cursorPosition);
     }
@@ -275,7 +276,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
 
   return (
-    <div className="numberComponent" id={parentPath.concat('.' + name)}>
+    <div className="numberComponent" id={id}>
       {process.env.NODE_ENV === 'development' && showName && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -287,7 +288,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
             type="text"
             value={inputString}
             disabled={readOnly}
-            name={parentPath.concat('.' + name)}
+            name={fullAccessPath}
             onKeyDown={handleKeyDown}
             onBlur={handleBlur}
             className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}

frontend/src/components/SliderComponent.tsx

@@ -4,6 +4,7 @@ import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import { Slider } from '@mui/material';
 import { NumberComponent } from './NumberComponent';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 interface SliderComponentProps {
   name: string;
@@ -21,11 +22,6 @@ interface SliderComponentProps {
 export const SliderComponent = React.memo((props: SliderComponentProps) => {
   const renderCount = useRef(0);
   const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    renderCount.current++;
-  });
-
   const {
     name,
     parentPath,
@@ -38,6 +34,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     isInstantUpdate,
     addNotification
   } = props;
+  const fullAccessPath = parentPath.concat('.' + name);
+  const id = getIdFromFullAccessPath(fullAccessPath);
+
+  useEffect(() => {
+    renderCount.current++;
+  });
 
   useEffect(() => {
     addNotification(`${parentPath}.${name} changed to ${value}.`);
@@ -102,7 +104,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   };
 
   return (
-    <div className="sliderComponent" id={parentPath.concat('.' + name)}>
+    <div className="sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/StringComponent.tsx

@@ -3,6 +3,7 @@ import { Form, InputGroup } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import '../App.css';
+import { getIdFromFullAccessPath } from '../utils/stringUtils';
 
 // TODO: add button functionality
 
@@ -22,6 +23,8 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
 
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
+  const fullAccessPath = parentPath.concat('.' + name);
+  const id = getIdFromFullAccessPath(fullAccessPath);
 
   useEffect(() => {
     renderCount.current++;
@@ -55,7 +58,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   };
 
   return (
-    <div className={'stringComponent'} id={parentPath.concat('.' + name)}>
+    <div className={'stringComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}