passing fullAccessPath instead of parentPath and name

This commit is contained in:
Mose Müller 2024-03-27 10:01:04 +01:00
parent 1a01222cb3
commit ff3a509132
12 changed files with 42 additions and 118 deletions

View File

@ -188,8 +188,6 @@ const App = () => {
<div className="App navbarOffset">
<WebSettingsContext.Provider value={webSettings}>
<GenericComponent
name=""
parentPath=""
attribute={state as SerializedValue}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}

View File

@ -5,8 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent';
type AsyncMethodProps = {
name: string;
parentPath: string;
fullAccessPath: string;
value: 'RUNNING' | null;
docString?: string;
hideOutput?: boolean;
@ -18,8 +17,7 @@ type AsyncMethodProps = {
export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const {
name,
parentPath,
fullAccessPath,
docString,
value: runningTask,
addNotification,
@ -34,7 +32,8 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const renderCount = useRef(0);
const formRef = useRef(null);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const name = fullAccessPath.split('.').at(-1);
const parentPath = fullAccessPath.slice(0, -(name.length + 1));
useEffect(() => {
renderCount.current++;

View File

@ -4,8 +4,7 @@ import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent';
type ButtonComponentProps = {
name: string;
parentPath?: string;
fullAccessPath: string;
value: boolean;
readOnly: boolean;
docString: string;
@ -24,6 +23,7 @@ type ButtonComponentProps = {
export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
const {
value,
fullAccessPath,
readOnly,
docString,
addNotification,
@ -32,9 +32,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
id
} = props;
// const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
const renderCount = useRef(0);

View File

@ -6,9 +6,7 @@ import { SerializedValue, GenericComponent } from './GenericComponent';
import { LevelName } from './NotificationsComponent';
type DataServiceProps = {
name: string;
props: DataServiceJSON;
parentPath?: string;
isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
@ -18,17 +16,8 @@ type DataServiceProps = {
export type DataServiceJSON = Record<string, SerializedValue>;
export const DataServiceComponent = React.memo(
({
name,
props,
parentPath = undefined,
isInstantUpdate,
addNotification,
displayName,
id
}: DataServiceProps) => {
({ props, isInstantUpdate, addNotification, displayName, id }: DataServiceProps) => {
const [open, setOpen] = useState(true);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
if (displayName !== '') {
return (
@ -43,8 +32,6 @@ export const DataServiceComponent = React.memo(
<GenericComponent
key={key}
attribute={value}
name={key}
parentPath={fullAccessPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
/>
@ -61,8 +48,6 @@ export const DataServiceComponent = React.memo(
<GenericComponent
key={key}
attribute={value}
name={key}
parentPath={fullAccessPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
/>

View File

@ -4,9 +4,8 @@ import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
import { MethodComponent } from './MethodComponent';
type DeviceConnectionProps = {
name: string;
fullAccessPath: string;
props: DataServiceJSON;
parentPath: string;
isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
@ -15,9 +14,8 @@ type DeviceConnectionProps = {
export const DeviceConnectionComponent = React.memo(
({
name,
fullAccessPath,
props,
parentPath,
isInstantUpdate,
addNotification,
displayName,
@ -26,8 +24,6 @@ export const DeviceConnectionComponent = React.memo(
const { connected, connect, ...updatedProps } = props;
const connectedVal = connected.value;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
return (
<div className="deviceConnectionComponent" id={id}>
{!connectedVal && (
@ -36,8 +32,7 @@ export const DeviceConnectionComponent = React.memo(
{displayName != '' ? displayName : 'Device'} is currently not available!
</div>
<MethodComponent
name="connect"
parentPath={fullAccessPath}
fullAccessPath={`${fullAccessPath}.connect`}
docString={connect.doc}
addNotification={addNotification}
displayName={'reconnect'}
@ -47,9 +42,7 @@ export const DeviceConnectionComponent = React.memo(
</div>
)}
<DataServiceComponent
name={name}
props={updatedProps}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}

View File

@ -45,24 +45,16 @@ export type SerializedValue = {
};
type GenericComponentProps = {
attribute: SerializedValue;
name: string;
parentPath: string;
isInstantUpdate: boolean;
addNotification: (message: string, levelname?: LevelName) => void;
};
export const GenericComponent = React.memo(
({
attribute,
name,
parentPath,
isInstantUpdate,
addNotification
}: GenericComponentProps) => {
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
({ attribute, isInstantUpdate, addNotification }: GenericComponentProps) => {
const { full_access_path: fullAccessPath } = attribute;
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
let displayName = fullAccessPath.split('.').at(-1);
if (webSettings[fullAccessPath]) {
if (webSettings[fullAccessPath].display === false) {
@ -83,8 +75,7 @@ export const GenericComponent = React.memo(
if (attribute.type === 'bool') {
return (
<ButtonComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
readOnly={attribute.readonly}
value={Boolean(attribute.value)}
@ -97,9 +88,8 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'float' || attribute.type === 'int') {
return (
<NumberComponent
name={name}
type={attribute.type}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
readOnly={attribute.readonly}
value={Number(attribute.value)}
@ -113,9 +103,8 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'Quantity') {
return (
<NumberComponent
name={name}
type="float"
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
readOnly={attribute.readonly}
value={Number(attribute.value['magnitude'])}
@ -130,8 +119,7 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'NumberSlider') {
return (
<SliderComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.value['value'].doc}
readOnly={attribute.readonly}
value={attribute.value['value']}
@ -148,8 +136,7 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'Enum') {
return (
<EnumComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
value={String(attribute.value)}
readOnly={attribute.readonly}
@ -164,8 +151,7 @@ export const GenericComponent = React.memo(
if (!attribute.async) {
return (
<MethodComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
addNotification={addNotification}
displayName={displayName}
@ -176,10 +162,9 @@ export const GenericComponent = React.memo(
} else {
return (
<AsyncMethodComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.doc}
value={attribute.value as Record<string, string>}
value={attribute.value as 'RUNNING' | null}
addNotification={addNotification}
displayName={displayName}
id={id}
@ -190,11 +175,10 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'str') {
return (
<StringComponent
name={name}
fullAccessPath={fullAccessPath}
value={attribute.value as string}
readOnly={attribute.readonly}
docString={attribute.doc}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
changeCallback={changeCallback}
@ -205,9 +189,7 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'DataService') {
return (
<DataServiceComponent
name={name}
props={attribute.value as DataServiceJSON}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
@ -217,9 +199,8 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'DeviceConnection') {
return (
<DeviceConnectionComponent
name={name}
fullAccessPath={fullAccessPath}
props={attribute.value as DataServiceJSON}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
displayName={displayName}
@ -229,10 +210,8 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'list') {
return (
<ListComponent
name={name}
value={attribute.value as SerializedValue[]}
docString={attribute.doc}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
id={id}
@ -241,8 +220,7 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'Image') {
return (
<ImageComponent
name={name}
parentPath={parentPath}
fullAccessPath={fullAccessPath}
docString={attribute.value['value'].doc}
displayName={displayName}
id={id}
@ -255,20 +233,15 @@ export const GenericComponent = React.memo(
} else if (attribute.type === 'ColouredEnum') {
return (
<ColouredEnumComponent
name={name}
parentPath={parentPath}
docString={attribute.doc}
value={String(attribute.value)}
readOnly={attribute.readonly}
enumDict={attribute.enum}
attribute={attribute}
addNotification={addNotification}
changeCallback={changeCallback}
displayName={displayName}
id={id}
changeCallback={changeCallback}
/>
);
} else {
return <div key={name}>{name}</div>;
return <div key={fullAccessPath}>{fullAccessPath}</div>;
}
}
);

View File

@ -5,8 +5,7 @@ import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { LevelName } from './NotificationsComponent';
type ImageComponentProps = {
name: string;
parentPath: string;
fullAccessPath: string;
value: string;
docString: string;
format: string;
@ -16,13 +15,11 @@ type ImageComponentProps = {
};
export const ImageComponent = React.memo((props: ImageComponentProps) => {
const { value, docString, format, addNotification, displayName, id } = props;
const { fullAccessPath, value, docString, format, addNotification, displayName, id } =
props;
const renderCount = useRef(0);
const [open, setOpen] = useState(true);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => {
renderCount.current++;

View File

@ -4,8 +4,6 @@ import { SerializedValue, GenericComponent } from './GenericComponent';
import { LevelName } from './NotificationsComponent';
type ListComponentProps = {
name: string;
parentPath?: string;
value: SerializedValue[];
docString: string;
isInstantUpdate: boolean;
@ -14,8 +12,7 @@ type ListComponentProps = {
};
export const ListComponent = React.memo((props: ListComponentProps) => {
const { name, parentPath, value, docString, isInstantUpdate, addNotification, id } =
props;
const { value, docString, isInstantUpdate, addNotification, id } = props;
const renderCount = useRef(0);
@ -34,8 +31,6 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
<GenericComponent
key={`${name}[${index}]`}
attribute={item}
name={`${name}[${index}]`}
parentPath={parentPath}
isInstantUpdate={isInstantUpdate}
addNotification={addNotification}
/>

View File

@ -5,8 +5,7 @@ import { DocStringComponent } from './DocStringComponent';
import { LevelName } from './NotificationsComponent';
type MethodProps = {
name: string;
parentPath: string;
fullAccessPath: string;
docString?: string;
addNotification: (message: string, levelname?: LevelName) => void;
displayName: string;
@ -15,7 +14,7 @@ type MethodProps = {
};
export const MethodComponent = React.memo((props: MethodProps) => {
const { name, parentPath, docString, addNotification, displayName, id } = props;
const { fullAccessPath, docString, addNotification, displayName, id } = props;
// Conditional rendering based on the 'render' prop.
if (!props.render) {
@ -24,7 +23,6 @@ export const MethodComponent = React.memo((props: MethodProps) => {
const renderCount = useRef(0);
const formRef = useRef(null);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const triggerNotification = () => {
const message = `Method ${fullAccessPath} was triggered.`;

View File

@ -30,9 +30,8 @@ export type FloatObject = {
export type NumberObject = IntObject | FloatObject | QuantityObject;
type NumberComponentProps = {
name: string;
type: 'float' | 'int';
parentPath?: string;
fullAccessPath: string;
value: number;
readOnly: boolean;
docString: string;
@ -161,7 +160,7 @@ const handleNumericKey = (
export const NumberComponent = React.memo((props: NumberComponentProps) => {
const {
name,
fullAccessPath,
value,
readOnly,
type,
@ -179,9 +178,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
// Create a state for the input string
const [inputString, setInputString] = useState(value.toString());
const renderCount = useRef(0);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
const name = fullAccessPath.split('.').at(-1);
const handleKeyDown = (event) => {
const { key, target } = event;

View File

@ -6,10 +6,9 @@ import { NumberComponent, NumberObject } from './NumberComponent';
import { LevelName } from './NotificationsComponent';
type SliderComponentProps = {
name: string;
fullAccessPath: string;
min: NumberObject;
max: NumberObject;
parentPath?: string;
value: NumberObject;
readOnly: boolean;
docString: string;
@ -30,8 +29,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
const renderCount = useRef(0);
const [open, setOpen] = useState(false);
const {
name,
parentPath,
fullAccessPath,
value,
min,
max,
@ -43,7 +41,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
displayName,
id
} = props;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
useEffect(() => {
renderCount.current++;
@ -133,8 +130,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
<Col xs="3" xl>
<NumberComponent
isInstantUpdate={isInstantUpdate}
parentPath={parentPath}
name={`${name}.value`}
fullAccessPath={`${fullAccessPath}.value`}
docString=""
readOnly={valueReadOnly}
type="float"

View File

@ -7,8 +7,7 @@ import { LevelName } from './NotificationsComponent';
// TODO: add button functionality
type StringComponentProps = {
name: string;
parentPath?: string;
fullAccessPath: string;
value: string;
readOnly: boolean;
docString: string;
@ -26,7 +25,7 @@ type StringComponentProps = {
export const StringComponent = React.memo((props: StringComponentProps) => {
const {
name,
fullAccessPath,
readOnly,
docString,
isInstantUpdate,
@ -38,9 +37,6 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
const renderCount = useRef(0);
const [inputString, setInputString] = useState(props.value);
const fullAccessPath = [props.parentPath, props.name]
.filter((element) => element)
.join('.');
useEffect(() => {
renderCount.current++;
@ -86,7 +82,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
</InputGroup.Text>
<Form.Control
type="text"
name={name}
name={fullAccessPath}
value={inputString}
disabled={readOnly}
onChange={handleChange}