frontend: introducing DocStringComponent

frontend/src/components/ButtonComponent.tsx

@@ -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>
   );
 });

frontend/src/components/DocStringComponent.tsx

@@ -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>
+  );
+});

frontend/src/components/NumberComponent.tsx

@@ -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>
   );
 });

frontend/src/components/SliderComponent.tsx

@@ -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>
   );
 });