import { useEffect, useState } from 'react'; import { AnnotationQuery, DataQuery, EventBus } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { AnnotationPicker } from './AnnotationPicker'; interface Props { events: EventBus; annotations: AnnotationQuery[]; onAnnotationChanged: (annotation: AnnotationQuery<DataQuery>) => void; } export const Annotations = ({ annotations, onAnnotationChanged, events }: Props) => { const [visibleAnnotations, setVisibleAnnotations] = useState<AnnotationQuery[]>([]); useEffect(() => { setVisibleAnnotations(annotations.filter((annotation) => annotation.hide !== true)); }, [annotations]); if (visibleAnnotations.length === 0) { return null; } return ( <div data-testid={selectors.pages.Dashboard.SubMenu.Annotations.annotationsWrapper}> {visibleAnnotations.map((annotation) => ( <AnnotationPicker events={events} annotation={annotation} onEnabledChanged={onAnnotationChanged} key={annotation.name} /> ))} </div> ); };