From d18be5428436afce7182df85e7f34fc7523e78f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mose=20M=C3=BCller?= Date: Thu, 9 Nov 2023 13:52:23 +0100 Subject: [PATCH] updates frontend components to use new methods from socket.ts --- frontend/src/components/AsyncMethodComponent.tsx | 8 ++++---- frontend/src/components/ButtonComponent.tsx | 4 ++-- frontend/src/components/ColouredEnumComponent.tsx | 4 ++-- frontend/src/components/EnumComponent.tsx | 4 ++-- frontend/src/components/MethodComponent.tsx | 15 +++++++++------ frontend/src/components/NumberComponent.tsx | 4 ++-- frontend/src/components/SliderComponent.tsx | 4 ++-- frontend/src/components/StringComponent.tsx | 8 ++++---- 8 files changed, 27 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 7189bdc..7a50a0e 100644 --- a/frontend/src/components/AsyncMethodComponent.tsx +++ b/frontend/src/components/AsyncMethodComponent.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from 'react'; -import { emit_update } from '../socket'; +import { runMethod } from '../socket'; import { InputGroup, Form, Button } from 'react-bootstrap'; import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -56,18 +56,18 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { const execute = async (event: React.FormEvent) => { event.preventDefault(); let method_name: string; - const args = {}; + const kwargs: Record = {}; if (runningTask !== undefined && runningTask !== null) { method_name = `stop_${name}`; } else { Object.keys(props.parameters).forEach( - (name) => (args[name] = event.target[name].value) + (name) => (kwargs[name] = event.target[name].value) ); method_name = `start_${name}`; } - emit_update(method_name, parentPath, { args: args }); + runMethod(method_name, parentPath, kwargs); }; const args = Object.entries(props.parameters).map(([name, type], index) => { diff --git a/frontend/src/components/ButtonComponent.tsx b/frontend/src/components/ButtonComponent.tsx index e6aae9e..4200915 100644 --- a/frontend/src/components/ButtonComponent.tsx +++ b/frontend/src/components/ButtonComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import { ToggleButton } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -31,7 +31,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => { }, [props.value]); const setChecked = (checked: boolean) => { - emit_update(name, parentPath, checked); + setAttribute(name, parentPath, checked); }; return ( diff --git a/frontend/src/components/ColouredEnumComponent.tsx b/frontend/src/components/ColouredEnumComponent.tsx index 8d6f414..0e2c15e 100644 --- a/frontend/src/components/ColouredEnumComponent.tsx +++ b/frontend/src/components/ColouredEnumComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import { InputGroup, Form, Row, Col } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -36,7 +36,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro }, [props.value]); const handleValueChange = (newValue: string) => { - emit_update(name, parentPath, newValue); + setAttribute(name, parentPath, newValue); }; return ( diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx index a173163..4899fbd 100644 --- a/frontend/src/components/EnumComponent.tsx +++ b/frontend/src/components/EnumComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import { InputGroup, Form, Row, Col } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; interface EnumComponentProps { @@ -33,7 +33,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => { }, [props.value]); const handleValueChange = (newValue: string) => { - emit_update(name, parentPath, newValue); + setAttribute(name, parentPath, newValue); }; return ( diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx index 29678ed..5d4c429 100644 --- a/frontend/src/components/MethodComponent.tsx +++ b/frontend/src/components/MethodComponent.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useRef } from 'react'; -import { emit_update } from '../socket'; +import { runMethod } from '../socket'; import { Button, InputGroup, Form, Collapse } from 'react-bootstrap'; import { DocStringComponent } from './DocStringComponent'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -46,18 +46,21 @@ export const MethodComponent = React.memo((props: MethodProps) => { const execute = async (event: React.FormEvent) => { event.preventDefault(); - const args = {}; + const kwargs = {}; Object.keys(props.parameters).forEach( - (name) => (args[name] = event.target[name].value) + (name) => (kwargs[name] = event.target[name].value) ); - emit_update(name, parentPath, { args: args }, (ack) => { + runMethod(name, parentPath, kwargs, (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 }]); + setFunctionCalls((prevCalls) => [ + ...prevCalls, + { name, args: kwargs, result: ack } + ]); } }); - triggerNotification(args); + triggerNotification(kwargs); }; const args = Object.entries(props.parameters).map(([name, type], index) => { diff --git a/frontend/src/components/NumberComponent.tsx b/frontend/src/components/NumberComponent.tsx index 9a91127..117cf40 100644 --- a/frontend/src/components/NumberComponent.tsx +++ b/frontend/src/components/NumberComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Form, InputGroup } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; import '../App.css'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -125,7 +125,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => { // If emitUpdate is passed, use this instead of the emit_update from the socket // Also used when used with a slider const emitUpdate = - props.customEmitUpdate !== undefined ? props.customEmitUpdate : emit_update; + props.customEmitUpdate !== undefined ? props.customEmitUpdate : setAttribute; const renderCount = useRef(0); // Create a state for the cursor position diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx index 73dc8c2..491f435 100644 --- a/frontend/src/components/SliderComponent.tsx +++ b/frontend/src/components/SliderComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; import { Slider } from '@mui/material'; import { NumberComponent } from './NumberComponent'; @@ -66,7 +66,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => { max: number = props.max, stepSize: number = props.stepSize ) => { - emit_update( + setAttribute( name, parentPath, { diff --git a/frontend/src/components/StringComponent.tsx b/frontend/src/components/StringComponent.tsx index 11db630..f4423f6 100644 --- a/frontend/src/components/StringComponent.tsx +++ b/frontend/src/components/StringComponent.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { Form, InputGroup } from 'react-bootstrap'; -import { emit_update } from '../socket'; +import { setAttribute } from '../socket'; import { DocStringComponent } from './DocStringComponent'; import '../App.css'; import { getIdFromFullAccessPath } from '../utils/stringUtils'; @@ -41,19 +41,19 @@ export const StringComponent = React.memo((props: StringComponentProps) => { const handleChange = (event) => { setInputString(event.target.value); if (isInstantUpdate) { - emit_update(name, parentPath, event.target.value); + setAttribute(name, parentPath, event.target.value); } }; const handleKeyDown = (event) => { if (event.key === 'Enter' && !isInstantUpdate) { - emit_update(name, parentPath, inputString); + setAttribute(name, parentPath, inputString); } }; const handleBlur = () => { if (!isInstantUpdate) { - emit_update(name, parentPath, inputString); + setAttribute(name, parentPath, inputString); } };