feat(CRater authoring): Populate rubric automatically (#2239)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

Author: hirokiterashima

src/app/services/cRaterService.spec.ts

@@ -5,7 +5,7 @@ import { HttpTestingController, provideHttpClientTesting } from '@angular/common
 import { CRaterIdea } from '../../assets/wise5/components/common/cRater/CRaterIdea';
 import { CRaterScore } from '../../assets/wise5/components/common/cRater/CRaterScore';
 import { RawCRaterResponse } from '../../assets/wise5/components/common/cRater/RawCRaterResponse';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { ProjectService } from '../../assets/wise5/services/projectService';
 import { ComponentContent } from '../../assets/wise5/common/ComponentContent';
 let service: CRaterService;
@@ -24,7 +24,7 @@ describe('CRaterService', () => {
         ConfigService,
         CRaterService,
         { provide: ProjectService, useClass: MockProjectService },
-        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClient(),
         provideHttpClientTesting()
       ]
     });
@@ -182,7 +182,7 @@ function makeCRaterVerifyRequest() {
     it('should make a CRater verify request', () => {
       spyOn(configService, 'getCRaterRequestURL').and.returnValue('/c-rater');
       const itemId = 'ColdBeverage1Sub';
-      service.makeCRaterVerifyRequest(itemId);
+      service.makeCRaterVerifyRequest(itemId).subscribe();
       http.expectOne({
         url: `/c-rater/verify?itemId=${itemId}`,
         method: 'GET'

src/assets/wise5/components/common/cRater/crater-item-select/crater-item-select.component.html

@@ -0,0 +1,8 @@
+<mat-form-field>
+  <mat-label i18n>AI Model ID</mat-label>
+  <mat-select [(ngModel)]="selectedItemId" (selectionChange)="getItemRubric()">
+    @for (itemId of itemIds; track itemId) {
+      <mat-option [value]="itemId">{{ itemId }}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>

src/assets/wise5/components/common/cRater/crater-item-select/crater-item-select.component.spec.ts

@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CRaterItemSelectComponent } from './crater-item-select.component';
+import { MockProviders } from 'ng-mocks';
+import { CRaterService } from '../../../../services/cRaterService';
+import { TeacherProjectService } from '../../../../services/teacherProjectService';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSelectHarness } from '@angular/material/select/testing';
+import { Observable } from 'rxjs';
+
+let loader: HarnessLoader;
+describe('CRaterItemSelectComponent', () => {
+  let component: CRaterItemSelectComponent;
+  let fixture: ComponentFixture<CRaterItemSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CRaterItemSelectComponent],
+      providers: [MockProviders(CRaterService, TeacherProjectService)]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CRaterItemSelectComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    component.componentContent = { itemId: 'berkeley_HeLa', type: 'DialogGuidance' };
+    fixture.detectChanges();
+  });
+
+  it('should show selected item id', async () => {
+    const select = await loader.getHarness(MatSelectHarness);
+    expect(await select.getValueText()).toBe('berkeley_HeLa');
+  });
+
+  it('should get rubric and update component when item id is changed', async () => {
+    const cRaterService = TestBed.inject(CRaterService);
+    const rubricSpy = spyOn(cRaterService, 'makeCRaterVerifyRequest').and.returnValue(
+      new Observable<any>((observer) => {
+        observer.next({
+          rubric: {
+            description: 'Test description',
+            ideas: [
+              { name: '1', text: 'Idea 1 text' },
+              { name: '2', text: 'Idea 2 text' }
+            ]
+          }
+        });
+        observer.complete();
+      })
+    );
+    const saveSpy = spyOn(TestBed.inject(TeacherProjectService), 'saveProject');
+    const select = await loader.getHarness(MatSelectHarness);
+    await select.open();
+    const options = await select.getOptions();
+    await options[0].click(); // Select the first item (berkeley_BowlsInAFridge)
+    expect(rubricSpy).toHaveBeenCalled();
+    expect(saveSpy).toHaveBeenCalled();
+    expect(component.componentContent.itemId).toEqual('berkeley_BowlsInAFridge');
+    expect(component.componentContent.cRaterRubric).toEqual({
+      description: 'Test description',
+      ideas: [
+        { name: '1', text: 'Idea 1 text' },
+        { name: '2', text: 'Idea 2 text' }
+      ]
+    });
+  });
+});

src/assets/wise5/components/common/cRater/crater-item-select/crater-item-select.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input } from '@angular/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { CRaterService } from '../../../../services/cRaterService';
+import { TeacherProjectService } from '../../../../services/teacherProjectService';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  imports: [FormsModule, MatFormFieldModule, MatSelect, MatOption],
+  selector: 'c-rater-item-select',
+  templateUrl: './crater-item-select.component.html'
+})
+export class CRaterItemSelectComponent {
+  @Input() componentContent: any;
+  protected itemIds = [
+    'berkeley_BowlsInAFridge',
+    'berkeley_CarOnAColdDay',
+    'berkeley_COAL-II',
+    'berkeley_CovidImpacts',
+    'berkeley_FoodJustice',
+    'berkeley_FoodJusticeShortLabelIdeaKI',
+    'berkeley_GenEx-Siblings',
+    'berkeley_HeLa',
+    'berkeley_Impacts',
+    'berkeley_Lizards',
+    'berkeley_MusicalInstruments-Speed',
+    'berkeley_PhotoEnergyStory',
+    'berkeley_PlateTectonics_MtHood',
+    'berkeley_SPOON-II'
+  ];
+  protected selectedItemId: string;
+
+  constructor(
+    private cRaterService: CRaterService,
+    private projectService: TeacherProjectService
+  ) {}
+
+  ngOnInit(): void {
+    if (this.componentContent.type === 'OpenResponse') {
+      this.selectedItemId = this.componentContent.cRater.itemId;
+    } else if (this.componentContent.type === 'DialogGuidance') {
+      this.selectedItemId = this.componentContent.itemId;
+    }
+  }
+
+  protected getItemRubric(): void {
+    this.cRaterService.makeCRaterVerifyRequest(this.selectedItemId).subscribe((response) => {
+      const cRaterRubric = response.rubric ?? { description: '', ideas: [] };
+      if (this.componentContent.type === 'OpenResponse') {
+        this.componentContent.cRater.rubric = cRaterRubric;
+        this.componentContent.cRater.itemId = this.selectedItemId;
+      } else if (this.componentContent.type === 'DialogGuidance') {
+        this.componentContent.cRaterRubric = cRaterRubric;
+        this.componentContent.itemId = this.selectedItemId;
+      }
+      this.projectService.saveProject();
+    });
+  }
+}

