jbrowse-plugin-graphgenomeviewer 4.0.23 → 4.0.24

package/README.md

@@ -4,27 +4,41 @@ Pangenome graphs in JBrowse 2.
 
 ## As a track of a linear view
 
-A `GraphTrack` cuts the graph for the view's window and redraws it as you pan.
+A `GraphTrack` cuts the graph for the view's window and redraws it as you pan. A
+force-directed track draws a strip of the reference segments at their bp above
+the graph, each in its node's colour, so the graph reads against the tracks
+above it.
 
-A force-directed track draws a strip of the reference segments at their bp above
-the graph, each in its node's colour, so the reference-position ramp ties the
-graph back to the linear view's coordinates.
+- **LPA's KIV-2 repeat.** The goldenrod outlines on the graph are the gene
+  track's LPA exons. The charcoal loops, sequence off the reference, hang inside
+  the array the curated VNTR track marks.
 
-![KIV-2 as a graph track under RefSeq genes, force-directed, its reference segments on a strip at their bp](img/force_kiv2.png)
+![KIV-2 as a graph track under RefSeq genes and the curated KIV-2 annotation, its reference segments on a strip at their bp](img/force_kiv2.png)
 
-![MICB's exons 2–4 as a tube map track, eight HPRC haplotypes, each reference node tied to its bp on the ruler](img/tube_map_micb_track.png)
+- **Each haplotype takes its own loops.** Side by side, one walk per panel:
+  HG01960 skips most of GRCh38's loops for the big one, and HG00133 takes both.
+
+![The KIV-2 array side by side: GRCh38, HG00097, HG01960 and HG00133 each followed start to end](img/force_kiv2_facet.png)
+
+- **Copy number off a bar.** Walk rows tile each haplotype by the 5,548 bp
+  kringle: GRCh38's six units are the six LPA exon pairs above, and HG00133
+  carries 27.
+
+![KIV-2 walk rows under LPA and the curated KIV-2 annotation](img/walk_rows_kiv2.png)
+
+- **Variants at their bp.** A tube map on the reference axis puts each of MICB's
+  variant columns under its exon.
+
+![MICB's exons 2–4 as a tube map on the reference axis under the RefSeq genes](img/tube_map_micb_ref.png)
 
 ## As its own view
 
 **Add → Graph genome view** opens a whole GFA file. A graph track's **Launch →
 Graph genome view** opens the cut on screen, drawn as the track draws it; a
-session spec does the same with `loadedTrackId` and `loadedRegion`.
-
-![MICB's exons 2–4 as a tube map on its own axis, with the reference ruler under it](img/tube_map_micb.png)
-
-![KIV-2 walk rows: eight haplotypes, each bar tiled by the kringle unit](img/walk_rows_kiv2.png)
+session spec does the same with `loadedTrackId` and `loadedRegion`. Hovering a
+node in the view bands its bp in the linear view:
 
-![The KIV-2 cut side by side: GRCh38, HG00097 and HG00133 each followed through the same graph, start to end](img/force_kiv2_facet.png)
+![The MICB cut as a view under its linear view, a variant's box hovered and its bp banded in exon 2](img/tube_map_micb.png)
 
 ## Features
 
@@ -33,9 +47,11 @@ session spec does the same with `loadedTrackId` and `loadedRegion`.
 - Genes from the session's annotation track, drawn on the graph
 - Bubbles from `gfatools bubble` or the graph itself, opened level by level
 - gbz-base haplotypes as walks: carriage as node thickness, walks lifted out as
-  metro-map lanes or side by side, one panel per walk, each shading from its
-  start to its end
+  metro-map lanes or side by side, a panel per walk or a row per sample, each
+  shading from its start to its end
 - GAF reads in the tube map, with their mismatches, from a gbz-base track
+- Figures as SVG, from the view's Export SVG or from a JSON spec with no browser
+  ([docs/figures.md](docs/figures.md))
 
 ## Usage
 

package/dist/chunks/{GraphGenomeView-QXKHSZQJ.js → GraphGenomeView-R5PVJLXR.js}

@@ -1,4 +1,4 @@
-import{a as x}from"./chunk-NSXARD3R.js";import"./chunk-75CO6QJZ.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-CLRXQ6BM.js";import{B as L}from"./chunk-VIFXYTIS.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
+import{a as x}from"./chunk-ICDR353R.js";import"./chunk-KFP4EQTM.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-CLRXQ6BM.js";import{B as L}from"./chunk-VIFXYTIS.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
 S	1	ACGT
 S	2	GGCC
 S	3	TTAA
@@ -7,4 +7,4 @@ L	1	+	2	+	0M
 L	1	+	3	+	0M
 L	2	+	4	+	0M
 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};
-//# sourceMappingURL=GraphGenomeView-QXKHSZQJ.js.map
+//# sourceMappingURL=GraphGenomeView-R5PVJLXR.js.map

package/dist/chunks/{LinearGraphDisplay-GMMLJWQ6.js → LinearGraphDisplay-AWNFBBQE.js}

@@ -1,2 +1,2 @@
-import{a as i}from"./chunk-NSXARD3R.js";import"./chunk-75CO6QJZ.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-CLRXQ6BM.js";import"./chunk-VIFXYTIS.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};
-//# sourceMappingURL=LinearGraphDisplay-GMMLJWQ6.js.map
+import{a as i}from"./chunk-ICDR353R.js";import"./chunk-KFP4EQTM.js";import"./chunk-UQEPPJEO.js";import"./chunk-SCMIJAAX.js";import"./chunk-FCWXYIFC.js";import"./chunk-CLRXQ6BM.js";import"./chunk-VIFXYTIS.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};
+//# sourceMappingURL=LinearGraphDisplay-AWNFBBQE.js.map

package/dist/chunks/chunk-ICDR353R.js

@@ -0,0 +1,3 @@
+import{Da as xt,F as st,Fa as St,G as ge,Ga as wt,H as it,I as Be,J as ue,R as be,T as ye,V as lt,W as ct,X as ve,Y as dt,a as T,b as Te,da as ut,g as Je,ga as pt,h as Qe,ha as ft,l as et,la as mt,na as ht,oa as gt,qa as bt,r as se,s as nt,v as ot,w as rt,wa as yt,x as We,y as he,ya as vt}from"./chunk-KFP4EQTM.js";import{b as tt}from"./chunk-UQEPPJEO.js";import{a as He}from"./chunk-FCWXYIFC.js";import{a as kt}from"./chunk-CLRXQ6BM.js";import{B as ie,t as at}from"./chunk-VIFXYTIS.js";import{a as w,b as _,c as te,d as qe,e as F}from"./chunk-XEJ47DLD.js";import{a as io,b as i}from"./chunk-FY3BTKY4.js";var Ct=io((Yr,Mt)=>{Mt.exports=JBrowseExports["@jbrowse/render-core/useRenderingBackend"]});var Ne=i(F(),1);var ae=i(qe(),1),Ue=i(He(),1),ro=i(Ct(),1);var Lt=i(w(),1),Rt=(0,T.createSvgIcon)((0,Lt.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 A=i(_(),1);var Ae=i(_(),1);var N={background:"rgba(255,255,255,0.82)",padding:"4px 6px",borderRadius:3,fontSize:11,lineHeight:"15px",whiteSpace:"nowrap"},P={display:"flex",alignItems:"center",gap:5},xe="rgba(160, 160, 160, 0.18)";var B=i(w(),1),lo={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},co=(0,Ae.observer)(function({model:e}){let{bubbleHalos:n,walkLift:o,hoveredBubble:r}=e;if(n.length===0)return null;let{scaleX:a,scaleY:s,translateX:l,translateY:u,paneWidth:p,canvasHeight:g}=e,d=e.contigThickness*ct,b=f=>o!==void 0&&!f.nodeIds.some(x=>o.nodeIds.has(x));return(0,B.jsx)("svg",{style:lo,width:p,height:g,"data-testid":"graph-bubble-halos",children:(0,B.jsx)("g",{transform:`translate(${l} ${u}) scale(${a} ${s})`,children:n.filter(f=>!f.whole).map(f=>(0,B.jsx)("path",{d:f.path,fill:"none",stroke:se[f.kind],strokeOpacity:r&&tt(f.bubble,r)?.45:b(f)?.06:.22,strokeWidth:d,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke"},`${f.bubble.start}-${f.bubble.end}`))})})}),Et=co;function uo({color:t}){return(0,B.jsx)("svg",{width:18,height:10,style:{flex:"none"},children:(0,B.jsx)("line",{x1:5,y1:5,x2:13,y2:5,stroke:t,strokeOpacity:.35,strokeWidth:8,strokeLinecap:"round"})})}var Pt=(0,Ae.observer)(function({model:e}){let n=new Map;for(let o of e.bubbleHalos)if(!o.whole){let r=se[o.kind],a=n.get(r)??new Set;a.add(nt[o.kind]),n.set(r,a)}return n.size>0?(0,B.jsx)("div",{style:N,"data-testid":"graph-halo-legend",children:[...n].map(([o,r])=>(0,B.jsxs)("div",{style:P,children:[(0,B.jsx)(uo,{color:o}),(0,B.jsxs)("span",{children:["bubble: ",[...r].join(", ")]})]},o))}):null});var Me=i(F(),1);var Ce=i(Te(),1),ze=i(_(),1);var V=i(w(),1),ne={width:18,height:8,borderRadius:2,flex:"none"},po={marginBottom:2},fo={...ne,width:48};function pe({walk:t,label:e,reference:n,hint:o}){let r=lt(t,n);return(0,V.jsxs)("div",{style:po,title:[r.hover,o].filter(Boolean).join(" \xB7 ")||void 0,children:[(0,V.jsxs)("div",{style:P,children:[(0,V.jsx)("div",{style:{...r.shades?fo:ne,background:be(t.encoding)}}),(0,V.jsxs)("span",{children:[(0,V.jsx)("strong",{children:e}),r.delta,r.reversed]})]}),r.scale?(0,V.jsx)("div",{children:r.scale}):null]})}var $=i(F(),1);var mo=50;function It(t,e){return e>0?Math.max(1,t/e):mo}function ho(t){let e=new Set,n=1/0,o=-1/0;for(let r of t)e.add(r.minY),n=Math.min(n,r.minY),o=Math.max(o,r.minY);return e.size>1?(o-n)/(e.size-1):void 0}function go(t,e,n){let o=It(e,t.length);return{x:o,y:n>0?It(n,t.length):ho(t)??o}}function Gt(t,e,n,o){return t===void 0?go(e,n,o):typeof t=="number"?{x:t,y:t}:t}function bo(t,e,n){let o=t.get(e);o||(o=new Map,t.set(e,o));let r=o.get(n);return r||(r=[],o.set(n,r)),r}function _t(t,e,n,o,r,a,s){let l=Math.floor(n/e.x),u=Math.floor(r/e.x),p=Math.floor(o/e.y),g=Math.floor(a/e.y);for(let d=l;d<=u;d++)for(let b=p;b<=g;b++)bo(t,d,b).push(s)}function Nt(t,e,n,o,r,a){let s=Math.floor((n-r)/e.x),l=Math.floor((n+r)/e.x),u=Math.floor((o-a)/e.y),p=Math.floor((o+a)/e.y),g=[],d=new Set;for(let b=s;b<=l;b++){let f=t.get(b);if(f)for(let x=u;x<=p;x++){let y=f.get(x);if(y)for(let m of y)d.has(m)||(d.add(m),g.push(m))}}return g}var Se=class{constructor(e,n){this.cells=new Map;let o=[],r=0,a=0;for(let[s,l]of Object.entries(e))for(let u=0;u<l.length-1;u++){let p=l[u],g=l[u+1],d=Math.min(p.x,g.x),b=Math.min(p.y,g.y),f=Math.max(p.x,g.x),x=Math.max(p.y,g.y);r+=f-d,a+=x-b,o.push({entry:{nodeId:s,segmentIdx:u},minX:d,minY:b,maxX:f,maxY:x})}this.cellSize=Gt(n,o,r,a);for(let s of o)_t(this.cells,this.cellSize,s.minX,s.minY,s.maxX,s.maxY,s.entry)}query(e,n,o,r=o){return Nt(this.cells,this.cellSize,e,n,o,r)}},we=class{constructor(e,n,o,r,a,s,l=0){this.cells=new Map;this.edgeCurves=it(e,n,r,s,l);let u=[],p=0,g=0;for(let d=0;d<n.edges.length;d++){let b=n.edges[d],f=e[b.from],x=e[b.to],y=this.edgeCurves.get(d);if(f?.length&&x?.length&&y){let{minX:m,minY:E,maxX:h,maxY:k}=ot(y),v=b.pathIds?.length??0;if(o&&v>0){let S=0,C=0;for(let L of he(f,x,v,r))S=Math.max(S,Math.abs(L.x)),C=Math.max(C,Math.abs(L.y));m-=S,E-=C,h+=S,k+=C}p+=h-m,g+=k-E,u.push({ei:d,minX:m,minY:E,maxX:h,maxY:k})}}this.cellSize=Gt(a,u,p,g);for(let d of u)_t(this.cells,this.cellSize,d.minX,d.minY,d.maxX,d.maxY,d.ei)}getCurves(e){return this.edgeCurves.get(e)}query(e,n,o,r=o){return Nt(this.cells,this.cellSize,e,n,o,r)}};function Bt(t,e,n,o,r,a){let s=r-n,l=a-o,u=s*s+l*l;if(u===0)return Math.hypot(t-n,e-o);let p=Math.max(0,Math.min(1,((t-n)*s+(e-o)*l)/u));return Math.hypot(t-(n+p*s),e-(o+p*l))}function yo(t,e,n,o,r,a,s,l,u,p){let g=1/0,d=20,b=n,f=o;for(let x=1;x<=d;x++){let y=x/d,m=1-y,E=m*m*m*n+3*m*m*y*r+3*m*y*y*s+y*y*y*u,h=m*m*m*o+3*m*m*y*a+3*m*y*y*l+y*y*y*p;g=Math.min(g,Bt(t,e,b,f,E,h)),b=E,f=h}return g}function vo(t,e,n){return yo(t,e,n.x0,n.y0,n.cx0,n.cy0,n.cx1,n.cy1,n.x1,n.y1)}function Ht(t,e,n,o=1){let r=1/0;for(let a of n){let s=vo(t,e,o===1?a:{x0:a.x0,y0:a.y0*o,cx0:a.cx0,cy0:a.cy0*o,cx1:a.cx1,cy1:a.cy1*o,x1:a.x1,y1:a.y1*o});s<r&&(r=s)}return r}var Tt=new WeakMap;function xo(t,e){let n=Tt.get(t);if(n?.version===e)return n.index;let o=new Se(t);return Tt.set(t,{version:e,index:o}),o}var Wt=new WeakMap;function So(t,e,n,o,r,a){let s=Wt.get(t);if(s?.graph===e&&s.drawPaths===n&&s.scaleX===o.scaleX&&s.scaleY===o.scaleY&&s.version===r&&s.deletions===a)return s.index;let l=new we(t,e,n,o,void 0,a,r);return Wt.set(t,{graph:e,drawPaths:n,scaleX:o.scaleX,scaleY:o.scaleY,version:r,index:l,deletions:a}),l}var wo=5;function At(t,e,n,o,r=0,a){let s=We(o),l=xo(t,r),u=f=>Math.max(wo,f)/o.scaleX,p=u(a?.maxHalfWidthPx??0),g=l.query(e,n,p,p/s),d=null,b=1/0;for(let{nodeId:f,segmentIdx:x}of g){let y=t[f],m=Bt(e,n*s,y[x].x,y[x].y*s,y[x+1].x,y[x+1].y*s);m<b&&m<u(a?.halfWidthPx(f)??0)&&(b=m,d=f)}return d}function zt(t,e,n,o,r,a,s=0,l,u){let p=We(r),g=10/r.scaleX,d=So(t,e,a,r,s,l),b=d.query(n,o,g,g/p),f=null,x=g;for(let y of b){let m=e.edges[y],E=t[m.from],h=t[m.to];if(!E?.length||!h?.length||u?.has(y))continue;let k=m.pathIds?.length??0,v=d.getCurves(y);if(!v)continue;let S;if(!a||k===0)S=Ht(n,o*p,v,p);else{let C=1/0;for(let L of he(E,h,k,r)){let H=L.x===0&&L.y===0?v:rt(v,L.x,L.y),X=Ht(n,o*p,H,p);X<C&&(C=X)}S=C}S<x&&(x=S,f=y)}return f}function Ot(t){let e=t.deltaY*(t.deltaMode===1?40:t.deltaMode===2?800:1),n=(t.ctrlKey?10:1)*e/100;return 1.1**-Math.max(-2,Math.min(2,n))}var Xt=i(He(),1);function ke(t,e){(0,$.useEffect)(()=>{if(!t)return;let n=t;function o(r){if(e.hostPlacesX)return;e.host&&r.stopPropagation(),r.preventDefault();let a=n.getBoundingClientRect();e.zoom(Ot(r),r.clientX-a.left,r.clientY-a.top)}return n.addEventListener("wheel",o,{passive:!1}),()=>{n.removeEventListener("wheel",o)}},[t,e])}function $t(t){let e=(0,$.useRef)({x:0,y:0}),n=(0,$.useRef)(!1),o=(0,$.useRef)({frame:0,pan:null,hover:null});(0,$.useEffect)(()=>()=>{cancelAnimationFrame(o.current.frame)},[]);let[r,a]=(0,$.useState)(void 0);function s(h,k){return{x:(h-t.translateX)/t.scaleX,y:(k-t.translateY)/t.scaleY}}function l(h){let k=h.currentTarget.getBoundingClientRect();return s(h.clientX-k.left,h.clientY-k.top)}function u(h,k){let{nodePositions:v}=t,S=h*t.scaleX+t.translateX,C=k*t.scaleY+t.translateY;if(t.layoutResult?.tubeMap)return t.tubeMapNodeAt(S,C);let L=t.referenceStripNodeAt(S,C);return L||(v?At(v,h,k,t.axisScale,t.positionsVersion,t.nodeInk):null)}function p(h){if(h.button===0){if(n.current=!1,t.hostPlacesX)return;t.host&&h.stopPropagation();let{x:k,y:v}=l(h),S=t.layoutResult?.tubeMap||h.nativeEvent.offsetY<t.referenceStripZonePx?null:u(k,v);S?t.setDraggingNode(S):t.setPanning(!0),e.current={x:h.clientX,y:h.clientY}}}function g(){let h=o.current;if(h.frame=0,h.pan&&(t.setTransform(t.scale,t.translateX+h.pan.dx,t.translateY+h.pan.dy),h.pan=null),h.hover&&t.nodePositions&&t.graph){let{x:k,y:v}=s(h.hover.x,h.hover.y);h.hover=null;let S=u(k,v);t.setHoveredNode(S),t.setHoveredEdge(S||t.layoutResult?.tubeMap?null:zt(t.nodePositions,t.graph,k,v,t.axisScale,t.effectiveDrawPaths&&!t.facetPanels,t.positionsVersion,t.deletionEdgeIndexes,t.hiddenEdgeIndexes))}}function d(){o.current.frame||(o.current.frame=requestAnimationFrame(g))}function b(){let h=o.current;cancelAnimationFrame(h.frame),h.frame=0,h.pan=null,h.hover=null}function f(h){let k=h.clientX-e.current.x,v=h.clientY-e.current.y;e.current={x:h.clientX,y:h.clientY},(Math.abs(k)>1||Math.abs(v)>1)&&(n.current=!0);let S=o.current;if(t.draggingNode)t.moveNode(t.draggingNode,k/t.scaleX,v/t.scaleY);else if(t.isPanning)S.pan={dx:(S.pan?.dx??0)+k,dy:(S.pan?.dy??0)+v},d();else{let C=h.currentTarget.getBoundingClientRect();S.hover={x:h.clientX-C.left,y:h.clientY-C.top},d()}}function x(){t.stopDragging()}function y(){b(),(0,Xt.isAlive)(t)&&(t.stopDragging(),t.setHoveredNode(null),t.setHoveredEdge(null))}function m(h){let{x:k,y:v}=l(h),S=u(k,v);S&&(h.preventDefault(),a({nodeId:S,top:h.clientY,left:h.clientX}))}function E(h){if(!n.current){let{x:k,y:v}=l(h),S=u(k,v);t.setSelectedNode(S),S&&t.showNodeDetails(S)}}return{handlers:{onMouseDown:p,onMouseMove:f,onMouseUp:x,onMouseLeave:y,onClick:E,onContextMenu:m},contextNode:r,closeContextMenu:()=>{a(void 0)}}}var Z=i(w(),1),Co={position:"absolute",left:0,top:0,zIndex:4,display:"grid",gap:8,lineHeight:"normal"},Lo={height:34,padding:"2px 6px",boxSizing:"border-box",fontFamily:"inherit",fontSize:11,color:"inherit",cursor:"pointer",border:"none",background:"none",textAlign:"left",display:"block"},Ro=(0,ze.observer)(function({model:e,lift:n,width:o,height:r,cell:a,handlers:s}){let[l,u]=(0,Me.useState)(null),p=n.walks[0];ke(l,e),(0,Me.useEffect)(()=>{if(!l)return;let d=new ge(l);d.resize(o,r);let b=(0,Ce.computed)(()=>e.buildDrawing(n,!1)),f,x=(0,Ce.autorun)(()=>{let y=b.get();y&&(y!==f&&(d.uploadGeometry(y.batch),f=y),e.applyHighlights(d),e.paint(d))});return()=>{x(),d.dispose()}},[l,e,n,o,r]);let g=e.walkLabel(p.name);return(0,Z.jsxs)("div",{style:a,children:[(0,Z.jsx)("button",{type:"button",style:Lo,"data-testid":"graph-facet-title",onClick:()=>{e.liftWalks([p.name]),e.setFacet("none")},children:(0,Z.jsx)(pe,{walk:p,label:g,reference:e.walkReference,hint:`click to lift ${g} alone`})}),(0,Z.jsx)("canvas",{ref:u,"data-testid":"graph-facet-canvas",style:{width:o,height:r,display:"block",cursor:e.isPanning||e.draggingNode?"grabbing":"grab"},...s})]})}),Eo=(0,ze.observer)(function({model:e,handlers:n}){let o=e.facetPanels,r=e.facetGrid,a=e.facetPlacement;if(!o||!r||!a)return null;let{columns:s,width:l,height:u}=r;return(0,Z.jsx)("div",{"data-testid":"graph-facet-panels",style:{...Co,width:e.paneWidth,minHeight:e.canvasHeight,gridTemplateColumns:`repeat(${s}, ${l}px)`,background:e.darkMode?"#1f1f1f":"white"},children:o.map((p,g)=>(0,Z.jsx)(Ro,{model:e,lift:p,width:l,height:u,cell:{gridRow:Math.floor(a.cells[g]/s)+1,gridColumn:a.cells[g]%s+1},handlers:n},p.walks[0].name))})}),Dt=Eo;var Yt=i(F(),1),Ft=i(_(),1),K=i(w(),1),Po={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:2},fe="#daa520",Io=4,Go=1,_o=2,No=(0,Ft.observer)(function({model:e}){let n=`exon-outline-${(0,Yt.useId)().replaceAll(/[^\w-]/g,"")}`,{genePins:o,walkLift:r,nodeInk:a}=e;if(o.length===0)return null;let{scaleX:s,scaleY:l,translateX:u,translateY:p,paneWidth:g,canvasHeight:d}=e,b=m=>{let E=a.halfWidthPx(m)*2;return r?.nodeIds.has(m)?Math.max(E,r.walks.length*Io):E},f=o.flatMap(m=>m.exonsByNode.map(({nodeId:E,d:h})=>({key:`${m.gene.name}-${m.gene.start}-${E}`,d:h,inner:b(E)+2*Go}))),x=`translate(${u} ${p}) scale(${s} ${l})`,y={fill:"none",strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke"};return(0,K.jsxs)("svg",{style:Po,width:g,height:d,"data-testid":"graph-gene-pins",children:[(0,K.jsx)("mask",{id:n,maskUnits:"userSpaceOnUse",x:0,y:0,width:g,height:d,children:(0,K.jsxs)("g",{transform:x,children:[f.map(m=>(0,K.jsx)("path",{d:m.d,stroke:"#fff",strokeWidth:m.inner+2*_o,...y},m.key)),f.map(m=>(0,K.jsx)("path",{d:m.d,stroke:"#000",strokeWidth:m.inner,...y},m.key))]})}),(0,K.jsx)("rect",{width:g,height:d,fill:fe,mask:`url(#${n})`})]})}),Vt=No;var Zt=i(w(),1),Kt=(0,T.createSvgIcon)((0,Zt.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 Oe=i(w(),1),jt=(0,T.createSvgIcon)([(0,Oe.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,Oe.jsx)("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2z"},"1")],"ZoomIn");var Ut=i(w(),1),qt=(0,T.createSvgIcon)((0,Ut.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 O=i(te(),1),Ye=i(_(),1),wn=i(ie(),1);var j=i(te(),1),Jt=i(_(),1),Qt=i(ie(),1),le=i(w(),1),Ho=(0,Qt.makeStyles)()({formControl:{minWidth:100}}),To=(0,Jt.observer)(function({model:e}){let{classes:n}=Ho(),o=e.walkLift?{value:"By walk",why:"Each lifted walk colours its own lane: set it under the menu, Walk, Colour"}:e.layoutResult?.tubeMap?{value:"By path",why:"A tube map colours each tube by its path"}:void 0;return(0,le.jsxs)(j.FormControl,{size:"small",className:n.formControl,disabled:o!==void 0,title:o?.why,children:[(0,le.jsx)(j.InputLabel,{children:"Color"}),(0,le.jsx)(j.Select,{value:e.chosenColorScheme,label:"Color",renderValue:o?()=>o.value:void 0,onChange:r=>{e.setColorScheme(r.target.value)},children:at.map(({value:r,label:a})=>(0,le.jsx)(j.MenuItem,{value:r,children:a},r))})]})}),en=To;var $e=i(te(),1),De=i(_(),1),tn=i(ie(),1),ce=i(w(),1),nn=(0,tn.makeStyles)()({stats:{marginLeft:"auto"},perf:{color:"#888",fontVariantNumeric:"tabular-nums"}});function Xe(t){return t===void 0?"\u2013":`${Math.round(t)}ms`}var Wo=(0,De.observer)(function({model:e}){let{classes:n}=nn(),{lastFetchMs:o,lastLayoutMs:r,lastGeometryMs:a}=e,s=o!==void 0||r!==void 0||a!==void 0;return e.showPerf&&s?(0,ce.jsxs)($e.Typography,{variant:"caption",className:n.perf,"data-testid":"graph-perf-stats",children:["fetch ",Xe(o)," \xB7 layout ",Xe(r)," \xB7 geom"," ",Xe(a)]}):null}),Bo=(0,De.observer)(function({model:e}){let{classes:n}=nn();return(0,ce.jsxs)("div",{className:n.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,ce.jsxs)($e.Typography,{variant:"body2",component:"span",children:[e.nodeCount," nodes, ",e.edgeCount," edges",e.pathCount>0?`, ${e.pathCount} paths`:""]})," ",(0,ce.jsx)(Wo,{model:e})]})}),on=Bo;var z=i(te(),1),rn=i(_(),1),an=i(ie(),1),U=i(w(),1),Ao=(0,an.makeStyles)()({formControl:{minWidth:150}}),zo=(0,rn.observer)(function({model:e}){let{classes:n}=Ao(),{graph:o}=e;return(0,U.jsxs)(z.FormControl,{size:"small",className:n.formControl,children:[(0,U.jsx)(z.InputLabel,{children:"Layout"}),(0,U.jsx)(z.Select,{value:e.chosenLayoutMode,label:"Layout","data-testid":"graph-layout-select",onChange:r=>{e.switchLayout(r.target.value)},children:et.map(({value:r,label:a,description:s,available:l})=>(0,U.jsx)(z.MenuItem,{value:r,disabled:o?!l(o):!1,children:(0,U.jsx)(z.Tooltip,{title:s,placement:"right",children:(0,U.jsx)("span",{children:a})})},r))})]})}),sn=zo;var D=i(te(),1),ln=i(_(),1),cn=i(ie(),1),q=i(w(),1),Oo=(0,cn.makeStyles)()({formControl:{minWidth:130,maxWidth:240}}),Xo=(0,ln.observer)(function({model:e}){let{classes:n}=Oo(),{repeatChoices:o}=e;if(e.chosenLayoutMode!=="walkrows"||o.length===0)return null;let r=new Set(o.map(a=>a.key));return(0,q.jsxs)(D.FormControl,{size:"small",className:n.formControl,children:[(0,q.jsx)(D.InputLabel,{children:"Repeat"}),(0,q.jsxs)(D.Select,{value:r.has(e.repeatKey)?e.repeatKey:"",label:"Repeat","data-testid":"graph-repeat-select",onChange:a=>{e.setRepeatKey(a.target.value)},children:[(0,q.jsx)(D.MenuItem,{value:"",children:(0,q.jsx)("em",{children:"Whole window"})}),o.map(({key:a,name:s,unit:l})=>(0,q.jsxs)(D.MenuItem,{value:a,children:[s," \xB7 ",l.toLocaleString()," bp unit"]},a))]})]})}),dn=Xo;var hn=i(F(),1),gn=i(qe(),1);var un=i(w(),1),pn=(0,T.createSvgIcon)((0,un.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 fn=i(w(),1),mn=(0,T.createSvgIcon)((0,fn.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 bn=i(_(),1);var J=i(w(),1),$o=(0,bn.observer)(function({model:e}){let[n,o]=(0,hn.useState)(!1);return(0,J.jsxs)(J.Fragment,{children:[(0,J.jsx)(gn.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:wt,onClick:()=>{o(!0)}},{type:"divider"},{label:"Return to import form",icon:pn,onClick:()=>{e.clearGraph()}}],children:(0,J.jsx)(mn,{})}),(0,J.jsx)(kt,{model:e,open:n,onClose:()=>{o(!1)}})]})}),yn=$o;var W=i(te(),1),vn=i(_(),1),xn=i(ie(),1),Q=i(w(),1),Do=(0,xn.makeStyles)()({formControl:{minWidth:130,maxWidth:260}}),Yo=(0,vn.observer)(function({model:e}){let{classes:n}=Do(),{walkChoices:o}=e;if(o.length===0||!e.liftsWalks)return null;let r=new Set(o.map(l=>l.name)),a=new Map(o.map(l=>[l.name,l.label])),s=e.walkLayers.map(l=>l.walk).filter(l=>r.has(l));return(0,Q.jsxs)(W.FormControl,{size:"small",className:n.formControl,children:[(0,Q.jsx)(W.InputLabel,{children:"Walks"}),(0,Q.jsx)(W.Select,{multiple:!0,value:s,label:"Walks","data-testid":"graph-walk-select",renderValue:l=>l.map(u=>a.get(u)).join(", "),onChange:l=>{let{value:u}=l.target;e.liftWalks(typeof u=="string"?u.split(","):u)},children:o.map(({name:l,label:u})=>(0,Q.jsxs)(W.MenuItem,{value:l,dense:!0,children:[(0,Q.jsx)(W.Checkbox,{size:"small",checked:s.includes(l)}),(0,Q.jsx)(W.ListItemText,{primary:u})]},l))})]})}),Sn=Yo;var I=i(w(),1),Fo=(0,wn.makeStyles)()({toolbar:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",borderBottom:"1px solid #ddd"}}),Vo=(0,Ye.observer)(function({model:e}){return(0,I.jsx)(O.Typography,{variant:"body2",children:e.zoomPercent})}),Zo=(0,Ye.observer)(function({model:e}){let{classes:n}=Fo();return(0,I.jsxs)("div",{className:n.toolbar,children:[(0,I.jsx)(sn,{model:e}),(0,I.jsx)(en,{model:e}),(0,I.jsx)(Sn,{model:e}),(0,I.jsx)(dn,{model:e}),(0,I.jsx)(O.Tooltip,{title:"Zoom in",children:(0,I.jsx)(O.IconButton,{size:"small",onClick:()=>{e.zoom(1.5,e.viewBox.width/2,e.viewBox.height/2)},children:(0,I.jsx)(jt,{})})}),(0,I.jsx)(O.Tooltip,{title:"Zoom out",children:(0,I.jsx)(O.IconButton,{size:"small",onClick:()=>{e.zoom(1/1.5,e.viewBox.width/2,e.viewBox.height/2)},children:(0,I.jsx)(qt,{})})}),(0,I.jsx)(O.Tooltip,{title:"Zoom to fit",children:(0,I.jsx)(O.IconButton,{size:"small",onClick:()=>{e.zoomToFit()},children:(0,I.jsx)(Kt,{})})}),(0,I.jsx)(Vo,{model:e}),(0,I.jsx)(on,{model:e}),(0,I.jsx)(yn,{model:e})]})}),kn=Zo;var Ln=i(He(),1),Rn=i(_(),1);var oe=i(w(),1);function me({x:t,y:e,w:n,text:o,note:r,color:a,edge:s=a,italic:l,small:u,dimmed:p,title:g,testId:d,onClick:b,onHover:f}){return(0,oe.jsxs)("g",{style:{pointerEvents:b||f?"auto":"none",cursor:b?"pointer":void 0,opacity:p?.35:1},"data-testid":d,onClick:b,onMouseEnter:()=>{f?.(!0)},onMouseLeave:()=>{f?.(!1)},children:[g?(0,oe.jsx)("title",{children:g}):null,(0,oe.jsx)("rect",{x:t-n/2,y:e-11-4+2,width:n,height:17,rx:3,fill:"rgba(255,255,255,0.85)",stroke:s,strokeWidth:u?.6:1}),(0,oe.jsxs)("text",{x:t,y:e,fontSize:u?10:11,fontFamily:"sans-serif",fontStyle:l?"italic":void 0,fontWeight:l?600:void 0,fill:a,textAnchor:"middle",children:[o,r?(0,oe.jsx)("tspan",{fontStyle:"normal",fontWeight:"normal",children:r}):null]})]})}var ee=i(w(),1),Ko={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",zIndex:3},Cn="#1c1c22",jo=(0,Rn.observer)(function({model:e}){let{bubbles:n,genes:o,routes:r}=e.overlayLabels;if(n.length+o.length+r.length===0)return null;let{walkLift:a,scaleY:s,translateY:l,contigThickness:u}=e,p=d=>a!==void 0&&!d.nodeIds.some(b=>a.nodeIds.has(b)),g=d=>a!==void 0&&!d.route.walks.some(b=>a.names.has(b));return(0,ee.jsxs)("svg",{style:Ko,width:e.paneWidth,height:e.canvasHeight,"data-testid":"graph-label-layer",children:[o.map(({item:d,x:b,y:f,w:x,text:y})=>{let{gene:m}=d,E=dt(d);return(0,ee.jsxs)("g",{children:[(0,ee.jsx)("line",{x1:b,x2:b,y1:f-11-2,y2:d.at.y*s+l+u/2,stroke:Cn,strokeWidth:.8,strokeOpacity:.6}),(0,ee.jsx)(me,{x:b,y:f,w:x,text:m.name,note:y.slice(m.name.length)||void 0,color:Cn,edge:fe,italic:!0,title:`${m.name} ${m.refName}:${m.start.toLocaleString()}-${m.end.toLocaleString()}${E?`, ${E} in the cut`:""}`,testId:"graph-gene-pin-label"})]},`${m.name}-${m.start}`)}),r.map(({item:{halo:d,route:b},x:f,y:x,w:y,text:m})=>(0,ee.jsx)(me,{x:f,y:x,w:y,text:m,color:se[d.kind],small:!0,dimmed:g(b),title:`${b.route.walks.length} walk(s): ${b.route.walks.join(", ")}`,testId:"graph-route-label"},`${d.bubble.start}-${d.bubble.end}-${b.route.steps.join(",")}`)),n.map(({item:d,x:b,y:f,w:x,text:y})=>(0,ee.jsx)(me,{x:b,y:f,w:x,text:y,color:se[d.kind],dimmed:p(d),title:`${d.label}
+${d.bubble.segmentCount} segments \xB7 click to open`,testId:"graph-bubble-halo-label",onClick:()=>{e.popBubble(d.bubble)},onHover:m=>{(0,Ln.isAlive)(e)&&e.setHoveredBubble(m?d.bubble:null)}},`${d.bubble.start}-${d.bubble.end}`))]})}),En=jo;var Le=i(F(),1);var In=i(st(),1),Gn=i(Te(),1),Fe=i(_(),1);var G=i(w(),1),Uo={position:"absolute",left:0,top:0,pointerEvents:"none",zIndex:5},qo=(0,Fe.observer)(function({model:e}){let n=(0,Le.useRef)(null),{referenceStripShown:o,paneWidth:r,canvasHeight:a}=e;return(0,Le.useEffect)(()=>(0,Gn.autorun)(()=>{let s=n.current,l=e.referenceStripFrame,u=s?.getContext("2d");if(s&&u&&l&&e.referenceStripShown){let p=(0,In.getDpr)(),g=e.paneWidth,d=e.canvasHeight;s.width=Math.round(g*p),s.height=Math.round(d*p),u.setTransform(p,0,0,p,0,0),u.clearRect(0,0,g,d),ut(u,e.referenceStripBlocks,l,{width:g,lit:e.referenceStripLit,darkMode:e.darkMode,dpr:p})}}),[e]),(0,G.jsx)("canvas",{ref:n,"data-testid":o?"graph-reference-strip":void 0,style:{...Uo,width:r,height:a,display:o?"block":"none"}})}),_n=qo,Nn=18,Jo="linear-gradient(to right, hsl(0, 70%, 50%) 0 33%, hsl(120, 70%, 50%) 33% 61%, hsl(240, 70%, 50%) 61%)";function Pn({rows:t}){return(0,G.jsx)("div",{style:{width:Nn,flex:"none"},children:t.map(({key:e,background:n})=>(0,G.jsx)("div",{style:{height:t.length>1?3:4,background:n}},e))})}function Qo(t){return t.walkLift?.walks.map(e=>({key:e.name,background:be(e.encoding)}))??[{key:"ramp",background:Jo}]}function er(){return(0,G.jsx)("svg",{width:Nn,height:10,style:{flex:"none"},children:(0,G.jsx)("path",{d:"M0,5 L8,0 L8,10 Z M18,5 L10,0 L10,10 Z",fill:"#18181c"})})}var Hn=(0,Fe.observer)(function({model:e}){let n=(e.walkLift?.walks.length??0)>1;return e.referenceStripShown?(0,G.jsxs)("div",{style:N,"data-testid":"graph-reference-strip-legend",children:[(0,G.jsxs)("div",{style:P,children:[(0,G.jsx)(Pn,{rows:Qo(e)}),(0,G.jsxs)("span",{children:["top strip: reference segments at their bp",n?", a row per walk":""]})]}),e.referenceStripFaded?(0,G.jsxs)("div",{style:P,children:[(0,G.jsx)(Pn,{rows:[{key:"pale",background:xe}]}),(0,G.jsxs)("span",{children:["reference not on"," ",n?"that row's walk":e.liftedWalksLabel]})]}):null,e.referenceStripOverhangs?(0,G.jsxs)("div",{style:P,children:[(0,G.jsx)(er,{}),(0,G.jsx)("span",{children:"the graph draws reference past this edge"})]}):null]}):null});var Ee=i(F(),1);var Bn=i(st(),1),An=i(Te(),1),Ve=i(_(),1);var R=i(w(),1),tr={position:"absolute",left:0,top:0,pointerEvents:"none",zIndex:1},nr=(0,Ve.observer)(function({model:e}){let n=(0,Ee.useRef)(null),{tubeMapPicture:o,paneWidth:r,canvasHeight:a}=e;return(0,Ee.useEffect)(()=>(0,An.autorun)(()=>{let s=n.current,l=e.tubeMapPicture,u=e.tubeMapFrame,p=s?.getContext("2d");if(s&&p&&l&&u){let g=(0,Bn.getDpr)(),d=e.paneWidth,b=e.canvasHeight;s.width=Math.round(d*g),s.height=Math.round(b*g),p.setTransform(g,0,0,g,0,0),p.clearRect(0,0,d,b);let f={...u,width:d,highlightNode:e.hoveredNode??e.selectedNode,darkMode:e.darkMode};bt(p,l,f),gt(p,e.tubeMapDeviations,f),mt(p,e.tubeMapConnectors,e.connectorZoneBottom,f);let{bounds:x}=l;yt(p,e.tubeMapGenes,f,u.y(x.minY)-2);let y=e.tubeMapRulerBoxes;y&&ft(p,y,f,u.y(x.maxY)+4,e.layoutResult?.referenceAxis)}}),[e]),(0,R.jsx)("canvas",{ref:n,"data-testid":o?"graph-tube-map":void 0,style:{...tr,width:r,height:a,display:o?"block":"none"}})}),zn=nr,Re=18;function or(){let t=[[.5,5.5],[8.5,Re-.5]];return(0,R.jsx)("svg",{width:Re,height:7,style:{flex:"none"},children:(0,R.jsx)("path",{d:t.map(([e,n])=>`M${e},6 V1.5 H${n} V6`).join(" "),fill:"none",stroke:pt(),strokeWidth:1})})}var Ze={width:Re,height:7,flex:"none"},rr={...Ze,display:"flex",justifyContent:"center",backgroundColor:"#b8b8c0"};function ar(){return(0,R.jsx)("div",{style:rr,children:(0,R.jsx)("div",{style:{width:2,backgroundColor:ht()}})})}function Tn({colors:t}){let e=100/t.length,n=t.map((o,r)=>`${o} ${r*e}% ${(r+1)*e}%`);return(0,R.jsx)("div",{style:{...Ze,background:`linear-gradient(to right, ${n.join(", ")})`}})}var Wn={width:Re,flex:"none",textAlign:"center",fontFamily:"monospace",fontSize:12};function sr(){return(0,R.jsx)("div",{style:{...Ze,backgroundColor:"grey"}})}function re({swatch:t,children:e}){return(0,R.jsxs)("div",{style:P,children:[t,(0,R.jsx)("span",{children:e})]})}var On=(0,Ve.observer)(function({model:e}){let{logWidths:n,foldBp:o,forwardReads:r,reverseReads:a,mismatches:s}=e.tubeMapKeys,l=[r&&(0,R.jsx)(re,{swatch:(0,R.jsx)(Tn,{colors:Je}),children:"read on the forward strand"},"fwd"),a&&(0,R.jsx)(re,{swatch:(0,R.jsx)(Tn,{colors:Qe}),children:"read on the reverse strand"},"rev"),s.has("substitution")&&(0,R.jsx)(re,{swatch:(0,R.jsx)("span",{style:Wn,children:"A"}),children:"a read's base unlike the node's"},"sub"),s.has("insertion")&&(0,R.jsx)(re,{swatch:(0,R.jsx)("span",{style:Wn,children:"*"}),children:"bases a read inserts"},"ins"),s.has("deletion")&&(0,R.jsx)(re,{swatch:(0,R.jsx)(sr,{}),children:"bases a read skips"},"del"),o!==void 0&&(0,R.jsxs)(re,{swatch:(0,R.jsx)(ar,{}),children:["a haplotype's variant under ",ye(o)]},"fold"),n&&(0,R.jsx)(re,{swatch:(0,R.jsx)(or,{}),children:"width grows with log of length"},"log")].filter(Boolean);return l.length>0?(0,R.jsx)("div",{style:N,"data-testid":"graph-tube-map-legend",children:l}):null});var Xn=i(te(),1),$n=i(_(),1),Yn=i(w(),1),ir={position:"absolute",left:8,zIndex:5,background:"rgba(255,255,255,0.9)",textTransform:"none"},lr=(0,$n.observer)(function({model:e}){let{poppedFrom:n}=e;return n?(0,Yn.jsxs)(Xn.Button,{size:"small",variant:"outlined",style:{...ir,...e.facetPanels?{bottom:8}:{top:8}},"data-testid":"graph-unpop-bubble",onClick:()=>{e.unpopBubble()},children:["\u25C0 Back to ",n.label]}):null}),Dn=lr;var Zn=i(F(),1);var je=i(_(),1);function Pe(t){return`hsl(${t}, 70%, 50%)`}function Ke(t,e){let n=(t-e.start)/(e.end-e.start);return Math.max(0,Math.min(1,n))*Be}var cr=30;function Fn({start:t,bp:e,reversed:n},o){let r=Ke(t,o),a=Ke(t+e,o);if(a-r<1)return[(r+a)/2];let s=Math.ceil((a-r)/cr);return Array.from({length:s+1},(l,u)=>Ke(t+e*(n?s-u:u)/s,o))}var Ie=`linear-gradient(to right, ${Array.from({length:7},(t,e)=>`${Pe(e/6*Be)} ${e/6*100}%`).join(", ")})`;var M=i(w(),1),fr={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:3},Kn="#2f8fd6",jn="#111",Un="#9e9e9e",qn="#c62828",Jn="#8e3fbf",Y=12,Ge={width:18,height:Y-4,borderRadius:2},mr={...Ge,display:"flex",justifyContent:"center"};function Vn({color:t}){return(0,M.jsx)("div",{style:mr,children:(0,M.jsx)("div",{style:{width:2,backgroundColor:t}})})}var Qn=(0,je.observer)(function({model:e}){let n=e.walkRowBars;if(!n)return null;let o=e.referenceRampDomain,r=[n.reference,...n.rows].flatMap(a=>a.call??[]);return(0,M.jsxs)("div",{style:N,"data-testid":"graph-walk-rows-legend",children:[(0,M.jsxs)("div",{style:P,children:[(0,M.jsx)("div",{style:{...Ge,background:o?Ie:Kn}}),(0,M.jsxs)("span",{children:["shared with ",n.reference.label]})]}),(0,M.jsxs)("div",{style:P,children:[(0,M.jsx)("div",{style:{...Ge,backgroundColor:o?ue:Jn}}),(0,M.jsx)("span",{children:"carried by haplotypes only"})]}),r.some(a=>a.spanningReads!==0)?(0,M.jsxs)("div",{style:P,children:[(0,M.jsx)(Vn,{color:jn}),(0,M.jsx)("span",{children:"allele length called for this walk"})]}):null,r.some(a=>a.spanningReads===0)?(0,M.jsxs)("div",{style:P,children:[(0,M.jsx)(Vn,{color:Un}),(0,M.jsx)("span",{children:"called with no read spanning it"})]}):null,r.some(a=>a.agrees===!1)?(0,M.jsxs)("div",{style:P,children:[(0,M.jsx)("div",{style:Ge}),(0,M.jsxs)("span",{style:{color:qn},children:["walk and call over ",Math.round(.1*100),"% apart"]})]}):null]})});function _e(t){return`${(t/1e3).toFixed(t<1e4?1:0)} kb`}function eo(t,e){return e?` \u2248 ${Math.round(t/e)} units`:""}function hr(t,e,n){let{bp:o,complete:r,call:a}=t,s=o-e,l=s===0?"":` (${s>0?"+":"\u2212"}${_e(Math.abs(s))})`,u=a?gr(a):"";return`${_e(o)}${eo(o,n)}${l}${r?"":" \xB7 partial walk"}${u}`}function gr(t){let e=t.spanningReads===0?" \xB7 no spanning read":"";return` \xB7 called ${_e(t.bp)}${e}`}var br=3;function yr(t,e,n){if(n(e)-n(0)<br)return[];let o=[];for(let r=e;r<t;r+=e)o.push(r);return o}function vr(t,e,n){if(!e)return{fill:t.onReference?Kn:Jn};if(t.referenceStart===void 0)return{fill:ue};let o=Fn({...t,start:t.referenceStart},e);return o.length===1?{fill:Pe(o[0])}:{fill:`url(#${n})`,gradient:(0,M.jsx)("linearGradient",{id:n,children:o.map((r,a)=>(0,M.jsx)("stop",{offset:a/(o.length-1),stopColor:Pe(r)},a))})}}var xr=(0,je.observer)(function({model:e}){let n=(0,Zn.useId)().replace(/[^\w-]/g,""),{walkRowBars:o,referenceRampDomain:r}=e;if(!o)return null;let{scaleX:a,scaleY:s,translateX:l,translateY:u,paneWidth:p,canvasHeight:g}=e,d=v=>v*a+l,b=v=>v*20*s+u,{origin:f,unit:x,reference:y,rows:m}=o,E=(v,S,C,L="#333")=>{let H=d(S)+6,X=H+v.length*6.2<p;return(0,M.jsx)("text",{x:X?H:d(S)-6,y:C+4,fontSize:11,fontFamily:"sans-serif",fill:L,stroke:X?void 0:"white",strokeWidth:X?void 0:3,paintOrder:"stroke",textAnchor:X?"start":"end",children:v})},h=(v,S,C)=>v.filter(L=>L>0&&L<S).map(L=>(0,M.jsx)("line",{x1:d(f+L),x2:d(f+L),y1:C-Y/2,y2:C+Y/2,stroke:"white",strokeWidth:1},L)),k=(v,S,C,L)=>(0,M.jsx)("rect",{x:d(f+v),y:C-Y/2,width:Math.max(1,S*a),height:Y,fill:L},v);return(0,M.jsx)("svg",{style:fr,width:p,height:g,"data-testid":"graph-walk-rows",children:[y,...m].map((v,S)=>{let C=b(S);if(C<-Y||C>g+Y)return null;let{call:L}=v;return(0,M.jsxs)("g",{"data-testid":S===0?"graph-walk-reference":"graph-walk-row",children:[v.runs.map(H=>{let{fill:X,gradient:so}=vr(H,r,`${n}-${S}-${H.start}`);return(0,M.jsxs)("g",{children:[so,k(H.start,H.bp,C,X)]},H.start)}),x?h(yr(v.bp,x,H=>H*a),v.bp,C):null,L?(0,M.jsx)("rect",{"data-testid":"graph-walk-call",x:d(f+L.bp)-1,y:C-Y/2-3,width:2,height:Y+6,fill:L.spanningReads===0?Un:jn}):null,E(S===0?`${_e(v.bp)}${eo(v.bp,x)}`:hr(v,y.bp,x),f+v.bp,C,L?.agrees===!1?qn:void 0)]},v.name)})})}),to=xr;function no(t){return Promise.resolve(new ge(t))}var c=i(w(),1),oo={position:"absolute",bottom:8,right:8,background:"rgba(0,0,0,0.75)",color:"white",padding:"4px 8px",borderRadius:4,fontSize:12,pointerEvents:"none",zIndex:6},Sr={position:"relative"},wr={position:"relative",lineHeight:0,isolation:"isolate"},kr={position:"absolute",left:0,right:0,bottom:0,zIndex:0},Mr={position:"absolute",inset:0,zIndex:10,lineHeight:"normal",pointerEvents:"none"},Cr={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},Lr=(0,A.observer)(function({model:e}){let n=e.drawnRowLabels;return(0,c.jsx)(c.Fragment,{children:n.map(({label:o,y:r})=>{let a=r*e.scaleY+e.translateY;return a>=0&&a<=e.canvasHeight?(0,c.jsx)("div",{"data-testid":"graph-row-label",style:{...Cr,top:a},children:o},r):null})})}),Rr={position:"absolute",top:ve,right:ve,display:"flex",flexDirection:"column",alignItems:"flex-end",gap:4,pointerEvents:"none",zIndex:4},Er={width:18,height:3,borderRadius:2},Pr=(0,A.observer)(function({model:e}){let{pathLegend:n}=e;return n.length>0?(0,c.jsx)("div",{style:N,"data-testid":"graph-path-legend",children:n.map(({name:o,label:r,color:a})=>(0,c.jsxs)("div",{style:P,children:[(0,c.jsx)("div",{style:{...Er,backgroundColor:a}}),(0,c.jsx)("span",{children:r})]},o))}):null}),Ir=(0,A.observer)(function({model:e}){let n=e.walkLift;return n?(0,c.jsxs)("div",{style:N,"data-testid":"graph-walk-readout",children:[n.walks.map(o=>(0,c.jsx)(pe,{walk:o,label:e.walkLabel(o.name),reference:e.walkReference},o.name)),(0,c.jsxs)("div",{style:P,children:[(0,c.jsx)("div",{style:{...ne,background:xe}}),(0,c.jsxs)("span",{children:["not on ",e.liftedWalksLabel]})]})]}):null}),Gr={minWidth:90,height:8,borderRadius:2,background:Ie},_r={display:"flex",justifyContent:"space-between",gap:8},Nr=(0,A.observer)(function({model:e}){let n=e.walkLift?void 0:e.referenceRampDomain,{offReference:o,unplaced:r}=e.referenceRampOffKeys;return n?(0,c.jsxs)("div",{style:N,"data-testid":"graph-ramp-legend",children:[(0,c.jsx)("div",{style:Gr}),(0,c.jsxs)("div",{style:_r,children:[(0,c.jsx)("span",{children:n.start.toLocaleString()}),(0,c.jsxs)("span",{children:["(",ye(n.end-n.start),")"]}),(0,c.jsx)("span",{children:n.end.toLocaleString()})]}),o?(0,c.jsxs)("div",{style:P,children:[(0,c.jsx)("div",{style:{...ne,background:ue}}),(0,c.jsx)("span",{children:"off the reference"})]}):null,r?(0,c.jsxs)("div",{style:P,children:[(0,c.jsx)("div",{style:{...ne,background:Hr}}),(0,c.jsx)("span",{children:"no reference position"})]}):null]}):null}),Hr="rgb(160, 160, 160)",Tr={...ne,border:`2px solid ${fe}`,borderRadius:5,boxSizing:"border-box"},Wr=(0,A.observer)(function({model:e}){return e.genePins.some(n=>n.exonsByNode.length>0)?(0,c.jsx)("div",{style:N,"data-testid":"graph-gene-legend",children:(0,c.jsxs)("div",{style:P,children:[(0,c.jsx)("div",{style:Tr}),(0,c.jsx)("span",{children:"exon"})]})}):null}),ao={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},Br={...ao,color:"#18181c",fontWeight:600},Ar={position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"visible",zIndex:2},zr=(0,A.observer)(function({model:e}){let n=(0,Ne.useRef)(null);return(0,Ne.useEffect)(()=>{let o=n.current;if(!o)return;let r=new ResizeObserver(()=>{(0,Ue.isAlive)(e)&&e.setLegendSize({width:o.offsetWidth,height:o.offsetHeight})});return r.observe(o),()=>{r.disconnect()}},[e]),(0,c.jsxs)("div",{ref:n,style:{...Rr,top:ve+e.referenceStripZonePx},children:[(0,c.jsx)(Nr,{model:e}),(0,c.jsx)(Hn,{model:e}),(0,c.jsx)(Pt,{model:e}),(0,c.jsx)(Wr,{model:e}),(0,c.jsx)(Pr,{model:e}),(0,c.jsx)(On,{model:e}),(0,c.jsx)(Qn,{model:e}),(0,c.jsx)(Ir,{model:e})]})}),Or=(0,A.observer)(function({model:e}){let n=e.overlayLabels.sizes,o=n.flatMap(({key:r,leader:a})=>a?[{key:r,...a}]:[]);return(0,c.jsxs)(c.Fragment,{children:[o.length>0?(0,c.jsx)("svg",{style:Ar,width:e.paneWidth,height:e.canvasHeight,children:o.map(({key:r,arcX:a,arcY:s,labelX:l,labelY:u})=>(0,c.jsx)("line",{"data-testid":"graph-label-leader",x1:a,y1:s,x2:l,y2:u,stroke:"#18181c",strokeWidth:1},r))}):null,n.map(({key:r,text:a,x:s,y:l,kind:u})=>(0,c.jsx)("div",{"data-testid":"graph-size-label",style:{...u==="deletion"?Br:ao,left:s,top:l},children:a},r))]})}),Xr=(0,A.observer)(function({model:e}){let n=e.hoveredNode?e.nodeById?.get(e.hoveredNode):null,o=e.hoveredEdge!==null&&e.graph?e.graph.edges[e.hoveredEdge]:null,r=n?vt(n):void 0,a=e.hoveredEdge===null?void 0:e.deletions.find(s=>s.edgeIndex===e.hoveredEdge);return(0,c.jsxs)(c.Fragment,{children:[n?(0,c.jsxs)("div",{style:oo,children:[(0,c.jsx)("strong",{children:n.name})," \u2014"," ",n.length.toLocaleString()," bp, depth"," ",n.depth.toFixed(1),r?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("br",{}),r.sample," ",xt(r)," (rank"," ",n.stable?.rank,")"]}):null]}):null,o?(0,c.jsx)("div",{style:oo,children:a?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("strong",{children:"Deletion"})," ",a.bp.toLocaleString()," bp",(0,c.jsx)("br",{}),a.refName,":",a.start.toLocaleString(),"-",a.end.toLocaleString()]}):(0,c.jsxs)(c.Fragment,{children:["Edge: ",o.from," \u2192 ",o.to]})}):null]})}),$r=(0,A.observer)(function({model:e,nodeId:n,top:o,left:r,onClose:a}){let{own:s,reference:l,highlight:u}=e.nodeLaunchTargets(n);return(0,c.jsx)(ae.Menu,{open:!0,anchorReference:"anchorPosition",anchorPosition:{top:o,left:r},onClose:()=>{a()},onMenuItemClick:p=>{p()},menuItems:[{label:"Node details",icon:Rt,onClick:()=>{e.showNodeDetails(n)}},...St({own:s,reference:l,highlight:u,onShowLinear:p=>{e.showInLinearView(p)},onHighlight:e.canHighlightInLinearView?p=>{e.highlightInLinearView(p)}:void 0})]})}),Dr=(0,A.observer)(function({model:e,ownChrome:n=!0}){let{canvasRef:o,canvas:r,error:a,retry:s}=(0,ro.useRenderingBackend)(no,e),{handlers:l,contextNode:u,closeContextMenu:p}=$t(e);ke(r,e);let g=e.facetPanels!==void 0;return(0,c.jsxs)("div",{style:Sr,children:[n?(0,c.jsx)(kn,{model:e}):null,(0,c.jsxs)("div",{style:wr,onMouseEnter:()=>{e.setPointerInPane(!0)},onMouseLeave:()=>{(0,Ue.isAlive)(e)&&e.setPointerInPane(!1)},children:[e.referenceStripShown?(0,c.jsx)("div",{style:{...kr,top:e.referenceStripZonePx,background:e.paperCss}}):null,(0,c.jsx)("canvas",{ref:o,"data-testid":"graph-genome-canvas",style:{width:e.paneWidth,height:e.canvasHeight,cursor:e.isPanning||e.draggingNode?"grabbing":"grab",display:"block",position:"relative",zIndex:1},...l}),g?(0,c.jsx)(Dt,{model:e,handlers:l}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(zn,{model:e}),(0,c.jsx)(_n,{model:e}),(0,c.jsx)(Lr,{model:e}),(0,c.jsx)(Or,{model:e}),(0,c.jsx)(Et,{model:e}),(0,c.jsx)(Vt,{model:e}),(0,c.jsx)(En,{model:e}),(0,c.jsx)(to,{model:e}),(0,c.jsx)(zr,{model:e})]}),(0,c.jsx)(Dn,{model:e}),n?(0,c.jsx)("div",{style:Mr,children:(0,c.jsx)(ae.LoadingOverlay,{isVisible:e.isLoading,immediate:!e.layoutResult,statusMessage:e.statusMessage,onCancel:e.canCancelLoad?()=>{e.cancelLoad()}:void 0})}):null]}),(0,c.jsx)(Xr,{model:e}),u?(0,c.jsx)($r,{model:e,nodeId:u.nodeId,top:u.top,left:u.left,onClose:p}):null,a?(0,c.jsx)(ae.ErrorBanner,{error:a,onReset:s}):null,n&&e.error?(0,c.jsx)(ae.ErrorBanner,{error:e.error,onReset:e.canRetryLoad?()=>{e.retryLoad()}:void 0}):null]})}),Us=Dr;export{Us as a};
+//# sourceMappingURL=chunk-ICDR353R.js.map