<bmx-graph>

<bmx-graph id="ex-graph" color-by="group" size-by="degree" selectable="multiple" tooltip-fields="role" label="Who works with whom" style="--bmx-graph-height: 30rem"></bmx-graph>
<p class="note" id="ex-graph-out" role="status">Point at a person to light up who they work with. Ctrl-click two people (or Shift-drag a lasso) and press P for the shortest path between them. Tab to the graph and use the arrow keys, or N to step through a person's colleagues.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <label>Layout
    <select id="ex-graph-layout">
      <option value="force" selected>Force</option>
      <option value="circular">Circular</option>
      <option value="radial">Radial</option>
      <option value="hierarchy">Hierarchy</option>
      <option value="grid">Grid</option>
    </select>
  </label>
  <label>Colour by
    <select id="ex-graph-colour">
      <option value="group" selected>Department</option>
      <option value="community">Community (found by the graph)</option>
      <option value="tenure">Years at the company</option>
    </select>
  </label>
  <label>Size by
    <select id="ex-graph-size">
      <option value="degree" selected>Links</option>
      <option value="betweenness">Betweenness</option>
      <option value="pagerank">PageRank</option>
      <option value="none">Same size</option>
    </select>
  </label>
  <label>Find <input type="search" id="ex-graph-find" placeholder="A name" size="12"></label>
  <bmx-button variant="outline" tone="neutral" id="ex-graph-path">Path between the two selected</bmx-button>
  <bmx-button variant="outline" tone="neutral" id="ex-graph-svg">Copy as SVG</bmx-button>
</div>

<h3>Dependencies, as a hierarchy</h3>

<p class="note">Directed links get arrowheads, and <code>layout="hierarchy"</code> follows them. Combine services by team with <code>combine="team"</code>, then double-click a team (or press E) to open it.</p>
<bmx-graph id="ex-graph-deps" layout="hierarchy" directed combine="team" color-by="team" label="Service dependencies" style="--bmx-graph-height: 24rem"></bmx-graph>
<div class="row" style="gap: 0.75rem; margin-block: 0.5rem 1.5rem">
  <label><input type="checkbox" id="ex-graph-combine" checked> Combine by team</label>
  <label>Direction
    <select id="ex-graph-dir">
      <option value="down" selected>Down</option>
      <option value="right">Right</option>
    </select>
  </label>
</div>

<h3>Payments over a year, with a time bar and an overview</h3>

<p class="note">Two thousand accounts and their payments. Drag the time bar's window, or press play to watch the network grow. The overview moves the view; double-click an account marked + to load its counterparties from the page.</p>
<div style="display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap">
  <bmx-graph id="ex-graph-pay" time-bar color-by="community" labels="none" link-distance="40" node-size="5" label="Payments between accounts" style="flex: 1 1 28rem; --bmx-graph-height: 26rem"></bmx-graph>
  <bmx-graph-overview for="ex-graph-pay"></bmx-graph-overview>
</div>

