Spaces:

davanstrien
/

dataset-lineage-explorer

Running

App Files Files Community

davanstrien HF Staff commited on May 26

Commit

22c5066

verified ·

1 Parent(s): 95cefed

ux: additive filter (click=narrow, more=add) + hub-link icons on every dataset row

Browse files

Files changed (1) hide show

app.py +34 -7

app.py CHANGED Viewed

@@ -261,6 +261,8 @@ td.num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;wid
 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);cursor:pointer}
 a:hover{border-color:var(--ink)}
 .meta a{border:0;color:var(--accent)}
 code{font-family:ui-monospace,monospace;font-size:12.5px;background:#f1f1e6;padding:1px 5px}
 .placeholder{color:var(--muted);font-style:italic}
 </style></head><body>
@@ -300,12 +302,13 @@ const LEGEND_TYPES=['exact_copy','filtered_subset','subset_modified','subset_ref
  '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;
@@ -320,12 +323,28 @@ 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();
 });
@@ -333,8 +352,15 @@ document.getElementById('legend').addEventListener('click',ev=>{
 function bars(rows,opts){
  opts=opts||{};const max=Math.max(...rows.map(r=>r.n),1);let h='<table class="bars">';
  for(const r of rows){const w=Math.round(100*r.n/max);
-  const lbl=opts.type?('<span class="dot" style="background:'+(COLORS[r.t]||'#999')+'"></span>'+r.t.replace(/_/g,' '))
-                     :('<a data-ds="'+r.id+'">'+r.id+'</a>');
   const col=opts.type?(COLORS[r.t]||'#999'):'var(--bar)';
   h+='<tr><td class="lbl">'+lbl+'</td><td class="bar"><span style="width:'+w+'%;background:'+col+'"></span></td>'
    +'<td class="num">'+r.n.toLocaleString()+'</td></tr>';}
@@ -428,6 +454,7 @@ function lst(title,arr){
  let h='<h3>'+title+' · '+arr.length+'</h3>';
  for(const x of arr){const t=x.primary_type||'';
   h+='<div class="row">'+dot(t)+'<a data-ds="'+x.id+'">'+x.id+'</a>'+
    (t?'<span class="ty">'+t.replace(/_/g,' ')+(x.size_ratio?' ×'+x.size_ratio:'')+'</span>':'')+'</div>';}
  return h;
 }

 a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);cursor:pointer}
 a:hover{border-color:var(--ink)}
 .meta a{border:0;color:var(--accent)}
+a.hub{border:0;color:var(--accent);font-size:11px;margin-left:4px;padding:0 3px;opacity:.7}
+a.hub:hover{opacity:1}
 code{font-family:ui-monospace,monospace;font-size:12.5px;background:#f1f1e6;padding:1px 5px}
 .placeholder{color:var(--muted);font-style:italic}
 </style></head><body>
  '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 narrow</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">show all</div>';
  document.getElementById('legend').innerHTML=h;})();
+let filterMode=false;  // false=show-all default; flips after first click
 function applyFilter(){
  if(!currentNetwork)return;
  const edgesDS=currentNetwork.body.data.edges, nodesDS=currentNetwork.body.data.nodes;
  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'));
+  filterMode=false;applyFilter();return;}
  const lt=ev.target.closest('.lt');
  if(!lt||!lt.dataset.type)return;
  const t=lt.dataset.type;
+ if(!filterMode){
+  // first click → narrow to ONLY this type; subsequent clicks add more
+  ACTIVE_TYPES.clear();ACTIVE_TYPES.add(t);
+  document.querySelectorAll('#legend .lt').forEach(el=>el.classList.toggle('off', el.dataset.type!==t));
+  filterMode=true;
+ } else if(ACTIVE_TYPES.has(t)){
+  // already in view → remove
+  ACTIVE_TYPES.delete(t);lt.classList.add('off');
+  if(ACTIVE_TYPES.size===0){
+   // emptied → return to show-all
+   LEGEND_TYPES.forEach(x=>ACTIVE_TYPES.add(x));
+   document.querySelectorAll('#legend .lt').forEach(el=>el.classList.remove('off'));
+   filterMode=false;
+  }
+ } else {
+  // add to view
+  ACTIVE_TYPES.add(t);lt.classList.remove('off');
+ }
  applyFilter();
 });
 function bars(rows,opts){
  opts=opts||{};const max=Math.max(...rows.map(r=>r.n),1);let h='<table class="bars">';
  for(const r of rows){const w=Math.round(100*r.n/max);
+  let lbl;
+  if(opts.type){
+   lbl='<span class="dot" style="background:'+(COLORS[r.t]||'#999')+'"></span>'+r.t.replace(/_/g,' ');
+  } else {
+   const isDataset=r.id.includes('/');
+   const hubUrl='https://huggingface.co/'+(isDataset?'datasets/':'')+r.id;
+   lbl=(isDataset?'<a data-ds="'+r.id+'">'+r.id+'</a>':'<span>'+r.id+'</span>')+
+    '<a class="hub" href="'+hubUrl+'" target="_blank" rel="noopener" title="open on HF Hub">↗</a>';
+  }
   const col=opts.type?(COLORS[r.t]||'#999'):'var(--bar)';
   h+='<tr><td class="lbl">'+lbl+'</td><td class="bar"><span style="width:'+w+'%;background:'+col+'"></span></td>'
    +'<td class="num">'+r.n.toLocaleString()+'</td></tr>';}
  let h='<h3>'+title+' · '+arr.length+'</h3>';
  for(const x of arr){const t=x.primary_type||'';
   h+='<div class="row">'+dot(t)+'<a data-ds="'+x.id+'">'+x.id+'</a>'+
+   '<a class="hub" href="https://huggingface.co/datasets/'+x.id+'" target="_blank" rel="noopener" title="open on HF Hub">↗</a>'+
    (t?'<span class="ty">'+t.replace(/_/g,' ')+(x.size_ratio?' ×'+x.size_ratio:'')+'</span>':'')+'</div>';}
  return h;
 }