src/assets/wise5/components/common/cRater/edit-crater-description/edit-crater-description.component.html

@@ -1,16 +1,9 @@
-<div class="description notice-bg-bg">
-  <h5 class="flex flex-row items-center gap-1 !text-xl">
-    <span i18n>Model Description</span>
-  </h5>
-  <mat-card appearance="outlined" class="description-content">
-    <mat-form-field class="description-input form-field-no-hint" appearance="fill">
-      <mat-label i18n>User-Friendly Description</mat-label>
-      <textarea
-        matInput
-        [(ngModel)]="cRaterRubric.description"
-        (ngModelChange)="inputChanged.next($event)"
-        cdkTextareaAutosize
-      ></textarea>
-    </mat-form-field>
-  </mat-card>
-</div>
+<mat-form-field class="description-input" appearance="fill">
+  <mat-label i18n>User-Friendly Description</mat-label>
+  <textarea
+    matInput
+    [(ngModel)]="cRaterRubric.description"
+    (ngModelChange)="inputChanged.next($event)"
+    cdkTextareaAutosize
+  ></textarea>
+</mat-form-field>

src/assets/wise5/components/common/cRater/edit-crater-description/edit-crater-description.component.ts

@@ -3,15 +3,14 @@ import { Component, Input } from '@angular/core';
 import { CRaterRubric } from '../CRaterRubric';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { FormsModule } from '@angular/forms';
-import { MatCardModule } from '@angular/material/card';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { Subject, Subscription } from 'rxjs';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 
 @Component({
   selector: 'edit-crater-description',
-  imports: [CdkTextareaAutosize, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule],
+  imports: [CdkTextareaAutosize, FormsModule, MatFormFieldModule, MatInputModule],
   templateUrl: './edit-crater-description.component.html',
   styleUrl: './edit-crater-description.component.scss'
 })

src/assets/wise5/components/common/cRater/edit-crater-idea-descriptions/edit-crater-idea-descriptions.component.scss

