updates frontend components to use new methods from socket.ts

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<string, unknown> = {};
 
     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) => {

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 (

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 (

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 (

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) => {

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

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,
       {

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);
     }
   };