jbrowse-plugin-graphgenomeviewer 4.0.18 → 4.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/chunks/{GraphGenomeView-Y4JOWW67.js → GraphGenomeView-37F7MLFQ.js} +2 -2
- package/dist/chunks/{LinearGraphDisplay-EXJYDVGU.js → LinearGraphDisplay-CJHA56RB.js} +2 -2
- package/dist/chunks/chunk-MNOQXDMY.js +3 -0
- package/dist/chunks/{chunk-VVSZYCMP.js.map → chunk-MNOQXDMY.js.map} +3 -3
- package/dist/jbrowse-plugin-graphgenomeviewer.esm.js +2 -2
- package/dist/jbrowse-plugin-graphgenomeviewer.esm.js.map +4 -4
- package/package.json +2 -2
- package/src/GraphGenomeView/components/WalkRowsOverlay.tsx +58 -187
- package/src/GraphGenomeView/model.ts +9 -15
- package/src/GraphGenomeView/repeats/repeatFeatures.test.ts +10 -32
- package/src/GraphGenomeView/repeats/repeatFeatures.ts +33 -90
- package/src/version.ts +1 -1
- package/dist/chunks/chunk-VVSZYCMP.js +0 -3
- /package/dist/chunks/{GraphGenomeView-Y4JOWW67.js.map → GraphGenomeView-37F7MLFQ.js.map} +0 -0
- /package/dist/chunks/{LinearGraphDisplay-EXJYDVGU.js.map → LinearGraphDisplay-CJHA56RB.js.map} +0 -0
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ session spec does the same with `loadedTrackId` and `loadedRegion`.
|
|
|
22
22
|
|
|
23
23
|

|
|
24
24
|
|
|
25
|
-

