examples/hanzo-app/apps/trellis.html

<!--hz {"title":"Directory","archetype":"team directory / org chart","creator":"apps","desc":"Team directory with an org chart: a real tree layout computed from reporting lines, expand and collapse, search that highlights a path to the root, per-team headcount and a profile pane.","nav":[["#/","Chart"],["#/list","Directory"]]} -->
<div class="row" style="margin-bottom:12px">
  <h1 style="margin:0">Directory</h1><span class="tag" id="kpi"></span>
  <span class="spacer"></span>
  <input id="q" placeholder="Find a person…" style="max-width:230px">
  <span id="teams" class="row" style="gap:4px"></span>
</div>
<div id="view"></div>
<p class="hz-note" style="margin-top:16px">Every person here is a placeholder. Names are historical computing figures used as labels; no real employee, role or reporting line is represented.</p>
<script>
const {h,fill,$,store,rng,range,uid,fmt,avatar,grid,toast,submit,route} = hz;
const P = [
 ['p0', null, 'Ada Lovelace', 'Chief Executive', 'Exec', 'Amsterdam'],
 ['p1', 'p0', 'Grace Hopper', 'VP Platform', 'Platform', 'Remote'],
 ['p2', 'p0', 'Radia Perlman', 'VP Product', 'Product', 'Berlin'],
 ['p3', 'p0', 'Frances Allen', 'VP Operations', 'SRE', 'Remote'],
 ['p4', 'p1', 'Ken Thompson', 'Principal Engineer', 'Platform', 'Remote'],
 ['p5', 'p1', 'Barbara Liskov', 'Engineering Manager', 'Platform', 'Amsterdam'],
 ['p6', 'p5', 'Linus Torvalds', 'Senior Engineer', 'Platform', 'Remote'],
 ['p7', 'p5', 'Bjarne Stroustrup', 'Engineer', 'Platform', 'Berlin'],
 ['p8', 'p5', 'Anita Borg', 'Engineer', 'Platform', 'Remote'],
 ['p9', 'p2', 'Alan Kay', 'Principal Designer', 'Product', 'Berlin'],
 ['p10','p2', 'Karen Sparck Jones', 'Product Manager', 'Product', 'Amsterdam'],
 ['p11','p10','Donald Knuth', 'Technical Writer', 'Docs', 'Remote'],
 ['p12','p3', 'Margaret Hamilton', 'SRE Lead', 'SRE', 'Remote'],
 ['p13','p12','Edsger Dijkstra', 'Site Reliability Engineer', 'SRE', 'Amsterdam'],
 ['p14','p12','Jean Bartik', 'Site Reliability Engineer', 'SRE', 'Remote'],
 ['p15','p2', 'Hedy Lamarr', 'Data Product Manager', 'Data', 'Berlin'],
 ['p16','p15','Sophie Wilson', 'Data Engineer', 'Data', 'Remote'],
].map(([id,mgr,name,title,team,loc])=>({id,mgr,name,title,team,loc,
  email:name.toLowerCase().replace(/\s+/g,'.')+'@example.invalid'}));
const collapsed = store('orgchart.collapsed', []);
const view = $('#view');
let q='', team='All', sel=null;
const TEAMS = ['All',...new Set(P.map(p=>p.team))];
const kids = id => P.filter(p=>p.mgr===id);
const pathTo = id => { const out=[]; let c = P.find(p=>p.id===id);
  while(c){ out.unshift(c.id); c = P.find(p=>p.id===c.mgr); } return out; };

function kpi(){ $('#kpi').textContent = P.length+' people · '+new Set(P.map(p=>p.team)).size+' teams'; }
function teamsBar(){ fill($('#teams'), TEAMS.map(t=>h('button.sm'+(t===team?' p':''),
  {onclick:()=>{team=t;go();}},t))); }
