https://zfin.org/dist/848.9a70669175acffa0ba1c.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[848],{40848(e,t,n){n.r(t),n.d(t,{default:()=>p});var o=n(14041),a=n(26219),r=n(22980),i=n(28730),s=n(21093),l=n(83794),c=n(45134);function f({model:e,onClose:t,anchorEl:n}){const r=(0,s.getContainingView)(e),{clientX:i,clientY:l,feature:c}=n;return o.createElement(a.Menu,{onMenuItemClick:(e,n)=>{n(e),t()},anchorEl:{nodeType:1,getBoundingClientRect:()=>({top:l,left:i,bottom:l,right:i,width:0,height:0,x:i,y:l,toJSON(){}})},onClose:t,open:Boolean(n),menuItems:[{label:"Center on feature",onClick:()=>{const{f:t}=c,n=t.get("start"),o=t.get("end"),a=t.get("refName"),i=t.get("mate"),l=r.views[e.level],f=r.views[e.level+1];l.navToLocString(`${a}:${n}-${o}`).catch(t=>{const n=`${l.assemblyNames[0]}:${t}`;console.error(n),(0,s.getSession)(e).notifyError(n,t)}),f.navToLocString(`${i.refName}:${i.start}-${i.end}`).catch(t=>{const n=`${f.assemblyNames[0]}:${t}`;console.error(n),(0,s.getSession)(e).notifyError(n,t)})}}]})}var u=n(78518);const d=(0,o.lazy)(()=>n.e(202).then(n.bind(n,90202))),g=(0,i.makeStyles)()({pix:{imageRendering:"pixelated",pointerEvents:"none",visibility:"hidden",position:"absolute"},rel:{position:"relative"},mouseoverCanvas:{position:"absolute",pointEvents:"none"},mainCanvas:{position:"absolute"}}),v=(0,r.observer)(function({model:e}){const{classes:t}=g(),{mouseoverId:n,height:a}=e,r=(0,o.useRef)(0),i=(0,s.getContainingView)(e),v=i.width,m=(0,o.useRef)(0),h=(0,o.useRef)(!1),C=(0,o.useRef)(),[b,p]=(0,o.useState)(),[M,x]=(0,o.useState)(""),[w,k]=(0,o.useState)(),[S,E]=(0,o.useState)(),[P,T]=(0,o.useState)(),[y,$]=(0,o.useState)(),I=(0,o.useRef)(),X=(0,o.useCallback)(t=>{e.setMouseoverCanvasRef(t)},[e,a,v]),L=(0,o.useCallback)(t=>{e.setMainCanvasRef(t),I.current=t},[e,a,v]);(0,o.useEffect)(()=>{var e;function t(e){if(e.preventDefault(),e.ctrlKey){m.current+=e.deltaY/500;for(const e of i.views)e.setScaleFactor(m.current<0?1-m.current:1/(1+m.current));C.current&&clearTimeout(C.current),C.current=setTimeout(()=>{var t;for(const n of i.views)n.setScaleFactor(1),n.zoomTo(m.current>0?n.bpPerPx*(1+m.current):n.bpPerPx/(1-m.current),e.clientX-((null===(t=I.current)||void 0===t?void 0:t.getBoundingClientRect().left)||0));m.current=0},300)}else Math.abs(e.deltaY)<Math.abs(e.deltaX)&&(r.current+=e.deltaX/2),h.current||(h.current=!0,window.requestAnimationFrame(()=>{(0,l.transaction)(()=>{for(const e of i.views)e.horizontalScroll(r.current);r.current=0,h.current=!1})}))}return null===(e=I.current)||void 0===e||e.addEventListener("wheel",t),()=>{var e;null===(e=I.current)||void 0===e||e.removeEventListener("wheel",t)}},[e,a,v]);const N=(0,o.useCallback)(t=>{e.setClickMapCanvasRef(t)},[e,a,v]),R=(0,o.useCallback)(t=>{e.setCigarClickMapCanvasRef(t)},[e,a,v]);return o.createElement("div",{className:t.rel},o.createElement("canvas",{ref:X,width:v,height:a,className:t.mouseoverCanvas}),o.createElement("canvas",{ref:L,onMouseMove:t=>{var n;if(void 0!==S)r.current+=S-t.clientX,E(t.clientX),h.current||(h.current=!0,window.requestAnimationFrame(()=>{(0,l.transaction)(()=>{for(const e of i.views)e.horizontalScroll(r.current);r.current=0,h.current=!1})}));else{const o=e.clickMapCanvas,a=e.cigarClickMapCanvas;if(!o||!a)return;const r=o.getBoundingClientRect(),i=o.getContext("2d"),s=a.getContext("2d");if(!i||!s)return;const{clientX:l,clientY:f}=t,d=l-r.left,g=f-r.top;k(l),$(f);const[v,m,h]=i.getImageData(d,g,1,1).data,[C,b,p]=s.getImageData(d,g,1,1).data,M=Math.floor(c.xx/e.numFeats),w=(0,c.OX)(v,m,h,M);if(e.setMouseoverId(null===(n=e.featPositions[w])||void 0===n?void 0:n.f.id()),-1===w)x("");else if(e.featPositions[w]){const{f:t,cigar:n}=e.featPositions[w],o=Math.floor(c.xx/n.length),a=(0,c.OX)(C,b,p,o);x((0,u.Eg)({feature:t,cigarOp:n[a],cigarOpLen:n[a+1]}))}}},onMouseLeave:()=>{e.setMouseoverId(void 0),T(void 0),E(void 0)},onMouseDown:e=>{E(e.clientX),T(e.clientX)},onMouseUp:t=>{E(void 0),void 0!==P&&Math.abs(t.clientX-P)<5&&(0,u.WT)(t,e)},onContextMenu:t=>{(0,u.f0)(t,e,p)},"data-testid":"synteny_canvas",className:t.mainCanvas,width:v,height:a}),o.createElement("canvas",{ref:N,className:t.pix,width:v,height:a}),o.createElement("canvas",{ref:R,className:t.pix,width:v,height:a}),n&&M&&w&&y?o.createElement(d,{title:M}):null,b?o.createElement(f,{model:e,anchorEl:b,onClose:()=>{p(void 0)}}):null)}),m=(0,i.makeStyles)()(e=>

