feat: adding first version of Image component

frontend/src/components/GenericComponent.tsx

@@ -8,6 +8,7 @@ import { AsyncMethodComponent } from './AsyncMethodComponent';
 import { StringComponent } from './StringComponent';
 import { ListComponent } from './ListComponent';
 import { DataServiceComponent, DataServiceJSON } from './DataServiceComponent';
+import { ImageComponent } from './ImageComponent';
 
 type AttributeType =
   | 'str'
@@ -19,7 +20,8 @@ type AttributeType =
   | 'method'
   | 'DataService'
   | 'Enum'
-  | 'NumberSlider';
+  | 'NumberSlider'
+  | 'Image';
 
 type ValueType = boolean | string | number | object;
 export interface Attribute {
@@ -149,6 +151,17 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
         />
       );
+    } else if (attribute.type === 'Image') {
+      return (
+        <ImageComponent
+          name={name}
+          parentPath={parentPath}
+          value={attribute.value['value']['value'] as string}
+          readOnly={attribute.readonly}
+          docString={attribute.doc}
+          // Add any other specific props for the ImageComponent here
+        />
+      );
     } else {
       return <div key={name}>{name}</div>;
     }

frontend/src/components/ImageComponent.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useRef } from 'react';
+import { emit_update } from '../socket';
+import { Card, Image } from 'react-bootstrap';
+import { DocStringComponent } from './DocStringComponent';
+
+interface ImageComponentProps {
+  name: string;
+  parentPath: string;
+  value: string;
+  readOnly: boolean;
+  docString: string;
+  // Define your component specific props here
+}
+
+export const ImageComponent = React.memo((props: ImageComponentProps) => {
+  const renderCount = useRef(0);
+  const { name, parentPath, value, docString } = props;
+  // Your component logic here
+
+  useEffect(() => {
+    renderCount.current++;
+    console.log(value);
+  });
+
+  return (
+    <div className={'imageComponent'} id={parentPath.concat('.' + name)}>
+      {process.env.NODE_ENV === 'development' && (
+        <p>Render count: {renderCount.current}</p>
+      )}
+      <DocStringComponent docString={docString} />
+      {/* Your component JSX here */}
+      <Card>
+        <Card.Header
+          style={{ cursor: 'pointer' }} // Change cursor style on hover
+        >
+          {name}
+        </Card.Header>
+        <Image src={`data:image/jpeg;base64,${value}`}></Image>
+      </Card>
+    </div>
+  );
+});