ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-04-20 08:20:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

displayName of components is now taken from WebSettingsContext

Browse Source
This commit is contained in:
Mose Müller 2023-12-21 10:30:21 +01:00
parent 9fc6d6f910
commit 9d90fd2b81
11 changed files with 95 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/AsyncMethodComponent.tsx
View File

@ -1,9 +1,10 @@
import React, { useEffect, useRef } from 'react';
import React, { useContext, useEffect, useRef } from 'react';
import { runMethod } from '../socket';
import { InputGroup, Form, Button } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
interface AsyncMethodProps {
name: string;
@ -19,7 +20,14 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
const { name, parentPath, docString, value: runningTask, addNotification } = props;
const renderCount = useRef(0);
const formRef = useRef(null);
const id = getIdFromFullAccessPath(parentPath.concat('.' + name));
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -95,7 +103,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
<div>Render count: {renderCount.current}</div>
)}
<h5>
Function: {name}
Function: {displayName}
<DocStringComponent docString={docString} />
</h5>
<Form onSubmit={execute} ref={formRef}>

16
frontend/src/components/ButtonComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react';
import React, { useContext, useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { ToggleButton } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
@ -16,11 +17,16 @@ interface ButtonComponentProps {
}
export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
const { name, parentPath, value, readOnly, docString, mapping, addNotification } =
props;
const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
const { name, parentPath, value, readOnly, docString, addNotification } = props;
// const buttonName = props.mapping ? (value ? props.mapping[0] : props.mapping[1]) : name;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
const renderCount = useRef(0);
@ -51,7 +57,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
value={parentPath}
disabled={readOnly}
onChange={(e) => setChecked(e.currentTarget.checked)}>
{buttonName}
{displayName}
</ToggleButton>
</div>
);

11
frontend/src/components/ColouredEnumComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react';
import React, { useContext, useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
@ -28,6 +29,12 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
const renderCount = useRef(0);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -49,7 +56,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
<DocStringComponent docString={docString} />
<Row>
<Col className="d-flex align-items-center">
<InputGroup.Text>{name}</InputGroup.Text>
<InputGroup.Text>{displayName}</InputGroup.Text>
{readOnly ? (
// Display the Form.Control when readOnly is true
<Form.Control

12
frontend/src/components/DataServiceComponent.tsx
View File

@ -1,10 +1,11 @@
import { useState } from 'react';
import { useContext, useState } from 'react';
import React from 'react';
import { Card, Collapse } from 'react-bootstrap';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
import { Attribute, GenericComponent } from './GenericComponent';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
type DataServiceProps = {
name: string;
@ -31,6 +32,13 @@ export const DataServiceComponent = React.memo(
}
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = fullAccessPath;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
return (
<div className="dataServiceComponent" id={id}>
<Card className="mb-3">
@ -38,7 +46,7 @@ export const DataServiceComponent = React.memo(
onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover
>
{fullAccessPath} {open ? <ChevronDown /> : <ChevronRight />}
{displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
<Collapse in={open}>
<Card.Body>

11
frontend/src/components/EnumComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef } from 'react';
import React, { useContext, useEffect, useRef } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
@ -27,6 +28,12 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
const renderCount = useRef(0);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -48,7 +55,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
<DocStringComponent docString={docString} />
<Row>
<Col className="d-flex align-items-center">
<InputGroup.Text>{name}</InputGroup.Text>
<InputGroup.Text>{displayName}</InputGroup.Text>
<Form.Select
aria-label="Default select example"
value={value}

1
frontend/src/components/GenericComponent.tsx
View File

@ -186,7 +186,6 @@ export const GenericComponent = React.memo(
/>
);
} else if (attribute.type === 'ColouredEnum') {
console.log(attribute);
return (
<ColouredEnumComponent
name={name}

11
frontend/src/components/ImageComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
@ -22,6 +23,12 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
const [open, setOpen] = useState(true);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -41,7 +48,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover
>
{name} {open ? <ChevronDown /> : <ChevronRight />}
{displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
<Collapse in={open}>
<Card.Body>

11
frontend/src/components/MethodComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { runMethod } from '../socket';
import { Button, InputGroup, Form, Collapse } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
@ -23,6 +24,12 @@ export const MethodComponent = React.memo((props: MethodProps) => {
const [functionCalls, setFunctionCalls] = useState([]);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -81,7 +88,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
<div>Render count: {renderCount.current}</div>
)}
<h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
Function: {name}
Function: {displayName}
<DocStringComponent docString={docString} />
</h5>
<Form onSubmit={execute}>

11
frontend/src/components/NumberComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Form, InputGroup } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
@ -148,6 +149,12 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
const [inputString, setInputString] = useState(props.value.toString());
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -309,7 +316,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
<DocStringComponent docString={docString} />
<div className="d-flex">
<InputGroup>
{showName && <InputGroup.Text>{name}</InputGroup.Text>}
{showName && <InputGroup.Text>{displayName}</InputGroup.Text>}
<Form.Control
type="text"
value={inputString}

11
frontend/src/components/SliderComponent.tsx
View File

@ -1,4 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
@ -36,6 +37,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
} = props;
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -101,7 +108,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
<DocStringComponent docString={docString} />
<Row>
<Col xs="auto" xl="auto">
<InputGroup.Text>{name}</InputGroup.Text>
<InputGroup.Text>{displayName}</InputGroup.Text>
</Col>
<Col xs="5" xl>
<Slider

11
frontend/src/components/StringComponent.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { Form, InputGroup } from 'react-bootstrap';
import { setAttribute } from '../socket';
import { DocStringComponent } from './DocStringComponent';
import '../App.css';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
import { LevelName } from './NotificationsComponent';
import { WebSettingsContext } from '../WebSettings';
// TODO: add button functionality
@ -26,6 +27,12 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
const [inputString, setInputString] = useState(props.value);
const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath);
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => {
renderCount.current++;
@ -65,7 +72,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
)}
<DocStringComponent docString={docString} />
<InputGroup>
<InputGroup.Text>{name}</InputGroup.Text>
<InputGroup.Text>{displayName}</InputGroup.Text>
<Form.Control
type="text"
value={inputString}