fixes session link with URL params

PAIR-code · Jan 26, 2024 · afcb9bd · afcb9bd
1 parent e2f2310
commit afcb9bd
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 299 deletions.
diff --git a/llm-meditators/webapp/src/app/app.component.html b/llm-meditators/webapp/src/app/app.component.html
@@ -18,52 +18,51 @@
       <mat-nav-list class="menu-buttons">
         @for (stageName of dataService.user().completedStageNames; track stageName) {
           <mat-list-item
-            [activated]="false"
             matListItemTitle
-            routerLink="/"
-            routerLinkActive="active"
+            [routerLink]="['/']"
+            [queryParams]="{ stage: stageName }"
+            [class.highlighted]="dataService.session().stage === stageName"
             ariaCurrentWhenActive="page"
-            (click)="updateCurrentStageName(stageName)"
-            class="menu-item {{ stageName === dataService.user().currentStageName ? 'current-stage' : '' }}"
+            class="menu-item"
           >
+            <!-- (click)="updateCurrentStageName(stageName)" -->
             <div class="menu-item-inner">
               {{ stageName }}
               <mat-icon class="icon completed" fontIcon="check"></mat-icon>
             </div>
           </mat-list-item>
         }
         <mat-list-item
-          [activated]="false"
           matListItemTitle
-          routerLink="/"
-          routerLinkActive="active"
+          [routerLink]="['/']"
           ariaCurrentWhenActive="page"
+          #rla="routerLinkActive"
+          [routerLinkActiveOptions]="{ exact: true }"
+          routerLinkActive
           class="menu-item working-on-stage"
-          (click)="updateCurrentStageName(workingOnStageName())"
+          [class.highlighted]="dataService.session().stage === workingOnStageName() && rla.isActive"
         >
           <div class="menu-item-inner">
             {{ workingOnStageName() }}
             <div class="ongoing-badge">ongoing</div>
+            {{ rla.isActive }}
           </div>
         </mat-list-item>
         @for (stageName of dataService.user().futureStageNames; track stageName) {
           <mat-list-item
             [disabled]="true"
             [activated]="false"
             matListItemTitle
-            routerLink="/"
-            routerLinkActive="active"
             ariaCurrentWhenActive="page"
             class="menu-item future-stage"
           >
             {{ stageName }}
           </mat-list-item>
         }
         <mat-list-item
-          [activated]="router.url === '/settings'"
           matListItemTitle
           routerLink="/settings"
-          routerLinkActive="active"
+          routerLinkActive="highlighted"
           ariaCurrentWhenActive="page"
         >
           <div class="icon-menu-item"><mat-icon>settings</mat-icon>Settings</div>

diff --git a/llm-meditators/webapp/src/app/app.component.scss b/llm-meditators/webapp/src/app/app.component.scss
@@ -54,12 +54,16 @@ $toolbar-height: 60px;
   flex: 1 1 auto;
   overflow: auto;
 
-  .current-stage {
-    background-color: #3f51b555;
+  .highlighted {
+    background-color: #ddd;
   }
 
   .working-on-stage {
-    background-color: #ddd;
+    .menu-item-inner {}
+  }
+
+  .active {
+    color: #D00;
   }
 
   .menu-item-inner {

diff --git a/llm-meditators/webapp/src/app/app.component.ts b/llm-meditators/webapp/src/app/app.component.ts
@@ -37,7 +37,7 @@ export class AppComponent implements AfterViewInit {
     effect(() => {
       // document.querySelector('title')!.textContent =
       //   this.dataService.appName();
-      document.title = `Rudders: ${this.dataService.appName()}`;
+      document.title = `Experiment: ${this.dataService.appName()}`;
     });
   }
 

diff --git a/llm-meditators/webapp/src/app/app.module.ts b/llm-meditators/webapp/src/app/app.module.ts
@@ -42,13 +42,15 @@ import { NgModule } from '@angular/core';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { SavedDataService } from './services/saved-data.service';
 import { VertexApiService } from './services/vertex-api.service';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   declarations: [AppComponent, AppSettingsComponent, PageNotFoundComponent],
   providers: [VertexApiService, SavedDataService, LmApiService, GoogleAuthService, GoogleSheetsService],
   bootstrap: [AppComponent],
   imports: [
     BrowserModule,
+    RouterModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,

diff --git a/llm-meditators/webapp/src/app/exp-leader-vote/exp-leader-vote.component.ts b/llm-meditators/webapp/src/app/exp-leader-vote/exp-leader-vote.component.ts
@@ -75,11 +75,11 @@ export class ExpLeaderVoteComponent {
       this.dataService.setStageComplete(true);
     }
     this.votes[userId] = value;
-    this.dataService.editCurrentExpStageData<Votes>(() => this.votes);
+    this.dataService.editWorkingOnExpStageData<Votes>(() => this.votes);
   }
 
   resetVote(userId: string) {
     this.votes[userId] = LeaderVote.NOT_RATED;
-    this.dataService.editCurrentExpStageData<Votes>(() => this.votes);
+    this.dataService.editWorkingOnExpStageData<Votes>(() => this.votes);
   }
 }
diff --git a/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.html b/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.html
diff --git a/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.scss b/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.scss
diff --git a/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.spec.ts b/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.spec.ts
diff --git a/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.ts b/llm-meditators/webapp/src/app/exp-rating/exp-rating.component.ts