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

frontend: introducing DocStringComponent

Browse Source
This commit is contained in:
Mose Müller 2023-08-02 12:06:20 +02:00
parent 68c3f6659e
commit bae1752e48
4 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { OverlayTrigger, Badge, Tooltip, ToggleButton } from 'react-bootstrap';
import { socket } from '../socket';
import { DocStringComponent } from './DocStringComponent';
interface ButtonComponentProps {
name: string;
@ -21,8 +22,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
const setChecked = (checked: boolean) => {
socket.emit('frontend_update', {
name: name,
@ -34,6 +33,8 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
return (
<div className={'component boolean'} id={parent_path.concat('.' + name)}>
<p>Render count: {renderCount.current}</p>
<DocStringComponent docString={docString} />
<ToggleButton
id="toggle-check"
type="checkbox"
@ -44,14 +45,6 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
onChange={(e) => setChecked(e.currentTarget.checked)}>
<p>{buttonName}</p>
</ToggleButton>
{docString && (
<OverlayTrigger placement="bottom" overlay={tooltip}>
<Badge pill className="tooltip-trigger" bg="light" text="dark">
?
</Badge>
</OverlayTrigger>
)}
</div>
);
});

23
frontend/src/components/DocStringComponent.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Badge, Tooltip, OverlayTrigger } from 'react-bootstrap';
import React from 'react';
interface DocStringProps {
docString?: string;
}
export const DocStringComponent = React.memo((props: DocStringProps) => {
const { docString } = props;
if (!docString) {
return null; // render nothing if docString is not provided
}
const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
return (
<OverlayTrigger placement="bottom" overlay={tooltip}>
<Badge pill className="tooltip-trigger" bg="light" text="dark">
?
</Badge>
</OverlayTrigger>
);
});

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

@ -8,6 +8,7 @@ import {
Button
} from 'react-bootstrap';
import { socket } from '../socket';
import { DocStringComponent } from './DocStringComponent';
// TODO: add button functionality
@ -138,8 +139,6 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
const { name, parent_path, value, readOnly, docString } = props;
const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
const handleKeyDown = (event) => {
const { key, target } = event;
if (key === 'F5' || key === 'ArrowRight' || key === 'ArrowLeft') {
@ -209,6 +208,7 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
return (
<div className={'component boolean'} id={parent_path.concat(name)}>
<p>Render count: {renderCount.current}</p>
<DocStringComponent docString={docString} />
<div className="row">
<div className="col-2 d-flex">
<InputGroup>
@ -236,14 +236,6 @@ export const NumberComponent = React.memo((props: ButtonComponentProps) => {
</div>
</div>
</div>
{docString && (
<OverlayTrigger placement="bottom" overlay={tooltip}>
<Badge pill className="tooltip-trigger" bg="light" text="dark">
?
</Badge>
</OverlayTrigger>
)}
</div>
);
});

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

@ -11,8 +11,8 @@ import {
Collapse
} from 'react-bootstrap';
import { socket } from '../socket';
import './NumberComponent.css';
import RangeSlider from 'react-bootstrap-range-slider';
import { DocStringComponent } from './DocStringComponent';
interface SliderComponentProps {
name: string;
@ -38,8 +38,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
const [max, setMax] = useState(props.max);
const [stepSize, setStepSize] = useState(props.stepSize);
const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
const socketEmit = (
newNumber: number,
min: number = props.min,
@ -75,6 +73,8 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
return (
<div className={'component boolean'} id={parent_path.concat('.' + name)}>
<p>Render count: {renderCount.current}</p>
<DocStringComponent docString={docString} />
<Row>
<Col className="col-2 d-flex align-items-center">
<InputGroup.Text style={{ height: '65px' }}>{name}</InputGroup.Text>
@ -126,14 +126,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
</div>
</Collapse>
</Row>
{docString && (
<OverlayTrigger placement="bottom" overlay={tooltip}>
<Badge pill className="tooltip-trigger" bg="light" text="dark">
?
</Badge>
</OverlayTrigger>
)}
</div>
);
});