|
|
26
26
|
|
|
27
27
|
## Features
|
|
28
28
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as x}from"./chunk-
|
|
1
|
+
import{a as x}from"./chunk-MNOQXDMY.js";import"./chunk-BI3M6FZD.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-5E7TVPCI.js";import{B as L}from"./chunk-IUIIYSGF.js";import"./chunk-EFVAQ2KM.js";import"./chunk-KULNKXPT.js";import{a as s,b as g,c as v,d as G,e as B}from"./chunk-XEJ47DLD.js";import{b as a}from"./chunk-FY3BTKY4.js";var S=a(g(),1);var m=a(G(),1),n=a(v(),1),C=a(g(),1),P=a(L(),1),o=a(s(),1),I=(0,P.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}}),b=(0,C.observer)(function({model:e}){let{classes:r}=I();return e.isLoading?(0,o.jsxs)(n.Paper,{className:r.paper,"data-testid":"graph-genome-loading",children:[(0,o.jsxs)("div",{className:r.row,children:[(0,o.jsx)(m.LoadingEllipses,{variant:"h6",message:e.statusMessage}),(0,o.jsx)(n.Button,{size:"small","data-testid":"graph-genome-cancel",onClick:()=>{e.cancelLoad()},children:"Cancel"})]}),(0,o.jsx)(n.LinearProgress,{variant:"indeterminate"})]}):e.error?(0,o.jsx)(n.Paper,{className:r.paper,children:(0,o.jsx)(m.ErrorBanner,{error:e.error,onReset:()=>{e.retryLoad()}})}):(0,o.jsx)(n.Paper,{className:r.paper,"data-testid":"graph-genome-load-canceled",children:(0,o.jsxs)("div",{className:r.row,children:[(0,o.jsx)(n.Typography,{variant:"h6",children:"Loading canceled"}),(0,o.jsx)(n.Button,{variant:"contained",size:"small","data-testid":"graph-genome-retry",onClick:()=>{e.retryLoad()},children:"Retry"})]})})}),h=b;var M=a(B(),1),N=a(G(),1),i=a(v(),1),w=a(g(),1),E=a(L(),1),t=a(s(),1),k=`H VN:Z:1.0
|
|
2
2
|
S 1 ACGT
|
|
3
3
|
S 2 GGCC
|
|
4
4
|
S 3 TTAA
|
|
@@ -7,4 +7,4 @@ L 1 + 2 + 0M
|
|
|
7
7
|
L 1 + 3 + 0M
|
|
8
8
|
L 2 + 4 + 0M
|
|
9
9
|
L 3 + 4 + 0M`,z=(0,E.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"}}),R=(0,w.observer)(function({model:e}){let{classes:r}=z(),[d,T]=(0,M.useState)("");function y(){d.trim()&&e.loadGFAFromLocation({uri:d,locationType:"UriLocation"})}function A(p){let c=p.target.files?.[0];c&&c.text().then(f=>e.loadGFA(f,c.name)).catch(f=>{e.setError(f)})}return(0,t.jsxs)(i.Paper,{className:r.paper,children:[(0,t.jsx)("div",{className:r.header,children:(0,t.jsx)(i.Typography,{variant:"h6",children:"Load a GFA graph"})}),(0,t.jsxs)("div",{className:r.column,children:[(0,t.jsxs)("div",{className:r.rowCenter,children:[(0,t.jsxs)(i.Button,{variant:"outlined",component:"label",size:"small",children:["Choose file",(0,t.jsx)("input",{type:"file",accept:".gfa,.gfa1,.gfa2",hidden:!0,onChange:p=>{A(p)}})]}),(0,t.jsx)(i.Typography,{variant:"caption",color:"text.secondary",children:"Whole-file GFA; best for small/medium graphs."})]}),(0,t.jsxs)("div",{className:r.rowEnd,children:[(0,t.jsx)(i.TextField,{size:"small",label:"URL",placeholder:"https://example.com/graph.gfa",value:d,onChange:p=>{T(p.target.value)},onKeyDown:p=>{p.key==="Enter"&&y()},className:r.flex1}),(0,t.jsx)(i.Button,{variant:"contained",onClick:()=>{y()},disabled:!d.trim(),children:"Open"})]})]}),(0,t.jsx)("div",{className:r.footer,children:(0,t.jsx)(i.Button,{size:"small",onClick:()=>{e.loadGFA(k,"Example graph")},children:"Load 4-node example"})}),e.error?(0,t.jsx)(N.ErrorBanner,{error:e.error}):null]})}),F=R;var l=a(s(),1),U=(0,S.observer)(function({model:e}){return e.hasGraph?(0,l.jsx)(x,{model:e}):e.canRetryLoad&&(e.error||e.loadCanceled)?(0,l.jsx)(h,{model:e}):(0,l.jsxs)(l.Fragment,{children:[e.isLoading?(0,l.jsx)(h,{model:e}):null,(0,l.jsx)("div",{hidden:e.isLoading,children:(0,l.jsx)(F,{model:e})})]})}),O=U;export{O as default};
|
|
10
|
-
//# sourceMappingURL=GraphGenomeView-
|
|
10
|
+
//# sourceMappingURL=GraphGenomeView-37F7MLFQ.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as i}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=LinearGraphDisplay-
|
|
1
|
+
import{a as i}from"./chunk-MNOQXDMY.js";import"./chunk-BI3M6FZD.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-5E7TVPCI.js";import"./chunk-IUIIYSGF.js";import"./chunk-EFVAQ2KM.js";import"./chunk-KULNKXPT.js";import{a as e,b as d}from"./chunk-XEJ47DLD.js";import{a as h,b as t}from"./chunk-FY3BTKY4.js";var p=h((l,o)=>{o.exports=JBrowseExports["@jbrowse/display-kit/DisplayChrome"]});var s=t(p(),1),n=t(d(),1);var r=t(e(),1),y=(0,n.observer)(function({model:a}){return(0,r.jsx)(s.DisplayStatusChrome,{model:a,phase:a.displayPhase,drawn:a.painted&&a.geometryPainted,testid:"linear-graph-display","data-layout":a.chosenLayoutMode,"data-cut-tier":a.cutTier,"data-recuts":a.recuts,"data-node-count":a.hasGraph?a.nodeCount:void 0,"data-loading":a.isLoading?"":void 0,style:{width:a.paneWidth,height:a.height,overflow:"hidden"},children:(0,r.jsx)(i,{model:a,ownChrome:!1})})}),c=y;export{c as default};
|
|
2
|
+
//# sourceMappingURL=LinearGraphDisplay-CJHA56RB.js.map
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import{C as ot,D as rt,F as st,J as fe,K as at,L as Pe,M as Te,U as it,X as lt,Y as ct,a as N,aa as dt,b as Ke,c as to,ca as ut,da as pt,f as te,fa as ht,g as Je,j as Qe,k as et,l as Ie,la as ft,m as ue,ma as He,oa as mt,t as pe,ta as gt,u as nt,v as he,va as bt,wa as yt}from"./chunk-BI3M6FZD.js";import{b as qe}from"./chunk-UQEPPJEO.js";import{a as Ue}from"./chunk-FCWXYIFC.js";import{a as vt}from"./chunk-5E7TVPCI.js";import{B as ne,f as tt}from"./chunk-IUIIYSGF.js";import{a as v,b as T,c as J,d as je,e as le}from"./chunk-XEJ47DLD.js";import{a as Ze,b as u}from"./chunk-FY3BTKY4.js";var Ht=Ze((Xr,Tt)=>{Tt.exports=JBrowseExports["@jbrowse/render-core/useRenderingBackend"]});var Un=Ze((js,Zn)=>{Zn.exports=JBrowseExports["@jbrowse/render-core/renderingBackendBase"]});var z=u(le(),1);var no=50;function xt(r,e){return e>0?Math.max(1,r/e):no}function oo(r){let e=new Set,t=1/0,n=-1/0;for(let o of r)e.add(o.minY),t=Math.min(t,o.minY),n=Math.max(n,o.minY);return e.size>1?(n-t)/(e.size-1):void 0}function ro(r,e,t){let n=xt(e,r.length);return{x:n,y:t>0?xt(t,r.length):oo(r)??n}}function St(r,e,t,n){return r===void 0?ro(e,t,n):typeof r=="number"?{x:r,y:r}:r}function so(r,e,t){let n=r.get(e);n||(n=new Map,r.set(e,n));let o=n.get(t);return o||(o=[],n.set(t,o)),o}function Mt(r,e,t,n,o,s,a){let d=Math.floor(t/e.x),i=Math.floor(o/e.x),l=Math.floor(n/e.y),p=Math.floor(s/e.y);for(let c=d;c<=i;c++)for(let m=l;m<=p;m++)so(r,c,m).push(a)}function wt(r,e,t,n,o,s){let a=Math.floor((t-o)/e.x),d=Math.floor((t+o)/e.x),i=Math.floor((n-s)/e.y),l=Math.floor((n+s)/e.y),p=[],c=new Set;for(let m=a;m<=d;m++){let g=r.get(m);if(g)for(let y=i;y<=l;y++){let b=g.get(y);if(b)for(let S of b)c.has(S)||(c.add(S),p.push(S))}}return p}var me=class{constructor(e,t){this.cells=new Map;let n=[],o=0,s=0;for(let[a,d]of Object.entries(e))for(let i=0;i<d.length-1;i++){let l=d[i],p=d[i+1],c=Math.min(l.x,p.x),m=Math.min(l.y,p.y),g=Math.max(l.x,p.x),y=Math.max(l.y,p.y);o+=g-c,s+=y-m,n.push({entry:{nodeId:a,segmentIdx:i},minX:c,minY:m,maxX:g,maxY:y})}this.cellSize=St(t,n,o,s);for(let a of n)Mt(this.cells,this.cellSize,a.minX,a.minY,a.maxX,a.maxY,a.entry)}query(e,t,n,o=n){return wt(this.cells,this.cellSize,e,t,n,o)}},ge=class{constructor(e,t,n,o,s,a,d=0){this.cells=new Map;this.edgeCurves=at(e,t,o,a,d);let i=[],l=0,p=0;for(let c=0;c<t.edges.length;c++){let m=t.edges[c],g=e[m.from],y=e[m.to],b=this.edgeCurves.get(c);if(g?.length&&y?.length&&b){let{minX:S,minY:H,maxX:G,maxY:X}=Qe(b),B=m.pathIds?.length??0;if(n&&B>0){let w=0,E=0;for(let L of ue(g,y,B,o))w=Math.max(w,Math.abs(L.x)),E=Math.max(E,Math.abs(L.y));S-=w,H-=E,G+=w,X+=E}l+=G-S,p+=X-H,i.push({ei:c,minX:S,minY:H,maxX:G,maxY:X})}}this.cellSize=St(s,i,l,p);for(let c of i)Mt(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,o=n){return wt(this.cells,this.cellSize,e,t,n,o)}};function Lt(r,e,t,n,o,s){let a=o-t,d=s-n,i=a*a+d*d;if(i===0)return Math.hypot(r-t,e-n);let l=Math.max(0,Math.min(1,((r-t)*a+(e-n)*d)/i));return Math.hypot(r-(t+l*a),e-(n+l*d))}function ao(r,e,t,n,o,s,a,d,i,l){let p=1/0,c=20,m=t,g=n;for(let y=1;y<=c;y++){let b=y/c,S=1-b,H=S*S*S*t+3*S*S*b*o+3*S*b*b*a+b*b*b*i,G=S*S*S*n+3*S*S*b*s+3*S*b*b*d+b*b*b*l;p=Math.min(p,Lt(r,e,m,g,H,G)),m=H,g=G}return p}function io(r,e,t){return ao(r,e,t.x0,t.y0,t.cx0,t.cy0,t.cx1,t.cy1,t.x1,t.y1)}function kt(r,e,t,n=1){let o=1/0;for(let s of t){let a=io(r,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<o&&(o=a)}return o}var Ct=new WeakMap;function lo(r,e){let t=Ct.get(r);if(t?.version===e)return t.index;let n=new me(r);return Ct.set(r,{version:e,index:n}),n}var Rt=new WeakMap;function co(r,e,t,n,o,s){let a=Rt.get(r);if(a?.graph===e&&a.drawPaths===t&&a.scaleX===n.scaleX&&a.scaleY===n.scaleY&&a.version===o&&a.deletions===s)return a.index;let d=new ge(r,e,t,n,void 0,s,o);return Rt.set(r,{graph:e,drawPaths:t,scaleX:n.scaleX,scaleY:n.scaleY,version:o,index:d,deletions:s}),d}var uo=5;function Et(r,e,t,n,o=0,s){let a=Ie(n),d=lo(r,o),i=g=>Math.max(uo,g)/n.scaleX,l=i(s?.maxHalfWidthPx??0),p=d.query(e,t,l,l/a),c=null,m=1/0;for(let{nodeId:g,segmentIdx:y}of p){let b=r[g],S=Lt(e,t*a,b[y].x,b[y].y*a,b[y+1].x,b[y+1].y*a);S<m&&S<i(s?.halfWidthPx(g)??0)&&(m=S,c=g)}return c}function It(r,e,t,n,o,s,a=0,d,i){let l=Ie(o),p=10/o.scaleX,c=co(r,e,s,o,a,d),m=c.query(t,n,p,p/l),g=null,y=p;for(let b of m){let S=e.edges[b],H=r[S.from],G=r[S.to];if(!H?.length||!G?.length||i?.has(b))continue;let X=S.pathIds?.length??0,B=c.getCurves(b);if(!B)continue;let w;if(!s||X===0)w=kt(t,n*l,B,l);else{let E=1/0;for(let L of ue(H,G,X,o)){let f=L.x===0&&L.y===0?B:et(B,L.x,L.y),x=kt(t,n*l,f,l);x<E&&(E=x)}w=E}w<y&&(y=w,g=b)}return g}function Pt(r){let e=r.deltaY*(r.deltaMode===1?40:r.deltaMode===2?800:1),t=(r.ctrlKey?10:1)*e/100;return 1.1**-Math.max(-2,Math.min(2,t))}var ee=u(je(),1),Ee=u(Ue(),1),Qn=u(Ht(),1);var Gt=u(v(),1),Nt=(0,N.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 W=u(T(),1);var Ge=u(T(),1),_=u(v(),1),po={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},ho=(0,Ge.observer)(function({model:e}){let{bubbleHalos:t,walkHighlight:n,hoveredBubble:o}=e;if(t.length===0)return null;let{scaleX:s,scaleY:a,translateX:d,translateY:i,paneWidth:l,canvasHeight:p}=e,c=e.contigThickness*nt,m=g=>n!==void 0&&!g.nodeIds.some(y=>n.nodeIds.has(y));return(0,_.jsx)("svg",{style:po,width:l,height:p,"data-testid":"graph-bubble-halos",children:(0,_.jsx)("g",{transform:`translate(${d} ${i}) scale(${s} ${a})`,children:t.filter(g=>!g.whole).map(g=>(0,_.jsx)("path",{d:g.path,fill:"none",stroke:te[g.kind],strokeOpacity:o&&qe(g.bubble,o)?.45:m(g)?.06:.22,strokeWidth:c,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke"},`${g.bubble.start}-${g.bubble.end}`))})})}),Bt=ho,fo={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},mo={display:"flex",alignItems:"center",gap:5};function go({color:r}){return(0,_.jsx)("svg",{width:18,height:10,style:{flex:"none"},children:(0,_.jsx)("line",{x1:5,y1:5,x2:13,y2:5,stroke:r,strokeOpacity:.35,strokeWidth:8,strokeLinecap:"round"})})}var _t=(0,Ge.observer)(function({model:e}){let t=new Map;for(let n of e.bubbleHalos)if(!n.whole){let o=te[n.kind],s=t.get(o)??new Set;s.add(Je[n.kind]),t.set(o,s)}return t.size>0?(0,_.jsx)("div",{style:fo,"data-testid":"graph-halo-legend",children:[...t].map(([n,o])=>(0,_.jsxs)("div",{style:mo,children:[(0,_.jsx)(go,{color:n}),(0,_.jsxs)("span",{children:["bubble: ",[...o].join(", ")]})]},n))}):null});var zt=u(T(),1),be=u(v(),1),bo={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},ye="#1c1c22",yo=(0,zt.observer)(function({model:e}){let{genePins:t}=e;if(t.length===0)return null;let{scaleX:n,scaleY:o,translateX:s,translateY:a,paneWidth:d,canvasHeight:i,contigThickness:l}=e;return(0,be.jsx)("svg",{style:bo,width:d,height:i,"data-testid":"graph-gene-pins",children:(0,be.jsx)("g",{transform:`translate(${s} ${a}) scale(${n} ${o})`,children:t.map(p=>p.exons?(0,be.jsx)("path",{d:p.exons,fill:"none",stroke:ye,strokeOpacity:.9,strokeWidth:l*.55,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"},`${p.gene.name}-${p.gene.start}`):null)})})}),Xt=yo;var Ot=u(v(),1),Yt=(0,N.createSvgIcon)((0,Ot.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 Ne=u(v(),1),At=(0,N.createSvgIcon)([(0,Ne.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,Ne.jsx)("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"},"1")],"ZoomIn");var Wt=u(v(),1),$t=(0,N.createSvgIcon)((0,Wt.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 Y=u(J(),1),Xe=u(T(),1),fn=u(ne(),1);var V=u(J(),1),Dt=u(T(),1),Ft=u(ne(),1),oe=u(v(),1),vo=(0,Ft.makeStyles)()({formControl:{minWidth:100}}),xo=(0,Dt.observer)(function({model:e}){let{classes:t}=vo();return(0,oe.jsxs)(V.FormControl,{size:"small",className:t.formControl,children:[(0,oe.jsx)(V.InputLabel,{children:"Color"}),(0,oe.jsx)(V.Select,{value:e.chosenColorScheme,label:"Color",onChange:n=>{e.setColorScheme(n.target.value)},children:tt.map(({value:n,label:o})=>(0,oe.jsx)(V.MenuItem,{value:n,children:o},n))})]})}),Vt=xo;var _e=u(J(),1),ze=u(T(),1),Zt=u(ne(),1),re=u(v(),1),Ut=(0,Zt.makeStyles)()({stats:{marginLeft:"auto"},perf:{color:"#888",fontVariantNumeric:"tabular-nums"}});function Be(r){return r===void 0?"\u2013":`${Math.round(r)}ms`}var So=(0,ze.observer)(function({model:e}){let{classes:t}=Ut(),{lastFetchMs:n,lastLayoutMs:o,lastGeometryMs:s}=e,a=n!==void 0||o!==void 0||s!==void 0;return e.showPerf&&a?(0,re.jsxs)(_e.Typography,{variant:"caption",className:t.perf,"data-testid":"graph-perf-stats",children:["fetch ",Be(n)," \xB7 layout ",Be(o)," \xB7 geom"," ",Be(s)]}):null}),Mo=(0,ze.observer)(function({model:e}){let{classes:t}=Ut();return(0,re.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,re.jsxs)(_e.Typography,{variant:"body2",component:"span",children:[e.nodeCount," nodes, ",e.edgeCount," edges",e.pathCount>0?`, ${e.pathCount} paths`:""]})," ",(0,re.jsx)(So,{model:e})]})}),Kt=Mo;var O=u(J(),1),jt=u(T(),1),qt=u(ne(),1),Z=u(v(),1),wo=(0,qt.makeStyles)()({formControl:{minWidth:150}}),ko=(0,jt.observer)(function({model:e}){let{classes:t}=wo(),{graph:n}=e;return(0,Z.jsxs)(O.FormControl,{size:"small",className:t.formControl,children:[(0,Z.jsx)(O.InputLabel,{children:"Layout"}),(0,Z.jsx)(O.Select,{value:e.chosenLayoutMode,label:"Layout","data-testid":"graph-layout-select",onChange:o=>{e.switchLayout(o.target.value)},children:st.map(({value:o,label:s,description:a,available:d})=>(0,Z.jsx)(O.MenuItem,{value:o,disabled:n?!d(n):!1,children:(0,Z.jsx)(O.Tooltip,{title:a,placement:"right",children:(0,Z.jsx)("span",{children:s})})},o))})]})}),Jt=ko;var $=u(J(),1),Qt=u(T(),1),en=u(ne(),1),U=u(v(),1),Co=(0,en.makeStyles)()({formControl:{minWidth:130,maxWidth:240}}),Ro=(0,Qt.observer)(function({model:e}){let{classes:t}=Co(),{repeatChoices:n}=e;if(e.chosenLayoutMode!=="walkrows"||n.length===0)return null;let o=new Set(n.map(s=>s.key));return(0,U.jsxs)($.FormControl,{size:"small",className:t.formControl,children:[(0,U.jsx)($.InputLabel,{children:"Repeat"}),(0,U.jsxs)($.Select,{value:o.has(e.repeatKey)?e.repeatKey:"",label:"Repeat","data-testid":"graph-repeat-select",onChange:s=>{e.setRepeatKey(s.target.value)},children:[(0,U.jsx)($.MenuItem,{value:"",children:(0,U.jsx)("em",{children:"Whole window"})}),n.map(({key:s,name:a,unit:d})=>(0,U.jsxs)($.MenuItem,{value:s,children:[a," \xB7 ",d.toLocaleString()," bp unit"]},s))]})]})}),tn=Ro;var an=u(le(),1),ln=u(je(),1);var nn=u(v(),1),on=(0,N.createSvgIcon)((0,nn.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 rn=u(v(),1),sn=(0,N.createSvgIcon)((0,rn.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=u(T(),1);var K=u(v(),1),Lo=(0,cn.observer)(function({model:e}){let[t,n]=(0,an.useState)(!1);return(0,K.jsxs)(K.Fragment,{children:[(0,K.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:yt,onClick:()=>{n(!0)}},{type:"divider"},{label:"Return to import form",icon:on,onClick:()=>{e.clearGraph()}}],children:(0,K.jsx)(sn,{})}),(0,K.jsx)(vt,{model:e,open:t,onClose:()=>{n(!1)}})]})}),dn=Lo;var D=u(J(),1),un=u(T(),1),pn=u(ne(),1),j=u(v(),1),Eo=(0,pn.makeStyles)()({formControl:{minWidth:130,maxWidth:220}}),Io=(0,un.observer)(function({model:e}){let{classes:t}=Eo(),{walkChoices:n}=e;if(n.length===0)return null;let o=new Set(n.map(s=>s.name));return(0,j.jsxs)(D.FormControl,{size:"small",className:t.formControl,children:[(0,j.jsx)(D.InputLabel,{children:"Walk"}),(0,j.jsxs)(D.Select,{value:o.has(e.highlightedPath)?e.highlightedPath:"",label:"Walk","data-testid":"graph-walk-select",onChange:s=>{e.setHighlightedPath(s.target.value)},children:[(0,j.jsx)(D.MenuItem,{value:"",children:(0,j.jsx)("em",{children:"None"})}),n.map(({name:s,label:a})=>(0,j.jsx)(D.MenuItem,{value:s,children:a},s))]})]})}),hn=Io;var I=u(v(),1),Po=(0,fn.makeStyles)()({toolbar:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",borderBottom:"1px solid #ddd"}}),To=(0,Xe.observer)(function({model:e}){return(0,I.jsx)(Y.Typography,{variant:"body2",children:e.zoomPercent})}),Ho=(0,Xe.observer)(function({model:e}){let{classes:t}=Po();return(0,I.jsxs)("div",{className:t.toolbar,children:[(0,I.jsx)(Jt,{model:e}),(0,I.jsx)(Vt,{model:e}),(0,I.jsx)(hn,{model:e}),(0,I.jsx)(tn,{model:e}),(0,I.jsx)(Y.Tooltip,{title:"Zoom in",children:(0,I.jsx)(Y.IconButton,{size:"small",onClick:()=>{e.zoom(1.5,e.paneWidth/2,e.canvasHeight/2)},children:(0,I.jsx)(At,{})})}),(0,I.jsx)(Y.Tooltip,{title:"Zoom out",children:(0,I.jsx)(Y.IconButton,{size:"small",onClick:()=>{e.zoom(1/1.5,e.paneWidth/2,e.canvasHeight/2)},children:(0,I.jsx)($t,{})})}),(0,I.jsx)(Y.Tooltip,{title:"Zoom to fit",children:(0,I.jsx)(Y.IconButton,{size:"small",onClick:()=>{e.zoomToFit()},children:(0,I.jsx)(Yt,{})})}),(0,I.jsx)(To,{model:e}),(0,I.jsx)(Kt,{model:e}),(0,I.jsx)(dn,{model:e})]})}),mn=Ho;var bn=u(Ue(),1),yn=u(T(),1);var ae=u(v(),1);function ce({x:r,y:e,w:t,text:n,color:o,italic:s,small:a,dimmed:d,title:i,testId:l,onClick:p,onHover:c}){return(0,ae.jsxs)("g",{style:{pointerEvents:p||c?"auto":"none",cursor:p?"pointer":void 0,opacity:d?.35:1},"data-testid":l,onClick:p,onMouseEnter:()=>{c?.(!0)},onMouseLeave:()=>{c?.(!1)},children:[i?(0,ae.jsx)("title",{children:i}):null,(0,ae.jsx)("rect",{x:r-t/2,y:e-11-4+2,width:t,height:17,rx:3,fill:"rgba(255,255,255,0.85)",stroke:o,strokeWidth:a?.6:1}),(0,ae.jsx)("text",{x:r,y:e,fontSize:a?10:11,fontFamily:"sans-serif",fontStyle:s?"italic":void 0,fontWeight:s?600:void 0,fill:o,textAnchor:"middle",children:n})]})}var q=u(v(),1),Go={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:3},No=(0,yn.observer)(function({model:e}){let{bubbles:t,genes:n,routes:o}=e.overlayLabels;if(t.length+n.length+o.length===0)return null;let{walkHighlight:s,scaleY:a,translateY:d,contigThickness:i}=e,l=c=>s!==void 0&&!c.nodeIds.some(m=>s.nodeIds.has(m)),p=c=>s!==void 0&&!c.route.walks.includes(s.name);return(0,q.jsxs)("svg",{style:Go,width:e.paneWidth,height:e.canvasHeight,"data-testid":"graph-label-layer",children:[n.map(({item:c,x:m,y:g,w:y,text:b})=>(0,q.jsxs)("g",{children:[(0,q.jsx)("line",{x1:m,x2:m,y1:g-11-2,y2:c.at.y*a+d+i/2,stroke:ye,strokeWidth:.8,strokeOpacity:.6}),(0,q.jsx)(ce,{x:m,y:g,w:y,text:b,color:ye,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}`)),o.map(({item:{halo:c,route:m},x:g,y,w:b,text:S})=>(0,q.jsx)(ce,{x:g,y,w:b,text:S,color:te[c.kind],small:!0,dimmed:p(m),title:`${m.route.walks.length} walk(s): ${m.route.walks.join(", ")}`,testId:"graph-route-label"},`${c.bubble.start}-${c.bubble.end}-${m.route.steps.join(",")}`)),t.map(({item:c,x:m,y:g,w:y,text:b})=>(0,q.jsx)(ce,{x:m,y:g,w:y,text:b,color:te[c.kind],dimmed:l(c),title:`${c.label}
|
|
2
|
+
${c.bubble.segmentCount} segments \xB7 click to open`,testId:"graph-bubble-halo-label",onClick:()=>{e.popBubble(c.bubble)},onHover:S=>{(0,bn.isAlive)(e)&&e.setHoveredBubble(S?c.bubble:null)}},`${c.bubble.start}-${c.bubble.end}`))]})}),vn=No;var ve=u(le(),1);var Sn=u(He(),1),Mn=u(Ke(),1),Oe=u(T(),1),P=u(v(),1),Bo={position:"absolute",left:0,top:0,pointerEvents:"none",zIndex:5},_o=(0,Oe.observer)(function({model:e}){let t=(0,ve.useRef)(null),{referenceStripShown:n,paneWidth:o,canvasHeight:s}=e;return(0,ve.useEffect)(()=>(0,Mn.autorun)(()=>{let a=t.current,d=e.referenceStripFrame,i=a?.getContext("2d");if(a&&i&&d&&e.referenceStripShown){let l=(0,Sn.getDpr)(),p=e.paneWidth,c=e.canvasHeight;a.width=Math.round(p*l),a.height=Math.round(c*l),i.setTransform(l,0,0,l,0,0),i.clearRect(0,0,p,c),it(i,e.referenceStripBlocks,d,{width:p,lit:e.referenceStripLit,darkMode:e.darkMode})}}),[e]),(0,P.jsx)("canvas",{ref:t,"data-testid":n?"graph-reference-strip":void 0,style:{...Bo,width:o,height:s,display:n?"block":"none"}})}),wn=_o,zo={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},xn={display:"flex",alignItems:"center",gap:5},kn=18;function Xo(){return(0,P.jsxs)("svg",{width:kn,height:4,style:{flex:"none"},children:[(0,P.jsx)("rect",{x:0,y:0,width:6,height:4,fill:"hsl(0, 70%, 50%)"}),(0,P.jsx)("rect",{x:6,y:0,width:5,height:4,fill:"hsl(120, 70%, 50%)"}),(0,P.jsx)("rect",{x:11,y:0,width:7,height:4,fill:"hsl(240, 70%, 50%)"})]})}function Oo(){return(0,P.jsx)("svg",{width:kn,height:8,style:{flex:"none"},children:(0,P.jsx)("path",{d:"M0,4 L5,0.5 L5,7.5 Z M18,4 L13,0.5 L13,7.5 Z",fill:"#18181c"})})}var Cn=(0,Oe.observer)(function({model:e}){return e.referenceStripShown?(0,P.jsxs)("div",{style:zo,"data-testid":"graph-reference-strip-legend",children:[(0,P.jsxs)("div",{style:xn,children:[(0,P.jsx)(Xo,{}),(0,P.jsx)("span",{children:"top strip: reference segments at their bp"})]}),e.referenceStripOverhangs?(0,P.jsxs)("div",{style:xn,children:[(0,P.jsx)(Oo,{}),(0,P.jsx)("span",{children:"the graph runs past this edge"})]}):null]}):null});var Se=u(le(),1);var En=u(He(),1),In=u(Ke(),1),Ye=u(T(),1),C=u(v(),1),Yo={position:"absolute",left:0,top:0,pointerEvents:"none",zIndex:1},Ao=(0,Ye.observer)(function({model:e}){let t=(0,Se.useRef)(null),{tubeMapPicture:n,paneWidth:o,canvasHeight:s}=e;return(0,Se.useEffect)(()=>(0,In.autorun)(()=>{let a=t.current,d=e.tubeMapPicture,i=e.tubeMapFrame,l=a?.getContext("2d");if(a&&l&&d&&i){let p=(0,En.getDpr)(),c=e.paneWidth,m=e.canvasHeight;a.width=Math.round(c*p),a.height=Math.round(m*p),l.setTransform(p,0,0,p,0,0),l.clearRect(0,0,c,m);let g={...i,width:c,highlightNode:e.hoveredNode??e.selectedNode,darkMode:e.darkMode};ht(l,d,g),pt(l,e.tubeMapDeviations,g),dt(l,e.tubeMapConnectors,e.connectorZoneBottom,g);let{bounds:y}=d;ft(l,e.tubeMapGenes,g,i.y(y.minY)-2);let b=e.tubeMapRulerBoxes;b&&ct(l,b,g,i.y(y.maxY)+4,e.layoutResult?.referenceAxis)}}),[e]),(0,C.jsx)("canvas",{ref:t,"data-testid":n?"graph-tube-map":void 0,style:{...Yo,width:o,height:s,display:n?"block":"none"}})}),Pn=Ao,Wo={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},$o={display:"flex",alignItems:"center",gap:5},xe=18;function Do(){let r=[[.5,5.5],[8.5,xe-.5]];return(0,C.jsx)("svg",{width:xe,height:7,style:{flex:"none"},children:(0,C.jsx)("path",{d:r.map(([e,t])=>`M${e},6 V1.5 H${t} V6`).join(" "),fill:"none",stroke:lt(),strokeWidth:1})})}var Ae={width:xe,height:7,flex:"none"},Fo={...Ae,display:"flex",justifyContent:"center",backgroundColor:"#b8b8c0"};function Vo(){return(0,C.jsx)("div",{style:Fo,children:(0,C.jsx)("div",{style:{width:2,backgroundColor:ut()}})})}function Rn({colors:r}){let e=100/r.length,t=r.map((n,o)=>`${n} ${o*e}% ${(o+1)*e}%`);return(0,C.jsx)("div",{style:{...Ae,background:`linear-gradient(to right, ${t.join(", ")})`}})}var Ln={width:xe,flex:"none",textAlign:"center",fontFamily:"monospace",fontSize:12};function Zo(){return(0,C.jsx)("div",{style:{...Ae,backgroundColor:"grey"}})}function Q({swatch:r,children:e}){return(0,C.jsxs)("div",{style:$o,children:[r,(0,C.jsx)("span",{children:e})]})}var Tn=(0,Ye.observer)(function({model:e}){let{logWidths:t,foldBp:n,forwardReads:o,reverseReads:s,mismatches:a}=e.tubeMapKeys,d=[o&&(0,C.jsx)(Q,{swatch:(0,C.jsx)(Rn,{colors:ot}),children:"read on the forward strand"},"fwd"),s&&(0,C.jsx)(Q,{swatch:(0,C.jsx)(Rn,{colors:rt}),children:"read on the reverse strand"},"rev"),a.has("substitution")&&(0,C.jsx)(Q,{swatch:(0,C.jsx)("span",{style:Ln,children:"A"}),children:"a read's base unlike the node's"},"sub"),a.has("insertion")&&(0,C.jsx)(Q,{swatch:(0,C.jsx)("span",{style:Ln,children:"*"}),children:"bases a read inserts"},"ins"),a.has("deletion")&&(0,C.jsx)(Q,{swatch:(0,C.jsx)(Zo,{}),children:"bases a read skips"},"del"),n!==void 0&&(0,C.jsxs)(Q,{swatch:(0,C.jsx)(Vo,{}),children:["a haplotype's variant under ",pe(n)]},"fold"),t&&(0,C.jsx)(Q,{swatch:(0,C.jsx)(Do,{}),children:"width grows with log of length"},"log")].filter(Boolean);return d.length>0?(0,C.jsx)("div",{style:Wo,"data-testid":"graph-tube-map-legend",children:d}):null});var Hn=u(J(),1),Gn=u(T(),1),Bn=u(v(),1),Uo={position:"absolute",left:8,top:8,zIndex:5,background:"rgba(255,255,255,0.9)",textTransform:"none"},Ko=(0,Gn.observer)(function({model:e}){let{poppedFrom:t}=e;return t?(0,Bn.jsxs)(Hn.Button,{size:"small",variant:"outlined",style:Uo,"data-testid":"graph-unpop-bubble",onClick:()=>{e.unpopBubble()},children:["\u25C0 Back to ",t.label]}):null}),Nn=Ko;var Xn=u(le(),1);var $e=u(T(),1);function Me(r){return`hsl(${r}, 70%, 50%)`}function We(r,e){let t=(r-e.start)/(e.end-e.start);return Math.max(0,Math.min(1,t))*Pe}var jo=30;function _n({start:r,bp:e,reversed:t},n){let o=We(r,n),s=We(r+e,n);if(s-o<1)return[(o+s)/2];let a=Math.ceil((s-o)/jo);return Array.from({length:a+1},(d,i)=>We(r+e*(t?a-i:i)/a,n))}var we=`linear-gradient(to right, ${Array.from({length:7},(r,e)=>`${Me(e/6*Pe)} ${e/6*100}%`).join(", ")})`;var k=u(v(),1),er={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},On="#2f8fd6",Yn="#111",An="#9e9e9e",Wn="#c62828",$n="#8e3fbf",A=12,tr={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},de={display:"flex",alignItems:"center",gap:5},ke={width:18,height:A-4,borderRadius:2},nr={...ke,display:"flex",justifyContent:"center"};function zn({color:r}){return(0,k.jsx)("div",{style:nr,children:(0,k.jsx)("div",{style:{width:2,backgroundColor:r}})})}var Dn=(0,$e.observer)(function({model:e}){let t=e.walkRowBars;if(!t)return null;let n=e.referenceRampDomain,o=[t.reference,...t.rows].flatMap(s=>s.call??[]);return(0,k.jsxs)("div",{style:tr,"data-testid":"graph-walk-rows-legend",children:[(0,k.jsxs)("div",{style:de,children:[(0,k.jsx)("div",{style:{...ke,background:n?we:On}}),(0,k.jsxs)("span",{children:["shared with ",t.reference.label]})]}),(0,k.jsxs)("div",{style:de,children:[(0,k.jsx)("div",{style:{...ke,backgroundColor:n?Te:$n}}),(0,k.jsx)("span",{children:"carried by haplotypes only"})]}),o.some(s=>s.spanningReads!==0)?(0,k.jsxs)("div",{style:de,children:[(0,k.jsx)(zn,{color:Yn}),(0,k.jsx)("span",{children:"allele length called for this walk"})]}):null,o.some(s=>s.spanningReads===0)?(0,k.jsxs)("div",{style:de,children:[(0,k.jsx)(zn,{color:An}),(0,k.jsx)("span",{children:"called with no read spanning it"})]}):null,o.some(s=>s.agrees===!1)?(0,k.jsxs)("div",{style:de,children:[(0,k.jsx)("div",{style:ke}),(0,k.jsxs)("span",{style:{color:Wn},children:["walk and call over ",Math.round(.1*100),"% apart"]})]}):null]})});function Ce(r){return`${(r/1e3).toFixed(r<1e4?1:0)} kb`}function Fn(r,e){return e?` \u2248 ${Math.round(r/e)} units`:""}function or(r,e,t){let{bp:n,complete:o,call:s}=r,a=n-e,d=a===0?"":` (${a>0?"+":"\u2212"}${Ce(Math.abs(a))})`,i=s?rr(s):"";return`${Ce(n)}${Fn(n,t)}${d}${o?"":" \xB7 partial walk"}${i}`}function rr(r){let e=r.spanningReads===0?" \xB7 no spanning read":"";return` \xB7 called ${Ce(r.bp)}${e}`}var sr=3;function ar(r,e,t){if(t(e)-t(0)<sr)return[];let n=[];for(let o=e;o<r;o+=e)n.push(o);return n}function ir(r,e,t){if(!e)return{fill:r.onReference?On:$n};if(r.referenceStart===void 0)return{fill:Te};let n=_n({...r,start:r.referenceStart},e);return n.length===1?{fill:Me(n[0])}:{fill:`url(#${t})`,gradient:(0,k.jsx)("linearGradient",{id:t,children:n.map((o,s)=>(0,k.jsx)("stop",{offset:s/(n.length-1),stopColor:Me(o)},s))})}}var lr=(0,$e.observer)(function({model:e}){let t=(0,Xn.useId)().replace(/[^\w-]/g,""),{walkRowBars:n,referenceRampDomain:o}=e;if(!n)return null;let{scaleX:s,scaleY:a,translateX:d,translateY:i,paneWidth:l,canvasHeight:p}=e,c=w=>w*s+d,m=w=>w*20*a+i,{origin:g,unit:y,reference:b,rows:S}=n,H=Math.max(g+b.bp,e.graphRegion?.end??0),G=(w,E,L,f="#333",x=6)=>{let R=c(E)+x,M=R+w.length*6.2<l;return(0,k.jsx)("text",{x:M?R:c(E)-6,y:L+4,fontSize:11,fontFamily:"sans-serif",fill:f,stroke:M?void 0:"white",strokeWidth:M?void 0:3,paintOrder:"stroke",textAnchor:M?"start":"end",children:w})},X=(w,E,L)=>w.filter(f=>f>0&&f<E).map(f=>(0,k.jsx)("line",{x1:c(g+f),x2:c(g+f),y1:L-A/2,y2:L+A/2,stroke:"white",strokeWidth:1},f)),B=(w,E,L,f)=>(0,k.jsx)("rect",{x:c(g+w),y:L-A/2,width:Math.max(1,E*s),height:A,fill:f},w);return(0,k.jsxs)("svg",{style:er,width:l,height:p,"data-testid":"graph-walk-rows",children:[G(`${Ce(b.bp)}${Fn(b.bp,y)}`,H,m(0),void 0,6+A/2),S.map((w,E)=>{let L=m(E+1);if(L<-A||L>p+A)return null;let{call:f}=w;return(0,k.jsxs)("g",{"data-testid":"graph-walk-row",children:[w.runs.map(x=>{let{fill:R,gradient:M}=ir(x,o,`${t}-${E}-${x.start}`);return(0,k.jsxs)("g",{children:[M,B(x.start,x.bp,L,R)]},x.start)}),y?X(ar(w.bp,y,x=>x*s),w.bp,L):null,f?(0,k.jsx)("rect",{"data-testid":"graph-walk-call",x:c(g+f.bp)-1,y:L-A/2-3,width:2,height:A+6,fill:f.spanningReads===0?An:Yn}):null,G(or(w,b.bp,y),g+w.bp,L,f?.agrees===!1?Wn:void 0)]},w.name)})]})}),Vn=lr;var ie=u(to(),1),Kn=u(He(),1),jn=u(Un(),1);var Le=class extends jn.Canvas2DRenderingBackendBase{constructor(){super(...arguments);this.transform=null;this.batch=null;this.nodeHighlights=new Map;this.highlightedEdge=null;this.highlightFactor=1}resize(t,n){(0,Kn.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 o=this.ctx,{width:s,height:a}=o.canvas;o.fillStyle=(0,ie.normalizedRgbToCssRgba)([t[0],t[1],t[2]],t[3]),o.fillRect(0,0,s,a);let d=this.batch;d&&(o.lineCap="round",o.lineJoin="round",this.renderEdges(d),this.renderNodes(d),this.renderArrows(d))}renderEdges(t){let n=this.transform,o=this.ctx,s=this.highlightedEdge===null?void 0:t.edgeCurveRuns.get(this.highlightedEdge);for(let{color:a,items:d}of De(t.edgeCurves,(i,l)=>({color:Re(s,l)?fe(i.color,this.highlightFactor):i.color,weight:i.thickness,last:Re(s,l)}))){o.strokeStyle=(0,ie.abgrToCssRgba)(a),o.lineWidth=d[0].thickness*2*n.dpr,o.beginPath();for(let i of d){let l=i.curves[0];o.moveTo(l.x0*n.scaleX+n.translateX,l.y0*n.scaleY+n.translateY);for(let p of i.curves)o.bezierCurveTo(p.cx0*n.scaleX+n.translateX,p.cy0*n.scaleY+n.translateY,p.cx1*n.scaleX+n.translateX,p.cy1*n.scaleY+n.translateY,p.x1*n.scaleX+n.translateX,p.y1*n.scaleY+n.translateY)}o.stroke()}}renderNodes(t){let n=this.transform,o=this.ctx,s=new Map;for(let[a,d]of this.nodeHighlights){let i=t.nodeStrokeRuns.get(a);if(i)for(let l=i.start;l<i.start+i.count;l++)s.set(l,d)}for(let{color:a,items:d}of De(t.nodeStrokes,(i,l)=>{let p=s.get(l);return{color:p===void 0?i.color:fe(i.color,p),weight:i.thickness,last:p!==void 0}})){o.strokeStyle=(0,ie.abgrToCssRgba)(a),o.lineWidth=d[0].thickness*2*n.dpr,o.beginPath();for(let i of d){let l=i.points[0];o.moveTo(l.x*n.scaleX+n.translateX,l.y*n.scaleY+n.translateY);for(let p=1,c=i.points.length;p<c;p++){let m=i.points[p];o.lineTo(m.x*n.scaleX+n.translateX,m.y*n.scaleY+n.translateY)}}o.stroke()}}renderArrows(t){let n=this.transform,o=this.ctx,s=this.highlightedEdge===null?void 0:t.arrowRuns.get(this.highlightedEdge);for(let{color:a,items:d}of De(t.arrows,(i,l)=>({color:Re(s,l)?fe(i.color,this.highlightFactor):i.color,weight:0,last:Re(s,l)}))){o.fillStyle=(0,ie.abgrToCssRgba)(a),o.beginPath();for(let i of d){let[l,p,c,m]=dr(i,n);o.moveTo(l.x,l.y),o.lineTo(p.x,p.y),o.lineTo(c.x,c.y),o.lineTo(m.x,m.y),o.closePath()}o.fill()}}dispose(){super.dispose(),this.batch=null,this.nodeHighlights=new Map,this.highlightedEdge=null}},cr=.25;function dr(r,e){let t=Math.cos(r.angle),n=Math.sin(r.angle),o=r.x*e.scaleX+e.translateX,s=r.y*e.scaleY+e.translateY,a=r.length*e.dpr,d=r.halfWidth*e.dpr,i=o-t*a,l=s-n*a,p=a*(1-cr);return[{x:o,y:s},{x:i-n*d,y:l+t*d},{x:o-t*p,y:s-n*p},{x:i+n*d,y:l-t*d}]}function Re(r,e){return r!==void 0&&e>=r.start&&e<r.start+r.count}function De(r,e){let t=new Map,n=new Map;for(let o=0,s=r.length;o<s;o++){let a=r[o],{color:d,weight:i,last:l}=e(a,o),p=l?n:t,c=`${d}:${i}`,m=p.get(c);m?m.items.push(a):p.set(c,{color:d,items:[a]})}return[...t.values(),...n.values()]}function qn(r){return Promise.resolve(new Le(r))}var h=u(v(),1),Jn={position:"absolute",bottom:8,right:8,background:"rgba(0,0,0,0.75)",color:"white",padding:"4px 8px",borderRadius:4,fontSize:12,pointerEvents:"none"},ur={position:"relative"},pr={position:"relative",lineHeight:0},hr={position:"absolute",inset:0,zIndex:10,lineHeight:"normal",pointerEvents:"none"},fr={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},mr=(0,W.observer)(function({model:e}){let t=e.drawnRowLabels;return(0,h.jsx)(h.Fragment,{children:t.map(({label:n,y:o})=>{let s=o*e.scaleY+e.translateY;return s>=0&&s<=e.canvasHeight?(0,h.jsx)("div",{"data-testid":"graph-row-label",style:{...fr,top:s},children:n},o):null})})}),gr={position:"absolute",top:he,right:he,display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4,pointerEvents:"none",zIndex:4},Fe={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},br={display:"flex",alignItems:"center",gap:5},yr={width:18,height:3,borderRadius:2},vr=(0,W.observer)(function({model:e}){let{pathLegend:t}=e;return t.length>0?(0,h.jsx)("div",{style:Fe,"data-testid":"graph-path-legend",children:t.map(({name:n,label:o,color:s})=>(0,h.jsxs)("div",{style:br,children:[(0,h.jsx)("div",{style:{...yr,backgroundColor:s}}),(0,h.jsx)("span",{children:o})]},n))}):null}),xr=(0,W.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,o=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,h.jsxs)("div",{style:Fe,"data-testid":"graph-walk-readout",children:[(0,h.jsx)("strong",{children:n}),": ",t.steps.toLocaleString()," steps,"," ",t.bp.toLocaleString()," bp",o,(0,h.jsx)("br",{}),"paler: what ",n," does not carry"]})}),Sr={minWidth:90,height:8,borderRadius:2,background:we},Mr={display:"flex",justifyContent:"space-between",gap:8},wr=(0,W.observer)(function({model:e}){let t=e.referenceRampDomain;return t?(0,h.jsxs)("div",{style:Fe,"data-testid":"graph-ramp-legend",children:[(0,h.jsx)("div",{style:Sr}),(0,h.jsxs)("div",{style:Mr,children:[(0,h.jsx)("span",{children:t.start.toLocaleString()}),(0,h.jsxs)("span",{children:["(",pe(t.end-t.start),")"]}),(0,h.jsx)("span",{children:t.end.toLocaleString()})]})]}):null}),eo={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},kr={...eo,color:"#18181c",fontWeight:600},Cr={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:2},Rr=(0,W.observer)(function({model:e}){let t=(0,z.useRef)(null);return(0,z.useEffect)(()=>{let n=t.current;if(!n)return;let o=new ResizeObserver(()=>{(0,Ee.isAlive)(e)&&e.setLegendSize({width:n.offsetWidth,height:n.offsetHeight})});return o.observe(n),()=>{o.disconnect()}},[e]),(0,h.jsxs)("div",{ref:t,style:{...gr,top:he+e.referenceStripZonePx},children:[(0,h.jsx)(wr,{model:e}),(0,h.jsx)(Cn,{model:e}),(0,h.jsx)(_t,{model:e}),(0,h.jsx)(vr,{model:e}),(0,h.jsx)(Tn,{model:e}),(0,h.jsx)(Dn,{model:e}),(0,h.jsx)(xr,{model:e})]})}),Lr=(0,W.observer)(function({model:e}){let t=e.overlayLabels.sizes,n=t.flatMap(({key:o,leader:s})=>s?[{key:o,...s}]:[]);return(0,h.jsxs)(h.Fragment,{children:[n.length>0?(0,h.jsx)("svg",{style:Cr,width:e.paneWidth,height:e.canvasHeight,children:n.map(({key:o,arcX:s,arcY:a,labelX:d,labelY:i})=>(0,h.jsx)("line",{"data-testid":"graph-label-leader",x1:s,y1:a,x2:d,y2:i,stroke:"#18181c",strokeWidth:1},o))}):null,t.map(({key:o,text:s,x:a,y:d,kind:i})=>(0,h.jsx)("div",{"data-testid":"graph-size-label",style:{...i==="deletion"?kr:eo,left:a,top:d},children:s},o))]})}),Er=(0,W.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,o=t?mt(t):void 0,s=e.hoveredEdge===null?void 0:e.deletions.find(a=>a.edgeIndex===e.hoveredEdge);return(0,h.jsxs)(h.Fragment,{children:[t?(0,h.jsxs)("div",{style:Jn,children:[(0,h.jsx)("strong",{children:t.name})," \u2014 length:"," ",t.length.toLocaleString(),", depth:"," ",t.depth.toFixed(1),o?(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("br",{}),o.sample," ",gt(o)," (rank"," ",t.stable?.rank,")"]}):null]}):null,n?(0,h.jsx)("div",{style:Jn,children:s?(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)("strong",{children:"Deletion"})," ",s.bp.toLocaleString()," bp",(0,h.jsx)("br",{}),s.refName,":",s.start.toLocaleString(),"-",s.end.toLocaleString()]}):(0,h.jsxs)(h.Fragment,{children:["Edge: ",n.from," \u2192 ",n.to]})}):null]})}),Ir=(0,W.observer)(function({model:e,nodeId:t,top:n,left:o,onClose:s}){let{own:a,reference:d,highlight:i}=e.nodeLaunchTargets(t);return(0,h.jsx)(ee.Menu,{open:!0,anchorReference:"anchorPosition",anchorPosition:{top:n,left:o},onClose:()=>{s()},onMenuItemClick:l=>{l()},menuItems:[{label:"Node details",icon:Nt,onClick:()=>{e.showNodeDetails(t)}},...bt({own:a,reference:d,highlight:i,onShowLinear:l=>{e.showInLinearView(l)},onHighlight:e.canHighlightInLinearView?l=>{e.highlightInLinearView(l)}:void 0})]})}),Pr=(0,W.observer)(function({model:e,ownChrome:t=!0}){let{canvasRef:n,canvas:o,error:s,retry:a}=(0,Qn.useRenderingBackend)(qn,e),d=(0,z.useRef)({x:0,y:0}),i=(0,z.useRef)(!1),l=(0,z.useRef)({frame:0,pan:null,hover:null});(0,z.useEffect)(()=>()=>{cancelAnimationFrame(l.current.frame)},[]);let[p,c]=(0,z.useState)(void 0);(0,z.useEffect)(()=>{if(o){let R=function(M){if(e.hostPlacesX)return;e.host&&M.stopPropagation(),M.preventDefault();let F=x.getBoundingClientRect();e.zoom(Pt(M),M.clientX-F.left,M.clientY-F.top)};var f=R;let x=o;return x.addEventListener("wheel",R,{passive:!1}),()=>{x.removeEventListener("wheel",R)}}},[o,e]);function m(f,x){return{x:(f-e.translateX)/e.scaleX,y:(x-e.translateY)/e.scaleY}}function g(f){let x=f.currentTarget.getBoundingClientRect();return m(f.clientX-x.left,f.clientY-x.top)}function y(f,x){let{nodePositions:R}=e,M=f*e.scaleX+e.translateX,F=x*e.scaleY+e.translateY;if(e.layoutResult?.tubeMap)return e.tubeMapNodeAt(M,F);let Ve=e.referenceStripNodeAt(M,F);return Ve||(R?Et(R,f,x,e.axisScale,e.positionsVersion,e.nodeInk):null)}function b(f){if(f.button===0){if(i.current=!1,e.hostPlacesX)return;e.host&&f.stopPropagation();let{x,y:R}=g(f),M=e.layoutResult?.tubeMap||f.nativeEvent.offsetY<e.referenceStripZonePx?null:y(x,R);M?e.setDraggingNode(M):e.setPanning(!0),d.current={x:f.clientX,y:f.clientY}}}function S(){let f=l.current;if(f.frame=0,f.pan&&(e.setTransform(e.scale,e.translateX+f.pan.dx,e.translateY+f.pan.dy),f.pan=null),f.hover&&e.nodePositions&&e.graph){let{x,y:R}=m(f.hover.x,f.hover.y);f.hover=null;let M=y(x,R);e.setHoveredNode(M),e.setHoveredEdge(M||e.layoutResult?.tubeMap?null:It(e.nodePositions,e.graph,x,R,e.axisScale,e.effectiveDrawPaths,e.positionsVersion,e.deletionEdgeIndexes,e.hiddenEdgeIndexes))}}function H(){l.current.frame||(l.current.frame=requestAnimationFrame(S))}function G(){let f=l.current;cancelAnimationFrame(f.frame),f.frame=0,f.pan=null,f.hover=null}function X(f){let x=f.clientX-d.current.x,R=f.clientY-d.current.y;d.current={x:f.clientX,y:f.clientY},(Math.abs(x)>1||Math.abs(R)>1)&&(i.current=!0);let M=l.current;if(e.draggingNode)e.moveNode(e.draggingNode,x/e.scaleX,R/e.scaleY);else if(e.isPanning)M.pan={dx:(M.pan?.dx??0)+x,dy:(M.pan?.dy??0)+R},H();else{let F=f.currentTarget.getBoundingClientRect();M.hover={x:f.clientX-F.left,y:f.clientY-F.top},H()}}function B(){e.stopDragging()}function w(){G(),(0,Ee.isAlive)(e)&&(e.stopDragging(),e.setHoveredNode(null),e.setHoveredEdge(null))}function E(f){let{x,y:R}=g(f),M=y(x,R);M&&(f.preventDefault(),c({nodeId:M,top:f.clientY,left:f.clientX}))}function L(f){if(!i.current){let{x,y:R}=g(f),M=y(x,R);e.setSelectedNode(M),M&&e.showNodeDetails(M)}}return(0,h.jsxs)("div",{style:ur,children:[t?(0,h.jsx)(mn,{model:e}):null,(0,h.jsxs)("div",{style:pr,onMouseEnter:()=>{e.setPointerInPane(!0)},onMouseLeave:()=>{(0,Ee.isAlive)(e)&&e.setPointerInPane(!1)},children:[(0,h.jsx)("canvas",{ref:n,"data-testid":"graph-genome-canvas",style:{width:e.paneWidth,height:e.canvasHeight,cursor:e.isPanning||e.draggingNode?"grabbing":"grab",display:"block"},onMouseDown:b,onMouseMove:X,onMouseUp:B,onMouseLeave:w,onClick:L,onContextMenu:E}),(0,h.jsx)(Pn,{model:e}),(0,h.jsx)(wn,{model:e}),(0,h.jsx)(mr,{model:e}),(0,h.jsx)(Lr,{model:e}),(0,h.jsx)(Bt,{model:e}),(0,h.jsx)(Xt,{model:e}),(0,h.jsx)(vn,{model:e}),(0,h.jsx)(Nn,{model:e}),(0,h.jsx)(Vn,{model:e}),(0,h.jsx)(Rr,{model:e}),t?(0,h.jsx)("div",{style:hr,children:(0,h.jsx)(ee.LoadingOverlay,{isVisible:e.isLoading,immediate:!e.layoutResult,statusMessage:e.statusMessage,onCancel:e.canCancelLoad?()=>{e.cancelLoad()}:void 0})}):null]}),(0,h.jsx)(Er,{model:e}),p?(0,h.jsx)(Ir,{model:e,nodeId:p.nodeId,top:p.top,left:p.left,onClose:()=>{c(void 0)}}):null,s?(0,h.jsx)(ee.ErrorBanner,{error:s,onReset:a}):null,t&&e.error?(0,h.jsx)(ee.ErrorBanner,{error:e.error,onReset:e.canRetryLoad?()=>{e.retryLoad()}:void 0}):null]})}),ya=Pr;export{ya as a};
|
|
3
|
+
//# sourceMappingURL=chunk-MNOQXDMY.js.map
|