feat(IdeasSummary): Show student responses

src/app/modules/library/library-project-details/library-project-details.component.scss

@@ -1,9 +1,6 @@
 @use '@angular/material' as mat;
-
 @use 'style/abstracts/functions';
-
-.library-project-details {
-}
+@reference "tailwindcss";
 
 .info-block {
   padding: 12px;
@@ -58,6 +55,10 @@
   }
 }
 
+.notice {
+  @apply max-w-none;
+}
+
 discourse-category-activity, unit-tags {
   margin-bottom: 12px;
   display: block;

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

@@ -0,0 +1,24 @@
+<mat-expansion-panel
+  [disabled]="idea.count === 0"
+  [hideToggle]="idea.count === 0"
+  (opened)="toggleDetails()"
+>
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      <span class="font-normal text-sm">{{ idea.id }}. {{ idea.text }}</span>
+    </mat-panel-title>
+    <mat-panel-description>
+      <span class="font-normal text-sm flex items-center">
+        <mat-icon class="mat-18">person</mat-icon>{{ idea.count }}
+      </span>
+    </mat-panel-description>
+  </mat-expansion-panel-header>
+  <div class="text-sm bg-white p-1 rounded">
+    Sample responses:
+    <ul>
+      @for (response of responses; track response.timestamp) {
+        <li>"{{ response.text }}"</li>
+      }
+    </ul>
+  </div>
+</mat-expansion-panel>

src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.scss

@@ -0,0 +1,53 @@
+@import "tailwindcss";
+
+idea-summary {
+  --mat-expansion-legacy-header-indicator-display: none;
+  --mat-expansion-header-indicator-display: inline-block;
+  // TODO: convert to expansion-overrides mixin when supported
+  --mat-expansion-header-collapsed-state-height: auto;
+  --mat-expansion-header-expanded-state-height: auto;
+  --mat-expansion-container-elevation-shadow: none;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    @apply mt-1;
+  }
+
+  .mat-expansion-panel {
+    @apply bg-gray-100;
+  }
+
+  .mat-expansion-panel-header {
+    @apply py-1 px-2;
+  }
+
+  .mat-expansion-panel-header-title {
+    flex-grow: 15;
+  }
+
+  .mat-expansion-panel-header-description {
+    align-items: start;
+    flex-grow: 1;
+  }
+
+  .mat-content.mat-content-hide-toggle {
+    margin-inline-end: 0;
+
+    .mat-expansion-panel-header-description {
+      margin-inline-end: 0;
+    }
+  }
+
+  .mat-expansion-indicator {
+    align-self: start;
+  }
+
+  .mat-expansion-panel-body {
+    @apply pb-2 px-2;
+  }
+}

src/assets/wise5/directives/teacher-summary-display/idea-summary/idea-summary.component.spec.ts

