frontend: adding components, rendering serialized data service class

frontend/src/components/button.tsx

@@ -0,0 +1,44 @@
+import React, { MouseEventHandler } from 'react';
+import { OverlayTrigger, Badge, Button, Tooltip } from 'react-bootstrap';
+
+interface ButtonComponentProps {
+  name: string;
+  fullname?: string;
+  value: boolean;
+  readOnly: boolean;
+  docString: string;
+  onToggle?: MouseEventHandler;
+  mapping?: [string, string]; // Enforce a tuple of two strings
+}
+
+const ButtonComponentRef = React.forwardRef<HTMLDivElement, ButtonComponentProps>(
+  (props, ref) => {
+    const { name, fullname, value, readOnly, docString, onToggle, mapping } = props;
+
+    const buttonName = mapping ? (value ? mapping[0] : mapping[1]) : name;
+
+    const tooltip = <Tooltip id="tooltip">{docString}</Tooltip>;
+
+    return (
+      <div className={'component boolean'} id={fullname} ref={ref}>
+        <Button
+          type={'button'}
+          variant={value ? 'success' : 'secondary'}
+          onMouseUp={onToggle}
+          disabled={readOnly}>
+          <p>{buttonName}</p>
+        </Button>
+
+        {docString && (
+          <OverlayTrigger placement="bottom" overlay={tooltip}>
+            <Badge pill className="tooltip-trigger" bg="light" text="dark">
+              ?
+            </Badge>
+          </OverlayTrigger>
+        )}
+      </div>
+    );
+  }
+);
+
+export const ButtonComponent = React.memo(ButtonComponentRef);

frontend/src/components/component.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface ComponentProps {
+  name: string;
+  value: any;
+  readOnly: boolean;
+  type: string;
+  docString: string;
+}
+
+export const ComponentLabel = ({
+  name,
+  docString
+}: {
+  name: string;
+  docString: string;
+}) => {
+  return <label title={docString}>{name}</label>;
+};
+
+export const Component = ({
+  name,
+  value,
+  readOnly,
+  type,
+  docString
+}: ComponentProps) => {
+  switch (type) {
+    case 'int':
+    case 'float':
+      return (
+        <input
+          type="number"
+          name={name}
+          value={value}
+          readOnly={readOnly}
+          title={docString}
+        />
+      );
+    case 'str':
+      return (
+        <input
+          type="text"
+          name={name}
+          value={value}
+          readOnly={readOnly}
+          title={docString}
+        />
+      );
+    case 'bool':
+      return (
+        <input
+          type="checkbox"
+          name={name}
+          checked={value}
+          disabled={readOnly}
+          title={docString}
+        />
+      );
+    case 'method':
+      return <p>Method: {name}</p>;
+    default:
+      return <p>Unsupported type: {type}</p>;
+  }
+};