Revize 4e91ed40

Annotation panel events

Added events that propagate changes between panels in the annotation view

webapp/components/annotation/annotationItem.tsx

@@ -1 @@
-import { Row } from 'react-bootstrap';
+import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { Occurrence, Tag } from '../models/tag';
-import { useState } from 'react';
+import { ChangeEvent, ChangeEventHandler, useState } from 'react';
 
 import 'antd/dist/antd.css';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import {
     PlusOutlined,
     EyeOutlined,
@@ -11 +11 @@
     DeleteOutlined,
 } from '@ant-design/icons';
 
-function AnnotationItem(tag: Tag) {
+type AnnotationItemProps = {
+    tag: 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;
+};
+
+export function AnnotationItem(props: AnnotationItemProps) {
     const [visibleProperties, setVisibleProperties] = useState(false);
-    const [visible, setVisible] = useState(true);
 
-    const addOccurrence = () => {};
+    const addOccurrence = () => {
+        props.onAddOccurrence(props.tag);
+    };
 
-    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {};
+    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {
+        props.onDeleteOccurrence(occurrence);
+    };
 
-    const changeVisibility = () => {};
+    const changeVisibility = () => {
+        props.onChangeVisibility(props.tag);
+    };
 
-    const changePropertiesVisiblity = () => {
+    const changePropertiesVisibility = () => {
         setVisibleProperties(!visibleProperties);
     };
 
+    const changePosition =
+        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+            props.onChangePosition(occurrence, Number(e.currentTarget.value));
+        };
+
+    const changeLength =
+        (occurrence: Occurrence) => (e: ChangeEvent<HTMLInputElement>) => {
+            props.onChangeLength(occurrence, Number(e.currentTarget.value));
+        };
+
     return (
         <div>
             <Row>
-                {tag.name}
-                <Button
-                    type="text"
-                    shape="circle"
-                    icon={<PlusOutlined />}
-                    onClick={addOccurrence}
-                />
-                <Button
-                    type="text"
-                    shape="circle"
-                    icon={<EyeOutlined />}
-                    onClick={changeVisibility}
-                />
-                <Button
-                    type="text"
-                    shape="circle"
-                    icon={<DownOutlined />}
-                    onClick={changePropertiesVisiblity}
-                />
+                <Col className="d-flex align-items-center">{props.tag.name}</Col>
+                <Col sm="auto">
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<PlusOutlined />}
+                        onClick={addOccurrence}
+                    />
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<EyeOutlined />}
+                        onClick={changeVisibility}
+                    />
+                    <Button
+                        type="text"
+                        shape="circle"
+                        icon={<DownOutlined />}
+                        onClick={changePropertiesVisibility}
+                    />
+                </Col>
             </Row>
             {visibleProperties && (
-                <Row>
-                    {tag.category}
-                    Výskyty
-                    {tag.occurrences.map((occurrence, index) => {
+                <Stack>
+                    <div>Kategorie: {props.tag.category}</div>
+                    <div>Výskyty:</div>
+                    {props.tag.occurrences.map((occurrence, index) => {
                         return (
-                            <div key={index}>
-                                {occurrence.position}
-                                {occurrence.length}
-                                <Button
-                                    icon={<DeleteOutlined />}
-                                    onClick={deleteOccurrence(occurrence)}
-                                ></Button>
+                            <div key={index} id={props.tag.name + index}>
+                                <Container>
+                                    <Row>
+                                        <Col>
+                                            <Row>
+                                                Pozice:
+                                                <Input
+                                                    value={occurrence.position}
+                                                    onChange={changePosition(occurrence)}
+                                                />
+                                            </Row>
+                                            <Row>
+                                                Délka:
+                                                <Input
+                                                    value={occurrence.length}
+                                                    onChange={changeLength(occurrence)}
+                                                />
+                                            </Row>
+                                        </Col>
+                                        <Col
+                                            sm="auto"
+                                            className="d-flex align-items-center"
+                                        >
+                                            <Button
+                                                icon={<DeleteOutlined />}
+                                                onClick={deleteOccurrence(occurrence)}
+                                            ></Button>
+                                        </Col>
+                                    </Row>
+                                </Container>
                             </div>
                         );
                     })}
-                </Row>
+                </Stack>
             )}
         </div>
     );
 }
-
-export default AnnotationItem;

webapp/components/annotation/annotationPanel.tsx

@@ -1 @@
-import AnnotationItem from './annotationItem';
+import { Stack } from 'react-bootstrap';
+import { AnnotationItem } from './annotationItem';
+import { Occurrence, Tag } from '../models/tag';
+
+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() {
+export function AnnotationPanel(props: AnnotationPanelProps) {
     return (
         <div>
             <p>Panel with a list of annotations</p>
-            <AnnotationItem name={'tag a'} category={'kategorie 1'} occurrences={[]} />
-            <AnnotationItem name={'tag b'} category={'kategorie 2'} occurrences={[]} />
+            <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>
     );
 }

webapp/components/models/tag.tsx

@@ -1 @@
-import internal from 'stream';
-
 export type Tag = {
     name: string;
     category: string;
+    visible: boolean;
     occurrences: Occurrence[];
 };