import React, { useEffect, useRef, useState } from 'react'; import { Card, Collapse, Image } from 'react-bootstrap'; import { DocStringComponent } from './DocStringComponent'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { LevelName } from './NotificationsComponent'; type ImageComponentProps = { fullAccessPath: string; value: string; docString: string; format: string; addNotification: (message: string, levelname?: LevelName) => void; displayName: string; id: string; }; export const ImageComponent = React.memo((props: ImageComponentProps) => { const { fullAccessPath, value, docString, format, addNotification, displayName, id } = props; const renderCount = useRef(0); const [open, setOpen] = useState(true); useEffect(() => { renderCount.current++; }); useEffect(() => { addNotification(`${fullAccessPath} changed.`); }, [props.value]); return (
setOpen(!open)} style={{ cursor: 'pointer' }} // Change cursor style on hover > {displayName} {open ? : } {process.env.NODE_ENV === 'development' && (

Render count: {renderCount.current}

)} {format === '' && value === '' ? (

No image set in the backend.

) : ( )}
); });