// Tidy tree layout: leaves get sequential x, parents centre over their children.
function layout(){
  const W=178, GX=22, GY=110; let cursor=0; const pos={};
  const walk = (id, depth) => {
    const isCollapsed = collapsed.get().includes(id);
    const cs = isCollapsed? [] : kids(id);
    if(!cs.length){ pos[id]={x:cursor*(W+GX), y:depth*GY}; cursor++; return pos[id]; }
    const cps = cs.map(c=>walk(c.id, depth+1));
    pos[id] = {x:(cps[0].x+cps.at(-1).x)/2, y:depth*GY};
    return pos[id];
  };
  walk('p0',0);
  return {pos, W, width: cursor*(W+GX), height: (Math.max(...Object.values(pos).map(p=>p.y))+90)};
}
function chart(){
  const {pos,W,width,height} = layout();
  const hit = q ? P.filter(p=>p.name.toLowerCase().includes(q)||p.title.toLowerCase().includes(q)) : [];
  const onPath = new Set(hit.flatMap(p=>pathTo(p.id)));
  const svg = hz.svg('svg',{viewBox:`-20 -20 ${width+40} ${height+40}`,
    style:'width:100%;min-width:'+Math.min(1100,width+40)+'px;height:'+Math.min(620,height+40)+'px'});
  P.forEach(p=>{ if(!pos[p.id]||!p.mgr||!pos[p.mgr]) return;
    const a=pos[p.mgr], b=pos[p.id];
    svg.append(hz.svg('path',{d:`M${a.x+W/2},${a.y+56} C${a.x+W/2},${a.y+86} ${b.x+W/2},${b.y-30} ${b.x+W/2},${b.y}`,
      fill:'none', stroke: onPath.has(p.id)?'#f6b73c':'#5b8cff', 'stroke-opacity': onPath.has(p.id)?.9:.4,
      'stroke-width': onPath.has(p.id)?2.4:1.6})); });
  const box = h('div',{style:{position:'relative',minWidth:Math.min(1100,width+40)+'px',
    height:Math.min(620,height+40)+'px'}}, svg);
  P.forEach(p=>{ const pt = pos[p.id]; if(!pt) return;
    const dim = (team!=='All' && p.team!==team) || (q && !onPath.has(p.id));
    const hasKids = kids(p.id).length, isCol = collapsed.get().includes(p.id);
    box.append(h('div',{style:{position:'absolute',left:(pt.x+20)+'px',top:(pt.y+20)+'px',width:W+'px',
        background:'var(--bg2)', border:'1px solid '+(hit.some(x=>x.id===p.id)?'var(--warn)':'var(--line2)'),
        borderRadius:'9px', padding:'8px 10px', opacity: dim?0.32:1, cursor:'pointer',
        boxShadow:'var(--shadow)'},
      onclick:()=>{ sel=p; go(); }},
      h('div.row',{style:{gap:'8px'}}, avatar(p.name,28),
        h('div',{style:{minWidth:0}}, h('div.small.b.trunc',p.name), h('div.small.muted.trunc',p.title))),
      h('div.row',{style:{marginTop:'6px',gap:'5px'}}, h('span.tag',p.team),
        hasKids? h('button.g.sm',{style:{padding:'0 6px',fontSize:'11px'},
          onclick:e=>{ e.stopPropagation();
            collapsed.set(v=>isCol? v.filter(x=>x!==p.id):[...v,p.id]); go(); }},
          (isCol?'+':'−')+hasKids) : null)));
  });
  fill(view, h('div.split.r',
    h('div.pane',h('header','Reporting structure',h('span.spacer'),
      h('button.g.sm',{onclick:()=>{collapsed.set([]);go();}},'Expand all')),
      h('div.scroll-x',{style:{padding:'10px'}}, box)),
    sel ? profile(sel) : h('div.pane',h('div.empty','Select a person for their profile.'))));
}
function profile(p){
  const reports = kids(p.id), mgr = P.find(x=>x.id===p.mgr);
  const chain = pathTo(p.id).map(id=>P.find(x=>x.id===id));
  return h('div.pane', h('header','Profile', h('span.spacer'),
      h('button.g.sm',{onclick:()=>{sel=null;go();}},'✕')),
    h('div.body',
      h('div.row',{style:{gap:'12px',marginBottom:'12px'}}, avatar(p.name,52),
        h('div', h('h2',{style:{margin:0}},p.name), h('div.small.muted',p.title))),
      h('table',h('tbody',[['Team',p.team],['Location',p.loc],['Email',p.email],
        ['Reports to',mgr?mgr.name:'—'],['Direct reports',reports.length],
        ['Chain', chain.map(c=>c.name.split(' ')[0]).join(' → ')]]
        .map(([k,v])=>h('tr',h('td.small.muted',k),h('td.b',String(v)))))),
      reports.length? h('div',{style:{marginTop:'12px'}}, h('div.small.muted','Direct reports'),
        h('ul.list', reports.map(rp=>h('li',{style:{cursor:'pointer'},onclick:()=>{sel=rp;go();}},
          avatar(rp.name,24), h('span.small',rp.name), h('span.spacer'), h('span.tag',rp.team))))) : null,
      h('button.p',{style:{width:'100%',marginTop:'12px'},onclick:async()=>{
        try{ await submit('directory.contact',{person:p.name,team:p.team}); toast('Recorded in @hanzo/base'); }
        catch(e){ toast('Recorded locally'); } }},'Request an intro')));
}
function listView(){
  const d = P.filter(p=>(team==='All'||p.team===team) &&
    (!q || (p.name+' '+p.title+' '+p.loc).toLowerCase().includes(q)));
  fill(view, h('div.pane', grid([
    {k:'name',t:'Person',cell:p=>h('div.row',{style:{gap:'9px'}},avatar(p.name,28),
      h('div',h('div.b',p.name),h('div.small.muted',p.title)))},
    {k:'team',t:'Team',cell:p=>h('span.tag.acc',p.team)},
    {k:'loc',t:'Location'},
    {k:'email',t:'Email',cell:p=>h('span.mono.small',p.email)},
    {k:'mgr',t:'Reports to',cell:p=>P.find(x=>x.id===p.mgr)?.name || '—'},
  ], d, {onRow:p=>{sel=p; location.hash='#/'; go();}, placeholder:'Search the directory…'})));
}
const go = () => { kpi(); teamsBar();
  location.hash.includes('list')? listView() : chart(); };
$('#q').oninput = e => { q = e.target.value.toLowerCase(); go(); };
route({'':go,'list':go,'*':go});
</script>