refactor(Annotation): Create Annotation class

src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AnnotationService } from '../../../assets/wise5/services/annotationService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'component-new-work-badge',
@@ -29,10 +30,8 @@ export class ComponentNewWorkBadgeComponent {
   ngOnInit() {
     this.checkHasNewWork();
     this.annotationSavedToServerSubscription = this.AnnotationService.annotationSavedToServer$.subscribe(
-      ({ annotation }) => {
-        const annotationNodeId = annotation.nodeId;
-        const annotationComponentId = annotation.componentId;
-        if (this.nodeId === annotationNodeId && this.componentId === annotationComponentId) {
+      (annotation: Annotation) => {
+        if (annotation.nodeId === this.nodeId && annotation.componentId === this.componentId) {
           this.checkHasNewWork();
         }
       }

src/app/classroom-monitor/milestones/milestones.component.ts

@@ -7,6 +7,7 @@ import { AnnotationService } from '../../../assets/wise5/services/annotationServ
 import { MilestoneService } from '../../../assets/wise5/services/milestoneService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 import { Milestone } from '../../domain/milestone';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'milestones',
@@ -62,7 +63,7 @@ export class MilestonesComponent {
 
   private subscribeToAnnotationChanges(): void {
     this.subscriptions.add(
-      this.annotationService.annotationReceived$.subscribe(({ annotation }) => {
+      this.annotationService.annotationReceived$.subscribe((annotation: Annotation) => {
         this.milestones
           .filter(
             (milestone) =>

src/app/notebook/notebook-report/notebook-report.component.ts

@@ -10,6 +10,7 @@ import {
   insertWiseLinks,
   replaceWiseLinks
 } from '../../../assets/wise5/common/wise-link/wise-link';
+import { Annotation } from '../../../assets/wise5/common/Annotation';
 
 @Component({
   selector: 'notebook-report',
@@ -67,7 +68,7 @@ export class NotebookReportComponent extends NotebookParentComponent {
     this.isAddNoteButtonAvailable = this.isNoteEnabled();
 
     this.subscriptions.add(
-      this.NotebookService.notebookItemAnnotationReceived$.subscribe(({ annotation }: any) => {
+      this.NotebookService.notebookItemAnnotationReceived$.subscribe((annotation: Annotation) => {
         if (annotation.localNotebookItemId === this.reportId) {
           this.hasNewAnnotation = true;
           this.latestAnnotations = this.AnnotationService.getLatestNotebookItemAnnotations(

src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-annotations/edit-component-annotations.component.ts

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { AnnotationService } from '../../../services/annotationService';
 import { ConfigService } from '../../../services/configService';
 import { TeacherDataService } from '../../../services/teacherDataService';
+import { Annotation } from '../../../common/Annotation';
 
 @Component({
   selector: 'edit-component-annotations',
@@ -49,11 +50,9 @@ export class EditComponentAnnotationsComponent {
       this.periodId = toUserInfo.periodId;
     }
     this.annotationSavedToServerSubscription = this.AnnotationService.annotationSavedToServer$.subscribe(
-      ({ annotation }) => {
+      (annotation: Annotation) => {
         // TODO: we're watching this here and in the parent component's controller; probably want to optimize!
-        const annotationNodeId = annotation.nodeId;
-        const annotationComponentId = annotation.componentId;
-        if (this.nodeId === annotationNodeId && this.componentId === annotationComponentId) {
+        if (annotation.nodeId === this.nodeId && annotation.componentId === this.componentId) {
           this.processAnnotations();
         }
       }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.ts

@@ -10,6 +10,7 @@ import { TeacherDataService } from '../../../../services/teacherDataService';
 import { TeacherPeerGroupService } from '../../../../services/teacherPeerGroupService';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { NodeGradingViewComponent } from '../../nodeGrading/node-grading-view/node-grading-view.component';
+import { Annotation } from '../../../../common/Annotation';
 
 @Component({
   selector: 'milestone-grading-view',
@@ -70,7 +71,7 @@ export class MilestoneGradingViewComponent extends NodeGradingViewComponent {
     super.subscribeToEvents();
     if (this.milestone.report.locations.length > 1) {
       this.subscriptions.add(
-        this.annotationService.annotationReceived$.subscribe(({ annotation }) => {
+        this.annotationService.annotationReceived$.subscribe((annotation: Annotation) => {
           const workgroupId = annotation.toWorkgroupId;
           if (annotation.nodeId === this.firstNodeId && this.workgroupsById[workgroupId]) {
             this.updateWorkgroup(workgroupId);

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.ts

@@ -15,6 +15,7 @@ import { copy } from '../../../../common/object/object';
 import { ShowNodeInfoDialogComponent } from '../../../../../../app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MilestoneDetailsDialogComponent } from '../../milestones/milestone-details-dialog/milestone-details-dialog.component';
+import { Annotation } from '../../../../common/Annotation';
 
 @Component({
   selector: 'node-grading-view',
@@ -103,7 +104,7 @@ export class NodeGradingViewComponent implements OnInit {
     );
 
     this.subscriptions.add(
-      this.annotationService.annotationReceived$.subscribe(({ annotation }) => {
+      this.annotationService.annotationReceived$.subscribe((annotation: Annotation) => {
         const workgroupId = annotation.toWorkgroupId;
         if (annotation.nodeId === this.nodeId && this.workgroupsById[workgroupId]) {
           this.updateWorkgroup(workgroupId);

src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts

@@ -8,6 +8,7 @@ import { NotificationService } from '../../services/notificationService';
 import { TeacherDataService } from '../../services/teacherDataService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { ActivatedRoute } from '@angular/router';
+import { Annotation } from '../../common/Annotation';
 
 @Component({
   selector: 'student-grading',
@@ -104,7 +105,7 @@ export class StudentGradingComponent implements OnInit {
 
   private subscribeToAnnotationReceived(): void {
     this.subscriptions.add(
-      this.annotationService.annotationReceived$.subscribe(({ annotation }) => {
+      this.annotationService.annotationReceived$.subscribe((annotation: Annotation) => {
         const workgroupId = annotation.toWorkgroupId;
         const nodeId = annotation.nodeId;
         if (workgroupId === this.workgroupId && this.nodesById[nodeId]) {

src/assets/wise5/common/Annotation.ts

@@ -0,0 +1,15 @@
+export class Annotation {
+  clientSaveTime: number;
+  componentId: string;
+  data: any;
+  fromWorkgroupId: number;
+  id: number;
+  localNotebookItemId?: number;
+  nodeId: string;
+  notebookItemId: number;
+  periodId: number;
+  serverSaveTime: number;
+  studentWorkId: number;
+  toWorkgroupId: number;
+  type: string;
+}

src/assets/wise5/components/component-student.component.ts

@@ -17,6 +17,7 @@ import { StudentAssetRequest } from '../vle/studentAsset/StudentAssetRequest';
 import { ComponentService } from './componentService';
 import { ComponentStateRequest } from './ComponentStateRequest';
 import { ComponentStateWrapper } from './ComponentStateWrapper';
+import { Annotation } from '../common/Annotation';
 
 @Directive()
 export abstract class ComponentStudent {
@@ -119,9 +120,9 @@ export abstract class ComponentStudent {
     this.subscribeToRequestComponentState();
   }
 
-  subscribeToAnnotationSavedToServer() {
+  private subscribeToAnnotationSavedToServer(): void {
     this.subscriptions.add(
-      this.AnnotationService.annotationSavedToServer$.subscribe(({ annotation }) => {
+      this.AnnotationService.annotationSavedToServer$.subscribe((annotation: Annotation) => {
         if (this.isForThisComponent(annotation)) {
           this.latestAnnotations = this.AnnotationService.getLatestComponentAnnotations(
             this.nodeId,

src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts

@@ -484,9 +484,10 @@ export class OpenResponseStudent extends ComponentStudent {
   }
 
   private getFeedbackText(rule: FeedbackRule): string {
-    const annotationsForFeedbackRule = this.AnnotationService.annotations.filter((annotation) => {
-      return this.isForThisComponent(annotation) && annotation.data.feedbackRuleId === rule.id;
-    });
+    const annotationsForFeedbackRule = this.AnnotationService.getAnnotations().filter(
+      (annotation) =>
+        this.isForThisComponent(annotation) && annotation.data.feedbackRuleId === rule.id
+    );
     return rule.feedback[annotationsForFeedbackRule.length % rule.feedback.length];
   }
 

src/assets/wise5/services/annotationService.ts

@@ -7,23 +7,24 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable, Subject } from 'rxjs';
 import { isMatchingPeriods } from '../common/period/period';
 import { generateRandomKey } from '../common/string/string';
+import { Annotation } from '../common/Annotation';
 
 @Injectable()
 export class AnnotationService {
-  annotations: any = [];
+  annotations: Annotation[] = [];
   dummyAnnotationId: number = 1; // used in preview mode when we simulate saving of annotation
-  private annotationSavedToServerSource: Subject<any> = new Subject<any>();
-  public annotationSavedToServer$: Observable<any> = this.annotationSavedToServerSource.asObservable();
-  private annotationReceivedSource: Subject<any> = new Subject<any>();
-  public annotationReceived$: Observable<any> = this.annotationReceivedSource.asObservable();
+  private annotationSavedToServerSource: Subject<Annotation> = new Subject<Annotation>();
+  public annotationSavedToServer$: Observable<Annotation> = this.annotationSavedToServerSource.asObservable();
+  private annotationReceivedSource: Subject<Annotation> = new Subject<Annotation>();
+  public annotationReceived$: Observable<Annotation> = this.annotationReceivedSource.asObservable();
 
   constructor(
     private http: HttpClient,
     private ConfigService: ConfigService,
     private ProjectService: ProjectService
   ) {}
 
-  getAnnotations() {
+  getAnnotations(): Annotation[] {
     return this.annotations;
   }
 
@@ -197,7 +198,7 @@ export class AnnotationService {
               localAnnotation.serverSaveTime = savedAnnotation.serverSaveTime;
               //localAnnotation.requestToken = null; // requestToken is no longer needed.
 
-              this.broadcastAnnotationSavedToServer({ annotation: localAnnotation });
+              this.broadcastAnnotationSavedToServer(localAnnotation);
               break;
             } else if (
               localAnnotation.requestToken != null &&
@@ -221,7 +222,7 @@ export class AnnotationService {
                 this.dummyAnnotationId++;
               }
 
-              this.broadcastAnnotationSavedToServer({ annotation: localAnnotation });
+              this.broadcastAnnotationSavedToServer(localAnnotation);
               break;
             }
           }
@@ -798,11 +799,11 @@ export class AnnotationService {
     return null;
   }
 
-  broadcastAnnotationSavedToServer(args: any) {
-    this.annotationSavedToServerSource.next(args);
+  broadcastAnnotationSavedToServer(annotation: Annotation): void {
+    this.annotationSavedToServerSource.next(annotation);
   }
 
-  broadcastAnnotationReceived(args: any) {
-    this.annotationReceivedSource.next(args);
+  broadcastAnnotationReceived(annotation: Annotation): void {
+    this.annotationReceivedSource.next(annotation);
   }
 }

src/assets/wise5/services/notebookService.ts

@@ -8,6 +8,7 @@ import { StudentAssetService } from './studentAssetService';
 import { Subject } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { EditNotebookItemDialogComponent } from '../themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component';
+import { Annotation } from '../common/Annotation';
 
 @Injectable()
 export class NotebookService {
@@ -52,7 +53,7 @@ export class NotebookService {
   reports = [];
   publicNotebookItems = {};
   notebooksByWorkgroup = {};
-  private notebookItemAnnotationReceivedSource: Subject<any> = new Subject<any>();
+  private notebookItemAnnotationReceivedSource: Subject<Annotation> = new Subject<Annotation>();
   public notebookItemAnnotationReceived$ = this.notebookItemAnnotationReceivedSource.asObservable();
   private notebookItemChosenSource: Subject<any> = new Subject<any>();
   public notebookItemChosen$ = this.notebookItemChosenSource.asObservable();
@@ -77,7 +78,7 @@ export class NotebookService {
     private StudentAssetService: StudentAssetService
   ) {}
 
-  broadcastNotebookItemAnnotationReceived(annotation: any) {
+  broadcastNotebookItemAnnotationReceived(annotation: Annotation) {
     this.notebookItemAnnotationReceivedSource.next(annotation);
   }
 

src/assets/wise5/services/studentDataService.ts

@@ -491,7 +491,7 @@ export class StudentDataService extends DataService {
           this.setRemoteIdIntoLocalId(savedAnnotation, localAnnotation);
           this.setRemoteServerSaveTimeIntoLocalServerSaveTime(savedAnnotation, localAnnotation);
           this.clearRequestToken(localAnnotation);
-          this.AnnotationService.broadcastAnnotationSavedToServer({ annotation: localAnnotation });
+          this.AnnotationService.broadcastAnnotationSavedToServer(localAnnotation);
           break;
         }
       }

src/assets/wise5/services/studentWebSocketService.ts

@@ -10,6 +10,7 @@ import { Message } from '@stomp/stompjs';
 import { NotebookService } from './notebookService';
 import { StompService } from './stompService';
 import { ConfigService } from './configService';
+import { Annotation } from '../common/Annotation';
 
 @Injectable()
 export class StudentWebSocketService {
@@ -36,8 +37,7 @@ export class StudentWebSocketService {
         const studentWork = JSON.parse(body.content);
         this.StudentDataService.broadcastStudentWorkReceived(studentWork);
       } else if (body.type === 'annotation') {
-        const annotation = JSON.parse(body.content);
-        this.AnnotationService.broadcastAnnotationReceived({ annotation: annotation });
+        this.AnnotationService.broadcastAnnotationReceived(JSON.parse(body.content));
       } else if (body.type === 'goToNode') {
         this.goToStep(body.content);
       } else if (body.type === 'node') {
@@ -54,9 +54,9 @@ export class StudentWebSocketService {
     this.stompService.workgroupMessage$.subscribe((message: Message) => {
       const body = JSON.parse(message.body);
       if (body.type === 'annotation') {
-        const annotationData = JSON.parse(body.content);
-        this.AnnotationService.addOrUpdateAnnotation(annotationData);
-        this.handleAnnotationReceived(annotationData);
+        const annotation = JSON.parse(body.content);
+        this.AnnotationService.addOrUpdateAnnotation(annotation);
+        this.handleAnnotationReceived(annotation);
       } else if (body.type === 'tagsToWorkgroup') {
         const tags = JSON.parse(body.content);
         this.TagService.setTags(tags);
@@ -72,12 +72,12 @@ export class StudentWebSocketService {
     });
   }
 
-  handleAnnotationReceived(annotation: any): void {
+  private handleAnnotationReceived(annotation: Annotation): void {
     this.StudentDataService.studentData.annotations.push(annotation);
     if (annotation.notebookItemId) {
-      this.notebookService.broadcastNotebookItemAnnotationReceived({ annotation: annotation });
+      this.notebookService.broadcastNotebookItemAnnotationReceived(annotation);
     } else {
-      this.AnnotationService.broadcastAnnotationReceived({ annotation: annotation });
+      this.AnnotationService.broadcastAnnotationReceived(annotation);
     }
   }
 

src/assets/wise5/services/teacherDataService.ts

@@ -13,6 +13,7 @@ import { compressToEncodedURIComponent } from 'lz-string';
 import { isMatchingPeriods } from '../common/period/period';
 import { getIntersectOfArrays } from '../common/array/array';
 import { serverSaveTimeComparator } from '../common/object/object';
+import { Annotation } from '../common/Annotation';
 
 @Injectable()
 export class TeacherDataService extends DataService {
@@ -50,11 +51,11 @@ export class TeacherDataService extends DataService {
   }
 
   subscribeToEvents() {
-    this.AnnotationService.annotationSavedToServer$.subscribe(({ annotation }) => {
+    this.AnnotationService.annotationSavedToServer$.subscribe((annotation: Annotation) => {
       this.handleAnnotationReceived(annotation);
     });
 
-    this.TeacherWebSocketService.newAnnotationReceived$.subscribe(({ annotation }) => {
+    this.TeacherWebSocketService.newAnnotationReceived$.subscribe((annotation: Annotation) => {
       this.handleAnnotationReceived(annotation);
     });
 
@@ -70,7 +71,7 @@ export class TeacherDataService extends DataService {
     });
   }
 
-  handleAnnotationReceived(annotation) {
+  private handleAnnotationReceived(annotation: Annotation): void {
     this.studentData.annotations.push(annotation);
     const toWorkgroupId = annotation.toWorkgroupId;
     if (this.studentData.annotationsToWorkgroupId[toWorkgroupId] == null) {
@@ -83,7 +84,7 @@ export class TeacherDataService extends DataService {
     }
     this.studentData.annotationsByNodeId[nodeId].push(annotation);
     this.AnnotationService.setAnnotations(this.studentData.annotations);
-    this.AnnotationService.broadcastAnnotationReceived({ annotation: annotation });
+    this.AnnotationService.broadcastAnnotationReceived(annotation);
   }
 
   saveEvent(context, nodeId, componentId, componentType, category, event, data) {