1 |
1 |
import { CategoryItem } from './CategoryItem';
|
2 |
|
import { TagCategoryInfo } from '../../api';
|
3 |
|
import { Stack } from 'react-bootstrap';
|
4 |
|
import { useContext } from 'react';
|
5 |
|
import { TagCategoryContext } from '../../contexts/TagCategoryContext';
|
|
2 |
import { SubTagInfo, TagCategoryInfo, TagInfo } from '../../api';
|
|
3 |
import { Button, Container, Stack } from 'react-bootstrap';
|
|
4 |
import { useEffect, useState } from 'react';
|
|
5 |
import { Input } from 'antd';
|
|
6 |
import { tagController } from '../../controllers';
|
|
7 |
import styles from '/styles/Annotation.module.scss';
|
|
8 |
|
|
9 |
const { Search } = Input;
|
6 |
10 |
|
7 |
11 |
/**
|
8 |
12 |
* Creates a panel in the annotation screen that contains a list of tag.
|
9 |
13 |
* @returns Panel with a list of tags.
|
10 |
14 |
*/
|
11 |
15 |
export function TagPanel() {
|
12 |
|
const { tagCategories } = useContext(TagCategoryContext);
|
|
16 |
const [data, setData] = useState<TagCategoryInfo[] | null>();
|
|
17 |
|
|
18 |
useEffect(() => {
|
|
19 |
tagController.tagsGet().then((tagTree) => {
|
|
20 |
if (typeof tagTree.data.tagCategories != 'undefined') {
|
|
21 |
setData(tagTree.data.tagCategories);
|
|
22 |
}
|
|
23 |
});
|
|
24 |
}, []);
|
|
25 |
|
|
26 |
const onSearch = (value: string) => {
|
|
27 |
tagController.tagsGet().then((tagTree) => {
|
|
28 |
if (typeof tagTree.data.tagCategories != 'undefined') {
|
|
29 |
let tempData = tagTree.data.tagCategories;
|
|
30 |
|
|
31 |
if (value) {
|
|
32 |
tempData =
|
|
33 |
tempData?.filter((category) => {
|
|
34 |
category.tags = category.tags?.filter((tag: TagInfo) => {
|
|
35 |
tag.subTags = tag.subTags?.filter((subTag: SubTagInfo) =>
|
|
36 |
subTag.name
|
|
37 |
?.toLowerCase()
|
|
38 |
.includes(value.toLowerCase())
|
|
39 |
);
|
|
40 |
|
|
41 |
return (
|
|
42 |
(tag.subTags?.length !== undefined &&
|
|
43 |
tag.subTags?.length > 0) ||
|
|
44 |
tag.name?.toLowerCase().includes(value.toLowerCase())
|
|
45 |
);
|
|
46 |
});
|
|
47 |
|
|
48 |
return (
|
|
49 |
(category.tags?.length !== undefined &&
|
|
50 |
category.tags?.length > 0) ||
|
|
51 |
category.name?.toLowerCase().includes(value.toLowerCase())
|
|
52 |
);
|
|
53 |
}) ?? null;
|
|
54 |
}
|
|
55 |
|
|
56 |
setData(tempData);
|
|
57 |
}
|
|
58 |
});
|
|
59 |
};
|
13 |
60 |
|
14 |
61 |
return (
|
15 |
62 |
<div>
|
16 |
63 |
<Stack gap={1}>
|
17 |
|
{tagCategories?.map((category, index) => (
|
|
64 |
<Search
|
|
65 |
placeholder="Vyhledat tag"
|
|
66 |
allowClear
|
|
67 |
onSearch={onSearch}
|
|
68 |
className={styles.fixHeight}
|
|
69 |
/>
|
|
70 |
{data?.map((category, index) => (
|
18 |
71 |
<CategoryItem category={category} key={index} />
|
19 |
72 |
))}
|
20 |
73 |
</Stack>
|
Search tags in annotation view
Added search bar to tags panel in the annotation view