@@ -12,6 +12,8 @@ h5 {
 ul {
   margin: 16px 0 0 0;
   padding: 0 0 16px;
+  max-height: 60vh;
+  overflow: auto;
 }
 
 li {

src/assets/wise5/components/common/cRater/edit-crater-info/edit-crater-info.component.ts

@@ -2,19 +2,13 @@ import { Component, Input } from '@angular/core';
 import { CRaterRubric } from '../CRaterRubric';
 import { EditCRaterDescriptionComponent } from '../edit-crater-description/edit-crater-description.component';
 import { EditCRaterIdeaDescriptionsComponent } from '../edit-crater-idea-descriptions/edit-crater-idea-descriptions.component';
-import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'edit-crater-info',
-  imports: [EditCRaterDescriptionComponent, EditCRaterIdeaDescriptionsComponent, MatCardModule],
-  styles: ['.wrapper { padding: 16px; }'],
-  template: `<mat-card appearance="outlined" class="wrapper">
-    <h5 class="gap-1 !text-xl">
-      <span i18n>Edit CRater Information</span>
-    </h5>
+  imports: [EditCRaterDescriptionComponent, EditCRaterIdeaDescriptionsComponent],
+  template: `<h5 class="!text-xl" i18n>AI Model Details</h5>
     <edit-crater-description [cRaterRubric]="cRaterRubric" />
-    <edit-crater-idea-descriptions [ideaDescriptions]="cRaterRubric.ideas" />
-  </mat-card>`
+    <edit-crater-idea-descriptions [ideaDescriptions]="cRaterRubric.ideas" />`
 })
 export class EditCRaterInfoComponent {
   @Input() cRaterRubric: CRaterRubric;

src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html

@@ -3,15 +3,7 @@
     [componentContent]="componentContent"
     (promptChangedEvent)="promptChanged($event)"
   />
-  <mat-form-field>
-    <mat-label i18n>Item ID</mat-label>
-    <input
-      matInput
-      [(ngModel)]="componentContent.itemId"
-      (ngModelChange)="inputChange.next($event)"
-      type="text"
-    />
-  </mat-form-field>
+  <c-rater-item-select [componentContent]="componentContent" />
   <edit-component-max-submit [componentContent]="componentContent" />
   <mat-checkbox
     color="primary"
@@ -29,4 +21,5 @@
     [feedbackRules]="componentContent.feedbackRules"
     [version]="componentContent.version"
   />
+  <edit-crater-info [cRaterRubric]="componentContent.cRaterRubric" />
 </div>

src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.spec.ts

@@ -1,4 +1,4 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ProjectLocale } from '../../../../../app/domain/projectLocale';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
@@ -8,6 +8,8 @@ import { TeacherNodeService } from '../../../services/teacherNodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
 import { DialogGuidanceAuthoringComponent } from './dialog-guidance-authoring.component';
+import { MockComponent } from 'ng-mocks';
+import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component';
 
 const componentContent = {
   id: 'i64ex48j1z',
@@ -18,31 +20,31 @@ const componentContent = {
   showSubmitButton: false,
   isComputerAvatarEnabled: false
 };
-
 describe('DialogGuidanceAuthoringComponent', () => {
   let component: DialogGuidanceAuthoringComponent;
   let fixture: ComponentFixture<DialogGuidanceAuthoringComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [DialogGuidanceAuthoringComponent, StudentTeacherCommonServicesModule],
+      imports: [
+        DialogGuidanceAuthoringComponent,
+        MockComponent(EditComponentPrompt),
+        StudentTeacherCommonServicesModule
+      ],
       providers: [
         ProjectAssetService,
         TeacherNodeService,
         TeacherProjectService,
         TeacherProjectTranslationService,
-        provideHttpClient(withInterceptorsFromDi())
+        provideHttpClient()
       ]
     });
-    spyOn(TestBed.inject(TeacherProjectService), 'getLocale').and.returnValue(
-      new ProjectLocale({ default: 'en-US' })
-    );
     fixture = TestBed.createComponent(DialogGuidanceAuthoringComponent);
     component = fixture.componentInstance;
-    spyOn(TestBed.inject(TeacherProjectService), 'isDefaultLocale').and.returnValue(true);
-    spyOn(TestBed.inject(TeacherProjectService), 'getComponent').and.returnValue(
-      copy(componentContent)
-    );
+    const projectService = TestBed.inject(TeacherProjectService);
+    spyOn(projectService, 'getLocale').and.returnValue(new ProjectLocale({ default: 'en-US' }));
+    spyOn(projectService, 'isDefaultLocale').and.returnValue(true);
+    spyOn(projectService, 'getComponent').and.returnValue(copy(componentContent));
     component.componentContent = copy(componentContent);
     fixture.detectChanges();
   });