From 8205e4d463c2d8bbd70914e3855e297d4cf65857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Thu, 10 Aug 2023 14:18:37 +0200 Subject: [PATCH] chore: changing parent_path to parentPath --- frontend/src/App.tsx | 12 +++++------ .../src/components/AsyncMethodComponent.tsx | 12 +++++------ frontend/src/components/ButtonComponent.tsx | 12 +++++------ frontend/src/components/EnumComponent.tsx | 8 ++++---- frontend/src/components/GenericComponent.tsx | 18 ++++++++--------- frontend/src/components/ListComponent.tsx | 8 ++++---- frontend/src/components/MethodComponent.tsx | 8 ++++---- frontend/src/components/NumberComponent.tsx | 16 +++++++-------- frontend/src/components/SliderComponent.tsx | 20 +++++++++---------- frontend/src/components/StringComponent.tsx | 12 +++++------ frontend/src/socket.ts | 6 +++--- 11 files changed, 66 insertions(+), 66 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fc2b1f7..6a8b8ad 100644 --- a/frontend/src/App.tsx +++ b/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); } diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 22d9339..1233bb0 100644 --- a/frontend/src/components/AsyncMethodComponent.tsx +++ b/frontend/src/components/AsyncMethodComponent.tsx @@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent'; interface AsyncMethodProps { name: string; - parent_path: string; + parentPath: string; parameters: Record; value: Record; 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 (
+ id={parentPath.concat('.' + name)}> {process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} @@ -84,9 +84,9 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
{args} diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx index 465bec1..560f3d2 100644 --- a/frontend/src/components/ButtonComponent.tsx +++ b/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 ( -
+
{process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} setChecked(e.currentTarget.checked)}>

{buttonName}

diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx index 39fb956..d74482f 100644 --- a/frontend/src/components/EnumComponent.tsx +++ b/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; @@ -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 ( -
+
{process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx index be09e98..badabfa 100644 --- a/frontend/src/components/GenericComponent.tsx +++ b/frontend/src/components/GenericComponent.tsx @@ -46,7 +46,7 @@ export const GenericComponent = React.memo( return ( @@ -115,7 +115,7 @@ export const GenericComponent = React.memo( return ( } @@ -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} /> ); diff --git a/frontend/src/components/ListComponent.tsx b/frontend/src/components/ListComponent.tsx index 7d7028f..1f0570f 100644 --- a/frontend/src/components/ListComponent.tsx +++ b/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 ( -
+
{process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} @@ -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} /> ); diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx index 824f17f..65a37d0 100644 --- a/frontend/src/components/MethodComponent.tsx +++ b/frontend/src/components/MethodComponent.tsx @@ -5,7 +5,7 @@ import { DocStringComponent } from './DocStringComponent'; interface MethodProps { name: string; - parent_path: string; + parentPath: string; parameters: Record; 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 (
+ id={parentPath.concat('.' + name)}> {process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx index 89bf81b..42243dd 100644 --- a/frontend/src/components/NumberComponent.tsx +++ b/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 ( -
+
{process.env.NODE_ENV === 'development' && showName && (

Render count: {renderCount.current}

)} @@ -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' : ''} diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx index cfb4be3..a4cdd96 100644 --- a/frontend/src/components/SliderComponent.tsx +++ b/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 ( -
+
{process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} @@ -114,7 +114,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => { { 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 ( -
+
{process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} diff --git a/frontend/src/socket.ts b/frontend/src/socket.ts index b6b10f9..22f1486 100644 --- a/frontend/src/socket.ts +++ b/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 }); } };