Cross-filtering, the path back up

<script>
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/svelte.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

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

  // The book captured as it is created, so the summary panels can derive from it.
  let bookGrid;

  const bookConfig = {
    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 }, ...]
    onGrid: (grid) => { bookGrid = grid; },
  };

  // 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. The
  // getter defers the read of the source to when this grid is created, by which
  // point the book above it exists. A click on a row toggles that group.
  function panel(col, title) {
    return {
      autoHeight: true,
      source: { mode: 'derived', get from() { return bookGrid; }, 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 }],
      onGrid: (g) => { g.on('row:click', (e) => g.crossFilter.toggle(e.key)); },
    };
  }

  const byRegionConfig = panel('region', 'Region');
  const byRepConfig = panel('rep', 'Rep');
</script>

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

<div use:lattice={bookConfig} style="height: 300px"></div>
<div style="display: flex; gap: 16px; margin-top: 16px">
  <div use:lattice={byRegionConfig} style="flex: 1"></div>
  <div use:lattice={byRepConfig} style="flex: 1"></div>
</div>