Merge pull request #92 from cjqian/master

Disable stage map progression depending on stage-specific criteria.
PAIR-code · Mar 8, 2024 · 31ed40b · 31ed40b
2 parents 17b1dd5 + 62a1222
commit 31ed40b
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 12 deletions.
diff --git a/...s/webapp/src/app/participant-view/participant-stage-view/exp-chat/exp-chat.component.html b/...s/webapp/src/app/participant-view/participant-stage-view/exp-chat/exp-chat.component.html
@@ -57,7 +57,7 @@
     <div>
       <mat-slide-toggle 
         [checked]="this.stageData().readyToEndChat === true"
-        [disabled]="this.stageData().isSilent === true"
+        [disabled]="this.isSilent()"
         (change)="updateToogleValue($event)"
       >
       I'm done with chatting and ready to move on

diff --git a/...ors/webapp/src/app/participant-view/participant-stage-view/exp-chat/exp-chat.component.ts b/...ors/webapp/src/app/participant-view/participant-stage-view/exp-chat/exp-chat.component.ts
@@ -86,8 +86,16 @@ export class ExpChatComponent {
           participantsReady.push(p);
         }
       });
-      return participantsReady.length === (this.otherParticipants().length + 1);
+      const isReady = participantsReady.length === (this.otherParticipants().length + 1);
 
