lost-sia/dist/InfoBoxes/AnnoDetails.js

Single Image Annotation Tool

import{jsx as n,jsxs as l}from"react/jsx-runtime";import{useState as m,useRef as S,useEffect as d}from"react";import{List as a,Form as M,TextArea as w,Label as u,Icon as B}from"semantic-ui-react";import N from"./InfoBox.js";import y from"../SiaPopup.js";const O=e=>{const[c,i]=m(""),[A,F]=m(!1),[b,s]=m(!1),r=S();d(()=>{e.anno&&(e.anno.comment?i(e.anno.comment):i(""))},[e.anno]),d(()=>{r.current&&r.current.focus()},[e.commentInputTrigger]);const k=()=>{e.onDismiss&&e.onDismiss()},x=()=>{e.onCommentUpdate&&e.onCommentUpdate(c),s(!1)},h=()=>{e.onMarkExample&&e.onMarkExample(e.anno)},g=()=>{if(b)return n(u,{as:"a",corner:"right",icon:"save",color:"red"})},v=()=>n("div",{children:l(M,{onClick:()=>{},children:[g(),n(w,{placeholder:"Write a comment",ref:r,value:c,rows:2,onBlur:()=>x(),onFocus:()=>s(!0),onChange:o=>i(o.target.value)})]})}),D=()=>{if(e.anno){if(!e.anno.labelIds)return"No Label";let t="";return e.anno.labelIds.forEach((f,L)=>{const C=e.possibleLabels.find(E=>E.id===f);L>0&&(t+=", "),t+=C.label}),t||"No Label"}else return"No Label"},I=()=>{if(!e.allowedToMarkExample)return null;let o="grey",t="bookmark outline";return e.anno&&e.anno.isExample&&(o="yellow",t="bookmark"),n(y,{content:"Mark this annotation as example for other annotators",trigger:n(u,{as:"a",color:o,style:{opacity:.8},size:"medium",corner:"left",onClick:()=>{h()},children:n(B,{name:t})})})};return n(N,{header:"Annotation Details",content:e.anno?l("div",{children:[I(),l(a,{children:[n(a.Item,{icon:"at",content:e.anno.id}),n(a.Item,{icon:"tag",content:D()}),n(a.Item,{icon:"time",content:`${e.anno.annoTime.toLocaleString("us",{minimumFractionDigits:2,maximumFractionDigits:2})} seconds`})]}),v()]}):"No annotation selected!",visible:e.visible,defaultPos:e.defaultPos,onDismiss:o=>k()})};export{O as default};