1{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 h(){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(a.LoadingEllipses,null)):null}function C({messageText:e}){const{classes:t}=m();return o.createElement("div",{className:t.blockMessage},e)}function b({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(b,{error:e.error}):e.message?o.createElement(C,{messageText:e.message}):e.features?o.createElement(v,{model:e}):o.createElement(h,null)})},78518(e,t,n){n.d(t,{$2:()=>i,Eg:()=>c,WT:()=>s,f0:()=>l,mr:()=>r});var o=n(21093),a=n(45134);function r({feature:e,ctx:t,offsets:n,level:a,cb:r,height:s,drawCurves:l,oobLimit:c,viewWidth:f,hideTiny:u}){const{p11:d,p12:g,p21:v,p22:m}=e,h=d.offsetPx-n[a],C=g.offsetPx-n[a],b=v.offsetPx-n[a+1],p=m.offsetPx-n[a+1],M=Math.abs(C-

1h),x=Math.abs(p-b),w=s,k=(w-0)/2,S=Math.min(b,p),E=Math.max(b,p);(0,o.doesIntersect2)(S,E,-c,f+c)&&(M<=1&&x<=1?u||(t.beginPath(),t.moveTo(h,0),l?t.bezierCurveTo(h,k,b,k,b,w):t.lineTo(b,w),t.stroke()):(i(t,h,C,0,p,b,w,k,l),r(t)))}function i(e,t,n,o,a,r,i,s,l){l?function(e,t,n,o,a,r,i,s){const l=Math.abs(t-n),c=Math.abs(t-n);if(l<5&&c<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,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,t,n,o,a,r,i)}function s(e,t){const n=(0,o.getContainingView)(t),r=(0,o.getContainingTrack)(t),{featPositions:i,numFeats:s,clickMapCanvas:l,cigarClickMapCanvas:c,level:f}=t;if(!l||!c)return;const u=l.getBoundingClientRect(),d=l.getContext("2d"),g=c.getContext("2d");if(!d||!g)return;const v=e.clientX-u.left,m=e.clientY-u.top,[h,C,b]=d.getImageData(v,m,1,1).data,p=Math.floor(a.xx/s),M=i[(0,a.OX)(h,C,b,p)];if(M){const{f:e}=M;t.setClickId(e.id());const a=(0,o.getSession)(t);(0,o.isSessionModelWithWidgets)(a)&&a.showWidget(a.addWidget("SyntenyFeatureWidget","syntenyFeature",{view:n,track:r,featureData:e.toJSON(),level:f}))}return M}function l(e,t,n){e.preventDefault();const o=t.clickMapCanvas,r=t.cigarClickMapCanvas;if(!o||!r)return;const i=o.getBoundingClientRect(),s=o.getContext("2d"),l=r.getContext("2d");if(!s||!l)return;const{clientX:c,clientY:f}=e,u=c-i.left,d=f-i.top,[g,v,m]=s.getImageData(u,d,1,1).data,h=Math.floor(a.xx/t.numFeats),C=(0,a.OX)(g,v,m,h),b=t.featPositions[C];b&&(t.setClickId(b.f.id()),n({clientX:c,clientY:f,feature:b}))}function c({feature:e,cigarOp:t,cigarOpLen:n}){const a=e.toJSON(),r=a.mate,i=a.end-a.start,s=r.end-r.start,l=a.identity,c=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")}`,l?`Identity: ${l.toPrecision(2)}`:"",t?`CIGAR operator: ${t}${n}`:"",c?`Name 1: ${c}`:"",f?`Name 1: ${f}`:""].filter(e=>!!e).join("<br/>")}},45134(e,t,n){n.d(t,{C4:()=>u,OX:()=>c,Ww:()=>f,xx:()=>r});var o=n(21093),a=n(78518);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"},l=1600;function c(e,t,n,o){return Math.floor((255*e*255+255*t+n-1)/o)}function f(e,t,n){var c;const f=(0,o.getContainingView)(e),u=f.drawCurves,d=f.drawCIGAR,{level:g,height:v,featPositions:m}=e,h=f.width,C=f.views.map(e=>e.bpPerPx);n&&(n.imageSmoothingEnabled=!1),t.beginPath();const b=f.views.map(e=>e.offsetPx),p=Math.floor(r/m.length);t.fillStyle=s.M,t.strokeStyle=s.M;for(const{p11:e,p12:n,p21:o,p22:a}of m){const r=e.offsetPx-b[g],i=n.offsetPx-b[g],s=o.offsetPx-b[g+1],c=a.offsetPx-b[g+1],f=Math.abs(i-r),d=Math.abs(c-s),m=0,C=v,p=(C-m)/2;f<=3&&d<=3&&s<h+l&&s>-1600&&(t.moveTo(r,m),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 m){const m=e.offsetPx-b[g],k=c.offsetPx-b[g],S=p.offsetPx-b[g+1],E=M.offsetPx-b[g+1],P=Math.abs(k-m),T=Math.abs(E-S),y=Math.min(S,E),$=Math.max(S,E),I=0,X=v,L=(X-I)/2;if(!(P<=3&&T<=3)&&(0,o.doesIntersect2)(y,$,-1600,f.width+l)){const e=x.get("strand"),o=-1===e?k:m,l=o<(-1===e?m:k)?1:-1,c=(S<E?1:-1)*e;let f=o,v=-1===e?E:S;if(w.length&&d){let e=!1,o=0,d=0;const m=Math.floor(r/w.length);for(let r=0;r<w.length;r+=2){const b=r*m+1,p=+w[r],M=w[r+1];e||(o=f,d=v);const x=p/C[g],k=p/C[g+1];if("M"===M||"="===M||"X"===M?(f+=x*l,v+=k*c):"D"===M||"N"===M?f+=x*l:"I"===M&&(v+=k*c),!(Math.max(o,d,f,v)<0||Math.min(o,d,f,v)>h)){const l=r<w.length-2;Math.abs(f-o)<=1&&Math.abs(v-d)<=1&&l?e=!0:(t.fillStyle=s[e&&x>1||k>1?M:"M"],e=!1,(0,a.$2)(t,o,f,I,v,d,X,L,u),t.fill(),n&&(n.fillStyle=i(b),(0,a.$2)(n,o,f,I,v,d,X,L,u),n.fill()))}}}else(0,a.$2)(t,m,k,I,E,S,X,L,u),t.fill()}}const M=null===(c=e.clickMapCanvas)||void 0===c?void 0:c.getContext("2d");if(M){M.imageSmoothingEnabled=!1,M.clearRect(0,0,h,v);for(let e=0;e<m.length;e++){const t=m[e],n=e*p+1;M.fillStyle=i(n),(0,a.mr)({cb:e=>{e.fill()},feature:t,ctx:M,drawCurves:u,level:g,offsets:b,oobLimit:l,viewWidth:f.

1width,hideTiny:!0,height:v})}}}function u(e){var t;const{level:n,clickId:r,mouseoverId:i}=e,s=(0,o.getContainingView)(e),c=s.drawCurves,f=e.height,u=s.width,d=null===(t=e.mouseoverCanvas)||void 0===t?void 0:t.getContext("2d"),g=s.views.map(e=>e.offsetPx);if(!d)return;d.resetTransform(),d.scale(1,1),d.clearRect(0,0,u,f),d.strokeStyle="rgba(0, 0, 0, 0.9)",d.fillStyle="rgba(0, 0, 0, 0.1)";const v=e.featMap[i||""];v&&(0,a.mr)({cb:e=>{e.fill()},feature:v,level:n,ctx:d,oobLimit:l,viewWidth:s.width,drawCurves:c,offsets:g,height:f});const m=e.featMap[r||""];m&&(0,a.mr)({cb:e=>{e.stroke()},feature:m,ctx:d,level:n,oobLimit:l,viewWidth:s.width,drawCurves:c,offsets:g,height:f})}}}]);