https://whiskerbook.org/react/static/js/858.4980d44a.chunk.js

1"use strict";(self.webpackChunkfrontend=self.webpackChunkfrontend||[]).push([[858],{13246(t,e,i){i.d(e,{A:()=>l});i(65043);var n=i(14282),o=i(70989),s=i(53226),a=i(97),r=i(70579);function l(t){let{showModal:e,setShowModal:i,incomplete:l,error:d}=t;const c=(0,a.A)();return(0,r.jsxs)(o.A,{show:e,onHide:()=>i(!1),children:[(0,r.jsx)(o.A.Header,{closeButton:!0,children:(0,r.jsx)(o.A.Title,{children:(0,r.jsx)(s.A,{id:"SUBMISSION_FAILED"})})}),(0,r.jsxs)(o.A.Body,{children:[l&&c.formatMessage({id:"MISSING_REQUIRED_FIELDS"}),d&&(Array.isArray(d)?d:[d]).map((t,e)=>(0,r.jsxs)("div",{className:"d-flex flex-column",children:["INVALID"===t.code&&(0,r.jsxs)("p",{children:[(0,r.jsx)(s.A,{id:"BEERROR_INVALID"}),t.fieldName," "]}),"REQUIRED"===t.code&&(0,r.jsxs)("p",{children:[(0,r.jsx)(s.A,{id:"BEERROR_REQUIRED"}),t.fieldName," "]}),!t.code&&(0,r.jsxs)("p",{children:[(0,r.jsx)(s.A,{id:"BEERROR_UNKNOWN"}),t.fieldName," "]})]},e))]}),(0,r.jsx)(o.A.Footer,{children:(0,r.jsx)(n.A,{variant:"secondary",onClick:()=>i(!1),children:(0,r.jsx)(s.A,{id:"SESSION_CLOSE"})})})]})}},83554(t,e,i){i.d(e,{A:()=>a});var n=i(65043),o=i(53226),s=i(70579);function a(t){var e,i;let{encounterId:a,rect:r,imageData:l}=t;const d=(0,n.useRef)(null),c=(0,n.useRef)(null);return(0,n.useEffect)(()=>{const t=d.current,e=t.getContext("2d"),i=()=>{if(c.current){const i=l.width,o=l.height,s=i/c.current.clientWidth,a=o/c.current.clientHeight;t.width=c.current.clientWidth,t.height=c.current.clientHeight;const d=null===n||void 0===n?void 0:n.parentElement;c&&d&&(d.style.height="".concat(n.clientHeight,"px"));const h={x:r.x/s,y:r.y/a,width:r.width/s,height:r.height/a};e.clearRect(0,0,t.width,t.height),e.strokeStyle="red",e.lineWidth=2;const u=h.x+h.width/2,x=h.y+h.height/2;e.translate(u,x),e.rotate(r.rotation),e.strokeRect(-h.width/2,-h.height/2,h.width,h.height),e.restore()}},n=c.current;return n&&n.complete?i():n&&n.addEventListener("load",i),()=>{n&&n.removeEventListener("load",i)}},[r]),(0,s.jsxs)("div",{className:"annotation-successful mt-5",children:[(0,s.jsx)("h2",{children:(0,s.jsx)(o.A,{id:"ANNOTATION_SAVED"})}),(0,s.jsx)("div",{className:"mt-3",children:(0,s.jsx)(o.A,{id:"ANNOTATION_SAVED_DESC"})}),(0,s.jsxs)("div",{className:"mt-3",children:[(0,s.jsx)(o.A,{id:"ENCOUNTER_ID"}),": ",(0,s.jsx)("a",{href:"/encounters/encounter.jsp?number=".concat(a),children:a})]}),(0,s.jsxs)("div",{className:"image-container mt-3",style:{width:"500px",height:"300px",position:"relative"},children:[(0,s.jsx)("img",{ref:c,style:{width:"100%",height:"auto",display:"block",position:"absolute",top:0,left:0},src:l.url||"https://via.placeholder.com/150",alt:"placeholder"}),(0,s.jsx)("canvas",{ref:d,width:(null===(e=c.current)||void 0===e?void 0:e.clientWidth)||150,height:(null===(i=c.current)||void 0===i?void 0:i.clientHeight)||150,style:{position:"absolute",top:0,left:0,pointerEvents:"none"}})]}),(0,s.jsxs)("div",{className:"mt-3 mb-5",children:[(0,s.jsx)(o.A,{id:"CONTACT_MESSAGE"}),(0,s.jsx)("a",{href:"https://community.wildme.org/",children:"community.wildme.org"})]})]})}},27476(t,e,i){i.d(e,{A:()=>d});var n=i(89379),o=i(80045),s=i(65043),a=i(14282),r=i(70579);const l=["id","link","onClick","disabled","color","backgroundColor","borderColor","shadowColor","type","className","children","style","noArrow","target"];function d(t){let{id:e="button",link:i,onClick:d,disabled:c,color:h="#000000",backgroundColor:u="rgba(255, 255, 255, 0.01)",borderColor:x,shadowColor:m="#000000",type:g="button",className:w="",children:A,style:v,noArrow:p,target:y=!1}=t,f=(0,o.A)(t,l);const[E,j]=(0,s.useState)(!1),N=E?"4px 4px 0px ".concat(m):"1px 2px 0px ".concat(m);return(0,r.jsx)(a.A,(0,n.A)((0,n.A)({id:e,variant:"primary","data-testid":"main-button",onMouseEnter:()=>j(!0),onMouseLeave:()=>j(!1),onClick:d,disabled:c,type:g,className:"d-flex justify-content-center align-items-center ".concat(w),style:(0,n.A)({backgroundColor:c?"gray":u,border:c?"gray":"2px solid ".concat(x||u),color:c?"black":h,margin:"8px",borderRadius:"4.8px",fontWeight:"bold",whiteSpace:"nowrap",boxShadow:N},v)},f),{},{children:(0,r.jsxs)("a",{href:i,target:y?"_blank":"_self",className:"d-flex align-items-center justify-content-center text-decoration-none w-100 h-100",style:{color:"inherit"},children:[A,(0,r.jsx)("span",{className:"ms-2"}),!p&&(0,r.jsx)("i",{className:"bi bi-arrow-right"})]})}))}},10040(t,e,i){i.d(e,{A:()=>r});var n=i(89379),o=i(65043),s=i(47835),a=i(70579);const r=t=>{let{rect:e,imgHeight:i,imgWidth:r,setRect:l,setValue:d,drawStatus:c}=t;const[h,u]=(0,o.useState)({});(0,o.useEffect)(()=>{"DELETE"!==c&&u({x:e.x,y:e.y,width:e.width,height:e.height,fill:null,stroke:"red",strokeWidth:2,draggable:!0,rotation:e.rotation||0})},[e.x,e.y,e.width,e.height,c]);const x=(0,o.useRef)(null),m=(0,o.useRef)(null);(0,o.useEffect)(()=>{e.width>0&&e.height>0&&x.current&&m.current&&(m.current.nodes([x.current]),m.current.getLayer().batchDraw())},[e.width,e.height]);const g=()=>{m.current.nodes([x.current]),m.current.getLayer().batchDraw()};return(0,a.jsx)(s.BI,{width:r,height:i,children:(0,a.jsxs)(s.Wd,{children:[(0,a.jsx)(s.rw,(0,n.A)((0,n.A)({},h),{},{ref:x,onClick:g,onDragStart:g,onDragEnd:()=>{const t=x.current,e={x:t.x(),y:t.y()};u((0,n.A)((0,n.A)({},h),e)),l((0,n.A)((0,n.A)({},h),e))},onTransformEnd:()=>{const t=x.current,i=t.scaleX(),o=t.scaleY(),s=Math.max(5,t.width()*i),a=Math.max(5,t.height()*o),r={x:t.x(),y:t.y(),width:s,height:a,rotation:t.rotation()};u((0,n.A)((0,n.A)({},h),r)),l((0,n.A)((0,n.A)({},e),r)),t.scaleX(1),t.scaleY(1),d(t.rotation())},draggable:!0,strokeScaleEnabled:!1})),(0,a.jsx)(s.Ge,{ref:m,rotateEnabled:!0,resizeEnabled:!0,keepRatio:!1})]})})}},11848(t,e,i){i.d(e,{A:()=>s});var n=i(65043),o=i(79722);

1function s(){const[t,e]=(0,n.useState)(!1),[i,s]=(0,n.useState)(null),[a,r]=(0,n.useState)(!1),[l,d]=(0,n.useState)(null);return{createAnnotation:async t=>{let{encounterId:n,assetId:a,ia:l,viewpoint:c,x:h,y:u,width:x,height:m,rotation:g}=t;e(!0),s(null);try{const t=await o.A.request({method:"post",url:"/api/v3/annotations",data:{encounterId:n,height:m,iaClass:l.value,mediaAssetId:a,theta:g,viewpoint:c.value,width:x,x:h,y:u}});200===t.status&&(r(!0),d(t.data))}catch(i){s(i),i.response&&400===i.response.status&&s(i.response.data.errors)}finally{e(!1)}},loading:t,error:i,submissionDone:a,responseData:l}}},82229(t,e,i){function n(t,e,i){const n=i*Math.PI/180,o=t.width/2,s=t.height/2,a=Math.atan(s/o),r=Math.sqrt(o*o+s*s),l=Math.cos(n+a)*r,d=Math.sin(n+a)*r,c=t.x+l,h=t.y+d-s;return{x:(c-o)*e.x,y:h*e.y,width:t.width*e.x,height:t.height*e.y,rotation:n}}i.d(e,{A:()=>n})},37114(t,e,i){function n(t,e,i,n){return{x:t/i,y:e/n}}i.d(e,{A:()=>n})},12858(t,e,i){i.r(e),i.d(e,{default:()=>f});var n=i(89379),o=i(65043),s=i(2364),a=i(67006),r=i(53226),l=i(53519),d=i(27476),c=i(67285),h=i(10040),u=i(48852),x=i(35475),m=i(83554),g=i(11848),w=i(82229),A=i(37114),v=i(13246),p=i(79722),y=i(70579);function f(){var t,e,i;const[f]=(0,x.ok)(),E=f.get("assetId"),j=f.get("encounterId"),N=f.get("annotationId"),b=(0,o.useContext)(c.A),I=(0,o.useRef)(null),S=(0,o.useRef)(null),[C,R]=(0,o.useState)(0),[D,T]=(0,o.useState)(!1),[k,L]=(0,o.useState)({width:0,height:0,url:"",annotations:[]}),M=f.get("annotation"),O=JSON.parse(decodeURIComponent(M||"null"))||null,[W,_]=(0,o.useState)(!1),{createAnnotation:F,loading:B,error:H,submissionDone:P,responseData:V}=(0,g.A)(),[G,U]=(0,o.useState)(!1),[X,Y]=(0,o.useState)(null),[Q,q]=(0,o.useState)(null!==O&&void 0!==O&&O.iaClass?{value:O.iaClass,label:O.iaClass}:null),[z,J]=(0,o.useState)(null!==O&&void 0!==O&&O.viewpoint?{value:O.viewpoint,label:O.viewpoint}:null),[K,Z]=(0,o.useState)(!1),[$,tt]=(0,o.useState)("DRAW"),[et,it]=(0,o.useState)(null),[nt,ot]=(0,o.useState)(!0),[st,at]=(0,o.useState)(""),[rt,lt]=(0,o.useState)({x:0,y:0,width:0,height:0,rotation:0}),{data:dt}=(0,u.y)(),[ct,ht]=(0,o.useState)(null),[ut,xt]=(0,o.useState)(!1),mt=(null===dt||void 0===dt?void 0:dt.iaClassesForTaxonomy)||{},gt=null===dt||void 0===dt||null===(t=dt.annotationViewpoint)||void 0===t?void 0:t.map(t=>({value:t,label:t}));(0,o.useEffect)(()=>{var t,e;if(!(!W&&O&&ut&&X&&Number.isFinite(X.x)&&Number.isFinite(X.y)))return;const i=X;let n=O.x/(i.x||1),o=O.y/(i.y||1),s=O.width/(i.x||1),a=O.height/(i.y||1);if(ct){const t=k.width,e=k.height,i=e/t,r=t/e;n/=i,s/=i,o/=r,a/=r}const r=180*(null!==(t=null!==(e=O.theta)&&void 0!==e?e:O.rotation)&&void 0!==t?t:0)/Math.PI,l=s/2,d=a/2,c=n+l,h=o+d,u=r*Math.PI/180,x=Math.cos(u)*l-Math.sin(u)*d,m=Math.sin(u)*l+Math.cos(u)*d;lt({x:c-x,y:h-m,width:s,height:a,rotation:r}),R(r),_(!0)},[O,null===X||void 0===X?void 0:X.x,null===X||void 0===X?void 0:X.y,ut,W,ct]),(0,o.useEffect)(()=>{K?tt("DRAWING"):rt.width>0&&rt.height>0?tt("DELETE"):tt("DRAW")},[K,rt]),(0,o.useEffect)(()=>{H&&U(!0)},[H]),(0,o.useEffect)(()=>{const t=()=>{if(I.current&&k.width&&k.height){const t=(0,A.A)(k.width,k.height,I.current.clientWidth,I.current.clientHeight);Y(t),xt(!0);const e=S.current,i=e.getContext("2d");e.width=I.current.clientWidth,e.height=I.current.clientHeight,i.clearRect(0,0,e.width,e.height);const n=k.annotations.filter(t=>!t.trivial).filter(t=>t.encounterId===j&&t.id!==N);for(const o of n){const{x:e,y:n,width:s,height:a,theta:r}=o,l={x:e/t.x,y:n/t.y,width:s/t.x,height:a/t.y};if(ct){const t=k.width,e=k.height,i=e/t,n=t/e;l.x/=i,l.width/=i,l.y/=n,l.height/=n}const d=l.x+l.width/2,c=l.y+l.height/2;i.save(),i.translate(d,c),i.rotate(r),i.strokeStyle="yellow",i.lineWidth=1,i.strokeRect(-l.width/2,-l.height/2,l.width,l.height),i.restore()}}},e=I.current;return e&&e.complete?t():e&&e.addEventListener("load",t),()=>{e&&e.removeEventListener("load",t)}},[k]),(0,o.useEffect)(()=>{if(E&&j&&dt){const t=async()=>{await(async()=>{ot(!0);try{var t;const e=await fetch("/api/v3/media-assets/".concat(E)),i=await e.json();L(i),ht(i.rotationInfo||null);const n=(null===(t=i.annotations)||void 0===t?void 0:t.find(t=>t.encounterId===j))||{},o=mt[null===n||void 0===n?void 0:n.encounterTaxonomy]||[];at(null===n||void 0===n?void 0:n.encounterTaxonomy),it(o.map(t=>({value:t,label:t}))),ot(!1)}catch(H){alert("Error fetching media assets",H),ot(!1)}})()};t()}},[E,j,null===dt||void 0===dt?void 0:dt.iaClassesForTaxonomy]),(0,o.useEffect)(()=>{const t=()=>Z(!1);window.addEventListener("mouseup",t);const e=t=>{"Delete"===t.key&&lt({x:0,y:0,width:0,height:0,rotation:0})};return window.addEventListener("keydown",e),()=>{window.removeEventListener("mouseup",t),window.removeEventListener("keydown",e)}},[]),(0,o.useEffect)(()=>

1{if(O){if(gt&&O.viewpoint){gt.some(t=>t.value===O.viewpoint)||(console.warn("Invalid viewpoint: ".concat(O.viewpoint)),J(null))}if(et&&O.iaClass){et.some(t=>t.value===O.iaClass)||(console.warn("Invalid IA class: ".concat(O.iaClass)),q(null))}}},[gt,et,O]);return(0,y.jsx)(l.A,{children:P?(0,y.jsx)(m.A,{annotationId:null===V||void 0===V?void 0:V.id,encounterId:j,rect:(0,w.A)(rt,X,C),imageData:k}):(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)("h4",{className:"mt-3 mb-3",children:(0,y.jsx)(r.A,{id:"EDIT_ANNOTATIONS",defaultMessage:"Edit Annotations"})}),(0,y.jsxs)(a.A,{className:"d-flex flex-row",children:[(0,y.jsxs)(a.A.Group,{controlId:"formBasicEmail",className:"me-3",children:[(0,y.jsxs)(a.A.Label,{children:[(0,y.jsx)(r.A,{id:"FILTER_IA_CLASS"}),"*"]}),(0,y.jsx)(s.Ay,{options:et,className:"basic-multi-select",classNamePrefix:"select",menuPlacement:"auto",menuPortalTarget:document.body,value:Q,styles:{container:t=>(0,n.A)((0,n.A)({},t),{},{width:"200px"})},onChange:t=>{q(t)}}),!nt&&!st&&(0,y.jsx)("div",{className:"text-danger",style:{maxWidth:"200px",nowrap:"break-word"},children:(0,y.jsx)(r.A,{id:"NO_TAXONOMY"})}),!nt&&st&&0===et.length&&(0,y.jsx)("div",{className:"text-danger",style:{maxWidth:"200px",nowrap:"break-word"},children:(0,y.jsx)(r.A,{id:"NO_IA_CLASS"})})]}),(0,y.jsxs)(a.A.Group,{controlId:"formBasicEmail",children:[(0,y.jsxs)(a.A.Label,{children:[(0,y.jsx)(r.A,{id:"FILTER_VIEWPOINT"}),"*"]}),(0,y.jsx)(s.Ay,{options:gt,className:"basic-multi-select",classNamePrefix:"select",menuPlacement:"auto",menuPortalTarget:document.body,value:z,styles:{container:t=>(0,n.A)((0,n.A)({},t),{},{width:"200px"})},onChange:t=>{J(t)}})]})]}),(0,y.jsxs)("div",{className:"d-flex flex-column",style:{maxWidth:"100%",height:"auto",padding:"1em",marginTop:"1em",borderRadius:"10px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.2)"},children:[(0,y.jsxs)("div",{className:"d-flex justify-content-between",children:[(0,y.jsx)("h6",{children:(0,y.jsx)(r.A,{id:"DRAW_ANNOTATION"})}),(0,y.jsxs)("div",{style:{cursor:"pointer",color:b.primaryColors.primary500},onClick:()=>{"DELETE"===$?lt({x:0,y:0,width:0,height:0}):"DRAW"===$&&tt("DRAWING")},children:[(0,y.jsx)(r.A,{id:$}),"DELETE"===$&&(0,y.jsx)("i",{className:"bi bi-trash ms-2"})]})]}),(0,y.jsxs)("div",{id:"image-container",onMouseDown:t=>

1{if(!I.current||"DELETE"===$)return;const{left:e,top:i}=I.current.getBoundingClientRect();lt({x:t.clientX-e,y:t.clientY-i,width:0,height:0,rotation:0}),R(0),Z(!0)},onMouseMove:t=>{if(!I.current||"DELETE"===$)return;const{left:e,top:i}=I.current.getBoundingClientRect(),o=t.clientX-e,s=t.clientY-i;K&&lt(t=>(0,n.A)((0,n.A)({},t),{},{width:o-t.x,height:s-t.y,rotation:C}))},onMouseUp:()=>{I.current&&"DELETE"!==$&&(lt(t=>function(t){let{x:e,y:i,width:n,height:o}=t;return n<0&&(e+=n,n=-n),o<0&&(i+=o,o=-o),{x:e,y:i,width:n,height:o}}(t)),Z(!1))},style:{width:"100%",marginTop:"1rem",position:"relative"},children:[(0,y.jsx)("img",{ref:I,src:k.url,alt:"annotationimages",style:{width:"100%",height:"auto",objectFit:"contain",position:"absolute",top:0,left:0}}),(0,y.jsx)(h.A,{rect:rt,imgHeight:null===(e=I.current)||void 0===e?void 0:e.height,imgWidth:null===(i=I.current)||void 0===i?void 0:i.width,setRect:lt,value:C,setValue:R,drawStatus:$,scaleFactor:X}),(0,y.jsx)("canvas",{ref:S,width:150,height:150,style:{position:"absolute",top:0,left:0,pointerEvents:"none"}})]})]}),(0,y.jsxs)(d.A,{noArrow:!0,style:{marginTop:"1em"},backgroundColor:b.primaryColors.primary500,borderColor:b.primaryColors.primary500,color:b.defaultColors.white,loading:B,onClick:async()=>

1{try{if(!(Q&&z&&rt.width&&rt.height))return U(!0),void T(!0);{T(!1);let{x:t,y:e,width:i,height:n,rotation:o}=(0,w.A)(rt,X,C);if(ct){const o=k.width,s=k.height,a=s/o,r=o/s;t*=a,i*=a,e*=r,n*=r}200===(await p.A.patch("/api/v3/encounters/".concat(j),[{op:"remove",path:"annotations",value:N}])).status?await F({encounterId:j,assetId:E,ia:Q,viewpoint:z,x:t,y:e,width:i,height:n,rotation:o}):alert("Error editing annotation")}}catch(H){alert("Error editing annotation",H),U(!0)}},children:[(0,y.jsx)(r.A,{id:"SAVE_ANNOTATION"}),B&&(0,y.jsx)("div",{className:"spinner-border spinner-border-sm ms-1",role:"status",children:(0,y.jsx)("span",{className:"visually-hidden",children:(0,y.jsx)(r.A,{id:"LOADING"})})})]}),(0,y.jsx)(v.A,{showModal:G,setShowModal:U,incomplete:D,error:H})]})})}}}]);
2//# sourceMappingURL=858.4980d44a.chunk.js.map