<script type="module">
  await customElements.whenDefined('bmx-graph');
  // A repeatable sequence, so every reader sees the same made-up company.
  let seed = 7;
  const rand = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;
  const pick = list => list[Math.floor(rand() * list.length)];

  const first = ['Ava', 'Ben', 'Chloe', 'Dev', 'Ella', 'Finn', 'Grace', 'Hari', 'Isla', 'Jack', 'Kira', 'Leo', 'Maya', 'Noah', 'Olu', 'Priya', 'Quinn', 'Rosa', 'Sam', 'Tara', 'Umar', 'Vera', 'Will', 'Xin', 'Yusuf', 'Zoe'];
  const last = ['Shah', 'Okafor', 'Murray', 'Chen', 'Novak', 'Reid', 'Patel', 'Lowe', 'Kaur', 'Evans', 'Silva', 'Brooks'];
  const departments = ['Finance', 'Engineering', 'Sales', 'Operations', 'People'];
  const roles = { Finance: ['Analyst', 'Controller', 'Accountant'], Engineering: ['Engineer', 'Architect', 'Tester'], Sales: ['Account manager', 'Sales lead'], Operations: ['Planner', 'Buyer'], People: ['Recruiter', 'Partner'] };
  const people = [];
  for (let i = 0; i < 64; i++) {
    const group = departments[i % departments.length];
    people.push({ id: `p${i}`, label: `${first[i % first.length]} ${last[(i * 7) % last.length]}`, group, role: pick(roles[group]), tenure: 1 + Math.floor(rand() * 15) });
  }
  const links = [];
  for (const a of people)
    for (const b of people) {
      if (a.id >= b.id) continue;
      const same = a.group === b.group;
      if (rand() < (same ? 0.16 : 0.012)) links.push({ source: a.id, target: b.id, label: same ? 'team' : 'project', weight: same ? 1 : 2 });
    }
  const graph = document.getElementById('ex-graph');
  graph.nodes = people;
  graph.links = links;
  const out = document.getElementById('ex-graph-out');
  graph.addEventListener('bmxGraphSelect', e => (out.textContent = e.detail.ids.length ? `Selected: ${e.detail.ids.map(id => people.find(p => p.id === id)?.label ?? id).join(', ')}` : 'Nothing selected.'));
  document.getElementById('ex-graph-layout').addEventListener('change', e => (graph.layout = e.target.value));
  document.getElementById('ex-graph-colour').addEventListener('change', e => (graph.colorBy = e.target.value));
  document.getElementById('ex-graph-size').addEventListener('change', e => (graph.sizeBy = e.target.value));
  document.getElementById('ex-graph-find').addEventListener('input', async e => {
    const ids = await graph.find(e.target.value);
    out.textContent = e.target.value ? `${ids.length} found.` : '';
  });
  document.getElementById('ex-graph-path').addEventListener('click', async () => {
    const ids = graph.selected;
    if (ids.length < 2) {
      out.textContent = 'Select two people first (Ctrl-click).';
      return;
    }
    const path = await graph.findPath(ids[0], ids[1]);
    out.textContent = path ? `${path.links.length} steps: ${path.nodes.map(id => people.find(p => p.id === id).label).join(' → ')}` : 'They are not connected.';
  });
  document.getElementById('ex-graph-svg').addEventListener('click', async () => {
    await navigator.clipboard?.writeText(await graph.toSvg());
    out.textContent = 'The graph is on the clipboard as SVG.';
  });

  // Services and what they call.
  const services = [
    ['web', 'Front end'], ['mobile-api', 'Front end'], ['gateway', 'Platform'], ['auth', 'Platform'], ['users', 'Accounts'], ['billing', 'Accounts'],
    ['orders', 'Commerce'], ['catalogue', 'Commerce'], ['search', 'Commerce'], ['payments', 'Accounts'], ['notify', 'Platform'], ['ledger', 'Accounts'],
    ['stock', 'Commerce'], ['reports', 'Data'], ['warehouse', 'Data'], ['events', 'Data'],
  ];
  const calls = [
    ['web', 'gateway'], ['mobile-api', 'gateway'], ['gateway', 'auth'], ['gateway', 'orders'], ['gateway', 'catalogue'], ['gateway', 'search'], ['gateway', 'users'],
    ['auth', 'users'], ['orders', 'payments'], ['orders', 'stock'], ['orders', 'notify'], ['payments', 'ledger'], ['billing', 'ledger'], ['users', 'billing'],
    ['search', 'catalogue'], ['catalogue', 'stock'], ['orders', 'events'], ['payments', 'events'], ['events', 'warehouse'], ['warehouse', 'reports'], ['notify', 'users'],
  ];
  const deps = document.getElementById('ex-graph-deps');
  deps.nodes = services.map(([id, team]) => ({ id, team, shape: team === 'Data' ? 'hexagon' : 'square' }));
  deps.links = calls.map(([source, target]) => ({ source, target }));
  document.getElementById('ex-graph-combine').addEventListener('change', e => (deps.combine = e.target.checked ? 'team' : undefined));
  document.getElementById('ex-graph-dir').addEventListener('change', e => (deps.direction = e.target.value));

  // Accounts and payments over a year, in a few clusters; some accounts have more to load.
  const pay = document.getElementById('ex-graph-pay');
  const start = Date.UTC(2026, 0, 1);
  const day = 86400000;
  const accounts = [];
  const payments = [];
  for (let i = 0; i < 2000; i++) accounts.push({ id: `a${i}`, label: `Account ${1000 + i}`, time: start + Math.floor(rand() * 330) * day, expandable: i % 97 === 0 });
  // Ten rings of two hundred accounts that mostly pay each other, and a few payments between rings.
  for (let i = 1; i < 2000; i++) {
    const ring = Math.floor(i / 200) * 200;
    const within = i - ring;
    const targets = within === 0 ? [i - 1] : [ring + Math.floor(rand() * within), ...(within > 3 && rand() < 0.6 ? [ring + Math.floor(rand() * within)] : [])];
    for (const j of new Set(targets)) payments.push({ source: `a${i}`, target: `a${j}`, time: Math.max(accounts[i].time, accounts[j].time) + Math.floor(rand() * 10) * day });
    if (rand() < 0.01) {
      const j = Math.floor(rand() * i);
      payments.push({ source: `a${i}`, target: `a${j}`, time: Math.max(accounts[i].time, accounts[j].time) });
    }
  }
  pay.nodes = accounts;
  pay.links = payments;
  pay.addEventListener('bmxGraphExpand', e => {
    if (e.detail.action !== 'load') return;
    const id = e.detail.id;
    const extra = Array.from({ length: 5 }, (_, k) => ({ id: `${id}-c${k}`, label: `Counterparty ${k + 1}` }));
    pay.addData({ nodes: extra, links: extra.map(n => ({ source: id, target: n.id })) });
  });
</script>