frontend: adding EnumComponent

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