Cross-filtering, the path back up

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

<div id="book" style="height:300px"></div>
<div style="display:flex;gap:16px;margin-top:16px">
  <div id="byRegion" style="flex:1"></div>
  <div id="byRep" style="flex:1"></div>
</div>

<script>
  const USD = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };

  const book = LatticeGrid.createGrid(document.getElementById('book'), {
    rowKey: 'id', toolPanel: { side: 'left', panels: ['filters', 'columns'] },
    columns: [
      { field: 'rep', title: 'Rep' }, { field: 'region', title: 'Region' },
      { field: 'amount', title: 'Deal', type: 'number', format: USD, total: 'sum' },
    ],
    rows,  // e.g. [{ id: 'S0', rep: 'Ana', region: 'EMEA', amount: 1830 }, …]
  });

  // A summary panel that can filter the book it derives from. crossFilter: true
  // pushes the clicked group's key onto the book as an ordinary filter, so the
  // other panel re-derives and both narrow each other while staying whole.
  function panel(id, col, title) {
    const g = LatticeGrid.createGrid(document.getElementById(id), {
      autoHeight: true,
      source: { mode: 'derived', from: book, follow: 'filtered', refresh: 'live', groupBy: col, crossFilter: true,
        select: { revenue: { of: 'amount', fn: 'sum' }, deals: { fn: 'count' } }, sort: [{ col: 'revenue', dir: 'desc' }] },
      columns: [{ field: col, title }, { field: 'revenue', title: 'Revenue', type: 'number', format: USD }],
    });
    // A click on a row toggles that group as the book's filter.
    g.on('row:click', (e) => g.crossFilter.toggle(e.key));
    return g;
  }
  panel('byRegion', 'region', 'Region');
  panel('byRep', 'rep', 'Rep');
</script>