diff --git a/frontend/src/components/AsyncMethodComponent.tsx b/frontend/src/components/AsyncMethodComponent.tsx index 4ca61c7..472b6b0 100644 --- a/frontend/src/components/AsyncMethodComponent.tsx +++ b/frontend/src/components/AsyncMethodComponent.tsx @@ -1,19 +1,19 @@ import React, { useEffect, useRef } from 'react'; import { runMethod } from '../socket'; -import { InputGroup, Form, Button } from 'react-bootstrap'; +import { Form, Button, InputGroup } from 'react-bootstrap'; import { DocStringComponent } from './DocStringComponent'; import { LevelName } from './NotificationsComponent'; type AsyncMethodProps = { name: string; parentPath: string; - parameters: Record; value: Record; docString?: string; hideOutput?: boolean; addNotification: (message: string, levelname?: LevelName) => void; displayName: string; id: string; + render: boolean; }; export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { @@ -26,6 +26,12 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { displayName, id } = props; + + // Conditional rendering based on the 'render' prop. + if (!props.render) { + return null; + } + const renderCount = useRef(0); const formRef = useRef(null); const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); @@ -66,50 +72,31 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => { const execute = async (event: React.FormEvent) => { event.preventDefault(); let method_name: string; - const kwargs: Record = {}; if (runningTask !== undefined && runningTask !== null) { method_name = `stop_${name}`; } else { - Object.keys(props.parameters).forEach( - (name) => (kwargs[name] = event.target[name].value) - ); method_name = `start_${name}`; } - runMethod(method_name, parentPath, kwargs); + runMethod(method_name, parentPath, {}); }; - const args = Object.entries(props.parameters).map(([name, type], index) => { - const form_name = `${name} (${type})`; - const value = runningTask && runningTask[name]; - const isRunning = value !== undefined && value !== null; - - return ( - - {form_name} - - - ); - }); - return (
{process.env.NODE_ENV === 'development' && (
Render count: {renderCount.current}
)} -
Function: {displayName}
- {args} - + + + {displayName} + + + +
); diff --git a/frontend/src/components/MethodComponent.tsx b/frontend/src/components/MethodComponent.tsx index c9702a5..a8051f1 100644 --- a/frontend/src/components/MethodComponent.tsx +++ b/frontend/src/components/MethodComponent.tsx @@ -1,144 +1,46 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useRef } from 'react'; import { runMethod } from '../socket'; -import { Button, Form, Card } from 'react-bootstrap'; +import { Button, Form } from 'react-bootstrap'; import { DocStringComponent } from './DocStringComponent'; import { LevelName } from './NotificationsComponent'; -import { SerializedValue } from './GenericComponent'; -import { FloatObject, NumberComponent, QuantityObject } from './NumberComponent'; -import { StringComponent } from './StringComponent'; -import { ColouredEnumComponent } from './ColouredEnumComponent'; -import { EnumComponent } from './EnumComponent'; type MethodProps = { name: string; parentPath: string; - parameters: Record; docString?: string; - hideOutput?: boolean; addNotification: (message: string, levelname?: LevelName) => void; displayName: string; id: string; + render: boolean; }; export const MethodComponent = React.memo((props: MethodProps) => { const { name, parentPath, docString, addNotification, displayName, id } = props; + // Conditional rendering based on the 'render' prop. + if (!props.render) { + return null; + } + const renderCount = useRef(0); - // Add a new state variable to hold the list of function calls - const [functionCalls, setFunctionCalls] = useState([]); + const formRef = useRef(null); const fullAccessPath = [parentPath, name].filter((element) => element).join('.'); - const triggerNotification = (args: Record) => { - const argsString = Object.entries(args) - .map(([key, value]) => `${key}: "${value}"`) - .join(', '); - let message = `Method ${fullAccessPath} was triggered`; + const triggerNotification = () => { + const message = `Method ${fullAccessPath} was triggered.`; - if (argsString === '') { - message += '.'; - } else { - message += ` with arguments {${argsString}}.`; - } addNotification(message); }; const execute = async (event: React.FormEvent) => { event.preventDefault(); - const kwargs = {}; - Object.keys(props.parameters).forEach((name) => { - kwargs[name] = event.target[name].value; - }); - 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: kwargs, result: ack } - ]); - } - }); + runMethod(name, parentPath, {}); - triggerNotification(kwargs); + triggerNotification(); }; - const args = Object.entries(props.parameters).map(([name, serializedValue]) => { - if (serializedValue.type == 'float' || serializedValue.type == 'int') { - return ( - {}} - id={id + '.' + name} - /> - ); - } else if (serializedValue.type == 'Quantity') { - return ( - {}} - id={id + '.' + name} - /> - ); - } else if (serializedValue.type == 'str') { - return ( - {}} - id={id + '.' + name} - /> - ); - } else if (serializedValue.type == 'Enum') { - return ( - {}} - enumDict={serializedValue.enum} - displayName={name} - id={id + '.' + name} - /> - ); - } else if (serializedValue.type == 'ColouredEnum') { - return ( - {}} - enumDict={serializedValue.enum} - displayName={name} - id={id + '.' + name} - /> - ); - } - }); - - // Content conditionally rendered based on args const formContent = ( -
- {args} +