From 7c4a249b959f195be33d94e691db4fd165bafe13 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Wed, 6 Dec 2023 12:36:43 -0500
Subject: [PATCH 01/22] Resolved an issue that caused the user name input box
 to behave erratically for fast typers. Also applied better styling to pending
 user/player name change requests.

---
 .../player-enroll.component.html              |  3 +--
 .../profile-editor.component.html             | 11 ++++----
 .../profile-editor.component.ts               | 26 ++++++++++++-------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
index 60d200b6..6cea906f 100644
--- a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
+++ b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
@@ -80,7 +80,7 @@
           <ng-container *ngIf="ctx.player.name !== ctx.player.approvedName">
             <ng-container *ngIf="ctx.player.nameStatus == 'pending' && ctx.player.name != disallowedName">
               <div class="alert alert-info">
-                Your name is pending approval from an administrator. Return later or select 'Update' to see if it's
+                Your name is pending approval from an administrator. Return later or select "Update" to see if it's
                 been approved.
               </div>
             </ng-container>
@@ -103,7 +103,6 @@
               </button>
             </div>
           </div>
-          <div><small class="text-warning">{{ctx.player.nameStatus}}</small></div>
           <small>
             This will show on the public scoreboard. Your requested display name is subject to approval and a generic
             moniker is used until that time.
diff --git a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
index 0642e4ec..83dac23f 100644
--- a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
+++ b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
@@ -16,14 +16,13 @@ <h4>1. Set your display name</h4>
         </div>
         <br>
 
-        <ng-container *ngIf="currentUser.name !== currentUser.approvedName">
+        <ng-container *ngIf="currentUser.name && currentUser.name !== currentUser.approvedName">
             <ng-container *ngIf="currentUser.nameStatus == 'pending' && currentUser.name != disallowedName">
                 <div class="alert alert-info">
-                    Your name is pending approval from an administrator. Return later or select 'Refresh' to see if it's
-                    been approved.
-
-                    {{currentUser.name}}
-                    {{currentUser.approvedName}}
+                    <p class="m-0">
+                        Your request to change your display name to <strong>{{currentUser.name}}</strong> is pending
+                        approval from an administrator. Return later or select 'Refresh' to see if it's been approved.
+                    </p>
                 </div>
             </ng-container>
             <ng-container *ngIf="currentUser.nameStatus && currentUser.nameStatus != 'pending'">
