chore: changing parent_path to parentPath

frontend/src/App.tsx

@@ -15,7 +15,7 @@ type ValueType = boolean | string | number | object;
 type State = DataServiceJSON | null;
 type Action =
   | { type: 'SET_DATA'; data: DataServiceJSON }
-  | { type: 'UPDATE_ATTRIBUTE'; parent_path: string; name: string; value: ValueType };
+  | { type: 'UPDATE_ATTRIBUTE'; parentPath: string; name: string; value: ValueType };
 type UpdateMessage = {
   data: { parent_path: string; name: string; value: object };
 };
@@ -102,7 +102,7 @@ const reducer = (state: State, action: Action): State => {
     case 'SET_DATA':
       return action.data;
     case 'UPDATE_ATTRIBUTE': {
-      const path = action.parent_path.split('.').slice(1).concat(action.name);
+      const path = action.parentPath.split('.').slice(1).concat(action.name);
 
       return updateNestedObject(path, state, action.value);
     }
@@ -130,19 +130,19 @@ const App = () => {
 
   function onNotify(value: UpdateMessage) {
     // Extracting data from the notification
-    const { parent_path, name, value: newValue } = value.data;
+    const { parent_path: parentPath, name, value: newValue } = value.data;
 
     // Dispatching the update to the reducer
     dispatch({
       type: 'UPDATE_ATTRIBUTE',
-      parent_path,
+      parentPath,
       name,
       value: newValue
     });
 
     // Formatting the value if it is of type 'Quantity'
     let notificationMsg: object | string = newValue;
-    const path = parent_path.concat('.', name);
+    const path = parentPath.concat('.', name);
     if (
       getDataServiceJSONValueByPathAndKey(stateRef.current, path, 'type') === 'Quantity'
     ) {
@@ -150,7 +150,7 @@ const App = () => {
     }
 
     // Creating a new notification
-    const newNotification = `${parent_path}.${name} changed to ${notificationMsg}.`;
+    const newNotification = `${parentPath}.${name} changed to ${notificationMsg}.`;
     // Adding the new notification to the list
     notify(newNotification);
   }

frontend/src/components/AsyncMethodComponent.tsx

@@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 
 interface AsyncMethodProps {
   name: string;
-  parent_path: string;
+  parentPath: string;
   parameters: Record<string, string>;
   value: Record<string, string>;
   docString?: string;
@@ -15,7 +15,7 @@ interface AsyncMethodProps {
 export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   const renderCount = useRef(0);
   const formRef = useRef(null);
-  const { name, parent_path, docString, value: runningTask } = props;
+  const { name, parentPath, docString, value: runningTask } = props;
 
   const execute = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -31,7 +31,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       method_name = `start_${name}`;
     }
 
-    emit_update(method_name, parent_path, { args: args });
+    emit_update(method_name, parentPath, { args: args });
   };
 
   useEffect(() => {
@@ -73,7 +73,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
   return (
     <div
       className="align-items-center asyncMethodComponent"
-      id={parent_path.concat('.' + name)}>
+      id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -84,9 +84,9 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
       <Form onSubmit={execute} ref={formRef}>
         {args}
         <Button
-          id={`button-${parent_path}.${name}`}
+          id={`button-${parentPath}.${name}`}
           name={name}
-          value={parent_path}
+          value={parentPath}
           type="submit">
           {runningTask ? 'Stop' : 'Start'}
         </Button>

frontend/src/components/ButtonComponent.tsx

@@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 
 interface ButtonComponentProps {
   name: string;
-  parent_path?: string;
+  parentPath?: string;
   value: boolean;
   readOnly: boolean;
   docString: string;
@@ -18,27 +18,27 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   useEffect(() => {
     renderCount.current++;
   });
-  const { name, parent_path, value, readOnly, docString, mapping } = props;
+  const { name, parentPath, value, readOnly, docString, mapping } = props;
 
   const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
 
   const setChecked = (checked: boolean) => {
-    emit_update(name, parent_path, checked);
+    emit_update(name, parentPath, checked);
   };
 
   return (
-    <div className={'buttonComponent'} id={parent_path.concat('.' + name)}>
+    <div className={'buttonComponent'} id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
 
       <DocStringComponent docString={docString} />
       <ToggleButton
-        id={`toggle-check-${parent_path}.${name}`}
+        id={`toggle-check-${parentPath}.${name}`}
         type="checkbox"
         variant={value ? 'success' : 'secondary'}
         checked={value}
-        value={parent_path}
+        value={parentPath}
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
         <p>{buttonName}</p>

frontend/src/components/EnumComponent.tsx

@@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 
 interface EnumComponentProps {
   name: string;
-  parent_path: string;
+  parentPath: string;
   value: string;
   docString?: string;
   enumDict: Record<string, string>;
@@ -18,14 +18,14 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
     renderCount.current++;
   });
 
-  const { name, parent_path, value, docString, enumDict } = props;
+  const { name, parentPath: parentPath, value, docString, enumDict } = props;
 
   const handleValueChange = (newValue: string) => {
-    emit_update(name, parent_path, newValue);
+    emit_update(name, parentPath, newValue);
   };
 
   return (
-    <div className={'enumComponent'} id={parent_path.concat('.' + name)}>
+    <div className={'enumComponent'} id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/GenericComponent.tsx

@@ -46,7 +46,7 @@ export const GenericComponent = React.memo(
       return (
         <ButtonComponent
           name={name}
-          parent_path={parentPath}
+          parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Boolean(attribute.value)}
@@ -57,7 +57,7 @@ export const GenericComponent = React.memo(
         <NumberComponent
           name={name}
           type={attribute.type}
-          parent_path={parentPath}
+          parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Number(attribute.value)}
@@ -69,7 +69,7 @@ export const GenericComponent = React.memo(
         <NumberComponent
           name={name}
           type="float"
-          parent_path={parentPath}
+          parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={Number(attribute.value['magnitude'])}
@@ -81,7 +81,7 @@ export const GenericComponent = React.memo(
       return (
         <SliderComponent
           name={name}
-          parent_path={parentPath}
+          parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
           value={attribute.value['value']['value']}
@@ -95,7 +95,7 @@ export const GenericComponent = React.memo(
       return (
         <EnumComponent
           name={name}
-          parent_path={parentPath}
+          parentPath={parentPath}
           docString={attribute.doc}
           value={String(attribute.value)}
           enumDict={attribute.enum}
@@ -106,7 +106,7 @@ export const GenericComponent = React.memo(
         return (
           <MethodComponent
             name={name}
-            parent_path={parentPath}
+            parentPath={parentPath}
             docString={attribute.doc}
             parameters={attribute.parameters}
           />
@@ -115,7 +115,7 @@ export const GenericComponent = React.memo(
         return (
           <AsyncMethodComponent
             name={name}
-            parent_path={parentPath}
+            parentPath={parentPath}
             docString={attribute.doc}
             parameters={attribute.parameters}
             value={attribute.value as Record<string, string>}
@@ -129,7 +129,7 @@ export const GenericComponent = React.memo(
           value={attribute.value as string}
           readOnly={attribute.readonly}
           docString={attribute.doc}
-          parent_path={parentPath}
+          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
         />
       );
@@ -147,7 +147,7 @@ export const GenericComponent = React.memo(
           name={name}
           value={attribute.value as Attribute[]}
           docString={attribute.doc}
-          parent_path={parentPath}
+          parentPath={parentPath}
           isInstantUpdate={isInstantUpdate}
         />
       );

frontend/src/components/ListComponent.tsx

@@ -4,7 +4,7 @@ import { Attribute, GenericComponent } from './GenericComponent';
 
 interface ListComponentProps {
   name: string;
-  parent_path?: string;
+  parentPath?: string;
   value: Attribute[];
   docString: string;
   isInstantUpdate: boolean;
@@ -17,10 +17,10 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
     renderCount.current++;
   });
 
-  const { name, parent_path, value, docString, isInstantUpdate } = props;
+  const { name, parentPath, value, docString, isInstantUpdate } = props;
 
   return (
-    <div className={'listComponent'} id={parent_path.concat(name)}>
+    <div className={'listComponent'} id={parentPath.concat(name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -31,7 +31,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
             key={`${name}[${index}]`}
             attribute={item}
             name={`${name}[${index}]`}
-            parentPath={parent_path}
+            parentPath={parentPath}
             isInstantUpdate={isInstantUpdate}
           />
         );

frontend/src/components/MethodComponent.tsx

@@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
 
 interface MethodProps {
   name: string;
-  parent_path: string;
+  parentPath: string;
   parameters: Record<string, string>;
   docString?: string;
   hideOutput?: boolean;
@@ -18,7 +18,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   // Add a new state variable to hold the list of function calls
   const [functionCalls, setFunctionCalls] = useState([]);
 
-  const { name, parent_path, docString } = props;
+  const { name, parentPath, docString } = props;
 
   const execute = async (event: React.FormEvent) => {
     event.preventDefault();
@@ -27,7 +27,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
     Object.keys(props.parameters).forEach(
       (name) => (args[name] = event.target[name].value)
     );
-    emit_update(name, parent_path, { args: args }, (ack) => {
+    emit_update(name, parentPath, { args: args }, (ack) => {
       // Update the functionCalls state with the new call if we get an acknowledge msg
       if (ack !== undefined) {
         setFunctionCalls((prevCalls) => [...prevCalls, { name, args, result: ack }]);
@@ -55,7 +55,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   return (
     <div
       className="align-items-center methodComponent"
-      id={parent_path.concat('.' + name)}>
+      id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/NumberComponent.tsx

@@ -9,7 +9,7 @@ import '../App.css';
 interface NumberComponentProps {
   name: string;
   type: 'float' | 'int';
-  parent_path?: string;
+  parentPath?: string;
   value: number;
   readOnly: boolean;
   docString: string;
@@ -108,7 +108,7 @@ const handleDeleteKey = (
 };
 
 export const NumberComponent = React.memo((props: NumberComponentProps) => {
-  const { name, parent_path, readOnly, docString, isInstantUpdate, unit } = props;
+  const { name, parentPath, readOnly, docString, isInstantUpdate, unit } = props;
 
   // Whether to show the name infront of the component (false if used with a slider)
   const showName = props.showName !== undefined ? props.showName : true;
@@ -128,7 +128,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
     // Set the cursor position after the component re-renders
     const inputElement = document.getElementsByName(
-      parent_path.concat(name)
+      parentPath.concat(name)
     )[0] as HTMLInputElement;
     if (inputElement && cursorPosition !== null) {
       inputElement.setSelectionRange(cursorPosition, cursorPosition);
@@ -214,7 +214,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
         selectionEnd
       ));
     } else if (key === 'Enter' && !isInstantUpdate) {
-      emitUpdate(name, parent_path, Number(newValue));
+      emitUpdate(name, parentPath, Number(newValue));
       return;
     } else {
       console.debug(key);
@@ -223,7 +223,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
     // Update the input value and maintain the cursor position
     if (isInstantUpdate) {
-      emitUpdate(name, parent_path, Number(newValue));
+      emitUpdate(name, parentPath, Number(newValue));
     }
 
     setInputString(newValue);
@@ -235,12 +235,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   const handleBlur = () => {
     if (!isInstantUpdate) {
       // If not in "instant update" mode, emit an update when the input field loses focus
-      emitUpdate(name, parent_path, Number(inputString));
+      emitUpdate(name, parentPath, Number(inputString));
     }
   };
 
   return (
-    <div className="numberComponent" id={parent_path.concat('.' + name)}>
+    <div className="numberComponent" id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && showName && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -252,7 +252,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
             type="text"
             value={inputString}
             disabled={readOnly}
-            name={parent_path.concat(name)}
+            name={parentPath.concat(name)}
             onKeyDown={handleKeyDown}
             onBlur={handleBlur}
             className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}

frontend/src/components/SliderComponent.tsx

@@ -9,7 +9,7 @@ interface SliderComponentProps {
   name: string;
   min: number;
   max: number;
-  parent_path?: string;
+  parentPath?: string;
   value: number;
   readOnly: boolean;
   docString: string;
@@ -27,7 +27,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
 
   const {
     name,
-    parent_path,
+    parentPath,
     value,
     min,
     max,
@@ -39,7 +39,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
 
   const emitSliderUpdate = (
     name: string,
-    parent_path: string,
+    parentPath: string,
     value: number,
     callback?: (ack: unknown) => void,
     min: number = props.min,
@@ -48,7 +48,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   ) => {
     emit_update(
       name,
-      parent_path,
+      parentPath,
       {
         value: value,
         min: min,
@@ -64,19 +64,19 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     if (Array.isArray(newNumber)) {
       newNumber = newNumber[0];
     }
-    emitSliderUpdate(name, parent_path, newNumber);
+    emitSliderUpdate(name, parentPath, newNumber);
   };
 
   const handleValueChange = (newValue: number, valueType: string) => {
     switch (valueType) {
       case 'min':
-        emitSliderUpdate(name, parent_path, value, undefined, newValue);
+        emitSliderUpdate(name, parentPath, value, undefined, newValue);
         break;
       case 'max':
-        emitSliderUpdate(name, parent_path, value, undefined, min, newValue);
+        emitSliderUpdate(name, parentPath, value, undefined, min, newValue);
         break;
       case 'stepSize':
-        emitSliderUpdate(name, parent_path, value, undefined, min, max, newValue);
+        emitSliderUpdate(name, parentPath, value, undefined, min, max, newValue);
         break;
       default:
         break;
@@ -84,7 +84,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   };
 
   return (
-    <div className="sliderComponent" id={parent_path.concat('.' + name)}>
+    <div className="sliderComponent" id={parentPath.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -114,7 +114,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
         <Col xs="3" xl>
           <NumberComponent
             isInstantUpdate={isInstantUpdate}
-            parent_path={parent_path}
+            parentPath={parentPath}
             name={name}
             docString=""
             readOnly={readOnly}

frontend/src/components/StringComponent.tsx

@@ -8,7 +8,7 @@ import '../App.css';
 
 interface StringComponentProps {
   name: string;
-  parent_path?: string;
+  parentPath?: string;
   value: string;
   readOnly: boolean;
   docString: string;
@@ -19,7 +19,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   const renderCount = useRef(0);
   const [inputString, setInputString] = useState(props.value);
 
-  const { name, parent_path, readOnly, docString, isInstantUpdate } = props;
+  const { name, parentPath, readOnly, docString, isInstantUpdate } = props;
   useEffect(() => {
     renderCount.current++;
   }, [isInstantUpdate, inputString, renderCount]);
@@ -34,24 +34,24 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   const handleChange = (event) => {
     setInputString(event.target.value);
     if (isInstantUpdate) {
-      emit_update(name, parent_path, event.target.value);
+      emit_update(name, parentPath, event.target.value);
     }
   };
 
   const handleKeyDown = (event) => {
     if (event.key === 'Enter' && !isInstantUpdate) {
-      emit_update(name, parent_path, inputString);
+      emit_update(name, parentPath, inputString);
     }
   };
 
   const handleBlur = () => {
     if (!isInstantUpdate) {
-      emit_update(name, parent_path, inputString);
+      emit_update(name, parentPath, inputString);
     }
   };
 
   return (
-    <div className={'stringComponent'} id={parent_path.concat(name)}>
+    <div className={'stringComponent'} id={parentPath.concat(name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/socket.ts

@@ -11,13 +11,13 @@ export const socket = io(URL, { path: '/ws/socket.io', transports: ['websocket']
 
 export const emit_update = (
   name: string,
-  parent_path: string,
+  parentPath: string,
   value: unknown,
   callback?: (ack: unknown) => void
 ) => {
   if (callback) {
-    socket.emit('frontend_update', { name, parent_path, value }, callback);
+    socket.emit('frontend_update', { name, parent_path: parentPath, value }, callback);
   } else {
-    socket.emit('frontend_update', { name, parent_path, value });
+    socket.emit('frontend_update', { name, parent_path: parentPath, value });
   }
 };