jbrowse-plugin-graphgenomeviewer 1.0.0 → 3.0.3

package/dist/chunks/GraphGenomeView-UD5WCV3Q.js

@@ -0,0 +1,14 @@
+import{$ as xt,A as ft,F as gt,O as bt,S as yt,X as Ke,_ as Be,a as P,aa as vt,b as yo,c as xo,ea as wt,j as ut,ja as St,la as Mt,ma as Y,o as ce,s as mt,t as Ge,u as ht,v as qe,w as Ie,y as Re}from"./chunk-X3X74OGB.js";import{a as M,b as N,c as z,d as Se,e as Ee}from"./chunk-XEJ47DLD.js";import"./chunk-ZNGDWZ6Z.js";import"./chunk-F4C3BEPV.js";import{a as Ze,b as p}from"./chunk-FY3BTKY4.js";var Lt=Ze((ua,Ct)=>{Ct.exports=JBrowseExports["@jbrowse/render-core/useRenderingBackend"]});var ln=Ze((Wa,sn)=>{sn.exports=JBrowseExports["@mui/material/Button"]});var On=Ze((ks,Fn)=>{Fn.exports=JBrowseExports["@jbrowse/render-core/renderingBackendBase"]});var bo=p(N(),1);var j=p(Ee(),1),xe=p(Se(),1),so=p(Lt(),1);var kt=p(M(),1),Et=(0,P.createSvgIcon)((0,kt.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=p(N(),1);var It=p(N(),1);function vo(o){return o.length*6.2+8}function wo(o,e){return o.x0<e.x1&&o.x1>e.x0&&o.y0<e.y1&&o.y1>e.y0}function Te(o,e,t=[]){let n=[...t],r=[],s=19;for(let a of o){let i=vo(a.text),l=a.y>e.height/2?-1:1;for(let u=0;u<=(a.stack??0);u++){let m=a.y+l*u*s,c={x0:a.x-i/2,x1:a.x+i/2,y0:m-11-4,y1:m+4};if(c.x1<0||c.x0>e.width||c.y1<0||c.y0>e.height)break;if(!n.some(x=>wo(x,c))){n.push(c),r.push({...a,y:m,w:i});break}}}return r}var me=p(M(),1);function he({x:o,y:e,w:t,text:n,color:r,italic:s,small:a,dimmed:i,title:l,testId:u,onClick:m}){return(0,me.jsxs)("g",{style:{pointerEvents:m?"auto":"none",cursor:m?"pointer":void 0,opacity:i?.35:1},"data-testid":u,onClick:m,children:[l?(0,me.jsx)("title",{children:l}):null,(0,me.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,me.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=p(M(),1),So={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},Mo=3.4,Co=240,Lo=8,ko=(0,It.observer)(function({model:e}){let{bubbleHalos:t,walkHighlight:n}=e;if(t.length===0)return null;let{scaleX:r,scaleY:s,translateX:a,translateY:i,width:l,canvasHeight:u,contigThickness:m}=e,c=m*Mo,x=g=>({x:g.x*r+a,y:g.y*s+i}),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:l-Co,x1:l,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:d}=x(g.top);return{item:{halo:g},x:b,y:d-c/2-6,text:g.label}}),...E.flatMap(g=>g.routes.map(b=>{let{x:d,y:h}=x(b.at);return{item:{halo:g,route:b},x:d,y:h+4,text:b.text,stack:Lo}}))],I=Te(v,{width:l,height:u},L);return(0,de.jsxs)("svg",{style:So,width:l,height:u,"data-testid":"graph-bubble-halos",children:[(0,de.jsx)("g",{transform:`translate(${a} ${i}) 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:c,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke"},`${g.bubble.start}-${g.bubble.end}`))}),I.map(({item:{halo:g,route:b},x:d,y:h,w:S,text:k})=>b?(0,de.jsx)(he,{x:d,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)(he,{x:d,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`))]})}),Rt=ko;var Tt=p(z(),1),Nt=p(N(),1);var X=p(M(),1),Eo={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},Go={position:"absolute",left:8,top:8,zIndex:5,background:"rgba(255,255,255,0.9)",textTransform:"none"},je=15,Io=8,Ro=150,Bo=10;function Bt(o,e){let t=12+26*Math.log10(1+o);return Math.min(t,e)}var To=(0,Nt.observer)(function({model:e}){let{bubbleGlyphs:t,poppedFrom:n}=e,r=n?(0,X.jsxs)(Tt.Button,{size:"small",variant:"outlined",style:Go,"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:i,width:l,canvasHeight:u}=e,m=i,c=v=>v*s+a,x=Math.max(2,Math.min(Io,Math.floor((m-60)/je))),C=[...t].sort((v,I)=>I.bubble.end-I.bubble.start-(v.bubble.end-v.bubble.start)),G=[],L=C.flatMap(v=>{let I=(c(v.bubble.start)+c(v.bubble.end))/2;if(I<0||I>l)return[];let g=v.label.length*6.2/2,b=Math.min(Math.max(I,g+4),l-Ro-g),d=G.findIndex(S=>S<b-g-10),h=d===-1?G.length:d;return h>=x?[]:(G[h]=b+g,[{g:v,bx:I,cx:b,y:14+h*je}])}),E=Math.max(24,m-G.length*je-14);return(0,X.jsxs)(X.Fragment,{children:[r,(0,X.jsxs)("svg",{style:Eo,width:l,height:u,"data-testid":"graph-bubble-overlay",children:[C.map(({bubble:v,kind:I,label:g})=>{let b=c(v.start),d=c(v.end),h=Math.max(d-b,Bo),S=(b+d)/2,k=Bt(v.longestAlleleLength,E),B=ce[I],H=v.end-v.start-v.shortestAlleleLength,A=H>0?6+10*Math.log10(1+H):0,le=`${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]},le)}),L.map(({g:v,bx:I,cx:g,y:b})=>{let d=ce[v.kind],h=m-Bt(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:d,strokeWidth:.7,strokeOpacity:.5}),(0,X.jsx)("text",{x:g,y:b,fontSize:11,fontFamily:"sans-serif",fill:d,textAnchor:"middle",children:v.label})]},`${v.bubble.start}-${v.bubble.end}-label`)})]})]})}),At=To;var _t=p(N(),1);var ee=p(M(),1),No={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:3},Je="#1c1c22",Ao=(0,_t.observer)(function({model:e}){let{genePins:t}=e;if(t.length===0)return null;let{scaleX:n,scaleY:r,translateX:s,translateY:a,width:i,canvasHeight:l,contigThickness:u}=e,m=Te([...t].sort((c,x)=>x.gene.end-x.gene.start-(c.gene.end-c.gene.start)).map(c=>({item:c,x:c.at.x*n+s,y:c.at.y*r+a+u+18,text:c.covered<.98?`${c.gene.name} \u2026`:c.gene.name})),{width:i,height:l});return(0,ee.jsxs)("svg",{style:No,width:i,height:l,"data-testid":"graph-gene-pins",children:[(0,ee.jsx)("g",{transform:`translate(${s} ${a}) scale(${n} ${r})`,children:t.map(c=>c.exons?(0,ee.jsx)("path",{d:c.exons,fill:"none",stroke:Je,strokeOpacity:.9,strokeWidth:u*.55,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"},`${c.gene.name}-${c.gene.start}`):null)}),m.map(({item:c,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:c.at.y*r+a+u/2,stroke:Je,strokeWidth:.8,strokeOpacity:.6}),(0,ee.jsx)(he,{x,y:C,w:G,text:L,color:Je,italic:!0,title:`${c.gene.name} ${c.gene.refName}:${c.gene.start.toLocaleString()}-${c.gene.end.toLocaleString()}${c.covered<.98?", runs past the cut":""}`,testId:"graph-gene-pin-label"})]},`${c.gene.name}-${c.gene.start}-label`))]})}),Ht=Ao;var Pt=p(M(),1),Xt=(0,P.createSvgIcon)((0,Pt.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 Qe=p(M(),1),$t=(0,P.createSvgIcon)([(0,Qe.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,Qe.jsx)("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"},"1")],"ZoomIn");var zt=p(M(),1),Yt=(0,P.createSvgIcon)((0,zt.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=p(z(),1),at=p(N(),1),En=p(Y(),1);var te=p(z(),1),Dt=p(N(),1),Ft=p(Y(),1);var fe=p(M(),1),_o=(0,Ft.makeStyles)()({formControl:{minWidth:100}}),Ho=(0,Dt.observer)(function({model:e}){let{classes:t}=_o();return(0,fe.jsxs)(te.FormControl,{size:"small",className:t.formControl,children:[(0,fe.jsx)(te.InputLabel,{children:"Color"}),(0,fe.jsx)(te.Select,{value:e.colorScheme,label:"Color",onChange:n=>{e.setColorScheme(n.target.value)},children:Re.map(({value:n,label:r})=>(0,fe.jsx)(te.MenuItem,{value:n,children:r},n))})]})}),Ot=Ho;var tt=p(z(),1),nt=p(N(),1),Vt=p(Y(),1),ge=p(M(),1),Wt=(0,Vt.makeStyles)()({stats:{marginLeft:"auto"},perf:{color:"#888",fontVariantNumeric:"tabular-nums"}});function et(o){return o===void 0?"\u2013":`${Math.round(o)}ms`}var Po=(0,nt.observer)(function({model:e}){let{classes:t}=Wt(),{lastFetchMs:n,lastLayoutMs:r,lastGeometryMs:s}=e,a=n!==void 0||r!==void 0||s!==void 0;return e.showPerf&&a?(0,ge.jsxs)(tt.Typography,{variant:"caption",className:t.perf,"data-testid":"graph-perf-stats",children:["fetch ",et(n)," \xB7 layout ",et(r)," \xB7 geom"," ",et(s)]}):null}),Xo=(0,nt.observer)(function({model:e}){let{classes:t}=Wt();return(0,ge.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??"",children:[(0,ge.jsxs)(tt.Typography,{variant:"body2",component:"span",children:[e.nodeCount," nodes, ",e.edgeCount," edges",e.pathCount>0?`, ${e.pathCount} paths`:""]})," ",(0,ge.jsx)(Po,{model:e})]})}),Ut=Xo;var O=p(z(),1),Zt=p(N(),1),qt=p(Y(),1);var ne=p(M(),1),$o=(0,qt.makeStyles)()({formControl:{minWidth:150}}),zo=(0,Zt.observer)(function({model:e}){let{classes:t}=$o(),{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:bt.map(({value:r,label:s,description:a,available:i})=>(0,ne.jsx)(O.MenuItem,{value:r,disabled:n?!i(n):!1,children:(0,ne.jsx)(O.Tooltip,{title:a,placement:"right",children:(0,ne.jsx)("span",{children:s})})},r))})]})}),Kt=zo;var Z=p(z(),1),jt=p(N(),1),Jt=p(Y(),1),oe=p(M(),1),Yo=(0,Jt.makeStyles)()({formControl:{minWidth:130,maxWidth:240}}),Do=(0,jt.observer)(function({model:e}){let{classes:t}=Yo(),{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:i})=>(0,oe.jsxs)(Z.MenuItem,{value:s,children:[a," \xB7 ",i.toLocaleString()," bp unit"]},s))]})]})}),Qt=Do;var vn=p(Ee(),1),wn=p(Se(),1);var en=p(M(),1),tn=(0,P.createSvgIcon)((0,en.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 nn=p(M(),1),on=(0,P.createSvgIcon)((0,nn.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 rn=p(M(),1),an=(0,P.createSvgIcon)((0,rn.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 Sn=p(N(),1);var gn=p(Se(),1),y=p(z(),1),bn=p(ln(),1),rt=p(N(),1),yn=p(Y(),1);var V=p(z(),1),cn=p(N(),1),dn=p(Y(),1),re=p(M(),1),Fo=(0,dn.makeStyles)()({section:{marginBottom:24},formControl:{minWidth:200}}),Oo=[{value:0,label:"None"},{value:1,label:"1 hop"},{value:2,label:"2 hops"}],Vo=(0,cn.observer)(function({model:e}){let{classes:t}=Fo();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:Oo.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}),pn=Vo;var un=p(Ee(),1),Ne=p(z(),1),ot=p(N(),1),mn=p(Y(),1),be=p(M(),1),Wo=(0,mn.makeStyles)()({section:{marginBottom:24}});function Uo(o){let e=o.split(/[\s,]+/).map(t=>t.trim()).filter(t=>t!=="");return e.length===0?void 0:e}var Zo=(0,ot.observer)(function({model:e}){let[t,n]=(0,un.useState)(e.subgraphHaplotypes?.join(", ")??""),r=()=>{let s=Uo(t);s?.join(`
+`)===e.subgraphHaplotypes?.join(`
+`)||(e.setSubgraphHaplotypes(s),e.reloadSubgraph())};return(0,be.jsx)(Ne.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()}})}),qo=(0,ot.observer)(function({model:e}){let{classes:t}=Wo();return e.loadedTrackId?(0,be.jsxs)("div",{className:t.section,children:[(0,be.jsx)(Zo,{model:e},e.subgraphHaplotypes?.join(",")??""),(0,be.jsx)(Ne.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}),hn=qo;var f=p(M(),1),Ko=(0,yn.makeStyles)()({section:{marginBottom:24},formControl:{minWidth:200}}),jo=["Lowest","Low","Medium","High","Highest"],fn=(0,rt.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}),Jo=(0,rt.observer)(function(e){let{model:t,open:n,onClose:r}=e,{classes:s}=Ko();return(0,f.jsxs)(gn.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 i=parseInt(a.target.value);t.setLayoutQuality(i),t.recomputeLayout()},children:jo.map((a,i)=>(0,f.jsx)(y.FormControlLabel,{value:i,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)(fn,{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>Ke?`Off: ${t.pathCount.toLocaleString()} paths is past the ${Ke} 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:i})=>(0,f.jsx)(y.MenuItem,{value:a,children:i},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:i})=>(0,f.jsx)(y.MenuItem,{value:a,children:i},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:ut.map(({value:a,label:i,description:l})=>(0,f.jsx)(y.MenuItem,{value:a,children:(0,f.jsx)(y.Tooltip,{title:l,placement:"right",children:(0,f.jsx)("span",{children:i})})},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)(fn,{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:yt.map(({value:a,label:i,description:l})=>(0,f.jsx)(y.MenuItem,{value:a,children:(0,f.jsx)(y.Tooltip,{title:l,placement:"right",children:(0,f.jsx)("span",{children:i})})},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)(pn,{model:t}),(0,f.jsx)(hn,{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:Re.map(({value:a,label:i})=>(0,f.jsx)(y.MenuItem,{value:a,children:i},a))})]})})]}),(0,f.jsx)(y.DialogActions,{children:(0,f.jsx)(bn.default,{variant:"contained",color:"primary",onClick:r,children:"Close"})})]})}),xn=Jo;var ae=p(M(),1),Qo=(0,Sn.observer)(function({model:e}){let[t,n]=(0,vn.useState)(!1);return(0,ae.jsxs)(ae.Fragment,{children:[(0,ae.jsx)(wn.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:an,onClick:()=>{n(!0)}},{type:"divider"},{label:"Return to import form",icon:tn,onClick:()=>{e.clearGraph()}}],children:(0,ae.jsx)(on,{})}),(0,ae.jsx)(xn,{model:e,open:t,onClose:()=>{n(!1)}})]})}),Mn=Qo;var q=p(z(),1),Cn=p(N(),1),Ln=p(Y(),1),se=p(M(),1),er=(0,Ln.makeStyles)()({formControl:{minWidth:130,maxWidth:220}}),tr=(0,Cn.observer)(function({model:e}){let{classes:t}=er(),{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))]})]})}),kn=tr;var T=p(M(),1),nr=(0,En.makeStyles)()({toolbar:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",borderBottom:"1px solid #ddd"}}),or=(0,at.observer)(function({model:e}){return(0,T.jsx)(W.Typography,{variant:"body2",children:e.zoomPercent})}),rr=(0,at.observer)(function({model:e}){let{classes:t}=nr();return(0,T.jsxs)("div",{className:t.toolbar,children:[(0,T.jsx)(Kt,{model:e}),(0,T.jsx)(Ot,{model:e}),(0,T.jsx)(kn,{model:e}),(0,T.jsx)(Qt,{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)($t,{})})}),(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)(Yt,{})})}),(0,T.jsx)(W.Tooltip,{title:"Zoom to fit",children:(0,T.jsx)(W.IconButton,{size:"small",onClick:()=>{e.zoomToFit()},children:(0,T.jsx)(Xt,{})})}),(0,T.jsx)(or,{model:e}),(0,T.jsx)(Ut,{model:e}),(0,T.jsx)(Mn,{model:e})]})}),Gn=rr;var st=p(N(),1);var R=p(M(),1),ir={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},Rn="#2f8fd6",Bn="#111",Tn="#9e9e9e",Nn="#c62828",An="#8e3fbf",K=12,lr={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},Ce={display:"flex",alignItems:"center",gap:5},Ae={width:18,height:K-4,borderRadius:2},cr={...Ae,display:"flex",justifyContent:"center"};function In({color:o}){return(0,R.jsx)("div",{style:cr,children:(0,R.jsx)("div",{style:{width:2,backgroundColor:o}})})}var _n=(0,st.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:lr,"data-testid":"graph-walk-rows-legend",children:[(0,R.jsxs)("div",{style:Ce,children:[(0,R.jsx)("div",{style:{...Ae,backgroundColor:Rn}}),(0,R.jsxs)("span",{children:["sequence ",t.reference.label," also carries"]})]}),(0,R.jsxs)("div",{style:Ce,children:[(0,R.jsx)("div",{style:{...Ae,backgroundColor:An}}),(0,R.jsx)("span",{children:"sequence it does not"})]}),n.some(r=>r.spanningReads!==0)?(0,R.jsxs)("div",{style:Ce,children:[(0,R.jsx)(In,{color:Bn}),(0,R.jsx)("span",{children:"allele length called for this walk"})]}):null,n.some(r=>r.spanningReads===0)?(0,R.jsxs)("div",{style:Ce,children:[(0,R.jsx)(In,{color:Tn}),(0,R.jsx)("span",{children:"called with no read spanning it"})]}):null,n.some(r=>r.agrees===!1)?(0,R.jsxs)("div",{style:Ce,children:[(0,R.jsx)("div",{style:Ae}),(0,R.jsxs)("span",{style:{color:Nn},children:["walk and call over ",Math.round(.1*100),"% apart"]})]}):null]})});function _e(o){return`${(o/1e3).toFixed(o<1e4?1:0)} kb`}function Hn(o,e){return e?` \u2248 ${Math.round(o/e)} units`:""}function dr(o,e,t,n){let r=o-e,s=r===0?"":` (${r>0?"+":"\u2212"}${_e(Math.abs(r))})`;return`${_e(o)}${Hn(o,n)}${s}${t?"":" \xB7 partial walk"}`}function pr(o){let e=o.spanningReads===0?" \xB7 no spanning read":"";return` \xB7 called ${_e(o.bp)}${e}`}var ur=3;function mr(o,e,t){if(t(e)-t(0)<ur)return[];let n=[];for(let r=e;r<o;r+=e)n.push(r);return n}var hr=(0,st.observer)(function({model:e}){let{walkRowBars:t}=e;if(!t)return null;let{scaleX:n,scaleY:r,translateX:s,translateY:a,width:i,canvasHeight:l}=e,u=v=>v*n+s,m=v=>v*20*r+a,{origin:c,unit:x,reference:C,rows:G}=t,L=Math.max(c+C.bp,e.loadedRegion?.end??0),E=(v,I,g,b="#333")=>{let d=u(I)+6,h=d+v.length*6.2<i;return(0,R.jsx)("text",{x:h?d: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:ir,width:i,height:l,"data-testid":"graph-walk-rows",children:[E(`${_e(C.bp)}${Hn(C.bp,x)}`,L,m(0)),G.map((v,I)=>{let g=m(I+1);if(g<-K||g>l+K)return null;let{call:b}=v;return(0,R.jsxs)("g",{"data-testid":"graph-walk-row",children:[v.runs.map(d=>(0,R.jsx)("rect",{x:u(c+d.start),y:g-K/2,width:Math.max(1,d.bp*n),height:K,fill:d.onReference?Rn:An},d.start)),x?mr(v.bp,x,d=>d*n).map(d=>(0,R.jsx)("line",{x1:u(c+d),x2:u(c+d),y1:g-K/2,y2:g+K/2,stroke:"white",strokeWidth:1},d)):null,b?(0,R.jsx)("rect",{"data-testid":"graph-walk-call",x:u(c+b.bp)-1,y:g-K/2-3,width:2,height:K+6,fill:b.spanningReads===0?Tn:Bn}):null,E(`${dr(v.bp,C.bp,v.complete,x)}${b?pr(b):""}`,c+v.bp,g,b?.agrees===!1?Nn:void 0)]},v.name)})]})}),Pn=hr;var fr=26,gr=4e4,br=8,yr=8,xr=5.7,vr=6,wr=13,Le=3,He=2;function $e(o){return(o.length*xr+vr+Le)/2}var ie=(wr+Le)/2,Sr=$e("1 bp");function Pe(o,e,t){return{left:e-o,right:e+o,top:t-ie,bottom:t+ie}}function Mr(o,e,t){return o.right>0&&o.left<e&&o.bottom>0&&o.top<t}function Yn(o,e){return{left:6,right:6+o.length*6.2+8+Le,top:e-8-Le/2,bottom:e+8+Le/2}}function Xe(o,e,t){return t<e?o:Math.min(Math.max(o,e),t)}function Cr(o,e){return o.left<e.right&&e.left<o.right&&o.top<e.bottom&&e.top<o.bottom}function ze(o){return o>=1e6?`${+(o/1e6).toFixed(1)} Mb`:o>=1e3?`${+(o/1e3).toFixed(1)} kb`:`${o} bp`}function Xn(o){return`${ze(o)} del`}function Lr(o,e,t,n){let r=o[0],s=o[o.length-1],a=(e.x-(r.x0+s.x1)/2)*t,i=(e.y-(r.y0+s.y1)/2)*n,l=Math.hypot(a,i);return l===0?{x:0,y:-1}:{x:a/l,y:i/l}}function kr(o,e){return Math.abs(e.x)*(o.right-o.left)/2+Math.abs(e.y)*(o.bottom-o.top)/2}function Er(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 Gr(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 Ir(o,e){let t=1/0,n=1/0,r=-1/0,s=-1/0;for(let a of o)for(let i of e[a]??[])t=Math.min(t,i.x),r=Math.max(r,i.x),n=Math.min(n,i.y),s=Math.max(s,i.y);return t===1/0?void 0:{minX:t,minY:n,maxX:r,maxY:s}}var $n=new WeakMap;function Rr(o,e){let t=$n.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 $n.set(o,{nodeLengths:e,order:n}),n}var zn=new WeakMap;function Br(o,e,t,n){let{scaleX:r,scaleY:s}=t,a=zn.get(o);if(a?.deletions===e&&a.scaleX===r&&a.scaleY===s&&a.version===n)return a.arcs;let i=[];for(let l of[...e].sort((u,m)=>m.bp-u.bp)){let u=ft(o,l,t),m=u?mt(u):void 0;if(u&&m){let{minX:c,minY:x,maxX:C,maxY:G}=Ge(u);i.push({deletion:l,curves:u,apex:m,extent:Math.max((C-c)*r,(G-x)*s)})}}return zn.set(o,{deletions:e,scaleX:r,scaleY:s,version:n,arcs:i}),i}function Dn({nodePositions:o,nodeLengths:e,deletions:t,alleleDeletions:n,axis:r,translateX:s,translateY:a,width:i,height:l,reserved:u,version:m=0}){let{scaleX:c,scaleY:x}=r,C=[];for(let{deletion:b,curves:d,apex:h,extent:S}of Br(o,t,r,m))if(S>=fr){let k=Xn(b.bp),B=$e(k),Q=Pe(B,0,0),H=h.x*c+s,A=h.y*x+a,le=S>=B*2/He,pe=Lr(d,h,c,x),ke=kr(Q,pe)+yr,ve=le?H:Xe(H+pe.x*ke,B,i-B),we=le?A:Xe(A+pe.y*ke,ie,l-ie),We=Math.hypot(ve-H,we-A),dt;if(We>0){let Ue={x:(ve-H)/We,y:(we-A)/We},pt=Er(Q,Ue);dt={arcX:H,arcY:A,labelX:ve-Ue.x*pt,labelY:we-Ue.y*pt}}C.push({label:{key:`del:${b.edgeIndex}`,text:k,x:ve,y:we,kind:"deletion",leader:dt},box:Pe(B,ve,we)})}let G=new Set,L=[...n??[]].sort((b,d)=>d.bp-b.bp);for(let b of L){let d=Ir(b.nodeIds,o);if(!d)continue;let h=Math.max(d.minX*c+s,0),S=Math.min(d.maxX*c+s,i),k=Math.max(d.minY*x+a,0),B=Math.min(d.maxY*x+a,l);if(S<h||B<k)continue;let Q=Math.max(S-h,B-k),H=Xn(b.bp),A=$e(H);if(Q>=A*2/He){for(let ke of b.nodeIds)G.add(ke);let le=Xe((h+S)/2,A,i-A),pe=Xe((k+B)/2,ie,l-ie);C.push({label:{key:`alleledel:${b.nodeIds.join(",")}`,text:H,x:le,y:pe,kind:"deletion"},box:Pe(A,le,pe)})}}for(let[b,d]of Rr(o,e)){if(G.has(b))continue;let{x:h,y:S}=gt(d),k=S*x+a;if(k+ie<=0||k-ie>=l)continue;let B=Gr(d,c,x);if(B<Sr*2/He)continue;let Q=ze(e.get(b)),H=$e(Q);if(B>=H*2/He){let A=h*c+s;C.push({label:{key:`node:${b}`,text:Q,x:A,y:k,kind:"node"},box:Pe(H,A,k)})}}let E=Math.max(br,Math.floor(i*l/gr)),v=[...u??[]],I=[],g=0;for(let{label:b,box:d}of C)b.kind==="node"&&g>=E||Mr(d,i,l)&&!v.some(h=>Cr(h,d))&&(v.push(d),I.push(b),b.kind==="node"&&g++);return I}var ye=p(yo(),1),Vn=p(xo(),1),Wn=p(On(),1);var De=class extends Wn.Canvas2DRenderingBackendBase{constructor(){super(...arguments);this.transform=null;this.batch=null;this.nodeHighlights=new Map;this.highlightedEdge=null;this.highlightFactor=1}resize(t,n){(0,Vn.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,ye.normalizedRgbToCssRgba)([t[0],t[1],t[2]],t[3]),r.fillRect(0,0,s,a);let i=this.batch;i&&(r.lineCap="round",r.lineJoin="round",this.renderEdges(i),this.renderNodes(i),this.renderArrows(i))}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:i}of it(t.edgeCurves,(l,u)=>({color:Ye(s,u)?Be(l.color,this.highlightFactor):l.color,weight:l.thickness,last:Ye(s,u)}))){r.strokeStyle=(0,ye.abgrToCssRgba)(a),r.lineWidth=i[0].thickness*2*n.dpr,r.beginPath();for(let l of i){let u=l.curves[0];r.moveTo(u.x0*n.scaleX+n.translateX,u.y0*n.scaleY+n.translateY);for(let m of l.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,i]of this.nodeHighlights){let l=t.nodeStrokeRuns.get(a);if(l)for(let u=l.start;u<l.start+l.count;u++)s.set(u,i)}for(let{color:a,items:i}of it(t.nodeStrokes,(l,u)=>{let m=s.get(u);return{color:m===void 0?l.color:Be(l.color,m),weight:l.thickness,last:m!==void 0}})){r.strokeStyle=(0,ye.abgrToCssRgba)(a),r.lineWidth=i[0].thickness*2*n.dpr,r.beginPath();for(let l of i){let u=l.points[0];r.moveTo(u.x*n.scaleX+n.translateX,u.y*n.scaleY+n.translateY);for(let m=1,c=l.points.length;m<c;m++){let x=l.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:i}of it(t.arrows,(l,u)=>({color:Ye(s,u)?Be(l.color,this.highlightFactor):l.color,weight:0,last:Ye(s,u)}))){r.fillStyle=(0,ye.abgrToCssRgba)(a),r.beginPath();for(let l of i){let u=l.x*n.scaleX+n.translateX,m=l.y*n.scaleY+n.translateY,c=l.size*n.dpr;r.moveTo(u,m),r.lineTo(u-Math.cos(l.angle-.5)*c,m-Math.sin(l.angle-.5)*c),r.lineTo(u-Math.cos(l.angle+.5)*c,m-Math.sin(l.angle+.5)*c),r.closePath()}r.fill()}}dispose(){super.dispose(),this.batch=null,this.nodeHighlights=new Map,this.highlightedEdge=null}};function Ye(o,e){return o!==void 0&&e>=o.start&&e<o.start+o.count}function it(o,e){let t=new Map,n=new Map;for(let r=0,s=o.length;r<s;r++){let a=o[r],{color:i,weight:l,last:u}=e(a,r),m=u?n:t,c=`${i}:${l}`,x=m.get(c);x?x.items.push(a):m.set(c,{color:i,items:[a]})}return[...t.values(),...n.values()]}function Un(o){return Promise.resolve(new De(o))}var Tr=50;function Zn(o,e){return e>0?Math.max(1,o/e):Tr}function Nr(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 Ar(o,e,t){let n=Zn(e,o.length);return{x:n,y:t>0?Zn(t,o.length):Nr(o)??n}}function qn(o,e,t,n){return o===void 0?Ar(e,t,n):typeof o=="number"?{x:o,y:o}:o}function _r(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 Kn(o,e,t,n,r,s,a){let i=Math.floor(t/e.x),l=Math.floor(r/e.x),u=Math.floor(n/e.y),m=Math.floor(s/e.y);for(let c=i;c<=l;c++)for(let x=u;x<=m;x++)_r(o,c,x).push(a)}function jn(o,e,t,n,r,s){let a=Math.floor((t-r)/e.x),i=Math.floor((t+r)/e.x),l=Math.floor((n-s)/e.y),u=Math.floor((n+s)/e.y),m=[],c=new Set;for(let x=a;x<=i;x++){let C=o.get(x);if(C)for(let G=l;G<=u;G++){let L=C.get(G);if(L)for(let E of L)c.has(E)||(c.add(E),m.push(E))}}return m}var Fe=class{constructor(e,t){this.cells=new Map;let n=[],r=0,s=0;for(let[a,i]of Object.entries(e))for(let l=0;l<i.length-1;l++){let u=i[l],m=i[l+1],c=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-c,s+=G-x,n.push({entry:{nodeId:a,segmentIdx:l},minX:c,minY:x,maxX:C,maxY:G})}this.cellSize=qn(t,n,r,s);for(let a of n)Kn(this.cells,this.cellSize,a.minX,a.minY,a.maxX,a.maxY,a.entry)}query(e,t,n,r=n){return jn(this.cells,this.cellSize,e,t,n,r)}},Oe=class{constructor(e,t,n,r,s,a,i=0){this.cells=new Map;this.edgeCurves=xt(e,t,r,a,i);let l=[],u=0,m=0;for(let c=0;c<t.edges.length;c++){let x=t.edges[c],C=e[x.from],G=e[x.to],L=this.edgeCurves.get(c);if(C?.length&&G?.length&&L){let{minX:E,minY:v,maxX:I,maxY:g}=Ge(L),b=x.pathIds?.length??0;if(n&&b>0){let d=0,h=0;for(let S of Ie(C,G,b,r))d=Math.max(d,Math.abs(S.x)),h=Math.max(h,Math.abs(S.y));E-=d,v-=h,I+=d,g+=h}u+=I-E,m+=g-v,l.push({ei:c,minX:E,minY:v,maxX:I,maxY:g})}}this.cellSize=qn(s,l,u,m);for(let c of l)Kn(this.cells,this.cellSize,c.minX,c.minY,c.maxX,c.maxY,c.ei)}getCurves(e){return this.edgeCurves.get(e)}query(e,t,n,r=n){return jn(this.cells,this.cellSize,e,t,n,r)}};function to(o,e,t,n,r,s){let a=r-t,i=s-n,l=a*a+i*i;if(l===0)return Math.hypot(o-t,e-n);let u=Math.max(0,Math.min(1,((o-t)*a+(e-n)*i)/l));return Math.hypot(o-(t+u*a),e-(n+u*i))}function Hr(o,e,t,n,r,s,a,i,l,u){let m=1/0,c=20,x=t,C=n;for(let G=1;G<=c;G++){let L=G/c,E=1-L,v=E*E*E*t+3*E*E*L*r+3*E*L*L*a+L*L*L*l,I=E*E*E*n+3*E*E*L*s+3*E*L*L*i+L*L*L*u;m=Math.min(m,to(o,e,x,C,v,I)),x=v,C=I}return m}function Pr(o,e,t){return Hr(o,e,t.x0,t.y0,t.cx0,t.cy0,t.cx1,t.cy1,t.x1,t.y1)}function Jn(o,e,t,n=1){let r=1/0;for(let s of t){let a=Pr(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 Qn=new WeakMap;function Xr(o,e){let t=Qn.get(o);if(t?.version===e)return t.index;let n=new Fe(o);return Qn.set(o,{version:e,index:n}),n}var eo=new WeakMap;function $r(o,e,t,n,r,s){let a=eo.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 i=new Oe(o,e,t,n,void 0,s,r);return eo.set(o,{graph:e,drawPaths:t,scaleX:n.scaleX,scaleY:n.scaleY,version:r,index:i,deletions:s}),i}var zr=5;function no(o,e,t,n,r=0,s){let a=qe(n),i=Xr(o,r),l=C=>Math.max(zr,C)/n.scaleX,u=l(s?.maxHalfWidthPx??0),m=i.query(e,t,u,u/a),c=null,x=1/0;for(let{nodeId:C,segmentIdx:G}of m){let L=o[C],E=to(e,t*a,L[G].x,L[G].y*a,L[G+1].x,L[G+1].y*a);E<x&&E<l(s?.halfWidthPx(C)??0)&&(x=E,c=C)}return c}function oo(o,e,t,n,r,s,a=0,i,l){let u=qe(r),m=10/r.scaleX,c=$r(o,e,s,r,a,i),x=c.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||l?.has(L))continue;let g=E.pathIds?.length??0,b=c.getCurves(L);if(!b)continue;let d;if(!s||g===0)d=Jn(t,n*u,b,u);else{let h=1/0;for(let S of Ie(v,I,g,r)){let k=S.x===0&&S.y===0?b:ht(b,S.x,S.y),B=Jn(t,n*u,k,u);B<h&&(h=B)}d=h}d<G&&(G=d,C=L)}return C}function ro(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=p(M(),1),ao={position:"absolute",bottom:8,right:8,background:"rgba(0,0,0,0.75)",color:"white",padding:"4px 8px",borderRadius:4,fontSize:12,pointerEvents:"none"},Yr={position:"relative"},Dr={position:"relative",lineHeight:0},Fr={position:"absolute",inset:0,zIndex:10,lineHeight:"normal",pointerEvents:"none"},Or={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},Vr=(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:{...Or,top:s},children:n},r):null})})}),Wr={position:"absolute",top:6,right:6,display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4,pointerEvents:"none",zIndex:4},lt={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},Ur={display:"flex",alignItems:"center",gap:5},Zr={width:18,height:3,borderRadius:2},qr=(0,J.observer)(function({model:e}){let{pathLegend:t}=e;return t.length>0?(0,w.jsx)("div",{style:lt,"data-testid":"graph-path-legend",children:t.map(({name:n,label:r,color:s})=>(0,w.jsxs)("div",{style:Ur,children:[(0,w.jsx)("div",{style:{...Zr,backgroundColor:s}}),(0,w.jsx)("span",{children:r})]},n))}):null}),Kr=(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:lt,"data-testid":"graph-walk-readout",children:[(0,w.jsx)("strong",{children:n}),": ",t.steps.toLocaleString()," steps,"," ",t.bp.toLocaleString()," bp",r]})}),jr={minWidth:90,height:8,borderRadius:2,background:`linear-gradient(to right, ${Array.from({length:7},(o,e)=>`hsl(${e/6*vt}, 70%, 50%) ${e/6*100}%`).join(", ")})`},Jr={display:"flex",justifyContent:"space-between",gap:8},Qr=(0,J.observer)(function({model:e}){let t=e.referenceRampDomain;return t?(0,w.jsxs)("div",{style:lt,"data-testid":"graph-ramp-legend",children:[(0,w.jsx)("div",{style:jr}),(0,w.jsxs)("div",{style:Jr,children:[(0,w.jsx)("span",{children:t.start.toLocaleString()}),(0,w.jsxs)("span",{children:["(",ze(t.end-t.start),")"]}),(0,w.jsx)("span",{children:t.end.toLocaleString()})]})]}):null}),io={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},ea={...io,color:"#18181c",fontWeight:600},ta={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:2},na=(0,J.observer)(function({model:e}){let{nodePositions:t}=e;if(!t)return null;let n=Dn({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})=>Yn(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:ta,width:e.width,height:e.canvasHeight,children:r.map(({key:s,arcX:a,arcY:i,labelX:l,labelY:u})=>(0,w.jsx)("line",{"data-testid":"graph-label-leader",x1:a,y1:i,x2:l,y2:u,stroke:"#18181c",strokeWidth:1},s))}):null,n.map(({key:s,text:a,x:i,y:l,kind:u})=>(0,w.jsx)("div",{"data-testid":"graph-size-label",style:{...u==="deletion"?ea:io,left:i,top:l},children:a},s))]})}),oa=(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?wt(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:ao,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," ",St(r)," (rank"," ",t.stable?.rank,")"]}):null]}):null,n?(0,w.jsx)("div",{style:ao,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]})}),ra=(0,J.observer)(function({model:e,nodeId:t,top:n,left:r,onClose:s}){let{own:a,reference:i,highlight:l}=e.nodeLaunchTargets(t);return(0,w.jsx)(xe.Menu,{open:!0,anchorReference:"anchorPosition",anchorPosition:{top:n,left:r},onClose:()=>{s()},onMenuItemClick:u=>{u()},menuItems:[{label:"Node details",icon:Et,onClick:()=>{e.showNodeDetails(t)}},...Mt({own:a,reference:i,highlight:l,onShowLinear:u=>{e.showInLinearView(u)},onHighlight:e.canHighlightInLinearView?u=>{e.highlightInLinearView(u)}:void 0})]})}),aa=(0,J.observer)(function({model:e}){let{canvasRef:t,canvas:n}=(0,so.useRenderingBackend)(Un,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[i,l]=(0,j.useState)(void 0);(0,j.useEffect)(()=>{if(n){let S=function(k){k.preventDefault();let B=h.getBoundingClientRect();e.zoom(ro(k),k.clientX-B.left,k.clientY-B.top)};var d=S;let h=n;return h.addEventListener("wheel",S,{passive:!1}),()=>{h.removeEventListener("wheel",S)}}},[n,e]);function u(d,h){return{x:(d-e.translateX)/e.scaleX,y:(h-e.translateY)/e.scaleY}}function m(d){let h=d.currentTarget.getBoundingClientRect();return u(d.clientX-h.left,d.clientY-h.top)}function c(d,h){let{nodePositions:S}=e;return S?no(S,d,h,e.axisScale,e.positionsVersion,e.nodeInk):null}function x(d){if(d.button===0){s.current=!1;let{x:h,y:S}=m(d),k=c(h,S);k?e.setDraggingNode(k):e.setPanning(!0),r.current={x:d.clientX,y:d.clientY}}}function C(){let d=a.current;if(d.frame=0,d.pan&&(e.setTransform(e.scale,e.translateX+d.pan.dx,e.translateY+d.pan.dy),d.pan=null),d.hover&&e.nodePositions&&e.graph){let{x:h,y:S}=u(d.hover.x,d.hover.y);d.hover=null;let k=c(h,S);e.setHoveredNode(k),e.setHoveredEdge(k?null:oo(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 d=a.current;cancelAnimationFrame(d.frame),d.frame=0,d.pan=null,d.hover=null}function E(d){let h=d.clientX-r.current.x,S=d.clientY-r.current.y;r.current={x:d.clientX,y:d.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=d.currentTarget.getBoundingClientRect();k.hover={x:d.clientX-B.left,y:d.clientY-B.top},G()}}function v(){e.stopDragging()}function I(){L(),e.stopDragging(),e.setHoveredNode(null),e.setHoveredEdge(null)}function g(d){let{x:h,y:S}=m(d),k=c(h,S);k&&(d.preventDefault(),l({nodeId:k,top:d.clientY,left:d.clientX}))}function b(d){if(!s.current){let{x:h,y:S}=m(d),k=c(h,S);e.setSelectedNode(k),k&&e.showNodeDetails(k)}}return(0,w.jsxs)("div",{style:Yr,children:[(0,w.jsx)(Gn,{model:e}),(0,w.jsxs)("div",{style:Dr,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)(Vr,{model:e}),(0,w.jsx)(na,{model:e}),(0,w.jsx)(Rt,{model:e}),(0,w.jsx)(Ht,{model:e}),(0,w.jsx)(At,{model:e}),(0,w.jsx)(Pn,{model:e}),(0,w.jsxs)("div",{style:Wr,children:[(0,w.jsx)(Qr,{model:e}),(0,w.jsx)(qr,{model:e}),(0,w.jsx)(_n,{model:e}),(0,w.jsx)(Kr,{model:e})]}),(0,w.jsx)("div",{style:Fr,children:(0,w.jsx)(xe.LoadingOverlay,{isVisible:e.isLoading,immediate:!e.layoutResult,statusMessage:e.statusMessage,onCancel:e.canCancelLoad?()=>{e.cancelLoad()}:void 0})})]}),(0,w.jsx)(oa,{model:e}),i?(0,w.jsx)(ra,{model:e,nodeId:i.nodeId,top:i.top,left:i.left,onClose:()=>{l(void 0)}}):null,e.error?(0,w.jsx)(xe.ErrorBanner,{error:e.error,onReset:e.canRetryLoad?()=>{e.retryLoad()}:void 0}):null]})}),lo=aa;var Ve=p(Se(),1),D=p(z(),1),co=p(N(),1),po=p(Y(),1),$=p(M(),1),sa=(0,po.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}}),ia=(0,co.observer)(function({model:e}){let{classes:t}=sa();return e.isLoading?(0,$.jsxs)(D.Paper,{className:t.paper,"data-testid":"graph-genome-loading",children:[(0,$.jsxs)("div",{className:t.row,children:[(0,$.jsx)(Ve.LoadingEllipses,{variant:"h6",message:e.statusMessage}),(0,$.jsx)(D.Button,{size:"small","data-testid":"graph-genome-cancel",onClick:()=>{e.cancelLoad()},children:"Cancel"})]}),(0,$.jsx)(D.LinearProgress,{variant:"indeterminate"})]}):e.error?(0,$.jsx)(D.Paper,{className:t.paper,children:(0,$.jsx)(Ve.ErrorBanner,{error:e.error,onReset:()=>{e.retryLoad()}})}):(0,$.jsx)(D.Paper,{className:t.paper,"data-testid":"graph-genome-load-canceled",children:(0,$.jsxs)("div",{className:t.row,children:[(0,$.jsx)(D.Typography,{variant:"h6",children:"Loading canceled"}),(0,$.jsx)(D.Button,{variant:"contained",size:"small","data-testid":"graph-genome-retry",onClick:()=>{e.retryLoad()},children:"Retry"})]})})}),ct=ia;var uo=p(Ee(),1),mo=p(Se(),1),F=p(z(),1),ho=p(N(),1),fo=p(Y(),1),_=p(M(),1),la=`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`,ca=(0,fo.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"}}),da=(0,ho.observer)(function({model:e}){let{classes:t}=ca(),[n,r]=(0,uo.useState)("");function s(){n.trim()&&e.loadGFAFromLocation({uri:n,locationType:"UriLocation"})}function a(i){let l=i.target.files?.[0];l&&l.text().then(u=>e.loadGFA(u,l.name)).catch(u=>{e.setError(u)})}return(0,_.jsxs)(F.Paper,{className:t.paper,children:[(0,_.jsx)("div",{className:t.header,children:(0,_.jsx)(F.Typography,{variant:"h6",children:"Load a GFA graph"})}),(0,_.jsxs)("div",{className:t.column,children:[(0,_.jsxs)("div",{className:t.rowCenter,children:[(0,_.jsxs)(F.Button,{variant:"outlined",component:"label",size:"small",children:["Choose file",(0,_.jsx)("input",{type:"file",accept:".gfa,.gfa1,.gfa2",hidden:!0,onChange:i=>{a(i)}})]}),(0,_.jsx)(F.Typography,{variant:"caption",color:"text.secondary",children:"Whole-file GFA; best for small/medium graphs."})]}),(0,_.jsxs)("div",{className:t.rowEnd,children:[(0,_.jsx)(F.TextField,{size:"small",label:"URL",placeholder:"https://example.com/graph.gfa",value:n,onChange:i=>{r(i.target.value)},onKeyDown:i=>{i.key==="Enter"&&s()},className:t.flex1}),(0,_.jsx)(F.Button,{variant:"contained",onClick:()=>{s()},disabled:!n.trim(),children:"Open"})]})]}),(0,_.jsx)("div",{className:t.footer,children:(0,_.jsx)(F.Button,{size:"small",onClick:()=>{e.loadGFA(la,"Example graph")},children:"Load 4-node example"})}),e.error?(0,_.jsx)(mo.ErrorBanner,{error:e.error}):null]})}),go=da;var U=p(M(),1),pa=(0,bo.observer)(function({model:e}){return e.hasGraph?(0,U.jsx)(lo,{model:e}):e.canRetryLoad&&(e.error||e.loadCanceled)?(0,U.jsx)(ct,{model:e}):(0,U.jsxs)(U.Fragment,{children:[e.isLoading?(0,U.jsx)(ct,{model:e}):null,(0,U.jsx)("div",{hidden:e.isLoading,children:(0,U.jsx)(go,{model:e})})]})}),oi=pa;export{oi as default};
+//# sourceMappingURL=GraphGenomeView-UD5WCV3Q.js.map