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">
<style>
  #book > div { height: 300px; }
  #panels { display: flex; gap: 16px; margin-top: 16px; }
  #byRegion, #byRep { flex: 1; }
</style>
<div id="app"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

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

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        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 }, ...]
        },
      };
    },
    mounted() {
      // The panels read the book's live instance, so they compose after it mounts.
      const book = this.$refs.book.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.
      function panel(id, col, title) {
        const g = 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');
    },
    template: `
      <div>
        <div id="book"><lattice-grid ref="book" v-bind="book" /></div>
        <div id="panels">
          <div id="byRegion"></div>
          <div id="byRep"></div>
        </div>
      </div>
    `,
  }).mount('#app');
</script>