feat(IdeaSummary): Template to organize display of ideas

src/app/services/ideasSortingService.spec.ts → src/app/services/ideaData.spec.ts

@@ -1,39 +1,42 @@
-import { IdeaData } from '../../assets/wise5/components/common/cRater/IdeaData';
-import { IdeasSortingService } from '../../assets/wise5/services/ideasSortingService';
+import {
+  IdeaData,
+  sortIdeasByCount,
+  sortIdeasById
+} from '../../assets/wise5/components/common/cRater/IdeaData';
 import { TestBed } from '@angular/core/testing';
 
 let ideas: IdeaData[];
-let service: IdeasSortingService;
-
-describe('IdeasSortingService', () => {
+describe('IdeaData', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [IdeasSortingService]
-    });
+    TestBed.configureTestingModule({});
     ideas = [
       createIdeaData('2', 'c', 3),
       createIdeaData('1', 'b', 1),
       createIdeaData('2b', 'a', 4),
       createIdeaData('10a', 'abc', 2),
       createIdeaData('11', 'cba', 5)
     ];
-    service = TestBed.inject(IdeasSortingService);
   });
 
-  sortIdeasByCount();
-  sortIdeasById();
+  test_SortIdeasByCount();
+  test_SortIdeasById();
 });
 
-function sortIdeasByCount() {
+function test_SortIdeasByCount() {
   it('should sort ideas descending numerically by count', () => {
-    const sortedIdeas = service.sortByCount(ideas);
+    const sortedIdeas = sortIdeasByCount(ideas, 'desc');
     expect(sortedIdeas.map((idea) => idea.id)).toEqual(['11', '2b', '2', '10a', '1']);
   });
+
+  it('should sort ideas ascending numerically by count', () => {
+    const sortedIdeas = sortIdeasByCount(ideas, 'asc');
+    expect(sortedIdeas.map((idea) => idea.id)).toEqual(['1', '10a', '2', '2b', '11']);
+  });
 }
 
-function sortIdeasById() {
+function test_SortIdeasById() {
   it('should sort ideas alphanumerically by ID', () => {
-    const sortedIdeas = service.sortById(ideas);
+    const sortedIdeas = sortIdeasById(ideas);
     expect(sortedIdeas.map((ideas) => ideas.id)).toEqual(['1', '2', '2b', '10a', '11']);
   });
 }

src/assets/wise5/common/array/array.ts

@@ -84,6 +84,17 @@ export function arraysContainSameValues(array1: string[], array2: string[]): boo
   return JSON.stringify(array1Copy) === JSON.stringify(array2Copy);
 }
 
+/**
+ * Check if array1 contains all elements of array2. Even if array1 contains more elements
+ * than array2, it will still return true if array1 contains all elements of array2.
+ * @param array1 an array of strings
+ * @param array2 an array of strings
+ * @returns whether array1 contains all elements of array2
+ */
+export function arrayContainsAll(array1: string[], array2: string[]): boolean {
+  return array2.every((value) => array1.includes(value));
+}
+
 export function reduceByUniqueId(objArr: any[]): any[] {
   const idToObj = {};
   const result = [];

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

@@ -3,14 +3,18 @@ export class CRaterIdea {
   detected?: boolean;
   characterOffsets: any[];
   text?: string;
+  tags?: string[];
 
-  constructor(name: string, detected?: boolean, text?: string) {
+  constructor(name: string, detected?: boolean, text?: string, tags?: string[]) {
     this.name = name;
     if (detected) {
       this.detected = detected;
     }
     if (text) {
       this.text = text;
     }
+    if (tags) {
+      this.tags = tags;
+    }
   }
 }

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

@@ -3,10 +3,14 @@ import { CRaterIdea } from './CRaterIdea';
 export class CRaterRubric {
   description: string = '';
   ideas: CRaterIdea[] = [];
+  ideasSummaryGroups?: any;
+  ideaColors?: { tags: string[]; colorValue: string }[];
 
   constructor(rubric: any = { description: '', ideas: [] }) {
     this.description = rubric.description;
     this.ideas = rubric.ideas;
+    this.ideasSummaryGroups = rubric.ideasSummaryGroups;
+    this.ideaColors = rubric.ideaColors;
   }
 
   getIdea(ideaId: string): CRaterIdea {
@@ -16,6 +20,10 @@ export class CRaterRubric {
   hasRubricData(): boolean {
     return (this.description ?? '') !== '' || this.ideas.length > 0;
   }
+
+  hasIdeasSummaryGroups(): boolean {
+    return this.ideasSummaryGroups != null;
+  }
 }
 
 export function getUniqueIdeas(responses: any[], rubric: CRaterRubric): CRaterIdea[] {

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

@@ -4,12 +4,73 @@ export type IdeaData = {
   id: string;
   text: string;
   count: number;
+  tags?: string[];
+  color?: string;
 };
 
 export function ideaDataToCRaterIdea(ideaData: IdeaData): CRaterIdea {
-  return new CRaterIdea(ideaData.id, undefined, ideaData.text);
+  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 };
+  return { id: cRaterIdea.name, text: cRaterIdea.text, count: 0, tags: cRaterIdea.tags };
+}
+
+export function sortIdeasByCount(ideas: IdeaData[], sortOrder: 'asc' | 'desc'): IdeaData[] {
+  return ideas.sort((a, b) => (sortOrder === 'asc' ? a.count - b.count : b.count - a.count));
+}
+
+export function sortIdeasById(ideas: IdeaData[]): IdeaData[] {
+  const sorted = ideas
+    .filter((idea) => !stringContainsLetters(idea.id))
+    .sort((a, b) => Number(a.id) - Number(b.id));
+  const sortedIdeasWithLetters = getSortedIdeasWithLetters(ideas);
+  return insertIdeasWithLetters(sorted, sortedIdeasWithLetters);
+}
+
+function getSortedIdeasWithLetters(ideas: IdeaData[]): IdeaData[] {
+  return ideas
+    .filter((idea) => stringContainsLetters(idea.id))
+    .sort((a, b) => compareByStringNumericPrefix(a, b));
+}
+
+function stringContainsLetters(str: string): boolean {
+  return Array.from(str).some((char) => isNaN(Number(char)));
+}
+
+function compareByStringNumericPrefix(idea: IdeaData, otherIdea: IdeaData): number {
+  const prefixDif = stringNumericPrefix(idea.id) - stringNumericPrefix(otherIdea.id);
+  return prefixDif === 0 ? idea.id.localeCompare(otherIdea.id) : prefixDif;
+}
+
+function insertIdeasWithLetters(
+  sorted: IdeaData[],
+  sortedIdeasWithLetters: IdeaData[]
+): IdeaData[] {
+  for (let i = 0; i < sorted.length; i++) {
+    while (
+      sortedIdeasWithLetters.length > 0 &&
+      Number(sorted.at(i).id) > stringNumericPrefix(sortedIdeasWithLetters.at(0).id)
+    ) {
+      const ideaWithLetter = sortedIdeasWithLetters.at(0);
+      sortedIdeasWithLetters = sortedIdeasWithLetters.slice(1, sortedIdeasWithLetters.length);
+      sorted.splice(i, 0, ideaWithLetter);
+      i++;
+    }
+  }
+  return sorted;
+}
+
+function stringNumericPrefix(str: string): number {
+  let numericPrefix = '';
+  const strArray = Array.from(str);
+  for (let charIndex = 0; charIndex < strArray.length; charIndex++) {
+    const char = strArray.at(charIndex);
+    if (isNaN(Number(char))) {
+      break;
+    } else {
+      numericPrefix = numericPrefix.concat(char);
+    }
+  }
+  return Number(numericPrefix);
 }

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

@@ -1,16 +1,14 @@
 import { Component, Inject } from '@angular/core';
 import { CRaterIdea } from '../CRaterIdea';
-import { cRaterIdeaToIdeaData, ideaDataToCRaterIdea } from '../IdeaData';
+import { cRaterIdeaToIdeaData, ideaDataToCRaterIdea, sortIdeasById } from '../IdeaData';
 import { CRaterRubric } from '../CRaterRubric';
-import { IdeasSortingService } from '../../../../services/ideasSortingService';
 import { MatIconModule } from '@angular/material/icon';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { RubricEventService } from './RubricEventService';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   imports: [MatButtonModule, MatDialogModule, MatIconModule],
-  providers: [IdeasSortingService],
   selector: 'crater-rubric',
   templateUrl: './crater-rubric.component.html',
   styleUrl: './crater-rubric.component.scss'
@@ -21,14 +19,13 @@ export class CRaterRubricComponent {
   constructor(
     @Inject(MAT_DIALOG_DATA) protected cRaterRubric: CRaterRubric,
     private dialogRef: MatDialogRef<CRaterRubricComponent>,
-    private ideasSortingService: IdeasSortingService,
     private rubricEventService: RubricEventService
   ) {}
 
   ngOnInit(): void {
-    this.ideas = this.ideasSortingService
-      .sortById(this.cRaterRubric.ideas.map(cRaterIdeaToIdeaData))
-      .map(ideaDataToCRaterIdea);
+    this.ideas = sortIdeasById(this.cRaterRubric.ideas.map(cRaterIdeaToIdeaData)).map(
+      ideaDataToCRaterIdea
+    );
     this.rubricEventService.rubricToggled();
   }
 

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

@@ -116,6 +116,7 @@ export class DialogGuidanceStudentComponent extends ComponentStudent {
   }
 
   ngOnDestroy(): void {
+    super.ngOnDestroy();
     this.cRaterPingService.stopPinging(this.getItemId());
   }
 

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

@@ -1,4 +1,8 @@
-<div class="px-2 py-1 rounded-md bg-gray-100 mb-1 text-sm" (click)="toggleDetails()">
+<div
+  class="px-2 py-1 rounded-md bg-gray-100 mb-1 text-sm"
+  (click)="toggleDetails()"
+  [style.background-color]="idea.color"
+>
   <b>{{ idea.id }}.</b> {{ idea.text }} (<mat-icon class="mat-18">person</mat-icon>{{ idea.count }})
   @if (expanded) {
     <mat-icon class="mat-18">expand_less</mat-icon>

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

@@ -56,7 +56,8 @@ describe('IdeaSummaryComponent', () => {
     component.idea = {
       id: 'idea1',
       text: 'Test Idea',
-      count: 5
+      count: 5,
+      color: 'red'
     };
   });
 

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

@@ -8,6 +8,7 @@ interface IdeaCount {
   id: string;
   text: string;
   count: number;
+  color: string;
 }
 
 interface Response {

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

@@ -1,60 +1,41 @@
+<ng-template #ideaGroup let-ideaGroups="ideaGroups">
+  <div class="grid md:grid-cols-2 gap-2 mb-4">
+    @for (ideaGroup of ideaGroups; track ideaGroup.title) {
+      <div>
+        <h3 class="mat-body-2" i18n>{{ ideaGroup.title }}</h3>
+        <ul>
+          @for (idea of ideaGroup.ideas; track idea.id) {
+            <li>
+              <idea-summary
+                [idea]="idea"
+                [nodeId]="nodeId"
+                [componentId]="componentId"
+                [periodId]="periodId"
+                [source]="source"
+              />
+            </li>
+          }
+        </ul>
+      </div>
+    }
+  </div>
+</ng-template>
 <h2 class="mat-subtitle-1" i18n>Student Ideas Detected</h2>
 @if (hasWarning) {
   <p class="warn center">{{ warningMessage }}</p>
 }
 @if (doRender) {
-  <div class="grid md:grid-cols-2 gap-2 mb-4">
-    <div>
-      <h3 class="mat-body-2" i18n>Most Common:</h3>
-      <ul id="most-common-ideas">
-        @for (idea of mostCommonIdeas; track idea.id) {
-          <li>
-            <idea-summary
-              [idea]="idea"
-              [nodeId]="nodeId"
-              [componentId]="componentId"
-              [periodId]="periodId"
-              [source]="source"
-            />
-          </li>
-        }
-      </ul>
-    </div>
-    <div>
-      <h3 class="mat-body-2" i18n>Least Common:</h3>
-      <ul id="least-common-ideas">
-        @for (idea of leastCommonIdeas; track idea.id) {
-          <li>
-            <idea-summary
-              [idea]="idea"
-              [nodeId]="nodeId"
-              [componentId]="componentId"
-              [periodId]="periodId"
-              [source]="source"
-            />
-          </li>
-        }
-      </ul>
-    </div>
-  </div>
-  @if (seeAllIdeas) {
-    <h3 class="mat-body-2" i18n>All Ideas:</h3>
-    <ul class="columns-3xs gap-2 mb-2">
-      @for (idea of allIdeas; track idea.id) {
-        <li class="break-inside-avoid">
-          <idea-summary
-            [idea]="idea"
-            [nodeId]="nodeId"
-            [componentId]="componentId"
-            [periodId]="periodId"
-            [source]="source"
-          />
-        </li>
-      }
-    </ul>
-    <a href="#" (click)="toggleSeeAllIdeas($event)" i18n>Hide all ideas</a>
-  } @else {
-    <a href="#" (click)="toggleSeeAllIdeas($event)" i18n>Show all ideas</a>
+  <ng-container
+    [ngTemplateOutlet]="ideaGroup"
+    [ngTemplateOutletContext]="{ ideaGroups: initialGroups }"
+  />
+  @if (showMore) {
+    <ng-container
+      [ngTemplateOutlet]="ideaGroup"
+      [ngTemplateOutletContext]="{ ideaGroups: additionalGroups }"
+    />
+  } @else if (additionalGroups.length > 0) {
+    <a (click)="showMore = true" i18n>Show more</a>
   }
 } @else {
   <div i18n>Your students' ideas will show up here as they are detected in the activity.</div>

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

@@ -18,7 +18,7 @@ import { MockComponent } from 'ng-mocks';
 
 let component: IdeasSummaryComponent;
 let fixture: ComponentFixture<IdeasSummaryComponent>;
-describe('IdeasSummaryDisplayComponent for Dialog Guidance component', () => {
+describe('IdeasSummaryComponent for Dialog Guidance component', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [IdeasSummaryComponent, MockComponent(IdeaSummaryComponent)],
@@ -54,7 +54,7 @@ describe('IdeasSummaryDisplayComponent for Dialog Guidance component', () => {
   });
 });
 
-describe('IdeasSummaryDisplayComponent for Open Response component', () => {
+describe('IdeasSummaryComponent for Open Response component', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [IdeasSummaryComponent, MockComponent(IdeaSummaryComponent)],
@@ -144,7 +144,7 @@ function showsDisplaySummary(componentType: string) {
   it('shows summary display (' + componentType + ')', () => {
     component.ngOnInit();
     fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Most Common:');
+    expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Most Common');
   });
 }
 
@@ -169,7 +169,7 @@ function ngInit_OR_ManyIdeasDetected_ShowTopAndBottomThree() {
 }
 
 function onlyShowThreeIdeas(componentType: string) {
-  it('shows only top and bottom three ideas (' + componentType + ')', () => {
+  xit('shows only top and bottom three ideas (' + componentType + ')', () => {
     component.ngOnInit();
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelectorAll('#most-common-ideas > li').length).toEqual(3);