+      // Allow "Next" to be pushed.
+      if (isReady) {
+        const allUsers = Object.values(this.participant.experiment().participants);
+        for (const user of allUsers) {
+            user.allowedStageProgressionMap[user.workingOnStageName] = true;
+        }
+      }
+      return isReady;
     });
 
     effect(() => {
@@ -107,12 +115,14 @@ export class ExpChatComponent {
 
   }
 
+  isSilent() {
+    return (this.stageData().isSilent !== false);
+  }
+
   sendMessage() {
     this.participant.sendMessage(this.message);
     this.message = '';
-    if (this.stageData().isSilent) {
-      this.stageData().isSilent = false;
-    }
+    this.stageData().isSilent = false;
   }
 
   updateToogleValue(updatedValue: MatSlideToggleChange) {

diff --git a/.../participant-view/participant-stage-view/exp-leader-reveal/exp-leader-reveal.component.ts b/.../participant-view/participant-stage-view/exp-leader-reveal/exp-leader-reveal.component.ts
@@ -29,7 +29,14 @@ export class ExpLeaderRevealComponent {
 
     this.everyoneReachedTheEnd = computed(() => {
       const users = Object.values(this.participant.experiment().participants);
-      return users.map((userData) => userData.futureStageNames.length).every((n) => n === 1);
+      const isReady = users.map((userData) => userData.futureStageNames.length).every((n) => n === 1);
+      // Allow "Next" to be pushed.
+      if (isReady) {
+        for (const user of users) {
+            user.allowedStageProgressionMap[user.workingOnStageName] = true;
+        }
+      }
+      return isReady;
     });
 
     this.finalLeader = computed(() => {

diff --git a/...ticipant-view/participant-stage-view/exp-tos-and-profile/exp-tos-and-profile.component.ts b/...ticipant-view/participant-stage-view/exp-tos-and-profile/exp-tos-and-profile.component.ts
@@ -14,7 +14,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatRadioChange, MatRadioModule } from '@angular/material/radio';
 
-import { StageKinds, TosAndUserProfile } from '../../../../lib/staged-exp/data-model';
+import { StageKinds, TosAndUserProfile, UserData } from '../../../../lib/staged-exp/data-model';
 import { AppStateService } from '../../../services/app-state.service';
 import { Participant } from 'src/lib/staged-exp/participant';
 
@@ -53,6 +53,11 @@ export class ExpTosAndProfileComponent {
     this.participant = participant;
   }
 
+  canProceedToNextStep(user: UserData) {
+    // TODO(cjqian): Make sure TOS is accepted as well.
+    return (user.profile.avatarUrl !== '') && (user.profile.name !== '') && (user.profile.pronouns !== '');
+  }
+
   isOtherPronoun(s: string) {
     return s !== Pronouns.HeHim && s !== Pronouns.SheHer && s !== Pronouns.TheyThem;
   }
@@ -96,6 +101,7 @@ export class ExpTosAndProfileComponent {
       user.profile.avatarUrl = this.stageData().avatarUrl;
       user.profile.name = this.stageData().name;
       user.profile.pronouns = this.stageData().pronouns;
+      user.allowedStageProgressionMap[user.workingOnStageName] = this.canProceedToNextStep(user);
     });
   }
 }
diff --git a/...app/src/app/participant-view/participant-stage-view/participant-stage-view.component.html b/...app/src/app/participant-view/participant-stage-view/participant-stage-view.component.html
@@ -38,11 +38,9 @@ <h2>{{ this.participant.viewingStage().name }} ({{ this.participant.viewingStage
     }
   </div>
 
-  @if (this.participant.userData().futureStageNames.length !== 0) {
-    <button color="primary" mat-button (click)="nextStep()">
-      <!-- [disabled]="!this.dataService.stageComplete()"  -->
-      <!-- <mat-icon>redo</mat-icon> -->
+
+    <button color="primary" [disabled]="!this.shouldShowNextStep()" mat-button (click)="nextStep()">
       <span>Next step</span>
     </button>
-  }
+
 </div>
diff --git a/...ebapp/src/app/participant-view/participant-stage-view/participant-stage-view.component.ts b/...ebapp/src/app/participant-view/participant-stage-view/participant-stage-view.component.ts
@@ -49,7 +49,13 @@ export class ParticipantStageViewComponent {
     this.participant = appState.particpant;
   }
 
+  shouldShowNextStep() {
+    const userData = this.participant.userData();
+    return userData.allowedStageProgressionMap[userData.workingOnStageName];
+  }
+
   nextStep() {
     this.participant.nextStep();
   }
 }
+
diff --git a/llm-meditators/webapp/src/lib/staged-exp/data-model.ts b/llm-meditators/webapp/src/lib/staged-exp/data-model.ts
@@ -129,6 +129,7 @@ export interface ChatAboutItems {
   messages: Message[];
   items: Item[];
   readyToEndChat: boolean;
+  // TODO(cjqian): This needs to be a per-participant value.
   isSilent: boolean;
 }
 
@@ -357,6 +358,7 @@ export interface UserData {
   // Their appearance.
   profile: UserProfile;
   stageMap: { [stageName: string]: ExpStage };
+  allowedStageProgressionMap: { [stageName: string]: boolean };
   completedStageNames: string[]; // current stage is the very last one.
   workingOnStageName: string;
   futureStageNames: string[];

diff --git a/llm-meditators/webapp/src/lib/staged-exp/example-experiment.ts b/llm-meditators/webapp/src/lib/staged-exp/example-experiment.ts
@@ -226,8 +226,17 @@ function finalSatisfactionSurvey(): ExpStageSurvey {
 // Example data to bootstrap us...
 export function initUserData(stages: ExpStage[]): UserData {
   const stageMap: { [stageName: string]: ExpStage } = {};
+  const allowedStageProgressionMap: { [stageName: string]: boolean } = {};
+  const autoProgressStages = [StageKinds.takeSurvey.toString(), StageKinds.voteForLeader.toString()];
   stages.forEach((s) => {
     stageMap[s.name] = s;
+
+    // TODO(cjqian): Temporary measure.
+    if (autoProgressStages.includes(s.kind)) {
+      allowedStageProgressionMap[s.name] = true;
+    } else {
+      allowedStageProgressionMap[s.name] = false;
+    }
   });
   const futureStageNames = stages.map((s) => s.name);
   const currentStageName = futureStageNames.shift();
@@ -247,6 +256,7 @@ export function initUserData(stages: ExpStage[]): UserData {
       avatarUrl: '',
     },
     stageMap,
+    allowedStageProgressionMap,
     workingOnStageName,
     completedStageNames: [] as string[],
     futureStageNames,