From c2745ecbd6ba88ede2d832173ad03ea1204c651a Mon Sep 17 00:00:00 2001 From: Nessar Date: Mon, 19 Oct 2026 01:04:47 +0200 Subject: [PATCH] feat(planning): follow the indicative wait in calculation progress The overlay percentage now rises linearly to 95% at the expected wait captured at Calculate, holds there, and shows 100% only when the planner completes. Beneath the status, one line names the current planning stage (with the rule name for rule stages) and another shows the approximate remaining time, or "Taking longer than expected" once the wait is exceeded, announced once through the live status. Cancel freezes the percentage and hides both lines. PlanningCalculationService reports the stage and submitted request instead of fixed per-stage percentages; PlanningDurationService owns the wait progress on a 250 ms tick. Closes #300 Co-Authored-By: Claude Opus 5.5 --- docs/planning-duration.md | 19 ++ .../calendar-year-planning.spec.ts | 177 ++++++++++++++++++ .../calendar-year/calendar-year.html | 14 +- .../calendar-year/calendar-year.scss | 9 + .../components/calendar-year/calendar-year.ts | 25 ++- .../planning-calculation.service.spec.ts | 17 +- .../services/planning-calculation.service.ts | 41 ++-- .../planning-duration.service.spec.ts | 144 +++++++++++++- src/app/services/planning-duration.service.ts | 74 +++++++- src/app/services/translation-service.ts | 6 + src/i18n/de.json | 12 ++ src/i18n/en.json | 12 ++ src/i18n/es.json | 12 ++ src/i18n/fr.json | 12 ++ 14 files changed, 529 insertions(+), 45 deletions(-) diff --git a/docs/planning-duration.md b/docs/planning-duration.md index 62b4e9a..14bbfcc 100644 --- a/docs/planning-duration.md +++ b/docs/planning-duration.md @@ -82,6 +82,25 @@ duration rounding to whole milliseconds prevents floating-point noise at unit boundaries. Very fast runs can finish before the displayed lower bound. The range is explicitly indicative, not a confidence interval or a promise. +## During a calculation + +The loading overlay's percentage follows the indicative wait, not the planning +stages completed. At Calculate, `PlanningDurationService` freezes the expected +duration `e` for the submitted snapshot, including the local refinement. On a +250 ms tick, it measures elapsed time from the same timestamp the calibration +uses. Progress rises linearly to 95% at `e`, holds there and shows 100% only +when the planner reports completion. Per-stage weights are not used, because +the costly stage depends on the configuration. Form edits and repeated stages +cannot move it backwards. On Cancel, the tick stops and the percentage freezes. + +Below the status, one line names the current planning stage. For an +optimization or preference stage, it shows the rule's name. When `e` is at least +3 seconds, a second line shows "About N s left". This is in whole seconds under +10 seconds, 5-second steps under a minute and whole minutes after that. Once +the elapsed time reaches `e`, the line reads "Taking longer than expected" for +any `e`, and the live status announces it once. Both lines are visible text, +not live regions, and are hidden after Cancel. + ## What is timed Every request, manual or initial, captures `performance.now()` inside diff --git a/src/app/components/calendar-year/calendar-year-planning.spec.ts b/src/app/components/calendar-year/calendar-year-planning.spec.ts index fefddd7..3661eef 100644 --- a/src/app/components/calendar-year/calendar-year-planning.spec.ts +++ b/src/app/components/calendar-year/calendar-year-planning.spec.ts @@ -1935,6 +1935,183 @@ describe('CalendarYear planning outcome boundary', () => { } }); + async function waitingCalendar() { + vi.useFakeTimers(); + const clock = { now: 1_000 }; + vi.spyOn(performance, 'now').mockImplementation(() => clock.now); + const { calendar, calculation } = calendarFor(plan); + calendar.createPlanningCalculation.mockReturnValue({ + ...calculation, + outcome: new Promise(() => undefined), + }); + await TestBed.configureTestingModule({ + imports: [CalendarYear], + providers: [ + provideZonelessChangeDetection(), + { provide: CalendarService, useValue: calendar }, + ], + }).compileComponents(); + TestBed.inject(CalendarSettingsService).setPlanningDates('2024-01-01', '2024-12-31'); + TestBed.inject(RuleService).addRule({ + id: 'spring', + name: 'Spring break', + type: RuleType.TIME_WINDOW, + enabled: true, + force: 'preference', + startDate: new Date('2024-04-01T00:00:00'), + endDate: new Date('2024-04-30T00:00:00'), + placeDays: 5, + placeType: SelectableDayType.CP, + }); + TestBed.inject(PlanningDurationService).recordCompletion( + TestBed.inject(PlanningCalculationService).request()!, + 20_000, + ); + const fixture = TestBed.createComponent(CalendarYear); + fixture.detectChanges(); + const [request] = calendar.createPlanningCalculation.mock.calls[0] as unknown as [ + { progress: (stage: string) => void }, + ]; + const root = fixture.nativeElement as HTMLElement; + const text = (selector: string) => root.querySelector(selector)?.textContent?.trim(); + const at = (elapsedMs: number) => { + clock.now = 1_000 + elapsedMs; + vi.advanceTimersByTime(250); + fixture.detectChanges(); + }; + return { fixture, root, text, at, progress: request.progress }; + } + + it('names the planning stage and remaining wait as visible text in every supported language', async () => { + try { + const { fixture, root, text, at, progress } = await waitingCalendar(); + at(0); + expect(text('.spinner-text')).toBe('0%'); + expect(text('.calculation-stage')).toBe('Preparing the calendar'); + expect(text('.calculation-remaining')).toBe('About 20 s left'); + expect( + root.querySelector('.calculation-detail')!.closest('[role], [aria-live]'), + ).toBeNull(); + for (const [stage, expected] of [ + ['validation', 'Checking your inputs'], + ['obligations', 'Satisfying obligations'], + ['optimization:default-holiday-week-value', 'Applying “Semaines fériées”'], + ['preference:spring', 'Applying “Spring break”'], + ['expiry', 'Using balances that expire first'], + ['dates', 'Settling the final dates'], + ]) { + progress(stage); + fixture.detectChanges(); + expect(text('.calculation-stage')).toBe(expected); + } + const stages = [ + 'preparation', + 'validation', + 'obligations', + 'preference:spring', + 'expiry', + 'dates', + ]; + const localized = [ + [ + 'fr', + [ + 'Préparation du calendrier', + 'Vérification de vos saisies', + 'Respect des obligations', + 'Application de « Spring break »', + 'Utilisation des soldes qui expirent en premier', + 'Fixation des dates définitives', + ], + 'Encore environ 20 s', + 'Plus long que prévu', + ], + [ + 'es', + [ + 'Preparando el calendario', + 'Comprobando tus datos', + 'Cumpliendo las obligaciones', + 'Aplicando «Spring break»', + 'Usando primero los saldos que vencen antes', + 'Fijando las fechas definitivas', + ], + 'Quedan unos 20 s', + 'Está tardando más de lo previsto', + ], + [ + 'de', + [ + 'Kalender wird vorbereitet', + 'Eingaben werden geprüft', + 'Verpflichtungen werden erfüllt', + '„Spring break“ wird angewendet', + 'Zuerst verfallende Guthaben werden verwendet', + 'Endgültige Daten werden festgelegt', + ], + 'Noch etwa 20 s', + 'Dauert länger als erwartet', + ], + ] as const; + for (const [language, texts, remaining] of localized) { + TestBed.inject(TranslationService).language.set(language); + stages.forEach((stage, index) => { + progress(stage); + fixture.detectChanges(); + expect(text('.calculation-stage')).toBe(texts[index]); + }); + expect(text('.calculation-remaining')).toBe(remaining); + } + at(20_000); + for (const [language, , , overrun] of localized) { + TestBed.inject(TranslationService).language.set(language); + fixture.detectChanges(); + expect(text('.calculation-remaining')).toBe(overrun); + } + } finally { + vi.restoreAllMocks(); + } + }); + + it('announces an overrun once while the overlay status keeps loading', async () => { + try { + const { fixture, root, text, at } = await waitingCalendar(); + at(19_000); + expect(text('.calculation-remaining')).toBe('About 1 s left'); + at(20_000); + expect(text('.spinner-text')).toBe('95%'); + expect(text('.calculation-remaining')).toBe('Taking longer than expected'); + expect(text('.loading-overlay [role="status"]')).toBe('Calculating...'); + expect(text('.sr-only[role="status"]')).toBe('Taking longer than expected'); + fixture.componentInstance['liveMessage'].set(''); + at(60_000); + expect(text('.spinner-text')).toBe('95%'); + expect(text('.sr-only[role="status"]')).toBe(''); + expect(root.querySelector('.cancel-calculation')).not.toBeNull(); + } finally { + vi.restoreAllMocks(); + } + }); + + it('freezes the percentage and hides the stage and remaining wait after Cancel', async () => { + try { + const { root, text, at, progress } = await waitingCalendar(); + at(10_000); + expect(text('.spinner-text')).toBe('47%'); + root.querySelector('.cancel-calculation')!.click(); + progress('complete'); + at(30_000); + expect(text('.spinner-text')).toBe('47%'); + expect(root.querySelector('.calculation-detail')).toBeNull(); + expect(text('.loading-overlay [role="status"]')).toBe('Cancelling…'); + expect(root.querySelector('.cancel-calculation')!.disabled).toBe( + true, + ); + } finally { + vi.restoreAllMocks(); + } + }); + it.each([false, true])( 'cancels accessibly with a valid incumbent: %s, then allows a new calculation', async (withIncumbent) => { diff --git a/src/app/components/calendar-year/calendar-year.html b/src/app/components/calendar-year/calendar-year.html index 72a3988..0605a45 100644 --- a/src/app/components/calendar-year/calendar-year.html +++ b/src/app/components/calendar-year/calendar-year.html @@ -10,11 +10,21 @@ - +

{{ isCancelling() ? tr().planning.cancelling : tr().loading }}

+ @if (!isCancelling()) { +
+ @if (calculationStage()) { +

{{ calculationStage() }}

+ } + @if (remainingWait()) { +

{{ remainingWait() }}

+ } +
+ }