feat(Teacher Tools): Color ideas in rubric and detected ideas in student work (#2278)

Also adds a color key to the rubric.

Author: hirokiterashima

src/app/classroom-monitor/show-crater-rubric/show-crater-rubric.component.ts

@@ -25,13 +25,13 @@ export class ShowCRaterRubricComponent {
   }
 
   ngOnDestroy(): void {
-    if (this.rubricEventService.getIsRubricOpen()) {
+    if (this.rubricEventService.isRubricDisplayed()) {
       this.rubricDialog.close();
     }
   }
 
   protected openIdeasRubric(): void {
-    if (!this.rubricEventService.getIsRubricOpen()) {
+    if (!this.rubricEventService.isRubricDisplayed()) {
       this.rubricDialog = this.dialog.open(CRaterRubricComponent, {
         panelClass: 'dialog-sm',
         position: { right: '0', bottom: '0' },

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.ts

@@ -10,7 +10,7 @@ import { MilestoneReportButtonComponent } from '../milestone-report-button/miles
 import { PeerGroupButtonComponent } from '../peer-group-button/peer-group-button.component';
 import { ComponentCompletionComponent } from '../component-completion/component-completion.component';
 import { ComponentContent } from '../../../common/ComponentContent';
-import { IdeasSummaryComponent } from '../../../directives/teacher-summary-display/ideas-summary-display/ideas-summary.component';
+import { IdeasSummaryComponent } from '../../../directives/teacher-summary-display/ideas-summary/ideas-summary.component';
 import { MatchSummaryDisplayComponent } from '../../../directives/teacher-summary-display/match-summary-display/match-summary-display.component';
 import { MatCardModule } from '@angular/material/card';
 import { CRaterService } from '../../../services/cRaterService';

src/assets/wise5/components/common/cRater/CRaterIdea.ts

@@ -1,11 +1,12 @@
 export class CRaterIdea {
   name: string;
   detected?: boolean;
+  color?: string;
   characterOffsets: any[];
   text?: string;
   tags?: string[];
 
-  constructor(name: string, detected?: boolean, text?: string, tags?: string[]) {
+  constructor(name: string, detected?: boolean, text?: string, tags?: string[], color?: string) {
     this.name = name;
     if (detected) {
       this.detected = detected;
@@ -16,5 +17,8 @@ export class CRaterIdea {
     if (tags) {
       this.tags = tags;
     }
+    if (color) {
+      this.color = color;
+    }
   }
 }

src/assets/wise5/components/common/cRater/CRaterRubric.ts

@@ -61,10 +61,15 @@ export class CRaterRubric {
             !uniqueIdeas.some((uniqueIdea) => uniqueIdea.name === idea.name)
         )
         .forEach((idea) => {
-          const cRaterIdea = new CRaterIdea(idea.name, true);
-          const cRaterRubricIdea = this.getIdea(idea.name);
-          cRaterIdea.text = cRaterRubricIdea?.text ?? idea.name;
-          uniqueIdeas.push(cRaterIdea);
+          uniqueIdeas.push(
+            new CRaterIdea(
+              idea.name,
+              true,
+              this.getIdeaDescriptionText(idea.name),
+              [],
+              this.getIdeaColor(idea.name)
+            )
+          );
         })
     );
     return uniqueIdeas;

src/assets/wise5/components/common/cRater/IdeaData.ts

@@ -8,10 +8,6 @@ export type IdeaData = {
   color?: string;
 };
 
-export function ideaDataToCRaterIdea(ideaData: IdeaData): CRaterIdea {
-  return new CRaterIdea(ideaData.id, undefined, ideaData.text, ideaData.tags);
-}
-
 export function cRaterIdeaToIdeaData(cRaterIdea: CRaterIdea): IdeaData {
   return { id: cRaterIdea.name, text: cRaterIdea.text, count: 0, tags: cRaterIdea.tags };
 }

src/assets/wise5/components/common/cRater/crater-rubric/RubricEventService.ts

@@ -1,14 +1,14 @@
-import { Injectable, signal } from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class RubricEventService {
-  private isRubricOpen: boolean;
+  private rubricDisplayed: boolean;
 
-  getIsRubricOpen(): boolean {
-    return this.isRubricOpen;
+  isRubricDisplayed(): boolean {
+    return this.rubricDisplayed;
   }
 
-  rubricToggled(): void {
-    this.isRubricOpen = !this.isRubricOpen;
+  toggleRubricDisplayed(): void {
+    this.rubricDisplayed = !this.rubricDisplayed;
   }
 }

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

@@ -6,10 +6,20 @@ <h2 mat-dialog-title class="!flex items-center !py-1 !pe-1">
   </button>
 </h2>
 <mat-dialog-content>
-  @if (cRaterRubric.description && cRaterRubric.description !== '') {
-    <p>{{ cRaterRubric.description }}</p>
+  @if (rubric.description && rubric.description !== '') {
+    <p>{{ rubric.description }}</p>
   }
-  @if (cRaterRubric.ideas.length > 0) {
+  @if (rubric.ideaColors) {
+    <div class="flex flex-wrap items-center gap-2 mb-4">
+      <span class="text-sm font-medium" i18n>Key:</span>
+      @for (ideaColor of rubric.ideaColors; track ideaColor.colorValue) {
+        <div class="py-0.5 px-1 rounded" [style.background-color]="ideaColor.colorValue">
+          <span class="text-sm">{{ ideaColor.tags.join(', ') }}</span>
+        </div>
+      }
+    </div>
+  }
+  @if (ideas.length > 0) {
     <table class="text-sm">
       <thead>
         <tr>
@@ -19,7 +29,7 @@ <h2 mat-dialog-title class="!flex items-center !py-1 !pe-1">
       </thead>
       <tbody>
         @for (idea of ideas; track idea.name) {
-          <tr>
+          <tr [style.background-color]="idea.color">
             <td>{{ idea.name }}</td>
             <td>{{ idea.text }}</td>
           </tr>

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

@@ -17,7 +17,7 @@ describe('LibraryProjectDetailsComponent', () => {
 
     fixture = TestBed.createComponent(CRaterRubricComponent);
     component = fixture.componentInstance;
-    component['cRaterRubric'] = new CRaterRubric();
+    component['rubric'] = new CRaterRubric();
     fixture.detectChanges();
   });
 
@@ -29,14 +29,14 @@ describe('LibraryProjectDetailsComponent', () => {
 
   it('should show description if one exists', () => {
     expect(fixture.nativeElement.querySelectorAll('p').length).toEqual(0);
-    component['cRaterRubric'].description = 'Test';
+    component['rubric'].description = 'Test';
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelectorAll('p').length).toEqual(1);
   });
 
   it('should not show description if none exists', () => {
     expect(fixture.nativeElement.querySelectorAll('p').length).toEqual(0);
-    component['cRaterRubric'].description = '';
+    component['rubric'].description = '';
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelectorAll('p').length).toEqual(0);
   });

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

@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { CRaterIdea } from '../CRaterIdea';
-import { cRaterIdeaToIdeaData, ideaDataToCRaterIdea, sortIdeasById } from '../IdeaData';
+import { cRaterIdeaToIdeaData, IdeaData, sortIdeasById } from '../IdeaData';
 import { CRaterRubric } from '../CRaterRubric';
 import { MatIconModule } from '@angular/material/icon';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -17,20 +17,21 @@ export class CRaterRubricComponent {
   protected ideas: CRaterIdea[];
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) protected cRaterRubric: CRaterRubric,
+    @Inject(MAT_DIALOG_DATA) protected rubric: CRaterRubric,
     private dialogRef: MatDialogRef<CRaterRubricComponent>,
     private rubricEventService: RubricEventService
   ) {}
 
   ngOnInit(): void {
-    this.ideas = sortIdeasById(this.cRaterRubric.ideas.map(cRaterIdeaToIdeaData)).map(
-      ideaDataToCRaterIdea
+    this.ideas = sortIdeasById(this.rubric.ideas.map(cRaterIdeaToIdeaData)).map(
+      (idea: IdeaData) =>
+        new CRaterIdea(idea.id, undefined, idea.text, idea.tags, this.rubric.getIdeaColor(idea.id))
     );
-    this.rubricEventService.rubricToggled();
+    this.rubricEventService.toggleRubricDisplayed();
   }
 
   ngOnDestroy(): void {
-    this.rubricEventService.rubricToggled();
+    this.rubricEventService.toggleRubricDisplayed();
   }
 
   protected closeDialog(): void {

src/assets/wise5/components/dialogGuidance/detected-ideas/detected-ideas.component.html

@@ -7,7 +7,7 @@
       <div class="secondary-text mb-2" i18n>Ideas detected:</div>
       <div class="flex flex-row flex-wrap gap-1 items-center">
         @for (idea of ideas; track idea.name) {
-          <span class="idea app-bg-bg border border-gray-300">
+          <span class="idea app-bg-bg border border-gray-300" [style.background-color]="idea.color">
             <b>{{ idea.name }}.</b>
             @if (idea.name !== idea.text) {
               {{ idea.text }}