lost-sia/src/InfoBoxes/AnnoDetails.jsx

Single Image Annotation Tool

import React, { useState, useEffect, useRef } from "react";
import { List, TextArea, Form, Label, Icon } from "semantic-ui-react";
import InfoBox from "./InfoBox";
import PopUp from "../SiaPopup";

const AnnoDetails = (props) => {
  const [comment, setComment] = useState("");
  const [example, setExample] = useState(false);
  const [showSaveBtn, setShowSaveBtn] = useState(false);
  const tARef = useRef();
  useEffect(() => {
    if (props.anno) {
      if (props.anno.comment) {
        setComment(props.anno.comment);
      } else {
        setComment("");
      }
    }
  }, [props.anno]);

  useEffect(() => {
    if (tARef.current) {
      tARef.current.focus();
    }
  }, [props.commentInputTrigger]);

  const onDismiss = () => {
    if (props.onDismiss) {
      props.onDismiss();
    }
  };

  const onCommentUpdate = () => {
    if (props.onCommentUpdate) {
      props.onCommentUpdate(comment);
    }
    setShowSaveBtn(false);
  };

  const onMarkExampleClick = () => {
    // setExample(!example)
    if (props.onMarkExample) {
      props.onMarkExample(props.anno);
    }
  };

  const renderSaveBtn = () => {
    if (showSaveBtn) {
      return <Label as="a" corner="right" icon="save" color="red"></Label>;
    }
  };

  const renderComment = () => {
    return (
      <div>
        <Form onClick={() => {}}>
          {renderSaveBtn()}
          <TextArea
            placeholder="Write a comment"
            ref={tARef}
            value={comment}
            rows={2}
            onBlur={() => onCommentUpdate()}
            onFocus={() => setShowSaveBtn(true)}
            onChange={(e) => setComment(e.target.value)}
          ></TextArea>
        </Form>
      </div>
    );
  };
  const renderLabels = () => {
    if (props.anno) {
      const selectedLabelIds = props.anno.labelIds;
      if (!selectedLabelIds) return "No Label";

      let lbls = "";
      props.anno.labelIds.forEach((lbl, idx) => {
        const labelObject = props.possibleLabels.find((el) => {
          return el.id === lbl;
        });
        if (idx > 0) lbls += ", ";
        lbls += labelObject.label;
      });
      if (!lbls) return "No Label";
      return lbls;
    } else {
      return "No Label";
    }
  };

  const renderExampleMark = () => {
    if (!props.allowedToMarkExample) return null;
    let color = "grey";
    let iconName = "bookmark outline";
    if (props.anno) {
      if (props.anno.isExample) {
        color = "yellow";
        iconName = "bookmark";
      }
    }
    const mark = (
      <Label
        as="a"
        color={color}
        style={{ opacity: 0.8 }}
        size="medium"
        corner="left"
        onClick={() => {
          onMarkExampleClick();
        }}
      >
        <Icon name={iconName} />
      </Label>
    );
    return (
      <PopUp
        content="Mark this annotation as example for other annotators"
        trigger={mark}
      />
    );
  };

  const renderDescription = () => {
    if (props.anno) {
      return (
        <div>
          {renderExampleMark()}
          {/* <Header> 
                            Labels
                        </Header>
                        <div>
                            {renderLabels()}
                        </div> */}
          <List>
            <List.Item icon="at" content={props.anno.id} />
            <List.Item icon="tag" content={renderLabels()} />
            <List.Item
              icon="time"
              content={`${props.anno.annoTime.toLocaleString("us", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })} seconds`}
            />
            {/* <List.Item icon='time' content={props.anno.annoTime} /> */}
          </List>
          {renderComment()}
        </div>
      );
    } else {
      return "No annotation selected!";
    }
  };

  return (
    <InfoBox
      header={"Annotation Details"}
      content={renderDescription()}
      visible={props.visible}
      defaultPos={props.defaultPos}
      onDismiss={(e) => onDismiss()}
    />
  );
};

export default AnnoDetails;