Fix UI stack filters and pagination

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/helpers.svelte.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { deserializeFilters, quoteIfSpecialCharacters, serializeFilters, toFilter } from './helpers.svelte';
+import { applyTimeFilter, deserializeFilters, quoteIfSpecialCharacters, serializeFilters, toFilter, toFilterFromSerializedFilters } from './helpers.svelte';
 import {
     BooleanFilter,
     DateFilter,
@@ -63,6 +63,19 @@ describe('helpers.svelte', () => {
     });
 });
 
+describe('applyTimeFilter', () => {
+    it('removes an existing date filter when time is explicitly empty', () => {
+        // Arrange
+        const filters = [new DateFilter('date', '[now-7d TO now]'), new StringFilter('stack', 'stack-1')];
+
+        // Act
+        const result = applyTimeFilter(filters, null);
+
+        // Assert
+        expect(result.map((filter) => filter.key)).toEqual(['string-stack']);
+    });
+});
+
 describe('serializeFilters', () => {
     it('serializes an empty array', () => {
         expect(serializeFilters([])).toBe('[]');
@@ -186,6 +199,30 @@ describe('serializeFilters', () => {
     });
 });
 
+describe('toFilterFromSerializedFilters', () => {
+    it('derives the filter expression from serialized filter controls', () => {
+        // Arrange
+        const serialized = serializeFilters([new DateFilter('date', '[now-7d TO now]'), new StringFilter('stack', 'stack-1')]);
+
+        // Act
+        const result = toFilterFromSerializedFilters(serialized);
+
+        // Assert
+        expect(result).toBe('stack:"stack-1"');
+    });
+
+    it('returns null when serialized filters contain only date controls', () => {
+        // Arrange
+        const serialized = serializeFilters([new DateFilter('date', '[now-7d TO now]')]);
+
+        // Act
+        const result = toFilterFromSerializedFilters(serialized);
+
+        // Assert
+        expect(result).toBeNull();
+    });
+});
+
 describe('deserializeFilters', () => {
     it('deserializes an empty array', () => {
         expect(deserializeFilters('[]')).toEqual([]);

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/helpers.svelte.ts

@@ -37,6 +37,8 @@ export function applyTimeFilter(filters: IFilter[], time: null | string): IFilte
         if (time) {
             const dateFilter = filters[dateFilterIndex] as DateFilter;
             dateFilter.value = time;
+        } else {
+            filters.splice(dateFilterIndex, 1);
         }
     } else if (time) {
         filters.push(new DateFilter('date', time));
@@ -222,6 +224,11 @@ export function toFilter(filters: IFilter[]): string {
         .trim();
 }
 
+export function toFilterFromSerializedFilters(json: string): null | string {
+    const filter = toFilter(deserializeFilters(json).filter((f) => f.type !== 'date'));
+    return filter || null;
+}
+
 export function updateFilterCache(cacheKey: string, filters: IFilter[]) {
     // Prevent unbounded growth
     if (filterCache.size >= 100) {

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/index.ts

@@ -1,6 +1,8 @@
 import type { LogLevel } from '$features/events/models/event-data';
 import type { StackStatus } from '$features/stacks/models';
 
+import { resolve } from '$app/paths';
+
 export interface EventErrorSummaryData {
     Message?: string;
     Method?: string;
@@ -146,3 +148,12 @@ export type SummaryTemplateKeys =
     | 'stack-session-summary'
     | 'stack-simple-summary'
     | 'stack-summary';
+
+export function buildStackEventsHref(stackId: string): string {
+    const queryParams = new URLSearchParams({
+        stack: stackId,
+        time: 'all'
+    });
+
+    return `${resolve('/(app)/event')}?${queryParams}`;
+}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A, Muted } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from '@lucide/svelte/icons/chevron-right';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -37,7 +36,7 @@
         </strong>
     {/if}
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {source.title}
     </A>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -27,7 +26,7 @@
         <strong>Feature</strong>:&nbsp;
     {/if}
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {source.title}
     </A>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -27,7 +26,7 @@
         <strong>Log source:</strong>&nbsp;
     {/if}
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {#if source.data?.Source}
             <abbr title={source.data.Source}>{source.data.SourceShortName}</abbr>
         {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -26,7 +25,7 @@
     {#if showType}
         <strong>404</strong>:&nbsp;
     {/if}
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {source.title}
     </A>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -27,7 +26,7 @@
         <strong>Session</strong>:&nbsp;
     {/if}
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {source.title}
     </A>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A, Muted } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from '@lucide/svelte/icons/chevron-right';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -27,7 +26,7 @@
         <abbr title={source.data.TypeFullName}>{source.data.Type}</abbr>:
     </strong>
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>{source.title}</A>
+    <A class="inline" href={buildStackEventsHref(source.id)}>{source.title}</A>
 </div>
 
 {#if source.data.Path}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
-    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
-    import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
+    import { buildStackEventsHref, type StackSummaryModel, type SummaryModel, type SummaryTemplateKeys } from './index';
 
     interface Props {
         badgeStatus: StackStatus;
@@ -39,7 +38,7 @@
         :&nbsp;
     {/if}
 
-    <A class="inline" href={`${resolve('/(app)/event')}?filter=stack:${source.id}`}>
+    <A class="inline" href={buildStackEventsHref(source.id)}>
         {source.title}
     </A>
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/saved-views/use-saved-views.svelte.ts

@@ -12,6 +12,7 @@ import { savedViewHref, savedViewResolvedSlug } from './slugs';
 
 export interface SavedViewQueryParams {
     filter: null | string | undefined;
+    filters?: null | string | undefined;
     saved?: null | string | undefined;
     sort?: null | string;
     time?: null | string;
@@ -262,6 +263,7 @@ export function useSavedViews(options: UseSavedViewsOptions): UseSavedViewsRetur
         }
 
         options.queryParams.filter = null;
+        options.queryParams.filters = null;
         setSortQueryParam(options.queryParams, null);
         setTimeQueryParam(options.queryParams, null);
         applyColumnState(view);
@@ -270,6 +272,7 @@ export function useSavedViews(options: UseSavedViewsOptions): UseSavedViewsRetur
 
     function handleClearSavedView() {
         options.queryParams.filter = null;
+        options.queryParams.filters = null;
         setSortQueryParam(options.queryParams, null);
         setTimeQueryParam(options.queryParams, null);
         applyColumnState(undefined);

src/Exceptionless.Web/ClientApp/src/lib/features/shared/table.svelte.ts

@@ -111,11 +111,15 @@ export function getSharedTableOptions<TData extends RowData, TPaginationStrategy
     const [rowSelection, setRowSelection] = createTableState<RowSelectionState>({});
 
     const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
-        const previousPageIndex = pagination().pageIndex;
+        const previousPageInfo = pagination();
 
         setPagination(updaterOrValue);
-        const currentPageInfo = pagination();
+        const paginationChange = getPaginationChange(previousPageInfo, pagination());
+        if (paginationChange.pageIndexChanged) {
+            setPagination(paginationChange.currentPageInfo);
+        }
 
+        const currentPageInfo = paginationChange.currentPageInfo;
         if (configuration.queryParameters.limit !== currentPageInfo.pageSize) {
             configuration.queryParameters.limit = currentPageInfo.pageSize;
         }
@@ -125,16 +129,9 @@ export function getSharedTableOptions<TData extends RowData, TPaginationStrategy
             const start = currentPageInfo.pageIndex * currentPageInfo.pageSize;
             setData(allData().slice(start, start + currentPageInfo.pageSize));
         } else if (isCursorPaging) {
-            const queryMeta = meta();
-            const nextLink = queryMeta?.links?.next?.after;
-            const previousLink = queryMeta?.links?.previous?.before;
-
-            const parameters = configuration.queryParameters as TableCursorPagingParameters;
-            parameters.after = currentPageInfo.pageIndex > previousPageIndex ? nextLink : undefined;
-            // Ensure previousLink is only used when actually moving back and not on the first page
-            parameters.before = currentPageInfo.pageIndex < previousPageIndex && currentPageInfo.pageIndex > 0 ? previousLink : undefined;
+            updateCursorPagingParameters(configuration.queryParameters as TableCursorPagingParameters, meta(), paginationChange);
         } else if (isOffsetPaging || isMemoryPaging) {
-            (configuration.queryParameters as TableMemoryPagingParameters | TableOffsetPagingParameters).page = currentPageInfo.pageIndex + 1; // API uses 1-based index
+            updatePageNumberPagingParameters(configuration.queryParameters as TableMemoryPagingParameters | TableOffsetPagingParameters, currentPageInfo);
         }
     };
 
@@ -214,6 +211,18 @@ export function getSharedTableOptions<TData extends RowData, TPaginationStrategy
     // NOTE: Two different effects are used here to avoid circular dependency issues with in memory paging.
     $effect(() => setDataImpl(configuration.queryData ?? []));
     $effect(() => setMetaImpl(configuration.queryMeta));
+    $effect(() => {
+        const nextPageSize = configuration.queryParameters.limit ?? DEFAULT_LIMIT;
+        const nextPageIndex = getPageIndexFromParameters(configuration.paginationStrategy, configuration.queryParameters, pagination().pageIndex);
+        const currentPageInfo = pagination();
+
+        if (currentPageInfo.pageSize !== nextPageSize || currentPageInfo.pageIndex !== nextPageIndex) {
+            setPagination({
+                pageIndex: nextPageIndex,
+                pageSize: nextPageSize
+            });
+        }
+    });
     $effect(() => {
         if (!hasSortQueryParameter(configuration.queryParameters)) {
             return;
@@ -375,6 +384,36 @@ function getColumnIds<TData extends RowData>(columns: ColumnDef<StockFeatures, T
     });
 }
 
+function getPageIndexFromParameters(strategy: PaginationStrategy, parameters: TablePagingParameters, fallbackPageIndex: number): number {
+    if (strategy !== 'offset' && strategy !== 'memory') {
+        return fallbackPageIndex;
+    }
+
+    return Math.max(0, (((parameters as TableMemoryPagingParameters | TableOffsetPagingParameters).page ?? 1) as number) - 1);
+}
+
+function getPaginationChange(previousPageInfo: PaginationState, currentPageInfo: PaginationState) {
+    const pageSizeChanged = previousPageInfo.pageSize !== currentPageInfo.pageSize;
+    if (!pageSizeChanged || currentPageInfo.pageIndex === 0) {
+        return {
+            currentPageInfo,
+            pageIndexChanged: false,
+            pageSizeChanged,
+            previousPageInfo
+        };
+    }
+
+    return {
+        currentPageInfo: {
+            ...currentPageInfo,
+            pageIndex: 0
+        },
+        pageIndexChanged: true,
+        pageSizeChanged,
+        previousPageInfo
+    };
+}
+
 function hasSortQueryParameter(parameters: TablePagingParameters): parameters is TableCursorPagingParameters | TableOffsetPagingParameters {
     return Object.prototype.hasOwnProperty.call(parameters, 'sort');
 }
@@ -410,3 +449,22 @@ function sanitizeColumnOrder<TData extends RowData>(columnOrder: ColumnOrderStat
 function serializeSortState(sorting: ColumnSort[]): string | undefined {
     return sorting.length > 0 ? sorting.map((sort) => `${sort.desc ? '-' : ''}${sort.id}`).join(',') : undefined;
 }
+
+function updateCursorPagingParameters(
+    parameters: TableCursorPagingParameters,
+    meta: QueryMeta | undefined,
+    paginationChange: ReturnType<typeof getPaginationChange>
+): void {
+    const movingForward = paginationChange.currentPageInfo.pageIndex > paginationChange.previousPageInfo.pageIndex;
+    const movingBackward = paginationChange.currentPageInfo.pageIndex < paginationChange.previousPageInfo.pageIndex;
+
+    // Cursor tokens are only valid for the current page size and direction.
+    // When the page size changes, clear both tokens and let the first page reload.
+    parameters.after = !paginationChange.pageSizeChanged && movingForward ? meta?.links?.next?.after : undefined;
+    parameters.before =
+        !paginationChange.pageSizeChanged && movingBackward && paginationChange.currentPageInfo.pageIndex > 0 ? meta?.links?.previous?.before : undefined;
+}
+
+function updatePageNumberPagingParameters(parameters: TableMemoryPagingParameters | TableOffsetPagingParameters, currentPageInfo: PaginationState): void {
+    parameters.page = currentPageInfo.pageIndex + 1; // API uses 1-based indexes.
+}