1 |
c73aecde
|
Dominik Poch
|
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 |
acb8a961
|
Dominik Poch
|
/**
|
15 |
|
|
* Temporary values of tags.
|
16 |
|
|
* TODO: connect annotation panel to a context and use its tags.
|
17 |
|
|
*/
|
18 |
c73aecde
|
Dominik Poch
|
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 |
7a32656e
|
Jaroslav Hrubý
|
}
|