feat(OpenResponse): Summarize student responses in grading tool

src/app/services/localStorageService.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService {
+  setItem(key: string, value: any): void {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error('Error saving to local storage', e);
+    }
+  }
+
+  getItem(key: string): any {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : null;
+    } catch (e) {
+      console.error('Error reading from local storage', e);
+      return null;
+    }
+  }
+
+  removeItem(key: string): void {
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.error('Error removing from local storage', e);
+    }
+  }
+
+  clear(): void {
+    try {
+      localStorage.clear();
+    } catch (e) {
+      console.error('Error clearing local storage', e);
+    }
+  }
+}

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

@@ -72,6 +72,18 @@
             />
           </mat-card-content>
         </mat-card>
+      } @else if (component?.type === 'OpenResponse') {
+        <mat-card appearance="outlined" class="w-full">
+          <mat-card-content>
+            <open-response-summary
+              [nodeId]="node.id"
+              [componentId]="component.id"
+              [periodId]="periodId"
+              [source]="source"
+              [doRender]="true"
+            />
+          </mat-card-content>
+        </mat-card>
       }
     </div>
   }

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

@@ -12,6 +12,7 @@ import { CRaterService } from '../../../services/cRaterService';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { SummaryService } from '../../../components/summary/summaryService';
 import { PeerGroupButtonComponent } from '../peer-group-button/peer-group-button.component';
+import { ProjectService } from '../../../services/projectService';
 
 let component: ComponentSummaryComponent;
 let fixture: ComponentFixture<ComponentSummaryComponent>;
@@ -31,6 +32,7 @@ describe('ComponentSummaryComponent', () => {
           AnnotationService,
           ComponentServiceLookupService,
           CRaterService,
+          ProjectService,
           SummaryService
         ),
         MockProvider(TeacherDataService, {

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

@@ -14,6 +14,8 @@ import { IdeasSummaryComponent } from '../../../directives/teacher-summary-displ
 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';
+import { OpenResponseSummaryDisplayComponent } from '../../../directives/teacher-summary-display/open-response-summary-display/open-response-summary-display.component';
+import { ProjectService } from '../../../services/projectService';
 
 @Component({
   imports: [
@@ -22,6 +24,7 @@ import { CRaterService } from '../../../services/cRaterService';
     MatCardModule,
     MatchSummaryDisplayComponent,
     MilestoneReportButtonComponent,
+    OpenResponseSummaryDisplayComponent,
     PeerGroupButtonComponent,
     TeacherSummaryDisplayComponent
   ],
@@ -48,6 +51,7 @@ export class ComponentSummaryComponent {
     private componentServiceLookupService: ComponentServiceLookupService,
     private cRaterService: CRaterService,
     private dataService: TeacherDataService,
+    private projectService: ProjectService,
     private summaryService: SummaryService
   ) {}
 
@@ -79,6 +83,9 @@ export class ComponentSummaryComponent {
       (this.hasScoresSummary && this.hasScoreAnnotation) ||
       this.hasIdeaRubricData ||
       this.component?.type === 'Match';
+    if (this.component?.type === 'OpenResponse') {
+      this.hasSummaryData = this.projectService.getProject().ai?.enabled;
+    }
   }
 
   private setSource(): void {

src/assets/wise5/directives/teacher-summary-display/open-response-summary-display/open-response-summary-display.component.html

@@ -0,0 +1,24 @@
+@if (hasStudentResponses) {
+  <div class="flex gap-2 flex-wrap items-center mat-caption">
+    <div class="flex items-center gap-2">
+      <button mat-button (click)="generateSummary()" [disabled]="generatingSummary" color="primary">
+        <span i18n>Generate Class Summary</span><mat-icon>auto_awesome</mat-icon>
+      </button>
+      @if (generatingSummary) {
+        <mat-spinner diameter="20" />
+      }
+    </div>
+    @if (newSummaryAvailable) {
+      <span class="info" i18n>*New responses since last summary</span>
+    }
+  </div>
+  @if (summary) {
+    <markdown [data]="summary" />
+    <div class="mat-caption text-secondary" i18n>
+      Summary generated {{ summaryDate | date: 'short' }} from
+      {{ getLatestPeriodComponentStates().length }} responses
+    </div>
+  }
+} @else {
+  <div i18n>No student responses</div>
+}