1
|
import { Stack } from 'react-bootstrap';
|
2
|
import { AnnotationItem } from './AnnotationItem';
|
3
|
import { useContext } from 'react';
|
4
|
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
5
|
import { Tag } from '../types/tag';
|
6
|
|
7
|
/**
|
8
|
* Creates a panel in the annotation screen that contains a list of annotations.
|
9
|
* @returns Panel with a list of annotations.
|
10
|
*/
|
11
|
export function AnnotationPanel() {
|
12
|
//const { tags } = useContext(AnnotationContext);
|
13
|
|
14
|
/**
|
15
|
* Temporary values of tags.
|
16
|
* TODO: connect annotation panel to a context and use its tags.
|
17
|
*/
|
18
|
const tags: Tag[] = [
|
19
|
{
|
20
|
name: 'tag a',
|
21
|
category: 'kategorie 1',
|
22
|
visible: true,
|
23
|
occurrences: [
|
24
|
{ position: 2, length: 5 },
|
25
|
{ position: 10, length: 2 },
|
26
|
],
|
27
|
},
|
28
|
{
|
29
|
name: 'tag b',
|
30
|
category: 'kategorie 2',
|
31
|
visible: true,
|
32
|
occurrences: [
|
33
|
{ position: 546, length: 432 },
|
34
|
{ position: 767, length: 123 },
|
35
|
],
|
36
|
},
|
37
|
];
|
38
|
|
39
|
return (
|
40
|
<div>
|
41
|
<Stack>
|
42
|
{tags?.map((tag, index) => {
|
43
|
return <AnnotationItem key={index} tag={tag} />;
|
44
|
})}
|
45
|
</Stack>
|
46
|
</div>
|
47
|
);
|
48
|
}
|