frontend: adding GenericComponent

frontend/src/components/DataServiceComponent.tsx

@@ -1,35 +1,9 @@
 import { useState } from 'react';
-import { ButtonComponent } from './ButtonComponent';
-import { NumberComponent } from './NumberComponent';
-import { SliderComponent } from './SliderComponent';
-import { EnumComponent } from './EnumComponent';
-import { MethodComponent } from './MethodComponent';
-import { AsyncMethodComponent } from './AsyncMethodComponent';
 import React from 'react';
 import { Card, Collapse } from 'react-bootstrap';
 import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
-import { StringComponent } from './StringComponent';
+import { Attribute, GenericComponent } from './GenericComponent';
 
-type AttributeType =
-  | 'str'
-  | 'bool'
-  | 'float'
-  | 'int'
-  | 'method'
-  | 'DataService'
-  | 'Enum'
-  | 'NumberSlider';
-
-type ValueType = boolean | string | number | object;
-interface Attribute {
-  type: AttributeType;
-  value?: ValueType;
-  readonly: boolean;
-  doc?: string | null;
-  parameters?: Record<string, string>;
-  async?: boolean;
-  enum?: Record<string, string>;
-}
 type DataServiceProps = {
   props: DataServiceJSON;
   parentPath?: string;
@@ -53,107 +27,14 @@ export const DataServiceComponent = React.memo(
           <Collapse in={open}>
             <Card.Body>
               {Object.entries(props).map(([key, value]) => {
-                if (value.type === 'bool') {
                 return (
-                    <div key={key}>
-                      <ButtonComponent
+                  <GenericComponent
+                    key={key}
+                    attribute={value}
                     name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={Boolean(value.value)}
+                    parentPath={parentPath}
                   />
-                    </div>
                 );
-                } else if (value.type === 'float' || value.type === 'int') {
-                  return (
-                    <div key={key}>
-                      <NumberComponent
-                        name={key}
-                        type={value.type}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={Number(value.value)}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'NumberSlider') {
-                  return (
-                    <div key={key}>
-                      <SliderComponent
-                        name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        readOnly={value.readonly}
-                        value={value.value['value']['value']}
-                        min={value.value['min']['value']}
-                        max={value.value['max']['value']}
-                        stepSize={value.value['step_size']['value']}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'Enum') {
-                  return (
-                    <div key={key}>
-                      <EnumComponent
-                        name={key}
-                        parent_path={parentPath}
-                        docString={value.doc}
-                        value={String(value.value)}
-                        enumDict={value.enum}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'method') {
-                  if (!value.async) {
-                    return (
-                      <div key={key}>
-                        <MethodComponent
-                          name={key}
-                          parent_path={parentPath}
-                          docString={value.doc}
-                          parameters={value.parameters}
-                        />
-                      </div>
-                    );
-                  } else {
-                    return (
-                      <div key={key}>
-                        <AsyncMethodComponent
-                          name={key}
-                          parent_path={parentPath}
-                          docString={value.doc}
-                          parameters={value.parameters}
-                          value={value.value as Record<string, string>}
-                        />
-                      </div>
-                    );
-                  }
-                } else if (value.type === 'str') {
-                  return (
-                    <div key={key}>
-                      <StringComponent
-                        name={key}
-                        value={value.value as string}
-                        readOnly={value.readonly}
-                        docString={value.doc}
-                        parent_path={parentPath}
-                      />
-                    </div>
-                  );
-                } else if (value.type === 'DataService') {
-                  return (
-                    <div key={key}>
-                      <DataServiceComponent
-                        props={value.value as DataServiceJSON}
-                        parentPath={parentPath.concat('.', key)}
-                      />
-                    </div>
-                  );
-                } else {
-                  return <div key={key}></div>;
-                }
               })}
             </Card.Body>
           </Collapse>

frontend/src/components/GenericComponent.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { ButtonComponent } from './ButtonComponent';
+import { NumberComponent } from './NumberComponent';
+import { SliderComponent } from './SliderComponent';
+import { EnumComponent } from './EnumComponent';
+import { MethodComponent } from './MethodComponent';
+import { AsyncMethodComponent } from './AsyncMethodComponent';
+import { StringComponent } from './StringComponent';
+import { ListComponent } from './ListComponent';
+import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
+
+export type AttributeType =
+  | 'str'
+  | 'bool'
+  | 'float'
+  | 'int'
+  | 'list'
+  | 'method'
+  | 'DataService'
+  | 'Enum'
+  | 'NumberSlider';
+
+type ValueType = boolean | string | number | object;
+interface Attribute {
+  type: AttributeType;
+  value?: ValueType | ValueType[];
+  readonly: boolean;
+  doc?: string | null;
+  parameters?: Record<string, string>;
+  async?: boolean;
+  enum?: Record<string, string>;
+}
+type GenericComponentProps = {
+  attribute: Attribute;
+  name: string;
+  parentPath: string;
+};
+
+export const GenericComponent = React.memo(
+  ({ attribute, name, parentPath }: GenericComponentProps) => {
+    if (attribute.type === 'bool') {
+      return (
+        <ButtonComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={Boolean(attribute.value)}
+        />
+      );
+    } else if (attribute.type === 'float' || attribute.type === 'int') {
+      return (
+        <NumberComponent
+          name={name}
+          type={attribute.type}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={Number(attribute.value)}
+        />
+      );
+    } else if (attribute.type === 'NumberSlider') {
+      return (
+        <SliderComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={attribute.value['value']['value']}
+          min={attribute.value['min']['value']}
+          max={attribute.value['max']['value']}
+          stepSize={attribute.value['step_size']['value']}
+        />
+      );
+    } else if (attribute.type === 'Enum') {
+      return (
+        <EnumComponent
+          name={name}
+          parent_path={parentPath}
+          docString={attribute.doc}
+          value={String(attribute.value)}
+          enumDict={attribute.enum}
+        />
+      );
+    } else if (attribute.type === 'method') {
+      if (!attribute.async) {
+        return (
+          <MethodComponent
+            name={name}
+            parent_path={parentPath}
+            docString={attribute.doc}
+            parameters={attribute.parameters}
+          />
+        );
+      } else {
+        return (
+          <AsyncMethodComponent
+            name={name}
+            parent_path={parentPath}
+            docString={attribute.doc}
+            parameters={attribute.parameters}
+            value={attribute.value as Record<string, string>}
+          />
+        );
+      }
+    } else if (attribute.type === 'str') {
+      return (
+        <StringComponent
+          name={name}
+          value={attribute.value as string}
+          readOnly={attribute.readonly}
+          docString={attribute.doc}
+          parent_path={parentPath}
+        />
+      );
+    } else if (attribute.type === 'DataService') {
+      return (
+        <DataServiceComponent
+          props={attribute.value as DataServiceJSON}
+          parentPath={parentPath.concat('.', name)}
+        />
+      );
+    } else if (attribute.type === 'list') {
+      return (
+        <ListComponent
+          name={name}
+          value={attribute.value as object[]}
+          docString={attribute.doc}
+          parent_path={parentPath}
+        />
+      );
+    } else {
+      return <div key={name}>{name}</div>;
+    }
+  }
+);