aswi20220x00-gitlab/webapp/pages/annotation/index.tsx @ 34e9f2d3

import { AnnotationPanel } from '../../components/annotation/annotationPanel';
import { DocumentAnnotationView } from '../../components/annotation/documentAnnotationView';
import { TagPanel } from '../../components/annotation/tagPanel';
import { MainLayout } from '../../layouts/mainLayout';
import 'antd/dist/antd.css';
import styles from '/styles/annotation.module.scss';
import { Occurrence, Tag } from '../../components/models/tag';
import AnnotationProvider from '../../contexts/AnnotationContext';

/**
 * Creates an annotation screen.
 * @returns The annotation screen.
 */
function Annotation() {
    const tags = [
        {
            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 addOccurrence = () => {};

    const changeVisibility = (tag: Tag) => {};

    const deleteOccurrence = (occurrence: Occurrence) => {};

    const changePosition = (occurrence: Occurrence, newValue: number) => {};

    const changeLength = (occurrence: Occurrence, newValue: number) => {};

    return (
        <AnnotationProvider>
            <MainLayout>
                <div className={styles.layoutwrapper}>
                    <div className={styles.tags}>
                        <TagPanel />
                    </div>
                    <div className={styles.document}>
                        <DocumentAnnotationView />
                    </div>
                    <div className={styles.annotations}>
                        <AnnotationPanel
                            tags={tags}
                            onAddOccurrence={addOccurrence}
                            onChangeVisibility={changeVisibility}
                            onDeleteOccurrence={deleteOccurrence}
                            onChangePosition={changePosition}
                            onChangeLength={changeLength}
                        />
                    </div>
                </div>
            </MainLayout>
        </AnnotationProvider>
    );
}

export default Annotation;