| import {useEffect, useMemo, useRef, useState} from 'react'; |
| import {useMotion} from './Motion'; |
|
|
| export type AtlasPoints = { |
| ids:string[]; xy:number[][]; reference:boolean[]; lengths:number[]; |
| clusters:number[]; colors:string[]; rotation_degrees:number; display_bounds?:number[][]; |
| }; |
| export type AtlasLandmark = {uniref_id:string; title:string; thumbnail:string; number:number}; |
| type View = {zoom:number; x:number; y:number}; |
| const gridSize=100; |
| const reducedMotion=()=>window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
|
|
| function normalize(data:AtlasPoints) { |
| const angle=data.rotation_degrees*Math.PI/180,c=Math.cos(angle),s=Math.sin(angle); |
| const xy=data.xy.map(([x,y])=>[x*c-y*s,x*s+y*c]); |
| let minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity; |
| for(const [x,y] of xy){minX=Math.min(minX,x);maxX=Math.max(maxX,x);minY=Math.min(minY,y);maxY=Math.max(maxY,y);} |
| if(data.display_bounds){[[minX,minY],[maxX,maxY]]=data.display_bounds;} |
| const cx=(minX+maxX)/2,cy=(minY+maxY)/2,span=Math.max(maxX-minX,maxY-minY)||1; |
| const vertices=new Float32Array(data.ids.length*6),grid=new Map<string,number[]>(); |
| xy.forEach(([x,y],i)=>{ |
| const nx=(x-cx)/span*1.72,ny=(y-cy)/span*1.72,color=data.colors[data.clusters[i]]; |
| vertices.set([nx,ny,data.reference[i]?1:0,...[1,3,5].map(j=>parseInt(color.slice(j,j+2),16)/255)],i*6); |
| const key=`${Math.floor(nx*gridSize)},${Math.floor(ny*gridSize)}`; |
| const cell=grid.get(key);if(cell)cell.push(i);else grid.set(key,[i]); |
| }); |
| return {vertices,grid}; |
| } |
|
|
| export function AtlasMap({data,selectedId,onSelect,featured=[],preview=false}:{data:AtlasPoints;selectedId?:string|null;onSelect:(id:string)=>void;featured?:AtlasLandmark[];preview?:boolean}) { |
| const canvas=useRef<HTMLCanvasElement>(null),host=useRef<HTMLDivElement>(null); |
| const norm=useMemo(()=>normalize(data),[data]); |
| const idIndex=useMemo(()=>new Map(data.ids.map((id,i)=>[id,i])),[data]); |
| const [size,setSize]=useState({width:800,height:540}),[view,setView]=useState<View>({zoom:1,x:0,y:0}); |
| const [layer,setLayer]=useState<'communities'|'reference'|'descriptions'>(preview?'reference':'communities'); |
| const {enabled,reduced}=useMotion(); |
| const [inView,setInView]=useState(false); |
| const annotation=useRef(0); |
| const [hover,setHover]=useState<{index:number;x:number;y:number}|null>(null); |
| const [error,setError]=useState(''),[ready,setReady]=useState(false); |
| const renderer=useRef<{gl:WebGLRenderingContext;program:WebGLProgram;locations:Record<string,WebGLUniformLocation|null>}|null>(null); |
| const drag=useRef<{id:number;x:number;y:number;start:View;distance:number}|null>(null); |
| const pointers=useRef(new Map<number,{x:number;y:number}>()); |
| const pinch=useRef<{distance:number;cx:number;cy:number;view:View}|null>(null); |
| const animation=useRef(0),fade=useRef(1),interacted=useRef(false); |
| const liveView=useRef(view),liveSize=useRef(size),liveLayer=useRef(layer); |
| liveView.current=view;liveSize.current=size;liveLayer.current=layer; |
| const selectRef=useRef(onSelect);selectRef.current=onSelect; |
| const aspect=size.width/size.height; |
| const resetView=()=>({zoom:1.22*Math.min(1,liveSize.current.width/liveSize.current.height),x:0,y:0}); |
| function stopAnimation(){cancelAnimationFrame(animation.current);interacted.current=true;fade.current=1;} |
| function draw(){ |
| const r=renderer.current,c=canvas.current;if(!r||!c)return; |
| const {gl,program,locations:l}=r,s=liveSize.current,v=liveView.current; |
| const dpr=Math.min(window.devicePixelRatio||1,2),w=Math.round(s.width*dpr),h=Math.round(s.height*dpr); |
| if(c.width!==w||c.height!==h){c.width=w;c.height=h;} |
| gl.viewport(0,0,w,h);gl.clearColor(.988,.984,.969,1);gl.clear(gl.COLOR_BUFFER_BIT);gl.useProgram(program); |
| gl.uniform2f(l.scale,v.zoom/(s.width/s.height),v.zoom);gl.uniform2f(l.pan,v.x,v.y); |
| const pointSize=Math.min(6,(preview?2.35:2.1)+Math.log2(Math.max(1,v.zoom))*.7)*dpr; |
| gl.uniform1f(l.pointSize,pointSize); |
| gl.uniform1f(l.layer,liveLayer.current==='reference'?1:liveLayer.current==='descriptions'?2:0); |
| gl.uniform1f(l.annotation,annotation.current);c.dataset.annotationProgress=annotation.current.toFixed(4);gl.uniform1f(l.alpha,fade.current); |
| |
| gl.uniform1f(l.pass,0); |
| if(liveLayer.current==='communities'){gl.uniform1f(l.pointSize,pointSize*2.7);gl.uniform1f(l.alpha,fade.current*.045);gl.drawArrays(gl.POINTS,0,data.ids.length);} |
| gl.uniform1f(l.pointSize,pointSize);gl.uniform1f(l.alpha,fade.current); |
| |
| gl.uniform1f(l.pass,0);gl.drawArrays(gl.POINTS,0,data.ids.length); |
| if(liveLayer.current==='reference'){gl.uniform1f(l.pass,1);gl.drawArrays(gl.POINTS,0,data.ids.length);} |
| } |
| useEffect(()=>{ |
| const ro=new ResizeObserver(entries=>{const box=entries[0].contentRect;setSize({width:Math.max(1,box.width),height:Math.max(1,box.height)});});ro.observe(host.current!); |
| return()=>ro.disconnect(); |
| },[]); |
| useEffect(()=>{ |
| const c=canvas.current!,gl=c.getContext('webgl',{alpha:false,antialias:false}); |
| if(!gl){setError('This browser cannot display the interactive map. Search by ID or choose a featured protein below.');return;} |
| let program:WebGLProgram|null=null,buffer:WebGLBuffer|null=null;const shaders:WebGLShader[]=[]; |
| function shader(type:number,source:string){const s=gl!.createShader(type);if(!s)throw new Error();shaders.push(s);gl!.shaderSource(s,source);gl!.compileShader(s);if(!gl!.getShaderParameter(s,gl!.COMPILE_STATUS))throw new Error(gl!.getShaderInfoLog(s)||'Shader compilation failed');return s;} |
| const lost=(e:Event)=>{e.preventDefault();cancelAnimationFrame(animation.current);setError('Map graphics were interrupted. Reload to restore the map; ID search and featured proteins remain available.');}; |
| c.addEventListener('webglcontextlost',lost); |
| try { |
| program=gl.createProgram();buffer=gl.createBuffer();if(!program||!buffer)throw new Error(); |
| gl.attachShader(program,shader(gl.VERTEX_SHADER,`attribute vec3 point;attribute vec3 color;uniform vec2 scale;uniform vec2 pan;uniform float pointSize;uniform mediump float layer;varying mediump float reference;varying mediump vec3 tint;varying mediump float positionX;void main(){positionX=point.x;gl_Position=vec4(point.xy*scale+pan,0.,1.);gl_PointSize=pointSize+(point.z>.5?min(layer,1.)*2.:0.);reference=point.z;tint=color;}`)); |
| gl.attachShader(program,shader(gl.FRAGMENT_SHADER,`precision mediump float; |
| varying mediump float reference;varying mediump vec3 tint;varying mediump float positionX; |
| uniform mediump float layer;uniform float alpha;uniform float pass;uniform float annotation; |
| void main(){ |
| float d=length(gl_PointCoord-vec2(.5));if(d>.5)discard; |
| bool referenceView=layer>.5&&layer<1.5; |
| if(referenceView&&((pass<.5&&reference>.5)||(pass>.5&&reference<.5)))discard; |
| vec3 color=tint;float opacity=.67; |
| if(referenceView){color=reference>.5?vec3(.85,.45,.13):vec3(.65,.69,.70);opacity=reference>.5?.96:.23;} |
| if(layer>1.5){ |
| float reveal=smoothstep(0.,.12,annotation-(positionX*.45+.5)*.88); |
| color=reference>.5?vec3(.85,.45,.13):mix(vec3(.65,.69,.70),vec3(.22,.49,.75),reveal); |
| opacity=reference>.5?.96:mix(.18,.82,reveal); |
| } |
| gl_FragColor=vec4(color,alpha*opacity*(1.-smoothstep(.28,.5,d))); |
| }`)); |
| gl.linkProgram(program);if(!gl.getProgramParameter(program,gl.LINK_STATUS))throw new Error(gl.getProgramInfoLog(program)||'Map linking failed'); |
| gl.useProgram(program);gl.bindBuffer(gl.ARRAY_BUFFER,buffer);gl.bufferData(gl.ARRAY_BUFFER,norm.vertices,gl.STATIC_DRAW); |
| for(const [name,offset] of [['point',0],['color',12]] as const){const a=gl.getAttribLocation(program,name);gl.enableVertexAttribArray(a);gl.vertexAttribPointer(a,3,gl.FLOAT,false,24,offset);} |
| gl.enable(gl.BLEND);gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA); |
| renderer.current={gl,program,locations:Object.fromEntries(['scale','pan','pointSize','layer','alpha','pass','annotation'].map(n=>[n,gl.getUniformLocation(program!,n)]))}; |
| setReady(true);fade.current=reducedMotion()?1:0; |
| const start=performance.now();const reveal=(now:number)=>{fade.current=interacted.current?1:Math.min(1,(now-start)/600);draw();if(fade.current<1)animation.current=requestAnimationFrame(reveal);};animation.current=requestAnimationFrame(reveal); |
| }catch(error){console.error('Atlas renderer:',error);gl.clearColor(.988,.984,.969,1);gl.clear(gl.COLOR_BUFFER_BIT);setError('The map could not be drawn. ID search and featured proteins are still available.');} |
| return()=>{cancelAnimationFrame(animation.current);c.removeEventListener('webglcontextlost',lost);renderer.current=null;if(buffer)gl.deleteBuffer(buffer);if(program)gl.deleteProgram(program);shaders.forEach(s=>gl.deleteShader(s));}; |
| },[norm]); |
| useEffect(()=>{if(preview||(!interacted.current&&!selectedId))setView(resetView());},[size.width,size.height,preview]); |
| useEffect(()=>{draw();},[view,size,layer,ready]); |
| useEffect(()=>{ |
| if(preview||!selectedId||!ready)return; |
| const index=idIndex.get(selectedId);if(index===undefined)return; |
| stopAnimation();const v=liveView.current,a=liveSize.current.width/liveSize.current.height; |
| const zoom=Math.max(Math.min(2.1,a*2.1),v.zoom),target={zoom,x:-norm.vertices[index*6]*zoom/a,y:-norm.vertices[index*6+1]*zoom}; |
| if(reducedMotion()){setView(target);return;} |
| const start=performance.now();const move=(now:number)=>{const t=Math.min(1,(now-start)/480),e=1-Math.pow(1-t,3);setView({zoom:v.zoom+(target.zoom-v.zoom)*e,x:v.x+(target.x-v.x)*e,y:v.y+(target.y-v.y)*e});if(t<1)animation.current=requestAnimationFrame(move);};animation.current=requestAnimationFrame(move); |
| return()=>cancelAnimationFrame(animation.current); |
| },[selectedId,ready,idIndex,norm,preview]); |
| useEffect(()=>{ |
| const observer=new IntersectionObserver(([entry])=>setInView(entry.isIntersecting)); |
| if(host.current)observer.observe(host.current); |
| return()=>observer.disconnect(); |
| },[]); |
| useEffect(()=>{ |
| if(!ready)return; |
| if(layer!=='descriptions'){annotation.current=0;draw();return;} |
| if(reduced){annotation.current=1;draw();return;} |
| if(!enabled||!inView)return; |
| let frame=0; |
| const from=annotation.current,start=performance.now(); |
| const tick=(now:number)=>{annotation.current=Math.min(1,from+(now-start)/1400);draw();if(annotation.current<1)frame=requestAnimationFrame(tick);}; |
| frame=requestAnimationFrame(tick); |
| return()=>cancelAnimationFrame(frame); |
| },[layer,ready,enabled,reduced,inView]); |
| function nearest(x:number,y:number){ |
| const v=liveView.current,s=liveSize.current,a=s.width/s.height,nx=((x/s.width*2-1)-v.x)*a/v.zoom,ny=((1-y/s.height*2)-v.y)/v.zoom; |
| const radius=18/s.height/v.zoom;let best=-1,distance=radius*radius; |
| for(let gx=Math.floor((nx-radius)*gridSize);gx<=Math.floor((nx+radius)*gridSize);gx++)for(let gy=Math.floor((ny-radius)*gridSize);gy<=Math.floor((ny+radius)*gridSize);gy++)for(const i of norm.grid.get(`${gx},${gy}`)||[]){const dx=norm.vertices[i*6]-nx,dy=norm.vertices[i*6+1]-ny,d=dx*dx+dy*dy;if(d<distance){distance=d;best=i;}} |
| return best; |
| } |
| function zoomBy(factor:number,cx=0,cy=0){stopAnimation();setView(v=>{const z=Math.max(.25,Math.min(24,v.zoom*factor)),ratio=z/v.zoom;return {zoom:z,x:cx-(cx-v.x)*ratio,y:cy-(cy-v.y)*ratio};});setHover(null);} |
| useEffect(()=>{ |
| const c=canvas.current!;const wheel=(e:WheelEvent)=>{if(!e.ctrlKey&&document.activeElement!==c)return;e.preventDefault();const rect=c.getBoundingClientRect();zoomBy(Math.exp(-e.deltaY*.002),(e.clientX-rect.left)/rect.width*2-1,1-(e.clientY-rect.top)/rect.height*2);};c.addEventListener('wheel',wheel,{passive:false});return()=>c.removeEventListener('wheel',wheel); |
| },[]); |
| const markers=useMemo(()=>{ |
| const ids=[...new Set([...featured.map(c=>c.uniref_id),...(selectedId?[selectedId]:[])])]; |
| const placed:{id:string;left:number;top:number;x:number;y:number;number:number|string;title:string}[]=[]; |
| for(const id of ids){ |
| const i=idIndex.get(id);if(i===undefined)continue; |
| const x=(norm.vertices[i*6]*view.zoom/aspect+view.x+1)/2*size.width,y=(1-norm.vertices[i*6+1]*view.zoom-view.y)/2*size.height; |
| if(x<0||x>size.width||y<0||y>size.height)continue; |
| let left=x,top=y; |
| for(let step=0;step<100;step++){ |
| const radius=step===0?0:22+Math.floor(step/12)*16,angle=step*2.4; |
| left=Math.max(24,Math.min(size.width-24,x+Math.cos(angle)*radius));top=Math.max(24,Math.min(size.height-24,y+Math.sin(angle)*radius)); |
| if(placed.every(p=>Math.hypot(p.left-left,p.top-top)>42))break; |
| } |
| const f=featured.find(c=>c.uniref_id===id);placed.push({id,left,top,x,y,number:f?.number||'•',title:f?.title||id}); |
| } |
| return placed; |
| },[featured,selectedId,idIndex,norm,view,aspect,size]); |
| const visibleMarkers=layer==='reference'?markers.filter(m=>m.id===selectedId||data.reference[idIndex.get(m.id)!]):markers; |
| return <div className={'atlas-map '+(preview?'atlas-map-preview':'')} data-layer={layer}> |
| <div className="atlas-map-toolbar"><div className="atlas-layers" role="group" aria-label="Map layer"><button aria-pressed={layer==='reference'} onClick={()=>{stopAnimation();setLayer('reference');}}>Swiss-Prot overlap</button><button aria-pressed={layer==='descriptions'} onClick={()=>{stopAnimation();if(layer!=='descriptions'){annotation.current=enabled?0:1;setLayer('descriptions');}}}>Ouroboros descriptions</button><button aria-pressed={layer==='communities'} onClick={()=>{stopAnimation();setLayer('communities');}}>Sequence communities</button></div><span className="micro">{data.ids.length.toLocaleString()} DISPLAYED</span></div> |
| <div className="atlas-map-stage" ref={host}> |
| <canvas ref={canvas} tabIndex={0} aria-label="Protein map. Drag to pan; pinch or focus and scroll to zoom. Arrow keys pan, plus and minus zoom, zero resets. Numbered buttons open featured proteins." |
| onPointerDown={e=>{stopAnimation();e.currentTarget.focus({preventScroll:true});e.currentTarget.setPointerCapture(e.pointerId);pointers.current.set(e.pointerId,{x:e.clientX,y:e.clientY});if(pointers.current.size===2){const [a,b]=[...pointers.current.values()],r=e.currentTarget.getBoundingClientRect();pinch.current={distance:Math.hypot(a.x-b.x,a.y-b.y),cx:((a.x+b.x)/2-r.left)/r.width*2-1,cy:1-((a.y+b.y)/2-r.top)/r.height*2,view:liveView.current};drag.current=null;}else drag.current={id:e.pointerId,x:e.clientX,y:e.clientY,start:liveView.current,distance:0};setHover(null);}} |
| onPointerMove={e=>{if(pointers.current.has(e.pointerId))pointers.current.set(e.pointerId,{x:e.clientX,y:e.clientY});const p=pinch.current;if(p&&pointers.current.size===2){const [a,b]=[...pointers.current.values()],r=e.currentTarget.getBoundingClientRect(),z=Math.max(.25,Math.min(24,p.view.zoom*Math.hypot(a.x-b.x,a.y-b.y)/Math.max(1,p.distance))),ratio=z/p.view.zoom;setView({zoom:z,x:((a.x+b.x)/2-r.left)/r.width*2-1-(p.cx-p.view.x)*ratio,y:1-((a.y+b.y)/2-r.top)/r.height*2-(p.cy-p.view.y)*ratio});return;}const d=drag.current;if(d&&d.id===e.pointerId){const dx=e.clientX-d.x,dy=e.clientY-d.y;d.distance=Math.max(d.distance,Math.hypot(dx,dy));setView({...d.start,x:d.start.x+dx/size.width*2,y:d.start.y-dy/size.height*2});return;}if(e.pointerType!=='mouse')return;const rect=e.currentTarget.getBoundingClientRect(),x=e.clientX-rect.left,y=e.clientY-rect.top,i=nearest(x,y);setHover(i<0?null:{index:i,x,y});}} |
| onPointerUp={e=>{const d=drag.current;if(d&&d.id===e.pointerId&&d.distance<5){const r=e.currentTarget.getBoundingClientRect(),i=nearest(e.clientX-r.left,e.clientY-r.top);if(i>=0)selectRef.current(data.ids[i]);}pointers.current.delete(e.pointerId);pinch.current=null;drag.current=null;}} |
| onPointerCancel={e=>{pointers.current.delete(e.pointerId);pinch.current=null;drag.current=null;}} onPointerLeave={()=>setHover(null)} |
| onKeyDown={e=>{if(['+','=','-','0','ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(e.key)){e.preventDefault();stopAnimation();if(e.key==='+'||e.key==='=')zoomBy(1.3);else if(e.key==='-')zoomBy(1/1.3);else if(e.key==='0')setView(resetView());else setView(v=>({...v,x:v.x+(e.key==='ArrowRight'?-.15:e.key==='ArrowLeft'?.15:0),y:v.y+(e.key==='ArrowDown'?.15:e.key==='ArrowUp'?-.15:0)}));}}}/> |
| {error?<div className="atlas-map-error" role="status">{error}</div>:<> |
| <div className="atlas-map-label" aria-hidden="true"><span>THE PROTEIN LANDSCAPE</span><small>{layer==='communities'?'34 sequence communities':layer==='reference'?'A small curated overlap':'Functional descriptions, at scale'}</small></div> |
| <svg className="atlas-leaders" width={size.width} height={size.height} aria-hidden="true">{visibleMarkers.map(m=><g key={m.id} className={m.id===selectedId?'active':''}><line x1={m.x} y1={m.y} x2={m.left} y2={m.top}/><circle cx={m.x} cy={m.y} r="2.5"/></g>)}</svg> |
| {visibleMarkers.map(m=><button key={m.id} className={'atlas-marker '+(m.id===selectedId?'selected':'')} style={{left:m.left,top:m.top}} title={`${m.number} · ${m.title} · ${m.id}`} aria-label={`Showcase ${m.number}: ${m.title}, ${m.id}`} aria-pressed={m.id===selectedId} onClick={()=>{stopAnimation();onSelect(m.id);}}>{m.number}</button>)} |
| <div className="atlas-zoom" role="group" aria-label="Map controls"><button onClick={()=>zoomBy(1.4)} aria-label="Zoom in">+</button><button onClick={()=>zoomBy(1/1.4)} aria-label="Zoom out">−</button><button onClick={()=>{stopAnimation();setView(resetView());}} aria-label="Reset map">↺</button></div> |
| </>} |
| {hover&&!error&&<div className="atlas-hover" style={{left:Math.max(8,Math.min(hover.x+14,size.width-235)),top:Math.max(8,Math.min(hover.y+14,size.height-85))}}><strong>{data.ids[hover.index]}</strong><span>{data.lengths[hover.index]} aa · Community {data.clusters[hover.index]+1}</span><span>{data.reference[hover.index]?'Exact Swiss-Prot match':'No exact Swiss-Prot match'}</span><small>Click to explore →</small></div>} |
| </div> |
| <div className="atlas-map-caption"><span>{layer==='communities'?<><span className="atlas-color-key" aria-hidden="true">{['#2678b2','#d9822b','#2a9d8f','#8b5cf6'].map(c=><i key={c} style={{background:c}}/>)}</span>34 Leiden communities</>:<><i className={"atlas-dot "+(layer==='descriptions'?'description':'gray')}/> {layer==='descriptions'?'Ouroboros description beyond reference':'No exact match'} <i className="atlas-dot coral"/> Exact Swiss-Prot match</>}</span><span>Drag to pan · pinch / focus + scroll to zoom</span></div> |
| <p className="atlas-map-note">ESM-2 · PCA / UMAP · sampled from a 1M-sequence projection. Display proportions are not corpus estimates. Generated descriptions are functional hypotheses; communities show embedding similarity.</p> |
| </div>; |
| } |
|
|
