1
|
import { Stack } from 'react-bootstrap';
|
2
|
import { AnnotationItem } from './annotationItem';
|
3
|
import { Occurrence, Tag } from '../models/tag';
|
4
|
import { useContext } from 'react';
|
5
|
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
6
|
|
7
|
type AnnotationPanelProps = {
|
8
|
tags: Tag[];
|
9
|
onAddOccurrence: (tag: Tag) => void;
|
10
|
onDeleteOccurrence: (occurrence: Occurrence) => void;
|
11
|
onChangeVisibility: (tag: Tag) => void;
|
12
|
onChangePosition: (occurrence: Occurrence, newValue: number) => void;
|
13
|
onChangeLength: (occurrence: Occurrence, newValue: number) => void;
|
14
|
};
|
15
|
|
16
|
/**
|
17
|
* Creates a panel in the annotation screen that contains a list of annotations.
|
18
|
* @returns Panel with a list of annotations.
|
19
|
*/
|
20
|
export function AnnotationPanel(props: AnnotationPanelProps) {
|
21
|
const { tags } = useContext(AnnotationContext);
|
22
|
|
23
|
return (
|
24
|
<div>
|
25
|
<p>Panel with a list of annotations</p>
|
26
|
<Stack>
|
27
|
{props.tags.map((tag, index) => {
|
28
|
return (
|
29
|
<AnnotationItem
|
30
|
key={index}
|
31
|
tag={tag}
|
32
|
onAddOccurrence={props.onAddOccurrence}
|
33
|
onDeleteOccurrence={props.onDeleteOccurrence}
|
34
|
onChangeVisibility={props.onChangeVisibility}
|
35
|
onChangePosition={props.onChangePosition}
|
36
|
onChangeLength={props.onChangeLength}
|
37
|
/>
|
38
|
);
|
39
|
})}
|
40
|
</Stack>
|
41
|
</div>
|
42
|
);
|
43
|
}
|