aswi20220x00-gitlab/webapp/components/annotation/AnnotationItem.tsx @ c2192cda

import { Col, Container, Row, Stack } from 'react-bootstrap';
import { Tag } from '../types/tag';
import { ChangeEvent, useContext, useState } from 'react';
import 'antd/dist/antd.css';
import { Button, Input } from 'antd';
import {
    PlusOutlined,
    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.
 * @param props Properties should contain a tag that will be shown in this annotation.
 * @returns The item that represents an annotation.
 */
export function AnnotationItem(props: { tag: Tag }) {
    /**
     * Should properties of this annotation be visible?
     */
    const [visibleProperties, setVisibleProperties] = useState(false);

    /**
     * Context that manages annotations.
     */
    const {
        addOccurrence,
        deleteOccurrence,
        changeVisibility,
        changePosition,
        changeLength,
    } = useContext(AnnotationContext);

    /**
     * Adds new occurrence of this annotation to the context.
     */
    const onAddOccurrence = () => {
        addOccurrence(props.tag);
    };

    /**
     * Removes an occurrence of this annotation from the context.
     * @param occurrence The occurrence that should be removed.
     */
    const onDeleteOccurrence = (occurrence: TagInstanceInfo) => (e: any) => {
        deleteOccurrence(occurrence);
    };

    /**
     * Changes visibility of this annotation in the context.
     */
    const onChangeVisibility = () => {
        changeVisibility(props.tag);
    };

    /**
     * Changes a position of an occurrence of this annotation in the context.
     * @param occurrence The occurrence that should be changed.
     */
    const onChangePosition =
        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
            changePosition(occurrence, Number(e.currentTarget.value));
        };

    /**
     * Changes a length of an occurrence of this annotation in the context.
     * @param occurrence The occurrence that should be changed.
     */
    const onChangeLength =
        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLInputElement>) => {
            changeLength(occurrence, Number(e.currentTarget.value));
        };

    /**
     * Changes visibility of properties of this annotation.
     */
    const changePropertiesVisibility = () => {
        setVisibleProperties(!visibleProperties);
    };

    return (
        <Container>
            <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
                        type="text"
                        shape="circle"
                        icon={<PlusOutlined />}
                        onClick={onAddOccurrence}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<EyeOutlined />}
                        onClick={onChangeVisibility}
                    />
                    <Button
                        type="text"
                        shape="circle"
                        icon={<DownOutlined />}
                        onClick={changePropertiesVisibility}
                    />
                </Col>
            </Row>
            {visibleProperties && (
                <Stack gap={1} className="mb-2">
                    <div>Kategorie: {props.tag.category}</div>
                    <div>Výskyty:</div>
                    {props.tag.occurrences.map((occurrence, index) => {
                        return (
                            <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>
            )}
        </Container>
    );
}