feat: adding ColouredEnum component

frontend/src/components/ColouredEnumComponent.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { InputGroup, Form, Row, Col } from 'react-bootstrap';
+import { emit_update } from '../socket';
+import { DocStringComponent } from './DocStringComponent';
+
+interface ColouredEnumComponentProps {
+  name: string;
+  parentPath: string;
+  value: string;
+  docString?: string;
+  readOnly: boolean;
+  enumDict: Record<string, string>;
+  addNotification: (string) => void;
+}
+
+export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentProps) => {
+  const {
+    name,
+    parentPath: parentPath,
+    value,
+    docString,
+    enumDict,
+    readOnly,
+    addNotification
+  } = props;
+  const renderCount = useRef(0);
+
+  useEffect(() => {
+    renderCount.current++;
+  });
+
+  useEffect(() => {
+    addNotification(`${parentPath}.${name} changed to ${value}.`);
+  }, [props.value]);
+
+  const handleValueChange = (newValue) => {
+    console.log(newValue);
+    emit_update(name, parentPath, newValue);
+  };
+
+  return (
+    <div className={'enumComponent'} id={parentPath.concat('.' + name)}>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
+      <DocStringComponent docString={docString} />
+      <Row>
+        <Col className="d-flex align-items-center">
+          <InputGroup.Text>{name}</InputGroup.Text>
+          {readOnly ? (
+            // Display the Form.Control when readOnly is true
+            <Form.Control
+              value={value}
+              disabled={true}
+              style={{ backgroundColor: enumDict[value] }}
+            />
+          ) : (
+            // Display the Form.Select when readOnly is false
+            <Form.Select
+              aria-label="coloured-enum-select"
+              value={value}
+              style={{ backgroundColor: enumDict[value] }}
+              onChange={(event) => handleValueChange(event.target.value)}>
+              {Object.entries(enumDict).map(([key, val]) => (
+                <option key={key} value={key}>
+                  {key}
+                </option>
+              ))}
+            </Form.Select>
+          )}
+        </Col>
+      </Row>
+    </div>
+  );
+});

frontend/src/components/GenericComponent.tsx

@@ -9,6 +9,7 @@ import { StringComponent } from './StringComponent';
 import { ListComponent } from './ListComponent';
 import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
 import { ImageComponent } from './ImageComponent';
+import { ColouredEnumComponent } from './ColouredEnumComponent';
 
 type AttributeType =
   | 'str'
@@ -21,7 +22,8 @@ type AttributeType =
   | 'DataService'
   | 'Enum'
   | 'NumberSlider'
-  | 'Image';
+  | 'Image'
+  | 'ColouredEnum';
 
 type ValueType = boolean | string | number | object;
 export interface Attribute {
@@ -181,6 +183,19 @@ export const GenericComponent = React.memo(
           addNotification={addNotification}
         />
       );
+    } else if (attribute.type === 'ColouredEnum') {
+      console.log(attribute);
+      return (
+        <ColouredEnumComponent
+          name={name}
+          parentPath={parentPath}
+          docString={attribute.doc}
+          value={String(attribute.value)}
+          readOnly={attribute.readonly}
+          enumDict={attribute.enum}
+          addNotification={addNotification}
+        />
+      );
     } else {
       return <div key={name}>{name}</div>;
     }