Revize 76242338
Přidáno uživatelem Dominik Poch před asi 3 roky(ů)
| webapp/components/annotation/AnnotationItem.tsx | ||
|---|---|---|
| 1 | 1 |
import { Col, Container, Row, Stack } from 'react-bootstrap';
|
| 2 |
import { Occurrence, Tag } from '../types/tag';
|
|
| 2 |
import { Tag } from '../types/tag';
|
|
| 3 | 3 |
import { ChangeEvent, useContext, useState } from 'react';
|
| 4 | 4 |
import 'antd/dist/antd.css'; |
| 5 | 5 |
import { Button, Input } from 'antd';
|
| ... | ... | |
| 8 | 8 |
EyeOutlined, |
| 9 | 9 |
DownOutlined, |
| 10 | 10 |
DeleteOutlined, |
| 11 |
TagOutlined, |
|
| 11 | 12 |
} from '@ant-design/icons'; |
| 12 | 13 |
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
| 14 |
import { TagInstanceInfo } from '../../api';
|
|
| 13 | 15 |
|
| 14 | 16 |
/** |
| 15 | 17 |
* Creates a single item in an annotation panel. |
| ... | ... | |
| 44 | 46 |
* Removes an occurrence of this annotation from the context. |
| 45 | 47 |
* @param occurrence The occurrence that should be removed. |
| 46 | 48 |
*/ |
| 47 |
const onDeleteOccurrence = (occurrence: Occurrence) => (e: any) => {
|
|
| 49 |
const onDeleteOccurrence = (occurrence: TagInstanceInfo) => (e: any) => {
|
|
| 48 | 50 |
deleteOccurrence(occurrence); |
| 49 | 51 |
}; |
| 50 | 52 |
|
| ... | ... | |
| 60 | 62 |
* @param occurrence The occurrence that should be changed. |
| 61 | 63 |
*/ |
| 62 | 64 |
const onChangePosition = |
| 63 |
(occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
|
|
| 65 |
(occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
|
|
| 64 | 66 |
changePosition(occurrence, Number(e.currentTarget.value)); |
| 65 | 67 |
}; |
| 66 | 68 |
|
| ... | ... | |
| 69 | 71 |
* @param occurrence The occurrence that should be changed. |
| 70 | 72 |
*/ |
| 71 | 73 |
const onChangeLength = |
| 72 |
(occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
|
|
| 74 |
(occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
|
|
| 73 | 75 |
changeLength(occurrence, Number(e.currentTarget.value)); |
| 74 | 76 |
}; |
| 75 | 77 |
|
| ... | ... | |
| 82 | 84 |
|
| 83 | 85 |
return ( |
| 84 | 86 |
<Container> |
| 85 |
<Row> |
|
| 87 |
<Row className="border rounded"> |
|
| 88 |
<Col sm="auto" className="d-flex align-items-center"> |
|
| 89 |
<TagOutlined /> |
|
| 90 |
</Col> |
|
| 86 | 91 |
<Col className="d-flex align-items-center">{props.tag.name}</Col>
|
| 87 | 92 |
<Col sm="auto"> |
| 88 | 93 |
<Button |
| ... | ... | |
| 106 | 111 |
</Col> |
| 107 | 112 |
</Row> |
| 108 | 113 |
{visibleProperties && (
|
| 109 |
<Stack> |
|
| 114 |
<Stack gap={1} className="mb-2">
|
|
| 110 | 115 |
<div>Kategorie: {props.tag.category}</div>
|
| 111 | 116 |
<div>Výskyty:</div> |
| 112 | 117 |
{props.tag.occurrences.map((occurrence, index) => {
|
| 113 | 118 |
return ( |
| 114 |
<div key={index} id={props.tag.name + index}>
|
|
| 115 |
<Container> |
|
| 116 |
<Row> |
|
| 117 |
<Col> |
|
| 118 |
<Row> |
|
| 119 |
<Col className="d-flex align-items-center"> |
|
| 120 |
Pozice: |
|
| 121 |
</Col> |
|
| 122 |
<Col sm="auto"> |
|
| 123 |
<Input |
|
| 124 |
value={occurrence.position}
|
|
| 125 |
onChange={onChangePosition(
|
|
| 126 |
occurrence |
|
| 127 |
)} |
|
| 128 |
/> |
|
| 129 |
</Col> |
|
| 130 |
</Row> |
|
| 131 |
<Row> |
|
| 132 |
<Col className="d-flex align-items-center"> |
|
| 133 |
Délka: |
|
| 134 |
</Col> |
|
| 135 |
<Col sm="auto"> |
|
| 136 |
<Input |
|
| 137 |
value={occurrence.length}
|
|
| 138 |
onChange={onChangeLength(
|
|
| 139 |
occurrence |
|
| 140 |
)} |
|
| 141 |
/> |
|
| 142 |
</Col> |
|
| 143 |
</Row> |
|
| 144 |
</Col> |
|
| 145 |
<Col |
|
| 146 |
sm="auto" |
|
| 147 |
className="d-flex align-items-center" |
|
| 148 |
> |
|
| 149 |
<Button |
|
| 150 |
icon={<DeleteOutlined />}
|
|
| 151 |
onClick={onDeleteOccurrence(occurrence)}
|
|
| 152 |
></Button> |
|
| 153 |
</Col> |
|
| 154 |
</Row> |
|
| 155 |
</Container> |
|
| 156 |
</div> |
|
| 119 |
<Container key={index} className="shadow-sm">
|
|
| 120 |
<Row className="mb-1 mt-1"> |
|
| 121 |
<Col> |
|
| 122 |
<Row> |
|
| 123 |
<Col className="d-flex align-items-center"> |
|
| 124 |
Pozice: |
|
| 125 |
</Col> |
|
| 126 |
<Col sm="auto"> |
|
| 127 |
<Input |
|
| 128 |
value={occurrence.position}
|
|
| 129 |
onChange={onChangePosition(
|
|
| 130 |
occurrence |
|
| 131 |
)} |
|
| 132 |
/> |
|
| 133 |
</Col> |
|
| 134 |
</Row> |
|
| 135 |
<Row> |
|
| 136 |
<Col className="d-flex align-items-center"> |
|
| 137 |
Délka: |
|
| 138 |
</Col> |
|
| 139 |
<Col sm="auto"> |
|
| 140 |
<Input |
|
| 141 |
value={occurrence.length}
|
|
| 142 |
onChange={onChangeLength(occurrence)}
|
|
| 143 |
/> |
|
| 144 |
</Col> |
|
| 145 |
</Row> |
|
| 146 |
</Col> |
|
| 147 |
<Col sm="auto" className="d-flex align-items-center"> |
|
| 148 |
<Button |
|
| 149 |
icon={<DeleteOutlined />}
|
|
| 150 |
onClick={onDeleteOccurrence(occurrence)}
|
|
| 151 |
danger |
|
| 152 |
></Button> |
|
| 153 |
</Col> |
|
| 154 |
</Row> |
|
| 155 |
</Container> |
|
| 157 | 156 |
); |
| 158 | 157 |
})} |
| 159 | 158 |
</Stack> |
| webapp/components/annotation/AnnotationPanel.tsx | ||
|---|---|---|
| 2 | 2 |
import { AnnotationItem } from './AnnotationItem';
|
| 3 | 3 |
import { useContext } from 'react';
|
| 4 | 4 |
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
| 5 |
import { Tag } from '../types/tag';
|
|
| 6 | 5 |
|
| 7 | 6 |
/** |
| 8 | 7 |
* Creates a panel in the annotation screen that contains a list of annotations. |
| 9 | 8 |
* @returns Panel with a list of annotations. |
| 10 | 9 |
*/ |
| 11 | 10 |
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 |
]; |
|
| 11 |
const { mappedTags } = useContext(AnnotationContext);
|
|
| 38 | 12 |
|
| 39 | 13 |
return ( |
| 40 | 14 |
<div> |
| 41 |
<Stack> |
|
| 42 |
{tags?.map((tag, index) => {
|
|
| 15 |
<Stack gap={2}>
|
|
| 16 |
{mappedTags?.map((tag, index) => {
|
|
| 43 | 17 |
return <AnnotationItem key={index} tag={tag} />;
|
| 44 | 18 |
})} |
| 45 | 19 |
</Stack> |
| webapp/components/types/tag.tsx | ||
|---|---|---|
| 1 |
import { TagInstanceInfo } from '../../api';
|
|
| 2 |
|
|
| 3 |
/** |
|
| 4 |
* Special tag used in annotation panel. |
|
| 5 |
*/ |
|
| 1 | 6 |
export type Tag = {
|
| 2 | 7 |
name: string; |
| 3 | 8 |
category: string; |
| 4 | 9 |
visible: boolean; |
| 5 |
occurrences: Occurrence[]; |
|
| 6 |
}; |
|
| 7 |
|
|
| 8 |
export type Occurrence = {
|
|
| 9 |
position: number; |
|
| 10 |
length: number; |
|
| 10 |
occurrences: TagInstanceInfo[]; |
|
| 11 | 11 |
}; |
Také k dispozici: Unified diff
Connected annotation panel to API and updated visual