Cross-filtering, the path back up

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/webcomponent.esm.js';
  defineLatticeGrid();
</script>

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

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

  const bookEl = document.getElementById('book');
  bookEl.config = {
    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' },
    ],
  };
  bookEl.rows = 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.
  // bookEl.grid is the live grid inside the element.
  function panel(id, col, title) {
    const el = document.getElementById(id);
    el.config = {
      autoHeight: true,
      source: { mode: 'derived', from: bookEl.grid, 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.
    el.grid.on('row:click', (e) => el.grid.crossFilter.toggle(e.key));
    return el.grid;
  }
  panel('byRegion', 'region', 'Region');
  panel('byRep', 'rep', 'Rep');
</script>