explorer: clickable legend filter (toggle relationship types in map + ego views)

app.py

@@ -240,10 +240,15 @@ td.bar span{display:block;height:11px;background:var(--bar);opacity:.85}
 td.num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;width:48px}
 #wrap{display:flex;height:calc(100vh - 132px);position:relative}
 #net{flex:2.3;min-width:0}
-#legend{position:absolute;left:14px;bottom:14px;background:rgba(255,255,248,.92);
- border:1px solid var(--rule);padding:8px 11px;font-size:11px;line-height:1.7;max-width:200px;
- box-shadow:0 1px 3px rgba(0,0,0,.06)}
-#legend .lt{white-space:nowrap}
+#legend{position:absolute;left:14px;bottom:14px;background:rgba(255,255,248,.94);
+ border:1px solid var(--rule);padding:8px 11px;font-size:11px;line-height:1.75;max-width:210px;
+ box-shadow:0 1px 3px rgba(0,0,0,.06);user-select:none}
+#legend .lt{white-space:nowrap;cursor:pointer;padding:1px 4px;margin:0 -4px;border-radius:3px}
+#legend .lt:hover{background:#f1f1e6}
+#legend .lt.off{opacity:.35;text-decoration:line-through}
+#legend .reset{margin-top:5px;padding-top:4px;border-top:1px solid var(--rule);
+ font-style:italic;color:var(--muted);cursor:pointer}
+#legend .reset:hover{color:var(--ink)}
 @media(max-width:760px){#legend{display:none}}
 #side{flex:1;max-width:440px;overflow:auto;padding:22px 28px;border-left:1px solid var(--rule)}
 #side h2{font-weight:400;font-size:19px;margin:0;word-break:break-all}
@@ -289,13 +294,40 @@ const COLORS={exact_copy:'#8a8a80',filtered_subset:'#4a6b8a',subset_modified:'#5
  subset_reformatted:'#39597a',cleaned:'#6a8a5a',regenerated_variant:'#b08a3e',
  modified_variant:'#9a8a6a',augmentation:'#7a6a9a',augmentation_modified:'#8a7aaa',
  translation:'#a8566a',reformat:'#4a8a8a',partial_overlap:'#aaaaa0',declared:'#c8c8b8'};
-// corner colour key
-(function(){let h='<div style="font-style:italic;color:var(--muted);margin-bottom:3px">relationship</div>';
- for(const t of ['exact_copy','filtered_subset','subset_modified','subset_reformatted','cleaned',
-  'regenerated_variant','augmentation','augmentation_modified','translation','reformat','modified_variant','partial_overlap'])
-  h+='<div class="lt"><span class="dot" style="background:'+COLORS[t]+'"></span>'+t.replace(/_/g,' ')+'</div>';
- h+='<div class="lt"><span class="dot" style="background:'+COLORS.declared+'"></span>declared (dashed)</div>';
+// corner colour key — clickable filter (toggle type visibility)
+const LEGEND_TYPES=['exact_copy','filtered_subset','subset_modified','subset_reformatted','cleaned',
+ 'regenerated_variant','augmentation','augmentation_modified','translation','reformat','modified_variant',
+ 'partial_overlap','combined','declared'];
+const ACTIVE_TYPES=new Set(LEGEND_TYPES);
+let currentNetwork=null;
+(function(){let h='<div style="font-style:italic;color:var(--muted);margin-bottom:3px">relationship · click to filter</div>';
+ for(const t of LEGEND_TYPES)
+  h+='<div class="lt" data-type="'+t+'"><span class="dot" style="background:'+(COLORS[t]||'#999')+'"></span>'+
+   t.replace(/_/g,' ')+(t==='declared'?' (dashed)':'')+'</div>';
+ h+='<div class="reset" data-reset="1">reset all</div>';
  document.getElementById('legend').innerHTML=h;})();
+function applyFilter(){
+ if(!currentNetwork)return;
+ const edgesDS=currentNetwork.body.data.edges, nodesDS=currentNetwork.body.data.nodes;
+ const allEdges=edgesDS.get();
+ edgesDS.update(allEdges.map(e=>({id:e.id, hidden:!ACTIVE_TYPES.has(e.__type)})));
+ // hide nodes that have NO visible incident edge (except the focus)
+ const visible=new Set();
+ for(const e of allEdges) if(ACTIVE_TYPES.has(e.__type)){visible.add(e.from);visible.add(e.to);}
+ nodesDS.update(nodesDS.get().map(n=>({id:n.id, hidden:!visible.has(n.id) && !n.__focus})));
+}
+document.getElementById('legend').addEventListener('click',ev=>{
+ const reset=ev.target.closest('[data-reset]');
+ if(reset){LEGEND_TYPES.forEach(t=>ACTIVE_TYPES.add(t));
+  document.querySelectorAll('#legend .lt').forEach(el=>el.classList.remove('off'));
+  applyFilter();return;}
+ const lt=ev.target.closest('.lt');
+ if(!lt||!lt.dataset.type)return;
+ const t=lt.dataset.type;
+ if(ACTIVE_TYPES.has(t)){ACTIVE_TYPES.delete(t);lt.classList.add('off');}
+ else{ACTIVE_TYPES.add(t);lt.classList.remove('off');}
+ applyFilter();
+});
 
 // ---------- Overview ----------
 function bars(rows,opts){
@@ -342,7 +374,7 @@ async function map(){
   shape:'dot',size:6+Math.sqrt(n.derivatives||1)*2.4,
   color:{background:'#43586b',border:'#43586b'},
   font:{color:'#111',face:'Palatino, Georgia, serif',size:13,strokeWidth:4,strokeColor:'#fffff8'}}));
- const edges=g.edges.map(e=>({from:e.from,to:e.to,arrows:{to:{scaleFactor:.4}},
+ const edges=g.edges.map(e=>({from:e.from,to:e.to,__type:e.type,arrows:{to:{scaleFactor:.4}},
   color:{color:COLORS[e.type]||'#999',opacity:.9},width:1.6,title:e.type+' · '+e.confidence}));
  network=new vis.Network(document.getElementById('net'),{nodes,edges},
   {physics:{stabilization:{iterations:160,updateInterval:50},
@@ -350,6 +382,7 @@ async function map(){
    nodes:{borderWidth:0},edges:{smooth:false},interaction:{hover:true,hideEdgesOnDrag:true,tooltipDelay:120}});
  network.on('stabilizationIterationsDone',()=>network.setOptions({physics:false}));
  network.on('click',p=>{if(p.nodes.length)showExplorer(p.nodes[0]);});
+ currentNetwork=network;applyFilter();
  document.getElementById('side').innerHTML='<h2>Lineage map</h2><div class="meta">'+
   g.nodes.length.toLocaleString()+' source datasets · '+g.edges.length+' multi-level chain links</div>'+
   '<p class="row">Node <b>size</b> = number of derivatives. Edge <b>colour</b> = relationship type (key, lower-left). '+
@@ -363,11 +396,11 @@ async function go(){
   fetch('/related?dataset='+encodeURIComponent(ds)).then(x=>x.json())]);
  const top=new Set(g.nodes.slice().sort((a,b)=>(b.downloads||0)-(a.downloads||0)).slice(0,40).map(n=>n.id));
  const big=g.nodes.length>250;
- const nodes=g.nodes.map(n=>({id:n.id,label:(n.focus||top.has(n.id)||!big)?n.label:undefined,title:n.title,shape:'dot',
+ const nodes=g.nodes.map(n=>({id:n.id,__focus:n.focus,label:(n.focus||top.has(n.id)||!big)?n.label:undefined,title:n.title,shape:'dot',
   size:n.focus?16:(6+Math.log10((n.downloads||0)+10)*2.2),
   color:{background:n.focus?'#c1440e':'#43586b',border:n.focus?'#c1440e':'#43586b'},
   font:{color:'#111',face:'Palatino, Georgia, serif',size:n.focus?16:12,strokeWidth:4,strokeColor:'#fffff8'}}));
- const edges=g.edges.map(e=>({from:e.from,to:e.to,arrows:{to:{scaleFactor:.45}},
+ const edges=g.edges.map(e=>({from:e.from,to:e.to,__type:e.type,arrows:{to:{scaleFactor:.45}},
   color:{color:COLORS[e.type]||'#999',opacity:.8},width:e.source==='inferred'?1.2:.6,
   dashes:e.source==='declared',title:e.type+' · conf '+e.confidence+' · '+e.source}));
  // adaptive layout: hub-shaped (many children of focus) -> force (spreads radially);
@@ -387,6 +420,7 @@ async function go(){
  network=new vis.Network(document.getElementById('net'),{nodes,edges},opts);
  if(useForce)network.on('stabilizationIterationsDone',()=>network.setOptions({physics:false}));
  network.on('click',p=>{if(p.nodes.length){showExplorer(p.nodes[0]);}});
+ currentNetwork=network;applyFilter();
  renderSide(r);
 }
 function lst(title,arr){