aswi20220x00-gitlab/webapp/components/annotation/annotationPanel.tsx @ 34e9f2d3

import { Stack } from 'react-bootstrap';
import { AnnotationItem } from './annotationItem';
import { Occurrence, Tag } from '../models/tag';
import { useContext } from 'react';
import { AnnotationContext } from '../../contexts/AnnotationContext';

type AnnotationPanelProps = {
    tags: Tag[];
    onAddOccurrence: (tag: Tag) => void;
    onDeleteOccurrence: (occurrence: Occurrence) => void;
    onChangeVisibility: (tag: Tag) => void;
    onChangePosition: (occurrence: Occurrence, newValue: number) => void;
    onChangeLength: (occurrence: Occurrence, newValue: number) => void;
};

/**
 * Creates a panel in the annotation screen that contains a list of annotations.
 * @returns Panel with a list of annotations.
 */
export function AnnotationPanel(props: AnnotationPanelProps) {
    const { tags } = useContext(AnnotationContext);

    return (
        <div>
            <p>Panel with a list of annotations</p>
            <Stack>
                {props.tags.map((tag, index) => {
                    return (
                        <AnnotationItem
                            key={index}
                            tag={tag}
                            onAddOccurrence={props.onAddOccurrence}
                            onDeleteOccurrence={props.onDeleteOccurrence}
                            onChangeVisibility={props.onChangeVisibility}
                            onChangePosition={props.onChangePosition}
                            onChangeLength={props.onChangeLength}
                        />
                    );
                })}
            </Stack>
        </div>
    );
}