feat(Dialog Guidance): Summary display for teachers

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.html

@@ -55,6 +55,17 @@ <h3 class="accent-1 mat-subtitle-2 gray-lightest-bg component-header">
             [doRender]="true"
           />
         }
+        @if (component.hasResponsesSummary && component.type === 'DialogGuidance') {
+          <dialog-guidance-teacher-summary-display
+            [nodeId]="nodeId"
+            [componentId]="component.id"
+            [periodId]="periodId"
+            [studentDataType]="'responses'"
+            [source]="source"
+            [chartType]="'column'"
+            [doRender]="true"
+          />
+        }
       </div>
     }
   </mat-card-content>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component.ts

@@ -1,34 +1,36 @@
-import { Component, Input } from '@angular/core';
-import { SummaryService } from '../../../../components/summary/summaryService';
 import { AnnotationService } from '../../../../services/annotationService';
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ComponentFactory } from '../../../../common/ComponentFactory';
 import { ComponentServiceLookupService } from '../../../../services/componentServiceLookupService';
 import { ComponentTypeService } from '../../../../services/componentTypeService';
-import { TeacherDataService } from '../../../../services/teacherDataService';
-import { TeacherProjectService } from '../../../../services/teacherProjectService';
-import { ComponentFactory } from '../../../../common/ComponentFactory';
+import { DialogGuidanceTeacherSummaryDisplayComponent } from '../../../../directives/teacher-summary-display/dialog-guidance-teacher-summary-display.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { isMatchingPeriods } from '../../../../common/period/period';
-import { Node } from '../../../../common/Node';
 import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { Node } from '../../../../common/Node';
 import { PreviewComponentComponent } from '../../../../authoringTool/components/preview-component/preview-component.component';
