@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/js/views.js

@@ -1,6 +1,7 @@
 /**
  * The views table, used twice: the Views tab (live rows, optionally with the
- * trashed ones shown inline) and the Trash tab (trashed rows only).
+ * trashed ones shown inline) and the Trash tab (trashed rows only). These
+ * rows are the data every statistic on the Overview is computed from.
  *
  * Selection is a set of view IDs that survives paging, so a batch can span
  * pages, and is cleared whenever the query changes shape (app, filter,
@@ -8,20 +9,22 @@
  */
 
 import { api } from './api.js';
+import { appEntries, createAppTabs } from './appTabs.js';
+import { regionName } from './charts.js';
 import { clampText } from './clamp.js';
+import { createDataTable } from './dataTable.js';
 import { el, replaceChildren, debounce, uniqueId } from './dom.js';
-import { formatDateTime, formatNumber, orNone } from './format.js';
+import { formatDate, formatDateTime, formatDuration, formatNumber, formatTime, orNone } from './format.js';
+import { icon } from './icons.js';
 import { t, tOr } from './i18n.js';
 import { createListbox } from './listbox.js';
 import { confirmModal } from './modal.js';
-import { createPager, createSegmented, headerCell, messageRow, timeCell } from './table.js';
+import { createPager, createSegmented } from './table.js';
 import { showToast, TOAST_TYPE } from './toast.js';
 import { openDetails, openEditor, openNoteEditor } from './viewDialogs.js';
