chore: changing parent_path to parentPath

This commit is contained in:
Mose Müller 2023-08-10 14:18:37 +02:00
parent 04e0e9e8b2
commit 8205e4d463
11 changed files with 66 additions and 66 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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