+import { SummaryService } from '../../../../components/summary/summaryService';
+import { TeacherDataService } from '../../../../services/teacherDataService';
+import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { TeacherSummaryDisplayComponent } from '../../../../directives/teacher-summary-display/teacher-summary-display.component';
-import { CommonModule } from '@angular/common';
 
 @Component({
-    imports: [
-        CommonModule,
-        MatCardModule,
-        MatIconModule,
-        MatDividerModule,
-        FlexLayoutModule,
-        PreviewComponentComponent,
-        TeacherSummaryDisplayComponent
-    ],
-    selector: 'node-info',
-    styleUrl: 'node-info.component.scss',
-    templateUrl: 'node-info.component.html'
+  imports: [
+    DialogGuidanceTeacherSummaryDisplayComponent,
+    CommonModule,
+    MatCardModule,
+    MatIconModule,
+    MatDividerModule,
+    FlexLayoutModule,
+    PreviewComponentComponent,
+    TeacherSummaryDisplayComponent
+  ],
+  selector: 'node-info',
+  styleUrl: 'node-info.component.scss',
+  templateUrl: 'node-info.component.html'
 })
 export class NodeInfoComponent {
   protected node: Node;

src/assets/wise5/components/summary/summaryService.ts

@@ -1,8 +1,8 @@
 'use strict';
 
 import { ComponentService } from '../componentService';
-import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Injectable()
@@ -26,7 +26,7 @@ export class SummaryService extends ComponentService {
       'OpenResponse',
       'Table'
     ];
-    this.componentsWithResponsesSummary = ['MultipleChoice', 'Table'];
+    this.componentsWithResponsesSummary = ['MultipleChoice', 'Table', 'DialogGuidance'];
   }
 
   getComponentTypeLabel(): string {

src/assets/wise5/directives/teacher-summary-display/dialog-guidance-teacher-summary-display.component.html

@@ -0,0 +1,20 @@
+<mat-card appearance="outlined" class="summary-card">
+  <mat-card-content>
+    @if (hasWarning) {
+      <p class="warn center">{{ warningMessage }}</p>
+    }
+    @if (doRender) {
+      <h2>Most Common Ideas Detected:</h2>
+      @for (idea of seeAllIdeas ? sortedIdeas : topIdeas; let i = $index; track idea.id) {
+        <h3>{{ i + 1 }}. {{ idea.text }} (<mat-icon>person</mat-icon>{{ idea.count }})</h3>
+      }
+      @if (sortedIdeas.length > 5) {
+        @if (seeAllIdeas) {
+          <a (mouseup)="toggleSeeAllIdeas()">See fewer ideas</a>
+        } @else {
+          <a (mouseup)="toggleSeeAllIdeas()">See all ideas</a>
+        }
+      }
+    }
+  </mat-card-content>
+</mat-card>

src/assets/wise5/directives/teacher-summary-display/dialog-guidance-teacher-summary-display.component.ts

@@ -0,0 +1,85 @@
+import { AnnotationService } from '../../services/annotationService';
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { ComponentState } from '../../../../app/domain/componentState';
+import { ConfigService } from '../../services/configService';
+import { CRaterIdea } from '../../components/common/cRater/CRaterIdea';
+import { CRaterService } from '../../services/cRaterService';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { ProjectService } from '../../services/projectService';
+import { SummaryService } from '../../components/summary/summaryService';
+import { TeacherDataService } from '../../services/teacherDataService';
+import { TeacherSummaryDisplayComponent } from './teacher-summary-display.component';
+
+@Component({
+  imports: [CommonModule, MatCardModule, MatIconModule],
+  selector: 'dialog-guidance-teacher-summary-display',
+  templateUrl: 'dialog-guidance-teacher-summary-display.component.html'
+})
+export class DialogGuidanceTeacherSummaryDisplayComponent extends TeacherSummaryDisplayComponent {
+  protected ideaCountMap: Map<string, Set<number>>;
+  protected sortedIdeas: { id: string; count: number }[] = [];
+  protected topIdeas: { id: string; count: number }[] = [];
+  protected seeAllIdeas: boolean = false;
+
+  constructor(
+    protected annotationService: AnnotationService,
+    protected configService: ConfigService,
+    private cRaterService: CRaterService,
+    protected dataService: TeacherDataService,
+    protected projectService: ProjectService,
+    protected summaryService: SummaryService
+  ) {
+    super(annotationService, configService, dataService, projectService, summaryService);
+    this.ideaCountMap = new Map<string, Set<number>>();
+  }
+
+  ngOnInit() {
+    this.getLatestWork().subscribe((componentStates) => {
+      this.extractIdeasFromComponentStates(componentStates);
+      this.sortIdeas();
+    });
+  }
+
+  private extractIdeasFromComponentStates(componentStates: ComponentState[]): void {
+    componentStates.forEach((componentState) => {
+      const detectedIdeas = this.getDetectedIdeasFromWorkgroup(componentState);
+      if (detectedIdeas !== undefined) {
+        detectedIdeas.forEach((idea) => {
+          if (this.ideaCountMap.has(idea.name)) {
+            this.ideaCountMap.get(idea.name).add(componentState.workgroupId);
+          } else {
+            this.ideaCountMap.set(idea.name, new Set([componentState.workgroupId]));
+          }
+        });
+      }
+    });
+  }
+
+  private getDetectedIdeasFromWorkgroup(componentState: ComponentState): CRaterIdea[] {
+    const detectedIdeas = [];
+    componentState.studentData.responses.forEach((response) => {
+      response.ideas
+        ?.filter((idea) => idea.detected)
+        .forEach((idea) => detectedIdeas.push(new CRaterIdea(idea.name, idea.detected)));
+    });
+    return detectedIdeas;
+  }
+
+  private sortIdeas(): void {
+    const rubric = this.cRaterService.getCRaterRubric(this.nodeId, this.componentId);
+    this.sortedIdeas = [...this.ideaCountMap.entries()]
+      .sort((a, b) => b[1].size - a[1].size)
+      .map((mapIterator) => ({
+        id: mapIterator[0],
+        text: rubric.getIdea(mapIterator[0])?.text ?? mapIterator[0],
+        count: mapIterator[1].size
+      }));
+    this.topIdeas = [...this.sortedIdeas].splice(0, 5);
+  }
+
+  protected toggleSeeAllIdeas(): void {
+    this.seeAllIdeas = !this.seeAllIdeas;
+  }
+}