frontend: adding EnumComponent

frontend/src/App.tsx

@@ -4,6 +4,7 @@ import { ButtonComponent } from './components/ButtonComponent';
 import { socket } from './socket';
 import { NumberComponent } from './components/NumberComponent';
 import { SliderComponent } from './components/SliderComponent';
+import { EnumComponent } from './components/EnumComponent';
 
 type AttributeType =
   | 'str'
@@ -11,7 +12,8 @@ type AttributeType =
   | 'float'
   | 'int'
   | 'method'
-  | 'Subclass'
+  | 'DataService'
+  | 'Enum'
   | 'NumberSlider';
 
 type ValueType = boolean | string | number | object;
@@ -22,6 +24,7 @@ interface Attribute {
   doc?: string | null;
   parameters?: Record<string, string>;
   async?: boolean;
+  enum?: Record<string, string>;
 }
 
 type MyData = Record<string, Attribute>;
@@ -168,6 +171,18 @@ const App = () => {
               />
             </div>
           );
+        } else if (value.type === 'Enum') {
+          return (
+            <div key={key}>
+              <EnumComponent
+                name={key}
+                parent_path="DataService"
+                docString={value.doc}
+                value={String(value.value)}
+                enumDict={value.enum}
+              />
+            </div>
+          );
         } else if (!value.async) {
           return (
             <div key={key}>

frontend/src/components/EnumComponent.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  OverlayTrigger,
+  Badge,
+  Tooltip,
+  InputGroup,
+  Form,
+  Row,
+  Col
+} from 'react-bootstrap';
+import { socket } from '../socket';
+import { DocStringComponent } from './DocStringComponent';
+
+interface EnumComponentProps {
+  name: string;
+  parent_path: string;
+  value: string;
+  docString?: string;
+  enumDict: Record<string, string>;
+}
+
+export const EnumComponent = React.memo((props: EnumComponentProps) => {
+  const renderCount = useRef(0);
+
+  useEffect(() => {
+    renderCount.current++;
+  });
+
+  const { name, parent_path, value, docString, enumDict } = props;
+
+  const handleValueChange = (newValue: string) => {
+    socket.emit('frontend_update', {
+      name: name,
+      value: { value: newValue }
+    });
+  };
+
+  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>{name}</InputGroup.Text>
+          <Form.Select
+            aria-label="Default select example"
+            value={value}
+            onChange={(event) => handleValueChange(event.target.value)}>
+            {Object.entries(enumDict).map(([key, val]) => (
+              <option key={key} value={key}>
+                {key} - {val}
+              </option>
+            ))}
+          </Form.Select>
+        </Col>
+      </Row>
+    </div>
+  );
+});