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 (
Render count: {renderCount.current}
)} {format === '' && value === '' ? (No image set in the backend.
) : (