commit 76242338b3ddd214befcbb98091f4fd4ad9cac67
Author: Dominik Poch <dpoch@email.cz>
Date:   Sun Apr 17 02:37:25 2022 +0200

    Connected annotation panel to API and updated visual

diff --git a/webapp/components/annotation/AnnotationItem.tsx b/webapp/components/annotation/AnnotationItem.tsx
index 439f25e..7dfef34 100644
--- a/webapp/components/annotation/AnnotationItem.tsx
+++ b/webapp/components/annotation/AnnotationItem.tsx
@@ -1,5 +1,5 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
-import { Occurrence, Tag } from '../types/tag';
+import { Tag } from '../types/tag';
 import { ChangeEvent, useContext, useState } from 'react';
 import 'antd/dist/antd.css';
 import { Button, Input } from 'antd';
@@ -8,8 +8,10 @@ import {
     EyeOutlined,
     DownOutlined,
     DeleteOutlined,
+    TagOutlined,
 } from '@ant-design/icons';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
+import { TagInstanceInfo } from '../../api';
 
 /**
  * Creates a single item in an annotation panel.
@@ -44,7 +46,7 @@ export function AnnotationItem(props: { tag: Tag }) {
      * Removes an occurrence of this annotation from the context.
      * @param occurrence The occurrence that should be removed.
      */
-    const onDeleteOccurrence = (occurrence: Occurrence) => (e: any) => {
+    const onDeleteOccurrence = (occurrence: TagInstanceInfo) => (e: any) => {
         deleteOccurrence(occurrence);
     };
 
@@ -60,7 +62,7 @@ export function AnnotationItem(props: { tag: Tag }) {
      * @param occurrence The occurrence that should be changed.
      */
     const onChangePosition =
-        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
             changePosition(occurrence, Number(e.currentTarget.value));
         };
 
@@ -69,7 +71,7 @@ export function AnnotationItem(props: { tag: Tag }) {
      * @param occurrence The occurrence that should be changed.
      */
     const onChangeLength =
-        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
             changeLength(occurrence, Number(e.currentTarget.value));
         };
 
@@ -82,7 +84,10 @@ export function AnnotationItem(props: { tag: Tag }) {
 
     return (
         <Container>
-            <Row>
+            <Row className="border rounded">
+                <Col sm="auto" className="d-flex align-items-center">
+                    <TagOutlined />
+                </Col>
                 <Col className="d-flex align-items-center">{props.tag.name}</Col>
                 <Col sm="auto">
                     <Button
@@ -106,54 +111,48 @@ export function AnnotationItem(props: { tag: Tag }) {
                 </Col>
             </Row>
             {visibleProperties && (
-                <Stack>
+                <Stack gap={1} className="mb-2">
                     <div>Kategorie: {props.tag.category}</div>
                     <div>Výskyty:</div>
                     {props.tag.occurrences.map((occurrence, index) => {
                         return (
-                            <div key={index} id={props.tag.name + index}>
-                                <Container>
-                                    <Row>
-                                        <Col>
-                                            <Row>
-                                                <Col className="d-flex align-items-center">
-                                                    Pozice:
-                                                </Col>
-                                                <Col sm="auto">
-                                                    <Input
-                                                        value={occurrence.position}
-                                                        onChange={onChangePosition(
-                                                            occurrence
-                                                        )}
-                                                    />
-                                                </Col>
-                                            </Row>
-                                            <Row>
-                                                <Col className="d-flex align-items-center">
-                                                    Délka:
-                                                </Col>
-                                                <Col sm="auto">
-                                                    <Input
-                                                        value={occurrence.length}
-                                                        onChange={onChangeLength(
-                                                            occurrence
-                                                        )}
-                                                    />
-                                                </Col>
-                                            </Row>
-                                        </Col>
-                                        <Col
-                                            sm="auto"
-                                            className="d-flex align-items-center"
-                                        >
-                                            <Button
-                                                icon={<DeleteOutlined />}
-                                                onClick={onDeleteOccurrence(occurrence)}
-                                            ></Button>
-                                        </Col>
-                                    </Row>
-                                </Container>
-                            </div>
+                            <Container key={index} className="shadow-sm">
+                                <Row className="mb-1 mt-1">
+                                    <Col>
+                                        <Row>
+                                            <Col className="d-flex align-items-center">
+                                                Pozice:
+                                            </Col>
+                                            <Col sm="auto">
+                                                <Input
+                                                    value={occurrence.position}
+                                                    onChange={onChangePosition(
+                                                        occurrence
+                                                    )}
+                                                />
+                                            </Col>
+                                        </Row>
+                                        <Row>
+                                            <Col className="d-flex align-items-center">
+                                                Délka:
+                                            </Col>
+                                            <Col sm="auto">
+                                                <Input
+                                                    value={occurrence.length}
+                                                    onChange={onChangeLength(occurrence)}
+                                                />
+                                            </Col>
+                                        </Row>
+                                    </Col>
+                                    <Col sm="auto" className="d-flex align-items-center">
+                                        <Button
+                                            icon={<DeleteOutlined />}
+                                            onClick={onDeleteOccurrence(occurrence)}
+                                            danger
+                                        ></Button>
+                                    </Col>
+                                </Row>
+                            </Container>
                         );
                     })}
                 </Stack>
diff --git a/webapp/components/annotation/AnnotationPanel.tsx b/webapp/components/annotation/AnnotationPanel.tsx
index 346844e..a133f7b 100644
--- a/webapp/components/annotation/AnnotationPanel.tsx
+++ b/webapp/components/annotation/AnnotationPanel.tsx
@@ -2,44 +2,18 @@ import { Stack } from 'react-bootstrap';
 import { AnnotationItem } from './AnnotationItem';
 import { useContext } from 'react';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
-import { Tag } from '../types/tag';
 
 /**
  * Creates a panel in the annotation screen that contains a list of annotations.
  * @returns Panel with a list of annotations.
  */
 export function AnnotationPanel() {
-    //const { tags } = useContext(AnnotationContext);
-
-    /**
-     * Temporary values of tags.
-     * TODO: connect annotation panel to a context and use its tags.
-     */
-    const tags: Tag[] = [
-        {
-            name: 'tag a',
-            category: 'kategorie 1',
-            visible: true,
-            occurrences: [
-                { position: 2, length: 5 },
-                { position: 10, length: 2 },
-            ],
-        },
-        {
-            name: 'tag b',
-            category: 'kategorie 2',
-            visible: true,
-            occurrences: [
-                { position: 546, length: 432 },
-                { position: 767, length: 123 },
-            ],
-        },
-    ];
+    const { mappedTags } = useContext(AnnotationContext);
 
     return (
         <div>
-            <Stack>
-                {tags?.map((tag, index) => {
+            <Stack gap={2}>
+                {mappedTags?.map((tag, index) => {
                     return <AnnotationItem key={index} tag={tag} />;
                 })}
             </Stack>
diff --git a/webapp/components/types/tag.tsx b/webapp/components/types/tag.tsx
index a343b9f..62c23b8 100644
--- a/webapp/components/types/tag.tsx
+++ b/webapp/components/types/tag.tsx
@@ -1,11 +1,11 @@
+import { TagInstanceInfo } from '../../api';
+
+/**
+ * Special tag used in annotation panel.
+ */
 export type Tag = {
     name: string;
     category: string;
     visible: boolean;
-    occurrences: Occurrence[];
-};
-
-export type Occurrence = {
-    position: number;
-    length: number;
+    occurrences: TagInstanceInfo[];
 };