diff --git a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
index 65eee548..79a4ac2f 100644
--- a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
@@ -3,11 +3,12 @@
 
 import { Component } from '@angular/core';
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import { asyncScheduler, firstValueFrom, Observable, scheduled, Subject } from 'rxjs';
-import { mergeAll, tap } from 'rxjs/operators';
+import { asyncScheduler, Observable, scheduled, Subject } from 'rxjs';
+import { debounceTime, mergeAll, switchMap, tap } from 'rxjs/operators';
 import { ApiUser, ChangedUser } from '../../../api/user-models';
 import { UserService as ApiUserService } from '../../../api/user.service';
 import { UserService } from '../../../utility/user.service';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
 
 @Component({
   selector: 'app-profile-editor',
@@ -16,22 +17,31 @@ import { UserService } from '../../../utility/user.service';
 })
 export class ProfileEditorComponent {
   currentUser$: Observable<ApiUser | null>;
-  updating$ = new Subject<ApiUser>();
   errors = [];
 
-  faSync = faSyncAlt;
+  private _doUpdate$ = new Subject<ChangedUser>();
+  private _updated$: Observable<ApiUser>;
 
+  faSync = faSyncAlt;
   disallowedName: string | null = null;
   disallowedReason: string | null = null;
 
   constructor(
     private api: ApiUserService,
     private userSvc: UserService,
+    private unsub: UnsubscriberService,
   ) {
 
+    this._updated$ = this._doUpdate$.pipe(
+      debounceTime(500),
+      switchMap(changedUser => this.api.update(changedUser, this.disallowedName))
+    );
+
+    this.unsub.add(this._updated$.subscribe());
+
     this.currentUser$ = scheduled([
       userSvc.user$,
-      this.updating$
+      this._updated$
     ], asyncScheduler).pipe(
       mergeAll(),
       tap(user => {
@@ -61,13 +71,11 @@ export class ProfileEditorComponent {
     // Otherwise, if there is a disallowed reason as well, mark it as that reason
     else if (this.disallowedReason) nameStatus = this.disallowedReason;
 
-    // update the api
-    const updatedUser = await firstValueFrom(this.api.update({
+    this._doUpdate$.next({
       id: this.userSvc.user$.value.id,
       name,
       nameStatus
-    }, this.disallowedName));
-    this.updating$.next(updatedUser!);
+    });
   }
 
   refresh(): void {

From 5845873f2f8b6d012d4f14c4b7fded4f67312981 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Wed, 6 Dec 2023 14:31:04 -0500
Subject: [PATCH 02/22] Resolved an issue that could cause the component which
 presents challenge questions to spam the API if a 500 is returned.

---
 .../gamespace-quiz.component.ts               | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index d8d87bcd..d5d0eeea 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -20,7 +20,7 @@ export class GamespaceQuizComponent {
   @Output() graded = new EventEmitter<boolean>();
 
   pending = false;
-  errors: Error[] = [];
+  errors: any[] = [];
   protected fa = fa;
 
   constructor(
@@ -29,6 +29,7 @@ export class GamespaceQuizComponent {
 
   async submit(): Promise<void> {
     this.pending = true;
+    this.errors = [];
 
     const submission = {
       id: this.spec.instance!.id,
@@ -36,20 +37,16 @@ export class GamespaceQuizComponent {
       questions: this.spec.instance!.state.challenge?.questions?.map(q => ({ answer: q.answer })),
     };
 
-    await firstValueFrom(this.challengesService.grade(submission).pipe(
-      catchError((err, caughtChallenge) => {
-        this.errors.push(err);
-        return caughtChallenge;
-      }),
-      tap(c => {
-        if (c) {
-          this.spec.instance = c;
-          this.api.setColor(this.spec);
-          this.graded.emit(true);
-        }
-
-        this.pending = false;
-      })
-    ));
+    try {
+      const gradedChallenge = await firstValueFrom(this.challengesService.grade(submission));
+      this.spec.instance = gradedChallenge;
+      this.api.setColor(this.spec);
+      this.graded.emit(true);
+    }
+    catch (err) {
+      this.errors.push(err);
+    }
+
+    this.pending = false;
   }
 }

From 79402347067b7cf469f02532a85cbcd1059a486c Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Wed, 6 Dec 2023 14:31:27 -0500
Subject: [PATCH 03/22] Remove unused refs

---
 .../src/app/game/gamespace-quiz/gamespace-quiz.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index d5d0eeea..35c3e489 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -6,7 +6,7 @@ import { fa } from "@/services/font-awesome.service";
 import { BoardSpec } from '../../api/board-models';
 import { BoardService } from '../../api/board.service';
 import { TimeWindow } from '../../api/player-models';
-import { catchError, firstValueFrom, tap } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { ChallengesService } from '@/api/challenges.service';
 
 @Component({

From fe51e81ee142fe2f37defe882947b592e534ffac Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Thu, 7 Dec 2023 17:11:07 -0500
Subject: [PATCH 04/22] Initial draft of 135/165

---
 .../gameboard-ui/src/app/api/board-models.ts  |   1 +
 .../src/app/api/challenges.models.ts          |  18 +++
 .../src/app/api/challenges.service.ts         |  10 +-
 .../gameboard-ui/src/app/game/game.module.ts  |   2 +
 .../gamespace-quiz.component.html             |   8 +-
 .../gamespace-quiz.component.ts               | 114 ++++++++++++++++--
 .../gameboard-page.component.ts               |  17 ++-
 .../pipes/index-to-submitted-answer.pipe.ts   |  16 +++
 .../src/app/services/notification.service.ts  |   2 +-
 9 files changed, 167 insertions(+), 21 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts

diff --git a/projects/gameboard-ui/src/app/api/board-models.ts b/projects/gameboard-ui/src/app/api/board-models.ts
index 10206d1d..2115b1cc 100644
--- a/projects/gameboard-ui/src/app/api/board-models.ts
+++ b/projects/gameboard-ui/src/app/api/board-models.ts
@@ -7,6 +7,7 @@ import { PlayerMode, PlayerRole, TimeWindow } from "./player-models";
 export interface Challenge {
   id: string;
   specId: string;
+  teamId: string;
   name: string;
   tag: string;
   startTime: Date;
diff --git a/projects/gameboard-ui/src/app/api/challenges.models.ts b/projects/gameboard-ui/src/app/api/challenges.models.ts
index 11892ad4..baed0515 100644
--- a/projects/gameboard-ui/src/app/api/challenges.models.ts
+++ b/projects/gameboard-ui/src/app/api/challenges.models.ts
@@ -43,6 +43,24 @@ export interface LocalActiveChallenge extends ActiveChallenge {
     session: LocalTimeWindow;
 }
 
+export interface ChallengeSubmissionAnswers {
+    questionSetIndex: number;
+    answers: string[];
+}
+
+export interface ChallengeSubmissionViewModel {
+    sectionIndex: number;
+    answers: string[];
+    submittedOn: Date;
+}
+
+export interface GetChallengeSubmissionsResponse {
+    challengeId: string;
+    teamId: string;
+    pendingAnswers: ChallengeSubmissionAnswers;
+    submittedAnswers: ChallengeSubmissionViewModel[];
+}
+
 export interface UserApiActiveChallenges {
     user: SimpleEntity;
     competition: ApiActiveChallenge[];
diff --git a/projects/gameboard-ui/src/app/api/challenges.service.ts b/projects/gameboard-ui/src/app/api/challenges.service.ts
index 00346469..1abb4792 100644
--- a/projects/gameboard-ui/src/app/api/challenges.service.ts
+++ b/projects/gameboard-ui/src/app/api/challenges.service.ts
@@ -4,7 +4,7 @@ import { Observable, Subject, map, switchMap, tap } from 'rxjs';
 import { Challenge, NewChallenge, SectionSubmission } from './board-models';
 import { ApiUrlService } from '@/services/api-url.service';
 import { activeChallengesStore } from '@/stores/active-challenges.store';
-import { ChallengeSolutionGuide, LocalActiveChallenge, UserActiveChallenges, UserApiActiveChallenges } from './challenges.models';
+import { ChallengeSolutionGuide, ChallengeSubmissionAnswers, GetChallengeSubmissionsResponse, LocalActiveChallenge, UserActiveChallenges, UserApiActiveChallenges } from './challenges.models';
 import { LocalTimeWindow } from '@/core/models/api-time-window';
 import { PlayerMode } from './player-models';
 
@@ -88,4 +88,12 @@ export class ChallengesService {
   public getSolutionGuide(challengeId: string): Observable<ChallengeSolutionGuide | null> {
     return this.http.get<ChallengeSolutionGuide>(this.apiUrl.build(`challenge/${challengeId}/solution-guide`));
   }
+
+  public getSubmissions(challengeId: string): Observable<GetChallengeSubmissionsResponse> {
+    return this.http.get<GetChallengeSubmissionsResponse>(this.apiUrl.build(`challenge/${challengeId}/submissions`));
+  }
+
+  public savePendingSubmission(challengeId: string, submission: ChallengeSubmissionAnswers) {
+    return this.http.put(this.apiUrl.build(`challenge/${challengeId}/submissions/pending`), submission);
+  }
 }
diff --git a/projects/gameboard-ui/src/app/game/game.module.ts b/projects/gameboard-ui/src/app/game/game.module.ts
index 3e2ada61..19af8221 100644
--- a/projects/gameboard-ui/src/app/game/game.module.ts
+++ b/projects/gameboard-ui/src/app/game/game.module.ts
@@ -38,6 +38,7 @@ import { SessionStartCountdownComponent } from './components/session-start-count
 import { TeamChallengeScoresToChallengeResultTypeCountPipe } from './pipes/team-challenge-scores-to-challenge-result-type-count.pipe';
 import { UserIsPlayingGuard } from '@/guards/user-is-playing.guard';
 import { UnityBoardComponent } from '../unity/unity-board/unity-board.component';
+import { IndexToSubmittedAnswerPipe } from './pipes/index-to-submitted-answer.pipe';
 
 const MODULE_DECLARATIONS = [
   CertificateComponent,
@@ -72,6 +73,7 @@ const MODULE_DECLARATIONS = [
     ScoreboardTeamDetailModalComponent,
     ContinueToGameboardButtonComponent,
     ExternalGameLinkBannerComponent,
+    IndexToSubmittedAnswerPipe,
   ],
   imports: [
     CommonModule,
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
index 0ac8617d..cc3649f0 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
@@ -10,8 +10,13 @@
       [class.pop-info]="!q.isGraded" [class.pop-success]="q.isGraded && q.isCorrect"
       [class.pop-warning]="q.isGraded && !q.isCorrect">
       <label>{{i+1}}. ({{q.weight}}) {{q.text}}</label>
-      <input class="form-control" [readonly]="q.isCorrect" [(ngModel)]="q.answer">
+      <input class="form-control" [readonly]="q.isCorrect" [(ngModel)]="q.answer"
+        (input)="handleAnswerInput({ challengeId: state.id, sectionIndex: state.challenge.sectionIndex, questions: state.challenge.questions})">
       <small [hidden]="!q.example">Example answer: {{q.example}}</small>
+      <small *ngIf="pastSubmissions">
+        <strong>Your previous answers: </strong>
+        {{ i | indexToSubmittedAnswer:pastSubmissions }}
+      </small>
     </div>
 
     <app-error-div [errors]="errors"></app-error-div>
@@ -27,6 +32,7 @@
             {{state.challenge.attempts + 1}} of {{state.challenge.maxAttempts}}
           </label>
         </ng-container>
+
         <div *ngIf="!!this.pending" class="small-spinner">
           <app-spinner></app-spinner>
         </div>
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index 35c3e489..c008bcfe 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -1,20 +1,46 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { fa } from "@/services/font-awesome.service";
-import { BoardSpec } from '../../api/board-models';
+import { BoardSpec, Challenge, QuestionView } from '../../api/board-models';
 import { BoardService } from '../../api/board.service';
 import { TimeWindow } from '../../api/player-models';
-import { firstValueFrom } from 'rxjs';
+import { Subject, firstValueFrom } from 'rxjs';
 import { ChallengesService } from '@/api/challenges.service';
+import { NotificationService } from '@/services/notification.service';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
+import { ChallengeSubmissionViewModel, GetChallengeSubmissionsResponse } from '@/api/challenges.models';
+
+export interface GamespaceQuizContext {
+  answerSections: {
+    sectionIndex: number;
+    answers: { answer: string }[];
+  }[],
+  challenge: {
+    id: string;
+    specId: string;
+    teamId: string;
+    isDeployed: boolean
+  },
+  session: {
+    msRemaining: number;
+    isActive: boolean;
+  }
+}
+
+interface PendingSubmissionsUpdate {
+  challengeId: string;
+  sectionIndex: number;
+  answers: string[];
+}
 
 @Component({
   selector: 'app-gamespace-quiz',
   templateUrl: './gamespace-quiz.component.html',
   styleUrls: ['./gamespace-quiz.component.scss']
 })
-export class GamespaceQuizComponent {
+export class GamespaceQuizComponent implements OnChanges {
   @Input() spec!: BoardSpec;
   @Input() session!: TimeWindow;
   @Output() graded = new EventEmitter<boolean>();
@@ -22,10 +48,36 @@ export class GamespaceQuizComponent {
   pending = false;
   errors: any[] = [];
   protected fa = fa;
+  protected pastSubmissions: ChallengeSubmissionViewModel[] = [];
+  private _updatePendingAnswers$ = new Subject<PendingSubmissionsUpdate>();
 
   constructor(
     private api: BoardService,
-    private challengesService: ChallengesService) { }
+    private challengesService: ChallengesService,
+    private teamHub: NotificationService,
+    private unsub: UnsubscriberService) { }
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    if (this.spec.instance?.id && this.spec.instance?.id !== changes.spec?.previousValue.id) {
+      // check to see if they have any saved answers for this challenge - autofill if so
+      const submissions = await firstValueFrom(this.challengesService.getSubmissions(this.spec.instance.id));
+      this.handleSubmissionsRetrieved(submissions);
+    }
+    else {
+      this.pastSubmissions = [];
+    }
+
+    if (this.spec.instance?.teamId && changes?.spec?.previousValue?.instance?.teamId !== this.spec?.instance?.teamId) {
+      this.teamHub.init(this.spec.instance!.teamId);
+
+      this.unsub.add(
+        // updates from the hub (like from the challenge grading server, say)
+        this.teamHub.challengeEvents.subscribe(c => {
+          this.handleChallengeUpdated(c.model);
+        }),
+      );
+    }
+  }
 
   async submit(): Promise<void> {
     this.pending = true;
@@ -33,15 +85,13 @@ export class GamespaceQuizComponent {
 
     const submission = {
       id: this.spec.instance!.id,
-      sectionIndex: this.spec.instance!.state.challenge?.sectionIndex,
+      sectionIndex: this.spec.instance!.state.challenge?.sectionIndex || 0,
       questions: this.spec.instance!.state.challenge?.questions?.map(q => ({ answer: q.answer })),
     };
 
     try {
       const gradedChallenge = await firstValueFrom(this.challengesService.grade(submission));
-      this.spec.instance = gradedChallenge;
-      this.api.setColor(this.spec);
-      this.graded.emit(true);
+      this.handleChallengeUpdated(gradedChallenge);
     }
     catch (err) {
       this.errors.push(err);
@@ -49,4 +99,50 @@ export class GamespaceQuizComponent {
 
     this.pending = false;
   }
+
+  protected handleAnswerInput(args: { challengeId: string, sectionIndex: number, questions: QuestionView[] }) {
+    this._updatePendingAnswers$.next({
+      challengeId: args.challengeId,
+      sectionIndex: args.sectionIndex,
+      answers: args.questions.map(q => q.answer)
+    });
+  }
+
+  private handleChallengeUpdated(challenge: Challenge) {
+    this.spec.instance = challenge;
+    this.api.setColor(this.spec);
+    this.graded.emit(true);
+  }
+
+  private handleSubmissionsRetrieved(submissions: GetChallengeSubmissionsResponse) {
+    // determine if we have past submitted answers for question set of this challenge
+    this.pastSubmissions = [];
+
+    const sectionIndex = this.spec.instance?.state.challenge.sectionIndex || 0;
+    if (submissions.submittedAnswers.length) {
+      this.pastSubmissions = submissions.submittedAnswers
+        .filter(s => s.sectionIndex == sectionIndex && s.answers.length == this.spec.instance?.state.challenge.questions.length);
+    }
+  }
+
+  // private toContext(challenge: Challenge): GamespaceQuizContext {
+  //   return {
+  //     answerSections: [
+  //       {
+  //         sectionIndex: challenge.state.challenge?.sectionIndex || 0,
+  //         answers: challenge.state.challenge.questions.map(q => ({ answer: q.answer }))
+  //       }
+  //     ],
+  //     challenge: {
+  //       id: challenge.id,
+  //       isDeployed: challenge.state.isActive,
+  //       specId: challenge.specId,
+  //       teamId: challenge.teamId,
+  //     },
+  //     session: {
+  //       msRemaining: challenge.endTime.valueOf() - challenge.startTime.valueOf(),
+
+  //     }
+  //   };
+  // }
 }
diff --git a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
index 30c3f675..684e5598 100644
--- a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
+++ b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
@@ -12,13 +12,14 @@ import { BoardPlayer, BoardSpec, Challenge, NewChallenge, VmState } from '@/api/
 import { BoardService } from '@/api/board.service';
 import { ApiUser } from '@/api/user-models';
 import { ConfigService } from '@/utility/config.service';
-import { HubState, NotificationService } from '@/services/notification.service';
+import { NotificationService } from '@/services/notification.service';
 import { UserService } from '@/utility/user.service';
 import { GameboardPerformanceSummaryViewModel } from '@/core/components/gameboard-performance-summary/gameboard-performance-summary.component';
 import { BrowserService } from '@/services/browser.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ApiError } from '@/api/models';
 import { ConfirmButtonComponent } from '@/core/components/confirm-button/confirm-button.component';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
 
 @Component({
   selector: 'app-gameboard-page',
@@ -45,8 +46,6 @@ export class GameboardPageComponent implements OnDestroy {
   deploying = false;
   variant = 0;
   user$: Observable<ApiUser | null>;
-  hubstate$: Observable<HubState>;
-  hubsub: Subscription;
   cid = '';
   performanceSummaryViewModel?: GameboardPerformanceSummaryViewModel;
 
@@ -61,11 +60,14 @@ export class GameboardPageComponent implements OnDestroy {
     private api: BoardService,
     private config: ConfigService,
     private hub: NotificationService,
+    private unsub: UnsubscriberService
   ) {
 
     this.user$ = usersvc.user$;
-    this.hubstate$ = hub.state$;
-    this.hubsub = hub.challengeEvents.subscribe(ev => this.syncOne(ev.model as Challenge));
+
+    this.unsub.add(
+      hub.challengeEvents.subscribe(ev => this.syncOne(ev.model as Challenge))
+    );
 
     this.fetch$ = merge(
       route.params.pipe(
@@ -155,13 +157,10 @@ export class GameboardPageComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    if (!this.hubsub.closed) {
-      this.hubsub.unsubscribe();
-    }
     if (this.fetch$) { this.fetch$.unsubscribe(); }
   }
 
-  startHub(b: BoardPlayer): void {
+  private startHub(b: BoardPlayer): void {
     if (b.session.isDuring) {
       this.hub.init(b.teamId);
     }
diff --git a/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
new file mode 100644
index 00000000..2e3783fd
--- /dev/null
+++ b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
@@ -0,0 +1,16 @@
+import { ChallengeSubmissionViewModel } from '@/api/challenges.models';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'indexToSubmittedAnswer' })
+export class IndexToSubmittedAnswerPipe implements PipeTransform {
+  transform(index: number, arg: ChallengeSubmissionViewModel[]): string {
+    if (index < 0 || !arg || !arg.length) {
+      throw new Error("Can't use IndexToSubmittedAnswer pipe without an index and submitted answers.");
+    }
+
+    if (index > arg.length)
+      throw new Error(`Can't use IndexToSubmittedAnswer pipe with an out-of-range index (${index}, ${arg.length})`);
+
+    return arg.map(submission => `"${submission.answers[index]}"`).join(", ");
+  }
+}
diff --git a/projects/gameboard-ui/src/app/services/notification.service.ts b/projects/gameboard-ui/src/app/services/notification.service.ts
index 453ea281..89fa53a3 100644
--- a/projects/gameboard-ui/src/app/services/notification.service.ts
+++ b/projects/gameboard-ui/src/app/services/notification.service.ts
@@ -10,7 +10,6 @@ import { AuthService, AuthTokenState } from '../utility/auth.service';
 import { UserService } from '../api/user.service';
 import { HubPlayer, Player, TimeWindow } from '../api/player-models';
 import { LogService } from './log.service';
-import { LocalStorageService } from './local-storage.service';
 import { ExternalGameService } from './external-game.service';
 
 @Injectable({ providedIn: 'root' })
@@ -139,6 +138,7 @@ export class NotificationService {
       if (this.connection.state === HubConnectionState.Connected) {
         // and we're connected to the right group, do nothing
         if (this.connection.connectionId == groupId) {
+          this.log.logInfo(`Team (notification) hub is already connected to team ${groupId}.`);
           return;
         }
 

From 1f6232ddb63111564066ea9b72d0b2498e225bb9 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 11 Dec 2023 14:42:02 -0500
Subject: [PATCH 05/22] Finished draft of 135/165.

---
 .../gameboard-ui/src/app/api/board.service.ts |  29 ++-
 .../src/app/api/challenges.models.ts          |   2 +-
 .../countdown/countdown.component.html        |   1 +
 .../countdown/countdown.component.scss        |   0
 .../countdown/countdown.component.ts          |  30 +++
 .../gameboard-ui/src/app/core/core.module.ts  |   2 +
 .../src/app/core/pipes/countdown.pipe.ts      |   2 +-
 .../gamespace-quiz.component.html             |  35 ++-
 .../gamespace-quiz.component.ts               | 232 ++++++++++++++----
 .../gameboard-page.component.html             |   3 +-
 .../pipes/index-to-submitted-answer.pipe.ts   |  16 +-
 11 files changed, 280 insertions(+), 72 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/core/components/countdown/countdown.component.html
 create mode 100644 projects/gameboard-ui/src/app/core/components/countdown/countdown.component.scss
 create mode 100644 projects/gameboard-ui/src/app/core/components/countdown/countdown.component.ts

diff --git a/projects/gameboard-ui/src/app/api/board.service.ts b/projects/gameboard-ui/src/app/api/board.service.ts
index bb12bc9e..e0ff3d3a 100644
--- a/projects/gameboard-ui/src/app/api/board.service.ts
+++ b/projects/gameboard-ui/src/app/api/board.service.ts
@@ -7,7 +7,8 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { GameSessionService } from '../services/game-session.service';
 import { ConfigService } from '../utility/config.service';
-import { BoardPlayer, BoardSpec, Challenge, ChallengeSummary, ChangedChallenge, ConsoleActor, NewChallenge, ObserveChallenge, SectionSubmission, VmConsole } from './board-models';
+import { BoardPlayer, BoardSpec, Challenge, ChallengeResult, ChallengeSummary, ChangedChallenge, ConsoleActor, NewChallenge, ObserveChallenge, VmConsole } from './board-models';
+import { NowService } from '@/services/now.service';
 
 @Injectable({ providedIn: 'root' })
 export class BoardService {
@@ -16,7 +17,8 @@ export class BoardService {
   constructor(
     private http: HttpClient,
     private config: ConfigService,
-    private gameSessionService: GameSessionService
+    private gameSessionService: GameSessionService,
+    private nowService: NowService
   ) {
     this.url = config.apphost + 'api';
   }
@@ -98,6 +100,29 @@ export class BoardService {
     return b;
   }
 
+  getChallengeColor(challengeInfo: { id: string, endTime?: Date, isDisabled: boolean, isLocked: boolean, result: ChallengeResult }) {
+    if (!challengeInfo.endTime) {
+      return "white";
+    }
+
+    if (challengeInfo.isDisabled || challengeInfo.isLocked) {
+      return "black";
+    }
+
+    if (challengeInfo.result == "success") {
+      return "lime";
+    }
+
+    if (challengeInfo.result == "partial") {
+      return "yellow";
+    }
+
+    if (challengeInfo.endTime < this.nowService.now())
+      return "red";
+
+    return "blue";
+  }
+
   setColor(s: BoardSpec): void {
     s.c = !!s.instance?.state.id
       ? s.instance.state.endTime.match(/^0001/) ? 'white' : 'black'
diff --git a/projects/gameboard-ui/src/app/api/challenges.models.ts b/projects/gameboard-ui/src/app/api/challenges.models.ts
index baed0515..fe7044b8 100644
--- a/projects/gameboard-ui/src/app/api/challenges.models.ts
+++ b/projects/gameboard-ui/src/app/api/challenges.models.ts
@@ -57,7 +57,7 @@ export interface ChallengeSubmissionViewModel {
 export interface GetChallengeSubmissionsResponse {
     challengeId: string;
     teamId: string;
-    pendingAnswers: ChallengeSubmissionAnswers;
+    pendingAnswers: ChallengeSubmissionAnswers | null;
     submittedAnswers: ChallengeSubmissionViewModel[];
 }
 
diff --git a/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.html b/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.html
new file mode 100644
index 00000000..26a3347b
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.html
@@ -0,0 +1 @@
+{{ timeRemaining$ | async | countdown }}
diff --git a/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.scss b/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.ts b/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.ts
new file mode 100644
index 00000000..e5e2dd35
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/components/countdown/countdown.component.ts
@@ -0,0 +1,30 @@
+import { NowService } from '@/services/now.service';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Observable, map, of, tap, timer } from 'rxjs';
+
+@Component({
+  selector: 'app-countdown',
+  templateUrl: './countdown.component.html',
+  styleUrls: ['./countdown.component.scss']
+})
+export class CountdownComponent implements OnChanges {
+  // note that this should be in MS since epoch (e.g. new Date().valueOf())
+  @Input() countdownTo?: number;
+
+  protected timeRemaining$: Observable<number> = of(0);
+
+  constructor(private nowService: NowService) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.countdownTo) {
+      this.timeRemaining$ = timer(0, 1000).pipe(
+        map(() => {
+          if (!this.countdownTo)
+            return 0;
+
+          return this.countdownTo - this.nowService.now().valueOf();
+        })
+      );
+    }
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/core.module.ts b/projects/gameboard-ui/src/app/core/core.module.ts
index da06a42e..49e38dbe 100644
--- a/projects/gameboard-ui/src/app/core/core.module.ts
+++ b/projects/gameboard-ui/src/app/core/core.module.ts
@@ -36,6 +36,7 @@ import { ClockPipe } from './pipes/clock.pipe';
 import { ColoredTextChipComponent } from './components/colored-text-chip/colored-text-chip.component';
 import { ConfirmButtonComponent } from '@/core/components/confirm-button/confirm-button.component';
 import { CountdownColorPipe } from './pipes/countdown-color.pipe';
+import { CountdownComponent } from './components/countdown/countdown.component';
 import { CountdownPipe } from './pipes/countdown.pipe';
 import { CumulativeTimeClockComponent } from './components/cumulative-time-clock/cumulative-time-clock.component';
 import { DoughnutChartComponent } from './components/doughnut-chart/doughnut-chart.component';
@@ -100,6 +101,7 @@ const PUBLIC_DECLARATIONS = [
   ChallengeSolutionGuideComponent,
   ColoredTextChipComponent,
   ConfirmButtonComponent,
+  CountdownComponent,
   CumulativeTimeClockComponent,
   DoughnutChartComponent,
   DropzoneComponent,
diff --git a/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts
index c08885ff..72c2b55f 100644
--- a/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts
+++ b/projects/gameboard-ui/src/app/core/pipes/countdown.pipe.ts
@@ -13,7 +13,7 @@ export class CountdownPipe implements PipeTransform {
       this.startSecondsAtMinute = config?.settings.countdownStartSecondsAtMinute!;
   }
 
-  transform(value?: number): string {
+  transform(value: number | null | undefined): string {
     if (!value || value < 0) {
       return "--";
     }
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
index cc3649f0..d4dc4231 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.html
@@ -2,7 +2,7 @@
 <!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root. -->
 
 <ng-container *ngIf="spec.instance?.state as state">
-  <ng-container *ngIf="!!state.challenge">
+  <ng-container *ngIf="!!state.challenge && pendingAnswers">
 
     <markdown [data]="state.challenge.sectionText"></markdown>
 
@@ -10,13 +10,27 @@
       [class.pop-info]="!q.isGraded" [class.pop-success]="q.isGraded && q.isCorrect"
       [class.pop-warning]="q.isGraded && !q.isCorrect">
       <label>{{i+1}}. ({{q.weight}}) {{q.text}}</label>
-      <input class="form-control" [readonly]="q.isCorrect" [(ngModel)]="q.answer"
-        (input)="handleAnswerInput({ challengeId: state.id, sectionIndex: state.challenge.sectionIndex, questions: state.challenge.questions})">
-      <small [hidden]="!q.example">Example answer: {{q.example}}</small>
-      <small *ngIf="pastSubmissions">
-        <strong>Your previous answers: </strong>
-        {{ i | indexToSubmittedAnswer:pastSubmissions }}
-      </small>
+
+      <!--This is shown if the user hasn't correctly answered the question-->
+      <div *ngIf="!q.isCorrect">
+        <input *ngIf="!q.isCorrect" class="form-control" [disabled]="q.isCorrect || session.isAfter"
+          [(ngModel)]="pendingAnswers.answers[i]"
+          (input)="handleAnswerInput({ challengeId: state.id, sectionIndex: pendingAnswers.questionSetIndex, answers: pendingAnswers.answers})">
+        <small [hidden]="!q.example">Example answer: {{q.example}}</small>
+      </div>
+
+      <!-- if they have, show this-->
+      <div *ngIf="q.isCorrect">
+        {{ q.answer }}
+      </div>
+
+      <div *ngIf="pastSubmissions.length">
+        <small>
+          <strong>Previous attempts: </strong>
+          <!--If the question has been answered correctly, don't show the last historical entry for it (because we display it above)-->
+          {{ i | indexToSubmittedAnswer:pastSubmissions:q.isCorrect }}
+        </small>
+      </div>
     </div>
 
     <app-error-div [errors]="errors"></app-error-div>
@@ -36,7 +50,10 @@
         <div *ngIf="!!this.pending" class="small-spinner">
           <app-spinner></app-spinner>
         </div>
-        <span>(Session ends in {{session.countdown | countdown}})</span>
+        <span *ngIf="this.session.endDate">
+          <strong><app-countdown [countdownTo]="this.session.endDate.valueOf()"></app-countdown></strong>
+          remaining
+        </span>
       </ng-container>
       <div class="spacer"></div>
       <div>Score: {{state.challenge.score}} of {{state.challenge.maxPoints}}</div>
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index c008bcfe..a5fd11de 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -1,33 +1,17 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
 import { fa } from "@/services/font-awesome.service";
-import { BoardSpec, Challenge, QuestionView } from '../../api/board-models';
+import { AnswerSubmission, BoardSpec, Challenge } from '../../api/board-models';
 import { BoardService } from '../../api/board.service';
 import { TimeWindow } from '../../api/player-models';
-import { Subject, firstValueFrom } from 'rxjs';
+import { Observable, Subject, catchError, delay, filter, firstValueFrom, interval, map, of, startWith, switchMap, takeUntil, tap } from 'rxjs';
 import { ChallengesService } from '@/api/challenges.service';
 import { NotificationService } from '@/services/notification.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
-import { ChallengeSubmissionViewModel, GetChallengeSubmissionsResponse } from '@/api/challenges.models';
-
-export interface GamespaceQuizContext {
-  answerSections: {
-    sectionIndex: number;
-    answers: { answer: string }[];
-  }[],
-  challenge: {
-    id: string;
-    specId: string;
-    teamId: string;
-    isDeployed: boolean
-  },
-  session: {
-    msRemaining: number;
-    isActive: boolean;
-  }
-}
+import { ChallengeSubmissionAnswers, ChallengeSubmissionViewModel, GetChallengeSubmissionsResponse } from '@/api/challenges.models';
+import { ToastService } from '@/utility/services/toast.service';
 
 interface PendingSubmissionsUpdate {
   challengeId: string;
@@ -40,31 +24,99 @@ interface PendingSubmissionsUpdate {
   templateUrl: './gamespace-quiz.component.html',
   styleUrls: ['./gamespace-quiz.component.scss']
 })
-export class GamespaceQuizComponent implements OnChanges {
+export class GamespaceQuizComponent implements OnInit, OnChanges {
+  @Input() challengeId?: string;
   @Input() spec!: BoardSpec;
   @Input() session!: TimeWindow;
   @Output() graded = new EventEmitter<boolean>();
 
-  pending = false;
-  errors: any[] = [];
+  protected errors: any[] = [];
   protected fa = fa;
   protected pastSubmissions: ChallengeSubmissionViewModel[] = [];
+  protected pending = false;
+  protected pendingAnswers: ChallengeSubmissionAnswers = {
+    questionSetIndex: 0,
+    answers: []
+  };
+  protected timeRemaining$?: Observable<number> = of(0);
+
+  private _answersSubmitted$ = new Subject<PendingSubmissionsUpdate>();
   private _updatePendingAnswers$ = new Subject<PendingSubmissionsUpdate>();
 
   constructor(
     private api: BoardService,
     private challengesService: ChallengesService,
     private teamHub: NotificationService,
+    private toastsService: ToastService,
     private unsub: UnsubscriberService) { }
 
+  ngOnInit(): void {
+    this.unsub.add(
+      // After the player inputs anything and then doesn't change it for 5 seconds,
+      // update their unsubmitted answers (we keep one set of unsubmitted answers per challenge).
+      //
+      // this is a lot like debounceTime, but we allow it to be interrupted
+      // and flushed if the user submits answers during the debounce window
+      this._updatePendingAnswers$.pipe(
+        switchMap(update => of(update).pipe(
+          delay(5000),
+          takeUntil(this._answersSubmitted$)
+        )),
+        switchMap(update => this.challengesService.savePendingSubmission(update.challengeId, {
+          questionSetIndex: update.sectionIndex,
+          answers: update.answers
+        }))
+      ).subscribe(),
+
+      // save submitted answers (interrupting auto-save above as a side effect)
+      // and reload form data with the results
+      this._answersSubmitted$.pipe(
+        tap(submission => {
+          this.pending = true;
+          this.errors = [];
+        }),
+        filter(submission => !!submission),
+        tap(submission => this.pending = true),
+        switchMap(submission => this.challengesService.grade({
+          id: submission.challengeId,
+          sectionIndex: submission.sectionIndex,
+          questions: this.pendingAnswers
+            .answers
+            .map(a => ({ answer: a || "" } as AnswerSubmission))
+        })),
+        catchError((err, caughtChallenge) => {
+          this.errors.push(err);
+          this.pending = false;
+          this.resetPendingAnswers();
+
+          return caughtChallenge;
+        }),
+        tap(challenge => {
+          this.pending = false;
+          if (!challenge)
+            return;
+
+          this.resetPendingAnswers();
+          this.handleChallengeUpdated(challenge);
+        }),
+        switchMap(challenge => this.challengesService.getSubmissions(challenge.id)),
+        tap(submissions => this.handleSubmissionsRetrieved(submissions))
+      ).subscribe()
+    );
+  }
+
   async ngOnChanges(changes: SimpleChanges): Promise<void> {
-    if (this.spec.instance?.id && this.spec.instance?.id !== changes.spec?.previousValue.id) {
-      // check to see if they have any saved answers for this challenge - autofill if so
-      const submissions = await firstValueFrom(this.challengesService.getSubmissions(this.spec.instance.id));
-      this.handleSubmissionsRetrieved(submissions);
-    }
-    else {
-      this.pastSubmissions = [];
+    const currentChallengeId = this.spec.instance?.id;
+    const previousChallengeId = changes.spec?.previousValue?.instance?.id;
+
+    // on the first time we get a real challengeId that is different from the previous one, or if we haven't set up
+    // the object we're going to bind the inputs to for the answers...
+    if (currentChallengeId && (currentChallengeId !== previousChallengeId || !this.pendingAnswers.answers.length)) {
+      // the default state is a blank set of answers, but we might update these later from a previous submission
+      this.resetPendingAnswers();
+
+      const pastSubmissions = await firstValueFrom(this.challengesService.getSubmissions(currentChallengeId));
+      this.handleSubmissionsRetrieved(pastSubmissions);
     }
 
     if (this.spec.instance?.teamId && changes?.spec?.previousValue?.instance?.teamId !== this.spec?.instance?.teamId) {
@@ -80,51 +132,125 @@ export class GamespaceQuizComponent implements OnChanges {
   }
 
   async submit(): Promise<void> {
-    this.pending = true;
-    this.errors = [];
-
-    const submission = {
-      id: this.spec.instance!.id,
-      sectionIndex: this.spec.instance!.state.challenge?.sectionIndex || 0,
-      questions: this.spec.instance!.state.challenge?.questions?.map(q => ({ answer: q.answer })),
-    };
-
-    try {
-      const gradedChallenge = await firstValueFrom(this.challengesService.grade(submission));
-      this.handleChallengeUpdated(gradedChallenge);
+    if (!this.spec.instance) {
+      throw new Error("Can't submit responses with no challenge loaded.");
     }
-    catch (err) {
-      this.errors.push(err);
-    }
-
-    this.pending = false;
+    this._answersSubmitted$.next({
+      challengeId: this.spec.instance.id,
+      sectionIndex: this.spec.instance?.state.challenge?.sectionIndex || 0,
+      answers: this.pendingAnswers.answers
+    });
   }
 
-  protected handleAnswerInput(args: { challengeId: string, sectionIndex: number, questions: QuestionView[] }) {
+  protected handleAnswerInput(args: { challengeId: string, sectionIndex: number, answers: string[] }) {
+    // save the unsubmitted answers (after a debounce period)
     this._updatePendingAnswers$.next({
       challengeId: args.challengeId,
       sectionIndex: args.sectionIndex,
-      answers: args.questions.map(q => q.answer)
+      answers: args.answers
     });
   }
 
-  private handleChallengeUpdated(challenge: Challenge) {
+  private async handleChallengeUpdated(challenge: Challenge) {
     this.spec.instance = challenge;
     this.api.setColor(this.spec);
+
+    const submissions = await firstValueFrom(this.challengesService.getSubmissions(challenge.id));
+    this.handleSubmissionsRetrieved(submissions);
+
     this.graded.emit(true);
   }
 
   private handleSubmissionsRetrieved(submissions: GetChallengeSubmissionsResponse) {
+    // if somehow we don't have an instance, this doesn't matter
+    if (!this.spec.instance)
+      return;
+
     // determine if we have past submitted answers for question set of this challenge
+    const numberOfQuestions = this.pendingAnswers?.answers.length || 0;
     this.pastSubmissions = [];
 
+    // if we have previous submissions for the question set of the expected length,
+    // make them available to the view by storing it on pastSubmissions.
     const sectionIndex = this.spec.instance?.state.challenge.sectionIndex || 0;
     if (submissions.submittedAnswers.length) {
       this.pastSubmissions = submissions.submittedAnswers
-        .filter(s => s.sectionIndex == sectionIndex && s.answers.length == this.spec.instance?.state.challenge.questions.length);
+        .filter(s => s.sectionIndex == sectionIndex && s.answers.length == numberOfQuestions);
+    }
+
+    // attempt to restore pending (unsubmitted) answers under these conditions
+    // if we also have a pending submission, use that to autofill the responses to the questions
+    if (!submissions.pendingAnswers) {
+      // no pending answers, so our job is done
+      this.resetPendingAnswers();
+      return;
+    }
+
+    const hasPendingAnswers = submissions.pendingAnswers.answers.some(a => !!a);
+    const canPlayCurrentChallenge = this.session?.isDuring && this.spec.instance?.state.isActive;
+    const isMatchingSectionIndex = submissions.pendingAnswers.questionSetIndex == sectionIndex;
+    const isMatchingLength = submissions.pendingAnswers.answers.length == numberOfQuestions;
+
+    if (hasPendingAnswers && isMatchingLength && isMatchingSectionIndex && canPlayCurrentChallenge) {
+      this.pendingAnswers = {
+        questionSetIndex: sectionIndex,
+        answers: [...submissions.pendingAnswers.answers]
+      };
+
+      for (let i = 0; i < numberOfQuestions; i++) {
+        this.pendingAnswers.answers[i] = submissions.pendingAnswers.answers[i];
+      }
+
+      if (!this.session.isAfter) {
+        this.toastsService.showMessage("Looks like you've been here before! We automatically restored your unsubmitted answers.");
+      }
     }
   }
 
+  // the player's submissions are bound to the pendingAnswers property of this class.
+  // upon any submission for the challenge, we need to update the pending answers array with:
+  //   - an empty string for incorrectly answered questions
+  //   - the correct answer for any correctly answered questions
+  // both of these are because the game engine gets unhappy if you don't resubmit answers
+  // which have already been marked correct or pass nulls for any questions.
+  // 2) Ensure correct answers 
+  private resetPendingAnswers() {
+    if (!this.spec.instance)
+      throw new Error("Can't reset pending answers with no loaded challenge.");
+
+    const numberOfQuestions = this.spec.instance.state.challenge.questions.length;
+    this.pendingAnswers = {
+      questionSetIndex: this.spec.instance.state.challenge.sectionIndex || 0,
+      answers: new Array<string>(numberOfQuestions)
+    };
+
+    for (let i = 0; i < numberOfQuestions; i++) {
+      if (this.spec.instance.state.challenge.questions[i].isCorrect) {
+        this.pendingAnswers.answers[i] = this.spec.instance.state.challenge.questions[i].answer;
+      }
+      else {
+        this.pendingAnswers.answers[i] = "";
+      }
+    }
+  }
+
+  // for a much healthier component (someday)
+  //   export interface GamespaceQuizContext {
+  //   answerSections: {
+  //     sectionIndex: number;
+  //     answers: { answer: string }[];
+  //   }[],
+  //   challenge: {
+  //     id: string;
+  //     specId: string;
+  //     teamId: string;
+  //     isDeployed: boolean
+  //   },
+  //   session: {
+  //     endDate: Date
+  //   }
+  // }
+
   // private toContext(challenge: Challenge): GamespaceQuizContext {
   //   return {
   //     answerSections: [
@@ -140,7 +266,7 @@ export class GamespaceQuizComponent implements OnChanges {
   //       teamId: challenge.teamId,
   //     },
   //     session: {
-  //       msRemaining: challenge.endTime.valueOf() - challenge.startTime.valueOf(),
+  //       endDate: challenge.endTime.valueOf()e,
 
   //     }
   //   };
diff --git a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.html b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.html
index 2157a61f..d843c6f1 100644
--- a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.html
+++ b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.html
@@ -111,7 +111,8 @@ <h3>Gamespace Resources</h3>
             </ng-container>
 
             <h3 *ngIf="spec.instance!.state.challenge?.questions?.length">Challenge Questions</h3>
-            <app-gamespace-quiz [spec]="spec!" [session]="ctx.session" (graded)="graded()"></app-gamespace-quiz>
+            <app-gamespace-quiz [challengeId]="spec.instance!.state.id" [spec]="spec!" [session]="ctx.session"
+              (graded)="graded()"></app-gamespace-quiz>
 
             <div *ngIf="spec.instance?.id" class="text-right m-4">
               <div class="mb-1">
diff --git a/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
index 2e3783fd..c7f8a673 100644
--- a/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
+++ b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
@@ -3,14 +3,20 @@ import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'indexToSubmittedAnswer' })
 export class IndexToSubmittedAnswerPipe implements PipeTransform {
-  transform(index: number, arg: ChallengeSubmissionViewModel[]): string {
-    if (index < 0 || !arg || !arg.length) {
+  transform(index: number, submissions: ChallengeSubmissionViewModel[], hideLastResponse = false): string {
+    if (index < 0 || !submissions || !submissions.length) {
       throw new Error("Can't use IndexToSubmittedAnswer pipe without an index and submitted answers.");
     }
 
-    if (index > arg.length)
-      throw new Error(`Can't use IndexToSubmittedAnswer pipe with an out-of-range index (${index}, ${arg.length})`);
+    if (index > submissions.length)
+      throw new Error(`Can't use IndexToSubmittedAnswer pipe with an out-of-range index (${index}, ${submissions.length})`);
 
-    return arg.map(submission => `"${submission.answers[index]}"`).join(", ");
+    // the final submitted answer may be the correct answer (if they got the question right). We show that elsewhere, so hide
+    // it if requested
+    let displayedSubmissions = [...submissions];
+    if (hideLastResponse)
+      displayedSubmissions = displayedSubmissions.slice(0, displayedSubmissions.length - 1);
+
+    return displayedSubmissions.map(submission => `${submission.answers[index] ? `"${submission.answers[index]}"` : "(no response)"}`).join(", ");
   }
 }

From 7f8fb4cdbc18f1316a15077f2e4b7817e5c4cc8e Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 11 Dec 2023 14:46:05 -0500
Subject: [PATCH 06/22] Don't show duplicate answers in historical attempts.

---
 .../src/app/game/pipes/index-to-submitted-answer.pipe.ts    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
index c7f8a673..9f722e87 100644
--- a/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
+++ b/projects/gameboard-ui/src/app/game/pipes/index-to-submitted-answer.pipe.ts
@@ -1,5 +1,6 @@
 import { ChallengeSubmissionViewModel } from '@/api/challenges.models';
 import { Pipe, PipeTransform } from '@angular/core';
+import { unique } from 'projects/gameboard-ui/src/tools';
 
 @Pipe({ name: 'indexToSubmittedAnswer' })
 export class IndexToSubmittedAnswerPipe implements PipeTransform {
@@ -17,6 +18,9 @@ export class IndexToSubmittedAnswerPipe implements PipeTransform {
     if (hideLastResponse)
       displayedSubmissions = displayedSubmissions.slice(0, displayedSubmissions.length - 1);
 
-    return displayedSubmissions.map(submission => `${submission.answers[index] ? `"${submission.answers[index]}"` : "(no response)"}`).join(", ");
+    return unique(
+      displayedSubmissions
+        .map(submission => `${submission.answers[index] ? `"${submission.answers[index]}"` : "(no response)"}`)
+    ).join(", ");
   }
 }

From 8bc74bf522d27c2192f0ed815d7b2a0bf83a8a7c Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Thu, 14 Dec 2023 11:08:03 -0500
Subject: [PATCH 07/22] Working on players report

---
 .../parameter-sponsor.component.html          |  2 +-
 .../parameter-sponsor.component.ts            |  2 +-
 .../enrollment-report.models.ts               |  9 +-
 .../enrollment-report.service.ts              |  2 +-
 .../players-report.component.html             | 96 +++++++++++++++++++
 .../players-report.component.scss             |  0
 .../players-report.component.ts               | 54 +++++++++++
 .../players-report/players-report.models.ts   | 32 +++++++
 .../players-report/players-report.service.ts  | 19 ++++
 .../support-report/support-report.service.ts  | 27 ------
 .../src/app/reports/reports.module.ts         | 11 ++-
 11 files changed, 213 insertions(+), 41 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.scss
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts

diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
index 9e7c5076..81f2ddab 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
@@ -42,7 +42,7 @@
         </div>
     </div>
 
-    <div *ngIf="selectedSponsors.length && allSponsors.length > showSelectionSummaryThreshold"
+    <div *ngIf="selectedSponsors.length && selectedSponsors.length > showSelectionSummaryThreshold"
         class="d-flex align-items-center full-width mt-1">
         <p class="flex-grow-1 m-0">
             <strong>Selected: </strong>
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
index f012c95d..b61b0343 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
@@ -161,7 +161,7 @@ export class ParameterSponsorComponent implements OnInit {
       params[this.queryParamName] = validSponsorIds.join(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
     }
 
-    await this.routerService.updateQueryParams({ parameters: params });
+    await this.routerService.updateQueryParams({ parameters: params, resetParams: ["pageNumber", "pageSize"] });
     this.updateSelectionSummary(value);
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
index 97c47ae0..c0f8c591 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
@@ -26,18 +26,13 @@ export interface EnrollmentReportParameters {
     tracks: string[];
 }
 
-export interface EnrollmentReportSponsorViewModel {
-    id: string;
-    name: string;
-    logoFileName: string;
-}
 
 export interface EnrollmentReportRecord {
     player: {
         id: string;
         name: string;
         enrollDate?: Date;
-        sponsor?: EnrollmentReportSponsorViewModel
+        sponsor?: ReportSponsor
     },
     game: ReportGame,
     playTime: {
@@ -49,7 +44,7 @@ export interface EnrollmentReportRecord {
         id: string;
         name: string;
         currentCaptain: SimpleEntity;
-        sponsors: EnrollmentReportSponsorViewModel[];
+        sponsors: ReportSponsor[];
     },
     challenges: {
         name: string;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
index 7ce6e468..789ace19 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { EnrollmentReportByGameRecord, EnrollmentReportFlatParameters, EnrollmentReportLineChartGroup, EnrollmentReportRecord, EnrollmentReportStatSummary } from './enrollment-report.models';
 import { Observable, firstValueFrom, map, } from 'rxjs';
-import { ReportResults, ReportResultsWithOverallStats } from '@/reports/reports-models';
+import { ReportResults } from '@/reports/reports-models';
 import { ReportsService } from '@/reports/reports.service';
 import { HttpClient } from '@angular/common/http';
 import { ApiUrlService } from '@/services/api-url.service';
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
new file mode 100644
index 00000000..0b86cf7e
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -0,0 +1,96 @@
+<div class="players-report-component">
+    <app-report-parameters-container>
+        <app-parameter-date-range label="Signup Date" ngDefaultControl
+            [(ngModel)]="createdDateQueryModel"></app-parameter-date-range>
+        <app-parameter-date-range label="Last Played Date" ngDefaultControl
+            [(ngModel)]="lastPlayedDateQueryModel"></app-parameter-date-range>
+        <app-parameter-sponsor name="sponsors" ngDefaultControl></app-parameter-sponsor>
+    </app-report-parameters-container>
+
+    <ng-container *ngIf="!ctx.isLoading; else loading">
+        <div class="report-body mt-4">
+            <table class="report-table table-hover gameboard-report">
+                <colgroup span="3"></colgroup>
+                <colgroup span="2"></colgroup>
+                <colgroup span="4"></colgroup>
+
+                <thead class="thead-light">
+                    <tr class="headers super-headers-row">
+                        <th scope="col" colspan="3" class="group-header">Player</th>
+                        <th scope="col" colspan="2" class="group-header">
+                            Deployed Challenges
+                        </th>
+                        <th scope="col" colspan="4" class="group-header">
+                            Participation
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr class="headers headers-row">
+                        <td>Player</td>
+                        <td>Created On</td>
+                        <td>Last Played On</td>
+                        <td>Competitive</td>
+                        <td>Practice</td>
+                        <td>Games</td>
+                        <td>Series</td>
+                        <td>Seasons</td>
+                        <td>Tracks</td>
+                    </tr>
+
+                    <tr class="data-row my-2" *ngFor="let record of ctx?.results?.records">
+                        <td>
+                            <div class="d-flex align-items-center">
+                                <app-player-field class="d-block"
+                                    [player]="{ userId: record.user.id, name: record.user.name, sponsor: record.sponsor }"></app-player-field>
+                            </div>
+                        </td>
+                        <td class="report-field date">
+                            <ng-container *ngIf="record.createdOn else noValue">
+                                <p>{{ record.createdOn | shortdate }}</p>
+                                <p class="subtle-info">{{ record.createdOn| friendlyTime }}</p>
+                            </ng-container>
+                        </td>
+                        <td class="report-field date">
+                            <ng-container *ngIf="record.lastPlayedOn else noValue">
+                                <p>{{ record.lastPlayedOn | shortdate }}</p>
+                                <p class="subtle-info">{{ record.lastPlayedOn | friendlyTime }}</p>
+                            </ng-container>
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.deployedCompetitiveChallengesCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.deployedPracticeChallengesCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.distinctSeriesPlayedCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.distinctTracksPlayedCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.distinctSeasonsPlayedCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.distinctGamesPlayedCount }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </ng-container>
+
+    <div class="pager-container d-flex justify-content-end mt-4">
+        <div class="flex-grow-1"></div>
+        <app-select-pager [itemCount]="ctx.results?.paging?.itemCount" [pageSize]="ctx.results?.paging?.pageSize"
+            (change)="handlePagingChange($event)"></app-select-pager>
+    </div>
+</div>
+
+<ng-template #noRecords>
+    <app-no-report-records recordDescription="players"></app-no-report-records>
+</ng-template>
+<ng-template #noValue>--</ng-template>
+<ng-template #loading><app-spinner>Loading your report...</app-spinner></ng-template>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.scss b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
new file mode 100644
index 00000000..e8d71724
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ReportComponentBase } from '../report-base.component';
+import { PlayersReportFlatParameters, PlayersReportParameters, PlayersReportRecord } from './players-report.models';
+import { ReportKey, ReportResults, ReportViewUpdate } from '@/reports/reports-models';
+import { DateRangeQueryParamModel } from '@/core/models/date-range-query-param.model';
+import { PlayersReportService } from './players-report.service';
+import { firstValueFrom } from 'rxjs';
+
+interface PlayersReportContext {
+  isLoading: boolean;
+  results?: ReportResults<PlayersReportRecord>;
+  selectedParameters: PlayersReportFlatParameters;
+}
+
+@Component({
+  selector: 'app-players-report',
+  templateUrl: './players-report.component.html',
+  styleUrls: ['./players-report.component.scss']
+})
+export class PlayersReportComponent extends ReportComponentBase<PlayersReportFlatParameters, PlayersReportParameters> {
+  protected ctx: PlayersReportContext = {
+    isLoading: false,
+    selectedParameters: {}
+  };
+
+  protected createdDateQueryModel: DateRangeQueryParamModel | null = new DateRangeQueryParamModel({
+    dateStartParamName: "createdDateStart",
+    dateEndParamName: "createdDateEnd"
+  });
+
+  protected lastPlayedDateQueryModel: DateRangeQueryParamModel | null = new DateRangeQueryParamModel({
+    dateStartParamName: "lastPlayedDateStart",
+    dateEndParamName: "lastPlayedDateEnd"
+  });
+
+  constructor(private playersReportService: PlayersReportService) {
+    super();
+  }
+
+  protected async updateView(parameters: PlayersReportFlatParameters): Promise<ReportViewUpdate> {
+    if (!this.playersReportService) {
+      return { metaData: await firstValueFrom(this.reportsService.getReportMetaData(ReportKey.PlayersReport)) };
+    }
+
+    this.ctx.selectedParameters = parameters;
+    this.ctx.results = await firstValueFrom(this.playersReportService.getReportData(parameters));
+
+    return {
+      metaData: this.ctx.results.metaData,
+      // might be able to pull this
+      // pagingResults: this.ctx.results.paging
+    };
+  }
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
new file mode 100644
index 00000000..58339a26
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -0,0 +1,32 @@
+import { PagingArgs, SimpleEntity } from "@/api/models";
+import { ReportDateRange, ReportSponsor } from "@/reports/reports-models";
+
+export interface PlayersReportFlatParameters {
+    createdDateStart?: string;
+    createdDateEnd?: string;
+    lastPlayedDateStart?: string;
+    lastPlayedDateEnd?: string;
+    pageNumber?: number;
+    pageSize?: number;
+    sponsors?: string;
+}
+
+export interface PlayersReportParameters {
+    createdDate?: ReportDateRange;
+    lastPlayedDate?: ReportDateRange;
+    sponsors?: SimpleEntity;
+    paging: PagingArgs;
+}
+
+export interface PlayersReportRecord {
+    user: SimpleEntity;
+    sponsor: ReportSponsor;
+    createdOn?: Date;
+    lastPlayedOn?: Date;
+    deployedCompetitiveChallengesCount: number;
+    deployedPracticeChallengesCount: number;
+    distinctGamesPlayedCount: number;
+    distinctSeriesPlayedCount: number;
+    distinctTracksPlayedCount: number;
+    distinctSeasonsPlayedCount: number;
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
new file mode 100644
index 00000000..9a81ba35
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { PlayersReportFlatParameters, PlayersReportRecord } from './players-report.models';
+import { ApiUrlService } from '@/services/api-url.service';
+import { HttpClient } from '@angular/common/http';
+import { ReportResults } from '@/reports/reports-models';
+import { ReportsService } from '@/reports/reports.service';
+
+@Injectable({ providedIn: 'root' })
+export class PlayersReportService {
+  constructor(
+    private apiUrl: ApiUrlService,
+    private http: HttpClient,
+    private reportsService: ReportsService) { }
+
+  getReportData(parameters: PlayersReportFlatParameters) {
+    parameters = this.reportsService.applyDefaultPaging(parameters);
+    return this.http.get<ReportResults<PlayersReportRecord>>(this.apiUrl.build("reports/players"));
+  }
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
index a465f4d0..79c7a97b 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
@@ -46,33 +46,6 @@ export class SupportReportService {
     return flattened;
   }
 
-  public unflattenParameters(parameters: SupportReportFlatParameters) {
-    const defaultPaging = this.reportsService.getDefaultPaging();
-
-    const structured: SupportReportParameters = {
-      ...parameters,
-      gameChallengeSpec: {
-        gameId: parameters.gameId,
-        challengeSpecId: parameters.challengeSpecId
-      },
-      labels: parameters.labels?.split(',') || [],
-      openedDateRange: {
-        dateStart: parameters.openedDateStart ? new Date(parameters.openedDateStart) : null,
-        dateEnd: parameters.openedDateEnd ? new Date(parameters.openedDateEnd) : null,
-      },
-      paging: {
-        pageNumber: parameters.pageNumber || defaultPaging.pageNumber!,
-        pageSize: parameters.pageSize || defaultPaging.pageSize!
-      },
-      statuses: this.reportsService.unflattenMultiSelectValues(parameters.statuses),
-      timeSinceOpen: minutesToTimeSpan(parseInt(parameters.minutesSinceOpen as any)),
-      timeSinceUpdate: minutesToTimeSpan(parseInt(parameters.minutesSinceUpdate as any)),
-    };
-
-    this.objectService.deleteKeys(structured, "gameId", "challengeId", "openedDateStart", "openedDateEnd");
-    return structured;
-  }
-
   getReportData(args: SupportReportFlatParameters): Observable<ReportResults<SupportReportRecord>> {
     this.reportsService.applyDefaultPaging(args);
     return this.http.get<ReportResults<SupportReportRecord>>(this.apiUri.build("/reports/support", args));
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 136598d3..815d7814 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -7,6 +7,8 @@ import { ChallengeAttemptSummaryComponent } from './components/challenge-attempt
 import { ChallengeOrGameFieldComponent } from './components/challenge-or-game-field/challenge-or-game-field.component';
 import { EnrollmentReportByGameComponent } from './components/reports/enrollment-report/enrollment-report-by-game/enrollment-report-by-game.component';
 import { EnrollmentReportSponsorPlayerCountModalComponent } from './components/reports/enrollment-report/enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component';
+import { EnrollmentReportSummaryComponent } from './components/reports/enrollment-report/enrollment-report-summary/enrollment-report-summary.component';
+import { EnrollmentReportTrendComponent } from './components/reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component';
 import { NoReportRecordsComponent } from './components/no-report-records/no-report-records.component';
 import { ParameterChangeLinkComponent } from './components/parameter-change-link/parameter-change-link.component';
 import { ParameterDateRangeComponent } from './components/parameters/parameter-date-range/parameter-date-range.component';
@@ -15,6 +17,7 @@ import { ParameterSponsorComponent } from './components/parameters/parameter-spo
 import { ParameterTicketStatusComponent } from './components/parameters/parameter-ticket-status/parameter-ticket-status.component';
 import { ParameterTimespanPickerComponent } from './components/parameters/parameter-timespan-picker/parameter-timespan-picker.component';
 import { PlayerFieldComponent } from './components/player-field/player-field.component';
+import { PlayersReportComponent } from './components/reports/players-report/players-report.component';
 import { ReportCardComponent } from './components/report-card/report-card.component';
 import { ReportFieldNoValueComponent } from './components/report-field-no-value/report-field-no-value.component';
 import { ReportGlobalControlsComponent } from './components/report-global-controls/report-global-controls.component';
@@ -36,8 +39,6 @@ import { ArrayFieldToClassPipe } from './pipes/array-field-to-class.pipe';
 import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
-import { EnrollmentReportTrendComponent } from './components/reports/enrollment-report/enrollment-report-trend/enrollment-report-trend.component';
-import { EnrollmentReportSummaryComponent } from './components/reports/enrollment-report/enrollment-report-summary/enrollment-report-summary.component';
 
 @NgModule({
   declarations: [
@@ -48,10 +49,13 @@ import { EnrollmentReportSummaryComponent } from './components/reports/enrollmen
     EnrollmentReportComponent,
     EnrollmentReportByGameComponent,
     EnrollmentReportSponsorPlayerCountModalComponent,
+    EnrollmentReportSummaryComponent,
+    EnrollmentReportTrendComponent,
     ParameterGameChallengespecComponent,
     ParameterDateRangeComponent,
     ParameterTicketStatusComponent,
     ParameterTimespanPickerComponent,
+    PlayersReportComponent,
     ReportCardComponent,
     ParameterChangeLinkComponent,
     ReportGlobalControlsComponent,
@@ -74,8 +78,6 @@ import { EnrollmentReportSummaryComponent } from './components/reports/enrollmen
     ReportStatSummaryComponent,
     PlayerChallengeAttemptsModalComponent,
     ParameterSponsorComponent,
-    EnrollmentReportTrendComponent,
-    EnrollmentReportSummaryComponent,
   ],
   imports: [
     CommonModule,
@@ -87,6 +89,7 @@ import { EnrollmentReportSummaryComponent } from './components/reports/enrollmen
         children: [
           { path: 'enrollment', component: EnrollmentReportComponent, title: "Enrollment Report" },
           { path: 'practice-area', component: PracticeModeReportComponent, title: "Practice Area Report" },
+          { path: 'players', component: PlayersReportComponent, title: "Players Report" },
           { path: 'support', component: SupportReportComponent, title: "Support Report" }
         ]
       }

From cf22dc7addc2683bc8bfa62ab6456afe3f6688b4 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Thu, 14 Dec 2023 15:37:43 -0500
Subject: [PATCH 08/22] Finish mvp of Players Report.

---
 .../report-parameters-container.component.ts  | 21 ++---------
 .../players-report.component.html             | 20 ++++++++--
 .../players-report.component.ts               | 37 +++++++++++++++++--
 .../players-report/players-report.models.ts   |  6 ++-
 .../players-report/players-report.service.ts  |  2 +-
 5 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/projects/gameboard-ui/src/app/reports/components/report-parameters-container/report-parameters-container.component.ts b/projects/gameboard-ui/src/app/reports/components/report-parameters-container/report-parameters-container.component.ts
index baa24890..ca5dcd3f 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-parameters-container/report-parameters-container.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/report-parameters-container/report-parameters-container.component.ts
@@ -1,8 +1,6 @@
 import { ReportMetaData } from '@/reports/reports-models';
 import { ActiveReportService } from '@/reports/services/active-report.service';
-import { LogService } from '@/services/log.service';
-import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 
 @Component({
@@ -20,23 +18,10 @@ import { Observable, Subscription } from 'rxjs';
 <ng-template #loading><app-spinner>Loading your report</app-spinner></ng-template>`,
   styleUrls: ['./report-parameters-container.component.scss']
 })
-export class ReportParametersContainerComponent implements AfterViewInit, OnDestroy {
+export class ReportParametersContainerComponent {
   @Output() cleanChange = new EventEmitter<boolean>();
-  @ViewChild('parametersForm') parametersForm?: NgForm;
 
-  private _valueChangesSub?: Subscription;
   protected metaData$: Observable<ReportMetaData | null> = this.activeReportService.metaData$;
 
-  constructor(private activeReportService: ActiveReportService, private logService: LogService) { }
-
-  ngAfterViewInit(): void {
-    if (!this.parametersForm) {
-      this.logService.logError("Couldn't resolve the report parameters form.");
-      return;
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._valueChangesSub?.unsubscribe();
-  }
+  constructor(private activeReportService: ActiveReportService) { }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index 0b86cf7e..4705cab4 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -1,5 +1,14 @@
 <div class="players-report-component">
     <app-report-parameters-container>
+        <app-multi-select label="Series" name="series" ngDefaultControl [options]="series$ | async"
+            [(ngModel)]="seriesQueryModel"></app-multi-select>
+        <app-multi-select label="Tracks" name="tracks" ngDefaultControl [options]="tracks$ | async"
+            [(ngModel)]="tracksQueryModel"></app-multi-select>
+        <app-multi-select label="Seasons" name="seasons" ngDefaultControl [options]="seasons$ | async"
+            [(ngModel)]="seasonsQueryModel"></app-multi-select>
+        <app-multi-select label="Games" name="games" [options]="games$ | async" [(ngModel)]="gamesQueryModel"
+            [itemTemplate]="multiSelectGame" [getSearchText]="displayGameName"
+            [value]="getGameValue"></app-multi-select>
         <app-parameter-date-range label="Signup Date" ngDefaultControl
             [(ngModel)]="createdDateQueryModel"></app-parameter-date-range>
         <app-parameter-date-range label="Last Played Date" ngDefaultControl
@@ -9,7 +18,8 @@
 
     <ng-container *ngIf="!ctx.isLoading; else loading">
         <div class="report-body mt-4">
-            <table class="report-table table-hover gameboard-report">
+            <table *ngIf="ctx.results?.records?.length; else noRecords"
+                class="report-table table-hover gameboard-report">
                 <colgroup span="3"></colgroup>
                 <colgroup span="2"></colgroup>
                 <colgroup span="4"></colgroup>
@@ -28,8 +38,8 @@
 
                 <tbody>
                     <tr class="headers headers-row">
-                        <td>Player</td>
-                        <td>Created On</td>
+                        <td>Name &amp; Sponsor</td>
+                        <td>Signed Up On</td>
                         <td>Last Played On</td>
                         <td>Competitive</td>
                         <td>Practice</td>
@@ -89,6 +99,10 @@
     </div>
 </div>
 
+<ng-template #multiSelectGame let-context>
+    <span class="game-name">{{ context.name }}</span>
+</ng-template>
+
 <ng-template #noRecords>
     <app-no-report-records recordDescription="players"></app-no-report-records>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
index e8d71724..c0ff1d72 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
@@ -5,6 +5,8 @@ import { ReportKey, ReportResults, ReportViewUpdate } from '@/reports/reports-mo
 import { DateRangeQueryParamModel } from '@/core/models/date-range-query-param.model';
 import { PlayersReportService } from './players-report.service';
 import { firstValueFrom } from 'rxjs';
+import { MultiSelectQueryParamModel } from '@/core/models/multi-select-query-param.model';
+import { SimpleEntity } from '@/api/models';
 
 interface PlayersReportContext {
   isLoading: boolean;
@@ -23,16 +25,47 @@ export class PlayersReportComponent extends ReportComponentBase<PlayersReportFla
     selectedParameters: {}
   };
 
+  protected games$ = this.reportsService.getGames();
+  protected seasons$ = this.reportsService.getSeasons();
+  protected series$ = this.reportsService.getSeries();
+  protected tracks$ = this.reportsService.getTracks();
+
   protected createdDateQueryModel: DateRangeQueryParamModel | null = new DateRangeQueryParamModel({
     dateStartParamName: "createdDateStart",
     dateEndParamName: "createdDateEnd"
   });
 
+  protected displayGameName = (s: SimpleEntity) => s.name;
+  protected getGameValue = (s: SimpleEntity) => s.id;
+  protected gamesQueryModel: MultiSelectQueryParamModel<SimpleEntity> | null = new MultiSelectQueryParamModel<SimpleEntity>({
+    paramName: "games",
+    options: firstValueFrom(this.reportsService.getGames()),
+    serializer: (value: SimpleEntity) => value.id,
+    deserializer: (value: string, options?: SimpleEntity[]) => options!.find(g => g.id === value) || null
+  });
+
   protected lastPlayedDateQueryModel: DateRangeQueryParamModel | null = new DateRangeQueryParamModel({
     dateStartParamName: "lastPlayedDateStart",
     dateEndParamName: "lastPlayedDateEnd"
   });
 
+  protected practiceDateQueryModel: DateRangeQueryParamModel | null = new DateRangeQueryParamModel({
+    dateStartParamName: "practiceDateStart",
+    dateEndParamName: "practiceDateEnd"
+  });
+
+  protected seasonsQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "seasons"
+  });
+
+  protected seriesQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "series"
+  });
+
+  protected tracksQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "tracks"
+  });
+
   constructor(private playersReportService: PlayersReportService) {
     super();
   }
@@ -46,9 +79,7 @@ export class PlayersReportComponent extends ReportComponentBase<PlayersReportFla
     this.ctx.results = await firstValueFrom(this.playersReportService.getReportData(parameters));
 
     return {
-      metaData: this.ctx.results.metaData,
-      // might be able to pull this
-      // pagingResults: this.ctx.results.paging
+      metaData: this.ctx.results.metaData
     };
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
index 58339a26..0b215613 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -4,11 +4,15 @@ import { ReportDateRange, ReportSponsor } from "@/reports/reports-models";
 export interface PlayersReportFlatParameters {
     createdDateStart?: string;
     createdDateEnd?: string;
+    games?: string;
     lastPlayedDateStart?: string;
     lastPlayedDateEnd?: string;
+    seasons?: string;
+    series?: string;
+    sponsors?: string;
+    tracks?: string;
     pageNumber?: number;
     pageSize?: number;
-    sponsors?: string;
 }
 
 export interface PlayersReportParameters {
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
index 9a81ba35..142ecfae 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
@@ -14,6 +14,6 @@ export class PlayersReportService {
 
   getReportData(parameters: PlayersReportFlatParameters) {
     parameters = this.reportsService.applyDefaultPaging(parameters);
-    return this.http.get<ReportResults<PlayersReportRecord>>(this.apiUrl.build("reports/players"));
+    return this.http.get<ReportResults<PlayersReportRecord>>(this.apiUrl.build("reports/players", parameters));
   }
 }

From 1513083f5df52b9a66a9012e0f73d0e0158221d7 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Thu, 14 Dec 2023 16:36:10 -0500
Subject: [PATCH 09/22] Add summary card to players report. Resolves GBAPI#309
 pending feedback.

---
 .../players-report-summary-to-stats.pipe.ts   | 22 +++++++++++++++++++
 .../players-report.component.html             |  4 ++++
 .../players-report.component.ts               |  6 ++---
 .../players-report/players-report.models.ts   |  9 ++++++++
 .../players-report/players-report.service.ts  |  6 ++---
 .../src/app/reports/reports.module.ts         |  2 ++
 6 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts

diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts
new file mode 100644
index 00000000..00ea8e9f
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { PlayersReportStatSummary } from './players-report.models';
+import { ReportSummaryStat } from '../../report-stat-summary/report-stat-summary.component';
+
+@Pipe({
+  name: 'playersReportSummaryToStats'
+})
+export class PlayersReportSummaryToStatsPipe implements PipeTransform {
+
+  transform(value?: PlayersReportStatSummary): ReportSummaryStat[] {
+    if (!value)
+      return [];
+
+    return [
+      { label: "Players with Deployed Competitive Challenge", value: value.usersWithDeployedCompetitiveChallengeCount },
+      { label: "Players with Deployed Practice Challenge", value: value.usersWithDeployedPracticeChallengeCount },
+      { label: "Players with Complete Competitive Challenge", value: value.usersWithCompletedCompetitiveChallengeCount },
+      { label: "Players with Complete Practice Challenge", value: value.usersWithCompletedPracticeChallengeCount }
+    ];
+  }
+
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index 4705cab4..c783bb0f 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -16,6 +16,10 @@
         <app-parameter-sponsor name="sponsors" ngDefaultControl></app-parameter-sponsor>
     </app-report-parameters-container>
 
+    <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
+        [importantStat]="{ label: 'Total Player', value: ctx.results!.overallStats.userCount } "
+        [stats]="ctx.results?.overallStats | playersReportSummaryToStats"></app-report-stat-summary>
+
     <ng-container *ngIf="!ctx.isLoading; else loading">
         <div class="report-body mt-4">
             <table *ngIf="ctx.results?.records?.length; else noRecords"
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
index c0ff1d72..6d4783ae 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ReportComponentBase } from '../report-base.component';
-import { PlayersReportFlatParameters, PlayersReportParameters, PlayersReportRecord } from './players-report.models';
-import { ReportKey, ReportResults, ReportViewUpdate } from '@/reports/reports-models';
+import { PlayersReportFlatParameters, PlayersReportParameters, PlayersReportRecord, PlayersReportStatSummary } from './players-report.models';
+import { ReportKey, ReportResultsWithOverallStats, ReportViewUpdate } from '@/reports/reports-models';
 import { DateRangeQueryParamModel } from '@/core/models/date-range-query-param.model';
 import { PlayersReportService } from './players-report.service';
 import { firstValueFrom } from 'rxjs';
@@ -10,7 +10,7 @@ import { SimpleEntity } from '@/api/models';
 
 interface PlayersReportContext {
   isLoading: boolean;
-  results?: ReportResults<PlayersReportRecord>;
+  results?: ReportResultsWithOverallStats<PlayersReportStatSummary, PlayersReportRecord>;
   selectedParameters: PlayersReportFlatParameters;
 }
 
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
index 0b215613..b0f9394b 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -1,5 +1,6 @@
 import { PagingArgs, SimpleEntity } from "@/api/models";
 import { ReportDateRange, ReportSponsor } from "@/reports/reports-models";
+import { ReportSummaryStat } from "../../report-stat-summary/report-stat-summary.component";
 
 export interface PlayersReportFlatParameters {
     createdDateStart?: string;
@@ -34,3 +35,11 @@ export interface PlayersReportRecord {
     distinctTracksPlayedCount: number;
     distinctSeasonsPlayedCount: number;
 }
+
+export interface PlayersReportStatSummary {
+    userCount: number;
+    usersWithCompletedCompetitiveChallengeCount: number;
+    usersWithCompletedPracticeChallengeCount: number;
+    usersWithDeployedCompetitiveChallengeCount: number;
+    usersWithDeployedPracticeChallengeCount: number;
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
index 142ecfae..cb089cf1 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { PlayersReportFlatParameters, PlayersReportRecord } from './players-report.models';
+import { PlayersReportFlatParameters, PlayersReportRecord, PlayersReportStatSummary } from './players-report.models';
 import { ApiUrlService } from '@/services/api-url.service';
 import { HttpClient } from '@angular/common/http';
-import { ReportResults } from '@/reports/reports-models';
+import { ReportResults, ReportResultsWithOverallStats } from '@/reports/reports-models';
 import { ReportsService } from '@/reports/reports.service';
 
 @Injectable({ providedIn: 'root' })
@@ -14,6 +14,6 @@ export class PlayersReportService {
 
   getReportData(parameters: PlayersReportFlatParameters) {
     parameters = this.reportsService.applyDefaultPaging(parameters);
-    return this.http.get<ReportResults<PlayersReportRecord>>(this.apiUrl.build("reports/players", parameters));
+    return this.http.get<ReportResultsWithOverallStats<PlayersReportStatSummary, PlayersReportRecord>>(this.apiUrl.build("reports/players", parameters));
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 815d7814..4823b3c8 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -39,6 +39,7 @@ import { ArrayFieldToClassPipe } from './pipes/array-field-to-class.pipe';
 import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
+import { PlayersReportSummaryToStatsPipe } from './components/reports/players-report/players-report-summary-to-stats.pipe';
 
 @NgModule({
   declarations: [
@@ -78,6 +79,7 @@ import { PlayerChallengeAttemptsModalComponent } from './components/player-chall
     ReportStatSummaryComponent,
     PlayerChallengeAttemptsModalComponent,
     ParameterSponsorComponent,
+    PlayersReportSummaryToStatsPipe,
   ],
   imports: [
     CommonModule,

From 5274f772e82c308486009090aaf685e6e813b0bc Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Fri, 15 Dec 2023 15:49:37 -0500
Subject: [PATCH 10/22] Initial draft of Challenges Report. Still needs summary
 card.

---
 .../challenge-or-game-field.component.html    |   6 +-
 .../reports/challenges-report.service.ts      |  19 +++
 .../challenges-report.component.html          | 115 ++++++++++++++++++
 .../challenges-report.component.scss          |   0
 .../challenges-report.component.ts            |  68 +++++++++++
 .../challenges-report.models.ts               |  37 ++++++
 .../players-report/players-report.models.ts   |   5 -
 .../src/app/reports/reports.module.ts         |   3 +
 8 files changed, 245 insertions(+), 8 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report.service.ts
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.scss
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts

diff --git a/projects/gameboard-ui/src/app/reports/components/challenge-or-game-field/challenge-or-game-field.component.html b/projects/gameboard-ui/src/app/reports/components/challenge-or-game-field/challenge-or-game-field.component.html
index ce944d14..5a3bd3b1 100644
--- a/projects/gameboard-ui/src/app/reports/components/challenge-or-game-field/challenge-or-game-field.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/challenge-or-game-field/challenge-or-game-field.component.html
@@ -6,21 +6,21 @@
             <app-parameter-change-link [config]="{ parameterChange: { series: game.series}, disable: disableLinks }">
                 {{ game.series }}
             </app-parameter-change-link>
-            ::
         </span>
         <span *ngIf="game.season">
+            ::
             <app-parameter-change-link [config]="{ parameterChange: { seasons: game.season }, disable: disableLinks }">
                 {{ game.season }}
             </app-parameter-change-link>
-            ::
         </span>
         <span *ngIf="game.track">
+            ::
             <app-parameter-change-link [config]="{ parameterChange: { tracks: game.track }, disable: disableLinks }">
                 {{ game.track }}
             </app-parameter-change-link>
-            ::
         </span>
         <span *ngIf="challengeName">
+            ::
             <app-parameter-change-link [config]="{ parameterChange: { games: game.id }, disable: disableLinks }">
                 {{ game.name }}
             </app-parameter-change-link>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report.service.ts
new file mode 100644
index 00000000..99254f6f
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { ChallengesReportFlatParameters, ChallengesReportRecord, ChallengesReportStatSummary } from './challenges-report/challenges-report.models';
+import { Observable } from 'rxjs';
+import { ReportResultsWithOverallStats } from '@/reports/reports-models';
+import { ApiUrlService } from '@/services/api-url.service';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({ providedIn: 'root' })
+export class ChallengesReportService {
+
+  constructor(
+    private apiUrl: ApiUrlService,
+    private http: HttpClient
+  ) { }
+
+  public getReportData(parameters: ChallengesReportFlatParameters): Observable<ReportResultsWithOverallStats<ChallengesReportStatSummary, ChallengesReportRecord>> {
+    return this.http.get<ReportResultsWithOverallStats<ChallengesReportStatSummary, ChallengesReportRecord>>(this.apiUrl.build("reports/challenges", parameters));
+  }
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
new file mode 100644
index 00000000..855d03b0
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
@@ -0,0 +1,115 @@
+<div class="players-report-component">
+    <app-report-parameters-container>
+        <app-multi-select label="Series" name="series" ngDefaultControl [options]="series$ | async"
+            [(ngModel)]="seriesQueryModel"></app-multi-select>
+        <app-multi-select label="Tracks" name="tracks" ngDefaultControl [options]="tracks$ | async"
+            [(ngModel)]="tracksQueryModel"></app-multi-select>
+        <app-multi-select label="Seasons" name="seasons" ngDefaultControl [options]="seasons$ | async"
+            [(ngModel)]="seasonsQueryModel"></app-multi-select>
+        <app-multi-select label="Games" name="games" [options]="games$ | async" [(ngModel)]="gamesQueryModel"
+            [itemTemplate]="multiSelectGame" [getSearchText]="displayGameName"
+            [value]="getGameValue"></app-multi-select>
+    </app-report-parameters-container>
+
+    <!-- <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
+        [importantStat]="{ label: 'Total Player', value: ctx.results!.overallStats.userCount } "
+        [stats]="ctx.results?.overallStats | playersReportSummaryToStats"></app-report-stat-summary> -->
+
+    <ng-container *ngIf="!ctx.isLoading; else loading">
+        <div class="report-body mt-4">
+            <table *ngIf="ctx.results?.records?.length; else noRecords"
+                class="report-table table-hover gameboard-report">
+                <colgroup span="2"></colgroup>
+                <col>
+                <colgroup span="2"></colgroup>
+                <colgroup span="2"></colgroup>
+                <colgroup span="3"></colgroup>
+
+                <thead class="thead-light">
+                    <tr class="headers super-headers-row">
+                        <th scope="col" colspan="2" class="group-header">Summary</th>
+                        <th scope="col" class="group-header">Players</th>
+                        <th scope="col" colspan="2" class="group-header">
+                            Average Performance
+                        </th>
+                        <th scope="col" colspan="2" class="group-header">
+                            Deploys
+                        </th>
+                        <th scope="col" colspan="3" class="group-header">
+                            Solves
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    <tr class="headers headers-row">
+                        <td>Challenge</td>
+                        <td>Game</td>
+                        <td>Players</td>
+                        <td>Avg. Score</td>
+                        <td>Avg. Solve Time</td>
+                        <td>Competitive</td>
+                        <td>Practice</td>
+                        <td>None</td>
+                        <td>Partial</td>
+                        <td>Complete</td>
+                    </tr>
+
+                    <tr class="data-row my-2" *ngFor="let record of ctx?.results?.records">
+                        <td class="report-field">
+                            {{ record.challengeSpec.name }}
+                        </td>
+                        <td class="report-field">
+                            <app-challenge-or-game-field [game]="record.game"></app-challenge-or-game-field>
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.distinctPlayerCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            <div *ngIf="record.avgScore; else noValue">
+                                {{ record.avgScore | number:"1.0-2" }}
+                                <div class="subtle-info">of {{ record.points }}</div>
+                            </div>
+                        </td>
+                        <td class="report-field numerical">
+                            <span *ngIf="record.avgCompleteSolveTimeMs; else noValue">
+                                {{ record.avgCompleteSolveTimeMs | msToDuration }}
+                            </span>
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.deployCompetitiveCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.deployPracticeCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.solveZeroCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.solvePartialCount }}
+                        </td>
+                        <td class="report-field numerical">
+                            {{ record.solveCompleteCount }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </ng-container>
+
+    <div class="pager-container d-flex justify-content-end mt-4">
+        <div class="flex-grow-1"></div>
+        <app-select-pager [itemCount]="ctx.results?.paging?.itemCount" [pageSize]="ctx.results?.paging?.pageSize"
+            (change)="handlePagingChange($event)"></app-select-pager>
+    </div>
+</div>
+
+<ng-template #multiSelectGame let-context>
+    <span class="game-name">{{ context.name }}</span>
+</ng-template>
+
+<ng-template #noRecords>
+    <app-no-report-records recordDescription="challenges"></app-no-report-records>
+</ng-template>
+<ng-template #noValue>--</ng-template>
+<ng-template #loading><app-spinner>Loading your report...</app-spinner></ng-template>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.scss b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
new file mode 100644
index 00000000..6391b424
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { ReportComponentBase } from '../report-base.component';
+import { ChallengesReportFlatParameters, ChallengesReportParameters, ChallengesReportRecord, ChallengesReportStatSummary } from './challenges-report.models';
+import { ReportKey, ReportResultsWithOverallStats, ReportViewUpdate } from '@/reports/reports-models';
+import { ChallengesReportService } from '../challenges-report.service';
+import { MultiSelectQueryParamModel } from '@/core/models/multi-select-query-param.model';
+import { SimpleEntity } from '@/api/models';
+
+export interface ChallengesReportContext {
+  isLoading: boolean,
+  results?: ReportResultsWithOverallStats<ChallengesReportStatSummary, ChallengesReportRecord>
+  selectedParameters: ChallengesReportFlatParameters,
+}
+
+@Component({
+  selector: 'app-challenges-report',
+  templateUrl: './challenges-report.component.html',
+  styleUrls: ['./challenges-report.component.scss']
+})
+export class ChallengesReportComponent extends ReportComponentBase<ChallengesReportFlatParameters, ChallengesReportParameters> {
+  protected ctx: ChallengesReportContext = {
+    isLoading: true,
+    selectedParameters: {}
+  };
+
+  protected games$ = this.reportsService.getGames();
+  protected seasons$ = this.reportsService.getSeasons();
+  protected series$ = this.reportsService.getSeries();
+  protected tracks$ = this.reportsService.getTracks();
+
+  protected displayGameName = (s: SimpleEntity) => s.name;
+  protected getGameValue = (s: SimpleEntity) => s.id;
+  protected gamesQueryModel: MultiSelectQueryParamModel<SimpleEntity> | null = new MultiSelectQueryParamModel<SimpleEntity>({
+    paramName: "games",
+    options: firstValueFrom(this.reportsService.getGames()),
+    serializer: (value: SimpleEntity) => value.id,
+    deserializer: (value: string, options?: SimpleEntity[]) => options!.find(g => g.id === value) || null
+  });
+
+  protected seasonsQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "seasons"
+  });
+
+  protected seriesQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "series"
+  });
+
+  protected tracksQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
+    paramName: "tracks"
+  });
+
+  constructor(private challengesReportService: ChallengesReportService) {
+    super();
+  }
+
+  protected async updateView(parameters: ChallengesReportFlatParameters): Promise<ReportViewUpdate> {
+    if (!this.challengesReportService)
+      return { metaData: await firstValueFrom(this.reportsService.getReportMetaData(ReportKey.ChallengesReport)) };
+
+    this.ctx.selectedParameters = parameters;
+    this.ctx.isLoading = true;
+    this.ctx.results = await firstValueFrom(this.challengesReportService.getReportData(parameters));
+    this.ctx.isLoading = false;
+
+    return { metaData: this.ctx.results.metaData };
+  }
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
new file mode 100644
index 00000000..bb1d5080
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
@@ -0,0 +1,37 @@
+import { SimpleEntity } from "@/api/models";
+import { PlayerMode } from "@/api/player-models";
+import { ReportGame } from "@/reports/reports-models";
+
+export interface ChallengesReportFlatParameters {
+    games?: string;
+    seasons?: string;
+    series?: string;
+    tracks?: string;
+    pageNumber?: number;
+    pageSize?: number;
+}
+
+export interface ChallengesReportParameters {
+
+}
+
+export interface ChallengesReportRecord {
+    challengeSpec: SimpleEntity;
+    game: ReportGame;
+    playerModeCurrent: PlayerMode,
+    points: number;
+    tags: string[];
+
+    avgScore?: number;
+    avgCompleteSolveTimeMs?: number;
+    deployCompetitiveCount: number;
+    deployPracticeCount: number;
+    distinctPlayerCount: number;
+    solveCompleteCount: number;
+    solvePartialCount: number;
+    solveZeroCount: number;
+}
+
+export interface ChallengesReportStatSummary {
+
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
index b0f9394b..fa067237 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -1,6 +1,5 @@
 import { PagingArgs, SimpleEntity } from "@/api/models";
 import { ReportDateRange, ReportSponsor } from "@/reports/reports-models";
-import { ReportSummaryStat } from "../../report-stat-summary/report-stat-summary.component";
 
 export interface PlayersReportFlatParameters {
     createdDateStart?: string;
@@ -17,10 +16,6 @@ export interface PlayersReportFlatParameters {
 }
 
 export interface PlayersReportParameters {
-    createdDate?: ReportDateRange;
-    lastPlayedDate?: ReportDateRange;
-    sponsors?: SimpleEntity;
-    paging: PagingArgs;
 }
 
 export interface PlayersReportRecord {
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 4823b3c8..5c2cbf2b 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -40,6 +40,7 @@ import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 import { PlayersReportSummaryToStatsPipe } from './components/reports/players-report/players-report-summary-to-stats.pipe';
+import { ChallengesReportComponent } from './components/reports/challenges-report/challenges-report.component';
 
 @NgModule({
   declarations: [
@@ -47,6 +48,7 @@ import { PlayersReportSummaryToStatsPipe } from './components/reports/players-re
     ArrayFieldToClassPipe,
     CountToTooltipClassPipe,
     ChallengeAttemptSummaryComponent,
+    ChallengesReportComponent,
     EnrollmentReportComponent,
     EnrollmentReportByGameComponent,
     EnrollmentReportSponsorPlayerCountModalComponent,
@@ -89,6 +91,7 @@ import { PlayersReportSummaryToStatsPipe } from './components/reports/players-re
         path: '',
         component: ReportPageComponent,
         children: [
+          { path: 'challenges', component: ChallengesReportComponent, title: "Challenges Report" },
           { path: 'enrollment', component: EnrollmentReportComponent, title: "Enrollment Report" },
           { path: 'practice-area', component: PracticeModeReportComponent, title: "Practice Area Report" },
           { path: 'players', component: PlayersReportComponent, title: "Players Report" },

From 661449ffe208e7c1d0e556fc9ce6377d711bb0a1 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 18 Dec 2023 11:27:04 -0500
Subject: [PATCH 11/22] Mvp of #310.

---
 .../report-stat-summary.component.scss        |  2 ++
 .../report-stat-summary.component.ts          |  4 +--
 ...challenges-report-summary-to-stats.pipe.ts | 30 +++++++++++++++++++
 .../challenges-report.component.html          |  6 ++--
 .../challenges-report.models.ts               | 12 +++++++-
 .../enrollment-report.component.ts            |  2 +-
 .../src/app/reports/reports.module.ts         |  4 ++-
 7 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts

diff --git a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.scss b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.scss
index 99cf0a70..71c1ec39 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.scss
+++ b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.scss
@@ -22,6 +22,8 @@ alert {
 
 .stat {
     flex-wrap: wrap;
+    flex-basis: 48%;
+    flex-grow: 1;
     margin: 0 1rem;
     text-align: center;
 
diff --git a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.ts b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.ts
index f1c405c3..0ea0644c 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 export interface ReportSummaryStat {
   label: string;
-  value: number | string;
+  value?: number | string;
   additionalInfo?: string;
 }
 
@@ -22,6 +22,6 @@ export class ReportStatSummaryComponent implements OnChanges {
     this.allStats = [
       this.importantStat,
       ...this.stats
-    ].filter(e => !!e) as ReportSummaryStat[];
+    ].filter(e => !!e && e.value) as ReportSummaryStat[];
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts
new file mode 100644
index 00000000..a5569258
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts
@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ReportSummaryStat } from '../../report-stat-summary/report-stat-summary.component';
+import { ChallengesReportStatSummary } from './challenges-report.models';
+
+@Pipe({ name: 'challengesReportSummaryToStats' })
+export class ChallengesReportSummaryToStatsPipe implements PipeTransform {
+
+  transform(stats: ChallengesReportStatSummary): ReportSummaryStat[] {
+    if (!stats)
+      return [];
+
+    const outStats: ReportSummaryStat[] = [
+      { label: "Challenge Attempt", value: stats.deployCount }
+    ];
+
+    if (stats.archivedDeployCount > 0) {
+      outStats.push({ label: "Archived Attempt", value: stats.archivedDeployCount });
+    }
+
+    if (stats.mostPopularCompetitiveChallenge) {
+      outStats.push({ label: "Most Popular Competitive Challenge", value: stats.mostPopularCompetitiveChallenge.challengeName, additionalInfo: `${stats.mostPopularCompetitiveChallenge.deployCount} attempts` });
+    }
+
+    if (stats.mostPopularPracticeChallenge) {
+      outStats.push({ label: "Most Popular Practice Challenge", value: stats.mostPopularPracticeChallenge.challengeName, additionalInfo: `${stats.mostPopularPracticeChallenge.deployCount} attempts` });
+    }
+
+    return outStats;
+  }
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
index 855d03b0..affc62b3 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
@@ -11,9 +11,9 @@
             [value]="getGameValue"></app-multi-select>
     </app-report-parameters-container>
 
-    <!-- <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
-        [importantStat]="{ label: 'Total Player', value: ctx.results!.overallStats.userCount } "
-        [stats]="ctx.results?.overallStats | playersReportSummaryToStats"></app-report-stat-summary> -->
+    <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
+        [importantStat]="{ label: 'Challenge', value: ctx.results!.overallStats.specCount} "
+        [stats]="ctx.results!.overallStats | challengesReportSummaryToStats"></app-report-stat-summary>
 
     <ng-container *ngIf="!ctx.isLoading; else loading">
         <div class="report-body mt-4">
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
index bb1d5080..44667149 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
@@ -32,6 +32,16 @@ export interface ChallengesReportRecord {
     solveZeroCount: number;
 }
 
-export interface ChallengesReportStatSummary {
+export interface ChallengesReportStatSummaryPopularChallenge {
+    challengeName: string;
+    gameName: string;
+    deployCount: number;
+}
 
+export interface ChallengesReportStatSummary {
+    archivedDeployCount: number;
+    deployCount: number;
+    specCount: number;
+    mostPopularCompetitiveChallenge?: ChallengesReportStatSummaryPopularChallenge;
+    mostPopularPracticeChallenge?: ChallengesReportStatSummaryPopularChallenge;
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
index c610de4e..b3d311e7 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
@@ -91,7 +91,7 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
       { ...this.selectedParameters, pageNumber: undefined, pageSize: undefined, tab: undefined }
     );
 
-    if (!this.ctx?.stats$ || !areDeepEqual) {
+    if (!this.summaryStats || !areDeepEqual) {
       this.ctx = {
         stats$: this.loadSummaryStats(parameters)
       };
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 5c2cbf2b..2b6d8a25 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -5,6 +5,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CoreModule } from '../core/core.module';
 import { ChallengeAttemptSummaryComponent } from './components/challenge-attempt-summary/challenge-attempt-summary.component';
 import { ChallengeOrGameFieldComponent } from './components/challenge-or-game-field/challenge-or-game-field.component';
+import { ChallengesReportComponent } from './components/reports/challenges-report/challenges-report.component';
+import { ChallengesReportSummaryToStatsPipe } from './components/reports/challenges-report/challenges-report-summary-to-stats.pipe';
 import { EnrollmentReportByGameComponent } from './components/reports/enrollment-report/enrollment-report-by-game/enrollment-report-by-game.component';
 import { EnrollmentReportSponsorPlayerCountModalComponent } from './components/reports/enrollment-report/enrollment-report-sponsor-player-count-modal/enrollment-report-sponsor-player-count-modal.component';
 import { EnrollmentReportSummaryComponent } from './components/reports/enrollment-report/enrollment-report-summary/enrollment-report-summary.component';
@@ -40,7 +42,6 @@ import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 import { PlayersReportSummaryToStatsPipe } from './components/reports/players-report/players-report-summary-to-stats.pipe';
-import { ChallengesReportComponent } from './components/reports/challenges-report/challenges-report.component';
 
 @NgModule({
   declarations: [
@@ -82,6 +83,7 @@ import { ChallengesReportComponent } from './components/reports/challenges-repor
     PlayerChallengeAttemptsModalComponent,
     ParameterSponsorComponent,
     PlayersReportSummaryToStatsPipe,
+    ChallengesReportSummaryToStatsPipe,
   ],
   imports: [
     CommonModule,

From 14b915fb1d5952587bef07d7eea4ca0ebd7fd0f2 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 18 Dec 2023 13:01:08 -0500
Subject: [PATCH 12/22] First draft of responsive nav. Need to adjust to avoid
 menu markup duplication.

---
 .../src/app/components/nav/nav.component.html | 53 +++++++++++++++++-
 .../src/app/components/nav/nav.component.scss | 55 ++++++++++++++++---
 .../src/app/components/nav/nav.component.ts   |  2 +
 .../src/app/services/font-awesome.service.ts  |  2 +
 4 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.html b/projects/gameboard-ui/src/app/components/nav/nav.component.html
index e48119ea..9ccca02b 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.html
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.html
@@ -1,6 +1,5 @@
-<nav [class]="customBackground">
+<nav [class]="customBackground" class="nav-lg">
     <div class="nav-items d-flex align-items-center justify-content-end">
-        <app-gameboard-signalr-hubs></app-gameboard-signalr-hubs>
         <div class="flex-grow-1"></div>
         <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="['/home']">Home</a>
         <ng-container *ngIf="(toc$ | async)?.length">
@@ -32,6 +31,56 @@
     </div>
 </nav>
 
+<nav class="nav-sm">
+    <div class="flex-grow-1"></div>
+    <div class="btn-group" dropdown placement="bottom right">
+        <button id="nav-toggle" dropdownToggle type="button" class="btn btn-info dropdown-toggle d-block"
+            aria-controls="dropdown-animated">
+            <fa-icon [icon]="fa.bars"></fa-icon>
+        </button>
+
+        <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+            <li>
+                <a routerLinkActive="active" [routerLink]="['/home']">Home</a>
+            </li>
+            <ng-container *ngIf="(toc$ | async)?.length">
+                <li *ngFor="let t of toc$ | async">
+                    <a [routerLink]="['doc', t.link]" routerLinkActive="active">{{t.display}}</a>
+                </li>
+            </ng-container>
+            <li *ngIf="isPracticeModeEnabled">
+                <a routerLinkActive="active" [routerLink]="['practice']">Practice</a>
+            </li>
+            <ng-container *ngIf="user$ | async as user; else unauthed">
+                <li>
+                    <a routerLinkActive="active" [routerLink]="['support']">
+                        <span>Support</span>
+                        <app-support-pill></app-support-pill>
+                    </a>
+                </li>
+                <li>
+                    <a routerLinkActive="active" [routerLink]="profileUrl">Profile</a>
+                </li>
+                <li *ngIf="canAccessReporting$ | async">
+                    <a routerLinkActive="active" [routerLink]="['/reports']">
+                        Reports
+                    </a>
+                    <span class="badge badge-info">[BETA]</span>
+                </li>
+                <li *ngIf="user.isAdmin || user.isDirector || user.isRegistrar ||
+                                user.isDesigner || user.isObserver || user.isSupport">
+                    <a routerLinkActive="active" [routerLink]="['/admin']">
+                        Admin
+                    </a>
+                </li>
+                <li *ngIf="user?.id">
+                    <a (click)="logout()">Log out</a>
+                </li>
+            </ng-container>
+        </ul>
+    </div>
+</nav>
+
 <ng-template #unauthed>
     <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="profileUrl">Log in</a>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.scss b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
index b1a803da..f5140254 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.scss
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
@@ -4,19 +4,56 @@
     }
 }
 
-nav a {
-    font-size: 1.5rem;
+@media (max-width: 800px) {
+    .nav-sm {
+        display: flex;
+
+        .badge {
+            display: inline-block;
+            font-size: 0.5rem !important;
+            // margin-right: 12px;
+        }
+
+        li {
+            padding-left: 4px;
+        }
+    }
+
+    .nav-lg {
+        display: none;
+    }
 }
 
-.nav-items {
-    a {
+@media(min-width: 801px) {
+    .nav-sm {
+        display: none !important;
+    }
+
+    .nav-lg {
         display: block;
+
+        nav.nav-lg a {
+            font-size: 1.5rem;
+    
+            .nav-items {
+                a {
+                    display: block;
+                }
+            }
+        }
+
+        .badge {
+            display: inline-block;
+            font-size: 0.75rem;
+            margin-left: -4px;
+            margin-right: 12px;
+        }
     }
 }
 
-.badge {
-    display: inline-block;
-    font-size: 0.75rem;
-    margin-left: -4px;
-    margin-right: 12px;
+
+.nav-sm {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
 }
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.ts b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
index 7de1d20c..72206902 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.ts
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
@@ -10,6 +10,7 @@ import { Title } from '@angular/platform-browser';
 import { Observable, map } from 'rxjs';
 import { ReportsService } from '@/reports/reports.service';
 import { RouterService } from '@/services/router.service';
+import { fa } from '@/services/font-awesome.service';
 
 @Component({
   selector: 'app-nav',
@@ -23,6 +24,7 @@ export class AppNavComponent implements OnInit {
   customBackground = "";
   env: any;
 
+  protected fa = fa;
   protected isPracticeModeEnabled = false;
   protected profileUrl?: string;
 
diff --git a/projects/gameboard-ui/src/app/services/font-awesome.service.ts b/projects/gameboard-ui/src/app/services/font-awesome.service.ts
index 063a47be..b876bf78 100644
--- a/projects/gameboard-ui/src/app/services/font-awesome.service.ts
+++ b/projects/gameboard-ui/src/app/services/font-awesome.service.ts
@@ -4,6 +4,7 @@ import {
   IconDefinition,
   faArrowLeft,
   faArrowUp,
+  faBars,
   faBook,
   faBolt,
   faCaretDown,
@@ -58,6 +59,7 @@ export const fa = {
   arrowDown: faLongArrowAltDown,
   arrowLeft: faArrowLeft,
   arrowUp: faArrowUp,
+  bars: faBars,
   bolt: faBolt,
   book: faBook,
   caretDown: faCaretDown,

From 14486574db890786e2579e2f33ae704d58462926 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 18 Dec 2023 15:23:01 -0500
Subject: [PATCH 13/22] Removed unnecessary generic type on ReportComponentBase

---
 .../src/app/components/nav/nav.component.scss | 11 +++----
 .../gamespace-quiz.component.ts               |  2 +-
 .../report-stat-summary.component.html        | 18 +++++------
 ...challenges-report-summary-to-stats.pipe.ts | 11 +++----
 .../challenges-report.component.html          |  2 +-
 .../challenges-report.component.ts            |  4 +--
 .../challenges-report.models.ts               |  8 ++---
 .../enrollment-report.component.ts            | 12 +++----
 .../enrollment-report.models.ts               | 11 -------
 .../players-report-summary-to-stats.pipe.ts   |  6 ++--
 .../players-report.component.html             |  2 +-
 .../players-report.component.ts               |  4 +--
 .../players-report/players-report.models.ts   |  7 ++--
 ...rt-by-player-mode-performance.component.ts |  2 +-
 .../practice-mode-report.component.ts         | 12 +++----
 .../practice-mode-report.models.ts            | 11 -------
 .../reports/report-base.component.ts          |  2 +-
 .../support-report.component.ts               |  4 +--
 .../support-report/support-report.models.ts   | 15 +--------
 .../support-report/support-report.service.ts  | 32 +------------------
 20 files changed, 48 insertions(+), 128 deletions(-)

diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.scss b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
index f5140254..94a7d997 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.scss
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
@@ -32,13 +32,10 @@
     .nav-lg {
         display: block;
 
-        nav.nav-lg a {
-            font-size: 1.5rem;
-    
-            .nav-items {
-                a {
-                    display: block;
-                }
+        .nav-items {
+            a {
+                display: block;
+                font-size: 1.5rem;
             }
         }
 
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index a5fd11de..e04954ae 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -59,7 +59,7 @@ export class GamespaceQuizComponent implements OnInit, OnChanges {
       // and flushed if the user submits answers during the debounce window
       this._updatePendingAnswers$.pipe(
         switchMap(update => of(update).pipe(
-          delay(5000),
+          delay(3000),
           takeUntil(this._answersSubmitted$)
         )),
         switchMap(update => this.challengesService.savePendingSubmission(update.challengeId, {
diff --git a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
index 65f12b99..809d510c 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
@@ -7,19 +7,19 @@ <h2 class="text-center text-upper mb-5">Summary</h2>
                 <div *ngIf="importantStat" class="stat mb-5">
                     <p class="value text-info">{{ importantStat.value }}</p>
                     <p class="label">
-                        {{ importantStat.label | pluralizer:importantStat.value }}
+                        {{ importantStat.label }}
                         <span class="addl-info subtle-color" *ngIf="importantStat.additionalInfo">
-                            {{importantStat.additionalInfo}}</span>
+                            {{importantStat.additionalInfo}}
+                        </span>
                     </p>
                 </div>
-                <ul class="overall-stats d-flex align-items-center justify-content-center mb-5">
+                <ul class="overall-stats d-flex align-items-start justify-content-center mb-5">
                     <div *ngFor="let stat of stats" class="stat">
                         <p class="value text-info">{{ stat.value }}</p>
-                        <p class="label">
-                            {{ stat.label | pluralizer:stat.value }}
-                            <span class="addl-info subtle-color" *ngIf="stat.additionalInfo">
-                                {{stat.additionalInfo}}</span>
-                        </p>
+                        <p class="label">{{ stat.label }}</p>
+                        <div class="addl-info subtle-color" *ngIf="stat.additionalInfo">
+                            {{stat.additionalInfo}}
+                        </div>
                     </div>
                 </ul>
             </div>
@@ -30,7 +30,7 @@ <h2 class="text-center text-upper mb-5">Summary</h2>
 <ng-template #collapsedView>
     <ul class="d-flex">
         <li *ngFor="let stat of allStats" class="d-block mr-4">
-            <strong>{{ stat.label | pluralizer:stat.value }}: </strong> <span class="text-info">{{stat.value}}</span>
+            <strong>{{ stat.label }}: </strong> <span class="text-info">{{stat.value}}</span>
         </li>
     </ul>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts
index a5569258..fb0f72b9 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report-summary-to-stats.pipe.ts
@@ -10,19 +10,16 @@ export class ChallengesReportSummaryToStatsPipe implements PipeTransform {
       return [];
 
     const outStats: ReportSummaryStat[] = [
-      { label: "Challenge Attempt", value: stats.deployCount }
+      { label: "Competitive Challenge Attempts", value: stats.deployCompetitiveCount },
+      { label: "Practice Challenge Attempts", value: stats.deployPracticeCount },
     ];
 
-    if (stats.archivedDeployCount > 0) {
-      outStats.push({ label: "Archived Attempt", value: stats.archivedDeployCount });
-    }
-
     if (stats.mostPopularCompetitiveChallenge) {
-      outStats.push({ label: "Most Popular Competitive Challenge", value: stats.mostPopularCompetitiveChallenge.challengeName, additionalInfo: `${stats.mostPopularCompetitiveChallenge.deployCount} attempts` });
+      outStats.push({ label: "Attempts On Most Popular Competitive Challenge", value: stats.mostPopularCompetitiveChallenge.deployCount, additionalInfo: `"${stats.mostPopularCompetitiveChallenge.challengeName}"` });
     }
 
     if (stats.mostPopularPracticeChallenge) {
-      outStats.push({ label: "Most Popular Practice Challenge", value: stats.mostPopularPracticeChallenge.challengeName, additionalInfo: `${stats.mostPopularPracticeChallenge.deployCount} attempts` });
+      outStats.push({ label: "Attempts on Most Popular Practice Challenge", value: stats.mostPopularPracticeChallenge.deployCount, additionalInfo: `"${stats.mostPopularPracticeChallenge.challengeName}"` });
     }
 
     return outStats;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
index affc62b3..49ab297d 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.html
@@ -12,7 +12,7 @@
     </app-report-parameters-container>
 
     <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
-        [importantStat]="{ label: 'Challenge', value: ctx.results!.overallStats.specCount} "
+        [importantStat]="{ label: 'Challenges Configured', value: ctx.results!.overallStats.specCount} "
         [stats]="ctx.results!.overallStats | challengesReportSummaryToStats"></app-report-stat-summary>
 
     <ng-container *ngIf="!ctx.isLoading; else loading">
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
index 6391b424..219ca063 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import { ReportComponentBase } from '../report-base.component';
-import { ChallengesReportFlatParameters, ChallengesReportParameters, ChallengesReportRecord, ChallengesReportStatSummary } from './challenges-report.models';
+import { ChallengesReportFlatParameters, ChallengesReportRecord, ChallengesReportStatSummary } from './challenges-report.models';
 import { ReportKey, ReportResultsWithOverallStats, ReportViewUpdate } from '@/reports/reports-models';
 import { ChallengesReportService } from '../challenges-report.service';
 import { MultiSelectQueryParamModel } from '@/core/models/multi-select-query-param.model';
@@ -18,7 +18,7 @@ export interface ChallengesReportContext {
   templateUrl: './challenges-report.component.html',
   styleUrls: ['./challenges-report.component.scss']
 })
-export class ChallengesReportComponent extends ReportComponentBase<ChallengesReportFlatParameters, ChallengesReportParameters> {
+export class ChallengesReportComponent extends ReportComponentBase<ChallengesReportFlatParameters> {
   protected ctx: ChallengesReportContext = {
     isLoading: true,
     selectedParameters: {}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
index 44667149..5e3f318a 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/challenges-report/challenges-report.models.ts
@@ -11,10 +11,6 @@ export interface ChallengesReportFlatParameters {
     pageSize?: number;
 }
 
-export interface ChallengesReportParameters {
-
-}
-
 export interface ChallengesReportRecord {
     challengeSpec: SimpleEntity;
     game: ReportGame;
@@ -39,8 +35,8 @@ export interface ChallengesReportStatSummaryPopularChallenge {
 }
 
 export interface ChallengesReportStatSummary {
-    archivedDeployCount: number;
-    deployCount: number;
+    deployCompetitiveCount: number;
+    deployPracticeCount: number;
     specCount: number;
     mostPopularCompetitiveChallenge?: ChallengesReportStatSummaryPopularChallenge;
     mostPopularPracticeChallenge?: ChallengesReportStatSummaryPopularChallenge;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
index b3d311e7..901d9aa7 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { EnrollmentReportFlatParameters, EnrollmentReportParameters, EnrollmentReportStatSummary, EnrollmentReportTab } from './enrollment-report.models';
+import { EnrollmentReportFlatParameters, EnrollmentReportStatSummary, EnrollmentReportTab } from './enrollment-report.models';
 import { ReportKey, ReportSponsor, ReportViewUpdate } from '@/reports/reports-models';
 import { EnrollmentReportService } from '@/reports/components/reports/enrollment-report/enrollment-report.service';
 import { Observable, first, firstValueFrom, map, of } from 'rxjs';
@@ -24,7 +24,7 @@ interface EnrollmentReportSummaryStats {
   templateUrl: './enrollment-report.component.html',
   styleUrls: ['./enrollment-report.component.scss']
 })
-export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentReportFlatParameters, EnrollmentReportParameters> {
+export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentReportFlatParameters> {
   games$ = this.reportsService.getGames();
   seasons$ = this.reportsService.getSeasons();
   series$ = this.reportsService.getSeries();
@@ -126,10 +126,10 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
         };
 
         const otherStats = [
-          { label: "Game", value: stats.distinctGameCount },
-          { label: "Player", value: stats.distinctPlayerCount },
-          { label: "Team", value: stats.distinctTeamCount },
-          { label: "Sponsor", value: stats.distinctSponsorCount }
+          { label: "Games", value: stats.distinctGameCount },
+          { label: "Players", value: stats.distinctPlayerCount },
+          { label: "Teams", value: stats.distinctTeamCount },
+          { label: "Sponsors", value: stats.distinctSponsorCount }
         ]
           .filter(e => !!e)
           .map(e => e! as ReportSummaryStat);
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
index c0f8c591..8c4d4177 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
@@ -16,17 +16,6 @@ export interface EnrollmentReportFlatParameters {
     tracks?: string;
 }
 
-export interface EnrollmentReportParameters {
-    enrollDate?: ReportDateRange;
-    paging: PagingArgs;
-    seasons: string[];
-    series: string[];
-    sponsors: SimpleEntity[];
-    tab?: EnrollmentReportTab;
-    tracks: string[];
-}
-
-
 export interface EnrollmentReportRecord {
     player: {
         id: string;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts
index 00ea8e9f..13266f8e 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report-summary-to-stats.pipe.ts
@@ -2,9 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { PlayersReportStatSummary } from './players-report.models';
 import { ReportSummaryStat } from '../../report-stat-summary/report-stat-summary.component';
 
-@Pipe({
-  name: 'playersReportSummaryToStats'
-})
+@Pipe({ name: 'playersReportSummaryToStats' })
 export class PlayersReportSummaryToStatsPipe implements PipeTransform {
 
   transform(value?: PlayersReportStatSummary): ReportSummaryStat[] {
@@ -13,8 +11,8 @@ export class PlayersReportSummaryToStatsPipe implements PipeTransform {
 
     return [
       { label: "Players with Deployed Competitive Challenge", value: value.usersWithDeployedCompetitiveChallengeCount },
-      { label: "Players with Deployed Practice Challenge", value: value.usersWithDeployedPracticeChallengeCount },
       { label: "Players with Complete Competitive Challenge", value: value.usersWithCompletedCompetitiveChallengeCount },
+      { label: "Players with Deployed Practice Challenge", value: value.usersWithDeployedPracticeChallengeCount },
       { label: "Players with Complete Practice Challenge", value: value.usersWithCompletedPracticeChallengeCount }
     ];
   }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index c783bb0f..2ff742df 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -9,7 +9,7 @@
         <app-multi-select label="Games" name="games" [options]="games$ | async" [(ngModel)]="gamesQueryModel"
             [itemTemplate]="multiSelectGame" [getSearchText]="displayGameName"
             [value]="getGameValue"></app-multi-select>
-        <app-parameter-date-range label="Signup Date" ngDefaultControl
+        <app-parameter-date-range label="Account Creation Date" ngDefaultControl
             [(ngModel)]="createdDateQueryModel"></app-parameter-date-range>
         <app-parameter-date-range label="Last Played Date" ngDefaultControl
             [(ngModel)]="lastPlayedDateQueryModel"></app-parameter-date-range>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
index 6d4783ae..a52ef5d3 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ReportComponentBase } from '../report-base.component';
-import { PlayersReportFlatParameters, PlayersReportParameters, PlayersReportRecord, PlayersReportStatSummary } from './players-report.models';
+import { PlayersReportFlatParameters, PlayersReportRecord, PlayersReportStatSummary } from './players-report.models';
 import { ReportKey, ReportResultsWithOverallStats, ReportViewUpdate } from '@/reports/reports-models';
 import { DateRangeQueryParamModel } from '@/core/models/date-range-query-param.model';
 import { PlayersReportService } from './players-report.service';
@@ -19,7 +19,7 @@ interface PlayersReportContext {
   templateUrl: './players-report.component.html',
   styleUrls: ['./players-report.component.scss']
 })
-export class PlayersReportComponent extends ReportComponentBase<PlayersReportFlatParameters, PlayersReportParameters> {
+export class PlayersReportComponent extends ReportComponentBase<PlayersReportFlatParameters> {
   protected ctx: PlayersReportContext = {
     isLoading: false,
     selectedParameters: {}
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
index fa067237..96065200 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -1,5 +1,5 @@
-import { PagingArgs, SimpleEntity } from "@/api/models";
-import { ReportDateRange, ReportSponsor } from "@/reports/reports-models";
+import { SimpleEntity } from "@/api/models";
+import { ReportSponsor } from "@/reports/reports-models";
 
 export interface PlayersReportFlatParameters {
     createdDateStart?: string;
@@ -15,9 +15,6 @@ export interface PlayersReportFlatParameters {
     pageSize?: number;
 }
 
-export interface PlayersReportParameters {
-}
-
 export interface PlayersReportRecord {
     user: SimpleEntity;
     sponsor: ReportSponsor;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report-by-player-mode-performance/practice-mode-report-by-player-mode-performance.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report-by-player-mode-performance/practice-mode-report-by-player-mode-performance.component.ts
index 4f6c9107..9572b854 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report-by-player-mode-performance/practice-mode-report-by-player-mode-performance.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report-by-player-mode-performance/practice-mode-report-by-player-mode-performance.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { PracticeModeReportByPlayerModePerformanceRecord, PracticeModeReportByUserRecord, PracticeModeReportFlatParameters, PracticeModeReportOverallStats, PracticeModeReportParameters } from '../practice-mode-report.models';
+import { PracticeModeReportByPlayerModePerformanceRecord, PracticeModeReportByUserRecord, PracticeModeReportFlatParameters, PracticeModeReportOverallStats } from '../practice-mode-report.models';
 import { ReportResultsWithOverallStats } from '@/reports/reports-models';
 import { firstValueFrom } from 'rxjs';
 import { PracticeModeReportService } from '@/reports/components/reports/practice-mode-report/practice-mode-report.service';
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
index 267c0699..5db9cef5 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { PracticeModeReportParameters, PracticeModeReportByChallengeRecord, PracticeModeReportGrouping, PracticeModeReportFlatParameters, PracticeModeReportOverallStats } from './practice-mode-report.models';
+import { PracticeModeReportByChallengeRecord, PracticeModeReportGrouping, PracticeModeReportFlatParameters, PracticeModeReportOverallStats } from './practice-mode-report.models';
 import { ReportKey, ReportResults, ReportSponsor } from '@/reports/reports-models';
 import { Observable, firstValueFrom } from 'rxjs';
 import { SimpleEntity } from '@/api/models';
@@ -15,7 +15,7 @@ import { ReportSummaryStat } from '../../report-stat-summary/report-stat-summary
   styleUrls: ['./practice-mode-report.component.scss']
 })
 export class PracticeModeReportComponent
-  extends ReportComponentBase<PracticeModeReportFlatParameters, PracticeModeReportParameters> {
+  extends ReportComponentBase<PracticeModeReportFlatParameters> {
   protected overallStats: ReportSummaryStat[] = [];
   protected games$: Observable<SimpleEntity[]> = this.reportsService.getGames();
   protected seasons$: Observable<string[]> = this.reportsService.getSeasons();
@@ -71,10 +71,10 @@ export class PracticeModeReportComponent
 
   protected handleOverallStatsUpdate(stats: PracticeModeReportOverallStats) {
     this.overallStats = [
-      { label: "Attempt", value: stats.attemptCount },
-      { label: "Challenge", value: stats.challengeCount },
-      { label: "Player", value: stats.playerCount },
-      { label: "Sponsor", value: stats.sponsorCount }
+      { label: "Attempts", value: stats.attemptCount },
+      { label: "Challenges", value: stats.challengeCount },
+      { label: "Players", value: stats.playerCount },
+      { label: "Sponsors", value: stats.sponsorCount }
     ];
   }
 
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.models.ts
index 7a75ed61..145e78c8 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.models.ts
@@ -28,17 +28,6 @@ export interface PracticeModeReportFlatParameters {
     grouping: PracticeModeReportGrouping;
 }
 
-export interface PracticeModeReportParameters {
-    practiceDate: ReportDateRange,
-    games: SimpleEntity[],
-    seasons: string[],
-    series: string[],
-    sponsors: ReportSponsor[],
-    tracks: string[],
-    paging: PagingArgs,
-    grouping: PracticeModeReportGrouping;
-}
-
 export interface PracticeModeReportRecord { }
 
 export interface PracticeModeReportByUserRecord extends PracticeModeReportRecord {
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
index c0f880dd..b39dc6e0 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
@@ -9,7 +9,7 @@ import { ObjectService } from "@/services/object.service";
 import { RouterService } from "@/services/router.service";
 
 @Component({ template: '', providers: [UnsubscriberService] })
-export abstract class ReportComponentBase<TFlatParameters extends {}, TStructuredParameters extends {}> implements OnInit {
+export abstract class ReportComponentBase<TFlatParameters extends {}> implements OnInit {
     // manually injected services (so the inheritors don't have to resolve dependencies)
     protected readonly activeReportService = inject(ActiveReportService);
     protected readonly reportsService = inject(ReportsService);
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.component.ts
index 2ce3eac4..05fcc82b 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { SupportReportFlatParameters, SupportReportParameters, SupportReportRecord } from './support-report.models';
+import { SupportReportFlatParameters, SupportReportRecord } from './support-report.models';
 import { ReportResults, ReportViewUpdate } from '../../../reports-models';
 import { firstValueFrom } from 'rxjs';
 import { SupportReportService } from '@/reports/components/reports/support-report/support-report.service';
@@ -26,7 +26,7 @@ interface SupportReportContext {
   templateUrl: './support-report.component.html',
   styleUrls: ['./support-report.component.scss']
 })
-export class SupportReportComponent extends ReportComponentBase<SupportReportFlatParameters, SupportReportParameters> {
+export class SupportReportComponent extends ReportComponentBase<SupportReportFlatParameters> {
   protected ticketLabels$ = this.reportService.getTicketLabels();
   protected ticketStatuses$ = this.reportService.getTicketStatuses();
 
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.models.ts
index f06c3447..c1091914 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.models.ts
@@ -1,17 +1,4 @@
-import { PagingArgs, SimpleEntity } from "projects/gameboard-ui/src/app/api/models";
-import { ReportDateRange, ReportMetaData, ReportResults, ReportTimeSpan } from "../../../reports-models";
-import { ReportGameChallengeSpec } from "../../parameters/parameter-game-challengespec/parameter-game-challengespec.component";
-
-export interface SupportReportParameters {
-    gameChallengeSpec: ReportGameChallengeSpec;
-    labels: string[];
-    paging: PagingArgs,
-    timeSinceOpen: ReportTimeSpan,
-    timeSinceUpdate: ReportTimeSpan,
-    openedDateRange: ReportDateRange;
-    openedTimeWindow?: SupportReportTicketWindow;
-    statuses?: string[];
-}
+import { SimpleEntity } from "projects/gameboard-ui/src/app/api/models";
 
 export interface SupportReportFlatParameters {
     challengeSpecId?: string;
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
index 79c7a97b..092dc771 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { SupportReportFlatParameters, SupportReportParameters, SupportReportRecord } from './support-report.models';
-import { ObjectService } from '../../../../services/object.service';
+import { SupportReportFlatParameters, SupportReportRecord } from './support-report.models';
 import { Observable, combineLatest, map } from 'rxjs';
 import { ReportResults, minutesToTimeSpan, timespanToMinutes } from '../../../reports-models';
 import { HttpClient } from '@angular/common/http';
@@ -14,38 +13,9 @@ export class SupportReportService {
   constructor(
     private apiUri: ApiUrlService,
     private http: HttpClient,
-    private objectService: ObjectService,
     private reportsService: ReportsService,
     private supportService: SupportService) { }
 
-  public flattenParameters(parameters: SupportReportParameters) {
-    const defaultPaging = this.reportsService.getDefaultPaging();
-
-    let flattened: SupportReportFlatParameters = {
-      ...parameters,
-      challengeSpecId: parameters.gameChallengeSpec?.challengeSpecId,
-      gameId: parameters.gameChallengeSpec?.gameId,
-      labels: parameters.labels?.join(','),
-      openedDateStart: parameters.openedDateRange?.dateStart?.toLocaleDateString(),
-      openedDateEnd: parameters.openedDateRange?.dateEnd?.toLocaleDateString(),
-      minutesSinceOpen: timespanToMinutes(parameters.timeSinceOpen),
-      minutesSinceUpdate: timespanToMinutes(parameters.timeSinceUpdate),
-      pageNumber: parameters.paging.pageNumber || defaultPaging.pageNumber!,
-      pageSize: parameters.paging.pageSize || defaultPaging.pageSize!,
-      statuses: this.reportsService.flattenMultiSelectValues(parameters.statuses) || undefined
-    };
-
-    flattened = this.objectService.deleteKeys(
-      flattened,
-      "gameChallengeSpec",
-      "openedDateRange",
-      "timeSinceOpen",
-      "timeSinceUpdate"
-    );
-
-    return flattened;
-  }
-
   getReportData(args: SupportReportFlatParameters): Observable<ReportResults<SupportReportRecord>> {
     this.reportsService.applyDefaultPaging(args);
     return this.http.get<ReportResults<SupportReportRecord>>(this.apiUri.build("/reports/support", args));

From bbc73735468fee66cf2ec5aa44690fcb3e3efd54 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Mon, 18 Dec 2023 16:11:24 -0500
Subject: [PATCH 14/22] More fiddling with responsive menu and other
 not-as-responsive things.

---
 projects/gameboard-ui/src/app/app.component.html      |  1 +
 .../src/app/components/nav/nav.component.html         |  3 ++-
 .../src/app/components/nav/nav.component.scss         | 11 ++++-------
 .../src/app/components/nav/nav.component.ts           |  1 +
 projects/gameboard-ui/src/app/core/core.module.ts     |  2 ++
 .../scoreboard-table/scoreboard-table.component.scss  |  3 ++-
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/projects/gameboard-ui/src/app/app.component.html b/projects/gameboard-ui/src/app/app.component.html
index d04dafdc..66f4680c 100644
--- a/projects/gameboard-ui/src/app/app.component.html
+++ b/projects/gameboard-ui/src/app/app.component.html
@@ -6,6 +6,7 @@
     <app-sponsor-select-banner></app-sponsor-select-banner>
     <app-nav></app-nav>
   </div>
+  <app-gameboard-signalr-hubs></app-gameboard-signalr-hubs>
   <app-system-notifications></app-system-notifications>
   <app-message-board></app-message-board>
   <router-outlet></router-outlet>
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.html b/projects/gameboard-ui/src/app/components/nav/nav.component.html
index 9ccca02b..a491d7e4 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.html
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.html
@@ -31,12 +31,13 @@
     </div>
 </nav>
 
-<nav class="nav-sm">
+<nav class="nav-sm bg-dark">
     <div class="flex-grow-1"></div>
     <div class="btn-group" dropdown placement="bottom right">
         <button id="nav-toggle" dropdownToggle type="button" class="btn btn-info dropdown-toggle d-block"
             aria-controls="dropdown-animated">
             <fa-icon [icon]="fa.bars"></fa-icon>
+            Menu
         </button>
 
         <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.scss b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
index f5140254..94a7d997 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.scss
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
@@ -32,13 +32,10 @@
     .nav-lg {
         display: block;
 
-        nav.nav-lg a {
-            font-size: 1.5rem;
-    
-            .nav-items {
-                a {
-                    display: block;
-                }
+        .nav-items {
+            a {
+                display: block;
+                font-size: 1.5rem;
             }
         }
 
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.ts b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
index 72206902..fea75f4a 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.ts
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
@@ -25,6 +25,7 @@ export class AppNavComponent implements OnInit {
   env: any;
 
   protected fa = fa;
+  protected isCollapsed = false;
   protected isPracticeModeEnabled = false;
   protected profileUrl?: string;
 
diff --git a/projects/gameboard-ui/src/app/core/core.module.ts b/projects/gameboard-ui/src/app/core/core.module.ts
index da06a42e..d91bfe9e 100644
--- a/projects/gameboard-ui/src/app/core/core.module.ts
+++ b/projects/gameboard-ui/src/app/core/core.module.ts
@@ -9,6 +9,7 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
+import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -164,6 +165,7 @@ const RELAYED_MODULES = [
   BsDatepickerModule,
   BsDropdownModule,
   ButtonsModule,
+  CollapseModule,
   FontAwesomeModule,
   FormsModule,
   MarkdownModule,
diff --git a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.scss b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.scss
index 1ed32c6b..d4f7b0ea 100644
--- a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.scss
+++ b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.scss
@@ -1,5 +1,6 @@
 table {
-  width: 800px;
+  width: 100%;
+  max-width: 800px;
   margin: 0 auto;
 }
 

From 5b055fd84a1a2441d20dddbce28e1b06b7550a4f Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 09:27:30 -0500
Subject: [PATCH 15/22] Refining modals for players report.

---
 ...players-report-participation-summary.component.html |  1 +
 ...players-report-participation-summary.component.scss |  0
 .../players-report-participation-summary.component.ts  | 10 ++++++++++
 .../report-select/report-select.component.html         |  5 +++--
 .../players-report/players-report.component.html       |  8 ++++----
 .../reports/players-report/players-report.models.ts    |  8 ++++----
 .../gameboard-ui/src/app/reports/reports.module.ts     |  2 ++
 7 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
 create mode 100644 projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss
 create mode 100644 projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts

diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
new file mode 100644
index 00000000..c67b940c
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
@@ -0,0 +1 @@
+<p>players-report-participation-summary works!</p>
diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts
new file mode 100644
index 00000000..94333db5
--- /dev/null
+++ b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-players-report-participation-summary',
+  templateUrl: './players-report-participation-summary.component.html',
+  styleUrls: ['./players-report-participation-summary.component.scss']
+})
+export class PlayersReportParticipationSummaryComponent {
+
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/report-select/report-select.component.html b/projects/gameboard-ui/src/app/reports/components/report-select/report-select.component.html
index c0a4e01e..477f50a3 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-select/report-select.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/report-select/report-select.component.html
@@ -1,5 +1,6 @@
-<ng-container class="report-select-component">
-    <select name="reports-select" class="form-control" [(ngModel)]="selectedReportKey" (change)="handleChange($event)" required>
+<ng-container *ngIf="(reports$ | async)?.length">
+    <select name="reports-select" class="form-control" [(ngModel)]="selectedReportKey" (change)="handleChange($event)"
+        required>
         <option *ngFor="let report of reports$ | async" [value]="report.key">{{ report.name }}</option>
     </select>
 </ng-container>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index 2ff742df..e74107ce 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -79,16 +79,16 @@
                             {{ record.deployedPracticeChallengesCount }}
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctSeriesPlayedCount }}
+                            {{ record.distinctSeriesPlayed.length }}
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctTracksPlayedCount }}
+                            {{ record.distinctTracksPlayed.length }}
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctSeasonsPlayedCount }}
+                            {{ record.distinctSeasonsPlayed.length }}
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctGamesPlayedCount }}
+                            {{ record.distinctGamesPlayed.length }}
                         </td>
                     </tr>
                 </tbody>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
index 96065200..c8160a77 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.models.ts
@@ -22,10 +22,10 @@ export interface PlayersReportRecord {
     lastPlayedOn?: Date;
     deployedCompetitiveChallengesCount: number;
     deployedPracticeChallengesCount: number;
-    distinctGamesPlayedCount: number;
-    distinctSeriesPlayedCount: number;
-    distinctTracksPlayedCount: number;
-    distinctSeasonsPlayedCount: number;
+    distinctGamesPlayed: string[];
+    distinctSeriesPlayed: string[];
+    distinctTracksPlayed: string[];
+    distinctSeasonsPlayed: string[];
 }
 
 export interface PlayersReportStatSummary {
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 2b6d8a25..38968530 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -42,6 +42,7 @@ import { ArrayToCountPipe } from './pipes/array-to-count.pipe';
 import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 import { PlayersReportSummaryToStatsPipe } from './components/reports/players-report/players-report-summary-to-stats.pipe';
+import { PlayersReportParticipationSummaryComponent } from './components/players-report-participation-summary/players-report-participation-summary.component';
 
 @NgModule({
   declarations: [
@@ -84,6 +85,7 @@ import { PlayersReportSummaryToStatsPipe } from './components/reports/players-re
     ParameterSponsorComponent,
     PlayersReportSummaryToStatsPipe,
     ChallengesReportSummaryToStatsPipe,
+    PlayersReportParticipationSummaryComponent,
   ],
   imports: [
     CommonModule,

From 5dc8d2a6e4c23236fa59af513ff0efc9f00e03e1 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 10:41:48 -0500
Subject: [PATCH 16/22] Finish players report modal for participation.

---
 ...eport-participation-summary.component.html | 48 ++++++++++++++++++-
 ...eport-participation-summary.component.scss |  4 ++
 ...-report-participation-summary.component.ts | 23 ++++++++-
 .../players-report.component.html             | 24 +++++++---
 .../players-report.component.ts               | 23 ++++++++-
 .../players-report/players-report.service.ts  |  4 +-
 6 files changed, 116 insertions(+), 10 deletions(-)

diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
index c67b940c..eaccd0a9 100644
--- a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.html
@@ -1 +1,47 @@
-<p>players-report-participation-summary works!</p>
+<ng-container *ngIf="context">
+    <div class="modal-header">
+        <div class="modal-title pull-left d-flex align-items-center">
+            <app-player-avatar-legacy [avatarUri]="context.player.sponsor.logoFileName | relativeImage" size="large"
+                class="d-block mr-4"></app-player-avatar-legacy>
+
+            <div>
+                <h2>{{ context.player.name }}</h2>
+                <h4>Participation Summary</h4>
+            </div>
+        </div>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="handleModalClose()">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        <div class="all-content-container d-flex flex-wrap">
+            <div class="stuff-container">
+                <h2>Competitions</h2>
+                <ul>
+                    <li *ngFor="let seri of context.series">{{seri}}</li>
+                </ul>
+            </div>
+            <div class="stuff-container">
+                <h2>Seasons</h2>
+                <ul>
+                    <li *ngFor="let season of context.seasons">{{season}}</li>
+                </ul>
+            </div>
+            <div class="stuff-container">
+                <h2>Tracks</h2>
+                <ul>
+                    <li *ngFor="let track of context.tracks">{{track}}</li>
+                </ul>
+            </div>
+            <div class="stuff-container">
+                <h2>Games</h2>
+                <ul>
+                    <li *ngFor="let game of context.games">{{game}}</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-info" (click)="handleModalClose()">OK</button>
+    </div>
+</ng-container>
diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss
index e69de29b..afaa2922 100644
--- a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss
+++ b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.scss
@@ -0,0 +1,4 @@
+.stuff-container {
+    flex: 1 1 45%;
+    margin: 0 4px 4px 0;
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts
index 94333db5..92222b59 100644
--- a/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/players-report-participation-summary/players-report-participation-summary.component.ts
@@ -1,10 +1,31 @@
+import { IModalReady } from '@/core/components/modal/modal.models';
+import { ReportSponsor } from '@/reports/reports-models';
 import { Component } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+export interface PlayersReportParticipationSummaryContext {
+  player: {
+    id: string,
+    name: string,
+    sponsor: ReportSponsor,
+  };
+  series: string[];
+  seasons: string[];
+  tracks: string[];
+  games: string[];
+}
 
 @Component({
   selector: 'app-players-report-participation-summary',
   templateUrl: './players-report-participation-summary.component.html',
   styleUrls: ['./players-report-participation-summary.component.scss']
 })
-export class PlayersReportParticipationSummaryComponent {
+export class PlayersReportParticipationSummaryComponent implements IModalReady<PlayersReportParticipationSummaryContext> {
+  context!: PlayersReportParticipationSummaryContext;
+
+  constructor(private modalRef: BsModalRef) { }
 
+  handleModalClose() {
+    this.modalRef.hide();
+  }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index e74107ce..26bbf55a 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -43,14 +43,14 @@
                 <tbody>
                     <tr class="headers headers-row">
                         <td>Name &amp; Sponsor</td>
-                        <td>Signed Up On</td>
+                        <td>Account Created On</td>
                         <td>Last Played On</td>
                         <td>Competitive</td>
                         <td>Practice</td>
-                        <td>Games</td>
                         <td>Series</td>
                         <td>Seasons</td>
                         <td>Tracks</td>
+                        <td>Games</td>
                     </tr>
 
                     <tr class="data-row my-2" *ngFor="let record of ctx?.results?.records">
@@ -79,16 +79,28 @@
                             {{ record.deployedPracticeChallengesCount }}
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctSeriesPlayed.length }}
+                            <p [class.tooltipped-value]="(record.distinctSeriesPlayed.length || 0) > 0"
+                                (click)="(record.distinctSeriesPlayed.length || 0) && showPlayerParticipation(record)">
+                                {{ record.distinctSeriesPlayed.length }}
+                            </p>
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctTracksPlayed.length }}
+                            <p [class.tooltipped-value]="(record.distinctSeasonsPlayed.length || 0) > 0"
+                                (click)="(record.distinctSeasonsPlayed.length || 0) && showPlayerParticipation(record)">
+                                {{ record.distinctSeasonsPlayed.length }}
+                            </p>
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctSeasonsPlayed.length }}
+                            <p [class.tooltipped-value]="(record.distinctTracksPlayed.length || 0) > 0"
+                                (click)="(record.distinctTracksPlayed.length || 0) && showPlayerParticipation(record)">
+                                {{ record.distinctTracksPlayed.length }}
+                            </p>
                         </td>
                         <td class="report-field numerical">
-                            {{ record.distinctGamesPlayed.length }}
+                            <p [class.tooltipped-value]="(record.distinctGamesPlayed.length || 0) > 0"
+                                (click)="(record.distinctGamesPlayed.length || 0) && showPlayerParticipation(record)">
+                                {{ record.distinctGamesPlayed.length }}
+                            </p>
                         </td>
                     </tr>
                 </tbody>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
index a52ef5d3..af31fbc5 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.ts
@@ -7,6 +7,8 @@ import { PlayersReportService } from './players-report.service';
 import { firstValueFrom } from 'rxjs';
 import { MultiSelectQueryParamModel } from '@/core/models/multi-select-query-param.model';
 import { SimpleEntity } from '@/api/models';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { PlayersReportParticipationSummaryComponent, PlayersReportParticipationSummaryContext } from '../../players-report-participation-summary/players-report-participation-summary.component';
 
 interface PlayersReportContext {
   isLoading: boolean;
@@ -66,10 +68,29 @@ export class PlayersReportComponent extends ReportComponentBase<PlayersReportFla
     paramName: "tracks"
   });
 
-  constructor(private playersReportService: PlayersReportService) {
+  constructor(
+    private modalService: ModalConfirmService,
+    private playersReportService: PlayersReportService) {
     super();
   }
 
+  protected showPlayerParticipation(record: PlayersReportRecord) {
+    this.modalService.openComponent<PlayersReportParticipationSummaryComponent, PlayersReportParticipationSummaryContext>({
+      content: PlayersReportParticipationSummaryComponent,
+      context: {
+        player: {
+          id: record.user.id,
+          name: record.user.name,
+          sponsor: record.sponsor
+        },
+        series: record.distinctSeriesPlayed,
+        seasons: record.distinctSeasonsPlayed,
+        tracks: record.distinctTracksPlayed,
+        games: record.distinctGamesPlayed
+      }
+    });
+  }
+
   protected async updateView(parameters: PlayersReportFlatParameters): Promise<ReportViewUpdate> {
     if (!this.playersReportService) {
       return { metaData: await firstValueFrom(this.reportsService.getReportMetaData(ReportKey.PlayersReport)) };
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
index cb089cf1..e86f5124 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { PlayersReportFlatParameters, PlayersReportRecord, PlayersReportStatSummary } from './players-report.models';
 import { ApiUrlService } from '@/services/api-url.service';
 import { HttpClient } from '@angular/common/http';
-import { ReportResults, ReportResultsWithOverallStats } from '@/reports/reports-models';
+import { ReportResultsWithOverallStats } from '@/reports/reports-models';
 import { ReportsService } from '@/reports/reports.service';
 
 @Injectable({ providedIn: 'root' })
@@ -12,6 +12,8 @@ export class PlayersReportService {
     private http: HttpClient,
     private reportsService: ReportsService) { }
 
+
+
   getReportData(parameters: PlayersReportFlatParameters) {
     parameters = this.reportsService.applyDefaultPaging(parameters);
     return this.http.get<ReportResultsWithOverallStats<PlayersReportStatSummary, PlayersReportRecord>>(this.apiUrl.build("reports/players", parameters));

From 28bffb70727d6ff28ea566307f0789a9657b4398 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 12:01:24 -0500
Subject: [PATCH 17/22] Fixed a few paging bugs in reporting.

---
 .../select-pager/select-pager.component.ts      |  8 ++++----
 .../parameter-sponsor.component.ts              | 14 +++++++++++---
 .../enrollment-report.service.ts                |  6 ++----
 .../players-report.component.html               |  2 +-
 .../players-report/players-report.service.ts    |  7 +------
 .../practice-mode-report.service.ts             |  6 +++---
 .../components/reports/report-base.component.ts | 11 +++++++++--
 .../support-report/support-report.service.ts    |  9 +++------
 .../src/app/reports/reports.service.ts          | 11 -----------
 .../src/app/tools/object-tools.lib.ts           | 17 +++++++++++++++--
 10 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/projects/gameboard-ui/src/app/core/components/select-pager/select-pager.component.ts b/projects/gameboard-ui/src/app/core/components/select-pager/select-pager.component.ts
index 3a1def10..7c28cee4 100644
--- a/projects/gameboard-ui/src/app/core/components/select-pager/select-pager.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/select-pager/select-pager.component.ts
@@ -16,8 +16,6 @@ export class SelectPagerComponent implements OnChanges {
   protected pageNumber = 0;
   protected pages: number[] = [];
 
-  constructor(private route: ActivatedRoute) { }
-
   ngOnChanges(changes: SimpleChanges): void {
     const shouldCalcPages = (changes.itemCount || changes.pageSize);
     const itemCount = changes.itemCount?.currentValue || this.itemCount;
@@ -50,7 +48,9 @@ export class SelectPagerComponent implements OnChanges {
     clampedPageNumber = Math.min(pageNumber, this.pages.length - 1);
     clampedPageNumber = clampedPageNumber < 0 ? 0 : clampedPageNumber;
 
-    this.pageNumber = clampedPageNumber;
-    this.change.emit({ pageNumber: this.pageNumber, pageSize: this.pageSize! });
+    if (this.pageNumber !== clampedPageNumber) {
+      this.pageNumber = clampedPageNumber;
+      this.change.emit({ pageNumber: this.pageNumber, pageSize: this.pageSize! });
+    }
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
index b61b0343..c198829c 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
@@ -9,6 +9,7 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { ActivatedRoute, Params } from '@angular/router';
 import { RouterService } from '@/services/router.service';
 import { unique } from 'projects/gameboard-ui/src/tools';
+import { arraysEqual } from '@/tools/object-tools.lib';
 
 @Component({
   selector: 'app-parameter-sponsor',
@@ -21,11 +22,12 @@ export class ParameterSponsorComponent implements OnInit {
   @Input() showSearchBoxThreshold = 6;
   @Input() showSelectionSummaryThreshold = 0;
 
-  protected selectedItemsDisplayedThreshold = 4;
+  protected allSponsors: SponsorWithChildSponsors[] = [];
   protected countSelectedOverDisplayThreshold = 0;
   protected fa = fa;
+  protected selectedItemsDisplayedThreshold = 4;
   protected selectionSummary = "";
-  protected allSponsors: SponsorWithChildSponsors[] = [];
+
   private static QUERYSTRING_VALUE_DELIMITER = ",";
 
   constructor(
@@ -156,12 +158,18 @@ export class ParameterSponsorComponent implements OnInit {
         .filter(sId => !!this.getSponsorForId(sId))
     );
 
+    // if the "updated" selection is the same or a permutation of the previous one, we don't need
+    // to emit or update the paging
+    if (arraysEqual(validSponsorIds, this.selectedSponsors.map(s => s.id))) {
+      return;
+    }
+
     const params: Params = {};
     if (validSponsorIds.length) {
       params[this.queryParamName] = validSponsorIds.join(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
     }
 
-    await this.routerService.updateQueryParams({ parameters: params, resetParams: ["pageNumber", "pageSize"] });
+    await this.routerService.updateQueryParams({ parameters: params, resetParams: ["pageNumber"] });
     this.updateSelectionSummary(value);
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
index 789ace19..cfae1156 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.service.ts
@@ -16,8 +16,7 @@ export class EnrollmentReportService {
 
   getByGameData(parameters: EnrollmentReportFlatParameters | null): Observable<ReportResults<EnrollmentReportByGameRecord>> {
     parameters = parameters || {};
-    const pagedParameters = this.reportsService.applyDefaultPaging(parameters);
-    return this.http.get<ReportResults<EnrollmentReportByGameRecord>>(this.apiUrl.build("reports/enrollment/by-game", pagedParameters)).pipe(
+    return this.http.get<ReportResults<EnrollmentReportByGameRecord>>(this.apiUrl.build("reports/enrollment/by-game", parameters)).pipe(
       map(results => {
         for (const record of results.records) {
           record.game.executionClosed = this.reportsService.queryStringEncodedDateToDate(record.game.executionClosed as any)!;
@@ -32,8 +31,7 @@ export class EnrollmentReportService {
   }
 
   getReportData(parameters: EnrollmentReportFlatParameters): Observable<ReportResults<EnrollmentReportRecord>> {
-    const pagedParameters = this.reportsService.applyDefaultPaging(parameters);
-    return this.http.get<ReportResults<EnrollmentReportRecord>>(this.apiUrl.build("reports/enrollment", pagedParameters));
+    return this.http.get<ReportResults<EnrollmentReportRecord>>(this.apiUrl.build("reports/enrollment", parameters));
   }
 
   getSummaryStats(parameters: EnrollmentReportFlatParameters): Observable<EnrollmentReportStatSummary> {
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
index 26bbf55a..bc72826f 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.component.html
@@ -17,7 +17,7 @@
     </app-report-parameters-container>
 
     <app-report-stat-summary class="d-block mb-4" *ngIf="ctx.results?.overallStats; else loading"
-        [importantStat]="{ label: 'Total Player', value: ctx.results!.overallStats.userCount } "
+        [importantStat]="{ label: 'Total Players', value: ctx.results!.overallStats.userCount } "
         [stats]="ctx.results?.overallStats | playersReportSummaryToStats"></app-report-stat-summary>
 
     <ng-container *ngIf="!ctx.isLoading; else loading">
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
index e86f5124..164587ed 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/players-report/players-report.service.ts
@@ -3,19 +3,14 @@ import { PlayersReportFlatParameters, PlayersReportRecord, PlayersReportStatSumm
 import { ApiUrlService } from '@/services/api-url.service';
 import { HttpClient } from '@angular/common/http';
 import { ReportResultsWithOverallStats } from '@/reports/reports-models';
-import { ReportsService } from '@/reports/reports.service';
 
 @Injectable({ providedIn: 'root' })
 export class PlayersReportService {
   constructor(
     private apiUrl: ApiUrlService,
-    private http: HttpClient,
-    private reportsService: ReportsService) { }
-
-
+    private http: HttpClient) { }
 
   getReportData(parameters: PlayersReportFlatParameters) {
-    parameters = this.reportsService.applyDefaultPaging(parameters);
     return this.http.get<ReportResultsWithOverallStats<PlayersReportStatSummary, PlayersReportRecord>>(this.apiUrl.build("reports/players", parameters));
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.service.ts
index 0e3a04f9..36748344 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.service.ts
@@ -15,12 +15,12 @@ export class PracticeModeReportService {
   ) { }
 
   getByChallengeData(parameters: PracticeModeReportFlatParameters | null): Observable<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByChallengeRecord>> {
-    const finalParams = this.reportsService.applyDefaultPaging({ ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.challenge } });
+    const finalParams = { ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.challenge } };
     return this.http.get<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByChallengeRecord>>(this.apiUrl.build("reports/practice-area", finalParams));
   }
 
   getByPlayerModePerformance(parameters: PracticeModeReportFlatParameters | null): Observable<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByPlayerModePerformanceRecord>> {
-    const finalParams = this.reportsService.applyDefaultPaging({ ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.playerModePerformance } });
+    const finalParams = { ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.playerModePerformance } };
 
     return this.http.get<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByPlayerModePerformanceRecord>>(this.apiUrl.build("reports/practice-area", finalParams)).pipe(
       map(r => {
@@ -41,7 +41,7 @@ export class PracticeModeReportService {
   }
 
   getByUserData(parameters: PracticeModeReportFlatParameters | null): Observable<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByUserRecord>> {
-    const finalParams = this.reportsService.applyDefaultPaging({ ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.player } });
+    const finalParams = { ... (parameters || {}), ...{ grouping: PracticeModeReportGrouping.player } };
 
     return this.http.get<ReportResultsWithOverallStats<PracticeModeReportOverallStats, PracticeModeReportByUserRecord>>(this.apiUrl.build("reports/practice-area", finalParams)).pipe(
       map(r => {
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
index b39dc6e0..490c59f0 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/report-base.component.ts
@@ -7,9 +7,12 @@ import { ActivatedRoute } from "@angular/router";
 import { UnsubscriberService } from "@/services/unsubscriber.service";
 import { ObjectService } from "@/services/object.service";
 import { RouterService } from "@/services/router.service";
+import { deepEquals } from "@/tools/object-tools.lib";
 
 @Component({ template: '', providers: [UnsubscriberService] })
-export abstract class ReportComponentBase<TFlatParameters extends {}> implements OnInit {
+export abstract class ReportComponentBase<TFlatParameters extends {}> {
+    private _lastParams?: TFlatParameters;
+
     // manually injected services (so the inheritors don't have to resolve dependencies)
     protected readonly activeReportService = inject(ActiveReportService);
     protected readonly reportsService = inject(ReportsService);
@@ -20,7 +23,11 @@ export abstract class ReportComponentBase<TFlatParameters extends {}> implements
 
     constructor() {
         this.unsub.add(this.route.queryParams.subscribe(params => {
-            this._updateView({ ...params } as TFlatParameters);
+            // only update the view if the params changed in some way
+            if (!this._lastParams || !deepEquals(this._lastParams, params)) {
+                this._updateView({ ...params } as TFlatParameters);
+                this._lastParams = params as TFlatParameters;
+            }
         }));
     }
 
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
index 092dc771..c78b1b15 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/support-report/support-report.service.ts
@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { SupportReportFlatParameters, SupportReportRecord } from './support-report.models';
-import { Observable, combineLatest, map } from 'rxjs';
-import { ReportResults, minutesToTimeSpan, timespanToMinutes } from '../../../reports-models';
+import { Observable, map } from 'rxjs';
+import { ReportResults } from '../../../reports-models';
 import { HttpClient } from '@angular/common/http';
-import { ApiUrlService } from '../../../../services/api-url.service';
-import { ReportsService } from '../../../reports.service';
+import { ApiUrlService } from '@/services/api-url.service';
 import { SupportService } from '@/api/support.service';
 
 @Injectable({ providedIn: 'root' })
@@ -13,11 +12,9 @@ export class SupportReportService {
   constructor(
     private apiUri: ApiUrlService,
     private http: HttpClient,
-    private reportsService: ReportsService,
     private supportService: SupportService) { }
 
   getReportData(args: SupportReportFlatParameters): Observable<ReportResults<SupportReportRecord>> {
-    this.reportsService.applyDefaultPaging(args);
     return this.http.get<ReportResults<SupportReportRecord>>(this.apiUri.build("/reports/support", args));
   }
 
diff --git a/projects/gameboard-ui/src/app/reports/reports.service.ts b/projects/gameboard-ui/src/app/reports/reports.service.ts
index ec9cb76d..37c5d57c 100644
--- a/projects/gameboard-ui/src/app/reports/reports.service.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.service.ts
@@ -57,17 +57,6 @@ export class ReportsService {
     return this.http.get<string[]>(this.apiUrlService.build("/reports/parameter/tracks"));
   }
 
-  applyDefaultPaging<T extends { pageNumber?: number; pageSize?: number }>(reportParameters: T): T {
-    return { ...this.getDefaultPaging(), ...reportParameters };
-  }
-
-  getDefaultPaging(): PagingArgs {
-    return {
-      pageNumber: 0,
-      pageSize: 20
-    };
-  }
-
   getReportMetaData(key: ReportKey): Observable<ReportMetaData> {
     return this.http.get<ReportMetaData>(this.apiUrlService.build("/reports/metaData", { reportKey: key }));
   }
diff --git a/projects/gameboard-ui/src/app/tools/object-tools.lib.ts b/projects/gameboard-ui/src/app/tools/object-tools.lib.ts
index 0d378ff8..7d2b1a8c 100644
--- a/projects/gameboard-ui/src/app/tools/object-tools.lib.ts
+++ b/projects/gameboard-ui/src/app/tools/object-tools.lib.ts
@@ -13,8 +13,21 @@ export function arraysEqual<T>(a: Array<T>, b: Array<T>): boolean {
     return true;
 }
 
-export function deepEquals<T1, T2>(obj1: T1, obj2: T2): boolean {
-    return JSON.stringify(obj1) === JSON.stringify(obj2);
+export function deepEquals<T1 extends {}, T2 extends {}>(obj1: T1, obj2: T2): boolean {
+    const finalObj1: any = {};
+    const finalObj2: any = {};
+
+    for (const key in obj1) {
+        if (obj1[key] !== undefined)
+            finalObj1[key] = obj1[key];
+    }
+
+    for (const key in obj2) {
+        if (obj2[key] !== undefined)
+            finalObj2[key] = obj2[key];
+    }
+
+    return JSON.stringify(finalObj1) === JSON.stringify(finalObj2);
 }
 
 export function isEmpty(obj: any): boolean {

From 34376ed8c042afc8722837331dc37046fe6ea491 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 12:50:44 -0500
Subject: [PATCH 18/22] Make unsubscriber service transient so that it
 correctly disposes subs.

---
 .../challenge-spec-editor.component.ts        |  3 +-
 .../external-game-admin.component.ts          |  3 +-
 .../practice-settings.component.ts            |  3 +-
 .../gameboard-ui/src/app/api/user.service.ts  |  2 +-
 .../gameboard-signalr-hubs.component.ts       |  3 +-
 .../src/app/components/nav/nav.component.ts   |  3 +-
 .../game/components/play/play.component.ts    |  3 +-
 .../session-start-controls.component.ts       |  4 +--
 .../gamespace-quiz.component.ts               |  7 +++--
 .../external-game-loading-page.component.ts   |  3 +-
 .../pages/game-page/game-page.component.ts    |  3 +-
 .../gameboard-page.component.ts               |  3 +-
 .../practice-challenge-list.component.ts      |  3 +-
 ...actice-challenge-solved-modal.component.ts |  3 +-
 ...ctice-challenge-state-summary.component.ts |  5 ++--
 .../practice-session.component.ts             |  1 +
 .../parameter-sponsor.component.ts            |  3 +-
 .../parameter-timespan-picker.component.ts    |  2 +-
 .../src/app/services/notification.service.ts  |  2 +-
 .../src/app/services/unsubscriber.service.ts  |  2 +-
 .../src/app/stores/active-challenges.store.ts | 23 ++++++---------
 .../admin-system-notifications.component.ts   |  3 +-
 .../system-notifications.component.ts         |  3 +-
 .../src/app/utility/user.service.ts           | 29 ++++++++++---------
 24 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
index 229ed64d..05eea5e6 100644
--- a/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
+++ b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
@@ -10,7 +10,8 @@ import { Subject, debounceTime, filter, switchMap, tap } from 'rxjs';
 @Component({
   selector: 'app-challenge-spec-editor',
   templateUrl: './challenge-spec-editor.component.html',
-  styleUrls: ['./challenge-spec-editor.component.scss']
+  styleUrls: ['./challenge-spec-editor.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class ChallengeSpecEditorComponent implements OnChanges {
   @Input() spec?: Spec;
diff --git a/projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.ts b/projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.ts
index 06a0237d..820bc962 100644
--- a/projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.ts
+++ b/projects/gameboard-ui/src/app/admin/components/external-game-admin/external-game-admin.component.ts
@@ -51,7 +51,8 @@ export interface ExternalGameAdminContext {
 @Component({
   selector: 'app-external-game-admin',
   templateUrl: './external-game-admin.component.html',
-  styleUrls: ['./external-game-admin.component.scss']
+  styleUrls: ['./external-game-admin.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class ExternalGameAdminComponent implements OnInit {
   private autoUpdateInterval = 30000;
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
index 91601b07..a90f3ce9 100644
--- a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
+++ b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
@@ -14,7 +14,8 @@ interface PracticeSettingsContext {
 @Component({
   selector: 'app-practice-settings',
   templateUrl: './practice-settings.component.html',
-  styleUrls: ['./practice-settings.component.scss']
+  styleUrls: ['./practice-settings.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class PracticeSettingsComponent implements OnInit {
   ctx: PracticeSettingsContext | null = null;
diff --git a/projects/gameboard-ui/src/app/api/user.service.ts b/projects/gameboard-ui/src/app/api/user.service.ts
index e88af676..87945c74 100644
--- a/projects/gameboard-ui/src/app/api/user.service.ts
+++ b/projects/gameboard-ui/src/app/api/user.service.ts
@@ -4,7 +4,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { ConfigService } from '../utility/config.service';
 import { Announcement, ApiUser, ChangedUser, NewUser, TreeNode, TryCreateUserResult } from './user-models';
 import { LogService } from '@/services/log.service';
diff --git a/projects/gameboard-ui/src/app/components/gameboard-signalr-hubs/gameboard-signalr-hubs.component.ts b/projects/gameboard-ui/src/app/components/gameboard-signalr-hubs/gameboard-signalr-hubs.component.ts
index 3cbe9912..a4ac321f 100644
--- a/projects/gameboard-ui/src/app/components/gameboard-signalr-hubs/gameboard-signalr-hubs.component.ts
+++ b/projects/gameboard-ui/src/app/components/gameboard-signalr-hubs/gameboard-signalr-hubs.component.ts
@@ -12,7 +12,8 @@ import { combineLatest, map } from 'rxjs';
 @Component({
   selector: 'app-gameboard-signalr-hubs',
   templateUrl: './gameboard-signalr-hubs.component.html',
-  styleUrls: ['./gameboard-signalr-hubs.component.scss']
+  styleUrls: ['./gameboard-signalr-hubs.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class GameboardSignalRHubsComponent implements OnDestroy {
   protected isDevMode = false;
diff --git a/projects/gameboard-ui/src/app/components/nav/nav.component.ts b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
index fea75f4a..300eac45 100644
--- a/projects/gameboard-ui/src/app/components/nav/nav.component.ts
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
@@ -15,7 +15,8 @@ import { fa } from '@/services/font-awesome.service';
 @Component({
   selector: 'app-nav',
   templateUrl: './nav.component.html',
-  styleUrls: ['./nav.component.scss']
+  styleUrls: ['./nav.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class AppNavComponent implements OnInit {
   user$!: Observable<ApiUser | null>;
diff --git a/projects/gameboard-ui/src/app/game/components/play/play.component.ts b/projects/gameboard-ui/src/app/game/components/play/play.component.ts
index 7d7c01af..363dd3a3 100644
--- a/projects/gameboard-ui/src/app/game/components/play/play.component.ts
+++ b/projects/gameboard-ui/src/app/game/components/play/play.component.ts
@@ -25,7 +25,8 @@ export type PlayerContext = {
 @Component({
   selector: 'app-play',
   templateUrl: './play.component.html',
-  styleUrls: ['./play.component.scss']
+  styleUrls: ['./play.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class PlayComponent {
   @Input() playerContext: { playerId: string, userId: string } | null = null;
diff --git a/projects/gameboard-ui/src/app/game/components/session-start-controls/session-start-controls.component.ts b/projects/gameboard-ui/src/app/game/components/session-start-controls/session-start-controls.component.ts
index dfdeb591..3dfaec68 100644
--- a/projects/gameboard-ui/src/app/game/components/session-start-controls/session-start-controls.component.ts
+++ b/projects/gameboard-ui/src/app/game/components/session-start-controls/session-start-controls.component.ts
@@ -3,7 +3,6 @@ import { firstValueFrom } from 'rxjs';
 import { GameService } from '../../../api/game.service';
 import { GameContext } from '../../../api/game-models';
 import { Player } from '../../../api/player-models';
-import { PlayerService } from '../../../api/player.service';
 import { fa } from '@/services/font-awesome.service';
 import { SyncStartService } from '@/services/sync-start.service';
 import { SyncStartGameState } from '@/game/game.models';
@@ -14,7 +13,8 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 @Component({
   selector: 'app-session-start-controls',
   templateUrl: './session-start-controls.component.html',
-  styleUrls: ['./session-start-controls.component.scss']
+  styleUrls: ['./session-start-controls.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class SessionStartControlsComponent implements OnInit {
   @Input() ctx!: GameContext;
diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index e04954ae..e50c9a8a 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -6,7 +6,7 @@ import { fa } from "@/services/font-awesome.service";
 import { AnswerSubmission, BoardSpec, Challenge } from '../../api/board-models';
 import { BoardService } from '../../api/board.service';
 import { TimeWindow } from '../../api/player-models';
-import { Observable, Subject, catchError, delay, filter, firstValueFrom, interval, map, of, startWith, switchMap, takeUntil, tap } from 'rxjs';
+import { Observable, Subject, catchError, delay, filter, firstValueFrom, of, switchMap, takeUntil, tap } from 'rxjs';
 import { ChallengesService } from '@/api/challenges.service';
 import { NotificationService } from '@/services/notification.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
@@ -22,7 +22,8 @@ interface PendingSubmissionsUpdate {
 @Component({
   selector: 'app-gamespace-quiz',
   templateUrl: './gamespace-quiz.component.html',
-  styleUrls: ['./gamespace-quiz.component.scss']
+  styleUrls: ['./gamespace-quiz.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class GamespaceQuizComponent implements OnInit, OnChanges {
   @Input() challengeId?: string;
@@ -52,7 +53,7 @@ export class GamespaceQuizComponent implements OnInit, OnChanges {
 
   ngOnInit(): void {
     this.unsub.add(
-      // After the player inputs anything and then doesn't change it for 5 seconds,
+      // After the player inputs anything and then doesn't change it for 3 seconds,
       // update their unsubmitted answers (we keep one set of unsubmitted answers per challenge).
       //
       // this is a lot like debounceTime, but we allow it to be interrupted
diff --git a/projects/gameboard-ui/src/app/game/pages/external-game-loading-page/external-game-loading-page.component.ts b/projects/gameboard-ui/src/app/game/pages/external-game-loading-page/external-game-loading-page.component.ts
index c0e23e6c..13f30cef 100644
--- a/projects/gameboard-ui/src/app/game/pages/external-game-loading-page/external-game-loading-page.component.ts
+++ b/projects/gameboard-ui/src/app/game/pages/external-game-loading-page/external-game-loading-page.component.ts
@@ -22,7 +22,8 @@ interface GameLaunchContext {
 @Component({
   selector: 'app-game-start-page',
   templateUrl: './external-game-loading-page.component.html',
-  styleUrls: ['./external-game-loading-page.component.scss']
+  styleUrls: ['./external-game-loading-page.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class ExternalGameLoadingPageComponent implements OnInit {
   private gameId: string | null;
diff --git a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts
index 6b634a18..5817694e 100644
--- a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts
+++ b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.ts
@@ -32,7 +32,8 @@ interface GameEnrollmentContext {
 @Component({
   selector: 'app-game-page',
   templateUrl: './game-page.component.html',
-  styleUrls: ['./game-page.component.scss']
+  styleUrls: ['./game-page.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class GamePageComponent implements OnDestroy {
   ctx$ = new Observable<GameContext | undefined>(undefined);
diff --git a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
index 684e5598..9dce577d 100644
--- a/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
+++ b/projects/gameboard-ui/src/app/game/pages/gameboard-page/gameboard-page.component.ts
@@ -24,7 +24,8 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 @Component({
   selector: 'app-gameboard-page',
   templateUrl: './gameboard-page.component.html',
-  styleUrls: ['./gameboard-page.component.scss']
+  styleUrls: ['./gameboard-page.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class GameboardPageComponent implements OnDestroy {
   refresh$ = new Subject<string>();
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
index a596101a..7742813a 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
@@ -14,7 +14,8 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 @Component({
   selector: 'app-practice-challenge-list',
   templateUrl: './practice-challenge-list.component.html',
-  styleUrls: ['./practice-challenge-list.component.scss']
+  styleUrls: ['./practice-challenge-list.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class PracticeChallengeListComponent {
   list$: Observable<SpecSummary[]>;
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
index 43d64e15..39c89c6a 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
@@ -22,7 +22,8 @@ interface LegacyFeedbackFormContext {
 @Component({
   selector: 'app-practice-challenge-solved-modal',
   templateUrl: './practice-challenge-solved-modal.component.html',
-  styleUrls: ['./practice-challenge-solved-modal.component.scss']
+  styleUrls: ['./practice-challenge-solved-modal.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class PracticeChallengeSolvedModalComponent implements OnInit {
   protected context?: PracticeChallengeSolvedModalContext;
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.ts
index 92bb6c9c..7825888c 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-state-summary/practice-challenge-state-summary.component.ts
@@ -5,7 +5,7 @@ import { UserService as LocalUserService } from '@/utility/user.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { Component } from '@angular/core';
 import { DateTime } from 'luxon';
-import { Observable, combineLatest, filter, firstValueFrom, map, tap, timer } from 'rxjs';
+import { Observable, combineLatest, firstValueFrom, map, tap, timer } from 'rxjs';
 import { ActiveChallengesRepo } from '@/stores/active-challenges.store';
 import { slug } from '@/tools/functions';
 import { TeamService } from '@/api/team.service';
@@ -15,7 +15,8 @@ import { HubEventAction, NotificationService } from '@/services/notification.ser
 @Component({
   selector: 'app-practice-challenge-state-summary',
   templateUrl: './practice-challenge-state-summary.component.html',
-  styleUrls: ['./practice-challenge-state-summary.component.scss']
+  styleUrls: ['./practice-challenge-state-summary.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class PracticeChallengeStateSummaryComponent {
   protected extendTooltip = "";
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
index e684cf1b..a8e00f89 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
@@ -20,6 +20,7 @@ import { TeamService } from '@/api/team.service';
 @Component({
   selector: 'app-practice-session',
   templateUrl: './practice-session.component.html',
+  providers: [UnsubscriberService]
 })
 export class PracticeSessionComponent {
   spec$: Observable<SpecSummary>;
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
index c198829c..d4958b1e 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
@@ -14,7 +14,8 @@ import { arraysEqual } from '@/tools/object-tools.lib';
 @Component({
   selector: 'app-parameter-sponsor',
   templateUrl: './parameter-sponsor.component.html',
-  styleUrls: ['./parameter-sponsor.component.scss']
+  styleUrls: ['./parameter-sponsor.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class ParameterSponsorComponent implements OnInit {
   @Input() queryParamName = "sponsors";
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-timespan-picker/parameter-timespan-picker.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-timespan-picker/parameter-timespan-picker.component.ts
index 9f17d6b1..4569f872 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-timespan-picker/parameter-timespan-picker.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-timespan-picker/parameter-timespan-picker.component.ts
@@ -8,7 +8,7 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
   selector: 'app-parameter-timespan-picker',
   templateUrl: './parameter-timespan-picker.component.html',
   styleUrls: ['./parameter-timespan-picker.component.scss'],
-  providers: [createCustomInputControlValueAccessor(ParameterTimespanPickerComponent)]
+  providers: [createCustomInputControlValueAccessor(ParameterTimespanPickerComponent), UnsubscriberService]
 })
 export class ParameterTimespanPickerComponent extends CustomInputComponent<TimespanQueryParamModel> implements OnInit {
   @Input() label = '';
diff --git a/projects/gameboard-ui/src/app/services/notification.service.ts b/projects/gameboard-ui/src/app/services/notification.service.ts
index 89fa53a3..73392bcf 100644
--- a/projects/gameboard-ui/src/app/services/notification.service.ts
+++ b/projects/gameboard-ui/src/app/services/notification.service.ts
@@ -137,7 +137,7 @@ export class NotificationService {
       // if we're already connected...
       if (this.connection.state === HubConnectionState.Connected) {
         // and we're connected to the right group, do nothing
-        if (this.connection.connectionId == groupId) {
+        if (this.state$.value?.id == groupId) {
           this.log.logInfo(`Team (notification) hub is already connected to team ${groupId}.`);
           return;
         }
diff --git a/projects/gameboard-ui/src/app/services/unsubscriber.service.ts b/projects/gameboard-ui/src/app/services/unsubscriber.service.ts
index a42e758c..7a95d9c1 100644
--- a/projects/gameboard-ui/src/app/services/unsubscriber.service.ts
+++ b/projects/gameboard-ui/src/app/services/unsubscriber.service.ts
@@ -1,7 +1,7 @@
 import { Injectable, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class UnsubscriberService implements OnDestroy {
   private _subscriptions: Subscription[] = [];
 
diff --git a/projects/gameboard-ui/src/app/stores/active-challenges.store.ts b/projects/gameboard-ui/src/app/stores/active-challenges.store.ts
index a603b03b..92015c66 100644
--- a/projects/gameboard-ui/src/app/stores/active-challenges.store.ts
+++ b/projects/gameboard-ui/src/app/stores/active-challenges.store.ts
@@ -1,7 +1,7 @@
 import { LocalActiveChallenge } from "@/api/challenges.models";
 import { createStore, withProps } from "@ngneat/elf";
 import { SimpleEntity } from "@/api/models";
-import { Observable, Subject, combineLatest, firstValueFrom, interval, map, merge, of, startWith, switchMap, tap } from "rxjs";
+import { Observable, Subject, Subscription, combineLatest, firstValueFrom, interval, map, merge, of, startWith, switchMap, tap } from "rxjs";
 import { Injectable, OnDestroy } from "@angular/core";
 import { UserService as LocalUserService } from "@/utility/user.service";
 import { ChallengesService } from "@/api/challenges.service";
@@ -9,7 +9,6 @@ import { UnsubscriberService } from "@/services/unsubscriber.service";
 import { PlayerService } from "@/api/player.service";
 import { DateTime } from "luxon";
 import { Challenge } from "@/api/board-models";
-import { PracticeService } from "@/services/practice.service";
 import { TeamService } from "@/api/team.service";
 
 interface ActiveChallengesProps {
@@ -33,6 +32,7 @@ export type ActiveChallengesPredicate = (challenge: LocalActiveChallenge) => cha
 
 @Injectable({ providedIn: 'root' })
 export class ActiveChallengesRepo implements OnDestroy {
+    private _subs: Subscription[] = [];
     public readonly activePracticeChallenge$: Observable<LocalActiveChallenge | null> = activeChallengesStore
         .pipe(
             startWith(activeChallengesStore.state),
@@ -52,10 +52,9 @@ export class ActiveChallengesRepo implements OnDestroy {
         challengesService: ChallengesService,
         playerService: PlayerService,
         localUser: LocalUserService,
-        teamService: TeamService,
-        private unsub: UnsubscriberService) {
+        teamService: TeamService) {
 
-        this.unsub.add(
+        this._subs.push(
             combineLatest([
                 of(challengesService),
                 localUser.user$,
@@ -68,14 +67,8 @@ export class ActiveChallengesRepo implements OnDestroy {
                 )
             ]).pipe(
                 map(([challengesService]) => ({ challengesService })),
-            ).subscribe(ctx => this._initState(ctx.challengesService, localUser.user$.value?.id || null))
-        );
-
-        this.unsub.add(
-            interval(1000).subscribe(() => this.checkActiveChallengesForEnd())
-        );
-
-        this.unsub.add(
+            ).subscribe(ctx => this._initState(ctx.challengesService, localUser.user$.value?.id || null)),
+            interval(1000).subscribe(() => this.checkActiveChallengesForEnd()),
             challengesService.challengeGraded$.subscribe(challenge => this.handleChallengeGraded(challenge))
         );
 
@@ -83,7 +76,9 @@ export class ActiveChallengesRepo implements OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.unsub.unsubscribeAll();
+        for (let sub of this._subs) {
+            sub.unsubscribe();
+        }
     }
 
     getActivePracticeChallenge(): LocalActiveChallenge | null {
diff --git a/projects/gameboard-ui/src/app/system-notifications/components/admin-system-notifications/admin-system-notifications.component.ts b/projects/gameboard-ui/src/app/system-notifications/components/admin-system-notifications/admin-system-notifications.component.ts
index ce79aa98..b5f8a832 100644
--- a/projects/gameboard-ui/src/app/system-notifications/components/admin-system-notifications/admin-system-notifications.component.ts
+++ b/projects/gameboard-ui/src/app/system-notifications/components/admin-system-notifications/admin-system-notifications.component.ts
@@ -10,7 +10,8 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 @Component({
   selector: 'app-notifications',
   templateUrl: './admin-system-notifications.component.html',
-  styleUrls: ['./admin-system-notifications.component.scss']
+  styleUrls: ['./admin-system-notifications.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class AdminSystemNotificationsComponent implements OnInit {
   private _forceLoad$ = new Subject<boolean>();
diff --git a/projects/gameboard-ui/src/app/system-notifications/components/system-notifications/system-notifications.component.ts b/projects/gameboard-ui/src/app/system-notifications/components/system-notifications/system-notifications.component.ts
index d3300e2c..9668d229 100644
--- a/projects/gameboard-ui/src/app/system-notifications/components/system-notifications/system-notifications.component.ts
+++ b/projects/gameboard-ui/src/app/system-notifications/components/system-notifications/system-notifications.component.ts
@@ -9,7 +9,8 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 @Component({
   selector: 'app-system-notifications',
   templateUrl: './system-notifications.component.html',
-  styleUrls: ['./system-notifications.component.scss']
+  styleUrls: ['./system-notifications.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class SystemNotificationsComponent implements OnInit {
   protected notifications: ViewSystemNotification[] = [];
diff --git a/projects/gameboard-ui/src/app/utility/user.service.ts b/projects/gameboard-ui/src/app/utility/user.service.ts
index 9fa3ced6..b5b9af4b 100644
--- a/projects/gameboard-ui/src/app/utility/user.service.ts
+++ b/projects/gameboard-ui/src/app/utility/user.service.ts
@@ -1,9 +1,9 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Injectable } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
-import { BehaviorSubject, combineLatest, firstValueFrom, of, timer } from 'rxjs';
+import { BehaviorSubject, Subscription, combineLatest, firstValueFrom, of, timer } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, map, switchMap, tap } from 'rxjs/operators';
 import { ApiUser, UserOidcProfile } from '../api/user-models';
 import { UserService as ApiUserService } from '../api/user.service';
@@ -13,7 +13,8 @@ import { LogService } from '@/services/log.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 
 @Injectable({ providedIn: 'root' })
-export class UserService {
+export class UserService implements OnDestroy {
+  private _userSub?: Subscription;
   user$ = new BehaviorSubject<ApiUser | null>(null);
   init$ = new BehaviorSubject<boolean>(false);
   refresh$ = new BehaviorSubject<boolean>(false);
@@ -21,7 +22,6 @@ export class UserService {
   constructor(
     private auth: AuthService,
     private log: LogService,
-    private unsub: UnsubscriberService,
     api: ApiUserService,
     config: ConfigService,
     router: Router
@@ -60,15 +60,18 @@ export class UserService {
     });
 
     // log the login event for the current user (we track date of last login and total login count)
-    this.unsub.add(
-      this.user$.pipe(
-        // when the user's id changes
-        distinctUntilChanged((prev, current) => (prev?.id || null) === (current?.id || null)),
-        // and when the user is truthy
-        filter(u => !!u),
-        // record a login event
-      ).subscribe(async u => await firstValueFrom(api.updateLoginEvents()))
-    );
+
+    this._userSub = this.user$.pipe(
+      // when the user's id changes
+      distinctUntilChanged((prev, current) => (prev?.id || null) === (current?.id || null)),
+      // and when the user is truthy
+      filter(u => !!u),
+      // record a login event
+    ).subscribe(async u => await firstValueFrom(api.updateLoginEvents()));
+  }
+
+  ngOnDestroy(): void {
+    this._userSub?.unsubscribe();
   }
 
   logout(): void {

From 1c6479ccd0e7e5e1552a51593d8263f047bff088 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 14:17:27 -0500
Subject: [PATCH 19/22] Correct missing provider for profile-editor

---
 .../users/components/profile-editor/profile-editor.component.ts  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
index 79a4ac2f..7eab1d02 100644
--- a/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
@@ -14,6 +14,7 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
   styleUrls: ['./profile-editor.component.scss'],
+  providers: [UnsubscriberService]
 })
 export class ProfileEditorComponent {
   currentUser$: Observable<ApiUser | null>;

From e549968c1177db371bcf22d6550181babe46a671 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 14:31:43 -0500
Subject: [PATCH 20/22] Fix reports module dependency and some spoonsor select
 bugs.

---
 .../src/app/core/models/date-range-query-param.model.ts      | 2 +-
 .../parameter-sponsor/parameter-sponsor.component.ts         | 5 ++---
 projects/gameboard-ui/src/app/reports/reports.module.ts      | 4 +++-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/projects/gameboard-ui/src/app/core/models/date-range-query-param.model.ts b/projects/gameboard-ui/src/app/core/models/date-range-query-param.model.ts
index 4d850941..2084454c 100644
--- a/projects/gameboard-ui/src/app/core/models/date-range-query-param.model.ts
+++ b/projects/gameboard-ui/src/app/core/models/date-range-query-param.model.ts
@@ -2,7 +2,7 @@ import { ReportDateRange } from "@/reports/reports-models";
 import { RouterService } from "@/services/router.service";
 import { UnsubscriberService } from "@/services/unsubscriber.service";
 import { inject } from "@angular/core";
-import { ActivatedRoute, Params, Route } from "@angular/router";
+import { ActivatedRoute, Params } from "@angular/router";
 
 export class DateRangeQueryParamModel {
     dateStartParamName = "dateStart";
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
index d4958b1e..41e8e590 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
@@ -47,6 +47,7 @@ export class ParameterSponsorComponent implements OnInit {
         const queryParamSponsorIds = (p.get(this.queryParamName) || "")
           .split(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
 
+        console.log("query param thing", queryParamSponsorIds);
         await this.updateSelectedSponsors(
           queryParamSponsorIds
             .map(id => this.getSponsorForId(id))
@@ -166,9 +167,7 @@ export class ParameterSponsorComponent implements OnInit {
     }
 
     const params: Params = {};
-    if (validSponsorIds.length) {
-      params[this.queryParamName] = validSponsorIds.join(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
-    }
+    params[this.queryParamName] = validSponsorIds.join(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
 
     await this.routerService.updateQueryParams({ parameters: params, resetParams: ["pageNumber"] });
     this.updateSelectionSummary(value);
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index 38968530..69d7a5f9 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -43,6 +43,7 @@ import { CountToTooltipClassPipe } from './pipes/count-to-tooltip-class.pipe';
 import { PlayerChallengeAttemptsModalComponent } from './components/player-challenge-attempts-modal/player-challenge-attempts-modal.component';
 import { PlayersReportSummaryToStatsPipe } from './components/reports/players-report/players-report-summary-to-stats.pipe';
 import { PlayersReportParticipationSummaryComponent } from './components/players-report-participation-summary/players-report-participation-summary.component';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
 
 @NgModule({
   declarations: [
@@ -105,6 +106,7 @@ import { PlayersReportParticipationSummaryComponent } from './components/players
     ]),
     FontAwesomeModule,
     CoreModule,
-  ]
+  ],
+  providers: [UnsubscriberService]
 })
 export class ReportsModule { }

From e81b785e28b6b0c73cbdbc2fc58730d62c323c46 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 14:52:10 -0500
Subject: [PATCH 21/22] Shorten autosave delay to 1.5 sec on challenge
 responses.

---
 .../src/app/game/gamespace-quiz/gamespace-quiz.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index e50c9a8a..63177076 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -60,7 +60,7 @@ export class GamespaceQuizComponent implements OnInit, OnChanges {
       // and flushed if the user submits answers during the debounce window
       this._updatePendingAnswers$.pipe(
         switchMap(update => of(update).pipe(
-          delay(3000),
+          delay(1500),
           takeUntil(this._answersSubmitted$)
         )),
         switchMap(update => this.challengesService.savePendingSubmission(update.challengeId, {

From 8ed254c8e218b31207b2b747c645169e298a2845 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Tue, 19 Dec 2023 15:01:25 -0500
Subject: [PATCH 22/22] Correct comment

---
 .../src/app/game/gamespace-quiz/gamespace-quiz.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
index 63177076..c7d1c44f 100644
--- a/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
+++ b/projects/gameboard-ui/src/app/game/gamespace-quiz/gamespace-quiz.component.ts
@@ -53,7 +53,7 @@ export class GamespaceQuizComponent implements OnInit, OnChanges {
 
   ngOnInit(): void {
     this.unsub.add(
-      // After the player inputs anything and then doesn't change it for 3 seconds,
+      // After the player inputs anything and then doesn't change it for a short time,
       // update their unsubmitted answers (we keep one set of unsubmitted answers per challenge).
       //
       // this is a lot like debounceTime, but we allow it to be interrupted