mirror of
https://github.com/tiqi-group/pydase.git
synced 2025-04-21 00:40:01 +02:00
chore: changing parent_path to parentPath
This commit is contained in:
parent
04e0e9e8b2
commit
8205e4d463
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -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' : ''}
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
@ -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 });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user