} Full row data or null on failure
+ */
+async function fetchFullRow(partialRow) {
+ const { timestamp } = partialRow;
+ const tsStr = String(timestamp);
+ if (!TIMESTAMP_RE.test(tsStr)) {
+ // eslint-disable-next-line no-console
+ console.warn('fetchFullRow: invalid timestamp format, aborting', tsStr);
+ return null;
+ }
+ const host = partialRow['request.host'] || '';
+ const sql = await loadSql('log-detail', {
+ database: DATABASE,
+ table: getTable(),
+ timestamp: tsStr,
+ host: host.replace(/'/g, "\\'"),
+ });
+ const result = await query(sql);
+ return result.data.length > 0 ? result.data[0] : null;
+}
+
+/**
+ * Initialize the log detail modal element and event listeners.
+ */
+function initLogDetailModal() {
+ if (logDetailModal) return;
+ logDetailModal = document.getElementById('logDetailModal');
+ if (!logDetailModal) return;
+
+ // Close on backdrop click
+ logDetailModal.addEventListener('click', (e) => {
+ if (e.target === logDetailModal) {
+ closeLogDetailModal();
+ }
+ });
+
+ // Close on Escape
+ logDetailModal.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ closeLogDetailModal();
+ }
+ });
+
+ // Close button handler
+ const closeBtn = logDetailModal.querySelector('[data-action="close-log-detail"]');
+ if (closeBtn) {
+ closeBtn.addEventListener('click', closeLogDetailModal);
+ }
+}
+
+/**
+ * Look up a row from the page cache by virtual index.
+ * @param {number} rowIdx
+ * @returns {Object|null}
+ */
+function getRowFromCache(rowIdx) {
+ const pageIdx = Math.floor(rowIdx / PAGE_SIZE);
+ const page = pageCache.get(pageIdx);
+ if (!page) return null;
+ const offset = rowIdx - pageIdx * PAGE_SIZE;
+ return offset < page.rows.length ? page.rows[offset] : null;
+}
+
/**
* Open log detail modal for a row.
+ * Fetches full row data on demand if not already present.
* @param {number} rowIdx
+ * @param {Object} row
*/
-export function openLogDetailModal(rowIdx) {
- const row = state.logsData[rowIdx];
+export async function openLogDetailModal(rowIdx, row) {
if (!row) return;
- if (!logDetailModal) {
- logDetailModal = document.getElementById('logDetailModal');
- if (!logDetailModal) return;
+ initLogDetailModal();
+ if (!logDetailModal) return;
- // Close on backdrop click
- logDetailModal.addEventListener('click', (e) => {
- if (e.target === logDetailModal) {
- closeLogDetailModal();
- }
- });
-
- // Close on Escape
- logDetailModal.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
- closeLogDetailModal();
- }
- });
+ // Show modal immediately with loading state
+ showDetailLoading();
+ logDetailModal.showModal();
- // Close button handler
- const closeBtn = logDetailModal.querySelector('[data-action="close-log-detail"]');
- if (closeBtn) {
- closeBtn.addEventListener('click', closeLogDetailModal);
+ try {
+ const fullRow = await fetchFullRow(row);
+ if (fullRow) {
+ renderLogDetailContent(fullRow);
+ } else {
+ // Fallback: render with partial data
+ renderLogDetailContent(row);
}
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error('Failed to fetch full row:', err);
+ // Fallback: render with partial data
+ renderLogDetailContent(row);
}
-
- renderLogDetailContent(row);
- logDetailModal.showModal();
}
// Copy row data as JSON when clicking on row background
export function copyLogRow(rowIdx) {
- const row = state.logsData[rowIdx];
+ const row = getRowFromCache(rowIdx);
if (!row) return;
// Convert flat dot notation to nested object
@@ -310,161 +375,444 @@ export function copyLogRow(rowIdx) {
});
}
-// Set up click handler for row background clicks
-export function setupLogRowClickHandler() {
- const container = logsView?.querySelector('.logs-table-container');
- if (!container) return;
-
- container.addEventListener('click', (e) => {
- // Only handle clicks directly on td or tr (not on links, buttons, or spans)
- const { target } = e;
- if (target.tagName !== 'TD' && target.tagName !== 'TR') return;
-
- // Don't open modal if clicking on a clickable cell (filter action)
- if (target.classList.contains('clickable')) return;
+function renderLogsError(message) {
+ const container = logsView.querySelector('.logs-table-container');
+ container.innerHTML = `Error loading logs: ${escapeHtml(message)}
`;
+}
- // Find the row
- const row = target.closest('tr');
- if (!row || !row.dataset.rowIdx) return;
+// Collapse toggle label helper
+function updateCollapseToggleLabel() {
+ const btn = document.getElementById('chartCollapseToggle');
+ if (!btn) return;
+ const chartSection = document.querySelector('.chart-section');
+ const collapsed = chartSection?.classList.contains('chart-collapsed');
+ btn.innerHTML = collapsed ? '▼ Show chart' : '▲ Hide chart';
+ btn.title = collapsed ? 'Expand chart' : 'Collapse chart';
+}
- const rowIdx = parseInt(row.dataset.rowIdx, 10);
- openLogDetailModal(rowIdx);
+// Set up collapse toggle click handler
+export function initChartCollapseToggle() {
+ const btn = document.getElementById('chartCollapseToggle');
+ if (!btn) return;
+ btn.addEventListener('click', () => {
+ const chartSection = document.querySelector('.chart-section');
+ if (!chartSection) return;
+ chartSection.classList.toggle('chart-collapsed');
+ const collapsed = chartSection.classList.contains('chart-collapsed');
+ localStorage.setItem('chartCollapsed', collapsed ? 'true' : 'false');
+ updateCollapseToggleLabel();
});
+ updateCollapseToggleLabel();
}
-function renderLogsError(message) {
- const container = logsView.querySelector('.logs-table-container');
- container.innerHTML = `Error loading logs: ${escapeHtml(message)}
`;
+/**
+ * Find the nearest cached cursor for a given page index.
+ * @param {number} pageIdx
+ * @returns {string|null}
+ */
+function findCachedCursor(pageIdx) {
+ for (let p = pageIdx - 1; p >= 0; p -= 1) {
+ const prev = pageCache.get(p);
+ if (prev && prev.cursor) return prev.cursor;
+ }
+ return null;
}
-// Append rows to existing logs table (for infinite scroll)
-function appendLogsRows(data) {
- const container = logsView.querySelector('.logs-table-container');
- const tbody = container.querySelector('.logs-table tbody');
- if (!tbody || data.length === 0) return;
+/**
+ * Format a Date as 'YYYY-MM-DD HH:MM:SS.mmm' in UTC.
+ * @param {Date} date
+ * @returns {string}
+ */
+function formatTimestampUTC(date) {
+ const pad = (n) => String(n).padStart(2, '0');
+ const ms = String(date.getUTCMilliseconds()).padStart(3, '0');
+ return `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())} ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}.${ms}`;
+}
- // Get columns from existing table header
- const headerCells = container.querySelectorAll('.logs-table thead th');
- const columns = Array.from(headerCells).map((th) => th.title || th.textContent);
+/**
+ * Interpolate a timestamp for a given row index using bucket-aware lookup.
+ * Chart data buckets are ordered oldest→newest (ascending time), but rows are
+ * ordered newest→oldest (descending time, ORDER BY timestamp DESC).
+ * So row 0 = newest bucket (last in chart), row N = oldest bucket (first in chart).
+ *
+ * Uses binary search on the cumulative row-count array when available,
+ * falling back to linear interpolation across the time range.
+ * @param {number} startIdx - virtual row index (0 = newest)
+ * @param {number} totalRows
+ * @returns {string} timestamp in 'YYYY-MM-DD HH:MM:SS.mmm' format
+ */
+function interpolateTimestamp(startIdx, totalRows) {
+ // Bucket-aware path: binary search the cumulative array
+ if (bucketIndex && bucketIndex.cumulative.length > 0) {
+ const { cumulative } = bucketIndex;
+ const total = bucketIndex.totalRows;
+ // Clamp to valid range
+ const targetRow = Math.min(Math.max(startIdx, 0), total - 1);
+
+ // cumulative is oldest→newest; cumRows is a running total in that order.
+ // Row 0 (newest) maps to the END of the cumulative array.
+ // Convert: rows from the end = targetRow → cumulative offset from end.
+ const rowsFromEnd = targetRow;
+ // rowsFromEnd=0 means the last bucket; rowsFromEnd=total-1 means the first.
+ // cumulativeTarget = total - rowsFromEnd = the cumRows value we seek.
+ const cumulativeTarget = total - rowsFromEnd;
+
+ // Binary search: find the bucket where cumRows >= cumulativeTarget
+ let lo = 0;
+ let hi = cumulative.length - 1;
+ while (lo < hi) {
+ const mid = Math.floor((lo + hi) / 2);
+ if (cumulative[mid].cumRows < cumulativeTarget) {
+ lo = mid + 1;
+ } else {
+ hi = mid;
+ }
+ }
- // Map short names back to full names
- const shortToFull = Object.fromEntries(
- Object.entries(LOG_COLUMN_SHORT_LABELS).map(([full, short]) => [short, full]),
- );
+ return formatTimestampUTC(parseUTC(cumulative[lo].timestamp));
+ }
- const fullColumns = columns.map((col) => shortToFull[col] || col);
- const pinned = state.pinnedColumns.filter((col) => fullColumns.includes(col));
+ // Fallback: linear interpolation across the time range
+ const { start, end } = getTimeRangeBounds();
+ const totalMs = end.getTime() - start.getTime();
+ const fraction = Math.min(startIdx / Math.max(totalRows, 1), 1);
+ const targetTs = new Date(end.getTime() - fraction * totalMs);
+ return formatTimestampUTC(targetTs);
+}
- // Get starting index from existing rows
- const existingRows = tbody.querySelectorAll('tr').length;
+/**
+ * Build the SQL query for a given page, using cursor, interpolation, or initial query.
+ * @param {number} pageIdx
+ * @param {number} startIdx
+ * @param {Object} sqlParams
+ * @returns {Promise<{sql: string, isInterpolated: boolean}>}
+ */
+async function buildPageQuery(pageIdx, startIdx, sqlParams) {
+ if (pageIdx === 0) {
+ return { sql: await loadSql('logs', sqlParams), isInterpolated: false };
+ }
- let html = '';
- for (let i = 0; i < data.length; i += 1) {
- const rowIdx = existingRows + i;
- html += buildLogRowHtml({
- row: data[i], columns: fullColumns, rowIdx, pinned,
- });
+ const cursor = findCachedCursor(pageIdx);
+ if (cursor && TIMESTAMP_RE.test(cursor)) {
+ return { sql: await loadSql('logs-more', { ...sqlParams, cursor }), isInterpolated: false };
}
- tbody.insertAdjacentHTML('beforeend', html);
+ const total = virtualTable ? virtualTable.totalRows : PAGE_SIZE * 10;
+ const interpolatedCursor = interpolateTimestamp(startIdx, total);
+ return { sql: await loadSql('logs-at', { ...sqlParams, cursor: interpolatedCursor }), isInterpolated: true };
+}
- updatePinnedOffsets(container, pinned);
+/**
+ * Check the page cache for data at the given index.
+ * Returns the cached rows, or null if a fresh fetch is needed.
+ */
+function getCachedRows(pageIdx, startIdx, count) {
+ if (!pageCache.has(pageIdx)) return null;
+ const page = pageCache.get(pageIdx);
+ const offset = startIdx - pageIdx * PAGE_SIZE;
+ if (offset < page.rows.length) {
+ return page.rows.slice(offset, offset + count);
+ }
+ // Page 0 may be a partial initial load — allow re-fetch
+ // Other pages: a short cache means end of data
+ return pageIdx === 0 ? null : [];
}
-export function renderLogsTable(data) {
- const container = logsView.querySelector('.logs-table-container');
+/**
+ * Adjust virtualTable totalRows after fetching a page.
+ * Only shrinks totalRows when a genuine short page indicates end-of-data.
+ * Never grows — the initial estimate from chart data is the upper bound.
+ */
+function adjustTotalRows(pageIdx, rowCount) {
+ if (!virtualTable) return;
+ if (rowCount < PAGE_SIZE) {
+ const actualTotal = pageIdx * PAGE_SIZE + rowCount;
+ if (actualTotal < virtualTable.totalRows) {
+ virtualTable.setTotalRows(actualTotal);
+ }
+ }
+ // Removed: growth path that caused scroll jumps by expanding totalRows
+}
- if (data.length === 0) {
- container.innerHTML = 'No logs matching current filters
';
- return;
+/**
+ * getData callback for VirtualTable (unused while bucket-row table is active).
+ * Fetches a page of log rows from ClickHouse using cursor-based pagination.
+ */
+// eslint-disable-next-line no-unused-vars -- kept for future VirtualTable re-enablement
+async function getData(startIdx, count) {
+ const pageIdx = Math.floor(startIdx / PAGE_SIZE);
+
+ const cached = getCachedRows(pageIdx, startIdx, count);
+ if (cached !== null) return cached;
+
+ const sqlParams = {
+ database: DATABASE,
+ table: getTable(),
+ columns: buildLogColumnsSql(state.pinnedColumns),
+ timeFilter: getTimeFilter(),
+ hostFilter: getHostFilter(),
+ facetFilters: getFacetFilters(),
+ additionalWhereClause: state.additionalWhereClause,
+ pageSize: String(PAGE_SIZE),
+ };
+
+ const { sql, isInterpolated } = await buildPageQuery(pageIdx, startIdx, sqlParams);
+
+ try {
+ const result = await query(sql);
+ const rows = result.data;
+ const cursor = rows.length > 0 ? rows[rows.length - 1].timestamp : null;
+ pageCache.set(pageIdx, { rows, cursor });
+
+ if (!isInterpolated) {
+ adjustTotalRows(pageIdx, rows.length);
+ }
+
+ // Update columns on first data load
+ if (rows.length > 0 && currentColumns.length === 0) {
+ currentColumns = getLogColumns(Object.keys(rows[0]));
+ if (virtualTable) {
+ virtualTable.setColumns(buildVirtualColumns(currentColumns));
+ }
+ }
+
+ // Also update logsData on state for backwards compat with detail modal
+ if (pageIdx === 0) {
+ state.logsData = rows;
+ }
+
+ const offset = startIdx - pageIdx * PAGE_SIZE;
+ return rows.slice(offset, offset + count);
+ } catch (err) {
+ if (!isAbortError(err)) {
+ // eslint-disable-next-line no-console
+ console.error('getData error:', err);
+ }
+ return [];
}
+}
- // Get all column names from first row
- const allColumns = Object.keys(data[0]);
+/**
+ * Destroy the current virtual table if it exists.
+ */
+function destroyVirtualTable() {
+ if (virtualTable) {
+ virtualTable.destroy();
+ virtualTable = null;
+ }
+}
- // Sort columns: pinned first, then preferred order, then the rest
- const pinned = state.pinnedColumns.filter((col) => allColumns.includes(col));
- const columns = getLogColumns(allColumns);
+// Bucket-row table state
+let bucketTableContainer = null;
+let bucketScrollHandler = null;
- // Calculate left offsets for sticky pinned columns
- const COL_WIDTH = 120;
- const pinnedOffsets = getApproxPinnedOffsets(pinned, COL_WIDTH);
+/**
+ * Compute bucket heights with head/tail split, scaling if total exceeds MAX_TOTAL_HEIGHT.
+ */
+export function computeBucketHeights(chartData) {
+ if (!chartData || chartData.length === 0) return { buckets: [], totalHeight: 0 };
+
+ const buckets = chartData.map((b) => {
+ const count = (parseInt(b.cnt_ok, 10) || 0)
+ + (parseInt(b.cnt_4xx, 10) || 0)
+ + (parseInt(b.cnt_5xx, 10) || 0);
+ const headCount = Math.min(count, 500);
+ const tailCount = Math.max(count - 500, 0);
+ return {
+ t: b.t, count, headCount, tailCount,
+ };
+ });
- let html = `
-
-
-
- ${buildLogTableHeaderHtml(columns, pinned, pinnedOffsets)}
-
-
-
- `;
+ // Calculate natural heights
+ let totalHeight = 0;
+ for (const b of buckets) {
+ b.headHeight = Math.max(b.headCount, 1) * ROW_HEIGHT;
+ b.tailHeight = b.tailCount * ROW_HEIGHT;
+ totalHeight += b.headHeight + b.tailHeight;
+ }
- for (let rowIdx = 0; rowIdx < data.length; rowIdx += 1) {
- html += buildLogRowHtml({
- row: data[rowIdx], columns, rowIdx, pinned, pinnedOffsets,
- });
+ // Scale proportionally if over cap
+ if (totalHeight > MAX_TOTAL_HEIGHT) {
+ const scale = MAX_TOTAL_HEIGHT / totalHeight;
+ totalHeight = 0;
+ for (const b of buckets) {
+ b.headHeight = Math.max(Math.round(b.headHeight * scale), ROW_HEIGHT);
+ b.tailHeight = b.tailCount > 0 ? Math.max(Math.round(b.tailHeight * scale), ROW_HEIGHT) : 0;
+ totalHeight += b.headHeight + b.tailHeight;
+ }
}
- html += '
';
- container.innerHTML = html;
+ return { buckets, totalHeight };
+}
+
+/** Sync the chart scrubber to the first visible bucket head row. */
+function syncBucketScrubber(scrollContainer) {
+ const rows = scrollContainer.querySelectorAll('tbody tr.bucket-head');
+ if (rows.length === 0) return;
- updatePinnedOffsets(container, pinned);
+ const { scrollTop } = scrollContainer;
+ const viewportBottom = scrollTop + scrollContainer.clientHeight;
+ let firstVisible = null;
+
+ for (const row of rows) {
+ const top = row.offsetTop;
+ const bottom = top + row.offsetHeight;
+ if (bottom > scrollTop && top < viewportBottom) {
+ if (!firstVisible) firstVisible = row;
+ }
+ // Optimization: stop if we've passed the viewport
+ if (top > viewportBottom) break;
+ }
+
+ if (firstVisible) {
+ const firstTs = firstVisible.id.replace('bucket-head-', '');
+ const firstDate = parseUTC(firstTs);
+ setScrubberPosition(firstDate);
+ }
}
-async function loadMoreLogs() {
- if (!pagination.canLoadMore()) return;
- pagination.loading = true;
- const requestContext = getRequestContext('dashboard');
- const { requestId, signal, scope } = requestContext;
- const isCurrent = () => isRequestCurrent(requestId, scope);
+/** Render the bucket-row table with head/tail split from chart data. */
+export function renderBucketTable(el, chartData) {
+ if (!chartData || chartData.length === 0) {
+ // eslint-disable-next-line no-param-reassign -- DOM manipulation
+ el.innerHTML = 'No chart data available for bucket table
';
+ return;
+ }
- const timeFilter = getTimeFilter();
- const hostFilter = getHostFilter();
- const facetFilters = getFacetFilters();
+ const { buckets } = computeBucketHeights(chartData);
- const sql = await loadSql('logs-more', {
- database: DATABASE,
- table: getTable(),
- timeFilter,
- hostFilter,
- facetFilters,
- additionalWhereClause: state.additionalWhereClause,
- pageSize: String(PAGE_SIZE),
- offset: String(pagination.offset),
- });
+ // Build column list and header from bucket-loader
+ const {
+ headerHtml, columns, numColumns, pinned, pinnedOffsets,
+ } = buildBucketHeader();
- try {
- const result = await query(sql, { signal });
- if (!isCurrent()) return;
- if (result.data.length > 0) {
- state.logsData = [...state.logsData, ...result.data];
- appendLogsRows(result.data);
+ // Build a lookup from timestamp to bucket metadata
+ const bucketMap = new Map();
+ for (const b of buckets) {
+ bucketMap.set(b.t, b);
+ }
+
+ let tbodyHtml = '';
+
+ // Reverse to newest-first (chart data is oldest-first)
+ for (let i = buckets.length - 1; i >= 0; i -= 1) {
+ const b = buckets[i];
+
+ // Head row (always present)
+ let headLabel;
+ if (b.tailCount > 0) {
+ headLabel = `500 of ${b.count.toLocaleString()} rows`;
+ } else {
+ headLabel = b.count === 1
+ ? '1 row'
+ : `${b.count.toLocaleString()} rows`;
}
- pagination.recordPage(result.data.length);
- } catch (err) {
- if (!isCurrent() || isAbortError(err)) return;
- // eslint-disable-next-line no-console
- console.error('Load more logs error:', err);
- } finally {
- if (isCurrent()) {
- pagination.loading = false;
+ tbodyHtml += '`
+ + `| ${headLabel} | `
+ + '
';
+
+ // Tail row (only when bucket has > 500 rows)
+ if (b.tailCount > 0) {
+ const tailLabel = `${b.tailCount.toLocaleString()} remaining rows`;
+ tbodyHtml += '`
+ + `| ${tailLabel} | `
+ + '
';
}
}
+
+ // eslint-disable-next-line no-param-reassign -- DOM manipulation
+ el.innerHTML = `
+ ${headerHtml}
+ ${tbodyHtml}
+
`;
+
+ bucketTableContainer = el;
+
+ // Set up scroll listener for scrubber sync
+ if (bucketScrollHandler) {
+ el.removeEventListener('scroll', bucketScrollHandler);
+ }
+ bucketScrollHandler = () => {
+ syncBucketScrubber(el);
+ };
+ el.addEventListener('scroll', bucketScrollHandler, { passive: true });
+
+ // Set up IntersectionObserver for lazy bucket data loading
+ setupBucketObserver(el, bucketMap, columns, pinned, pinnedOffsets);
}
-function handleLogsScroll() {
- // Only handle scroll when logs view is visible
- if (!state.showLogs) return;
+/**
+ * Clean up bucket table event listeners, observer, and in-flight fetches.
+ */
+function destroyBucketTable() {
+ teardownBucketLoader();
+ if (bucketTableContainer && bucketScrollHandler) {
+ bucketTableContainer.removeEventListener('scroll', bucketScrollHandler);
+ }
+ bucketScrollHandler = null;
+ bucketTableContainer = null;
+}
+
+/**
+ * Create or reconfigure the VirtualTable instance.
+ * Currently bypassed in favor of the bucket-row table approach.
+ */
+function ensureVirtualTable() {
+ const container = logsView.querySelector('.logs-table-container');
+ if (!container) return;
+
+ // Use bucket-row table when chart data is available
+ if (state.chartData && state.chartData.length > 0) {
+ destroyVirtualTable();
+ renderBucketTable(container, state.chartData);
+ return;
+ }
+
+ // Fallback: show loading state when chart data not yet available
+ container.innerHTML = 'Loading\u2026
';
+}
+
+// Re-render bucket table when chart data arrives after loadLogs() (race condition fix)
+export function tryRenderBucketTable() {
+ if (!state.showLogs || !logsView || !state.chartData?.length) return;
+ const container = logsView.querySelector('.logs-table-container');
+ if (!container || container.querySelector('.bucket-table')) return;
+ ensureVirtualTable();
+}
- const { scrollHeight } = document.documentElement;
- const scrollTop = window.scrollY;
- const clientHeight = window.innerHeight;
+// Scroll log table to the row closest to a given timestamp
+export function scrollLogsToTimestamp(timestamp) {
+ if (!state.showLogs) return;
+ const targetMs = timestamp instanceof Date ? timestamp.getTime() : timestamp;
+
+ // Bucket-row approach: find the closest bucket by timestamp
+ if (bucketTableContainer) {
+ const rows = bucketTableContainer.querySelectorAll('tbody tr.bucket-head');
+ let bestRow = null;
+ let bestDiff = Infinity;
+ for (const row of rows) {
+ const ts = row.id.replace('bucket-head-', '');
+ const diff = Math.abs(parseUTC(ts).getTime() - targetMs);
+ if (diff < bestDiff) {
+ bestDiff = diff;
+ bestRow = row;
+ }
+ }
+ if (bestRow) {
+ bestRow.scrollIntoView({ behavior: 'instant', block: 'center' });
+ }
+ return;
+ }
- // Load more when scrolled to last 50%
- const scrollPercent = (scrollTop + clientHeight) / scrollHeight;
- if (pagination.shouldTriggerLoad(scrollPercent, state.logsLoading)) {
- loadMoreLogs();
+ // Legacy VirtualTable fallback
+ if (virtualTable) {
+ virtualTable.scrollToTimestamp(targetMs, (row) => parseUTC(row.timestamp).getTime());
}
}
@@ -473,15 +821,22 @@ export function setLogsElements(view, toggleBtn, filtersViewEl) {
viewToggleBtn = toggleBtn;
filtersView = filtersViewEl;
- // Set up scroll listener for infinite scroll on window
- window.addEventListener('scroll', handleLogsScroll);
-
- // Set up click handler for copying row data
- setupLogRowClickHandler();
+ // Set up chart collapse toggle
+ initChartCollapseToggle();
}
// Register callback for pinned column changes
-setOnPinnedColumnsChange(renderLogsTable);
+setOnPinnedColumnsChange(() => {
+ if (!virtualTable || currentColumns.length === 0) return;
+
+ // Rebuild column list with new pinned state
+ // Re-derive from current data keys if available
+ const page0 = pageCache.get(0);
+ if (page0 && page0.rows.length > 0) {
+ currentColumns = getLogColumns(Object.keys(page0.rows[0]));
+ }
+ virtualTable.setColumns(buildVirtualColumns(currentColumns));
+});
// Callback for redrawing chart when switching views
let onShowFiltersView = null;
@@ -490,22 +845,42 @@ export function setOnShowFiltersView(callback) {
onShowFiltersView = callback;
}
-export function toggleLogsView(saveStateToURL) {
- state.showLogs = !state.showLogs;
- if (state.showLogs) {
- logsView.classList.add('visible');
- filtersView.classList.remove('visible');
- viewToggleBtn.querySelector('.menu-item-label').textContent = 'View Filters';
- } else {
- logsView.classList.remove('visible');
- filtersView.classList.add('visible');
- viewToggleBtn.querySelector('.menu-item-label').textContent = 'View Logs';
- // Redraw chart after view becomes visible
- if (onShowFiltersView) {
- requestAnimationFrame(() => onShowFiltersView());
- }
+/**
+ * Build a cumulative row-count index from chart data buckets.
+ * Each bucket has { t, cnt_ok, cnt_4xx, cnt_5xx } (strings from ClickHouse).
+ * Returns { cumulative: [{timestamp, cumRows, count}], totalRows } or null.
+ * Buckets are ordered oldest→newest (ascending time), matching chart data order.
+ * @param {Array} chartData
+ * @returns {{cumulative: Array, totalRows: number}|null}
+ */
+function buildBucketIndex(chartData) {
+ if (!chartData || chartData.length === 0) return null;
+ const cumulative = [];
+ let total = 0;
+ for (const bucket of chartData) {
+ const count = (parseInt(bucket.cnt_ok, 10) || 0)
+ + (parseInt(bucket.cnt_4xx, 10) || 0)
+ + (parseInt(bucket.cnt_5xx, 10) || 0);
+ total += count;
+ cumulative.push({ timestamp: bucket.t, cumRows: total, count });
}
- saveStateToURL();
+ return { cumulative, totalRows: total };
+}
+
+/**
+ * Estimate total rows from chart data bucket counts (unused while bucket-row table is active).
+ * @returns {number}
+ */
+// eslint-disable-next-line no-unused-vars -- kept for future VirtualTable re-enablement
+function estimateTotalRows() {
+ if (!state.chartData || state.chartData.length === 0) return 0;
+ let total = 0;
+ for (const b of state.chartData) {
+ total += (parseInt(b.cnt_ok, 10) || 0)
+ + (parseInt(b.cnt_4xx, 10) || 0)
+ + (parseInt(b.cnt_5xx, 10) || 0);
+ }
+ return total;
}
export async function loadLogs(requestContext = getRequestContext('dashboard')) {
@@ -515,13 +890,18 @@ export async function loadLogs(requestContext = getRequestContext('dashboard'))
state.logsLoading = true;
state.logsReady = false;
- // Reset pagination state
- pagination.reset();
+ // Reset page cache and bucket index
+ pageCache.clear();
+ bucketIndex = null;
+ currentColumns = [];
// Apply blur effect while loading
const container = logsView.querySelector('.logs-table-container');
container.classList.add('updating');
+ // Render bucket table from chart data (available before log data)
+ ensureVirtualTable();
+
const timeFilter = getTimeFilter();
const hostFilter = getHostFilter();
const facetFilters = getFacetFilters();
@@ -529,20 +909,40 @@ export async function loadLogs(requestContext = getRequestContext('dashboard'))
const sql = await loadSql('logs', {
database: DATABASE,
table: getTable(),
+ columns: buildLogColumnsSql(state.pinnedColumns),
timeFilter,
hostFilter,
facetFilters,
additionalWhereClause: state.additionalWhereClause,
- pageSize: String(PAGE_SIZE),
+ pageSize: String(INITIAL_PAGE_SIZE),
});
try {
const result = await query(sql, { signal });
if (!isCurrent()) return;
- state.logsData = result.data;
- renderLogsTable(result.data);
+
+ const rows = result.data;
+ state.logsData = rows;
state.logsReady = true;
- pagination.recordPage(result.data.length);
+
+ if (rows.length === 0 && (!state.chartData || state.chartData.length === 0)) {
+ container.innerHTML = 'No logs matching current filters
';
+ destroyBucketTable();
+ destroyVirtualTable();
+ return;
+ }
+
+ // Populate initial page cache (for detail modals)
+ const cursor = rows.length > 0 ? rows[rows.length - 1].timestamp : null;
+ pageCache.set(0, { rows, cursor });
+
+ // Set columns from data
+ if (rows.length > 0) {
+ currentColumns = getLogColumns(Object.keys(rows[0]));
+ }
+
+ // Build bucket index from chart data
+ bucketIndex = buildBucketIndex(state.chartData);
} catch (err) {
if (!isCurrent() || isAbortError(err)) return;
// eslint-disable-next-line no-console
@@ -552,6 +952,48 @@ export async function loadLogs(requestContext = getRequestContext('dashboard'))
if (isCurrent()) {
state.logsLoading = false;
container.classList.remove('updating');
+ // Chart data may have arrived while the logs query was in-flight
+ tryRenderBucketTable();
+ }
+ }
+}
+
+export function toggleLogsView(saveStateToURL, scrollToTimestamp) {
+ state.showLogs = !state.showLogs;
+ const dashboardContent = document.getElementById('dashboardContent');
+ if (state.showLogs) {
+ logsView.classList.add('visible');
+ filtersView.classList.remove('visible');
+ viewToggleBtn.querySelector('.menu-item-label').textContent = 'View Filters';
+ dashboardContent.classList.add('logs-active');
+ // Restore collapse state from localStorage
+ const chartSection = document.querySelector('.chart-section');
+ if (chartSection && localStorage.getItem('chartCollapsed') === 'true') {
+ chartSection.classList.add('chart-collapsed');
+ updateCollapseToggleLabel();
}
+ // Render bucket table or trigger fresh load
+ ensureVirtualTable();
+ if (state.logsReady && pageCache.size > 0) {
+ bucketIndex = buildBucketIndex(state.chartData);
+ if (scrollToTimestamp) {
+ scrollLogsToTimestamp(scrollToTimestamp);
+ }
+ } else {
+ loadLogs();
+ }
+ } else {
+ logsView.classList.remove('visible');
+ filtersView.classList.add('visible');
+ viewToggleBtn.querySelector('.menu-item-label').textContent = 'View Logs';
+ dashboardContent.classList.remove('logs-active');
+ // Redraw chart after view becomes visible
+ if (onShowFiltersView) {
+ requestAnimationFrame(() => onShowFiltersView());
+ }
+ // Clean up when leaving logs view
+ destroyBucketTable();
+ destroyVirtualTable();
}
+ saveStateToURL();
}
diff --git a/js/pagination.js b/js/pagination.js
index ab1954e..e7f60bd 100644
--- a/js/pagination.js
+++ b/js/pagination.js
@@ -11,28 +11,32 @@
*/
export const PAGE_SIZE = 500;
+export const INITIAL_PAGE_SIZE = 100;
export class PaginationState {
constructor(pageSize = PAGE_SIZE) {
- this.offset = 0;
+ this.cursor = null;
this.hasMore = true;
this.loading = false;
this.pageSize = pageSize;
}
reset() {
- this.offset = 0;
+ this.cursor = null;
this.hasMore = true;
this.loading = false;
}
- recordPage(resultLength) {
- this.offset += resultLength;
+ recordPage(rows) {
+ const resultLength = rows.length;
this.hasMore = resultLength === this.pageSize;
+ if (resultLength > 0) {
+ this.cursor = rows[resultLength - 1].timestamp;
+ }
}
canLoadMore() {
- return this.hasMore && !this.loading;
+ return this.hasMore && !this.loading && this.cursor != null;
}
shouldTriggerLoad(scrollPercent, globalLoading) {
diff --git a/js/pagination.test.js b/js/pagination.test.js
index f153aeb..611aca7 100644
--- a/js/pagination.test.js
+++ b/js/pagination.test.js
@@ -22,7 +22,7 @@ describe('PaginationState', () => {
describe('constructor', () => {
it('initializes with default page size', () => {
const ps = new PaginationState();
- assert.strictEqual(ps.offset, 0);
+ assert.strictEqual(ps.cursor, null);
assert.strictEqual(ps.hasMore, true);
assert.strictEqual(ps.loading, false);
assert.strictEqual(ps.pageSize, PAGE_SIZE);
@@ -35,22 +35,22 @@ describe('PaginationState', () => {
});
describe('reset', () => {
- it('resets offset, hasMore, and loading', () => {
+ it('resets cursor, hasMore, and loading', () => {
const ps = new PaginationState();
- ps.offset = 250;
+ ps.cursor = '2025-01-15 10:30:00.123';
ps.hasMore = false;
ps.loading = true;
ps.reset();
- assert.strictEqual(ps.offset, 0);
+ assert.strictEqual(ps.cursor, null);
assert.strictEqual(ps.hasMore, true);
assert.strictEqual(ps.loading, false);
});
it('preserves pageSize', () => {
const ps = new PaginationState(100);
- ps.offset = 50;
+ ps.cursor = '2025-01-15 10:30:00.123';
ps.reset();
@@ -60,55 +60,98 @@ describe('PaginationState', () => {
describe('recordPage', () => {
it('sets hasMore=true when result is a full page', () => {
+ const rows = Array.from({ length: PAGE_SIZE }, (_, i) => ({
+ timestamp: `2025-01-15 10:30:00.${String(i).padStart(3, '0')}`,
+ }));
const ps = new PaginationState();
- ps.recordPage(PAGE_SIZE);
+ ps.recordPage(rows);
- assert.strictEqual(ps.offset, PAGE_SIZE);
assert.strictEqual(ps.hasMore, true);
});
it('sets hasMore=false when result is smaller than page size', () => {
+ const rows = [
+ { timestamp: '2025-01-15 10:30:00.100' },
+ { timestamp: '2025-01-15 10:30:00.050' },
+ { timestamp: '2025-01-15 10:30:00.001' },
+ ];
const ps = new PaginationState();
- ps.recordPage(123);
+ ps.recordPage(rows);
- assert.strictEqual(ps.offset, 123);
assert.strictEqual(ps.hasMore, false);
});
it('sets hasMore=false when result is empty', () => {
const ps = new PaginationState();
- ps.recordPage(0);
+ ps.recordPage([]);
- assert.strictEqual(ps.offset, 0);
assert.strictEqual(ps.hasMore, false);
});
- it('accumulates offset across multiple pages', () => {
+ it('extracts cursor from last row timestamp', () => {
+ const rows = [
+ { timestamp: '2025-01-15 10:30:00.300' },
+ { timestamp: '2025-01-15 10:30:00.200' },
+ { timestamp: '2025-01-15 10:30:00.100' },
+ ];
const ps = new PaginationState();
- ps.recordPage(PAGE_SIZE);
- ps.recordPage(PAGE_SIZE);
- ps.recordPage(200);
+ ps.recordPage(rows);
- assert.strictEqual(ps.offset, PAGE_SIZE * 2 + 200);
+ assert.strictEqual(ps.cursor, '2025-01-15 10:30:00.100');
+ });
+
+ it('does not update cursor when result is empty', () => {
+ const ps = new PaginationState();
+ ps.cursor = '2025-01-15 10:30:00.100';
+ ps.recordPage([]);
+
+ assert.strictEqual(ps.cursor, '2025-01-15 10:30:00.100');
+ });
+
+ it('updates cursor across multiple pages', () => {
+ const ps = new PaginationState(2);
+
+ ps.recordPage([
+ { timestamp: '2025-01-15 10:30:00.300' },
+ { timestamp: '2025-01-15 10:30:00.200' },
+ ]);
+ assert.strictEqual(ps.cursor, '2025-01-15 10:30:00.200');
+ assert.strictEqual(ps.hasMore, true);
+
+ ps.recordPage([
+ { timestamp: '2025-01-15 10:30:00.100' },
+ ]);
+ assert.strictEqual(ps.cursor, '2025-01-15 10:30:00.100');
assert.strictEqual(ps.hasMore, false);
});
it('uses custom page size for hasMore check', () => {
- const ps = new PaginationState(10);
- ps.recordPage(10);
+ const ps = new PaginationState(2);
+ ps.recordPage([
+ { timestamp: '2025-01-15 10:30:00.200' },
+ { timestamp: '2025-01-15 10:30:00.100' },
+ ]);
assert.strictEqual(ps.hasMore, true);
- ps.recordPage(5);
+ ps.recordPage([
+ { timestamp: '2025-01-15 10:30:00.050' },
+ ]);
assert.strictEqual(ps.hasMore, false);
});
});
describe('canLoadMore', () => {
- it('returns true when hasMore and not loading', () => {
+ it('returns true when hasMore, not loading, and cursor is set', () => {
const ps = new PaginationState();
+ ps.cursor = '2025-01-15 10:30:00.000';
assert.strictEqual(ps.canLoadMore(), true);
});
+ it('returns false when cursor is null', () => {
+ const ps = new PaginationState();
+ assert.strictEqual(ps.canLoadMore(), false);
+ });
+
it('returns false when loading', () => {
const ps = new PaginationState();
ps.loading = true;
@@ -132,6 +175,7 @@ describe('PaginationState', () => {
describe('shouldTriggerLoad', () => {
it('triggers when scrolled past 50% and can load more', () => {
const ps = new PaginationState();
+ ps.cursor = '2025-01-15 10:30:00.000';
assert.strictEqual(ps.shouldTriggerLoad(0.6, false), true);
});
diff --git a/js/request-context.test.js b/js/request-context.test.js
index dae6af0..71bf6b8 100644
--- a/js/request-context.test.js
+++ b/js/request-context.test.js
@@ -53,6 +53,21 @@ describe('request-context', () => {
}
});
+ it('returns already-aborted signal in fallback when input is pre-aborted', () => {
+ const originalAny = AbortSignal.any;
+ AbortSignal.any = undefined;
+ try {
+ const controllerA = new AbortController();
+ controllerA.abort();
+ const controllerB = new AbortController();
+ const merged = mergeAbortSignals([controllerA.signal, controllerB.signal]);
+
+ assert.isTrue(merged.aborted);
+ } finally {
+ AbortSignal.any = originalAny;
+ }
+ });
+
it('returns undefined for empty signal list', () => {
const merged = mergeAbortSignals([]);
assert.isUndefined(merged);
diff --git a/js/sql-loader.js b/js/sql-loader.js
index 5e40c99..79e9990 100644
--- a/js/sql-loader.js
+++ b/js/sql-loader.js
@@ -62,6 +62,7 @@ const ALL_TEMPLATES = [
'time-series',
'logs',
'logs-more',
+ 'logs-at',
'breakdown',
'breakdown-facet',
'breakdown-missing',
@@ -73,6 +74,7 @@ const ALL_TEMPLATES = [
'facet-search-pattern',
'investigate-facet',
'investigate-selection',
+ 'log-detail',
];
/**
diff --git a/js/url-state.js b/js/url-state.js
index b2ead09..b4e0074 100644
--- a/js/url-state.js
+++ b/js/url-state.js
@@ -228,6 +228,14 @@ export function syncUIFromState() {
elements.logsView.classList.add('visible');
elements.filtersView.classList.remove('visible');
elements.viewToggleBtn.querySelector('.menu-item-label').textContent = 'View Filters';
+ // Activate flex layout for logs view
+ const dc = document.getElementById('dashboardContent');
+ if (dc) dc.classList.add('logs-active');
+ // Restore chart collapse state from localStorage
+ const chartSection = document.querySelector('.chart-section');
+ if (chartSection && localStorage.getItem('chartCollapsed') === 'true') {
+ chartSection.classList.add('chart-collapsed');
+ }
} else {
elements.logsView.classList.remove('visible');
elements.filtersView.classList.add('visible');
diff --git a/js/url-state.test.js b/js/url-state.test.js
index 913bc42..406eebd 100644
--- a/js/url-state.test.js
+++ b/js/url-state.test.js
@@ -697,6 +697,7 @@ describe('syncUIFromState', () => {
let mockElements;
let titleEl;
let activeFiltersEl;
+ let dashboardContentEl;
beforeEach(() => {
resetState();
@@ -746,11 +747,17 @@ describe('syncUIFromState', () => {
activeFiltersEl = document.createElement('div');
activeFiltersEl.id = 'activeFilters';
document.body.appendChild(activeFiltersEl);
+
+ // Create dashboardContent element for logs-active class
+ dashboardContentEl = document.createElement('div');
+ dashboardContentEl.id = 'dashboardContent';
+ document.body.appendChild(dashboardContentEl);
});
afterEach(() => {
titleEl.remove();
activeFiltersEl.remove();
+ dashboardContentEl.remove();
window.history.replaceState({}, '', ORIGINAL_PATH);
});
@@ -806,6 +813,33 @@ describe('syncUIFromState', () => {
);
});
+ it('adds logs-active class to dashboardContent when showLogs is true', () => {
+ state.showLogs = true;
+ syncUIFromState();
+ assert.isTrue(dashboardContentEl.classList.contains('logs-active'));
+ });
+
+ it('does not add logs-active class when showLogs is false', () => {
+ state.showLogs = false;
+ syncUIFromState();
+ assert.isFalse(dashboardContentEl.classList.contains('logs-active'));
+ });
+
+ it('restores chart collapse state from localStorage when showLogs is true', () => {
+ const chartSection = document.createElement('div');
+ chartSection.classList.add('chart-section');
+ document.body.appendChild(chartSection);
+ localStorage.setItem('chartCollapsed', 'true');
+ try {
+ state.showLogs = true;
+ syncUIFromState();
+ assert.isTrue(chartSection.classList.contains('chart-collapsed'));
+ } finally {
+ chartSection.remove();
+ localStorage.removeItem('chartCollapsed');
+ }
+ });
+
it('shows filters view when showLogs is false', () => {
state.showLogs = false;
syncUIFromState();
diff --git a/js/virtual-table.js b/js/virtual-table.js
new file mode 100644
index 0000000..ed86084
--- /dev/null
+++ b/js/virtual-table.js
@@ -0,0 +1,358 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+const DEFAULT_ROW_HEIGHT = 28;
+const DEFAULT_OVERSCAN = 10;
+const MAX_CACHED_PAGES = 20;
+const MAX_SCROLL_HEIGHT = 1_000_000;
+
+function getPinnedOffsets(columns) {
+ const offsets = new Map();
+ let left = 0;
+ for (const col of columns) {
+ if (col.pinned) {
+ offsets.set(col.key, left);
+ left += col.width || 120;
+ }
+ }
+ return offsets;
+}
+
+function makeCellStyle(col, offsets) {
+ if (!col.pinned) return '';
+ const left = offsets.get(col.key);
+ return ` style="position:sticky;left:${left}px;z-index:1"`;
+}
+
+function findInCache(cache, idx) {
+ for (const page of cache.values()) {
+ const offset = idx - page.startIdx;
+ if (offset >= 0 && offset < page.rows.length) {
+ return page.rows[offset];
+ }
+ }
+ return null;
+}
+
+/**
+ * Minimal virtual-scrolling table. Renders only visible rows into a
+ * standard HTML , backed by an async getData callback.
+ */
+export class VirtualTable {
+ /**
+ * @param {Object} opts
+ * @param {HTMLElement} opts.container
+ * @param {number} [opts.rowHeight=28]
+ * @param {Array<{key:string, label:string, pinned?:boolean, width?:number}>} opts.columns
+ * @param {(start:number, count:number) => Promise} opts.getData
+ * @param {(col:Object, value:unknown, row:Object) => string} opts.renderCell
+ * @param {(first:number, last:number) => void} [opts.onVisibleRangeChange]
+ * @param {(idx:number, row:Object) => void} [opts.onRowClick]
+ */
+ constructor({
+ container, rowHeight, columns, getData, renderCell,
+ onVisibleRangeChange, onRowClick,
+ }) {
+ this.container = container;
+ this.rowHeight = rowHeight || DEFAULT_ROW_HEIGHT;
+ this.columns = columns;
+ this.getDataFn = getData;
+ this.renderCellFn = renderCell;
+ this.onRangeChange = onVisibleRangeChange || null;
+ this.onRowClickFn = onRowClick || null;
+
+ this.totalRows = 0;
+ this._scrollScale = 1;
+ this.cache = new Map();
+ this.pending = new Set();
+ this.rafId = null;
+ this.lastRange = null;
+
+ this.initDom();
+ this.initEvents();
+ }
+
+ initDom() {
+ this.container.style.overflowY = 'auto';
+
+ this.spacerTop = document.createElement('div');
+ this.spacerTop.className = 'vt-spacer-top';
+
+ this.table = document.createElement('table');
+ this.table.className = 'logs-table';
+
+ this.colgroup = document.createElement('colgroup');
+ this.table.appendChild(this.colgroup);
+
+ this.thead = document.createElement('thead');
+ this.tbody = document.createElement('tbody');
+ this.table.appendChild(this.thead);
+ this.table.appendChild(this.tbody);
+
+ this.spacerBottom = document.createElement('div');
+ this.spacerBottom.className = 'vt-spacer-bottom';
+
+ this.container.appendChild(this.spacerTop);
+ this.container.appendChild(this.table);
+ this.container.appendChild(this.spacerBottom);
+
+ this.updateHeader();
+ }
+
+ updateHeader() {
+ // Build colgroup for deterministic column widths
+ this.colgroup.innerHTML = '';
+ let totalWidth = 0;
+ for (const col of this.columns) {
+ const colEl = document.createElement('col');
+ const w = col.width || 120;
+ colEl.style.width = `${w}px`;
+ totalWidth += w;
+ this.colgroup.appendChild(colEl);
+ }
+
+ // Set explicit table width so it can exceed container (enables horizontal scroll)
+ if (totalWidth > 0) {
+ this.table.style.width = `${totalWidth}px`;
+ }
+
+ const tr = document.createElement('tr');
+ let pinnedLeft = 0;
+ for (const col of this.columns) {
+ const th = document.createElement('th');
+ th.textContent = col.label || col.key;
+ th.title = col.key;
+ if (col.pinned) {
+ th.style.position = 'sticky';
+ th.style.left = `${pinnedLeft}px`;
+ th.style.zIndex = '2';
+ pinnedLeft += col.width || 120;
+ }
+ tr.appendChild(th);
+ }
+ this.thead.innerHTML = '';
+ this.thead.appendChild(tr);
+ }
+
+ initEvents() {
+ this.scrollHandler = () => {
+ if (this.rafId) return;
+ this.rafId = requestAnimationFrame(() => {
+ this.rafId = null;
+ this.renderRows();
+ });
+ };
+ this.container.addEventListener(
+ 'scroll',
+ this.scrollHandler,
+ { passive: true },
+ );
+
+ if (this.onRowClickFn) {
+ this.clickHandler = (e) => {
+ // Let data-action clicks (e.g. add-filter) bubble to global handler
+ if (e.target.closest('[data-action]')) return;
+ const tr = e.target.closest('tr[data-row-idx]');
+ if (!tr) return;
+ const idx = parseInt(tr.dataset.rowIdx, 10);
+ const row = findInCache(this.cache, idx);
+ if (row) this.onRowClickFn(idx, row);
+ };
+ this.tbody.addEventListener('click', this.clickHandler);
+ }
+ }
+
+ getTotalScrollHeight() {
+ const natural = this.totalRows * this.rowHeight;
+ return natural > MAX_SCROLL_HEIGHT ? MAX_SCROLL_HEIGHT : natural;
+ }
+
+ computeRange() {
+ const { scrollTop } = this.container;
+ const viewHeight = this.container.clientHeight;
+ const effectiveRowHeight = this.rowHeight * this._scrollScale;
+ const start = Math.max(
+ 0,
+ Math.floor(scrollTop / effectiveRowHeight) - DEFAULT_OVERSCAN,
+ );
+ const visible = Math.ceil(viewHeight / effectiveRowHeight);
+ const end = Math.min(
+ this.totalRows,
+ start + visible + DEFAULT_OVERSCAN * 2,
+ );
+ return { start, end };
+ }
+
+ renderRows() {
+ if (this.totalRows === 0) {
+ this.spacerTop.style.height = '0px';
+ this.spacerBottom.style.height = '0px';
+ this.tbody.innerHTML = '';
+ this.lastRange = null;
+ return;
+ }
+
+ const { start, end } = this.computeRange();
+
+ if (
+ this.lastRange
+ && this.lastRange.start === start
+ && this.lastRange.end === end
+ ) return;
+ this.lastRange = { start, end };
+
+ const offsets = getPinnedOffsets(this.columns);
+ let html = '';
+ let fetchStart = -1;
+
+ for (let i = start; i < end; i += 1) {
+ const row = findInCache(this.cache, i);
+
+ if (row) {
+ html += ``;
+ for (const col of this.columns) {
+ const sty = makeCellStyle(col, offsets);
+ html += `${this.renderCellFn(col, row[col.key], row)}`;
+ }
+ html += '
';
+ } else {
+ html += ``;
+ for (const col of this.columns) {
+ html += ` `;
+ }
+ html += '
';
+ if (fetchStart === -1) fetchStart = i;
+ }
+ }
+
+ const effectiveRowHeight = this.rowHeight * this._scrollScale;
+ this.spacerTop.style.height = `${start * effectiveRowHeight}px`;
+ this.spacerBottom.style.height = `${Math.max(0, (this.totalRows - end) * effectiveRowHeight)}px`;
+ this.tbody.innerHTML = html;
+
+ if (fetchStart !== -1) {
+ this.fetchRange(fetchStart, end);
+ }
+
+ if (this.onRangeChange) {
+ const visStart = Math.max(start + DEFAULT_OVERSCAN, 0);
+ const visEnd = Math.min(end - DEFAULT_OVERSCAN, this.totalRows);
+ this.onRangeChange(visStart, visEnd);
+ }
+ }
+
+ async fetchRange(startIdx, endIdx) {
+ const count = endIdx - startIdx;
+ if (this.pending.has(startIdx)) return;
+ this.pending.add(startIdx);
+
+ try {
+ const rows = await this.getDataFn(startIdx, count);
+ this.cache.set(startIdx, { startIdx, rows });
+ this.evictDistantPages();
+ this.lastRange = null;
+ this.renderRows();
+ } finally {
+ this.pending.delete(startIdx);
+ }
+ }
+
+ evictDistantPages() {
+ if (this.cache.size <= MAX_CACHED_PAGES) return;
+ const effectiveRowHeight = this.rowHeight * this._scrollScale;
+ const center = this.container.scrollTop / effectiveRowHeight;
+ const sorted = [...this.cache.entries()]
+ .map(([key, page]) => ({
+ key,
+ dist: Math.abs(page.startIdx - center),
+ }))
+ .sort((a, b) => b.dist - a.dist);
+
+ while (this.cache.size > MAX_CACHED_PAGES) {
+ this.cache.delete(sorted.shift().key);
+ }
+ }
+
+ /* ---- Public API ---- */
+
+ setTotalRows(n) {
+ this.totalRows = n;
+ const natural = n * this.rowHeight;
+ this._scrollScale = natural > MAX_SCROLL_HEIGHT
+ ? MAX_SCROLL_HEIGHT / natural
+ : 1;
+ this.lastRange = null;
+ this.renderRows();
+ }
+
+ setColumns(cols) {
+ this.columns = cols;
+ this.updateHeader();
+ this.lastRange = null;
+ this.renderRows();
+ }
+
+ scrollToRow(index) {
+ const effectiveRowHeight = this.rowHeight * this._scrollScale;
+ this.container.scrollTop = Math.max(0, index * effectiveRowHeight);
+ }
+
+ scrollToTimestamp(ts, getTimestamp) {
+ if (this.totalRows === 0) return;
+ const target = typeof ts === 'number' ? ts : ts.getTime();
+ let lo = 0;
+ let hi = this.totalRows - 1;
+ let best = 0;
+ let bestDiff = Infinity;
+
+ while (lo <= hi) {
+ const mid = Math.floor((lo + hi) / 2);
+ const row = findInCache(this.cache, mid);
+ if (!row) break;
+ const rowTs = getTimestamp(row);
+ const diff = Math.abs(rowTs - target);
+ if (diff < bestDiff) {
+ bestDiff = diff;
+ best = mid;
+ }
+ if (rowTs > target) lo = mid + 1;
+ else hi = mid - 1;
+ }
+ this.scrollToRow(best);
+ }
+
+ invalidate() {
+ this.lastRange = null;
+ this.renderRows();
+ }
+
+ seedCache(startIdx, rows) {
+ this.cache.set(startIdx, { startIdx, rows });
+ }
+
+ clearCache() {
+ this.cache.clear();
+ this.pending.clear();
+ this.spacerTop.style.height = '0px';
+ this.spacerBottom.style.height = '0px';
+ }
+
+ destroy() {
+ this.container.removeEventListener('scroll', this.scrollHandler);
+ if (this.clickHandler) {
+ this.tbody.removeEventListener('click', this.clickHandler);
+ }
+ if (this.rafId) cancelAnimationFrame(this.rafId);
+ this.cache.clear();
+ this.container.innerHTML = '';
+ }
+}
diff --git a/js/virtual-table.test.js b/js/virtual-table.test.js
new file mode 100644
index 0000000..f7930f9
--- /dev/null
+++ b/js/virtual-table.test.js
@@ -0,0 +1,684 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { assert } from 'chai';
+import { VirtualTable } from './virtual-table.js';
+
+function makeContainer(height = 280) {
+ const el = document.createElement('div');
+ // Simulate a sized container
+ Object.defineProperty(el, 'clientHeight', { value: height, writable: true });
+ Object.defineProperty(el, 'scrollTop', { value: 0, writable: true });
+ document.body.appendChild(el);
+ return el;
+}
+
+function makeColumns() {
+ return [
+ { key: 'timestamp', label: 'Time', width: 180 },
+ { key: 'status', label: 'Status', width: 60 },
+ ];
+}
+
+function makeGetData(rows) {
+ const calls = [];
+ const fn = async (startIdx, count) => {
+ calls.push({ startIdx, count });
+ return rows.slice(startIdx, startIdx + count);
+ };
+ fn.calls = calls;
+ return fn;
+}
+
+function renderCell(col, value) {
+ return value != null ? String(value) : '';
+}
+
+describe('VirtualTable', () => {
+ let container;
+ let vt;
+
+ afterEach(() => {
+ if (vt) vt.destroy();
+ if (container && container.parentNode) container.parentNode.removeChild(container);
+ });
+
+ describe('constructor', () => {
+ it('creates table elements in the container', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ assert.ok(container.querySelector('table'));
+ assert.ok(container.querySelector('thead'));
+ assert.ok(container.querySelector('tbody'));
+ });
+
+ it('renders column headers', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ const ths = container.querySelectorAll('thead th');
+ assert.strictEqual(ths.length, 2);
+ assert.strictEqual(ths[0].textContent, 'Time');
+ assert.strictEqual(ths[1].textContent, 'Status');
+ });
+
+ it('sets container overflow-y to auto', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ assert.strictEqual(container.style.overflowY, 'auto');
+ });
+ });
+
+ describe('setTotalRows', () => {
+ it('sets spacer heights to create virtual scroll space', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1000);
+ const topH = parseInt(vt.spacerTop.style.height, 10);
+ const bottomH = parseInt(vt.spacerBottom.style.height, 10);
+ const renderedRows = vt.tbody.querySelectorAll('tr').length;
+ // Total virtual height = topH + renderedRows*rowHeight + bottomH
+ assert.strictEqual(topH + renderedRows * 28 + bottomH, 1000 * 28);
+ });
+
+ it('uses custom row height', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell, rowHeight: 40,
+ });
+ vt.setTotalRows(500);
+ const topH = parseInt(vt.spacerTop.style.height, 10);
+ const bottomH = parseInt(vt.spacerBottom.style.height, 10);
+ const renderedRows = vt.tbody.querySelectorAll('tr').length;
+ assert.strictEqual(topH + renderedRows * 40 + bottomH, 500 * 40);
+ });
+ });
+
+ describe('row index calculation', () => {
+ it('calculates start index from scroll position', () => {
+ container = makeContainer(280); // 10 visible rows at 28px
+ const getData = makeGetData(Array.from({ length: 100 }, (_, i) => ({
+ timestamp: `2026-01-01 00:00:00.${String(i).padStart(3, '0')}`,
+ status: 200,
+ })));
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(100);
+
+ // Scroll to row 20 (scrollTop = 20 * 28 = 560)
+ Object.defineProperty(container, 'scrollTop', { value: 560, writable: true });
+ vt.invalidate();
+
+ const rows = container.querySelectorAll('tbody tr');
+ assert.ok(rows.length > 0, 'should render some rows');
+ // First row should be around index 10 (20 - overscan of 10)
+ const firstIdx = parseInt(rows[0].dataset.rowIdx, 10);
+ assert.strictEqual(firstIdx, 10, 'first rendered row should be start index minus overscan');
+ });
+ });
+
+ describe('visible range with overscan', () => {
+ it('renders overscan rows above and below viewport', () => {
+ container = makeContainer(280);
+ const totalRows = 200;
+ const allRows = Array.from({ length: totalRows }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ const getData = makeGetData(allRows);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(totalRows);
+
+ // Scroll to middle
+ Object.defineProperty(container, 'scrollTop', { value: 100 * 28, writable: true });
+ vt.invalidate();
+
+ const rows = container.querySelectorAll('tbody tr');
+ // With overscan=10, visible=10, total rendered should be ~30
+ assert.ok(rows.length >= 20, `should render at least 20 rows but got ${rows.length}`);
+ assert.ok(rows.length <= 40, `should render at most 40 rows but got ${rows.length}`);
+ });
+ });
+
+ describe('cache', () => {
+ it('calls getData for missing rows', () => {
+ container = makeContainer(280);
+ const getData = makeGetData([]);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(50);
+
+ // getData should have been called for the visible range
+ assert.ok(getData.calls.length > 0, 'should call getData');
+ });
+
+ it('does not re-fetch cached rows', async () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 50 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ const getData = makeGetData(allRows);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(50);
+
+ // Wait for initial fetch
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+ const initialCalls = getData.calls.length;
+
+ // Invalidate without scrolling — same range, data cached
+ vt.invalidate();
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+ assert.strictEqual(getData.calls.length, initialCalls, 'should not re-fetch cached data');
+ });
+
+ it('clearCache empties the cache', async () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 50 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ const getData = makeGetData(allRows);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(50);
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+
+ const callsBefore = getData.calls.length;
+ vt.clearCache();
+ vt.invalidate();
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+ assert.ok(getData.calls.length > callsBefore, 'should re-fetch after cache clear');
+ });
+
+ it('seedCache pre-populates rows so getData is not called', () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 20 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ const getData = makeGetData([]);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+
+ // Seed cache before setting total rows
+ vt.seedCache(0, allRows);
+ const callsBefore = getData.calls.length;
+ vt.setTotalRows(20);
+
+ // Should render cached rows without calling getData
+ const rows = container.querySelectorAll('tbody tr:not(.loading-row)');
+ assert.ok(rows.length > 0, 'should render seeded rows');
+ assert.strictEqual(getData.calls.length, callsBefore, 'should not call getData for seeded data');
+ });
+ });
+
+ describe('layout', () => {
+ it('renders rows in normal flow without position absolute', async () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 30 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData(allRows), renderCell,
+ });
+ vt.setTotalRows(30);
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+
+ const rows = container.querySelectorAll('tbody tr');
+ for (const row of rows) {
+ assert.notInclude(row.style.position, 'absolute', 'rows should not be absolute positioned');
+ }
+ });
+
+ it('uses colgroup for column widths', () => {
+ container = makeContainer();
+ const cols = [
+ { key: 'timestamp', label: 'Time', width: 180 },
+ { key: 'status', label: 'Status', width: 60 },
+ ];
+ vt = new VirtualTable({
+ container, columns: cols, getData: makeGetData([]), renderCell,
+ });
+ const colEls = container.querySelectorAll('colgroup col');
+ assert.strictEqual(colEls.length, 2);
+ assert.strictEqual(colEls[0].style.width, '180px');
+ assert.strictEqual(colEls[1].style.width, '60px');
+ });
+
+ it('sets table width to sum of column widths for horizontal scrolling', () => {
+ container = makeContainer();
+ const cols = [
+ { key: 'timestamp', label: 'Time', width: 180 },
+ { key: 'status', label: 'Status', width: 60 },
+ { key: 'host', label: 'Host', width: 200 },
+ ];
+ vt = new VirtualTable({
+ container, columns: cols, getData: makeGetData([]), renderCell,
+ });
+ assert.strictEqual(vt.table.style.width, '440px');
+ });
+
+ it('defaults column width to 120 when not specified', () => {
+ container = makeContainer();
+ const cols = [
+ { key: 'timestamp', label: 'Time', width: 180 },
+ { key: 'other', label: 'Other' },
+ ];
+ vt = new VirtualTable({
+ container, columns: cols, getData: makeGetData([]), renderCell,
+ });
+ const colEls = container.querySelectorAll('colgroup col');
+ assert.strictEqual(colEls[1].style.width, '120px');
+ assert.strictEqual(vt.table.style.width, '300px');
+ });
+
+ it('sets spacer heights for virtual scroll area', () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 100 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData(allRows), renderCell,
+ });
+ vt.setTotalRows(100);
+
+ const topH = parseInt(vt.spacerTop.style.height, 10);
+ const bottomH = parseInt(vt.spacerBottom.style.height, 10);
+ // With scrollTop=0, spacerTop should be 0 (start=0)
+ assert.strictEqual(topH, 0, 'spacerTop height should be 0 at scroll position 0');
+ assert.ok(bottomH > 0, 'spacerBottom height should be positive');
+ });
+ });
+
+ describe('scrollToRow', () => {
+ it('sets scrollTop to row index times row height', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(100);
+ vt.scrollToRow(25);
+ assert.strictEqual(container.scrollTop, 25 * 28);
+ });
+
+ it('clamps to zero for negative index', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(100);
+ vt.scrollToRow(-5);
+ assert.strictEqual(container.scrollTop, 0);
+ });
+ });
+
+ describe('scrollToTimestamp', () => {
+ it('scrolls to the row closest to the target timestamp', async () => {
+ // Use 30 rows so all fit in visible + overscan range and get cached
+ container = makeContainer(840); // 30 rows * 28px = 840px
+ const rows = Array.from({ length: 30 }, (_, i) => ({
+ timestamp: 1000 - i * 10, // descending: 1000, 990, 980, ...
+ status: 200,
+ }));
+ const getData = makeGetData(rows);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(30);
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+
+ vt.scrollToTimestamp(800, (row) => row.timestamp);
+ // Row with ts=800 is at index 20 => scrollTop = 20*28 = 560
+ assert.strictEqual(container.scrollTop, 20 * 28);
+ });
+ });
+
+ describe('placeholder rendering', () => {
+ it('adds loading-row class for rows without data', () => {
+ container = makeContainer(280);
+ // getData returns empty — simulates data not yet loaded
+ const getData = async () => [];
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData, renderCell,
+ });
+ vt.setTotalRows(50);
+
+ const loadingRows = container.querySelectorAll('tbody tr.loading-row');
+ assert.ok(loadingRows.length > 0, 'should have loading placeholder rows');
+ });
+ });
+
+ describe('onVisibleRangeChange', () => {
+ it('fires with visible row indices', () => {
+ container = makeContainer(280);
+ const ranges = [];
+ const allRows = Array.from({ length: 50 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ vt = new VirtualTable({
+ container,
+ columns: makeColumns(),
+ getData: makeGetData(allRows),
+ renderCell,
+ onVisibleRangeChange: (first, last) => ranges.push({ first, last }),
+ });
+ vt.setTotalRows(50);
+
+ assert.ok(ranges.length > 0, 'should fire onVisibleRangeChange');
+ assert.ok(ranges[0].first >= 0);
+ assert.ok(ranges[0].last > ranges[0].first);
+ });
+ });
+
+ describe('onRowClick', () => {
+ it('fires when a row is clicked', async () => {
+ container = makeContainer(280);
+ const allRows = Array.from({ length: 50 }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ }));
+ const clicks = [];
+ vt = new VirtualTable({
+ container,
+ columns: makeColumns(),
+ getData: makeGetData(allRows),
+ renderCell,
+ onRowClick: (idx, row) => clicks.push({ idx, row }),
+ });
+ vt.setTotalRows(50);
+ await new Promise((r) => {
+ setTimeout(r, 50);
+ });
+
+ // Simulate click on first rendered row's td
+ const td = container.querySelector('tbody tr[data-row-idx] td');
+ if (td) td.click();
+ assert.ok(clicks.length > 0, 'should fire onRowClick');
+ });
+ });
+
+ describe('setColumns', () => {
+ it('re-renders header with new columns', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setColumns([
+ { key: 'a', label: 'A' },
+ { key: 'b', label: 'B' },
+ { key: 'c', label: 'C' },
+ ]);
+ const ths = container.querySelectorAll('thead th');
+ assert.strictEqual(ths.length, 3);
+ assert.strictEqual(ths[2].textContent, 'C');
+ });
+ });
+
+ describe('pinned columns', () => {
+ it('applies sticky positioning to pinned header cells', () => {
+ container = makeContainer();
+ const cols = [
+ {
+ key: 'ts', label: 'Time', pinned: true, width: 180,
+ },
+ { key: 'status', label: 'Status', width: 60 },
+ ];
+ vt = new VirtualTable({
+ container, columns: cols, getData: makeGetData([]), renderCell,
+ });
+ const th = container.querySelector('thead th');
+ assert.strictEqual(th.style.position, 'sticky');
+ assert.strictEqual(th.style.left, '0px');
+ });
+ });
+
+ describe('infinite scroll (totalRows growth)', () => {
+ // Simulates how logs.js getData works: internally fetches a full page from
+ // the server, checks if the page is full/partial, and adjusts totalRows.
+ // The VirtualTable only sees the sliced result, but totalRows is updated
+ // via setTotalRows as a side effect.
+ const INTERNAL_PAGE_SIZE = 50;
+
+ function makePagedGetData(opts = {}) {
+ const { totalAvailable = Infinity } = opts;
+ const cache = new Map();
+ return async (startIdx, count) => {
+ const pageIdx = Math.floor(startIdx / INTERNAL_PAGE_SIZE);
+ if (!cache.has(pageIdx)) {
+ // Simulate server fetch of a full page
+ const pageStart = pageIdx * INTERNAL_PAGE_SIZE;
+ const available = Math.max(0, totalAvailable - pageStart);
+ const fetchedCount = Math.min(INTERNAL_PAGE_SIZE, available);
+ const fetched = Array.from({ length: fetchedCount }, (_, i) => ({
+ timestamp: `row-${pageStart + i}`, status: 200,
+ }));
+ cache.set(pageIdx, fetched);
+
+ // Adjust totalRows based on page fullness (mirrors logs.js fix)
+ if (fetched.length < INTERNAL_PAGE_SIZE) {
+ const actualTotal = pageIdx * INTERNAL_PAGE_SIZE + fetched.length;
+ if (actualTotal < vt.totalRows) {
+ vt.setTotalRows(actualTotal);
+ }
+ } else {
+ const minTotal = (pageIdx + 2) * INTERNAL_PAGE_SIZE;
+ if (minTotal > vt.totalRows) {
+ vt.setTotalRows(minTotal);
+ }
+ }
+ }
+ const page = cache.get(pageIdx);
+ const offset = startIdx - pageIdx * INTERNAL_PAGE_SIZE;
+ return page.slice(offset, offset + count);
+ };
+ }
+
+ it('grows totalRows when a full page is fetched', async () => {
+ container = makeContainer(280);
+ const initialTotal = INTERNAL_PAGE_SIZE * 2; // 100
+ const fn = makePagedGetData({ totalAvailable: 500 });
+
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: fn, renderCell,
+ });
+ vt.seedCache(0, Array.from({ length: INTERNAL_PAGE_SIZE }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ })));
+ vt.setTotalRows(initialTotal);
+
+ // Scroll near end of initial estimate — triggers fetch in uncached page 1
+ Object.defineProperty(container, 'scrollTop', {
+ value: (initialTotal - 5) * 28, writable: true,
+ });
+ vt.invalidate();
+ await new Promise((r) => {
+ setTimeout(r, 150);
+ });
+
+ // Full page fetched for page 1 → totalRows should grow to (1+2)*50=150
+ assert.ok(
+ vt.totalRows > initialTotal,
+ `totalRows should grow beyond ${initialTotal}, got ${vt.totalRows}`,
+ );
+ });
+
+ it('caps totalRows when a partial page is fetched', async () => {
+ container = makeContainer(280);
+ const totalAvailable = INTERNAL_PAGE_SIZE + 10; // 60 rows total
+ const fn = makePagedGetData({ totalAvailable });
+
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: fn, renderCell,
+ });
+ vt.seedCache(0, Array.from({ length: INTERNAL_PAGE_SIZE }, (_, i) => ({
+ timestamp: `row-${i}`, status: 200,
+ })));
+ vt.setTotalRows(500); // Large initial estimate
+
+ // Scroll to trigger fetch for page 1 (which has only 10 rows)
+ Object.defineProperty(container, 'scrollTop', {
+ value: INTERNAL_PAGE_SIZE * 28, writable: true,
+ });
+ vt.invalidate();
+ await new Promise((r) => {
+ setTimeout(r, 150);
+ });
+
+ assert.strictEqual(
+ vt.totalRows,
+ totalAvailable,
+ `totalRows should be capped to ${totalAvailable}`,
+ );
+ });
+ });
+
+ describe('max scroll height capping', () => {
+ it('uses natural scroll height for small datasets (no behavioral change)', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1000);
+ // 1000 * 28 = 28000, well under MAX_SCROLL_HEIGHT (1_000_000)
+ assert.strictEqual(vt.getTotalScrollHeight(), 1000 * 28);
+ // Spacer heights should use original row height
+ const topH = parseInt(vt.spacerTop.style.height, 10);
+ const bottomH = parseInt(vt.spacerBottom.style.height, 10);
+ const renderedRows = vt.tbody.querySelectorAll('tr').length;
+ assert.strictEqual(topH + renderedRows * 28 + bottomH, 1000 * 28);
+ });
+
+ it('caps total scroll height for large datasets', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1_000_000);
+ // 1_000_000 * 28 = 28_000_000, exceeds MAX_SCROLL_HEIGHT (1_000_000)
+ assert.strictEqual(vt.getTotalScrollHeight(), 1_000_000);
+ });
+
+ it('computeRange returns correct indices for large datasets', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1_000_000);
+
+ // Scroll to 50% of the total scroll height
+ const totalScrollHeight = vt.getTotalScrollHeight();
+ Object.defineProperty(container, 'scrollTop', {
+ value: totalScrollHeight / 2, writable: true,
+ });
+ const range = vt.computeRange();
+ // Start (before overscan subtraction) should be near 500_000
+ const rawStart = range.start + 10;
+ assert.closeTo(
+ rawStart,
+ 500_000,
+ 1000,
+ `mid-scroll should map to ~row 500000, got ${rawStart}`,
+ );
+ });
+
+ it('scrollToRow maps large indices correctly', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1_000_000);
+
+ vt.scrollToRow(500_000);
+ const totalScrollHeight = vt.getTotalScrollHeight();
+ const expected = 500_000 * (totalScrollHeight / 1_000_000);
+ assert.closeTo(
+ container.scrollTop,
+ expected,
+ 1,
+ 'scrollToRow(500000) should set scrollTop to ~50% of total scroll height',
+ );
+ });
+
+ it('round-trips scrollToRow then computeRange for large indices', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1_000_000);
+
+ const targetRow = 750_000;
+ vt.scrollToRow(targetRow);
+ const range = vt.computeRange();
+ const rawStart = range.start + 10;
+ // Should be within a few rows of the target
+ assert.closeTo(
+ rawStart,
+ targetRow,
+ 2,
+ `round-trip should recover row ${targetRow}, got ${rawStart}`,
+ );
+ });
+
+ it('total spacer height is capped for large datasets', () => {
+ container = makeContainer(280);
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.setTotalRows(1_000_000);
+ const topH = parseFloat(vt.spacerTop.style.height);
+ const bottomH = parseFloat(vt.spacerBottom.style.height);
+ // spacerTop + rendered area + spacerBottom should be within total scroll height
+ assert.ok(
+ topH + bottomH <= vt.getTotalScrollHeight(),
+ 'spacer heights should not exceed getTotalScrollHeight()',
+ );
+ assert.ok(
+ vt.getTotalScrollHeight() <= 1_000_000,
+ 'total scroll height should be capped at 1_000_000',
+ );
+ });
+ });
+
+ describe('destroy', () => {
+ it('cleans up without errors', () => {
+ container = makeContainer();
+ vt = new VirtualTable({
+ container, columns: makeColumns(), getData: makeGetData([]), renderCell,
+ });
+ vt.destroy();
+ // Should not throw
+ vt = null;
+ });
+ });
+});
diff --git a/scripts/benchmark-bucket-fetch.mjs b/scripts/benchmark-bucket-fetch.mjs
new file mode 100755
index 0000000..1448c78
--- /dev/null
+++ b/scripts/benchmark-bucket-fetch.mjs
@@ -0,0 +1,250 @@
+#!/usr/bin/env node
+
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Benchmark ClickHouse query response times for different row counts.
+ * Measures fetch latency for the same columns used by the dashboard logs view.
+ *
+ * Usage: node scripts/benchmark-bucket-fetch.mjs
+ */
+
+const CLICKHOUSE_HOST = 's2p5b8wmt5.eastus2.azure.clickhouse.cloud';
+const CLICKHOUSE_PORT = 8443;
+const DATABASE = 'helix_logs_production';
+const RUNS_PER_TEST = 3;
+const DELAY_BETWEEN_RUNS_MS = 500;
+
+const COLUMNS = [
+ '`timestamp`',
+ '`source`',
+ '`response.status`',
+ '`request.method`',
+ '`request.host`',
+ '`request.url`',
+ '`cdn.cache_status`',
+ '`response.headers.content_type`',
+ '`helix.request_type`',
+ '`helix.backend_type`',
+ '`request.headers.x_forwarded_host`',
+ '`request.headers.referer`',
+ '`request.headers.user_agent`',
+ '`client.ip`',
+ '`request.headers.x_forwarded_for`',
+ '`response.headers.x_error`',
+ '`request.headers.accept`',
+ '`request.headers.accept_encoding`',
+ '`request.headers.cache_control`',
+ '`request.headers.x_byo_cdn_type`',
+ '`response.headers.location`',
+].join(', ');
+
+const TABLE = `${DATABASE}.cdn_requests_v2`;
+
+const TEST_CASES = [
+ {
+ name: 'LIMIT 100 (initial viewport)',
+ limit: 100,
+ timeWindow: '15 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 15 MINUTE
+ORDER BY timestamp DESC LIMIT 100`,
+ },
+ {
+ name: 'LIMIT 500 (one page)',
+ limit: 500,
+ timeWindow: '15 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 15 MINUTE
+ORDER BY timestamp DESC LIMIT 500`,
+ },
+ {
+ name: 'LIMIT 2000 (medium bucket)',
+ limit: 2000,
+ timeWindow: '15 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 15 MINUTE
+ORDER BY timestamp DESC LIMIT 2000`,
+ },
+ {
+ name: 'LIMIT 6000 (full large bucket)',
+ limit: 6000,
+ timeWindow: '15 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 15 MINUTE
+ORDER BY timestamp DESC LIMIT 6000`,
+ },
+ {
+ name: '5-second bucket, all rows',
+ limit: 10000,
+ timeWindow: '5 sec',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 5 SECOND
+ORDER BY timestamp DESC LIMIT 10000`,
+ },
+ {
+ name: '5-min bucket, LIMIT 500',
+ limit: 500,
+ timeWindow: '5 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 5 MINUTE
+ORDER BY timestamp DESC LIMIT 500`,
+ },
+ {
+ name: '5-min bucket, LIMIT 5000',
+ limit: 5000,
+ timeWindow: '5 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 5 MINUTE
+ORDER BY timestamp DESC LIMIT 5000`,
+ },
+ {
+ name: '5-min bucket, LIMIT 50000',
+ limit: 50000,
+ timeWindow: '5 min',
+ sql: `SELECT ${COLUMNS} FROM ${TABLE}
+WHERE timestamp >= now() - INTERVAL 5 MINUTE
+ORDER BY timestamp DESC LIMIT 50000`,
+ },
+];
+
+function printUsage() {
+ console.log('Usage: node scripts/benchmark-bucket-fetch.mjs ');
+ console.log('');
+ console.log('Benchmarks ClickHouse query response times for different row counts');
+ console.log('using the same columns as the dashboard logs view.');
+ console.log('');
+ console.log('Arguments:');
+ console.log(' username ClickHouse username');
+ console.log(' password ClickHouse password');
+}
+
+function median(values) {
+ const sorted = [...values].sort((a, b) => a - b);
+ const mid = Math.floor(sorted.length / 2);
+ if (sorted.length % 2 === 0) {
+ return (sorted[mid - 1] + sorted[mid]) / 2;
+ }
+ return sorted[mid];
+}
+
+function sleep(ms) {
+ // eslint-disable-next-line no-promise-executor-return
+ return new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
+}
+
+async function runQuery(sql, auth, runIndex) {
+ const taggedSql = `/* run=${runIndex} t=${Date.now()} */ ${sql}`;
+ const url = `https://${CLICKHOUSE_HOST}:${CLICKHOUSE_PORT}/?database=${DATABASE}&use_query_cache=0`;
+
+ const start = performance.now();
+ const resp = await fetch(url, {
+ method: 'POST',
+ headers: {
+ Authorization: `Basic ${Buffer.from(auth).toString('base64')}`,
+ 'Content-Type': 'text/plain',
+ },
+ body: `${taggedSql} FORMAT JSON`,
+ });
+
+ if (!resp.ok) {
+ const body = await resp.text();
+ throw new Error(`ClickHouse HTTP ${resp.status}: ${body.slice(0, 200)}`);
+ }
+
+ const json = await resp.json();
+ const elapsed = performance.now() - start;
+
+ return {
+ elapsed,
+ rows: json.rows,
+ transferBytes: JSON.stringify(json.data).length,
+ serverElapsed: json.statistics?.elapsed ?? null,
+ };
+}
+
+async function main() {
+ const args = process.argv.slice(2);
+
+ if (args.includes('--help') || args.includes('-h')) {
+ printUsage();
+ process.exit(0);
+ }
+
+ if (args.length < 2) {
+ console.error('Error: username and password are required.\n');
+ printUsage();
+ process.exit(1);
+ }
+
+ const [username, password] = args;
+ const auth = `${username}:${password}`;
+
+ console.log(`Running benchmark against ${CLICKHOUSE_HOST} as ${username}`);
+ console.log(`${RUNS_PER_TEST} runs per test, reporting median\n`);
+
+ const results = [];
+
+ for (const testCase of TEST_CASES) {
+ const timings = [];
+ let lastResult = null;
+
+ process.stdout.write(` ${testCase.name} ...`);
+
+ // eslint-disable-next-line no-await-in-loop -- sequential runs required for stable timings
+ for (let i = 0; i < RUNS_PER_TEST; i += 1) {
+ if (i > 0) {
+ // eslint-disable-next-line no-await-in-loop
+ await sleep(DELAY_BETWEEN_RUNS_MS);
+ }
+ // eslint-disable-next-line no-await-in-loop
+ const result = await runQuery(testCase.sql, auth, i);
+ timings.push(result.elapsed);
+ lastResult = result;
+ }
+
+ const medianTime = median(timings);
+ const transferKb = (lastResult.transferBytes / 1024).toFixed(1);
+
+ process.stdout.write(` ${medianTime.toFixed(0)} ms (${lastResult.rows} rows, ${transferKb} KB)\n`);
+
+ results.push({
+ name: testCase.name,
+ limit: testCase.limit,
+ timeWindow: testCase.timeWindow,
+ rows: lastResult.rows,
+ medianMs: medianTime,
+ transferKb: parseFloat(transferKb),
+ serverElapsedMs: lastResult.serverElapsed !== null
+ ? (lastResult.serverElapsed * 1000).toFixed(0)
+ : 'n/a',
+ });
+ }
+
+ console.log('\n## Results\n');
+ console.log('| # | Test | Limit | Time Window | Rows Returned | Median Time (ms) | Server Time (ms) | Transfer Size (KB) |');
+ console.log('|---|------|-------|-------------|---------------|-------------------|-------------------|--------------------|');
+
+ results.forEach((r, i) => {
+ console.log(
+ `| ${i + 1} | ${r.name} | ${r.limit} | ${r.timeWindow} | ${r.rows} | ${r.medianMs.toFixed(0)} | ${r.serverElapsedMs} | ${r.transferKb} |`,
+ );
+ });
+}
+
+main().catch((err) => {
+ console.error('Benchmark failed:', err.message);
+ process.exit(1);
+});
diff --git a/sql/queries/log-detail.sql b/sql/queries/log-detail.sql
new file mode 100644
index 0000000..ceda620
--- /dev/null
+++ b/sql/queries/log-detail.sql
@@ -0,0 +1,4 @@
+SELECT *
+FROM {{database}}.{{table}}
+WHERE timestamp = toDateTime64('{{timestamp}}', 3) AND `request.host` = '{{host}}'
+LIMIT 1
diff --git a/sql/queries/logs-at.sql b/sql/queries/logs-at.sql
new file mode 100644
index 0000000..24a7144
--- /dev/null
+++ b/sql/queries/logs-at.sql
@@ -0,0 +1,5 @@
+SELECT {{columns}}
+FROM {{database}}.{{table}}
+WHERE {{timeFilter}} AND timestamp <= toDateTime64('{{cursor}}', 3) {{hostFilter}} {{facetFilters}} {{additionalWhereClause}}
+ORDER BY timestamp DESC
+LIMIT {{pageSize}}
diff --git a/sql/queries/logs-more.sql b/sql/queries/logs-more.sql
index 74a30fe..c5ed965 100644
--- a/sql/queries/logs-more.sql
+++ b/sql/queries/logs-more.sql
@@ -1,6 +1,5 @@
-SELECT *
+SELECT {{columns}}
FROM {{database}}.{{table}}
-WHERE {{timeFilter}} {{hostFilter}} {{facetFilters}} {{additionalWhereClause}}
+WHERE {{timeFilter}} AND timestamp < toDateTime64('{{cursor}}', 3) {{hostFilter}} {{facetFilters}} {{additionalWhereClause}}
ORDER BY timestamp DESC
LIMIT {{pageSize}}
-OFFSET {{offset}}
diff --git a/sql/queries/logs.sql b/sql/queries/logs.sql
index 7815ee9..ac3e46d 100644
--- a/sql/queries/logs.sql
+++ b/sql/queries/logs.sql
@@ -1,4 +1,4 @@
-SELECT *
+SELECT {{columns}}
FROM {{database}}.{{table}}
WHERE {{timeFilter}} {{hostFilter}} {{facetFilters}} {{additionalWhereClause}}
ORDER BY timestamp DESC