-import { createInsightsPanel } from './insights.js';
+import { valueLabel } from './overview.js';
 import {
     ALL_APPS,
-    CLAMP_LINES,
-    KEY,
     RANGE,
     MODIFIED_FILTER,
     SEARCH_DEBOUNCE_MS,
@@ -35,25 +38,93 @@ export const PANEL_MODE = Object.freeze({
     TRASH: 'trash',
 });
 
-/** Columns in display order; `sort` names the API sort key. */
-const COLUMNS = [
-    { key: 'timestamp', sort: 'timestamp', className: 'col-time' },
-    { key: 'app', className: 'col-app' },
-    { key: 'page', sort: 'page', className: 'col-page' },
-    { key: 'source', sort: 'source', className: 'col-source' },
-    { key: 'device', sort: 'deviceSize', className: 'col-device' },
-    { key: 'country', sort: 'country', className: 'col-country' },
-    { key: 'client', sort: 'browser', className: 'col-client' },
-    { key: 'event', sort: 'eventType', className: 'col-event' },
-    { key: 'status', className: 'col-status' },
-    { key: 'actions', className: 'col-actions' },
+/** Width of the row actions column: four icon buttons and their padding. */
+const ACTIONS_WIDTH = 148;
+
+/** A cell of two lines: what matters, and a detail under it. */
+const two = (primary, secondary) => [
+    clampText(primary, { className: 'cell-primary' }),
+    clampText(secondary, { className: 'cell-secondary' }),
+];
+/** A cell of one line. */
+const one = (text, className = 'cell-primary') => [clampText(text, { className })];
+const when = (value) => (value ? two(formatDate(value), formatTime(value)) : one(t('common.none')));
+
+/** A custom event's data in a line: its first few simple values. */
+function eventSummary(data) {
+    if (!data || typeof data !== 'object') return t('common.none');
+    const parts = Object.entries(data)
+        .filter(([, value]) => ['string', 'number', 'boolean'].includes(typeof value))
+        .slice(0, 3)
+        .map(([key, value]) => `${key}: ${value}`);
+    return parts.length ? parts.join(', ') : t('common.none');
+}
+
+/**
+ * Every column a views table can show, in default order. The ones marked
+ * `hidden` are there to be chosen; `sort` names the API sort key, used when
+ * the server offers it.
+ */
+const VIEW_COLUMNS = [
+    { id: 'time', width: 132, sort: 'timestamp', cell: (view) => when(view.timestamp) },
+    { id: 'deleted', width: 136, sort: 'deletedAt', trashOnly: true, cell: (view) => when(view.deletedAt) },
+    { id: 'app', width: 136, allAppsOnly: true, cell: (view) => one(view.appId, 'mono') },
+    {
+        id: 'page', width: 260, minWidth: 200, grow: true, sort: 'page',
+        cell: (view) => two(orNone(view.pagePath), view.hostname ? `${view.hostname} · ${orNone(view.pageTitle)}` : orNone(view.pageTitle)),
+    },
+    {
+        id: 'source', width: 144, sort: 'source',
+        cell: (view) => two(
+            view.sourceType ? tOr(`sources.${view.sourceType}`, view.sourceType) : t('common.none'),
+            orNone(view.utmCampaign ?? view.referrerDomain),
+        ),
+    },
+    { id: 'status', width: 150, minWidth: 110 },
+    {
+        id: 'event', width: 130, sort: 'eventType',
+        cell: (view) => two(view.eventType ? tOr(`eventTypes.${view.eventType}`, view.eventType) : t('common.none'), eventSummary(view.eventData)),
+    },
+    {
+        id: 'country', width: 140, sort: 'country',
+        cell: (view) => two(view.country ? regionName(view.country) : t('common.none'), orNone([view.city, view.region].filter(Boolean).join(', '))),
+    },
+    {
+        id: 'device', width: 104, sort: 'deviceSize',
+        cell: (view) => two(
+            view.deviceSize ? tOr(`deviceSizes.${view.deviceSize}`, view.deviceSize) : t('common.none'),
+            view.deviceType ? tOr(`deviceTypes.${view.deviceType}`, view.deviceType) : t('common.none'),
+        ),
+    },
+    { id: 'client', width: 124, sort: 'browser', cell: (view) => two(orNone(view.browser), orNone(view.os)) },
+    {
+        id: 'engagement', width: 130, sort: 'engagedMs',
+        cell: (view) => two(
+            formatDuration(view.engagedMs),
+            view.scrollDepth === null || view.scrollDepth === undefined ? t('common.none') : t('details.scrolled', { percent: view.scrollDepth }),
+        ),
+    },
+    {
+        id: 'campaign', width: 180, sort: 'campaign',
+        cell: (view) => two(orNone(view.utmCampaign), orNone([view.utmSource, view.utmMedium, view.utmTerm, view.utmContent].filter(Boolean).join(' · '))),
+    },
+    { id: 'title', width: 220, hidden: true, sort: 'title', cell: (view) => one(orNone(view.pageTitle)) },
+    { id: 'site', width: 180, hidden: true, sort: 'hostname', cell: (view) => one(orNone(view.hostname)) },
+    { id: 'referrer', width: 240, hidden: true, sort: 'referrer', cell: (view) => two(orNone(view.referrerDomain), orNone(view.referrer)) },
+    { id: 'language', width: 150, hidden: true, sort: 'language', cell: (view) => one(valueLabel('language', view.language)) },
+    { id: 'browser', width: 140, hidden: true, sort: 'browser', cell: (view) => two(orNone(view.browser), orNone(view.browserVersion)) },
+    { id: 'system', width: 140, hidden: true, sort: 'os', cell: (view) => two(orNone(view.os), orNone(view.osVersion)) },
+    { id: 'ip', width: 140, hidden: true, cell: (view) => one(orNone(view.maskedIp), 'mono') },
+    { id: 'session', width: 160, hidden: true, cell: (view) => one(orNone(view.sessionId), 'mono') },
+    { id: 'viewId', width: 130, hidden: true, cell: (view) => one(view.id, 'mono') },
+    { id: 'note', width: 220, hidden: true, cell: (view) => one(orNone(view.note)) },
+    { id: 'modified', width: 136, hidden: true, sort: 'modifiedAt', cell: (view) => when(view.adminModifiedAt) },
 ];
-/** Plus the selection column. */
-const COLUMN_COUNT = COLUMNS.length + 1;
 
 /**
  * @param {{ mode: string, meta: object, context: { apps: () => object[], appId: () => string,
- *   setAppId: (id: string) => void, refreshApps: () => Promise<void>, reportError: (error: unknown) => void } }} deps
+ *   setAppId: (id: string) => void, refreshApps: () => Promise<void>, reportError: (error: unknown) => void,
+ *   viewsChanged: () => void } }} deps
  */
 export function createViewsPanel({ mode, meta, context }) {
     const isTrash = mode === PANEL_MODE.TRASH;
@@ -62,7 +133,9 @@ export function createViewsPanel({ mode, meta, context }) {
         modified: MODIFIED_FILTER.ANY,
         range: RANGE.ALL,
         eventType: '',
-        knownEventTypes: new Set(),
+        knownEventTypes: [],
+        /** Breakdown values carried over from the Overview, such as one country. */
+        where: {},
         search: '',
         sort: isTrash ? 'deletedAt' : 'timestamp',
         order: SORT_ORDER.DESC,
@@ -80,98 +153,20 @@ export function createViewsPanel({ mode, meta, context }) {
         return state.showDeleted ? VIEW_STATUS.ALL : VIEW_STATUS.ACTIVE;
     };
 
-    /** The filters the table and the insights above it share. */
+    /** The filters of the listing, the same the Overview's analysis takes. */
     const filters = () => ({
         status: status(),
         modified: state.modified,
         range: state.range,
         eventType: state.eventType,
+        where: state.where,
         search: state.search,
     });
 
     // ---- Toolbar -----------------------------------------------------------
 
-    // One tab per app (each app is its own table). Shared by the Views and
-    // Trash panels: switching here switches both. ARIA tabs pattern with
-    // automatic activation: arrow keys, Home and End move and select.
     const tableId = uniqueId('views-table');
-    const appTabs = el('div', {
-        className: 'app-tabs',
-        attrs: { role: 'tablist', 'aria-label': t('appTabs.label') },
-    });
-    let focusAppOnRender = false;
-
-    function selectApp(appId, { focus = false } = {}) {
-        focusAppOnRender = focus;
-        if (appId === context.appId()) {
-            renderAppTabs();
-            return;
-        }
-        context.setAppId(appId);
-    }
-
-    /** Every app's tab, led by one for all of them together. */
-    function tabEntries() {
-        const apps = context.apps();
-        const sum = (key) => apps.reduce((total, app) => total + app[key], 0);
-        return [
-            {
-                appId: ALL_APPS,
-                label: t('appTabs.all'),
-                active: sum('active'),
-                deleted: sum('deleted'),
-                modified: sum('modified'),
-                available: true,
-            },
-            ...apps.map((app) => ({ ...app, label: app.appId })),
-        ];
-    }
-
-    function renderAppTabs() {
-        const current = context.appId();
-        replaceChildren(appTabs, tabEntries().map((app) => {
-            const selected = app.appId === current;
-            const count = isTrash ? app.deleted : app.active;
-            const countText = t(isTrash ? 'appTabs.deletedCount' : 'appTabs.activeCount', { count });
-            return el('button', {
-                className: `app-tab${selected ? ' active' : ''}${app.available ? '' : ' unavailable'}`,
-                attrs: {
-                    type: 'button',
-                    role: 'tab',
-                    'aria-selected': String(selected),
-                    'aria-controls': tableId,
-                    'aria-label': t('appTabs.tabName', { app: app.label, count: countText }),
-                    tabindex: selected ? '0' : '-1',
-                    title: app.available ? null : t('appTabs.unavailable', { app: app.appId }),
-                },
-                dataset: { appId: app.appId },
-                on: { click: () => selectApp(app.appId) },
-            }, [
-                el('span', { className: 'prompt-char', text: '❯', attrs: { 'aria-hidden': 'true' } }),
-                el('span', { className: 'app-tab-name', text: app.label }),
-                el('span', { className: 'app-tab-count', text: formatNumber(count), attrs: { 'aria-hidden': 'true' } }),
-            ]);
-        }));
-        if (focusAppOnRender) {
-            appTabs.querySelector('[aria-selected="true"]')?.focus();
-            focusAppOnRender = false;
-        }
-    }
-
-    appTabs.addEventListener('keydown', (event) => {
-        const ids = tabEntries().map((app) => app.appId);
-        if (ids.length === 0) return;
-        const index = Math.max(0, ids.indexOf(context.appId()));
-        const moves = {
-            [KEY.ARROW_RIGHT]: (index + 1) % ids.length,
-            [KEY.ARROW_LEFT]: (index - 1 + ids.length) % ids.length,
-            [KEY.HOME]: 0,
-            [KEY.END]: ids.length - 1,
-        };
-        if (!(event.key in moves)) return;
-        event.preventDefault();
-        selectApp(ids[moves[event.key]], { focus: true });
-    });
+    const appTabs = createAppTabs({ context, controls: tableId, trash: isTrash });
 
     const searchInput = el('input', {
         className: 'input search-input',
@@ -218,7 +213,7 @@ export function createViewsPanel({ mode, meta, context }) {
 
     const eventTypeOptions = () => [
         { value: '', label: t('toolbar.allEventTypes') },
-        ...[...state.knownEventTypes].sort().map((type) => ({ value: type, label: tOr(`eventTypes.${type}`, type) })),
+        ...state.knownEventTypes.map((type) => ({ value: type, label: tOr(`eventTypes.${type}`, type) })),
     ];
     const eventTypePicker = createListbox({
         label: t('toolbar.eventType'),
@@ -242,11 +237,33 @@ export function createViewsPanel({ mode, meta, context }) {
         },
     });
 
+    // Filters carried over from the Overview, each removable on its own.
+    const chips = el('div', { className: 'filter-chips', attrs: { 'aria-live': 'polite' } });
+    function renderChips() {
+        replaceChildren(chips, Object.entries(state.where).map(([dim, value]) => {
+            const label = `${t(`overview.dims.${dim}`)}: ${valueLabel(dim, value)}`;
+            return el('button', {
+                className: 'chip',
+                attrs: { type: 'button', 'aria-label': t('overview.removeFilter', { filter: label }), title: t('overview.removeFilter', { filter: label }) },
+                dataset: { dim },
+                on: { click: () => {
+                    state.where = Object.fromEntries(Object.entries(state.where).filter(([key]) => key !== dim));
+                    resetAndLoad();
+                } },
+            }, [icon('filter'), el('span', { className: 'chip-text', text: label }), icon('close')]);
+        }));
+    }
+
+    // Filled once the table exists: its "Columns" button sits with the other
+    // controls that change only how the rows are shown.
+    const columnsSlot = el('span', { className: 'toolbar-slot' });
+
     const toolbar = el('div', { className: 'toolbar' }, [
         el('div', { className: 'toolbar-group' }, [
             rangeFilter.element,
             isTrash ? null : eventTypePicker.element,
             searchInput,
+            chips,
         ]),
         el('div', { className: 'toolbar-group' }, [
             modifiedFilter.element,
@@ -256,6 +273,7 @@ export function createViewsPanel({ mode, meta, context }) {
                 el('span', { className: 'switch-label', text: t('toolbar.showDeleted') }),
             ]),
             pageSizePicker.element,
+            columnsSlot,
         ]),
     ]);
 
@@ -272,7 +290,6 @@ export function createViewsPanel({ mode, meta, context }) {
     });
 
     const batchBar = el('div', { className: 'batch-bar', attrs: { role: 'region', 'aria-label': t('batch.region') } }, [
-        el('span', { className: 'prompt-char', text: '❯', attrs: { 'aria-hidden': 'true' } }),
         batchCount,
         el('div', { className: 'batch-actions' }, [
             isTrash ? null : batchButton('batch.edit', 'secondary', () => editViews(selectedViews())),
@@ -294,9 +311,34 @@ export function createViewsPanel({ mode, meta, context }) {
         attrs: { type: 'checkbox', 'aria-label': t('table.selectPage') },
         on: { change: () => togglePage(selectAll.checked) },
     });
-    const thead = el('thead');
-    const tbody = el('tbody');
-    const table = el('table', { className: 'data-table views-table', attrs: { id: tableId } }, [thead, tbody]);
+
+    const allApps = () => context.appId() === ALL_APPS;
+    const grid = createDataTable({
+        storageKey: mode,
+        id: tableId,
+        className: 'views-table',
+        // The trash leads with when a view was deleted; elsewhere that is one more column to choose.
+        columns: VIEW_COLUMNS.map(({ sort, allAppsOnly, trashOnly, cell, ...column }) => ({
+            ...column,
+            label: t(`columns.${column.id}`),
+            hidden: trashOnly ? !isTrash : column.hidden,
+            sortKey: meta.sortFields.includes(sort) ? sort : undefined,
+            available: allAppsOnly ? allApps : undefined,
+            unavailableNote: allAppsOnly ? t('table.onlyAllApps') : undefined,
+            cell: column.id === 'status' ? statusCell : cell,
+        })),
+        rowKey: (view) => view.id,
+        rowAttrs: (view) => ({ className: isDeleted(view) ? 'row-deleted' : '', dataset: { viewId: view.id } }),
+        select: { header: () => selectAll, cell: selectCell },
+        actions: { label: t('columns.actions'), width: ACTIONS_WIDTH, cell: actionsCell },
+        sort: () => ({ key: state.sort, order: state.order }),
+        onSort,
+        empty: () => (isTrash ? t('table.emptyTrash') : t('table.empty')),
+    });
+    const { table } = grid;
+    grid.onRender(renderSelection);
+    columnsSlot.append(grid.chooserButton);
+
     const pager = createPager((page) => {
         state.page = page;
         load();
@@ -304,33 +346,20 @@ export function createViewsPanel({ mode, meta, context }) {
 
     const retention = isTrash ? el('p', { className: 'notice' }) : null;
 
-    // Insights live on the Views tab; the trash is for recovery, not analysis.
-    const insights = isTrash ? null : createInsightsPanel({
-        reportError: context.reportError,
-        onData: (data) => {
-            // The server lists every event type these apps hold, whatever the
-            // other filters say, so choosing one never hides the others. The
-            // current choice stays on offer even if its last view was edited.
-            const types = new Set(data.eventTypes);
-            if (state.eventType) types.add(state.eventType);
-            const known = state.knownEventTypes;
-            if (types.size === known.size && [...types].every((type) => known.has(type))) return;
-            state.knownEventTypes = types;
-            eventTypePicker.setOptions(eventTypeOptions(), state.eventType);
-        },
-    });
-
     const element = el('section', {
         className: 'panel',
         attrs: { 'aria-label': isTrash ? t('tabs.trash') : t('tabs.views') },
     }, [
-        appTabs,
+        el('header', { className: 'panel-header' }, [
+            el('h2', { className: 'panel-title', text: isTrash ? t('tabs.trash') : t('tabs.views') }),
+            el('p', { className: 'panel-intro', text: isTrash ? t('trash.intro') : t('views.intro') }),
+        ]),
+        appTabs.element,
         toolbar,
         retention,
-        insights?.element,
         summary,
         batchBar,
-        el('div', { className: 'table-wrap' }, [table]),
+        grid.element,
         pager.element,
     ]);
 
@@ -380,35 +409,21 @@ export function createViewsPanel({ mode, meta, context }) {
         load();
     }
 
-    function renderHead() {
-        replaceChildren(thead, [el('tr', {}, [
-            el('th', { className: 'col-select', attrs: { scope: 'col' } }, [selectAll]),
-            ...COLUMNS.map((column) => headerCell({
-                label: t(`columns.${column.key}`),
-                sortKey: column.sort,
-                sort: state.sort,
-                order: state.order,
-                onSort,
-                className: column.className,
-            })),
-        ])]);
-    }
+    const isDeleted = (view) => view.deletedAt !== null && view.deletedAt !== undefined;
 
     function badge(key, className, title) {
         return el('span', { className: `badge ${className}`, text: t(key), attrs: title ? { title } : {} });
     }
 
-    function actionButton(icon, labelKey, handler, variant = '') {
+    function actionButton(iconName, labelKey, handler, variant = '') {
         return el('button', {
             className: `icon-btn row-action ${variant}`.trim(),
-            text: icon,
             attrs: { type: 'button', 'aria-label': t(labelKey), title: t(labelKey) },
             on: { click: handler },
-        });
+        }, [icon(iconName)]);
     }
 
-    function renderRow(view) {
-        const deleted = view.deletedAt !== null && view.deletedAt !== undefined;
+    function selectCell(view) {
         const checkbox = el('input', {
             attrs: {
                 type: 'checkbox',
@@ -417,50 +432,28 @@ export function createViewsPanel({ mode, meta, context }) {
             on: { change: (event) => toggleRow(view, event.currentTarget.checked) },
         });
         checkbox.checked = state.selection.has(view.id);
+        return checkbox;
+    }
 
-        const badges = [
-            deleted ? badge('status.deleted', 'badge-danger', formatDateTime(view.deletedAt)) : null,
+    function statusCell(view) {
+        return [el('div', { className: 'badges' }, [
+            isDeleted(view) ? badge('status.deleted', 'badge-danger', formatDateTime(view.deletedAt)) : null,
             view.adminModifiedAt ? badge('status.modified', 'badge-warning', formatDateTime(view.adminModifiedAt)) : null,
             view.note ? badge('status.note', 'badge-info', view.note) : null,
             view.isUnique ? null : badge('status.repeat', 'badge-muted'),
-        ];
+        ])];
+    }
 
-        const actions = [
-            actionButton('ⓘ', 'rowActions.details', () => openDetails(view)),
-            deleted ? null : actionButton('✎', 'rowActions.edit', () => editViews([view])),
-            actionButton('✐', 'rowActions.note', () => noteViews([view])),
+    function actionsCell(view) {
+        const deleted = isDeleted(view);
+        return el('div', { className: 'row-actions' }, [
+            actionButton('info', 'rowActions.details', () => openDetails(view)),
+            deleted ? null : actionButton('edit', 'rowActions.edit', () => editViews([view])),
+            actionButton('note', 'rowActions.note', () => noteViews([view])),
             deleted
-                ? actionButton('↺', 'rowActions.restore', () => restoreViews([view]))
-                : actionButton('🗑', 'rowActions.delete', () => deleteViews([view]), 'danger'),
-            deleted && isTrash ? actionButton('⨯', 'rowActions.purge', () => purgeViews([view]), 'danger') : null,
-        ];
-
-        const source = view.sourceType ? tOr(`sources.${view.sourceType}`, view.sourceType) : t('common.none');
-
-        return el('tr', { className: deleted ? 'row-deleted' : '', dataset: { viewId: view.id } }, [
-            el('td', { className: 'col-select' }, [checkbox]),
-            timeCell(view.timestamp),
-            el('td', { className: 'col-app' }, [clampText(view.appId, { className: 'mono' })]),
-            el('td', { className: 'col-page' }, [
-                clampText(orNone(view.pagePath), { className: 'cell-primary' }),
-                clampText(orNone(view.pageTitle), { lines: CLAMP_LINES.SINGLE, className: 'cell-secondary' }),
-            ]),
-            el('td', { className: 'col-source' }, [
-                clampText(source, { className: 'cell-primary' }),
-                clampText(orNone(view.referrerDomain), { className: 'cell-secondary' }),
-            ]),
-            el('td', { className: 'col-device' }, [
-                clampText(view.deviceSize ? tOr(`deviceSizes.${view.deviceSize}`, view.deviceSize) : t('common.none'), { className: 'cell-primary' }),
-                clampText(orNone(view.deviceType), { className: 'cell-secondary' }),
-            ]),
-            el('td', { className: 'col-country' }, [clampText(orNone(view.country))]),
-            el('td', { className: 'col-client' }, [
-                clampText(orNone(view.browser), { className: 'cell-primary' }),
-                clampText(orNone(view.os), { className: 'cell-secondary' }),
-            ]),
-            el('td', { className: 'col-event' }, [clampText(orNone(view.eventType))]),
-            el('td', { className: 'col-status' }, [el('div', { className: 'badges' }, badges)]),
-            el('td', { className: 'col-actions' }, [el('div', { className: 'row-actions' }, actions)]),
+                ? actionButton('restore', 'rowActions.restore', () => restoreViews([view]))
+                : actionButton('trash', 'rowActions.delete', () => deleteViews([view]), 'danger'),
+            deleted && isTrash ? actionButton('purge', 'rowActions.purge', () => purgeViews([view]), 'danger') : null,
         ]);
     }
 
@@ -475,7 +468,7 @@ export function createViewsPanel({ mode, meta, context }) {
         selectAll.indeterminate = selectedOnPage > 0 && selectedOnPage < pageIds.length;
         selectAll.disabled = pageIds.length === 0;
 
-        for (const row of tbody.querySelectorAll('tr[data-view-id]')) {
+        for (const row of table.querySelectorAll('tbody tr[data-view-id]')) {
             const checkbox = row.querySelector('.col-select input');
             if (checkbox) checkbox.checked = state.selection.has(row.dataset.viewId);
         }
@@ -486,20 +479,14 @@ export function createViewsPanel({ mode, meta, context }) {
 
     /** Rebuild the table from state. After a sort, focus returns to its header. */
     function render() {
-        renderHead();
-        if (state.rows.length === 0) {
-            replaceChildren(tbody, [messageRow(COLUMN_COUNT, isTrash ? t('table.emptyTrash') : t('table.empty'))]);
-        } else {
-            replaceChildren(tbody, state.rows.map(renderRow));
-        }
-        renderSelection();
+        grid.setRows(state.rows);
         pager.update(state.page, state.pageSize, state.total);
         if (state.focusSort) {
-            thead.querySelector(`[data-sort-key="${state.focusSort}"]`)?.focus();
+            grid.sortButton(state.focusSort)?.focus();
             state.focusSort = null;
         }
 
-        const app = tabEntries().find((entry) => entry.appId === context.appId());
+        const app = appEntries(context.apps()).find((entry) => entry.appId === context.appId());
         summary.textContent = app
             ? t('views.summary', {
                 active: formatNumber(app.active),
@@ -535,8 +522,6 @@ export function createViewsPanel({ mode, meta, context }) {
             if (seq !== state.requestSeq) return;
             state.rows = result.views;
             state.total = result.total;
-            // Rows name their app only under All apps; one app's tab already does.
-            table.classList.toggle('has-app', appId === ALL_APPS);
             if (state.rows.length === 0 && state.page > 1 && state.total > 0) {
                 state.page = Math.max(1, Math.ceil(state.total / state.pageSize));
                 await load();
@@ -550,16 +535,30 @@ export function createViewsPanel({ mode, meta, context }) {
         }
     }
 
-    /** Refresh the insights for the current filters; the table has its own paging. */
-    function loadInsights() {
-        if (insights && context.appId()) insights.load({ appId: context.appId(), ...filters() });
+    /**
+     * Every event type the app holds in this status, whatever else is
+     * filtered, so choosing one never hides the others. The current choice
+     * stays on offer even if its last view was edited.
+     */
+    async function loadEventTypes() {
+        const appId = context.appId();
+        if (isTrash || !appId) return;
+        try {
+            const query = { status: status() };
+            const { eventTypes } = appId === ALL_APPS ? await api.eventTypesAll(query) : await api.eventTypes(appId, query);
+            if (appId !== context.appId()) return;
+            state.knownEventTypes = [...new Set([...eventTypes, ...(state.eventType ? [state.eventType] : [])])].sort();
+            eventTypePicker.setOptions(eventTypeOptions(), state.eventType);
+        } catch (error) {
+            context.reportError(error);
+        }
     }
 
     function resetAndLoad() {
         state.page = 1;
         state.selection.clear();
+        renderChips();
         load();
-        loadInsights();
     }
 
     // ---- Operations --------------------------------------------------------
@@ -604,10 +603,11 @@ export function createViewsPanel({ mode, meta, context }) {
         }
         if (failure) context.reportError(failure);
         if (result.affected > 0 || !failure) {
+            context.viewsChanged();
             try {
                 await context.refreshApps();
                 await load();
-                loadInsights();
+                loadEventTypes();
             } catch (error) {
                 context.reportError(error);
             }
@@ -668,18 +668,84 @@ export function createViewsPanel({ mode, meta, context }) {
 
     render();
 
+    let visible = false;
+    let stale = true;
+
     return {
         element,
         /** The app list or selected app changed. */
         syncApps() {
-            renderAppTabs();
+            appTabs.render();
         },
-        /** Start over for the current app. */
-        reload: resetAndLoad,
-        /** Refresh the current page and the insights, keeping the selection. */
-        refresh() {
-            load();
-            loadInsights();
+        /** The app changed: breakdown values of one app mean nothing in another. */
+        appChanged() {
+            state.where = {};
+            state.page = 1;
+            state.selection.clear();
+            stale = true;
+            if (visible) {
+                resetAndLoad();
+                loadEventTypes();
+            }
+        },
+        /** Shown: start over after an app change, otherwise refresh the page, keeping the selection. */
+        show() {
+            visible = true;
+            if (stale) {
+                stale = false;
+                resetAndLoad();
+            } else {
+                load();
+            }
+            loadEventTypes();
+        },
+        hide() {
+            visible = false;
+        },
+        /** Rows changed elsewhere (in the other of Views and Trash). */
+        invalidate() {
+            if (visible) load();
+        },
+        /**
+         * Show exactly the rows an Overview describes: its range, event type,
+         * and breakdown values. Search and the admin-changes filter start over.
+         * @param {{ range: string, eventType: string, where: Record<string, string|null> }} next
+         */
+        applyFilters({ range, eventType, where }) {
+            state.range = range;
+            state.eventType = eventType;
+            state.where = { ...where };
+            state.search = '';
+            state.modified = MODIFIED_FILTER.ANY;
+            searchInput.value = '';
+            rangeFilter.setValue(range);
+            modifiedFilter.setValue(MODIFIED_FILTER.ANY);
+            if (eventType && !state.knownEventTypes.includes(eventType)) {
+                state.knownEventTypes = [...state.knownEventTypes, eventType].sort();
+            }
+            eventTypePicker.setOptions(eventTypeOptions(), eventType);
+            stale = true;
+        },
+        /**
+         * Show one view by its ID, wherever it is: live or in the trash, in
+         * any range. Every other filter starts over.
+         * @param {string} viewId
+         */
+        findView(viewId) {
+            state.range = RANGE.ALL;
+            state.eventType = '';
+            state.where = {};
+            state.modified = MODIFIED_FILTER.ANY;
+            state.search = viewId;
+            searchInput.value = viewId;
+            if (!isTrash) {
+                state.showDeleted = true;
+                showDeletedToggle.checked = true;
+            }
+            rangeFilter.setValue(RANGE.ALL);
+            modifiedFilter.setValue(MODIFIED_FILTER.ANY);
+            eventTypePicker.setOptions(eventTypeOptions(), '');
+            stale = true;
         },
     };
 }