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