"use strict";(globalThis.webpackChunk_jbrowse_web=globalThis.webpackChunk_jbrowse_web||[]).push([[4753],{44753:(e,t,n)=>{n.r(t),n.d(t,{default:()=>p});var o=n(7552),a=n(75785),r=n(68446),i=n(49823),s=n(99546),c=n(42489),l=n(30385);function f({model:e,onClose:t,anchorEl:n}){const a=(0,s.getContainingView)(e),{clientX:r,clientY:c,feature:l}=n;return o.createElement(i.Menu,{onMenuItemClick:(e,n)=>{n(e),t()},anchorEl:{nodeType:1,getBoundingClientRect:()=>({top:c,left:r,bottom:c,right:r,width:0,height:0,x:r,y:c,toJSON(){}})},onClose:t,open:Boolean(n),menuItems:[{label:"Center on feature",onClick:()=>{const{f:t}=l,n=t.get("start"),o=t.get("end"),r=t.get("refName"),i=t.get("mate");a.views[0].navToLocString(`${r}:${n}-${o}`).catch((t=>{console.error(t),(0,s.getSession)(e).notifyError(`${t}`,t)})),a.views[1].navToLocString(`${i.refName}:${i.start}-${i.end}`).catch((t=>{console.error(t),(0,s.getSession)(e).notifyError(`${t}`,t)}))}}]})}var u=n(79610);const d=(0,o.lazy)((()=>n.e(7831).then(n.bind(n,47831)))),g=(0,a.n9)()({pix:{imageRendering:"pixelated",pointerEvents:"none",visibility:"hidden",position:"absolute"},rel:{position:"relative"},abs:{position:"absolute"},none:{pointEvents:"none"}}),h=(0,r.observer)((function({model:e}){const{classes:t,cx:n}=g(),a=(0,o.useRef)(0),r=(0,o.useRef)(),i=(0,s.getContainingView)(e),h=i.middleComparativeHeight,m=i.width,v=(0,o.useRef)(0),b=(0,o.useRef)(),[C,p]=(0,o.useState)(),[M,x]=(0,o.useState)(""),[w,k]=(0,o.useState)(),[S,T]=(0,o.useState)(),[E,P]=(0,o.useState)(),[$,y]=(0,o.useState)(),{mouseoverId:I}=e,X=(0,o.useCallback)((t=>{e.setMouseoverCanvasRef(t)}),[e,h,m]),R=(0,o.useCallback)((t=>{function n(e){if(e.preventDefault(),e.ctrlKey){v.current+=e.deltaY/500;for(const e of i.views)e.setScaleFactor(v.current<0?1-v.current:1/(1+v.current));b.current&&clearTimeout(b.current),b.current=setTimeout((()=>{for(const n of i.views)n.setScaleFactor(1),n.zoomTo(v.current>0?n.bpPerPx*(1+v.current):n.bpPerPx/(1-v.current),e.clientX-(t?.getBoundingClientRect().left||0));v.current=0}),300)}else Math.abs(e.deltaY)<Math.abs(e.deltaX)&&(a.current+=e.deltaX/2),void 0===r.current&&(r.current=requestAnimationFrame((()=>{(0,c.transaction)((()=>{for(const e of i.views)e.horizontalScroll(a.current);a.current=0,r.current=void 0}))})))}return e.setMainCanvasRef(t),t?.addEventListener("wheel",n),()=>{t?.removeEventListener("wheel",n)}}),[e,h,m]),L=(0,o.useCallback)((t=>{e.setClickMapCanvasRef(t)}),[e,h,m]),N=(0,o.useCallback)((t=>{e.setCigarClickMapCanvasRef(t)}),[e,h,m]);return o.createElement("div",{className:t.rel},o.createElement("canvas",{ref:X,width:m,height:h,className:n(t.abs,t.none)}),o.createElement("canvas",{ref:R,onMouseMove:t=>{if(void 0!==S)a.current+=S-t.clientX,T(t.clientX),void 0===r.current&&(r.current=requestAnimationFrame((()=>{(0,c.transaction)((()=>{for(const e of i.views)e.horizontalScroll(a.current);a.current=0,r.current=void 0}))})));else{const n=e.clickMapCanvas,o=e.cigarClickMapCanvas;if(!n||!o)return;const a=n.getBoundingClientRect(),r=n.getContext("2d"),i=o.getContext("2d");if(!r||!i)return;const{clientX:s,clientY:c}=t,f=s-a.left,d=c-a.top;k(s),y(c);const[g,h,m]=r.getImageData(f,d,1,1).data,[v,b,C]=i.getImageData(f,d,1,1).data,p=Math.floor(l.xx/e.numFeats),M=(0,l.OX)(g,h,m,p);if(e.setMouseoverId(e.featPositions[M]?.f.id()),-1===M)x("");else if(e.featPositions[M]){const{f:t,cigar:n}=e.featPositions[M],o=Math.floor(l.xx/n.length),a=(0,l.OX)(v,b,C,o);x((0,u.Eg)(t,n[a],n[a+1]))}}},onMouseLeave:()=>{e.setMouseoverId(void 0),P(void 0),T(void 0)},onMouseDown:e=>{T(e.clientX),P(e.clientX)},onMouseUp:t=>{T(void 0),void 0!==E&&Math.abs(t.clientX-E)<5&&(0,u.WT)(t,e)},onContextMenu:t=>{(0,u.f0)(t,e,p)},"data-testid":"synteny_canvas",className:t.abs,width:m,height:h}),o.createElement("canvas",{ref:L,className:t.pix,width:m,height:h}),o.createElement("canvas",{ref:N,className:t.pix,width:m,height:h}),I&&M&&w&&$?o.createElement(d,{title:M}):null,C?o.createElement(f,{model:e,anchorEl:C,onClose:()=>{p(void 0)}}):null)})),m=(0,a.n9)()((e=>{const t=e.palette.action.disabledBackground;return{loading:{paddingLeft:"0.6em",backgroundColor:e.palette.background.default,backgroundImage:`repeating-linear-gradient(45deg, transparent, transparent 5px, ${t} 5px, ${t} 10px)`,textAlign:"center"},blockMessage:{background:"#f1f1f1",padding:10},blockError:{background:"#f1f1f1",padding:10,color:"red"}}}));function v(){const[e,t]=(0,o.useState)(!1),{classes:n}=m();return(0,o.useEffect)((()=>{const e=setTimeout((()=>{t(!0)}),300);return()=>{clearTimeout(e)}})),e?o.createElement("div",{className:n.loading},o.createElement(i.LoadingEllipses,null)):null}function b({messageText:e}){const{classes:t}=m();return o.createElement("div",{className:t.blockMessage},e)}function C({error:e}){const{classes:t}=m();return o.createElement("div",{className:t.blockError},`${e}`)}const p=(0,r.observer)((function({model:e}){return e.error?o.createElement(C,{error:e.error}):e.message?o.createElement(b,{messageText:e.message}):e.features?o.createElement(h,{model:e}):o.createElement(v,null)}))},79610:(e,t,n)=>{n.d(t,{$2:()=>i,Eg:()=>l,WT:()=>s,f0:()=>c,mr:()=>r});var o=n(99546),a=n(30385);function r({feature:e,ctx:t,offsets:n,cb:a,height:r,drawCurves:s,oobLimit:c,viewWidth:l,hideTiny:f}){const{p11:u,p12:d,p21:g,p22:h}=e,m=u.offsetPx-n[0],v=d.offsetPx-n[0],b=g.offsetPx-n[1],C=h.offsetPx-n[1],p=Math.abs(v-m),M=Math.abs(C-b),x=r,w=(x-0)/2,k=Math.min(b,C),S=Math.max(b,C);(0,o.doesIntersect2)(k,S,-c,l+c)&&(p<=1&&M<=1?f||(t.beginPath(),t.moveTo(m,0),s?t.bezierCurveTo(m,w,b,w,b,x):t.lineTo(b,x),t.stroke()):(i(t,m,v,0,C,b,x,w,s),a(t)))}function i(e,t,n,o,a,r,i,s,c){c?function(e,t,n,o,a,r,i,s){const c=Math.abs(t-n),l=Math.abs(t-n);if(c<5&&l<5&&n<t&&Math.abs(t-a)>100){const e=t;t=n,n=e}e.beginPath(),e.moveTo(t,o),e.lineTo(n,o),e.bezierCurveTo(n,s,a,s,a,i),e.lineTo(r,i),e.bezierCurveTo(r,s,t,s,t,o),e.closePath(),e.fill()}(e,t,n,o,a,r,i,s):function(e,t,n,o,a,r,i){e.beginPath(),e.moveTo(t,o),e.lineTo(n,o),e.lineTo(a,i),e.lineTo(r,i),e.closePath(),e.fill()}(e,t,n,o,a,r,i)}function s(e,t){const n=(0,o.getContainingView)(t),r=(0,o.getContainingTrack)(t),i=t.clickMapCanvas,s=t.cigarClickMapCanvas;if(!i||!s)return;const c=i.getBoundingClientRect(),l=i.getContext("2d"),f=s.getContext("2d");if(!l||!f)return;const u=e.clientX-c.left,d=e.clientY-c.top,[g,h,m]=l.getImageData(u,d,1,1).data,v=Math.floor(a.xx/t.numFeats),b=(0,a.OX)(g,h,m,v),C=t.featPositions[b];if(C){const{f:e}=C;t.setClickId(e.id());const a=(0,o.getSession)(t);(0,o.isSessionModelWithWidgets)(a)&&a.showWidget(a.addWidget("BaseFeatureWidget","baseFeature",{view:n,track:r,featureData:e.toJSON()}))}return C}function c(e,t,n){e.preventDefault();const o=t.clickMapCanvas,r=t.cigarClickMapCanvas;if(!o||!r)return;const i=o.getBoundingClientRect(),s=o.getContext("2d"),c=r.getContext("2d");if(!s||!c)return;const{clientX:l,clientY:f}=e,u=l-i.left,d=f-i.top,[g,h,m]=s.getImageData(u,d,1,1).data,v=Math.floor(a.xx/t.numFeats),b=(0,a.OX)(g,h,m,v),C=t.featPositions[b];C&&(t.setClickId(C.f.id()),n({clientX:l,clientY:f,feature:C}))}function l(e,t,n){const a=e.toJSON(),r=a.mate,i=a.end-a.start,s=r.end-r.start,c=a.identity,l=a.name,f=r.name;return[`Loc1: ${(0,o.assembleLocString)(a)}`,`Loc2: ${(0,o.assembleLocString)(r)}`,`Inverted: ${-1===a.strand}`,`Query len: ${i.toLocaleString("en-US")}`,`Target len: ${s.toLocaleString("en-US")}`,c?`Identity: ${c.toPrecision(2)}`:"",t?`CIGAR operator: ${t}${n}`:"",l?`Name 1: ${l}`:"",f?`Name 1: ${f}`:""].filter((e=>!!e)).join("<br/>")}},30385:(e,t,n)=>{n.d(t,{C4:()=>d,OX:()=>f,Ww:()=>u,xx:()=>r});var o=n(99546),a=n(79610);const r=16581375;function i(e){return`rgb(${Math.floor(e/65025)%255},${Math.floor(e/255)%255},${e%255})`}const s={I:"#ff03",N:"#0a03",D:"#00f3",X:"brown",M:"#f003","=":"#f003"},c=3,l=1600;function f(e,t,n,o){return Math.floor((255*e*255+255*t+n-1)/o)}function u(e,t,n){const f=(0,o.getContainingView)(e),u=f.drawCurves,d=f.drawCIGAR,g=f.middleComparativeHeight,h=f.width,m=f.views.map((e=>e.bpPerPx));n&&(n.imageSmoothingEnabled=!1),t.beginPath();const v=e.featPositions,b=f.views.map((e=>e.offsetPx)),C=Math.floor(r/v.length);t.fillStyle=s.M,t.strokeStyle=s.M;for(const{p11:e,p12:n,p21:o,p22:a}of v){const r=e.offsetPx-b[0],i=n.offsetPx-b[0],s=o.offsetPx-b[1],f=a.offsetPx-b[1],d=Math.abs(i-r),m=Math.abs(f-s),v=0,C=g,p=(C-v)/2;d<=c&&m<=c&&s<h+l&&s>-l&&(t.moveTo(r,v),u?t.bezierCurveTo(r,p,s,p,s,C):t.lineTo(s,C))}t.stroke(),t.fillStyle=s.M,t.strokeStyle=s.M;for(const{p11:e,p12:C,p21:p,p22:M,f:x,cigar:w}of v){const v=e.offsetPx-b[0],k=C.offsetPx-b[0],S=p.offsetPx-b[1],T=M.offsetPx-b[1],E=Math.abs(k-v),P=Math.abs(T-S),$=Math.min(S,T),y=Math.max(S,T),I=0,X=g,R=(X-I)/2;if(!(E<=c&&P<=c)&&(0,o.doesIntersect2)($,y,-l,f.width+l)){const e=x.get("strand"),o=-1===e?k:v,c=o<(-1===e?v:k)?1:-1,l=(S<T?1:-1)*e;let f=o,g=-1===e?T:S;if(w.length&&d){let e=!1,o=0,d=0;const v=Math.floor(r/w.length);for(let r=0;r<w.length;r+=2){const b=r*v+1,C=+w[r],p=w[r+1];e||(o=f,d=g);const M=C/m[0],x=C/m[1];if("M"===p||"="===p||"X"===p?(f+=M*c,g+=x*l):"D"===p||"N"===p?f+=M*c:"I"===p&&(g+=x*l),!(Math.max(o,d,f,g)<0||Math.min(o,d,f,g)>h)){const c=r<w.length-2;Math.abs(f-o)<=1&&Math.abs(g-d)<=1&&c?e=!0:(t.fillStyle=s[e&&M>1||x>1?p:"M"],e=!1,(0,a.$2)(t,o,f,I,g,d,X,R,u),n&&(n.fillStyle=i(b),(0,a.$2)(n,o,f,I,g,d,X,R,u)))}}}else(0,a.$2)(t,v,k,I,T,S,X,R,u)}}const p=e.clickMapCanvas?.getContext("2d");if(p){p.imageSmoothingEnabled=!1,p.clearRect(0,0,h,g);for(let e=0;e<v.length;e++){const t=v[e],n=e*C+1;p.fillStyle=i(n),(0,a.mr)({cb:e=>{e.fill()},feature:t,ctx:p,drawCurves:u,offsets:b,oobLimit:l,viewWidth:f.width,hideTiny:!0,height:g})}}}function d(e){const{clickId:t,mouseoverId:n}=e,r=(0,o.getContainingView)(e),i=r.drawCurves,s=r.middleComparativeHeight,c=r.width,f=e.mouseoverCanvas?.getContext("2d"),u=r.views.map((e=>e.offsetPx));if(!f)return;f.resetTransform(),f.scale(1,1),f.clearRect(0,0,c,s);const d=e.featMap[n||""];d&&(f.fillStyle="rgb(0,0,0,0.1)",(0,a.mr)({cb:e=>{e.fill()},feature:d,ctx:f,oobLimit:l,viewWidth:r.width,drawCurves:i,offsets:u,height:s}));const g=e.featMap[t||""];g&&(f.strokeStyle="rgb(0, 0, 0, 0.9)",(0,a.mr)({cb:e=>{e.stroke()},feature:g,ctx:f,oobLimit:l,viewWidth:r.width,drawCurves:i,offsets:u,height:s}))}}}]);
//# sourceMappingURL=4753.834007ba.chunk.js.map