aswi20220x00-gitlab/webapp/components/annotation/AnnotationItem.tsx @ 8c9ce202

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,
    EyeOutlined,
} from '@ant-design/icons';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { ETagSentiment, TagInstanceInfo } from '../../api';
import { getTextMaxLength } from '../../utils/strings';

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 }) {
    /**
     * Should properties of this annotation be visible?
     */
    const [visibleProperties, setVisibleProperties] = useState(false);

    /**
     * Context that manages annotations.
     */
    const {
        addOccurrence,
        deleteOccurrence,
        changePosition,
        changeNote,
        changeSentiment,
        changeLength,
        selectedOccurrenceId,
        selectedInstanceId,
        setSelectedOccurrenceId,
        setSelectedInstanceId,
    } = 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);
    };

    const onChangeNote =
        (occurrence: TagInstanceInfo) => (e: ChangeEvent<HTMLTextAreaElement>) => {
            changeNote(occurrence, e.currentTarget.value);
        };

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

    return (
        <Container>
            <Row
                className="border rounded"
                style={{
                    backgroundColor:
                        selectedInstanceId === props.tag.instanceId ? '#FCF3CF' : 'white',
                }}
            >
                <Col sm="auto" className="d-flex align-items-center">
                    <Button
                        icon={<TagOutlined style={{ marginLeft: 0 }} />}
                        onClick={() => {
                            setSelectedInstanceId(props.tag.instanceId);
                            setSelectedOccurrenceId(null);
                        }}
                        style={{
                            border: 'none',
                            paddingLeft: 0,
                            backgroundColor:
                                selectedInstanceId === props.tag.instanceId
                                    ? '#FCF3CF'
                                    : 'white',
                        }}
                        title={'Zvýraznit značky'}
                    />
                </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"
                                style={{
                                    backgroundColor:
                                        selectedOccurrenceId === occurrence.occurenceId
                                            ? '#D8E1E9'
                                            : 'white',
                                }}
                            >
                                <Row className="mb-1 mt-1">
                                    <Col>
                                        <Row>
                                            <Col>Pozice: {occurrence.position}</Col>
                                            <Col>Délka: {occurrence.length}</Col>
                                        </Row>
                                        <Row>
                                            <i title={occurrence.selectedText ?? ''}>
                                                {getTextMaxLength(
                                                    occurrence.selectedText ?? '',
                                                    35
                                                )}
                                            </i>
                                        </Row>
                                        <Row>
                                            <Col
                                                className="d-flex align-items-center"
                                                sm="4"
                                            >
                                                Poznámka:
                                            </Col>
                                            <Col>
                                                <Input.TextArea
                                                    defaultValue={occurrence.note ?? ''}
                                                    onBlur={onChangeNote(occurrence)}
                                                    rows={1}
                                                />
                                            </Col>
                                        </Row>
                                        {occurrence.sentiment && (
                                            <Row>
                                                <Col
                                                    className="d-flex align-items-center"
                                                    sm="4"
                                                >
                                                    Sentiment:
                                                </Col>
                                                <Col>
                                                    <Select
                                                        defaultValue={
                                                            occurrence.sentiment
                                                        }
                                                        style={{ width: '100%' }}
                                                        onChange={onChangeSentiment(
                                                            occurrence
                                                        )}
                                                    >
                                                        <Option
                                                            value={ETagSentiment.Positive}
                                                        >
                                                            <span
                                                                style={{ color: 'green' }}
                                                            >
                                                                Pozitivní
                                                            </span>
                                                        </Option>
                                                        <Option
                                                            value={ETagSentiment.Neutral}
                                                        >
                                                            Neutrální
                                                        </Option>
                                                        <Option
                                                            value={ETagSentiment.Negative}
                                                        >
                                                            <span
                                                                style={{
                                                                    color: '#ff4d4f',
                                                                }}
                                                            >
                                                                Negativní
                                                            </span>
                                                        </Option>
                                                    </Select>
                                                </Col>
                                            </Row>
                                        )}
                                    </Col>
                                    <Col
                                        sm="auto"
                                        className="d-flex align-items-center flex-column justify-content-sm-evenly"
                                    >
                                        <Button
                                            icon={<EyeOutlined />}
                                            onClick={() => {
                                                setSelectedOccurrenceId(
                                                    occurrence.occurenceId ?? null
                                                );
                                                setSelectedInstanceId(
                                                    props.tag.instanceId
                                                );
                                            }}
                                            title={'Zvýraznit výskyt'}
                                        />
                                        <Button
                                            icon={<DeleteOutlined />}
                                            onClick={onDeleteOccurrence(occurrence)}
                                            danger
                                        />
                                    </Col>
                                </Row>
                            </Container>
                        );
                    })}
                </Stack>
            )}
        </Container>
    );
}