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

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, Select } from 'antd';
import {
    PlusOutlined,
    DownOutlined,
    DeleteOutlined,
    TagOutlined,
} from '@ant-design/icons';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { ETagSentiment, TagInstanceInfo } from '../../api';

const { Option } = Select;

/**
 * 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 }) {
    const { markSelectedText } = useContext(AnnotationContext);

    /**
     * Should properties of this annotation be visible?
     */
    const [visibleProperties, setVisibleProperties] = useState(false);

    /**
     * Context that manages annotations.
     */
    const {
        addOccurrence,
        deleteOccurrence,
        changePosition,
        changeSentiment,
        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 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));
        };

    const onChangeSentiment = (occurrence: TagInstanceInfo) => (val: ETagSentiment) => {
        changeSentiment(occurrence, val);
    };

    /**
     * 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.tagName}
                    {props.tag.subtagName ? ' (' + props.tag.subtagName + ')' : ''}
                </Col>
                <Col sm="auto">
                    <Button
                        type="text"
                        shape="circle"
                        icon={<PlusOutlined />}
                        onClick={onAddOccurrence}
                    />
                    <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 pb-1 pt-1">
                                <Row>
                                    <Col>
                                        <Row>
                                            <Col
                                                className="d-flex align-items-center"
                                                sm="4"
                                            >
                                                Pozice:
                                            </Col>
                                            <Col>
                                                <Input
                                                    value={occurrence.position}
                                                    onChange={onChangePosition(
                                                        occurrence
                                                    )}
                                                />
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col
                                                className="d-flex align-items-center"
                                                sm="4"
                                            >
                                                Délka:
                                            </Col>
                                            <Col>
                                                <Input
                                                    value={occurrence.length}
                                                    onChange={onChangeLength(occurrence)}
                                                />
                                            </Col>
                                        </Row>
                                        {occurrence.sentiment && (
                                            <Row>
                                                <Col
                                                    className="d-flex align-items-center"
                                                    sm="4"
                                                >
                                                    Sentiment:
                                                </Col>
                                                <Col>
                                                    <Select
                                                        value={occurrence.sentiment}
                                                        style={{ width: '100%' }}
                                                        onChange={onChangeSentiment(
                                                            occurrence
                                                        )}
                                                    >
                                                        <Option
                                                            value={ETagSentiment.Positive}
                                                        >
                                                            Pozitivní
                                                        </Option>
                                                        <Option
                                                            value={ETagSentiment.Neutral}
                                                        >
                                                            Neutrální
                                                        </Option>
                                                        <Option
                                                            value={ETagSentiment.Negative}
                                                        >
                                                            Negativní
                                                        </Option>
                                                    </Select>
                                                </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>
    );
}