@@ -0,0 +1,262 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockProviders } from 'ng-mocks';
+import { Observable, Subject } from 'rxjs';
+import { AnnotationService } from '../../../services/annotationService';
+import { ConfigService } from '../../../services/configService';
+import { CRaterService } from '../../../services/cRaterService';
+import { SummaryService } from '../../../components/summary/summaryService';
+import { TeacherDataService } from '../../../services/teacherDataService';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { IdeaSummaryComponent } from './idea-summary.component';
+import { ComponentState } from '../../../../../app/domain/componentState';
+import { Annotation } from '../../../common/Annotation';
+import { DataService } from '../../../../../app/services/data.service';
+import { ProjectService } from '../../../services/projectService';
+
+let component: IdeaSummaryComponent;
+let fixture: ComponentFixture<IdeaSummaryComponent>;
+let annotationService: AnnotationService;
+let projectService: TeacherProjectService;
+
+class MockProjectService {
+  private projectSavedSource: Subject<any> = new Subject<any>();
+  public readonly projectSaved$: Observable<any> = this.projectSavedSource.asObservable();
+  getComponent(): any {
+    return null;
+  }
+}
+
+describe('IdeaSummaryComponent', () => {
+  beforeEach(async () => {
+    const dataServiceSpy = jasmine.createSpyObj('DataService', ['getCurrentNode']);
+    await TestBed.configureTestingModule({
+      imports: [IdeaSummaryComponent],
+      providers: [
+        { provide: DataService, useValue: dataServiceSpy },
+        { provide: ProjectService, useClass: MockProjectService },
+        { provide: TeacherProjectService, useClass: MockProjectService },
+        MockProviders(
+          AnnotationService,
+          ConfigService,
+          CRaterService,
+          TeacherDataService,
+          SummaryService
+        )
+      ]
+    }).compileComponents();
+
+    projectService = TestBed.inject(TeacherProjectService);
+    annotationService = TestBed.inject(AnnotationService);
+    fixture = TestBed.createComponent(IdeaSummaryComponent);
+    component = fixture.componentInstance;
+
+    // Set up default inputs
+    component.componentId = 'component1';
+    component.nodeId = 'node1';
+    component.idea = {
+      id: 'idea1',
+      text: 'Test Idea',
+      count: 5
+    };
+  });
+
+  describe('initial state', () => {
+    it('should initialize with empty responses array', () => {
+      expect(component['responses']).toEqual([]);
+    });
+  });
+
+  describe('when expanding for the first time', () => {
+    beforeEach(() => {
+      component['responses'] = [];
+    });
+
+    it('should not fetch responses again when already loaded', async () => {
+      component['responses'] = [{ text: 'Existing response', timestamp: 123456 }];
+
+      const getComponentSpy = spyOn(projectService, 'getComponent');
+      const getLatestWorkSpy = spyOn<any>(component, 'getLatestWork');
+
+      await component['toggleDetails']();
+
+      expect(getComponentSpy).not.toHaveBeenCalled();
+      expect(getLatestWorkSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('getDGResponsesWithIdea()', () => {
+    it('should return responses with the specified idea', () => {
+      const states = [
+        new ComponentState({
+          workgroupId: 1,
+          studentData: {
+            responses: [
+              { text: 'Student response 1', timestamp: 111 },
+              { text: 'Computer response 1', ideas: [{ detected: true, name: 'idea1' }] }
+            ]
+          }
+        }),
+        new ComponentState({
+          workgroupId: 2,
+          studentData: {
+            responses: [
+              { text: 'Student response 2', timestamp: 222 },
+              { text: 'Computer response 2', ideas: [{ detected: true, name: 'idea2' }] }
+            ]
+          }
+        })
+      ];
+
+      const responses = component['getDGResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(1);
+      expect(responses[0].text).toBe('Student response 1');
+    });
+
+    it('should return only one response per workgroup', () => {
+      const states = [
+        new ComponentState({
+          workgroupId: 1,
+          studentData: {
+            responses: [
+              { text: 'Student response 1a', timestamp: 111 },
+              { text: 'Computer response 1a', ideas: [{ detected: true, name: 'idea1' }] }
+            ]
+          }
+        }),
+        new ComponentState({
+          workgroupId: 1,
+          studentData: {
+            responses: [
+              { text: 'Student response 1b', timestamp: 222 },
+              { text: 'Computer response 1b', ideas: [{ detected: true, name: 'idea1' }] }
+            ]
+          }
+        })
+      ];
+
+      const responses = component['getDGResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(1);
+    });
+
+    it('should return empty array when no ideas match', () => {
+      const states = [
+        new ComponentState({
+          workgroupId: 1,
+          studentData: {
+            responses: [
+              { text: 'Student response', timestamp: 111 },
+              { text: 'Computer response', ideas: [{ detected: true, name: 'idea2' }] }
+            ]
+          }
+        })
+      ];
+
+      const responses = component['getDGResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(0);
+    });
+
+    it('should skip responses where idea is not detected', () => {
+      const states = [
+        new ComponentState({
+          workgroupId: 1,
+          studentData: {
+            responses: [
+              { text: 'Student response', timestamp: 111 },
+              { text: 'Computer response', ideas: [{ detected: false, name: 'idea1' }] }
+            ]
+          }
+        })
+      ];
+
+      const responses = component['getDGResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(0);
+    });
+  });
+
+  describe('getORResponsesWithIdea()', () => {
+    it('should return responses with matching annotations', () => {
+      const states = [
+        new ComponentState({
+          id: 1,
+          workgroupId: 1,
+          clientSaveTime: 123456,
+          studentData: { response: 'Student answer 1' }
+        }),
+        new ComponentState({
+          id: 2,
+          workgroupId: 2,
+          clientSaveTime: 234567,
+          studentData: { response: 'Student answer 2' }
+        })
+      ];
+
+      const annotations = [
+        new Annotation({
+          studentWorkId: 1,
+          data: { ideas: [{ detected: true, name: 'idea1' }] }
+        })
+      ];
+
+      spyOn(annotationService, 'getAnnotationsByNodeIdComponentId').and.returnValue(annotations);
+      const responses = component['getORResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(1);
+      expect(responses[0].text).toBe('Student answer 1');
+      expect(responses[0].timestamp).toBe(123456);
+    });
+
+    it('should return empty array when no annotations match', () => {
+      const states = [
+        new ComponentState({
+          id: 1,
+          workgroupId: 1,
+          clientSaveTime: 123456,
+          studentData: { response: 'Student answer' }
+        })
+      ];
+
+      const annotations = [
+        new Annotation({
+          studentWorkId: 2,
+          data: { ideas: [{ detected: true, name: 'idea1' }] }
+        })
+      ];
+
+      spyOn(annotationService, 'getAnnotationsByNodeIdComponentId').and.returnValue(annotations);
+      const responses = component['getORResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(0);
+    });
+
+    it('should filter annotations by idea name and detected status', () => {
+      const states = [
+        new ComponentState({
+          id: 1,
+          workgroupId: 1,
+          clientSaveTime: 123456,
+          studentData: { response: 'Student answer 1' }
+        }),
+        new ComponentState({
+          id: 2,
+          workgroupId: 2,
+          clientSaveTime: 234567,
+          studentData: { response: 'Student answer 2' }
+        })
+      ];
+
+      const annotations = [
+        new Annotation({
+          studentWorkId: 1,
+          data: { ideas: [{ detected: true, name: 'idea1' }] }
+        }),
+        new Annotation({
+          studentWorkId: 2,
+          data: { ideas: [{ detected: false, name: 'idea1' }] }
+        })
+      ];
+
+      spyOn(annotationService, 'getAnnotationsByNodeIdComponentId').and.returnValue(annotations);
+      const responses = component['getORResponsesWithIdea'](states, 'idea1');
+      expect(responses.length).toBe(1);
+      expect(responses[0].text).toBe('Student answer 1');
+    });
+  });
+});