jbrowse-plugin-graphgenomeviewer 3.0.4 → 3.1.0

package/dist/chunks/GraphGenomeView-TM7WYDLH.js

@@ -0,0 +1,14 @@
+import{$ as Te,A as bt,F as yt,P as xt,T as vt,Y as Je,a as P,aa as wt,b as So,ba as St,c as Mo,fa as Mt,j as ht,ka as Ct,ma as Lt,na as F,o as ce,s as ft,t as Ie,u as gt,v as je,w as Re,y as Be}from"./chunk-7T2HTRP3.js";import{a as M,b as N,c as $,d as Me,e as Ge}from"./chunk-XEJ47DLD.js";import"./chunk-ZNGDWZ6Z.js";import"./chunk-F4C3BEPV.js";import{a as Ke,b as c}from"./chunk-FY3BTKY4.js";var Et=Ke((ba,kt)=>{kt.exports=JBrowseExports["@jbrowse/render-core/useRenderingBackend"]});var un=Ke((Ja,pn)=>{pn.exports=JBrowseExports["@mui/material/Button"]});var Zn=Ke((Ns,Un)=>{Un.exports=JBrowseExports["@jbrowse/render-core/renderingBackendBase"]});var wo=c(N(),1);var j=c(Ge(),1),ve=c(Me(),1),po=c(Et(),1);var Gt=c(M(),1),It=(0,P.createSvgIcon)((0,Gt.jsx)("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"}),"Info");var J=c(N(),1);var Bt=c(N(),1);function Co(o){return o.length*6.2+8}function Lo(o,e){return o.x0<e.x1&&o.x1>e.x0&&o.y0<e.y1&&o.y1>e.y0}function Ne(o,e,t=[]){let n=[...t],r=[],s=19;for(let a of o){let l=Co(a.text),i=a.y>e.height/2?-1:1;for(let u=0;u<=(a.stack??0);u++){let m=a.y+i*u*s,d={x0:a.x-l/2,x1:a.x+l/2,y0:m-11-4,y1:m+4};if(d.x1<0||d.x0>e.width||d.y1<0||d.y0>e.height)break;if(!n.some(x=>Lo(x,d))){n.push(d),r.push({...a,y:m,w:l});break}}}return r}var he=c(M(),1);function fe({x:o,y:e,w:t,text:n,color:r,italic:s,small:a,dimmed:l,title:i,testId:u,onClick:m}){return(0,he.jsxs)("g",{style:{pointerEvents:m?"auto":"none",cursor:m?"pointer":void 0,opacity:l?.35:1},"data-testid":u,onClick:m,children:[i?(0,he.jsx)("title",{children:i}):null,(0,he.jsx)("rect",{x:o-t/2,y:e-11-4+2,width:t,height:17,rx:3,fill:"rgba(255,255,255,0.85)",stroke:r,strokeWidth:a?.6:1}),(0,he.jsx)("text",{x:o,y:e,fontSize:a?10:11,fontFamily:"sans-serif",fontStyle:s?"italic":void 0,fontWeight:s?600:void 0,fill:r,textAnchor:"middle",children:n})]})}var de=c(M(),1),ko={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},Eo=3.4,Go=240,Io=8,Ro=(0,Bt.observer)(function({model:e}){let{bubbleHalos:t,walkHighlight:n}=e;if(t.length===0)return null;let{scaleX:r,scaleY:s,translateX:a,translateY:l,width:i,canvasHeight:u,contigThickness:m}=e,d=m*Eo,x=g=>({x:g.x*r+a,y:g.y*s+l}),C=g=>n!==void 0&&!g.nodeIds.some(b=>n.nodeIds.has(b)),G=g=>n!==void 0&&!g.route.walks.includes(n.name),L=[{x0:i-Go,x1:i,y0:0,y1:60}];e.poppedFrom&&L.push({x0:0,x1:60+e.poppedFrom.label.length*6.2*1.2,y0:0,y1:44});let E=[...t].sort((g,b)=>b.members-g.members),v=[...E.map(g=>{let{x:b,y:p}=x(g.top);return{item:{halo:g},x:b,y:p-d/2-6,text:g.label}}),...E.flatMap(g=>g.routes.map(b=>{let{x:p,y:h}=x(b.at);return{item:{halo:g,route:b},x:p,y:h+4,text:b.text,stack:Io}}))],I=Ne(v,{width:i,height:u},L);return(0,de.jsxs)("svg",{style:ko,width:i,height:u,"data-testid":"graph-bubble-halos",children:[(0,de.jsx)("g",{transform:`translate(${a} ${l}) scale(${r} ${s})`,children:t.filter(g=>!g.whole).map(g=>(0,de.jsx)("path",{d:g.path,fill:"none",stroke:ce[g.kind],strokeOpacity:C(g)?.06:.22,strokeWidth:d,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke"},`${g.bubble.start}-${g.bubble.end}`))}),I.map(({item:{halo:g,route:b},x:p,y:h,w:S,text:k})=>b?(0,de.jsx)(fe,{x:p,y:h,w:S,text:k,color:ce[g.kind],small:!0,dimmed:G(b),title:`${b.route.walks.length} walk(s): ${b.route.walks.join(", ")}`,testId:"graph-route-label"},`${g.bubble.start}-${g.bubble.end}-${b.route.steps.join(",")}`):(0,de.jsx)(fe,{x:p,y:h,w:S,text:k,color:ce[g.kind],dimmed:C(g),title:`${g.label}
+${g.bubble.segmentCount} segments \xB7 click to open`,testId:"graph-bubble-halo-label",onClick:()=>{e.popBubble(g.bubble)}},`${g.bubble.start}-${g.bubble.end}-label`))]})}),Tt=Ro;var At=c($(),1),_t=c(N(),1);var X=c(M(),1),Bo={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},To={position:"absolute",left:8,top:8,zIndex:5,background:"rgba(255,255,255,0.9)",textTransform:"none"},Qe=15,No=8,Ao=150,_o=10;function Nt(o,e){let t=12+26*Math.log10(1+o);return Math.min(t,e)}var Ho=(0,_t.observer)(function({model:e}){let{bubbleGlyphs:t,poppedFrom:n}=e,r=n?(0,X.jsxs)(At.Button,{size:"small",variant:"outlined",style:To,"data-testid":"graph-unpop-bubble",onClick:()=>{e.unpopBubble()},children:["\u25C0 Back to ",n.label]}):null;if(t.length===0)return r;let{scaleX:s,translateX:a,translateY:l,width:i,canvasHeight:u}=e,m=l,d=v=>v*s+a,x=Math.max(2,Math.min(No,Math.floor((m-60)/Qe))),C=[...t].sort((v,I)=>I.bubble.end-I.bubble.start-(v.bubble.end-v.bubble.start)),G=[],L=C.flatMap(v=>{let I=(d(v.bubble.start)+d(v.bubble.end))/2;if(I<0||I>i)return[];let g=v.label.length*6.2/2,b=Math.min(Math.max(I,g+4),i-Ao-g),p=G.findIndex(S=>S<b-g-10),h=p===-1?G.length:p;return h>=x?[]:(G[h]=b+g,[{g:v,bx:I,cx:b,y:14+h*Qe}])}),E=Math.max(24,m-G.length*Qe-14);return(0,X.jsxs)(X.Fragment,{children:[r,(0,X.jsxs)("svg",{style:Bo,width:i,height:u,"data-testid":"graph-bubble-overlay",children:[C.map(({bubble:v,kind:I,label:g})=>{let b=d(v.start),p=d(v.end),h=Math.max(p-b,_o),S=(b+p)/2,k=Nt(v.longestAlleleLength,E),B=ce[I],H=v.end-v.start-v.shortestAlleleLength,A=H>0?6+10*Math.log10(1+H):0,ie=`${v.start}-${v.end}`;return(0,X.jsxs)("g",{children:[(0,X.jsx)("path",{d:`M${S-h/2},${m} C${S-h/2},${m-k} ${S+h/2},${m-k} ${S+h/2},${m} Z`,fill:B,fillOpacity:.18,stroke:B,strokeWidth:2,style:{pointerEvents:"auto",cursor:"pointer"},onClick:()=>{e.popBubble(v)},children:(0,X.jsx)("title",{children:`${g}
+${v.segmentCount} segments \xB7 click to open`})}),A>0?(0,X.jsx)("path",{d:`M${S-h/2},${m} C${S-h/2},${m+A} ${S+h/2},${m+A} ${S+h/2},${m}`,fill:"none",stroke:B,strokeWidth:2,strokeDasharray:"4 3"}):null]},ie)}),L.map(({g:v,bx:I,cx:g,y:b})=>{let p=ce[v.kind],h=m-Nt(v.bubble.longestAlleleLength,E);return(0,X.jsxs)("g",{children:[(0,X.jsx)("line",{x1:I,x2:I,y1:b+4,y2:h-2,stroke:p,strokeWidth:.7,strokeOpacity:.5}),(0,X.jsx)("text",{x:g,y:b,fontSize:11,fontFamily:"sans-serif",fill:p,textAnchor:"middle",children:v.label})]},`${v.bubble.start}-${v.bubble.end}-label`)})]})]})}),Ht=Ho;var Pt=c(N(),1);var ee=c(M(),1),Po={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:3},et="#1c1c22",Xo=(0,Pt.observer)(function({model:e}){let{genePins:t}=e;if(t.length===0)return null;let{scaleX:n,scaleY:r,translateX:s,translateY:a,width:l,canvasHeight:i,contigThickness:u}=e,m=Ne([...t].sort((d,x)=>x.gene.end-x.gene.start-(d.gene.end-d.gene.start)).map(d=>({item:d,x:d.at.x*n+s,y:d.at.y*r+a+u+18,text:d.covered<.98?`${d.gene.name} \u2026`:d.gene.name})),{width:l,height:i});return(0,ee.jsxs)("svg",{style:Po,width:l,height:i,"data-testid":"graph-gene-pins",children:[(0,ee.jsx)("g",{transform:`translate(${s} ${a}) scale(${n} ${r})`,children:t.map(d=>d.exons?(0,ee.jsx)("path",{d:d.exons,fill:"none",stroke:et,strokeOpacity:.9,strokeWidth:u*.55,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"},`${d.gene.name}-${d.gene.start}`):null)}),m.map(({item:d,x,y:C,w:G,text:L})=>(0,ee.jsxs)("g",{children:[(0,ee.jsx)("line",{x1:x,x2:x,y1:C-11-2,y2:d.at.y*r+a+u/2,stroke:et,strokeWidth:.8,strokeOpacity:.6}),(0,ee.jsx)(fe,{x,y:C,w:G,text:L,color:et,italic:!0,title:`${d.gene.name} ${d.gene.refName}:${d.gene.start.toLocaleString()}-${d.gene.end.toLocaleString()}${d.covered<.98?", runs past the cut":""}`,testId:"graph-gene-pin-label"})]},`${d.gene.name}-${d.gene.start}-label`))]})}),Xt=Xo;var $t=c(M(),1),zt=(0,P.createSvgIcon)((0,$t.jsx)("path",{d:"M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2m2 10H3v4c0 1.1.9 2 2 2h4v-2H5zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2"}),"CropFree");var tt=c(M(),1),Ft=(0,P.createSvgIcon)([(0,tt.jsx)("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"},"0"),(0,tt.jsx)("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"},"1")],"ZoomIn");var Yt=c(M(),1),Dt=(0,P.createSvgIcon)((0,Yt.jsx)("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"}),"ZoomOut");var W=c($(),1),lt=c(N(),1),Bn=c(F(),1);var te=c($(),1),Ot=c(N(),1),Vt=c(F(),1);var ge=c(M(),1),$o=(0,Vt.makeStyles)()({formControl:{minWidth:100}}),zo=(0,Ot.observer)(function({model:e}){let{classes:t}=$o();return(0,ge.jsxs)(te.FormControl,{size:"small",className:t.formControl,children:[(0,ge.jsx)(te.InputLabel,{children:"Color"}),(0,ge.jsx)(te.Select,{value:e.colorScheme,label:"Color",onChange:n=>{e.setColorScheme(n.target.value)},children:Be.map(({value:n,label:r})=>(0,ge.jsx)(te.MenuItem,{value:n,children:r},n))})]})}),Wt=zo;var Ae=c($(),1),Ut=c(N(),1),pe=c(M(),1),Fo=(0,Ut.observer)(function({model:e}){let{followLinearView:t,followState:n}=e,r=n.active?e.followNote:void 0,s=t?n.active?r??`Following the linear view${e.cutTier==="coarse"?", coarse tier":""}`:n.reason:"Pinned";return e.loadedTrackId?(0,pe.jsxs)(pe.Fragment,{children:[(0,pe.jsx)(Ae.Button,{size:"small",onClick:()=>{e.setFollowLinearView(!t)},children:t?"Pin":"Follow"}),s?(0,pe.jsx)(Ae.Typography,{variant:"caption",color:r?"warning.main":"text.secondary","data-testid":"graph-follow-status",children:s}):null]}):null}),Zt=Fo;var ot=c($(),1),rt=c(N(),1),qt=c(F(),1),be=c(M(),1),Kt=(0,qt.makeStyles)()({stats:{marginLeft:"auto"},perf:{color:"#888",fontVariantNumeric:"tabular-nums"}});function nt(o){return o===void 0?"\u2013":`${Math.round(o)}ms`}var Yo=(0,rt.observer)(function({model:e}){let{classes:t}=Kt(),{lastFetchMs:n,lastLayoutMs:r,lastGeometryMs:s}=e,a=n!==void 0||r!==void 0||s!==void 0;return e.showPerf&&a?(0,be.jsxs)(ot.Typography,{variant:"caption",className:t.perf,"data-testid":"graph-perf-stats",children:["fetch ",nt(n)," \xB7 layout ",nt(r)," \xB7 geom"," ",nt(s)]}):null}),Do=(0,rt.observer)(function({model:e}){let{classes:t}=Kt();return(0,be.jsxs)("div",{className:t.stats,"data-testid":"graph-stats","data-node-count":e.nodeCount,"data-edge-count":e.edgeCount,"data-path-count":e.pathCount,"data-fetch-ms":e.lastFetchMs??"","data-layout-ms":e.lastLayoutMs??"","data-geometry-ms":e.lastGeometryMs??"","data-geometry-strokes":e.lastGeometryStrokeCount??"","data-follow-recuts":e.followRecuts,children:[(0,be.jsxs)(ot.Typography,{variant:"body2",component:"span",children:[e.nodeCount," nodes, ",e.edgeCount," edges",e.pathCount>0?`, ${e.pathCount} paths`:""]})," ",(0,be.jsx)(Yo,{model:e})]})}),jt=Do;var O=c($(),1),Jt=c(N(),1),Qt=c(F(),1);var ne=c(M(),1),Oo=(0,Qt.makeStyles)()({formControl:{minWidth:150}}),Vo=(0,Jt.observer)(function({model:e}){let{classes:t}=Oo(),{graph:n}=e;return(0,ne.jsxs)(O.FormControl,{size:"small",className:t.formControl,children:[(0,ne.jsx)(O.InputLabel,{children:"Layout"}),(0,ne.jsx)(O.Select,{value:e.layoutMode,label:"Layout","data-testid":"graph-layout-select",onChange:r=>{e.setLayoutMode(r.target.value),e.recomputeLayout()},children:xt.map(({value:r,label:s,description:a,available:l})=>(0,ne.jsx)(O.MenuItem,{value:r,disabled:n?!l(n):!1,children:(0,ne.jsx)(O.Tooltip,{title:a,placement:"right",children:(0,ne.jsx)("span",{children:s})})},r))})]})}),en=Vo;var Z=c($(),1),tn=c(N(),1),nn=c(F(),1),oe=c(M(),1),Wo=(0,nn.makeStyles)()({formControl:{minWidth:130,maxWidth:240}}),Uo=(0,tn.observer)(function({model:e}){let{classes:t}=Wo(),{repeatChoices:n}=e;if(e.layoutMode!=="walkrows"||n.length===0)return null;let r=new Set(n.map(s=>s.key));return(0,oe.jsxs)(Z.FormControl,{size:"small",className:t.formControl,children:[(0,oe.jsx)(Z.InputLabel,{children:"Repeat"}),(0,oe.jsxs)(Z.Select,{value:r.has(e.repeatKey)?e.repeatKey:"",label:"Repeat","data-testid":"graph-repeat-select",onChange:s=>{e.setRepeatKey(s.target.value)},children:[(0,oe.jsx)(Z.MenuItem,{value:"",children:(0,oe.jsx)("em",{children:"Whole window"})}),n.map(({key:s,name:a,unit:l})=>(0,oe.jsxs)(Z.MenuItem,{value:s,children:[a," \xB7 ",l.toLocaleString()," bp unit"]},s))]})]})}),on=Uo;var Cn=c(Ge(),1),Ln=c(Me(),1);var rn=c(M(),1),an=(0,P.createSvgIcon)((0,rn.jsx)("path",{d:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"}),"Delete");var sn=c(M(),1),ln=(0,P.createSvgIcon)((0,sn.jsx)("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"}),"MoreVert");var cn=c(M(),1),dn=(0,P.createSvgIcon)((0,cn.jsx)("path",{d:"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"}),"Settings");var kn=c(N(),1);var vn=c(Me(),1),y=c($(),1),wn=c(un(),1),st=c(N(),1),Sn=c(F(),1);var V=c($(),1),mn=c(N(),1),hn=c(F(),1),re=c(M(),1),Zo=(0,hn.makeStyles)()({section:{marginBottom:24},formControl:{minWidth:200}}),qo=[{value:0,label:"None"},{value:1,label:"1 hop"},{value:2,label:"2 hops"}],Ko=(0,mn.observer)(function({model:e}){let{classes:t}=Zo();return e.loadedTrackId?(0,re.jsxs)("div",{className:t.section,children:[(0,re.jsxs)(V.FormControl,{className:t.formControl,children:[(0,re.jsx)(V.InputLabel,{children:"Graph context"}),(0,re.jsx)(V.Select,{value:e.subgraphContext,label:"Graph context","data-testid":"graph-context-select",onChange:n=>{e.setSubgraphContext(n.target.value),e.reloadSubgraph()},children:qo.map(({value:n,label:r})=>(0,re.jsx)(V.MenuItem,{value:n,children:r},n))})]}),(0,re.jsx)(V.Typography,{variant:"caption",color:"text.secondary",children:"How far the cut follows links out of the region, one hop by default. A detour that leaves the reference before the window and rejoins after it is indexed under its own sequence, so at none its middle is missing and the one bubble draws as two unrelated stubs. Each hop costs a query per off-reference segment already reached."})]}):null}),fn=Ko;var gn=c(Ge(),1),_e=c($(),1),at=c(N(),1),bn=c(F(),1),ye=c(M(),1),jo=(0,bn.makeStyles)()({section:{marginBottom:24}});function Jo(o){let e=o.split(/[\s,]+/).map(t=>t.trim()).filter(t=>t!=="");return e.length===0?void 0:e}var Qo=(0,at.observer)(function({model:e}){let[t,n]=(0,gn.useState)(e.subgraphHaplotypes?.join(", ")??""),r=()=>{let s=Jo(t);s?.join(`
+`)===e.subgraphHaplotypes?.join(`
+`)||(e.setSubgraphHaplotypes(s),e.reloadSubgraph())};return(0,ye.jsx)(_e.TextField,{fullWidth:!0,label:"Haplotypes",placeholder:"every haplotype",value:t,slotProps:{htmlInput:{"data-testid":"graph-haplotypes-field"}},onChange:s=>{n(s.target.value)},onBlur:()=>{r()},onKeyDown:s=>{s.key==="Enter"&&r()}})}),er=(0,at.observer)(function({model:e}){let{classes:t}=jo();return e.loadedTrackId?(0,ye.jsxs)("div",{className:t.section,children:[(0,ye.jsx)(Qo,{model:e},e.subgraphHaplotypes?.join(",")??""),(0,ye.jsx)(_e.Typography,{variant:"caption",color:"text.secondary",children:"The haplotypes the cut is for, as lane assembly names or PanSN prefixes (HG002#1, or HG002 for both), separated by commas. The cut keeps their walks and the nodes those walks visit, with the reference. Empty is every haplotype. Only a gbz-base track reads this."})]}):null}),yn=er;var f=c(M(),1),tr=(0,Sn.makeStyles)()({section:{marginBottom:24},formControl:{minWidth:200}}),nr=["Lowest","Low","Medium","High","Highest"],xn=(0,st.observer)(function({model:e}){return e.hasGraph&&!e.usesLayoutEngine?(0,f.jsx)(y.Typography,{variant:"caption",color:"warning.main",children:"No effect on this layout: only the force-directed layout is drawn by the engine that reads this."}):null}),or=(0,st.observer)(function(e){let{model:t,open:n,onClose:r}=e,{classes:s}=tr();return(0,f.jsxs)(vn.Dialog,{open:n,onClose:r,title:"Graph settings",children:[(0,f.jsxs)(y.DialogContent,{children:[(0,f.jsx)("div",{className:s.section,children:(0,f.jsxs)(y.FormControl,{fullWidth:!0,children:[(0,f.jsx)(y.FormLabel,{component:"legend",children:"Layout quality"}),(0,f.jsx)(y.RadioGroup,{value:t.layoutQuality,onChange:a=>{let l=parseInt(a.target.value);t.setLayoutQuality(l),t.recomputeLayout()},children:nr.map((a,l)=>(0,f.jsx)(y.FormControlLabel,{value:l,control:(0,f.jsx)(y.Radio,{}),label:a},a))}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"FMMM's iteration budget, the same scale Bandage exposes. Higher is slower: on a thousand-node cut the top setting is seconds rather than tenths."}),(0,f.jsx)(xn,{model:t})]})}),(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsx)(y.FormControlLabel,{control:(0,f.jsx)(y.Switch,{checked:t.drawPaths,onChange:a=>{t.setDrawPaths(a.target.checked)}}),label:"Draw paths"}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"Color each node and connector by the paths through it, one lane per path in legend order, so a path that skips a node leaves its lane empty"}),t.drawPaths&&!t.effectiveDrawPaths?(0,f.jsx)(y.Typography,{variant:"caption",color:"warning.main",children:t.pathCount>Je?`Off: ${t.pathCount.toLocaleString()} paths is past the ${Je} this can tell apart`:"Off: this graph states no paths"}):null]}),(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsx)(y.FormControlLabel,{control:(0,f.jsx)(y.Switch,{checked:t.showBubbles,onChange:a=>{t.setShowBubbles(a.target.checked)}}),label:"Mark bubbles"}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"A halo along the nodes of each bubble, labelled by what it is, with the label opening the bubble on its own"})]}),(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsx)(y.FormControlLabel,{control:(0,f.jsx)(y.Switch,{checked:t.showGenes,onChange:a=>{t.setShowGenes(a.target.checked)}}),label:"Genes on the backbone"}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"Exons along the reference nodes that carry them and each gene's name at its midpoint, from the assembly's annotation track"}),t.geneTrackChoices.length>1?(0,f.jsxs)(y.FormControl,{className:s.formControl,sx:{mt:1},children:[(0,f.jsx)(y.InputLabel,{children:"Gene track"}),(0,f.jsx)(y.Select,{value:t.geneTrack?.trackId??"",label:"Gene track","data-testid":"graph-gene-track-select",onChange:a=>{t.setGeneTrackId(a.target.value),t.reloadGenes()},children:t.geneTrackChoices.map(({trackId:a,name:l})=>(0,f.jsx)(y.MenuItem,{value:a,children:l},a))})]}):null,t.repeatTrackChoices.length>1?(0,f.jsxs)(y.FormControl,{className:s.formControl,sx:{mt:1},children:[(0,f.jsx)(y.InputLabel,{children:"Repeat track"}),(0,f.jsx)(y.Select,{value:t.repeatTrack?.trackId??"",label:"Repeat track","data-testid":"graph-repeat-track-select",onChange:a=>{t.setRepeatTrackId(a.target.value),t.reloadRepeats()},children:t.repeatTrackChoices.map(({trackId:a,name:l})=>(0,f.jsx)(y.MenuItem,{value:a,children:l},a))})]}):null]}),t.anchorPaths.length>1?(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsxs)(y.FormControl,{className:s.formControl,children:[(0,f.jsx)(y.InputLabel,{children:"Reference path"}),(0,f.jsx)(y.Select,{value:t.activeReferencePath??"",label:"Reference path","data-testid":"graph-reference-path-select",onChange:a=>{t.setReferencePath(a.target.value),t.recomputeLayout()},children:t.anchorPaths.map(({name:a})=>(0,f.jsx)(y.MenuItem,{value:a,children:a},a))})]}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"Which path the anchored layouts draw x against. A GFA with no rGFA tags states its coordinates only in its paths, and marks none of them as the reference."})]}):null,(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsxs)(y.FormControl,{className:s.formControl,children:[(0,f.jsx)(y.InputLabel,{children:"Bubble spread"}),(0,f.jsx)(y.Select,{value:t.bubbleSpread,label:"Bubble spread","data-testid":"graph-bubble-spread-select",onChange:a=>{t.setBubbleSpread(a.target.value),t.recomputeLayout()},children:ht.map(({value:a,label:l,description:i})=>(0,f.jsx)(y.MenuItem,{value:a,children:(0,f.jsx)(y.Tooltip,{title:i,placement:"right",children:(0,f.jsx)("span",{children:l})})},a))})]}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"How far the force layout opens a bubble. A pangenome allele is a few bp, so at Bandage's own scale both arms land inside one node thickness and the graph draws as a rope."}),(0,f.jsx)(xn,{model:t})]}),(0,f.jsxs)("div",{className:s.section,children:[(0,f.jsxs)(y.FormControl,{className:s.formControl,children:[(0,f.jsx)(y.InputLabel,{children:"Node width"}),(0,f.jsx)(y.Select,{value:t.nodeWidth,label:"Node width","data-testid":"graph-node-width-select",onChange:a=>{t.setNodeWidth(a.target.value)},children:vt.map(({value:a,label:l,description:i})=>(0,f.jsx)(y.MenuItem,{value:a,children:(0,f.jsx)(y.Tooltip,{title:i,placement:"right",children:(0,f.jsx)("span",{children:l})})},a))})]}),(0,f.jsx)(y.Typography,{variant:"caption",color:"text.secondary",children:"Bandage's depth as width. In a cut with walks, depth is how many haplotypes carry the node."})]}),(0,f.jsx)(fn,{model:t}),(0,f.jsx)(yn,{model:t}),(0,f.jsx)("div",{className:s.section,children:(0,f.jsxs)(y.FormControl,{className:s.formControl,children:[(0,f.jsx)(y.InputLabel,{children:"Color scheme"}),(0,f.jsx)(y.Select,{value:t.colorScheme,label:"Color scheme",onChange:a=>{t.setColorScheme(a.target.value)},children:Be.map(({value:a,label:l})=>(0,f.jsx)(y.MenuItem,{value:a,children:l},a))})]})})]}),(0,f.jsx)(y.DialogActions,{children:(0,f.jsx)(wn.default,{variant:"contained",color:"primary",onClick:r,children:"Close"})})]})}),Mn=or;var ae=c(M(),1),rr=(0,kn.observer)(function({model:e}){let[t,n]=(0,Cn.useState)(!1);return(0,ae.jsxs)(ae.Fragment,{children:[(0,ae.jsx)(Ln.CascadingMenuButton,{size:"small",menuItems:[{type:"checkbox",label:"Linear layout",checked:e.linearLayout,onClick:()=>{e.setLinearLayout(!e.linearLayout),e.recomputeLayout()}},{type:"checkbox",label:"Show deletion edges",checked:e.showDeletionEdges,onClick:()=>{e.setShowDeletionEdges(!e.showDeletionEdges)}},{type:"checkbox",label:"Show timings",checked:e.showPerf,onClick:()=>{e.setShowPerf(!e.showPerf)}},{type:"divider"},{label:"Settings",icon:dn,onClick:()=>{n(!0)}},{type:"divider"},{label:"Return to import form",icon:an,onClick:()=>{e.clearGraph()}}],children:(0,ae.jsx)(ln,{})}),(0,ae.jsx)(Mn,{model:e,open:t,onClose:()=>{n(!1)}})]})}),En=rr;var q=c($(),1),Gn=c(N(),1),In=c(F(),1),se=c(M(),1),ar=(0,In.makeStyles)()({formControl:{minWidth:130,maxWidth:220}}),sr=(0,Gn.observer)(function({model:e}){let{classes:t}=ar(),{walkChoices:n}=e;if(n.length===0)return null;let r=new Set(n.map(s=>s.name));return(0,se.jsxs)(q.FormControl,{size:"small",className:t.formControl,children:[(0,se.jsx)(q.InputLabel,{children:"Walk"}),(0,se.jsxs)(q.Select,{value:r.has(e.highlightedPath)?e.highlightedPath:"",label:"Walk","data-testid":"graph-walk-select",onChange:s=>{e.setHighlightedPath(s.target.value)},children:[(0,se.jsx)(q.MenuItem,{value:"",children:(0,se.jsx)("em",{children:"None"})}),n.map(({name:s,label:a})=>(0,se.jsx)(q.MenuItem,{value:s,children:a},s))]})]})}),Rn=sr;var T=c(M(),1),lr=(0,Bn.makeStyles)()({toolbar:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",borderBottom:"1px solid #ddd"}}),ir=(0,lt.observer)(function({model:e}){return(0,T.jsx)(W.Typography,{variant:"body2",children:e.zoomPercent})}),cr=(0,lt.observer)(function({model:e}){let{classes:t}=lr();return(0,T.jsxs)("div",{className:t.toolbar,children:[(0,T.jsx)(en,{model:e}),(0,T.jsx)(Wt,{model:e}),(0,T.jsx)(Rn,{model:e}),(0,T.jsx)(on,{model:e}),(0,T.jsx)(W.Tooltip,{title:"Zoom in",children:(0,T.jsx)(W.IconButton,{size:"small",onClick:()=>{e.zoom(1.5,e.width/2,e.canvasHeight/2)},children:(0,T.jsx)(Ft,{})})}),(0,T.jsx)(W.Tooltip,{title:"Zoom out",children:(0,T.jsx)(W.IconButton,{size:"small",onClick:()=>{e.zoom(1/1.5,e.width/2,e.canvasHeight/2)},children:(0,T.jsx)(Dt,{})})}),(0,T.jsx)(W.Tooltip,{title:"Zoom to fit",children:(0,T.jsx)(W.IconButton,{size:"small",onClick:()=>{e.zoomToFit()},children:(0,T.jsx)(zt,{})})}),(0,T.jsx)(ir,{model:e}),(0,T.jsx)(Zt,{model:e}),(0,T.jsx)(jt,{model:e}),(0,T.jsx)(En,{model:e})]})}),Tn=cr;var it=c(N(),1);var R=c(M(),1),ur={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},An="#2f8fd6",_n="#111",Hn="#9e9e9e",Pn="#c62828",Xn="#8e3fbf",K=12,mr={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},Le={display:"flex",alignItems:"center",gap:5},He={width:18,height:K-4,borderRadius:2},hr={...He,display:"flex",justifyContent:"center"};function Nn({color:o}){return(0,R.jsx)("div",{style:hr,children:(0,R.jsx)("div",{style:{width:2,backgroundColor:o}})})}var $n=(0,it.observer)(function({model:e}){let t=e.walkRowBars;if(!t)return null;let n=t.rows.flatMap(r=>r.call??[]);return(0,R.jsxs)("div",{style:mr,"data-testid":"graph-walk-rows-legend",children:[(0,R.jsxs)("div",{style:Le,children:[(0,R.jsx)("div",{style:{...He,backgroundColor:An}}),(0,R.jsxs)("span",{children:["sequence ",t.reference.label," also carries"]})]}),(0,R.jsxs)("div",{style:Le,children:[(0,R.jsx)("div",{style:{...He,backgroundColor:Xn}}),(0,R.jsx)("span",{children:"sequence it does not"})]}),n.some(r=>r.spanningReads!==0)?(0,R.jsxs)("div",{style:Le,children:[(0,R.jsx)(Nn,{color:_n}),(0,R.jsx)("span",{children:"allele length called for this walk"})]}):null,n.some(r=>r.spanningReads===0)?(0,R.jsxs)("div",{style:Le,children:[(0,R.jsx)(Nn,{color:Hn}),(0,R.jsx)("span",{children:"called with no read spanning it"})]}):null,n.some(r=>r.agrees===!1)?(0,R.jsxs)("div",{style:Le,children:[(0,R.jsx)("div",{style:He}),(0,R.jsxs)("span",{style:{color:Pn},children:["walk and call over ",Math.round(.1*100),"% apart"]})]}):null]})});function Pe(o){return`${(o/1e3).toFixed(o<1e4?1:0)} kb`}function zn(o,e){return e?` \u2248 ${Math.round(o/e)} units`:""}function fr(o,e,t,n){let r=o-e,s=r===0?"":` (${r>0?"+":"\u2212"}${Pe(Math.abs(r))})`;return`${Pe(o)}${zn(o,n)}${s}${t?"":" \xB7 partial walk"}`}function gr(o){let e=o.spanningReads===0?" \xB7 no spanning read":"";return` \xB7 called ${Pe(o.bp)}${e}`}var br=3;function yr(o,e,t){if(t(e)-t(0)<br)return[];let n=[];for(let r=e;r<o;r+=e)n.push(r);return n}var xr=(0,it.observer)(function({model:e}){let{walkRowBars:t}=e;if(!t)return null;let{scaleX:n,scaleY:r,translateX:s,translateY:a,width:l,canvasHeight:i}=e,u=v=>v*n+s,m=v=>v*20*r+a,{origin:d,unit:x,reference:C,rows:G}=t,L=Math.max(d+C.bp,e.loadedRegion?.end??0),E=(v,I,g,b="#333")=>{let p=u(I)+6,h=p+v.length*6.2<l;return(0,R.jsx)("text",{x:h?p:u(I)-6,y:g+4,fontSize:11,fontFamily:"sans-serif",fill:b,stroke:h?void 0:"white",strokeWidth:h?void 0:3,paintOrder:"stroke",textAnchor:h?"start":"end",children:v})};return(0,R.jsxs)("svg",{style:ur,width:l,height:i,"data-testid":"graph-walk-rows",children:[E(`${Pe(C.bp)}${zn(C.bp,x)}`,L,m(0)),G.map((v,I)=>{let g=m(I+1);if(g<-K||g>i+K)return null;let{call:b}=v;return(0,R.jsxs)("g",{"data-testid":"graph-walk-row",children:[v.runs.map(p=>(0,R.jsx)("rect",{x:u(d+p.start),y:g-K/2,width:Math.max(1,p.bp*n),height:K,fill:p.onReference?An:Xn},p.start)),x?yr(v.bp,x,p=>p*n).map(p=>(0,R.jsx)("line",{x1:u(d+p),x2:u(d+p),y1:g-K/2,y2:g+K/2,stroke:"white",strokeWidth:1},p)):null,b?(0,R.jsx)("rect",{"data-testid":"graph-walk-call",x:u(d+b.bp)-1,y:g-K/2-3,width:2,height:K+6,fill:b.spanningReads===0?Hn:_n}):null,E(`${fr(v.bp,C.bp,v.complete,x)}${b?gr(b):""}`,d+v.bp,g,b?.agrees===!1?Pn:void 0)]},v.name)})]})}),Fn=xr;var vr=26,wr=4e4,Sr=8,Mr=8,Cr=5.7,Lr=6,kr=13,ke=3,Xe=2;function Fe(o){return(o.length*Cr+Lr+ke)/2}var le=(kr+ke)/2,Er=Fe("1 bp");function $e(o,e,t){return{left:e-o,right:e+o,top:t-le,bottom:t+le}}function Gr(o,e,t){return o.right>0&&o.left<e&&o.bottom>0&&o.top<t}function Vn(o,e){return{left:6,right:6+o.length*6.2+8+ke,top:e-8-ke/2,bottom:e+8+ke/2}}function ze(o,e,t){return t<e?o:Math.min(Math.max(o,e),t)}function Ir(o,e){return o.left<e.right&&e.left<o.right&&o.top<e.bottom&&e.top<o.bottom}function Ye(o){return o>=1e6?`${+(o/1e6).toFixed(1)} Mb`:o>=1e3?`${+(o/1e3).toFixed(1)} kb`:`${o} bp`}function Yn(o){return`${Ye(o)} del`}function Rr(o,e,t,n){let r=o[0],s=o[o.length-1],a=(e.x-(r.x0+s.x1)/2)*t,l=(e.y-(r.y0+s.y1)/2)*n,i=Math.hypot(a,l);return i===0?{x:0,y:-1}:{x:a/i,y:l/i}}function Br(o,e){return Math.abs(e.x)*(o.right-o.left)/2+Math.abs(e.y)*(o.bottom-o.top)/2}function Tr(o,e){let t=(o.right-o.left)/2,n=(o.bottom-o.top)/2;return Math.min(e.x===0?1/0:t/Math.abs(e.x),e.y===0?1/0:n/Math.abs(e.y))}function Nr(o,e,t){let n=0;for(let r=1;r<o.length;r++){let s=o[r-1],a=o[r];n+=Math.hypot((a.x-s.x)*e,(a.y-s.y)*t)}return n}function Ar(o,e){let t=1/0,n=1/0,r=-1/0,s=-1/0;for(let a of o)for(let l of e[a]??[])t=Math.min(t,l.x),r=Math.max(r,l.x),n=Math.min(n,l.y),s=Math.max(s,l.y);return t===1/0?void 0:{minX:t,minY:n,maxX:r,maxY:s}}var Dn=new WeakMap;function _r(o,e){let t=Dn.get(o);if(t?.nodeLengths===e)return t.order;let n=Object.entries(o).filter(([r,s])=>s.length>0&&e.has(r)).sort(([r],[s])=>e.get(s)-e.get(r));return Dn.set(o,{nodeLengths:e,order:n}),n}var On=new WeakMap;function Hr(o,e,t,n){let{scaleX:r,scaleY:s}=t,a=On.get(o);if(a?.deletions===e&&a.scaleX===r&&a.scaleY===s&&a.version===n)return a.arcs;let l=[];for(let i of[...e].sort((u,m)=>m.bp-u.bp)){let u=bt(o,i,t),m=u?ft(u):void 0;if(u&&m){let{minX:d,minY:x,maxX:C,maxY:G}=Ie(u);l.push({deletion:i,curves:u,apex:m,extent:Math.max((C-d)*r,(G-x)*s)})}}return On.set(o,{deletions:e,scaleX:r,scaleY:s,version:n,arcs:l}),l}function Wn({nodePositions:o,nodeLengths:e,deletions:t,alleleDeletions:n,axis:r,translateX:s,translateY:a,width:l,height:i,reserved:u,version:m=0}){let{scaleX:d,scaleY:x}=r,C=[];for(let{deletion:b,curves:p,apex:h,extent:S}of Hr(o,t,r,m))if(S>=vr){let k=Yn(b.bp),B=Fe(k),Q=$e(B,0,0),H=h.x*d+s,A=h.y*x+a,ie=S>=B*2/Xe,ue=Rr(p,h,d,x),Ee=Br(Q,ue)+Mr,we=ie?H:ze(H+ue.x*Ee,B,l-B),Se=ie?A:ze(A+ue.y*Ee,le,i-le),Ze=Math.hypot(we-H,Se-A),ut;if(Ze>0){let qe={x:(we-H)/Ze,y:(Se-A)/Ze},mt=Tr(Q,qe);ut={arcX:H,arcY:A,labelX:we-qe.x*mt,labelY:Se-qe.y*mt}}C.push({label:{key:`del:${b.edgeIndex}`,text:k,x:we,y:Se,kind:"deletion",leader:ut},box:$e(B,we,Se)})}let G=new Set,L=[...n??[]].sort((b,p)=>p.bp-b.bp);for(let b of L){let p=Ar(b.nodeIds,o);if(!p)continue;let h=Math.max(p.minX*d+s,0),S=Math.min(p.maxX*d+s,l),k=Math.max(p.minY*x+a,0),B=Math.min(p.maxY*x+a,i);if(S<h||B<k)continue;let Q=Math.max(S-h,B-k),H=Yn(b.bp),A=Fe(H);if(Q>=A*2/Xe){for(let Ee of b.nodeIds)G.add(Ee);let ie=ze((h+S)/2,A,l-A),ue=ze((k+B)/2,le,i-le);C.push({label:{key:`alleledel:${b.nodeIds.join(",")}`,text:H,x:ie,y:ue,kind:"deletion"},box:$e(A,ie,ue)})}}for(let[b,p]of _r(o,e)){if(G.has(b))continue;let{x:h,y:S}=yt(p),k=S*x+a;if(k+le<=0||k-le>=i)continue;let B=Nr(p,d,x);if(B<Er*2/Xe)continue;let Q=Ye(e.get(b)),H=Fe(Q);if(B>=H*2/Xe){let A=h*d+s;C.push({label:{key:`node:${b}`,text:Q,x:A,y:k,kind:"node"},box:$e(H,A,k)})}}let E=Math.max(Sr,Math.floor(l*i/wr)),v=[...u??[]],I=[],g=0;for(let{label:b,box:p}of C)b.kind==="node"&&g>=E||Gr(p,l,i)&&!v.some(h=>Ir(h,p))&&(v.push(p),I.push(b),b.kind==="node"&&g++);return I}var xe=c(So(),1),qn=c(Mo(),1),Kn=c(Zn(),1);var Oe=class extends Kn.Canvas2DRenderingBackendBase{constructor(){super(...arguments);this.transform=null;this.batch=null;this.nodeHighlights=new Map;this.highlightedEdge=null;this.highlightFactor=1}resize(t,n){(0,qn.syncCanvasSize)(this.ctx.canvas,t,n)}uploadGeometry(t){this.batch=t,this.highlightedEdge=null}setNodeHighlights(t){this.nodeHighlights=t}setEdgeHighlight(t,n){this.highlightedEdge=t,this.highlightFactor=n}updateTransform(t){this.transform=t}render(t){if(!this.transform)return;let r=this.ctx,{width:s,height:a}=r.canvas;r.fillStyle=(0,xe.normalizedRgbToCssRgba)([t[0],t[1],t[2]],t[3]),r.fillRect(0,0,s,a);let l=this.batch;l&&(r.lineCap="round",r.lineJoin="round",this.renderEdges(l),this.renderNodes(l),this.renderArrows(l))}renderEdges(t){let n=this.transform,r=this.ctx,s=this.highlightedEdge===null?void 0:t.edgeCurveRuns.get(this.highlightedEdge);for(let{color:a,items:l}of ct(t.edgeCurves,(i,u)=>({color:De(s,u)?Te(i.color,this.highlightFactor):i.color,weight:i.thickness,last:De(s,u)}))){r.strokeStyle=(0,xe.abgrToCssRgba)(a),r.lineWidth=l[0].thickness*2*n.dpr,r.beginPath();for(let i of l){let u=i.curves[0];r.moveTo(u.x0*n.scaleX+n.translateX,u.y0*n.scaleY+n.translateY);for(let m of i.curves)r.bezierCurveTo(m.cx0*n.scaleX+n.translateX,m.cy0*n.scaleY+n.translateY,m.cx1*n.scaleX+n.translateX,m.cy1*n.scaleY+n.translateY,m.x1*n.scaleX+n.translateX,m.y1*n.scaleY+n.translateY)}r.stroke()}}renderNodes(t){let n=this.transform,r=this.ctx,s=new Map;for(let[a,l]of this.nodeHighlights){let i=t.nodeStrokeRuns.get(a);if(i)for(let u=i.start;u<i.start+i.count;u++)s.set(u,l)}for(let{color:a,items:l}of ct(t.nodeStrokes,(i,u)=>{let m=s.get(u);return{color:m===void 0?i.color:Te(i.color,m),weight:i.thickness,last:m!==void 0}})){r.strokeStyle=(0,xe.abgrToCssRgba)(a),r.lineWidth=l[0].thickness*2*n.dpr,r.beginPath();for(let i of l){let u=i.points[0];r.moveTo(u.x*n.scaleX+n.translateX,u.y*n.scaleY+n.translateY);for(let m=1,d=i.points.length;m<d;m++){let x=i.points[m];r.lineTo(x.x*n.scaleX+n.translateX,x.y*n.scaleY+n.translateY)}}r.stroke()}}renderArrows(t){let n=this.transform,r=this.ctx,s=this.highlightedEdge===null?void 0:t.arrowRuns.get(this.highlightedEdge);for(let{color:a,items:l}of ct(t.arrows,(i,u)=>({color:De(s,u)?Te(i.color,this.highlightFactor):i.color,weight:0,last:De(s,u)}))){r.fillStyle=(0,xe.abgrToCssRgba)(a),r.beginPath();for(let i of l){let u=i.x*n.scaleX+n.translateX,m=i.y*n.scaleY+n.translateY,d=i.size*n.dpr;r.moveTo(u,m),r.lineTo(u-Math.cos(i.angle-.5)*d,m-Math.sin(i.angle-.5)*d),r.lineTo(u-Math.cos(i.angle+.5)*d,m-Math.sin(i.angle+.5)*d),r.closePath()}r.fill()}}dispose(){super.dispose(),this.batch=null,this.nodeHighlights=new Map,this.highlightedEdge=null}};function De(o,e){return o!==void 0&&e>=o.start&&e<o.start+o.count}function ct(o,e){let t=new Map,n=new Map;for(let r=0,s=o.length;r<s;r++){let a=o[r],{color:l,weight:i,last:u}=e(a,r),m=u?n:t,d=`${l}:${i}`,x=m.get(d);x?x.items.push(a):m.set(d,{color:l,items:[a]})}return[...t.values(),...n.values()]}function jn(o){return Promise.resolve(new Oe(o))}var Pr=50;function Jn(o,e){return e>0?Math.max(1,o/e):Pr}function Xr(o){let e=new Set,t=1/0,n=-1/0;for(let r of o)e.add(r.minY),t=Math.min(t,r.minY),n=Math.max(n,r.minY);return e.size>1?(n-t)/(e.size-1):void 0}function $r(o,e,t){let n=Jn(e,o.length);return{x:n,y:t>0?Jn(t,o.length):Xr(o)??n}}function Qn(o,e,t,n){return o===void 0?$r(e,t,n):typeof o=="number"?{x:o,y:o}:o}function zr(o,e,t){let n=o.get(e);n||(n=new Map,o.set(e,n));let r=n.get(t);return r||(r=[],n.set(t,r)),r}function eo(o,e,t,n,r,s,a){let l=Math.floor(t/e.x),i=Math.floor(r/e.x),u=Math.floor(n/e.y),m=Math.floor(s/e.y);for(let d=l;d<=i;d++)for(let x=u;x<=m;x++)zr(o,d,x).push(a)}function to(o,e,t,n,r,s){let a=Math.floor((t-r)/e.x),l=Math.floor((t+r)/e.x),i=Math.floor((n-s)/e.y),u=Math.floor((n+s)/e.y),m=[],d=new Set;for(let x=a;x<=l;x++){let C=o.get(x);if(C)for(let G=i;G<=u;G++){let L=C.get(G);if(L)for(let E of L)d.has(E)||(d.add(E),m.push(E))}}return m}var Ve=class{constructor(e,t){this.cells=new Map;let n=[],r=0,s=0;for(let[a,l]of Object.entries(e))for(let i=0;i<l.length-1;i++){let u=l[i],m=l[i+1],d=Math.min(u.x,m.x),x=Math.min(u.y,m.y),C=Math.max(u.x,m.x),G=Math.max(u.y,m.y);r+=C-d,s+=G-x,n.push({entry:{nodeId:a,segmentIdx:i},minX:d,minY:x,maxX:C,maxY:G})}this.cellSize=Qn(t,n,r,s);for(let a of n)eo(this.cells,this.cellSize,a.minX,a.minY,a.maxX,a.maxY,a.entry)}query(e,t,n,r=n){return to(this.cells,this.cellSize,e,t,n,r)}},We=class{constructor(e,t,n,r,s,a,l=0){this.cells=new Map;this.edgeCurves=wt(e,t,r,a,l);let i=[],u=0,m=0;for(let d=0;d<t.edges.length;d++){let x=t.edges[d],C=e[x.from],G=e[x.to],L=this.edgeCurves.get(d);if(C?.length&&G?.length&&L){let{minX:E,minY:v,maxX:I,maxY:g}=Ie(L),b=x.pathIds?.length??0;if(n&&b>0){let p=0,h=0;for(let S of Re(C,G,b,r))p=Math.max(p,Math.abs(S.x)),h=Math.max(h,Math.abs(S.y));E-=p,v-=h,I+=p,g+=h}u+=I-E,m+=g-v,i.push({ei:d,minX:E,minY:v,maxX:I,maxY:g})}}this.cellSize=Qn(s,i,u,m);for(let d of i)eo(this.cells,this.cellSize,d.minX,d.minY,d.maxX,d.maxY,d.ei)}getCurves(e){return this.edgeCurves.get(e)}query(e,t,n,r=n){return to(this.cells,this.cellSize,e,t,n,r)}};function ao(o,e,t,n,r,s){let a=r-t,l=s-n,i=a*a+l*l;if(i===0)return Math.hypot(o-t,e-n);let u=Math.max(0,Math.min(1,((o-t)*a+(e-n)*l)/i));return Math.hypot(o-(t+u*a),e-(n+u*l))}function Fr(o,e,t,n,r,s,a,l,i,u){let m=1/0,d=20,x=t,C=n;for(let G=1;G<=d;G++){let L=G/d,E=1-L,v=E*E*E*t+3*E*E*L*r+3*E*L*L*a+L*L*L*i,I=E*E*E*n+3*E*E*L*s+3*E*L*L*l+L*L*L*u;m=Math.min(m,ao(o,e,x,C,v,I)),x=v,C=I}return m}function Yr(o,e,t){return Fr(o,e,t.x0,t.y0,t.cx0,t.cy0,t.cx1,t.cy1,t.x1,t.y1)}function no(o,e,t,n=1){let r=1/0;for(let s of t){let a=Yr(o,e,n===1?s:{x0:s.x0,y0:s.y0*n,cx0:s.cx0,cy0:s.cy0*n,cx1:s.cx1,cy1:s.cy1*n,x1:s.x1,y1:s.y1*n});a<r&&(r=a)}return r}var oo=new WeakMap;function Dr(o,e){let t=oo.get(o);if(t?.version===e)return t.index;let n=new Ve(o);return oo.set(o,{version:e,index:n}),n}var ro=new WeakMap;function Or(o,e,t,n,r,s){let a=ro.get(o);if(a?.graph===e&&a.drawPaths===t&&a.scaleX===n.scaleX&&a.scaleY===n.scaleY&&a.version===r&&a.deletions===s)return a.index;let l=new We(o,e,t,n,void 0,s,r);return ro.set(o,{graph:e,drawPaths:t,scaleX:n.scaleX,scaleY:n.scaleY,version:r,index:l,deletions:s}),l}var Vr=5;function so(o,e,t,n,r=0,s){let a=je(n),l=Dr(o,r),i=C=>Math.max(Vr,C)/n.scaleX,u=i(s?.maxHalfWidthPx??0),m=l.query(e,t,u,u/a),d=null,x=1/0;for(let{nodeId:C,segmentIdx:G}of m){let L=o[C],E=ao(e,t*a,L[G].x,L[G].y*a,L[G+1].x,L[G+1].y*a);E<x&&E<i(s?.halfWidthPx(C)??0)&&(x=E,d=C)}return d}function lo(o,e,t,n,r,s,a=0,l,i){let u=je(r),m=10/r.scaleX,d=Or(o,e,s,r,a,l),x=d.query(t,n,m,m/u),C=null,G=m;for(let L of x){let E=e.edges[L],v=o[E.from],I=o[E.to];if(!v?.length||!I?.length||i?.has(L))continue;let g=E.pathIds?.length??0,b=d.getCurves(L);if(!b)continue;let p;if(!s||g===0)p=no(t,n*u,b,u);else{let h=1/0;for(let S of Re(v,I,g,r)){let k=S.x===0&&S.y===0?b:gt(b,S.x,S.y),B=no(t,n*u,k,u);B<h&&(h=B)}p=h}p<G&&(G=p,C=L)}return C}function io(o){let e=o.deltaY*(o.deltaMode===1?40:o.deltaMode===2?800:1),t=(o.ctrlKey?10:1)*e/100;return 1.1**-Math.max(-2,Math.min(2,t))}var w=c(M(),1),co={position:"absolute",bottom:8,right:8,background:"rgba(0,0,0,0.75)",color:"white",padding:"4px 8px",borderRadius:4,fontSize:12,pointerEvents:"none"},Wr={position:"relative"},Ur={position:"relative",lineHeight:0},Zr={position:"absolute",inset:0,zIndex:10,lineHeight:"normal",pointerEvents:"none"},qr={position:"absolute",left:6,transform:"translateY(-50%)",background:"rgba(255,255,255,0.82)",padding:"0 4px",borderRadius:3,fontSize:11,lineHeight:"16px",whiteSpace:"nowrap",pointerEvents:"none",zIndex:4},Kr=(0,J.observer)(function({model:e}){let t=e.drawnRowLabels;return(0,w.jsx)(w.Fragment,{children:t.map(({label:n,y:r})=>{let s=r*e.scaleY+e.translateY;return s>=0&&s<=e.canvasHeight?(0,w.jsx)("div",{"data-testid":"graph-row-label",style:{...qr,top:s},children:n},r):null})})}),jr={position:"absolute",top:6,right:6,display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4,pointerEvents:"none",zIndex:4},dt={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},Jr={display:"flex",alignItems:"center",gap:5},Qr={width:18,height:3,borderRadius:2},ea=(0,J.observer)(function({model:e}){let{pathLegend:t}=e;return t.length>0?(0,w.jsx)("div",{style:dt,"data-testid":"graph-path-legend",children:t.map(({name:n,label:r,color:s})=>(0,w.jsxs)("div",{style:Jr,children:[(0,w.jsx)("div",{style:{...Qr,backgroundColor:s}}),(0,w.jsx)("span",{children:r})]},n))}):null}),ta=(0,J.observer)(function({model:e}){let t=e.walkHighlight;if(!t)return null;let n=e.walkChoices.find(s=>s.name===t.name)?.label??t.name,r=t.referenceBp===void 0?"":t.bp===t.referenceBp?", the reference length":`, ${t.bp>t.referenceBp?"+":"\u2212"}${Math.abs(t.bp-t.referenceBp).toLocaleString()} bp against the reference`;return(0,w.jsxs)("div",{style:dt,"data-testid":"graph-walk-readout",children:[(0,w.jsx)("strong",{children:n}),": ",t.steps.toLocaleString()," steps,"," ",t.bp.toLocaleString()," bp",r]})}),na={minWidth:90,height:8,borderRadius:2,background:`linear-gradient(to right, ${Array.from({length:7},(o,e)=>`hsl(${e/6*St}, 70%, 50%) ${e/6*100}%`).join(", ")})`},oa={display:"flex",justifyContent:"space-between",gap:8},ra=(0,J.observer)(function({model:e}){let t=e.referenceRampDomain;return t?(0,w.jsxs)("div",{style:dt,"data-testid":"graph-ramp-legend",children:[(0,w.jsx)("div",{style:na}),(0,w.jsxs)("div",{style:oa,children:[(0,w.jsx)("span",{children:t.start.toLocaleString()}),(0,w.jsxs)("span",{children:["(",Ye(t.end-t.start),")"]}),(0,w.jsx)("span",{children:t.end.toLocaleString()})]})]}):null}),uo={position:"absolute",transform:"translate(-50%, -50%)",background:"rgba(255,255,255,0.78)",padding:"0 3px",borderRadius:3,fontSize:10,lineHeight:"13px",whiteSpace:"nowrap",pointerEvents:"none",zIndex:3},aa={...uo,color:"#18181c",fontWeight:600},sa={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:2},la=(0,J.observer)(function({model:e}){let{nodePositions:t}=e;if(!t)return null;let n=Wn({nodePositions:t,nodeLengths:e.nodeLengths,deletions:e.showDeletionEdges?e.deletions:[],alleleDeletions:e.alleleDeletions,axis:e.axisScale,translateX:e.translateX,translateY:e.translateY,width:e.width,height:e.canvasHeight,reserved:e.drawnRowLabels.map(({label:s,y:a})=>Vn(s,a*e.scaleY+e.translateY)),version:e.positionsVersion}),r=n.flatMap(({key:s,leader:a})=>a?[{key:s,...a}]:[]);return(0,w.jsxs)(w.Fragment,{children:[r.length>0?(0,w.jsx)("svg",{style:sa,width:e.width,height:e.canvasHeight,children:r.map(({key:s,arcX:a,arcY:l,labelX:i,labelY:u})=>(0,w.jsx)("line",{"data-testid":"graph-label-leader",x1:a,y1:l,x2:i,y2:u,stroke:"#18181c",strokeWidth:1},s))}):null,n.map(({key:s,text:a,x:l,y:i,kind:u})=>(0,w.jsx)("div",{"data-testid":"graph-size-label",style:{...u==="deletion"?aa:uo,left:l,top:i},children:a},s))]})}),ia=(0,J.observer)(function({model:e}){let t=e.hoveredNode?e.nodeById?.get(e.hoveredNode):null,n=e.hoveredEdge!==null&&e.graph?e.graph.edges[e.hoveredEdge]:null,r=t?Mt(t):void 0,s=e.hoveredEdge===null?void 0:e.deletions.find(a=>a.edgeIndex===e.hoveredEdge);return(0,w.jsxs)(w.Fragment,{children:[t?(0,w.jsxs)("div",{style:co,children:[(0,w.jsx)("strong",{children:t.name})," \u2014 length:"," ",t.length.toLocaleString(),", depth:"," ",t.depth.toFixed(1),r?(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)("br",{}),r.sample," ",Ct(r)," (rank"," ",t.stable?.rank,")"]}):null]}):null,n?(0,w.jsx)("div",{style:co,children:s?(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)("strong",{children:"Deletion"})," ",s.bp.toLocaleString()," bp",(0,w.jsx)("br",{}),s.refName,":",s.start.toLocaleString(),"-",s.end.toLocaleString()]}):(0,w.jsxs)(w.Fragment,{children:["Edge: ",n.from," \u2192 ",n.to]})}):null]})}),ca=(0,J.observer)(function({model:e,nodeId:t,top:n,left:r,onClose:s}){let{own:a,reference:l,highlight:i}=e.nodeLaunchTargets(t);return(0,w.jsx)(ve.Menu,{open:!0,anchorReference:"anchorPosition",anchorPosition:{top:n,left:r},onClose:()=>{s()},onMenuItemClick:u=>{u()},menuItems:[{label:"Node details",icon:It,onClick:()=>{e.showNodeDetails(t)}},...Lt({own:a,reference:l,highlight:i,onShowLinear:u=>{e.showInLinearView(u)},onHighlight:e.canHighlightInLinearView?u=>{e.highlightInLinearView(u)}:void 0})]})}),da=(0,J.observer)(function({model:e}){let{canvasRef:t,canvas:n}=(0,po.useRenderingBackend)(jn,e),r=(0,j.useRef)({x:0,y:0}),s=(0,j.useRef)(!1),a=(0,j.useRef)({frame:0,pan:null,hover:null});(0,j.useEffect)(()=>()=>{cancelAnimationFrame(a.current.frame)},[]);let[l,i]=(0,j.useState)(void 0);(0,j.useEffect)(()=>{if(n){let S=function(k){k.preventDefault();let B=h.getBoundingClientRect();e.zoom(io(k),k.clientX-B.left,k.clientY-B.top)};var p=S;let h=n;return h.addEventListener("wheel",S,{passive:!1}),()=>{h.removeEventListener("wheel",S)}}},[n,e]);function u(p,h){return{x:(p-e.translateX)/e.scaleX,y:(h-e.translateY)/e.scaleY}}function m(p){let h=p.currentTarget.getBoundingClientRect();return u(p.clientX-h.left,p.clientY-h.top)}function d(p,h){let{nodePositions:S}=e;return S?so(S,p,h,e.axisScale,e.positionsVersion,e.nodeInk):null}function x(p){if(p.button===0){s.current=!1;let{x:h,y:S}=m(p),k=d(h,S);k?e.setDraggingNode(k):e.setPanning(!0),r.current={x:p.clientX,y:p.clientY}}}function C(){let p=a.current;if(p.frame=0,p.pan&&(e.setTransform(e.scale,e.translateX+p.pan.dx,e.translateY+p.pan.dy),p.pan=null),p.hover&&e.nodePositions&&e.graph){let{x:h,y:S}=u(p.hover.x,p.hover.y);p.hover=null;let k=d(h,S);e.setHoveredNode(k),e.setHoveredEdge(k?null:lo(e.nodePositions,e.graph,h,S,e.axisScale,e.effectiveDrawPaths,e.positionsVersion,e.deletionEdgeIndexes,e.hiddenEdgeIndexes))}}function G(){a.current.frame||(a.current.frame=requestAnimationFrame(C))}function L(){let p=a.current;cancelAnimationFrame(p.frame),p.frame=0,p.pan=null,p.hover=null}function E(p){let h=p.clientX-r.current.x,S=p.clientY-r.current.y;r.current={x:p.clientX,y:p.clientY},(Math.abs(h)>1||Math.abs(S)>1)&&(s.current=!0);let k=a.current;if(e.draggingNode)e.moveNode(e.draggingNode,h/e.scaleX,S/e.scaleY);else if(e.isPanning)k.pan={dx:(k.pan?.dx??0)+h,dy:(k.pan?.dy??0)+S},G();else{let B=p.currentTarget.getBoundingClientRect();k.hover={x:p.clientX-B.left,y:p.clientY-B.top},G()}}function v(){e.stopDragging()}function I(){L(),e.stopDragging(),e.setHoveredNode(null),e.setHoveredEdge(null)}function g(p){let{x:h,y:S}=m(p),k=d(h,S);k&&(p.preventDefault(),i({nodeId:k,top:p.clientY,left:p.clientX}))}function b(p){if(!s.current){let{x:h,y:S}=m(p),k=d(h,S);e.setSelectedNode(k),k&&e.showNodeDetails(k)}}return(0,w.jsxs)("div",{style:Wr,children:[(0,w.jsx)(Tn,{model:e}),(0,w.jsxs)("div",{style:Ur,children:[(0,w.jsx)("canvas",{ref:t,"data-testid":"graph-genome-canvas",style:{width:e.width,height:e.canvasHeight,cursor:e.isPanning||e.draggingNode?"grabbing":"grab",display:"block"},onMouseDown:x,onMouseMove:E,onMouseUp:v,onMouseLeave:I,onClick:b,onContextMenu:g}),(0,w.jsx)(Kr,{model:e}),(0,w.jsx)(la,{model:e}),(0,w.jsx)(Tt,{model:e}),(0,w.jsx)(Xt,{model:e}),(0,w.jsx)(Ht,{model:e}),(0,w.jsx)(Fn,{model:e}),(0,w.jsxs)("div",{style:jr,children:[(0,w.jsx)(ra,{model:e}),(0,w.jsx)(ea,{model:e}),(0,w.jsx)($n,{model:e}),(0,w.jsx)(ta,{model:e})]}),(0,w.jsx)("div",{style:Zr,children:(0,w.jsx)(ve.LoadingOverlay,{isVisible:e.isLoading,immediate:!e.layoutResult,statusMessage:e.statusMessage,onCancel:e.canCancelLoad?()=>{e.cancelLoad()}:void 0})})]}),(0,w.jsx)(ia,{model:e}),l?(0,w.jsx)(ca,{model:e,nodeId:l.nodeId,top:l.top,left:l.left,onClose:()=>{i(void 0)}}):null,e.error?(0,w.jsx)(ve.ErrorBanner,{error:e.error,onReset:e.canRetryLoad?()=>{e.retryLoad()}:void 0}):null]})}),mo=da;var Ue=c(Me(),1),Y=c($(),1),ho=c(N(),1),fo=c(F(),1),z=c(M(),1),pa=(0,fo.makeStyles)()({paper:{padding:16,margin:8,maxWidth:560,marginInline:"auto",display:"flex",flexDirection:"column",gap:12},row:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:8}}),ua=(0,ho.observer)(function({model:e}){let{classes:t}=pa();return e.isLoading?(0,z.jsxs)(Y.Paper,{className:t.paper,"data-testid":"graph-genome-loading",children:[(0,z.jsxs)("div",{className:t.row,children:[(0,z.jsx)(Ue.LoadingEllipses,{variant:"h6",message:e.statusMessage}),(0,z.jsx)(Y.Button,{size:"small","data-testid":"graph-genome-cancel",onClick:()=>{e.cancelLoad()},children:"Cancel"})]}),(0,z.jsx)(Y.LinearProgress,{variant:"indeterminate"})]}):e.error?(0,z.jsx)(Y.Paper,{className:t.paper,children:(0,z.jsx)(Ue.ErrorBanner,{error:e.error,onReset:()=>{e.retryLoad()}})}):(0,z.jsx)(Y.Paper,{className:t.paper,"data-testid":"graph-genome-load-canceled",children:(0,z.jsxs)("div",{className:t.row,children:[(0,z.jsx)(Y.Typography,{variant:"h6",children:"Loading canceled"}),(0,z.jsx)(Y.Button,{variant:"contained",size:"small","data-testid":"graph-genome-retry",onClick:()=>{e.retryLoad()},children:"Retry"})]})})}),pt=ua;var go=c(Ge(),1),bo=c(Me(),1),D=c($(),1),yo=c(N(),1),xo=c(F(),1),_=c(M(),1),ma=`H	VN:Z:1.0
+S	1	ACGT
+S	2	GGCC
+S	3	TTAA
+S	4	CCGG
+L	1	+	2	+	0M
+L	1	+	3	+	0M
+L	2	+	4	+	0M
+L	3	+	4	+	0M`,ha=(0,xo.makeStyles)()({column:{display:"flex",flexDirection:"column",gap:8},rowEnd:{display:"flex",gap:8,alignItems:"flex-end"},rowCenter:{display:"flex",gap:8,alignItems:"center"},flex1:{flex:1},paper:{padding:16,margin:8,maxWidth:560,marginInline:"auto"},header:{marginBottom:12},footer:{marginTop:12,display:"flex",justifyContent:"flex-end"}}),fa=(0,yo.observer)(function({model:e}){let{classes:t}=ha(),[n,r]=(0,go.useState)("");function s(){n.trim()&&e.loadGFAFromLocation({uri:n,locationType:"UriLocation"})}function a(l){let i=l.target.files?.[0];i&&i.text().then(u=>e.loadGFA(u,i.name)).catch(u=>{e.setError(u)})}return(0,_.jsxs)(D.Paper,{className:t.paper,children:[(0,_.jsx)("div",{className:t.header,children:(0,_.jsx)(D.Typography,{variant:"h6",children:"Load a GFA graph"})}),(0,_.jsxs)("div",{className:t.column,children:[(0,_.jsxs)("div",{className:t.rowCenter,children:[(0,_.jsxs)(D.Button,{variant:"outlined",component:"label",size:"small",children:["Choose file",(0,_.jsx)("input",{type:"file",accept:".gfa,.gfa1,.gfa2",hidden:!0,onChange:l=>{a(l)}})]}),(0,_.jsx)(D.Typography,{variant:"caption",color:"text.secondary",children:"Whole-file GFA; best for small/medium graphs."})]}),(0,_.jsxs)("div",{className:t.rowEnd,children:[(0,_.jsx)(D.TextField,{size:"small",label:"URL",placeholder:"https://example.com/graph.gfa",value:n,onChange:l=>{r(l.target.value)},onKeyDown:l=>{l.key==="Enter"&&s()},className:t.flex1}),(0,_.jsx)(D.Button,{variant:"contained",onClick:()=>{s()},disabled:!n.trim(),children:"Open"})]})]}),(0,_.jsx)("div",{className:t.footer,children:(0,_.jsx)(D.Button,{size:"small",onClick:()=>{e.loadGFA(ma,"Example graph")},children:"Load 4-node example"})}),e.error?(0,_.jsx)(bo.ErrorBanner,{error:e.error}):null]})}),vo=fa;var U=c(M(),1),ga=(0,wo.observer)(function({model:e}){return e.hasGraph?(0,U.jsx)(mo,{model:e}):e.canRetryLoad&&(e.error||e.loadCanceled)?(0,U.jsx)(pt,{model:e}):(0,U.jsxs)(U.Fragment,{children:[e.isLoading?(0,U.jsx)(pt,{model:e}):null,(0,U.jsx)("div",{hidden:e.isLoading,children:(0,U.jsx)(vo,{model:e})})]})}),dl=ga;export{dl as default};
+//# sourceMappingURL=GraphGenomeView-TM7WYDLH.js.map