From deea93cfb03b595b3781fa4908023c32317d736d Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Wed, 4 Oct 2023 17:03:28 -0700
Subject: [PATCH 01/13] refactor(AngularJS): Remove old, unused code

---
 .../disableDeleteKeypress.js                  |  62 -------
 .../wise5/directives/draggable/draggable.js   | 166 ------------------
 2 files changed, 228 deletions(-)
 delete mode 100644 src/assets/wise5/directives/disableDeleteKeypress/disableDeleteKeypress.js
 delete mode 100644 src/assets/wise5/directives/draggable/draggable.js

diff --git a/src/assets/wise5/directives/disableDeleteKeypress/disableDeleteKeypress.js b/src/assets/wise5/directives/disableDeleteKeypress/disableDeleteKeypress.js
deleted file mode 100644
index e11d8f71e06..00000000000
--- a/src/assets/wise5/directives/disableDeleteKeypress/disableDeleteKeypress.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Disable the backspace key so that it does not navigate the user back
- * in their browser history.
- */
-class DisableDeleteKeypressController {
-    constructor($document) {
-
-        $document.bind('keydown', function (e) {
-
-            // check for the delete key press
-            if (e.keyCode === 8) {
-                // the delete key was pressed
-
-                // get the name of the node e.g. body, input, div, etc.
-                let nodeName = e.target.nodeName;
-
-                // get the type if applicable e.g. text, password, file, etc.
-                let targetType = e.target.type;
-
-                if (nodeName != null) {
-                    nodeName = nodeName.toLowerCase();
-                }
-
-                if (targetType != null) {
-                    targetType = targetType.toLowerCase();
-                }
-
-                let contentEditable = e.target.contentEditable === 'true';
-
-                if ((nodeName === 'input' && targetType === 'text') ||
-                    (nodeName === 'input' && targetType === 'password') ||
-                    (nodeName === 'input' && targetType === 'file') ||
-                    (nodeName === 'input' && targetType === 'search') ||
-                    (nodeName === 'input' && targetType === 'email') ||
-                    (nodeName === 'input' && targetType === 'number') ||
-                    (nodeName === 'input' && targetType === 'date') ||
-                    nodeName === 'textarea' || contentEditable) {
-                    /*
-                     * the user is typing in a valid input element so we will
-                     * allow the delete key press
-                     */
-                } else {
-                    /*
-                     * the user is not typing in an input element so we will
-                     * not allow the delete key press
-                     */
-                    e.preventDefault();
-                }
-            }
-        });
-    }
-}
-
-DisableDeleteKeypressController.$inject = ['$document'];
-
-const DisableDeleteKeypress = {
-    bindings: {
-    },
-    controller: DisableDeleteKeypressController
-};
-
-export default DisableDeleteKeypress;
\ No newline at end of file
diff --git a/src/assets/wise5/directives/draggable/draggable.js b/src/assets/wise5/directives/draggable/draggable.js
deleted file mode 100644
index 740e0c4977d..00000000000
--- a/src/assets/wise5/directives/draggable/draggable.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * Make the element draggable
- */
-class DraggableController {
-    constructor($document, $element) {
-        this.$document = $document;
-        this.$element = $element;
-
-        /*
-         * used to remember the start x and y coordinate of the top left corner
-         * of the element
-         */
-        this.startX = 0;
-        this.startY = 0;
-
-        // set the attributes into the element so we can access them later
-        //this.attributes = attr;
-
-        $element.bind('mousedown', (event) => {
-
-            // Prevent default dragging of selected content
-            event.preventDefault();
-
-            var leftString = null;
-            var topString = null;
-            var left = null;
-            var top = null;
-
-            if (this.$element != null && this.$element.length > 0) {
-                /*
-                 * get the pixel location of the top left corner relative to its
-                 * parent container
-                 */
-                leftString = this.$element[0].style.left;
-                topString = this.$element[0].style.top;
-
-                if (leftString != null) {
-                    // get the integer value of the left
-                    left = parseInt(leftString.replace('px', ''));
-                }
-
-                if (topString != null) {
-                    // get the integer value of the top
-                    top = parseInt(topString.replace('px', ''));
-                }
-
-                /*
-                 * get the position of the mouse and subtract the distance from
-                 * the upper left corner of the parent container to the upper
-                 * left corner of the element.
-                 * this will be equal to the sum of two values.
-                 * the first value is the x and y difference between the upper
-                 * left corner of the browser screen to the upper left corner
-                 * of the parent container.
-                 * the second value is the x and y difference between the upper
-                 * left corner of the element to the mouse position.
-                 * we will use the sum of these two values later to calculate
-                 * where to place the element when it is being dragged.
-                 */
-                this.startX = event.pageX - left;
-                this.startY = event.pageY - top;
-
-                // add mouse listeners to handle moving the element
-                this.$document.on('mousemove', $.proxy(this.mousemove, this));
-                this.$document.on('mouseup', $.proxy(this.mouseup, this));
-            }
-        });
-    }
-
-    mousemove(event) {
-
-        var linkTypeChooserWidth = null;
-        var linkTypeChooserHeight = null;
-
-        // get the width and height of the element we are dragging
-        var linkTypeChooserWidthString = angular.element(this.$element[0]).css('width');
-        var linkTypeChooserHeightString = angular.element(this.$element[0]).css('height');
-
-        if (linkTypeChooserWidthString != null && linkTypeChooserHeightString != null) {
-            // get the integer values of the width and height
-            linkTypeChooserWidth = parseInt(linkTypeChooserWidthString.replace('px', ''));
-            linkTypeChooserHeight = parseInt(linkTypeChooserHeightString.replace('px', ''));
-        }
-
-        /*
-         * get the width and height of the container that we want to restrict
-         * the element within. the user will not be able to drag the element
-         * outside of these boundaries.
-         */
-        var overlayWidth = this.$element.scope().$eval(this.$element[0].attributes['container-width'].value);
-        var overlayHeight = this.$element.scope().$eval(this.$element[0].attributes['container-height'].value);
-
-        /*
-         * calculate the x and y position of where the element should be
-         * placed. we will calculate the position by taking the mouse
-         * position and subtracting the value we previously calculated
-         * in the mousedown event. performing the subtraction will give
-         * us the x and y difference between the upper left corner of the
-         * parent container and the upper left corner of the element.
-         */
-        var x = event.pageX - this.startX;
-        var y = event.pageY - this.startY;
-
-        var top = 0;
-
-        if (x < 0) {
-            /*
-             * the x position that we have calculated for the left
-             * side of the element is past the left side of the parent
-             * container so we will set the x position to 0 so that the
-             * element is up against the left side of the parent container
-             */
-            x = 0;
-        } else if((x + linkTypeChooserWidth) > overlayWidth) {
-            /*
-             * the x position that we have calculated for the right
-             * side of the element is past the right side of the parent
-             * container so we will set the x position so that the element
-             * is up against the right side of the parent container
-             */
-            x = overlayWidth - linkTypeChooserWidth;
-        }
-
-        if (y < top) {
-            /*
-             * the y position that we have calculated for the top
-             * side of the element is past the top side of the parent
-             * container so we will set the y position to 0 so that the
-             * element is up against the top side of the parent container
-             */
-            y = top;
-        } else if ((y + linkTypeChooserHeight) > (overlayHeight + top)) {
-            /*
-             * the y position that we have calculated for the bottom
-             * side of the element is past the bottom side of the parent
-             * container so we will set the y position so that the element
-             * is up against the bottom side of the parent container
-             */
-            y = (overlayHeight + top) - linkTypeChooserHeight;
-        }
-
-        // move the element to the new position
-        this.$element.css({
-            top: y + 'px',
-            left:  x + 'px'
-        });
-    }
-
-    mouseup() {
-        // remove the mousemove listener
-        this.$document.off('mousemove', this.mousemove);
-
-        // remove the mouseup listener
-        this.$document.off('mouseup', this.mouseup);
-    }
-}
-
-DraggableController.$inject = ['$document', '$element'];
-
-const Draggable = {
-    bindings: {
-    },
-    controller: DraggableController
-};
-
-export default Draggable;

From 44a09956973a040a0db3da5fe45a9ce9cade94f8 Mon Sep 17 00:00:00 2001
From: Geoffrey Kwan <geoffreykwan@gmail.com>
Date: Fri, 6 Oct 2023 10:40:27 -0400
Subject: [PATCH 02/13] fix(Manage Students): Sometimes does not load any
 workgroups (#1452)

---
 .../wise5/classroomMonitor/classroom-monitor.component.ts     | 1 +
 src/assets/wise5/services/teacherDataService.ts               | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts b/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts
index fd0ae2b7573..0eae5172925 100644
--- a/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts
@@ -66,6 +66,7 @@ export class ClassroomMonitorComponent implements OnInit {
 
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
+    this.dataService.clearCurrentPeriod();
   }
 
   private initializeNotebook(): void {
diff --git a/src/assets/wise5/services/teacherDataService.ts b/src/assets/wise5/services/teacherDataService.ts
index 43eb73272d7..c7a5329b985 100644
--- a/src/assets/wise5/services/teacherDataService.ts
+++ b/src/assets/wise5/services/teacherDataService.ts
@@ -683,6 +683,10 @@ export class TeacherDataService extends DataService {
     }
   }
 
+  clearCurrentPeriod(): void {
+    this.currentPeriod = null;
+  }
+
   getCurrentPeriod() {
     return this.currentPeriod;
   }

From c6ecce6c6bb86241af23e1823f50d284271e9e70 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Sat, 7 Oct 2023 19:21:00 -0700
Subject: [PATCH 03/13] refactor(NodeAuthoringComponent): Extract
 NodeAuthoringParentComponent (#1454)

---
 src/app/teacher/authoring-routing.module.ts   |  32 +-
 src/app/teacher/authoring-tool.module.ts      |   2 +
 ...ode-advanced-branch-authoring.component.ts |   2 +-
 ...ced-constraint-authoring.component.spec.ts |   2 +-
 ...advanced-constraint-authoring.component.ts |   2 +-
 ...de-advanced-general-authoring.component.ts |   2 +-
 .../node-advanced-json-authoring.component.ts |   2 +-
 .../node-advanced-authoring.component.html    |   2 +-
 ...-advanced-path-authoring.component.spec.ts |   2 +-
 .../node-advanced-path-authoring.component.ts |   2 +-
 .../edit-node-rubric.component.spec.ts        |   2 +-
 .../editRubric/edit-node-rubric.component.ts  |   2 +-
 .../node-authoring-parent.component.html      |   1 +
 .../node-authoring-parent.component.ts        |   6 +
 .../node-authoring.component.html             | 463 +++++++++---------
 .../node-authoring.component.ts               |  20 +-
 src/messages.xlf                              |  50 +-
 17 files changed, 294 insertions(+), 300 deletions(-)
 create mode 100644 src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
 create mode 100644 src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts

diff --git a/src/app/teacher/authoring-routing.module.ts b/src/app/teacher/authoring-routing.module.ts
index 7260d1f48d4..860caaca2f2 100644
--- a/src/app/teacher/authoring-routing.module.ts
+++ b/src/app/teacher/authoring-routing.module.ts
@@ -36,6 +36,7 @@ import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringToo
 import { ChooseCopyNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
+import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
 
 const routes: Routes = [
   {
@@ -124,8 +125,24 @@ const routes: Routes = [
           { path: 'milestones', component: MilestonesAuthoringComponent },
           {
             path: 'node/:nodeId',
-            component: NodeAuthoringComponent,
+            component: NodeAuthoringParentComponent,
             children: [
+              {
+                path: '',
+                component: NodeAuthoringComponent
+              },
+              {
+                path: 'advanced',
+                component: NodeAdvancedAuthoringComponent,
+                children: [
+                  { path: 'branch', component: NodeAdvancedBranchAuthoringComponent },
+                  { path: 'constraint', component: NodeAdvancedConstraintAuthoringComponent },
+                  { path: 'general', component: NodeAdvancedGeneralAuthoringComponent },
+                  { path: 'json', component: NodeAdvancedJsonAuthoringComponent },
+                  { path: 'path', component: NodeAdvancedPathAuthoringComponent },
+                  { path: 'rubric', component: EditNodeRubricComponent }
+                ]
+              },
               {
                 path: 'choose-component-location',
                 component: ChooseComponentLocationComponent
@@ -136,19 +153,6 @@ const routes: Routes = [
               }
             ]
           },
-
-          {
-            path: 'node/:nodeId/advanced',
-            component: NodeAdvancedAuthoringComponent,
-            children: [
-              { path: 'branch', component: NodeAdvancedBranchAuthoringComponent },
-              { path: 'constraint', component: NodeAdvancedConstraintAuthoringComponent },
-              { path: 'general', component: NodeAdvancedGeneralAuthoringComponent },
-              { path: 'json', component: NodeAdvancedJsonAuthoringComponent },
-              { path: 'path', component: NodeAdvancedPathAuthoringComponent },
-              { path: 'rubric', component: EditNodeRubricComponent }
-            ]
-          },
           { path: 'notebook', component: NotebookAuthoringComponent },
           { path: 'recovery', component: RecoveryAuthoringComponent },
           {
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
index bbdf33f7d3e..0bcbb700b54 100644
--- a/src/app/teacher/authoring-tool.module.ts
+++ b/src/app/teacher/authoring-tool.module.ts
@@ -50,6 +50,7 @@ import { NodeIconAndTitleComponent } from '../../assets/wise5/authoringTool/choo
 import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-with-move-after-button/node-with-move-after-button.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
+import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
 
 @NgModule({
   declarations: [
@@ -78,6 +79,7 @@ import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-
     InsertNodeInsideButtonComponent,
     MilestonesAuthoringComponent,
     NodeAuthoringComponent,
+    NodeAuthoringParentComponent,
     NodeIconChooserDialog,
     NodeIconAndTitleComponent,
     NodeWithMoveAfterButtonComponent,
diff --git a/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
index 6a2a38c3595..3f714220e23 100644
--- a/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
@@ -53,7 +53,7 @@ export class NodeAdvancedBranchAuthoringComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.nodeId = params.nodeId;
       this.node = this.projectService.getNodeById(this.nodeId);
       this.nodeIds = this.projectService.getFlattenedProjectAsNodeIds(true);
diff --git a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
index 534c56a6fb2..cf48d212a40 100644
--- a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
@@ -38,7 +38,7 @@ describe('NodeAdvancedConstraintAuthoringComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ]
diff --git a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
index 9cc14a32de7..b037ceff475 100644
--- a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
@@ -16,7 +16,7 @@ export class NodeAdvancedConstraintAuthoringComponent extends ConstraintsAuthori
   }
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       const node = this.projectService.getNodeById(params.nodeId);
       if (node.constraints == null) {
         node.constraints = [];
diff --git a/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
index 73b08771849..2d32eb85907 100644
--- a/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
@@ -12,7 +12,7 @@ export class NodeAdvancedGeneralAuthoringComponent implements OnInit {
   constructor(private projectService: TeacherProjectService, private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
     });
   }
diff --git a/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
index 85c07e7db17..e5ac7652b4a 100644
--- a/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
@@ -23,7 +23,7 @@ export class NodeAdvancedJsonAuthoringComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.nodeId = params.nodeId;
       this.node = this.projectService.getNodeById(this.nodeId);
       this.nodeContentJSONString = JSON.stringify(this.node, null, 4);
diff --git a/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html b/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
index c574e21dfd5..19514995cf2 100644
--- a/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
@@ -2,7 +2,7 @@
   <button
     mat-raised-button
     color="primary"
-    [routerLink]="['/teacher/edit/unit', projectId, 'node', nodeId]"
+    routerLink=".."
     matTooltip="Back"
     matTooltipPosition="above"
     i18n-matTooltip
diff --git a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
index 6036f9cad49..58738774bd3 100644
--- a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
@@ -37,7 +37,7 @@ describe('NodeAdvancedPathAuthoringComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ]
diff --git a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
index 1b9198af8cb..96847430699 100644
--- a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
@@ -60,7 +60,7 @@ export class NodeAdvancedPathAuthoringComponent implements OnInit {
   constructor(private projectService: TeacherProjectService, private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
       this.nodeIds = this.projectService.getFlattenedProjectAsNodeIds(true);
     });
diff --git a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
index 9f830ec9454..20dfbc3181f 100644
--- a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
@@ -39,7 +39,7 @@ describe('EditNodeRubricComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ],
diff --git a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
index bf57aca052d..4d5544f7501 100644
--- a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
+++ b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
@@ -19,7 +19,7 @@ export class EditNodeRubricComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
       this.rubric = this.projectService.replaceAssetPaths(replaceWiseLinks(this.node.rubric));
     });
diff --git a/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
new file mode 100644
index 00000000000..0680b43f9c6
--- /dev/null
+++ b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts
new file mode 100644
index 00000000000..621c8863ecc
--- /dev/null
+++ b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './node-authoring-parent.component.html'
+})
+export class NodeAuthoringParentComponent {}
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
index 479d4f580db..00eb1e69f58 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -1,258 +1,255 @@
-<router-outlet></router-outlet>
-<div *ngIf="showNodeView">
-  <div class="top-button-bar">
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
-      <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
-      <mat-form-field class="step-title form-field-no-hint">
-        <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
-        <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
-        <input
-          matInput
-          [(ngModel)]="nodeJson.title"
-          [ngModelOptions]="{ debounce: 500 }"
-          (change)="authoringViewNodeChanged()"
-          aria-label="Title"
-          i18n-aria-label
-        />
-      </mat-form-field>
-      <div class="node-buttons" fxLayoutGap="16px">
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="showAdvancedView()"
-          matTooltip="Advanced"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>build</mat-icon>
-        </button>
-        <button
-          *ngIf="!isGroupNode"
-          mat-raised-button
-          color="primary"
-          class="top-button"
-          (click)="previewStepInNewWindow()"
-          [disabled]="showEditTransitions"
-          matTooltip="Preview Step"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>visibility</mat-icon>
-        </button>
-      </div>
-      <span fxFlex></span>
+<div class="top-button-bar">
+  <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
+    <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
+    <mat-form-field class="step-title form-field-no-hint">
+      <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
+      <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
+      <input
+        matInput
+        [(ngModel)]="nodeJson.title"
+        [ngModelOptions]="{ debounce: 500 }"
+        (change)="authoringViewNodeChanged()"
+        aria-label="Title"
+        i18n-aria-label
+      />
+    </mat-form-field>
+    <div class="node-buttons" fxLayoutGap="16px">
       <button
-        mat-icon-button
-        (click)="close()"
-        matTooltip="Back to unit"
+        mat-raised-button
+        color="primary"
+        routerLink="advanced"
+        matTooltip="Advanced"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>build</mat-icon>
+      </button>
+      <button
+        *ngIf="!isGroupNode"
+        mat-raised-button
+        color="primary"
+        class="top-button"
+        (click)="previewStepInNewWindow()"
+        [disabled]="showEditTransitions"
+        matTooltip="Preview Step"
         matTooltipPosition="above"
         i18n-matTooltip
       >
-        <mat-icon>close</mat-icon>
+        <mat-icon>visibility</mat-icon>
       </button>
     </div>
-    <ng-template #addComponentButtonTemplate let-componentId="componentId">
+    <span fxFlex></span>
+    <button
+      mat-icon-button
+      (click)="close()"
+      matTooltip="Back to unit"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <ng-template #addComponentButtonTemplate let-componentId="componentId">
+    <button
+      mat-icon-button
+      color="primary"
+      matTooltip="Add a new component"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="addComponent(componentId)"
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+  </ng-template>
+  <div
+    *ngIf="!isGroupNode"
+    class="components-header"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    fxLayoutGap="4px"
+  >
+    <h5 i18n>Components</h5>
+    <ng-container
+      *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
+    ></ng-container>
+    <div *ngIf="isAnyComponentSelected">
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="chooseComponentLocation('move')"
+        matTooltip="Move Components"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>redo</mat-icon>
+      </button>
       <button
         mat-icon-button
         color="primary"
-        matTooltip="Add a new component"
+        (click)="chooseComponentLocation('copy')"
+        matTooltip="Copy Components"
+        matTooltipPosition="above"
         i18n-matTooltip
+      >
+        <mat-icon>content_copy</mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="deleteComponents()"
+        matTooltip="Delete Components"
         matTooltipPosition="above"
-        (click)="addComponent(componentId)"
+        i18n-matTooltip
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+    <span fxFlex></span>
+    <div *ngIf="!isGroupNode" fxLayoutGap="16px">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="setAllComponentsIsExpanded(true)"
+        [disabled]="getNumberOfComponentsExpanded() === components.length"
+        i18n
+      >
+        + Expand All
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="setAllComponentsIsExpanded(false)"
+        [disabled]="getNumberOfComponentsExpanded() === 0"
+        i18n
       >
-        <mat-icon>add_circle</mat-icon>
+        - Collapse All
       </button>
-    </ng-template>
+    </div>
+  </div>
+</div>
+<div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
+  <em i18n>This step does not have any components. Click the + button to add a component.</em>
+</div>
+<div cdkDropList (cdkDropListDropped)="dropComponent($event)" cdkScrollable>
+  <div *ngFor="let component of components; let i = index">
     <div
-      *ngIf="!isGroupNode"
-      class="components-header"
+      [id]="component.id"
+      class="component"
+      cdkDrag
+      [cdkDragDisabled]="components.length < 2"
       fxLayout="row"
-      fxLayoutAlign="start center"
-      fxLayoutGap="4px"
+      fxLayoutAlign="start"
+      [ngClass]="{
+        'component-header-highlight': !componentsToExpanded[component.id]
+      }"
     >
-      <h5 i18n>Components</h5>
-      <ng-container
-        *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
-      ></ng-container>
-      <div *ngIf="isAnyComponentSelected">
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="chooseComponentLocation('move')"
-          matTooltip="Move Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>redo</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="chooseComponentLocation('copy')"
-          matTooltip="Copy Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>content_copy</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="deleteComponents()"
-          matTooltip="Delete Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-      <span fxFlex></span>
-      <div *ngIf="!isGroupNode" fxLayoutGap="16px">
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="setAllComponentsIsExpanded(true)"
-          [disabled]="getNumberOfComponentsExpanded() === components.length"
-          i18n
-        >
-          + Expand All
-        </button>
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="setAllComponentsIsExpanded(false)"
-          [disabled]="getNumberOfComponentsExpanded() === 0"
-          i18n
+      <div style="width: 100%">
+        <div
+          (click)="toggleComponent(component.id)"
+          class="component-header"
+          fxLayout="row"
+          fxLayoutAlign="start center"
+          fxLayoutGap="8px"
+          aria-label="Toggle component authoring"
+          i18n-aria-label
         >
-          - Collapse All
-        </button>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
-    <em i18n>This step does not have any components. Click the + button to add a component.</em>
-  </div>
-  <div cdkDropList (cdkDropListDropped)="dropComponent($event)" cdkScrollable>
-    <div *ngFor="let component of components; let i = index">
-      <div
-        [id]="component.id"
-        class="component"
-        cdkDrag
-        [cdkDragDisabled]="components.length < 2"
-        fxLayout="row"
-        fxLayoutAlign="start"
-        [ngClass]="{
-          'component-header-highlight': !componentsToExpanded[component.id]
-        }"
-      >
-        <div style="width: 100%">
-          <div
-            (click)="toggleComponent(component.id)"
-            class="component-header"
-            fxLayout="row"
-            fxLayoutAlign="start center"
-            fxLayoutGap="8px"
-            aria-label="Toggle component authoring"
-            i18n-aria-label
-          >
-            <div fxLayout="row" fxLayoutAlign="start center">
-              <mat-icon
-                class="drag-handle"
-                *ngIf="components.length > 1"
-                cdkDragHandle
-                title="Drag to reorder"
-                i18n-title
-                >drag_indicator</mat-icon
-              >
-              <mat-checkbox
-                color="primary"
-                [(ngModel)]="componentsToChecked[component.id]"
-                (change)="updateIsAnyComponentSelected()"
-                (click)="componentCheckboxClicked($event)"
-                aria-label="Select component"
-                i18n-aria-label
-              >
-                <span class="component-label"
-                  >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span
-                >
-              </mat-checkbox>
-            </div>
-            <ng-container>
-              <div
-                class="component-expand-collapse-div"
-                matTooltip="Click to expand/collapse"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              ></div>
-              <button
-                *ngIf="componentsToExpanded[component.id]"
-                mat-icon-button
-                color="primary"
-                (click)="showComponentAdvancedAuthoring(component, $event)"
-                matTooltip="Advanced"
-                matTooltipPosition="above"
-                i18n-matTooltip
+          <div fxLayout="row" fxLayoutAlign="start center">
+            <mat-icon
+              class="drag-handle"
+              *ngIf="components.length > 1"
+              cdkDragHandle
+              title="Drag to reorder"
+              i18n-title
+              >drag_indicator</mat-icon
+            >
+            <mat-checkbox
+              color="primary"
+              [(ngModel)]="componentsToChecked[component.id]"
+              (change)="updateIsAnyComponentSelected()"
+              (click)="componentCheckboxClicked($event)"
+              aria-label="Select component"
+              i18n-aria-label
+            >
+              <span class="component-label"
+                >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span
               >
-                <mat-icon>build</mat-icon>
-              </button>
-              <preview-component-button
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                [nodeId]="nodeId"
-                [componentId]="component.id"
-              ></preview-component-button>
-              <button
-                mat-icon-button
-                color="primary"
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                (click)="copyComponent($event, component)"
-                matTooltip="Copy Component"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              >
-                <mat-icon>content_copy</mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                color="primary"
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                (click)="deleteComponent($event, i + 1, component)"
-                matTooltip="Delete Component"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              >
-                <mat-icon>delete</mat-icon>
-              </button>
-            </ng-container>
-            <div fxLayout="row" fxLayoutAlign="end center">
-              <div *ngIf="!componentsToExpanded[component.id]" fxLayoutAlign="end center">
-                <mat-icon>expand_more</mat-icon>
-              </div>
-              <div *ngIf="componentsToExpanded[component.id]" fxLayoutAlign="end center">
-                <mat-icon>expand_less</mat-icon>
-              </div>
-            </div>
+            </mat-checkbox>
           </div>
-          <div *ngIf="componentsToExpanded[component.id]" class="component-authoring">
-            <component-authoring-component
+          <ng-container>
+            <div
+              class="component-expand-collapse-div"
+              matTooltip="Click to expand/collapse"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            ></div>
+            <button
+              *ngIf="componentsToExpanded[component.id]"
+              mat-icon-button
+              color="primary"
+              (click)="showComponentAdvancedAuthoring(component, $event)"
+              matTooltip="Advanced"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>build</mat-icon>
+            </button>
+            <preview-component-button
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
               [nodeId]="nodeId"
-              [componentContent]="component"
-            ></component-authoring-component>
-          </div>
-          <div class="add-component">
-            <ng-container
-              *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: component.id }"
-            ></ng-container>
+              [componentId]="component.id"
+            ></preview-component-button>
+            <button
+              mat-icon-button
+              color="primary"
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
+              (click)="copyComponent($event, component)"
+              matTooltip="Copy Component"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>content_copy</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              color="primary"
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
+              (click)="deleteComponent($event, i + 1, component)"
+              matTooltip="Delete Component"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ng-container>
+          <div fxLayout="row" fxLayoutAlign="end center">
+            <div *ngIf="!componentsToExpanded[component.id]" fxLayoutAlign="end center">
+              <mat-icon>expand_more</mat-icon>
+            </div>
+            <div *ngIf="componentsToExpanded[component.id]" fxLayoutAlign="end center">
+              <mat-icon>expand_less</mat-icon>
+            </div>
           </div>
         </div>
+        <div *ngIf="componentsToExpanded[component.id]" class="component-authoring">
+          <component-authoring-component
+            [nodeId]="nodeId"
+            [componentContent]="component"
+          ></component-authoring-component>
+        </div>
+        <div class="add-component">
+          <ng-container
+            *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: component.id }"
+          ></ng-container>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
index 6979023abcf..0e7ad700ecb 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
@@ -14,7 +14,7 @@ import { EditComponentAdvancedComponent } from '../../../../../app/authoring-too
 import { Component as WiseComponent } from '../../../common/Component';
 import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'node-authoring',
@@ -32,7 +32,6 @@ export class NodeAuthoringComponent implements OnInit {
   nodeId: string;
   nodePosition: any;
   projectId: number;
-  showNodeView: boolean = true;
   subscriptions: Subscription = new Subscription();
 
   constructor(
@@ -45,14 +44,9 @@ export class NodeAuthoringComponent implements OnInit {
     private dataService: TeacherDataService,
     private route: ActivatedRoute,
     private router: Router
-  ) {
-    this.router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe(() => this.updateShowNodeView());
-  }
+  ) {}
 
   ngOnInit(): void {
-    this.updateShowNodeView();
     this.nodeId = this.route.snapshot.paramMap.get('nodeId');
     this.route.parent.params.subscribe((params) => {
       this.projectId = Number(params.unitId);
@@ -82,12 +76,6 @@ export class NodeAuthoringComponent implements OnInit {
     }
   }
 
-  private updateShowNodeView(): void {
-    this.showNodeView = /\/teacher\/edit\/unit\/(\d*)\/node\/(node|group)(\d*)$/.test(
-      this.router.url
-    );
-  }
-
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
@@ -189,10 +177,6 @@ export class NodeAuthoringComponent implements OnInit {
     return this.projectService.saveProject();
   }
 
-  protected showAdvancedView(): void {
-    this.router.navigate([`/teacher/edit/unit/${this.projectId}/node/${this.nodeId}/advanced`]);
-  }
-
   protected getSelectedComponents(): ComponentContent[] {
     return this.components.filter(
       (component: ComponentContent) => this.componentsToChecked[component.id]
diff --git a/src/messages.xlf b/src/messages.xlf
index aa83700b406..c19dd018668 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1150,7 +1150,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">163</context>
+          <context context-type="linenumber">161</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1474,7 +1474,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">34</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cda31dbd724cf5f4fa7a4274d9120651490c8a8c" datatype="html">
@@ -11425,21 +11425,21 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Step Title <x id="INTERPOLATION" equiv-text="{{ nodePosition }}"/>:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">5</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dcd8b6c1f614e50769b4d26e4a1d542ef14d3fe8" datatype="html">
         <source> Activity Title <x id="INTERPOLATION" equiv-text="{{ nodePosition }}"/>: </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">6</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fdf7cbdc140d0aab0f0b6c06065a0fd448ed6a2e" datatype="html">
         <source>Title</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">12</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component.html</context>
@@ -11466,11 +11466,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Advanced</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">23</context>
+          <context context-type="linenumber">21</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">192</context>
+          <context context-type="linenumber">190</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
@@ -11481,98 +11481,98 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Back to unit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">45</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2998257cb98e73a3cfaf686ef9c2bbbf618f6fb0" datatype="html">
         <source>Add a new component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">58</context>
+          <context context-type="linenumber">56</context>
         </context-group>
       </trans-unit>
       <trans-unit id="16f48e8858552177f3da7a0ccf2449b2522ebe14" datatype="html">
         <source>Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">71</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7c5b499b46f7ab611026c2e07b19d8d70e51853a" datatype="html">
         <source>Move Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">80</context>
         </context-group>
       </trans-unit>
       <trans-unit id="835ab9ba787d9e73a77b6f723e200ca24a5808a9" datatype="html">
         <source>Copy Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">92</context>
+          <context context-type="linenumber">90</context>
         </context-group>
       </trans-unit>
       <trans-unit id="646e338d93a6cafb1c27766c746ce8f2fde3c2a6" datatype="html">
         <source>Delete Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">102</context>
+          <context context-type="linenumber">100</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="4d78280b4290901b50914c0d78a721503c397554" datatype="html">
+      <trans-unit id="67145eb769f4fe04e8b9f3c24d4452cf18ac196b" datatype="html">
         <source> + Expand All </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">117,119</context>
+          <context context-type="linenumber">115,117</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="e3fb2c845b0e0af10ee3496ce0653bb31a593820" datatype="html">
+      <trans-unit id="22137335ce02968992f1f2fb73c630e68be673cb" datatype="html">
         <source> - Collapse All </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">126,128</context>
+          <context context-type="linenumber">124,126</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1944eaae32b2002e6f552fd9c1f5a113c412ad25" datatype="html">
         <source>This step does not have any components. Click the + button to add a component.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">133</context>
+          <context context-type="linenumber">131</context>
         </context-group>
       </trans-unit>
       <trans-unit id="534f4fefca77da56b8b0ea6fb63ff18bae415a92" datatype="html">
         <source>Toggle component authoring</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">155</context>
+          <context context-type="linenumber">153</context>
         </context-group>
       </trans-unit>
       <trans-unit id="11cd90245b41b1506efabdcea69d3c5c0964a432" datatype="html">
         <source>Select component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">170</context>
         </context-group>
       </trans-unit>
       <trans-unit id="47f8ae23f1be55b30a01abc41c7ca4b770f5d1b2" datatype="html">
         <source>Click to expand/collapse</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">183</context>
+          <context context-type="linenumber">181</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6e04c490706ecafe8e0c842513b700e165d97bc2" datatype="html">
         <source>Copy Component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">214</context>
+          <context context-type="linenumber">212</context>
         </context-group>
       </trans-unit>
       <trans-unit id="46c242cc262ba3a868dfd6bd37f555c1ada6877c" datatype="html">
         <source>Delete Component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">228</context>
+          <context context-type="linenumber">226</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7035134055292483273" datatype="html">
@@ -11580,7 +11580,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
 </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts</context>
-          <context context-type="linenumber">274</context>
+          <context context-type="linenumber">258</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5170405945214763287" datatype="html">
@@ -11588,7 +11588,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
 </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts</context>
-          <context context-type="linenumber">275</context>
+          <context context-type="linenumber">259</context>
         </context-group>
       </trans-unit>
       <trans-unit id="bb39841df2c03f771748c1f986e615bffa7f2593" datatype="html">

From 697fc68c3a3c5c70230c4b655cc52b578423dd62 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Sat, 7 Oct 2023 20:09:32 -0700
Subject: [PATCH 04/13] refactor(NodeService): Clean up getNextNode() for AT/CM
 modes (#1453)

---
 src/assets/wise5/services/nodeService.ts | 29 +++++++-----------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/assets/wise5/services/nodeService.ts b/src/assets/wise5/services/nodeService.ts
index 7948ba27ae8..f6abc4ab9ab 100644
--- a/src/assets/wise5/services/nodeService.ts
+++ b/src/assets/wise5/services/nodeService.ts
@@ -53,32 +53,19 @@ export class NodeService {
    * @param currentId (optional)
    * @returns a promise that returns the next node id
    */
-  getNextNodeId(currentId?): Promise<any> {
+  getNextNodeId(currentId?: string): Promise<any> {
     const promise = new Promise((resolve, reject) => {
       let nextNodeId = null;
-      let currentNodeId = null;
-      let mode = this.ConfigService.getMode();
-      if (currentId) {
-        currentNodeId = currentId;
-      } else {
-        let currentNode = null;
-        currentNode = this.DataService.getCurrentNode();
-        if (currentNode) {
-          currentNodeId = currentNode.id;
-        }
-      }
+      const currentNodeId = currentId ?? this.DataService.getCurrentNodeId();
       if (currentNodeId) {
-        if (mode === 'classroomMonitor' || mode === 'author') {
-          let currentNodeOrder = this.ProjectService.getNodeOrderById(currentNodeId);
+        if (['author', 'classroomMonitor'].includes(this.ConfigService.getMode())) {
+          const currentNodeOrder = this.ProjectService.getNodeOrderById(currentNodeId);
           if (currentNodeOrder) {
-            let nextNodeOrder = currentNodeOrder + 1;
-            let nextId = this.ProjectService.getNodeIdByOrder(nextNodeOrder);
+            const nextId = this.ProjectService.getNodeIdByOrder(currentNodeOrder + 1);
             if (nextId) {
-              if (this.ProjectService.isApplicationNode(nextId)) {
-                nextNodeId = nextId;
-              } else if (this.ProjectService.isGroupNode(nextId)) {
-                nextNodeId = this.getNextNodeId(nextId);
-              }
+              nextNodeId = this.ProjectService.isApplicationNode(nextId)
+                ? nextId
+                : this.getNextNodeId(nextId);
             }
           }
           resolve(nextNodeId);

From 3d6d47e9859c2e0efa21da52ac9d33e43b7c90f3 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 9 Oct 2023 13:12:38 -0700
Subject: [PATCH 05/13] refactor(NodeService): Move authoring-specific
 observables to TeacherNodeService (#1458)

---
 .../edit-advanced-component.component.ts      |  4 ++--
 .../components/AbstractComponentAuthoring.ts  |  4 ++--
 .../save-starter-state.component.ts           |  4 ++--
 .../node-authoring.component.spec.ts          |  2 ++
 .../node-authoring.component.ts               |  4 ++--
 .../animation-authoring.component.spec.ts     |  4 ++--
 .../animation-authoring.component.ts          |  4 ++--
 ...dio-oscillator-authoring.component.spec.ts |  3 ++-
 .../audio-oscillator-authoring.component.ts   |  4 ++--
 .../concept-map-authoring.component.ts        |  4 ++--
 .../concept-map-authoring.module.ts           |  4 ++--
 ...dit-concept-map-advanced.component.spec.ts |  3 ++-
 .../edit-concept-map-advanced.component.ts    |  4 ++--
 ...ialog-guidance-authoring.component.spec.ts |  4 +++-
 .../dialog-guidance-authoring.component.ts    |  4 ++--
 .../discussion-authoring.component.ts         |  4 ++--
 .../draw-authoring.component.ts               |  3 ++-
 .../draw-authoring/draw-authoring.module.ts   |  4 ++--
 .../embedded-authoring.component.spec.ts      |  4 +++-
 .../embedded-authoring.component.ts           |  4 ++--
 .../edit-graph-advanced.component.spec.ts     |  3 ++-
 .../graph-authoring.component.spec.ts         |  3 ++-
 .../graph-authoring.component.ts              |  4 ++--
 .../html-authoring.component.ts               |  6 ++---
 .../label-authoring.component.ts              |  4 ++--
 .../match-authoring.component.ts              |  4 ++--
 .../multiple-choice-authoring.component.ts    |  4 ++--
 ...t-open-response-advanced.component.spec.ts |  3 ++-
 .../edit-open-response-advanced.component.ts  |  4 ++--
 .../outside-url-authoring.component.ts        |  4 ++--
 ...-chat-advanced-component.component.spec.ts |  3 ++-
 ...-peer-chat-advanced-component.component.ts |  4 ++--
 .../peer-chat-authoring.component.spec.ts     |  4 ++--
 .../peer-chat-authoring.component.ts          |  4 ++--
 ...how-group-work-authoring.component.spec.ts |  3 ++-
 .../show-group-work-authoring.component.ts    |  4 ++--
 .../show-my-work-authoring.component.spec.ts  |  3 ++-
 .../show-my-work-authoring.component.ts       |  4 ++--
 .../summary-authoring.component.spec.ts       |  4 ++--
 .../summary-authoring.component.ts            |  4 ++--
 .../edit-table-advanced.component.spec.ts     |  3 ++-
 .../edit-table-advanced.component.ts          |  4 ++--
 .../table-authoring.component.ts              |  4 ++--
 src/assets/wise5/services/nodeService.ts      | 18 ---------------
 .../wise5/services/teacherNodeService.ts      | 22 ++++++++++++++++++-
 src/messages.xlf                              | 20 ++++++++---------
 46 files changed, 120 insertions(+), 102 deletions(-)

diff --git a/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts b/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts
index c81bf2b2ab3..a658ba9d660 100644
--- a/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts
+++ b/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts
@@ -1,9 +1,9 @@
 import { Directive, Input } from '@angular/core';
 import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 import { Component } from '../../../assets/wise5/common/Component';
-import { NodeService } from '../../../assets/wise5/services/nodeService';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
+import { TeacherNodeService } from '../../../assets/wise5/services/teacherNodeService';
 
 @Directive()
 export abstract class EditAdvancedComponentComponent {
@@ -13,7 +13,7 @@ export abstract class EditAdvancedComponentComponent {
   @Input() nodeId: string;
 
   constructor(
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected teacherProjectService: TeacherProjectService
   ) {}
diff --git a/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts b/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts
index 9639529f493..45baa89d086 100644
--- a/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts
+++ b/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts
@@ -3,8 +3,8 @@ import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { ProjectAssetService } from '../../../../app/services/projectAssetService';
 import { ConfigService } from '../../services/configService';
-import { NodeService } from '../../services/nodeService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
+import { TeacherNodeService } from '../../services/teacherNodeService';
 
 @Directive()
 export abstract class AbstractComponentAuthoring {
@@ -19,7 +19,7 @@ export abstract class AbstractComponentAuthoring {
 
   constructor(
     protected configService: ConfigService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {}
diff --git a/src/assets/wise5/authoringTool/components/save-starter-state/save-starter-state.component.ts b/src/assets/wise5/authoringTool/components/save-starter-state/save-starter-state.component.ts
index e2dd75faa3c..1769b7cdcba 100644
--- a/src/assets/wise5/authoringTool/components/save-starter-state/save-starter-state.component.ts
+++ b/src/assets/wise5/authoringTool/components/save-starter-state/save-starter-state.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { NodeService } from '../../../services/nodeService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 import { Component as WISEComponent } from '../../../common/Component';
 
 @Component({
@@ -12,7 +12,7 @@ export class SaveStarterStateComponent implements OnInit {
   protected isDirty: boolean;
   @Input() private starterState: any;
 
-  constructor(private matDialog: MatDialog, private nodeService: NodeService) {}
+  constructor(private matDialog: MatDialog, private nodeService: TeacherNodeService) {}
 
   ngOnInit(): void {}
 
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts
index c8fc3e9a2c5..1d7ee1fa57c 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts
@@ -22,6 +22,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { of } from 'rxjs';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: NodeAuthoringComponent;
 let component1: any;
@@ -56,6 +57,7 @@ describe('NodeAuthoringComponent', () => {
         ClassroomStatusService,
         ProjectAssetService,
         TeacherDataService,
+        TeacherNodeService,
         TeacherProjectService,
         TeacherWebSocketService,
         {
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
index 0e7ad700ecb..abdadb64818 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import { Subscription, filter } from 'rxjs';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
-import { NodeService } from '../../../services/nodeService';
 import { ComponentTypeService } from '../../../services/componentTypeService';
 import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
 import { Node } from '../../../common/Node';
@@ -15,6 +14,7 @@ import { Component as WiseComponent } from '../../../common/Component';
 import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ActivatedRoute, Router } from '@angular/router';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'node-authoring',
@@ -39,7 +39,7 @@ export class NodeAuthoringComponent implements OnInit {
     private componentServiceLookupService: ComponentServiceLookupService,
     private componentTypeService: ComponentTypeService,
     private dialog: MatDialog,
-    private nodeService: NodeService,
+    private nodeService: TeacherNodeService,
     private projectService: TeacherProjectService,
     private dataService: TeacherDataService,
     private route: ActivatedRoute,
diff --git a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.spec.ts b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.spec.ts
index a36599154df..a7e06ef9c5b 100644
--- a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.spec.ts
+++ b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.spec.ts
@@ -11,11 +11,11 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { copy } from '../../../common/object/object';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MockNodeService } from '../../common/MockNodeService';
 import { AnimationAuthoring } from './animation-authoring.component';
 import { MatDialogModule } from '@angular/material/dialog';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 export class MockConfigService {}
 
@@ -39,7 +39,7 @@ describe('AnimationAuthoring', () => {
       ],
       declarations: [AnimationAuthoring, EditComponentPrompt],
       providers: [
-        { provide: NodeService, useClass: MockNodeService },
+        { provide: TeacherNodeService, useClass: MockNodeService },
         ProjectAssetService,
         TeacherProjectService
       ]
diff --git a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts
index bee0a240795..ef0fb3aea93 100644
--- a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts
+++ b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts
@@ -7,10 +7,10 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { generateRandomKey } from '../../../common/string/string';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'animation-authoring',
@@ -26,7 +26,7 @@ export class AnimationAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.spec.ts b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.spec.ts
index 68b92b6bd20..f871b11f42b 100644
--- a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.spec.ts
+++ b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.spec.ts
@@ -11,6 +11,7 @@ import { StudentTeacherCommonServicesModule } from '../../../../../app/student-t
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { AudioOscillatorService } from '../audioOscillatorService';
 import { AudioOscillatorAuthoring } from './audio-oscillator-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: AudioOscillatorAuthoring;
 let fixture: ComponentFixture<AudioOscillatorAuthoring>;
@@ -30,7 +31,7 @@ describe('AudioOscillatorAuthoring', () => {
         StudentTeacherCommonServicesModule
       ],
       declarations: [EditComponentPrompt, AudioOscillatorAuthoring],
-      providers: [ProjectAssetService, TeacherProjectService]
+      providers: [ProjectAssetService, TeacherNodeService, TeacherProjectService]
     });
     fixture = TestBed.createComponent(AudioOscillatorAuthoring);
     component = fixture.componentInstance;
diff --git a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts
index 28372248d84..4d3e5b443fb 100644
--- a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts
+++ b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts
@@ -4,9 +4,9 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { AudioOscillatorService } from '../audioOscillatorService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'audio-oscillator-authoring',
@@ -23,7 +23,7 @@ export class AudioOscillatorAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected AudioOscillatorService: AudioOscillatorService,
     protected ConfigService: ConfigService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts
index 780415e8b74..5c33db56052 100644
--- a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts
+++ b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts
@@ -4,12 +4,12 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ConceptMapService } from '../conceptMapService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
 import { filter } from 'rxjs/operators';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'concept-map-authoring',
@@ -24,7 +24,7 @@ export class ConceptMapAuthoring extends AbstractComponentAuthoring {
     private ConceptMapService: ConceptMapService,
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.module.ts b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.module.ts
index 1db61953937..ef055fadafb 100644
--- a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.module.ts
+++ b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.module.ts
@@ -10,7 +10,6 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AnnotationService } from '../../../services/annotationService';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { SessionService } from '../../../services/sessionService';
 import { StudentAssetService } from '../../../services/studentAssetService';
@@ -19,6 +18,7 @@ import { TagService } from '../../../services/tagService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ConceptMapService } from '../conceptMapService';
 import { ConceptMapAuthoring } from './concept-map-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @NgModule({
   declarations: [ConceptMapAuthoring, EditComponentPrompt],
@@ -35,13 +35,13 @@ import { ConceptMapAuthoring } from './concept-map-authoring.component';
     AnnotationService,
     ConceptMapService,
     ConfigService,
-    NodeService,
     ProjectAssetService,
     ProjectService,
     SessionService,
     StudentAssetService,
     StudentDataService,
     TagService,
+    TeacherNodeService,
     TeacherProjectService
   ],
   exports: [ConceptMapAuthoring, EditComponentPrompt]
diff --git a/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.spec.ts b/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.spec.ts
index b3860da5c9b..389ce3c26b8 100644
--- a/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.spec.ts
+++ b/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.spec.ts
@@ -24,6 +24,7 @@ import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ConceptMapContent } from '../ConceptMapContent';
 import { EditConceptMapAdvancedComponent } from './edit-concept-map-advanced.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: EditConceptMapAdvancedComponent;
 let fixture: ComponentFixture<EditConceptMapAdvancedComponent>;
@@ -57,7 +58,7 @@ describe('EditConceptMapAdvancedComponent', () => {
         EditConnectedComponentsAddButtonComponent,
         EditConnectedComponentsComponent
       ],
-      providers: [TeacherProjectService],
+      providers: [TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.ts b/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.ts
index 38999989f10..c42db5d28ee 100644
--- a/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.ts
+++ b/src/assets/wise5/components/conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component';
-import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ConceptMapContent } from '../ConceptMapContent';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'edit-concept-map-advanced',
@@ -15,7 +15,7 @@ export class EditConceptMapAdvancedComponent extends EditAdvancedComponentCompon
   allowedConnectedComponentTypes = ['ConceptMap', 'Draw', 'Embedded', 'Graph', 'Label', 'Table'];
 
   constructor(
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.spec.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.spec.ts
index a7367c0827a..3e18f59a93e 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.spec.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.spec.ts
@@ -6,6 +6,7 @@ import { copy } from '../../../common/object/object';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { DialogGuidanceAuthoringComponent } from './dialog-guidance-authoring.component';
 import { DialogGuidanceAuthoringModule } from './dialog-guidance-authoring.module';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 const componentContent = {
   id: 'i64ex48j1z',
@@ -28,7 +29,8 @@ describe('DialogGuidanceAuthoringComponent', () => {
         DialogGuidanceAuthoringModule,
         HttpClientTestingModule,
         StudentTeacherCommonServicesModule
-      ]
+      ],
+      providers: [TeacherNodeService]
     });
     fixture = TestBed.createComponent(DialogGuidanceAuthoringComponent);
     component = fixture.componentInstance;
diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts
index 423c22e0dad..d3ba57b1e68 100644
--- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts
+++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { DialogGuidanceService } from '../dialogGuidanceService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'dialog-guidance-authoring',
@@ -15,7 +15,7 @@ export class DialogGuidanceAuthoringComponent extends AbstractComponentAuthoring
   constructor(
     protected configService: ConfigService,
     private dialogGuidanceService: DialogGuidanceService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.ts b/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.ts
index 2bbee87af58..534d3758486 100644
--- a/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.ts
+++ b/src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.ts
@@ -4,8 +4,8 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'discussion-authoring',
@@ -15,7 +15,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 export class DiscussionAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected ConfigService: ConfigService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts
index d6a28fac831..4841efe523b 100644
--- a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts
+++ b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts
@@ -10,6 +10,7 @@ import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'draw-authoring',
@@ -48,7 +49,7 @@ export class DrawAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.module.ts b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.module.ts
index ad77ecdab9f..433503f45cd 100644
--- a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.module.ts
+++ b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.module.ts
@@ -10,7 +10,6 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AnnotationService } from '../../../services/annotationService';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { SessionService } from '../../../services/sessionService';
 import { StudentAssetService } from '../../../services/studentAssetService';
@@ -19,6 +18,7 @@ import { TagService } from '../../../services/tagService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { DrawService } from '../drawService';
 import { DrawAuthoring } from './draw-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @NgModule({
   declarations: [DrawAuthoring, EditComponentPrompt],
@@ -35,13 +35,13 @@ import { DrawAuthoring } from './draw-authoring.component';
     AnnotationService,
     ConfigService,
     DrawService,
-    NodeService,
     ProjectAssetService,
     ProjectService,
     SessionService,
     StudentAssetService,
     StudentDataService,
     TagService,
+    TeacherNodeService,
     TeacherProjectService
   ],
   exports: [DrawAuthoring, EditComponentPrompt]
diff --git a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.spec.ts b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.spec.ts
index ece52ae96b8..615fa8f43a6 100644
--- a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.spec.ts
+++ b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.spec.ts
@@ -6,6 +6,7 @@ import { copy } from '../../../common/object/object';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { EmbeddedAuthoring } from './embedded-authoring.component';
 import { EmbeddedAuthoringModule } from './embedded-authoring.module';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: EmbeddedAuthoring;
 let fixture: ComponentFixture<EmbeddedAuthoring>;
@@ -18,7 +19,8 @@ describe('EmbeddedAuthoringComponent', () => {
         EmbeddedAuthoringModule,
         HttpClientTestingModule,
         StudentTeacherCommonServicesModule
-      ]
+      ],
+      providers: [TeacherNodeService]
     });
     fixture = TestBed.createComponent(EmbeddedAuthoring);
     component = fixture.componentInstance;
diff --git a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts
index 622cf8cec14..521aaf7453a 100644
--- a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts
+++ b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts
@@ -4,12 +4,12 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { EmbeddedService } from '../embeddedService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
 import { filter } from 'rxjs/operators';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'embedded-authoring',
@@ -23,7 +23,7 @@ export class EmbeddedAuthoring extends AbstractComponentAuthoring {
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
     private EmbeddedService: EmbeddedService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.spec.ts b/src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.spec.ts
index 8a2284b48a2..dd2b1b66397 100644
--- a/src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.spec.ts
+++ b/src/assets/wise5/components/graph/edit-graph-advanced/edit-graph-advanced.component.spec.ts
@@ -25,6 +25,7 @@ import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { GraphContent } from '../GraphContent';
 import { EditGraphAdvancedComponent } from './edit-graph-advanced.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: EditGraphAdvancedComponent;
 let fixture: ComponentFixture<EditGraphAdvancedComponent>;
@@ -58,7 +59,7 @@ describe('EditGraphAdvancedComponent', () => {
         EditConnectedComponentsComponent,
         EditGraphAdvancedComponent
       ],
-      providers: [TeacherProjectService],
+      providers: [TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.spec.ts b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.spec.ts
index 7a0dd817bc2..2eddda1bf2a 100644
--- a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.spec.ts
+++ b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.spec.ts
@@ -17,6 +17,7 @@ import { StudentTeacherCommonServicesModule } from '../../../../../app/student-t
 import { copy } from '../../../common/object/object';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { GraphAuthoring } from './graph-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: GraphAuthoring;
 let fixture: ComponentFixture<GraphAuthoring>;
@@ -41,7 +42,7 @@ describe('GraphAuthoringComponent', () => {
         StudentTeacherCommonServicesModule
       ],
       declarations: [GraphAuthoring, EditComponentPrompt],
-      providers: [ProjectAssetService, TeacherProjectService]
+      providers: [ProjectAssetService, TeacherNodeService, TeacherProjectService]
     });
     fixture = TestBed.createComponent(GraphAuthoring);
     component = fixture.componentInstance;
diff --git a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts
index c22c69318e8..4d0de11ce08 100644
--- a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts
+++ b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts
@@ -4,13 +4,13 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { GraphService } from '../graphService';
 import { isMultipleYAxes } from '../util';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
 import { filter } from 'rxjs/operators';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'graph-authoring',
@@ -134,7 +134,7 @@ export class GraphAuthoring extends AbstractComponentAuthoring {
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
     private GraphService: GraphService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/html/html-authoring/html-authoring.component.ts b/src/assets/wise5/components/html/html-authoring/html-authoring.component.ts
index 539f073b7bd..71dc9e3045f 100644
--- a/src/assets/wise5/components/html/html-authoring/html-authoring.component.ts
+++ b/src/assets/wise5/components/html/html-authoring/html-authoring.component.ts
@@ -3,8 +3,8 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { insertWiseLinks, replaceWiseLinks } from '../../../common/wise-link/wise-link';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'html-authoring',
@@ -15,9 +15,9 @@ export class HtmlAuthoring extends AbstractComponentAuthoring {
 
   constructor(
     protected configService: ConfigService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
-    protected projectService: TeacherProjectService,
+    protected projectService: TeacherProjectService
   ) {
     super(configService, nodeService, projectAssetService, projectService);
   }
diff --git a/src/assets/wise5/components/label/label-authoring/label-authoring.component.ts b/src/assets/wise5/components/label/label-authoring/label-authoring.component.ts
index 9af75fb509a..175e3147939 100644
--- a/src/assets/wise5/components/label/label-authoring/label-authoring.component.ts
+++ b/src/assets/wise5/components/label/label-authoring/label-authoring.component.ts
@@ -3,13 +3,13 @@
 import { Component } from '@angular/core';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'label-authoring',
@@ -23,7 +23,7 @@ export class LabelAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts b/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
index 220a1924578..2bad840af2e 100644
--- a/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
+++ b/src/assets/wise5/components/match/match-authoring/match-authoring.component.ts
@@ -5,11 +5,11 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { generateRandomKey } from '../../../common/string/string';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MatchService } from '../matchService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'match-authoring',
@@ -24,7 +24,7 @@ export class MatchAuthoring extends AbstractComponentAuthoring {
     protected configService: ConfigService,
     private dialog: MatDialog,
     private matchService: MatchService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts
index 74034237c01..bd0c8c062aa 100644
--- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts
+++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts
@@ -5,10 +5,10 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { generateRandomKey } from '../../../common/string/string';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MatDialog } from '@angular/material/dialog';
 import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'multiple-choice-authoring',
@@ -23,7 +23,7 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring {
   constructor(
     protected ConfigService: ConfigService,
     private dialog: MatDialog,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.spec.ts b/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.spec.ts
index f917740810a..508386a3ee7 100644
--- a/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.spec.ts
+++ b/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.spec.ts
@@ -26,6 +26,7 @@ import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { OpenResponseContent } from '../OpenResponseContent';
 import { EditOpenResponseAdvancedComponent } from './edit-open-response-advanced.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: EditOpenResponseAdvancedComponent;
 let fixture: ComponentFixture<EditOpenResponseAdvancedComponent>;
@@ -62,7 +63,7 @@ describe('EditOpenResponseAdvancedComponent', () => {
         EditConnectedComponentsComponent,
         EditOpenResponseAdvancedComponent
       ],
-      providers: [TeacherProjectService],
+      providers: [TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.ts b/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.ts
index e7bd4eaf612..c00fc31de1d 100644
--- a/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.ts
+++ b/src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component';
 import { CRaterService } from '../../../services/cRaterService';
-import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { OpenResponseContent } from '../OpenResponseContent';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'edit-open-response-advanced',
@@ -28,7 +28,7 @@ export class EditOpenResponseAdvancedComponent extends EditAdvancedComponentComp
 
   constructor(
     protected cRaterService: CRaterService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected teacherProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts b/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts
index cacc912edf9..7855369ec18 100644
--- a/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts
+++ b/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts
@@ -4,9 +4,9 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { OutsideURLService } from '../outsideURLService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'outside-url-authoring',
@@ -45,7 +45,7 @@ export class OutsideUrlAuthoring extends AbstractComponentAuthoring {
 
   constructor(
     protected ConfigService: ConfigService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected OutsideURLService: OutsideURLService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
diff --git a/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.spec.ts b/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.spec.ts
index 4260437c71c..6ce4c250fa9 100644
--- a/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.spec.ts
+++ b/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.spec.ts
@@ -6,6 +6,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { PeerChatContent } from '../PeerChatContent';
 import { EditPeerChatAdvancedComponentComponent } from './edit-peer-chat-advanced-component.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 describe('EditPeerChatAdvancedComponentComponent', () => {
   let component: EditPeerChatAdvancedComponentComponent;
@@ -15,7 +16,7 @@ describe('EditPeerChatAdvancedComponentComponent', () => {
     await TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, MatDialogModule, StudentTeacherCommonServicesModule],
       declarations: [EditPeerChatAdvancedComponentComponent],
-      providers: [TeacherProjectService],
+      providers: [TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.ts b/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.ts
index b94e2ca6d0b..f31fdc7609b 100644
--- a/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.ts
+++ b/src/assets/wise5/components/peerChat/edit-peer-chat-advanced-component/edit-peer-chat-advanced-component.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component';
-import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'edit-peer-chat-advanced',
@@ -11,7 +11,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 })
 export class EditPeerChatAdvancedComponentComponent extends EditAdvancedComponentComponent {
   constructor(
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.spec.ts b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.spec.ts
index e0d732b1db0..47e54cdf902 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.spec.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.spec.ts
@@ -11,7 +11,6 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { copy } from '../../../common/object/object';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { SessionService } from '../../../services/sessionService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
@@ -19,6 +18,7 @@ import { MockNodeService } from '../../common/MockNodeService';
 import { PeerChatAuthoringComponent } from './peer-chat-authoring.component';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 const componentContent = {
   id: 'qn3savv52r',
@@ -60,7 +60,7 @@ describe('PeerChatAuthoringComponent', () => {
       declarations: [EditComponentPrompt, PeerChatAuthoringComponent],
       providers: [
         ConfigService,
-        { provide: NodeService, useClass: MockNodeService },
+        { provide: TeacherNodeService, useClass: MockNodeService },
         ProjectAssetService,
         ProjectService,
         SessionService,
diff --git a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.ts b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.ts
index f2d7ff3aa63..4690fc17946 100644
--- a/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.ts
+++ b/src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.ts
@@ -2,9 +2,9 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import peerChatLogicOptions from './peer-chat-logic-options';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'peer-chat-authoring',
@@ -27,7 +27,7 @@ export class PeerChatAuthoringComponent extends AbstractComponentAuthoring {
 
   constructor(
     protected configService: ConfigService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.spec.ts b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.spec.ts
index 0d8e8dd7798..e15ec719ca4 100644
--- a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.spec.ts
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.spec.ts
@@ -14,6 +14,7 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 describe('ShowGroupWorkAuthoringComponent', () => {
   let component: ShowGroupWorkAuthoringComponent;
@@ -35,7 +36,7 @@ describe('ShowGroupWorkAuthoringComponent', () => {
         StudentTeacherCommonServicesModule
       ],
       declarations: [EditComponentPrompt, ShowGroupWorkAuthoringComponent],
-      providers: [ProjectAssetService, TeacherProjectService],
+      providers: [ProjectAssetService, TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts
index 2d2fe91ebd2..cd1ad67fc08 100644
--- a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts
+++ b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ShowMyWorkAuthoringComponent } from '../../showMyWork/show-my-work-authoring/show-my-work-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'show-group-work-authoring',
@@ -13,7 +13,7 @@ import { ShowMyWorkAuthoringComponent } from '../../showMyWork/show-my-work-auth
 export class ShowGroupWorkAuthoringComponent extends ShowMyWorkAuthoringComponent {
   constructor(
     protected configService: ConfigService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.spec.ts b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.spec.ts
index e5c3c88d7b7..b539105b46b 100644
--- a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.spec.ts
+++ b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.spec.ts
@@ -12,6 +12,7 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ShowMyWorkAuthoringComponent } from './show-my-work-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 describe('ShowMyWorkAuthoringComponent', () => {
   let component: ShowMyWorkAuthoringComponent;
@@ -43,7 +44,7 @@ describe('ShowMyWorkAuthoringComponent', () => {
         StudentTeacherCommonServicesModule
       ],
       declarations: [EditComponentPrompt, ShowMyWorkAuthoringComponent],
-      providers: [ProjectAssetService, TeacherProjectService]
+      providers: [ProjectAssetService, TeacherNodeService, TeacherProjectService]
     }).compileComponents();
   });
 
diff --git a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.ts b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.ts
index 342f44a2150..4153274f7f5 100644
--- a/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.ts
+++ b/src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'show-my-work-authoring',
@@ -30,7 +30,7 @@ export class ShowMyWorkAuthoringComponent extends AbstractComponentAuthoring {
 
   constructor(
     protected configService: ConfigService,
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected projectAssetService: ProjectAssetService,
     protected projectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.spec.ts b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.spec.ts
index 154cd731198..c839071adf1 100644
--- a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.spec.ts
+++ b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.spec.ts
@@ -14,10 +14,10 @@ import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-comp
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { copy } from '../../../common/object/object';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MockNodeService } from '../../common/MockNodeService';
 import { SummaryAuthoring } from './summary-authoring.component';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 export class MockConfigService {}
 
@@ -45,7 +45,7 @@ describe('SummaryAuthoringComponent', () => {
       ],
       declarations: [EditComponentPrompt, SummaryAuthoring],
       providers: [
-        { provide: NodeService, useClass: MockNodeService },
+        { provide: TeacherNodeService, useClass: MockNodeService },
         ProjectAssetService,
         TeacherProjectService
       ]
diff --git a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts
index 0cbd80ccf9f..b1a0060049f 100644
--- a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts
+++ b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts
@@ -5,10 +5,10 @@ import { ProjectAssetService } from '../../../../../app/services/projectAssetSer
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MultipleChoiceContent } from '../../multipleChoice/MultipleChoiceContent';
 import { SummaryService } from '../summaryService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'summary-authoring',
@@ -24,7 +24,7 @@ export class SummaryAuthoring extends AbstractComponentAuthoring {
   constructor(
     private componentServiceLookupService: ComponentServiceLookupService,
     protected ConfigService: ConfigService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService,
     private SummaryService: SummaryService
diff --git a/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.spec.ts b/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.spec.ts
index bef831ca2c9..127fbce3117 100644
--- a/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.spec.ts
+++ b/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.spec.ts
@@ -27,6 +27,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { EditTableConnectedComponentsComponent } from '../edit-table-connected-components/edit-table-connected-components.component';
 import { EditTableAdvancedComponent } from './edit-table-advanced.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 let component: EditTableAdvancedComponent;
 let fixture: ComponentFixture<EditTableAdvancedComponent>;
@@ -62,7 +63,7 @@ describe('EditTableAdvancedComponent', () => {
         EditTableAdvancedComponent,
         EditTableConnectedComponentsComponent
       ],
-      providers: [TeacherProjectService],
+      providers: [TeacherNodeService, TeacherProjectService],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.ts b/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.ts
index ebbe85bd1ae..72708a38612 100644
--- a/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.ts
+++ b/src/assets/wise5/components/table/edit-table-advanced/edit-table-advanced.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { EditAdvancedComponentComponent } from '../../../../../app/authoring-tool/edit-advanced-component/edit-advanced-component.component';
 import { CSVToArray } from '../../../common/array/array';
-import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { TableContent } from '../TableContent';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'edit-table-advanced',
@@ -25,7 +25,7 @@ export class EditTableAdvancedComponent extends EditAdvancedComponentComponent {
   importTableMessage: string;
 
   constructor(
-    protected nodeService: NodeService,
+    protected nodeService: TeacherNodeService,
     protected notebookService: NotebookService,
     protected teacherProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/components/table/table-authoring/table-authoring.component.ts b/src/assets/wise5/components/table/table-authoring/table-authoring.component.ts
index 4b569da1230..22d80ca27e7 100644
--- a/src/assets/wise5/components/table/table-authoring/table-authoring.component.ts
+++ b/src/assets/wise5/components/table/table-authoring/table-authoring.component.ts
@@ -6,8 +6,8 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring';
 import { ConfigService } from '../../../services/configService';
-import { NodeService } from '../../../services/nodeService';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TeacherNodeService } from '../../../services/teacherNodeService';
 
 @Component({
   selector: 'table-authoring',
@@ -25,7 +25,7 @@ export class TableAuthoring extends AbstractComponentAuthoring {
 
   constructor(
     protected ConfigService: ConfigService,
-    protected NodeService: NodeService,
+    protected NodeService: TeacherNodeService,
     protected ProjectAssetService: ProjectAssetService,
     protected ProjectService: TeacherProjectService
   ) {
diff --git a/src/assets/wise5/services/nodeService.ts b/src/assets/wise5/services/nodeService.ts
index f6abc4ab9ab..d409dc86915 100644
--- a/src/assets/wise5/services/nodeService.ts
+++ b/src/assets/wise5/services/nodeService.ts
@@ -17,12 +17,6 @@ export class NodeService {
   public nodeSubmitClicked$: Observable<any> = this.nodeSubmitClickedSource.asObservable();
   private doneRenderingComponentSource: Subject<any> = new Subject<any>();
   public doneRenderingComponent$ = this.doneRenderingComponentSource.asObservable();
-  private componentShowSubmitButtonValueChangedSource: Subject<any> = new Subject<any>();
-  public componentShowSubmitButtonValueChanged$: Observable<any> = this.componentShowSubmitButtonValueChangedSource.asObservable();
-  private starterStateResponseSource: Subject<any> = new Subject<any>();
-  public starterStateResponse$: Observable<any> = this.starterStateResponseSource.asObservable();
-  private deleteStarterStateSource: Subject<any> = new Subject<any>();
-  public deleteStarterState$: Observable<any> = this.deleteStarterStateSource.asObservable();
 
   constructor(
     protected dialog: MatDialog,
@@ -546,18 +540,6 @@ export class NodeService {
     this.doneRenderingComponentSource.next(nodeIdAndComponentId);
   }
 
-  broadcastComponentShowSubmitButtonValueChanged(args: any) {
-    this.componentShowSubmitButtonValueChangedSource.next(args);
-  }
-
-  deleteStarterState(args: any) {
-    this.deleteStarterStateSource.next(args);
-  }
-
-  respondStarterState(args: any) {
-    this.starterStateResponseSource.next(args);
-  }
-
   scrollToComponentAndHighlight(componentId: string): void {
     setTimeout(() => {
       const componentElement = $('#component_' + componentId);
diff --git a/src/assets/wise5/services/teacherNodeService.ts b/src/assets/wise5/services/teacherNodeService.ts
index ddaabb1474f..dac5c86d3df 100644
--- a/src/assets/wise5/services/teacherNodeService.ts
+++ b/src/assets/wise5/services/teacherNodeService.ts
@@ -1,5 +1,25 @@
 import { Injectable } from '@angular/core';
 import { NodeService } from './nodeService';
+import { Subject, Observable } from 'rxjs';
 
 @Injectable()
-export class TeacherNodeService extends NodeService {}
+export class TeacherNodeService extends NodeService {
+  private componentShowSubmitButtonValueChangedSource: Subject<any> = new Subject<any>();
+  public componentShowSubmitButtonValueChanged$: Observable<any> = this.componentShowSubmitButtonValueChangedSource.asObservable();
+  private deleteStarterStateSource: Subject<any> = new Subject<any>();
+  public deleteStarterState$: Observable<any> = this.deleteStarterStateSource.asObservable();
+  private starterStateResponseSource: Subject<any> = new Subject<any>();
+  public starterStateResponse$: Observable<any> = this.starterStateResponseSource.asObservable();
+
+  broadcastComponentShowSubmitButtonValueChanged(args: any): void {
+    this.componentShowSubmitButtonValueChangedSource.next(args);
+  }
+
+  deleteStarterState(args: any): void {
+    this.deleteStarterStateSource.next(args);
+  }
+
+  respondStarterState(args: any): void {
+    this.starterStateResponseSource.next(args);
+  }
+}
diff --git a/src/messages.xlf b/src/messages.xlf
index c19dd018668..e9b6f54c3a0 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -9589,7 +9589,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">83</context>
+          <context context-type="linenumber">84</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -9611,7 +9611,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">146</context>
+          <context context-type="linenumber">147</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
@@ -9626,7 +9626,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">147</context>
+          <context context-type="linenumber">148</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/vle.component.ts</context>
@@ -12613,7 +12613,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Grade by Step</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">90</context>
+          <context context-type="linenumber">91</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -12624,7 +12624,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Grade by Team</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">103</context>
+          <context context-type="linenumber">104</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -12635,7 +12635,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Manage Students</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">110</context>
+          <context context-type="linenumber">111</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -12646,7 +12646,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Student Notebooks</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">117</context>
+          <context context-type="linenumber">118</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -12657,7 +12657,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Data Export</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">124</context>
+          <context context-type="linenumber">125</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts</context>
@@ -12668,7 +12668,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Error: Data is not being saved! Check your internet connection.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroom-monitor.component.ts</context>
-          <context context-type="linenumber">189</context>
+          <context context-type="linenumber">190</context>
         </context-group>
       </trans-unit>
       <trans-unit id="694e14160d51abf2460c07f4d2592dac127e1f2f" datatype="html">
@@ -17367,7 +17367,7 @@ Category Name: <x id="PH_1" equiv-text="categoryName"/></source>
 <x id="PH" equiv-text="this.componentContent.stamps.Stamps[index]"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts</context>
-          <context context-type="linenumber">243</context>
+          <context context-type="linenumber">244</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3ee6d14ea15f70683272c9df8c3aff6457182928" datatype="html">

From ce5bda2bd86b1c2d02421684104c55de411e3a7e Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Tue, 10 Oct 2023 08:52:22 -0700
Subject: [PATCH 06/13] refactor(NodeService): Remove
 scrollToComponentAndHighlight() (#1459)

---
 src/app/services/wiseLinkService.ts      | 16 ++++++++++++++--
 src/assets/wise5/common/dom/dom.ts       |  2 +-
 src/assets/wise5/services/nodeService.ts | 24 ------------------------
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/app/services/wiseLinkService.ts b/src/app/services/wiseLinkService.ts
index b69dc397244..5316f5ca6b3 100644
--- a/src/app/services/wiseLinkService.ts
+++ b/src/app/services/wiseLinkService.ts
@@ -3,6 +3,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { replaceWiseLinks } from '../../assets/wise5/common/wise-link/wise-link';
 import { NodeService } from '../../assets/wise5/services/nodeService';
 import { StudentDataService } from '../../assets/wise5/services/studentDataService';
+import { scrollToElement, temporarilyHighlightElement } from '../../assets/wise5/common/dom/dom';
 
 @Injectable()
 export class WiseLinkService {
@@ -43,15 +44,26 @@ export class WiseLinkService {
 
   private followLink(nodeId: string, componentId: string): void {
     if (nodeId === this.studentDataService.getCurrentNodeId()) {
-      this.nodeService.scrollToComponentAndHighlight(componentId);
+      this.scrollToComponentAndHighlight(componentId);
     } else {
       this.goToNode(nodeId, componentId);
     }
   }
 
+  private scrollToComponentAndHighlight(componentId: string): void {
+    const elementId = `component_${componentId}`;
+    scrollToElement(elementId);
+    temporarilyHighlightElement(elementId);
+  }
+
   private goToNode(nodeId: string, componentId: string): void {
     if (componentId !== '') {
-      this.nodeService.registerScrollToComponent(componentId);
+      const subscription = this.studentDataService.currentNodeChanged$.subscribe(() => {
+        setTimeout(() => {
+          this.scrollToComponentAndHighlight(componentId);
+          subscription.unsubscribe();
+        }, 500); // timeout attempts to ensure that new node has loaded before scroll+highlight
+      });
     }
     this.nodeService.setCurrentNode(nodeId);
   }
diff --git a/src/assets/wise5/common/dom/dom.ts b/src/assets/wise5/common/dom/dom.ts
index e13e63d2895..557d56a07b6 100644
--- a/src/assets/wise5/common/dom/dom.ts
+++ b/src/assets/wise5/common/dom/dom.ts
@@ -32,7 +32,7 @@ export function temporarilyHighlightElement(id: string, duration: number = 1000)
   }, duration);
 }
 
-export function scrollToElement(elementId: string) {
+export function scrollToElement(elementId: string): void {
   $('#content').animate(
     {
       scrollTop: $(`#${elementId}`).prop('offsetTop')
diff --git a/src/assets/wise5/services/nodeService.ts b/src/assets/wise5/services/nodeService.ts
index d409dc86915..bb5acb9578e 100644
--- a/src/assets/wise5/services/nodeService.ts
+++ b/src/assets/wise5/services/nodeService.ts
@@ -539,28 +539,4 @@ export class NodeService {
   broadcastDoneRenderingComponent(nodeIdAndComponentId: any) {
     this.doneRenderingComponentSource.next(nodeIdAndComponentId);
   }
-
-  scrollToComponentAndHighlight(componentId: string): void {
-    setTimeout(() => {
-      const componentElement = $('#component_' + componentId);
-      const originalBackgroundColor = componentElement.css('backgroundColor');
-      componentElement.css('background-color', '#FFFF9C');
-      $('#content').animate({ scrollTop: componentElement.prop('offsetTop') }, 1000);
-      componentElement.css({
-        transition: 'background-color 3s ease-in-out',
-        'background-color': originalBackgroundColor
-      });
-      setTimeout(() => {
-        // ensures the highlight works for the second time linking to this same step
-        componentElement.css('transition', '');
-      }, 4000);
-    }, 500);
-  }
-
-  registerScrollToComponent(componentId: string): void {
-    const subscription = this.DataService.currentNodeChanged$.subscribe(() => {
-      this.scrollToComponentAndHighlight(componentId);
-      subscription.unsubscribe();
-    });
-  }
 }

From 16b4c9980dd1df8abb773e872b5fb75ccef87631 Mon Sep 17 00:00:00 2001
From: Geoffrey Kwan <geoffreykwan@gmail.com>
Date: Tue, 10 Oct 2023 17:58:42 -0400
Subject: [PATCH 07/13] fix(Manage Students): Fix UI not updating immediately
 sometimes (#1456)

---
 .../add-team-dialog.component.spec.ts         | 11 +++++---
 .../add-team-dialog.component.ts              | 15 ++++++-----
 ...hange-team-period-dialog.component.spec.ts |  3 ++-
 .../change-team-period-dialog.component.ts    | 25 +++++++++++--------
 .../manage-team/manage-team.component.ts      | 11 +++++---
 5 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.spec.ts
index 5499e482df5..6e8f892da5b 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.spec.ts
@@ -24,7 +24,9 @@ class ConfigServiceStub {
   getAllUsersInPeriod() {
     return [{ name: 'c' }, { name: 'b' }, { name: 'a' }];
   }
-  retrieveConfig() {}
+  retrieveConfig() {
+    return of({});
+  }
 }
 class TeacherDataServiceStub {
   getCurrentPeriodId() {
@@ -33,7 +35,9 @@ class TeacherDataServiceStub {
 }
 class WorkgroupServiceStub {
   isUserInAnyWorkgroup() {}
-  createWorkgroup() {}
+  createWorkgroup() {
+    return of(10);
+  }
 }
 let component: AddTeamDialogComponent;
 let fixture: ComponentFixture<AddTeamDialogComponent>;
@@ -126,8 +130,7 @@ function createTeam() {
     });
     it('should not ask for confirmation when initialMember is not in a workgroup', () => {
       spyOn(workgroupService, 'isUserInAnyWorkgroup').and.returnValue(false);
-      const createWorkgroupSpy = spyOn(workgroupService, 'createWorkgroup').and.returnValue(of(1));
-      spyOn(configService, 'retrieveConfig');
+      const createWorkgroupSpy = spyOn(workgroupService, 'createWorkgroup').and.returnValue(of(10));
       component.createTeam();
       expect(dialogSpy).not.toHaveBeenCalled();
       expect(createWorkgroupSpy).toHaveBeenCalled();
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts
index 2e2dcde6c7f..5c675522bcb 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts
@@ -76,12 +76,15 @@ export class AddTeamDialogComponent {
       )
       .subscribe({
         next: (newWorkgroupId: number) => {
-          this.configService.retrieveConfig(
-            `/api/config/classroomMonitor/${this.configService.getRunId()}`
-          );
-          this.snackBar.open($localize`New Team ${newWorkgroupId} has been created.`);
-          this.isProcessing = false;
-          this.dialog.closeAll();
+          this.configService
+            .retrieveConfig(`/api/config/classroomMonitor/${this.configService.getRunId()}`)
+            .subscribe({
+              next: () => {
+                this.snackBar.open($localize`New Team ${newWorkgroupId} has been created.`);
+                this.isProcessing = false;
+                this.dialog.closeAll();
+              }
+            });
         },
         error: () => {
           this.snackBar.open($localize`Error: Could not create team.`);
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.spec.ts
index ec7a0c69bbd..d81ed2cc6bf 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.spec.ts
@@ -8,6 +8,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ConfigService } from '../../../../services/configService';
 
 import { ChangeTeamPeriodDialogComponent } from './change-team-period-dialog.component';
+import { of } from 'rxjs';
 
 class ConfigServiceStub {
   getPeriods() {
@@ -20,7 +21,7 @@ class ConfigServiceStub {
     return 123;
   }
   retrieveConfig() {
-    return {};
+    return of({});
   }
 }
 
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.ts
index 49a411f19db..f2d1600b20a 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.ts
@@ -44,20 +44,23 @@ export class ChangeTeamPeriodDialogComponent {
         }/change-period`,
         this.selectedPeriod.periodId
       )
-      .subscribe(
-        (response) => {
+      .subscribe({
+        next: () => {
           this.isChangingPeriod = false;
-          this.configService.retrieveConfig(
-            `/api/config/classroomMonitor/${this.configService.getRunId()}`
-          );
-          this.snackBar.open(
-            $localize`Moved Team ${this.team.workgroupId} to Period ${this.selectedPeriod.periodName}.`
-          );
-          this.dialog.closeAll();
+          this.configService
+            .retrieveConfig(`/api/config/classroomMonitor/${this.configService.getRunId()}`)
+            .subscribe({
+              next: () => {
+                this.snackBar.open(
+                  $localize`Moved Team ${this.team.workgroupId} to Period ${this.selectedPeriod.periodName}.`
+                );
+                this.dialog.closeAll();
+              }
+            });
         },
-        (err) => {
+        error: () => {
           this.isChangingPeriod = false;
         }
-      );
+      });
   }
 }
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts
index 74230f4ecff..b0f34634f57 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts
@@ -100,10 +100,13 @@ export class ManageTeamComponent {
             previousIndex,
             event.currentIndex
           );
-          this.configService.retrieveConfig(
-            `/api/config/classroomMonitor/${this.configService.getRunId()}`
-          );
-          this.snackBar.open($localize`Moved student to Team ${workgroupId}.`);
+          this.configService
+            .retrieveConfig(`/api/config/classroomMonitor/${this.configService.getRunId()}`)
+            .subscribe({
+              next: () => {
+                this.snackBar.open($localize`Moved student to Team ${workgroupId}.`);
+              }
+            });
         },
         error: () => {
           this.snackBar.open($localize`Error: Could not move student.`);

From 896f62b2f21b9ba43ce81ea9e7dd0904b8c3dcf7 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Wed, 11 Oct 2023 10:12:30 -0700
Subject: [PATCH 08/13] refactor(TeacherDataService): Clean up pause period
 code (#1460)

---
 .../shared/top-bar/top-bar.component.ts       |  6 +-
 .../wise5/services/teacherDataService.ts      | 93 +++++++------------
 src/messages.xlf                              |  2 +-
 3 files changed, 33 insertions(+), 68 deletions(-)

diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
index 81bdae7bb2d..aac2bdda51d 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
@@ -91,12 +91,8 @@ export class TopBarComponent implements OnInit {
     );
   }
 
-  /**
-   * Check whether any period in the run is paused
-   * @return Boolean whether any of the periods are paused
-   */
   protected isAnyPeriodPaused(): boolean {
-    return this.dataService.isAnyPeriodPaused();
+    return this.dataService.getPeriods().some((period) => period.paused);
   }
 
   protected switchToAuthoringView(): void {
diff --git a/src/assets/wise5/services/teacherDataService.ts b/src/assets/wise5/services/teacherDataService.ts
index c7a5329b985..7cfde5ded4c 100644
--- a/src/assets/wise5/services/teacherDataService.ts
+++ b/src/assets/wise5/services/teacherDataService.ts
@@ -738,35 +738,8 @@ export class TeacherDataService extends DataService {
     );
   }
 
-  isAnyPeriodPaused() {
-    return this.getPeriods().some((period) => {
-      return period.paused;
-    });
-  }
-
-  isPeriodPaused(periodId: number): boolean {
-    if (periodId === -1) {
-      return this.isAllPeriodsPaused();
-    } else {
-      return this.getPeriodById(periodId).paused;
-    }
-  }
-
-  isAllPeriodsPaused() {
-    let numPausedPeriods = 0;
-    const periods = this.getPeriods();
-    for (const period of periods) {
-      if (period.paused) {
-        numPausedPeriods++;
-      }
-    }
-    return numPausedPeriods === periods.length;
-  }
-
-  getPeriodById(periodId: number): any {
-    return this.getPeriods().find((period) => {
-      return period.periodId === periodId;
-    });
+  private getPeriodById(periodId: number): any {
+    return this.getPeriods().find((period) => period.periodId === periodId);
   }
 
   /**
@@ -774,9 +747,9 @@ export class TeacherDataService extends DataService {
    * @param periodId the id of the period to toggle
    * @param isPaused Boolean whether the period should be paused or not
    */
-  pauseScreensChanged(periodId, isPaused) {
+  pauseScreensChanged(periodId: number, isPaused: boolean): void {
     this.updatePausedRunStatusValue(periodId, isPaused);
-    this.sendRunStatusThenHandlePauseScreen(periodId, isPaused);
+    this.saveRunStatusThenHandlePauseScreen(periodId, isPaused);
     const context = 'ClassroomMonitor',
       nodeId = null,
       componentId = null,
@@ -787,19 +760,17 @@ export class TeacherDataService extends DataService {
     this.saveEvent(context, nodeId, componentId, componentType, category, event, data);
   }
 
-  sendRunStatusThenHandlePauseScreen(periodId, isPaused) {
-    this.sendRunStatus()
-      .toPromise()
-      .then(() => {
-        if (isPaused) {
-          this.TeacherWebSocketService.pauseScreens(periodId);
-        } else {
-          this.TeacherWebSocketService.unPauseScreens(periodId);
-        }
-      });
+  private saveRunStatusThenHandlePauseScreen(periodId: number, isPaused: boolean): void {
+    this.saveRunStatus().subscribe(() => {
+      if (isPaused) {
+        this.TeacherWebSocketService.pauseScreens(periodId);
+      } else {
+        this.TeacherWebSocketService.unPauseScreens(periodId);
+      }
+    });
   }
 
-  sendRunStatus() {
+  private saveRunStatus(): Observable<void> {
     const url = this.ConfigService.getConfigParam('runStatusURL');
     const body = new HttpParams()
       .set('runId', this.ConfigService.getConfigParam('runId'))
@@ -807,46 +778,44 @@ export class TeacherDataService extends DataService {
     const options = {
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
     };
-    return this.http.post(url, body, options);
-  }
-
-  createRunStatus() {
-    const periods = this.ConfigService.getPeriods();
-    for (const period of periods) {
-      period.paused = false;
-    }
-    return {
-      runId: this.ConfigService.getConfigParam('runId'),
-      periods: periods
-    };
+    return this.http.post<void>(url, body, options);
   }
 
   /**
    * Update the paused value for a period in our run status
    * @param periodId the period id or -1 for all periods
-   * @param value whether the period is paused or not
+   * @param isPaused whether the period is paused or not
    */
-  updatePausedRunStatusValue(periodId, value) {
+  private updatePausedRunStatusValue(periodId: number, isPaused: boolean): void {
     if (this.runStatus == null) {
       this.runStatus = this.createRunStatus();
     }
     if (periodId === -1) {
-      this.updateAllPeriodsPausedValue(value);
+      this.updateAllPeriodsPausedValue(isPaused);
     } else {
-      this.updatePeriodPausedValue(periodId, value);
+      this.updatePeriodPausedValue(periodId, isPaused);
     }
   }
 
-  updateAllPeriodsPausedValue(value) {
+  private createRunStatus(): any {
+    const periods = this.ConfigService.getPeriods();
+    periods.forEach((period) => (period.paused = false));
+    return {
+      runId: this.ConfigService.getConfigParam('runId'),
+      periods: periods
+    };
+  }
+
+  private updateAllPeriodsPausedValue(isPaused: boolean): void {
     for (const period of this.runStatus.periods) {
-      period.paused = value;
+      period.paused = isPaused;
     }
   }
 
-  updatePeriodPausedValue(periodId, value) {
+  private updatePeriodPausedValue(periodId: number, isPaused: boolean): void {
     for (const period of this.runStatus.periods) {
       if (period.periodId === periodId) {
-        period.paused = value;
+        period.paused = isPaused;
       }
     }
   }
diff --git a/src/messages.xlf b/src/messages.xlf
index e9b6f54c3a0..a34858b3954 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -13909,7 +13909,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
 Are you sure you want to proceed?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts</context>
-          <context context-type="linenumber">105</context>
+          <context context-type="linenumber">101</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2533bf42152adabc1092cc52494ab0cc211c350a" datatype="html">

From aec29a46c3302d17c25cc0c2721c232d535ddd7b Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Wed, 11 Oct 2023 10:54:54 -0700
Subject: [PATCH 09/13] refactor(Annotation): Create Annotation class (#1461)

Also remove extra wrapper { annotation: annotation } that is sent around in observables
---
 .../component-new-work-badge.component.ts     |  7 +++---
 .../milestones/milestones.component.ts        |  3 ++-
 .../notebook-report.component.ts              |  3 ++-
 .../edit-component-annotations.component.ts   |  7 +++---
 .../milestone-grading-view.component.ts       |  3 ++-
 .../node-grading-view.component.ts            |  3 ++-
 .../student-grading.component.ts              |  3 ++-
 src/assets/wise5/common/Annotation.ts         | 15 +++++++++++
 .../components/component-student.component.ts |  5 ++--
 .../open-response-student.component.ts        |  7 +++---
 .../wise5/services/annotationService.ts       | 25 ++++++++++---------
 src/assets/wise5/services/notebookService.ts  |  5 ++--
 .../wise5/services/studentDataService.ts      |  2 +-
 .../wise5/services/studentWebSocketService.ts | 16 ++++++------
 .../wise5/services/teacherDataService.ts      |  9 ++++---
 .../wise5/services/teacherWebSocketService.ts | 12 ++++-----
 src/messages.xlf                              | 18 ++++++-------
 17 files changed, 83 insertions(+), 60 deletions(-)
 create mode 100644 src/assets/wise5/common/Annotation.ts

diff --git a/src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts b/src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts
index 9bd709ff3eb..a8ae55e937f 100644
--- a/src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts
+++ b/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();
         }
       }
diff --git a/src/app/classroom-monitor/milestones/milestones.component.ts b/src/app/classroom-monitor/milestones/milestones.component.ts
index 7b5ee233a76..30756cf89dd 100644
--- a/src/app/classroom-monitor/milestones/milestones.component.ts
+++ b/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) =>
diff --git a/src/app/notebook/notebook-report/notebook-report.component.ts b/src/app/notebook/notebook-report/notebook-report.component.ts
index e5b80a2159a..0b4c4804257 100644
--- a/src/app/notebook/notebook-report/notebook-report.component.ts
+++ b/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(
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-annotations/edit-component-annotations.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-annotations/edit-component-annotations.component.ts
index 69b2e63fe5a..f275ae3f6cd 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-annotations/edit-component-annotations.component.ts
+++ b/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();
         }
       }
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.ts
index dbbb70d6062..075bed3d065 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.ts
+++ b/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);
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.ts
index 0c936603aa2..053c484c6b0 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.ts
+++ b/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);
diff --git a/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts b/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts
index 5650a897e29..9941423e2f5 100644
--- a/src/assets/wise5/classroomMonitor/student-grading/student-grading.component.ts
+++ b/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]) {
diff --git a/src/assets/wise5/common/Annotation.ts b/src/assets/wise5/common/Annotation.ts
new file mode 100644
index 00000000000..0cd1deef480
--- /dev/null
+++ b/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;
+}
diff --git a/src/assets/wise5/components/component-student.component.ts b/src/assets/wise5/components/component-student.component.ts
index f37051214d7..d03569c1de5 100644
--- a/src/assets/wise5/components/component-student.component.ts
+++ b/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,
diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
index a9c47a7a849..8aeae31729f 100644
--- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts
+++ b/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];
   }
 
diff --git a/src/assets/wise5/services/annotationService.ts b/src/assets/wise5/services/annotationService.ts
index 5d91d965c6a..95a860ee0eb 100644
--- a/src/assets/wise5/services/annotationService.ts
+++ b/src/assets/wise5/services/annotationService.ts
@@ -7,15 +7,16 @@ 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,
@@ -23,7 +24,7 @@ export class AnnotationService {
     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);
   }
 }
diff --git a/src/assets/wise5/services/notebookService.ts b/src/assets/wise5/services/notebookService.ts
index 753a2f2bdb1..6b4d8dfad01 100644
--- a/src/assets/wise5/services/notebookService.ts
+++ b/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);
   }
 
diff --git a/src/assets/wise5/services/studentDataService.ts b/src/assets/wise5/services/studentDataService.ts
index f1a09143ff6..bdc6ff0711a 100644
--- a/src/assets/wise5/services/studentDataService.ts
+++ b/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;
         }
       }
diff --git a/src/assets/wise5/services/studentWebSocketService.ts b/src/assets/wise5/services/studentWebSocketService.ts
index 0a77b126089..6f10a45745c 100644
--- a/src/assets/wise5/services/studentWebSocketService.ts
+++ b/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);
     }
   }
 
diff --git a/src/assets/wise5/services/teacherDataService.ts b/src/assets/wise5/services/teacherDataService.ts
index 7cfde5ded4c..1466c1dacb8 100644
--- a/src/assets/wise5/services/teacherDataService.ts
+++ b/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) {
diff --git a/src/assets/wise5/services/teacherWebSocketService.ts b/src/assets/wise5/services/teacherWebSocketService.ts
index 8d8f1cdcc3a..33cd8eb9346 100644
--- a/src/assets/wise5/services/teacherWebSocketService.ts
+++ b/src/assets/wise5/services/teacherWebSocketService.ts
@@ -8,13 +8,14 @@ import { Observable, Subject } from 'rxjs';
 import { AchievementService } from './achievementService';
 import { RxStomp } from '@stomp/rx-stomp';
 import { Message } from '@stomp/stompjs';
+import { Annotation } from '../common/Annotation';
 
 @Injectable()
 export class TeacherWebSocketService {
   runId: number;
   rxStomp: RxStomp;
-  private newAnnotationReceivedSource: Subject<any> = new Subject<any>();
-  public newAnnotationReceived$: Observable<any> = this.newAnnotationReceivedSource.asObservable();
+  private newAnnotationReceivedSource: Subject<Annotation> = new Subject<Annotation>();
+  public newAnnotationReceived$: Observable<Annotation> = this.newAnnotationReceivedSource.asObservable();
   private newStudentWorkReceivedSource: Subject<any> = new Subject<any>();
   public newStudentWorkReceived$: Observable<any> = this.newStudentWorkReceivedSource.asObservable();
 
@@ -55,8 +56,7 @@ export class TeacherWebSocketService {
         const achievement = JSON.parse(body.content);
         this.AchievementService.broadcastNewStudentAchievement(achievement);
       } else if (body.type === 'annotation') {
-        const annotationData = JSON.parse(body.content);
-        this.broadcastNewAnnotationReceived({ annotation: annotationData });
+        this.broadcastNewAnnotationReceived(JSON.parse(body.content));
       }
     });
   }
@@ -65,8 +65,8 @@ export class TeacherWebSocketService {
     this.newStudentWorkReceivedSource.next(args);
   }
 
-  broadcastNewAnnotationReceived(args: any) {
-    this.newAnnotationReceivedSource.next(args);
+  broadcastNewAnnotationReceived(annotation: Annotation): void {
+    this.newAnnotationReceivedSource.next(annotation);
   }
 
   subscribeToTeacherWorkgroupTopic() {
diff --git a/src/messages.xlf b/src/messages.xlf
index a34858b3954..aecaf34fd34 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1714,7 +1714,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>New</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">9</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/classroom-monitor/step-info/step-info.component.html</context>
@@ -13605,7 +13605,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherDataService.ts</context>
-          <context context-type="linenumber">635</context>
+          <context context-type="linenumber">636</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6933068701447776492" datatype="html">
@@ -20852,7 +20852,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Notebook</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">17</context>
+          <context context-type="linenumber">18</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>
@@ -20863,7 +20863,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>note</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">30</context>
+          <context context-type="linenumber">31</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>
@@ -20878,7 +20878,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>notes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">31</context>
+          <context context-type="linenumber">32</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>
@@ -20893,14 +20893,14 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Manage Notes</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">32</context>
+          <context context-type="linenumber">33</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1444501656744347415" datatype="html">
         <source>report</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">42</context>
+          <context context-type="linenumber">43</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>
@@ -20911,7 +20911,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>reports</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">43</context>
+          <context context-type="linenumber">44</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>
@@ -20922,7 +20922,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Report</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/notebookService.ts</context>
-          <context context-type="linenumber">44</context>
+          <context context-type="linenumber">45</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherProjectService.ts</context>

From 360ecd49c5583b16b61d5bb4c45aec5e1cd6ad62 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Wed, 11 Oct 2023 13:10:14 -0700
Subject: [PATCH 10/13] refactor(StudentRunListComponent): Remove duplication
 (#1463)

---
 src/app/domain/run.spec.ts                    | 30 ++++++++++---
 src/app/domain/run.ts                         |  4 ++
 .../student-run-list.component.html           | 10 ++---
 .../student-run-list.component.ts             | 45 +++----------------
 .../teacher-run-list.component.spec.ts        |  9 ----
 .../teacher-run-list.component.ts             |  3 +-
 6 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/src/app/domain/run.spec.ts b/src/app/domain/run.spec.ts
index c42d3761082..7e957cafc54 100644
--- a/src/app/domain/run.spec.ts
+++ b/src/app/domain/run.spec.ts
@@ -1,14 +1,13 @@
-import { waitForAsync } from '@angular/core/testing';
-import { Run } from './run';
+import { Run, sortByRunStartTimeDesc } from './run';
 
 describe('Run', () => {
   const run = new Run({
-    startTime: new Date('2019-03-21T08:00:00.0').getTime()
+    startTime: new Date('2019-03-21').getTime()
   });
-  const beforeStartTime = new Date('2019-03-20T08:00:00.0').getTime();
-  const betweenStartAndEndTimes = new Date('2019-03-22T08:00:00.0').getTime();
-  const endTime = new Date('2019-03-23T08:00:00.0').getTime();
-  const afterEndTime = new Date('2019-03-24T08:00:00.0').getTime();
+  const beforeStartTime = new Date('2019-03-20').getTime();
+  const betweenStartAndEndTimes = new Date('2019-03-22').getTime();
+  const endTime = new Date('2019-03-23').getTime();
+  const afterEndTime = new Date('2019-03-24').getTime();
 
   function expectRun(func, timeNow, expectedValue) {
     expect(run[func](timeNow)).toEqual(expectedValue);
@@ -35,4 +34,21 @@ describe('Run', () => {
     expectRun('isScheduled', beforeStartTime, true);
     expectRun('isScheduled', betweenStartAndEndTimes, false);
   });
+
+  describe('sortByStartTimeDesc()', () => {
+    let runList: Run[];
+    const run2 = new Run({
+      startTime: endTime
+    });
+    const run3 = new Run({
+      startTime: afterEndTime
+    });
+    beforeEach(() => {
+      runList = [run2, run3, run];
+      runList.sort(sortByRunStartTimeDesc);
+    });
+    it('sorts runs by start date', async () => {
+      expect(runList).toEqual([run3, run2, run]);
+    });
+  });
 });
diff --git a/src/app/domain/run.ts b/src/app/domain/run.ts
index b521aefa2ba..51960909f40 100644
--- a/src/app/domain/run.ts
+++ b/src/app/domain/run.ts
@@ -93,3 +93,7 @@ export class Run {
     return this.endTime != null;
   }
 }
+
+export function sortByRunStartTimeDesc(a: Run, b: Run): number {
+  return b.startTime - a.startTime;
+}
diff --git a/src/app/student/student-run-list/student-run-list.component.html b/src/app/student/student-run-list/student-run-list.component.html
index 687f38588fd..16ce2b5d41f 100644
--- a/src/app/student/student-run-list/student-run-list.component.html
+++ b/src/app/student/student-run-list/student-run-list.component.html
@@ -26,11 +26,11 @@
         <ng-container *ngIf="search" i18n>Units found: {{ filteredRuns.length }}</ng-container>
         <ng-container *ngIf="!search" i18n>My WISE units: {{ filteredRuns.length }}</ng-container>
         <span class="mat-caption" *ngIf="filteredRuns.length">
-          (<ng-container *ngIf="scheduledTotal()"
-            ><span i18n>{{ scheduledTotal() }} scheduled</span>,
+          (<ng-container *ngIf="getRunTotal('isScheduled')"
+            ><span i18n>{{ getRunTotal('isScheduled') }} scheduled</span>,
           </ng-container>
           <ng-container
-            ><span i18n>{{ activeTotal() }} active</span></ng-container
+            ><span i18n>{{ getRunTotal('isActive') }} active</span></ng-container
           >)
         </span>
         <ng-container *ngIf="search">
@@ -49,9 +49,9 @@
           id="run{{ run.id }}"
         >
           <app-timeline-item-label>
-            <strong>{{ run.startTime | date : 'mediumDate' }}</strong>
+            <strong>{{ run.startTime | date: 'mediumDate' }}</strong>
             <ng-container *ngIf="run.endTime && runSpansDays(run)">
-              - <strong>{{ run.endTime | date : 'mediumDate' }}</strong>
+              - <strong>{{ run.endTime | date: 'mediumDate' }}</strong>
             </ng-container>
           </app-timeline-item-label>
           <app-timeline-item-content>
diff --git a/src/app/student/student-run-list/student-run-list.component.ts b/src/app/student/student-run-list/student-run-list.component.ts
index 421db1a3062..98426fce447 100644
--- a/src/app/student/student-run-list/student-run-list.component.ts
+++ b/src/app/student/student-run-list/student-run-list.component.ts
@@ -6,6 +6,7 @@ import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { AddProjectDialogComponent } from '../add-project-dialog/add-project-dialog.component';
 import { runSpansDays } from '../../../assets/wise5/common/datetime/datetime';
+import { sortByRunStartTimeDesc } from '../../domain/run';
 
 @Component({
   selector: 'app-student-run-list',
@@ -61,16 +62,8 @@ export class StudentRunListComponent implements OnInit {
     });
   }
 
-  sortByStartTimeDesc(a, b) {
-    let aStartTime = a.startTime;
-    let bStartTime = b.startTime;
-    if (aStartTime < bStartTime) {
-      return 1;
-    } else if (aStartTime > bStartTime) {
-      return -1;
-    } else {
-      return 0;
-    }
+  protected sortByStartTimeDesc(a: StudentRun, b: StudentRun): number {
+    return sortByRunStartTimeDesc(a, b);
   }
 
   getRunIndex(run: StudentRun) {
@@ -86,37 +79,9 @@ export class StudentRunListComponent implements OnInit {
     return runSpansDays(run, this.localeID);
   }
 
-  activeTotal(): number {
-    let total = 0;
+  protected getRunTotal(type: 'isActive' | 'isScheduled'): number {
     const now = this.configService.getCurrentServerTime();
-    for (let run of this.filteredRuns) {
-      if (run.isActive(now)) {
-        total++;
-      }
-    }
-    return total;
-  }
-
-  completedTotal(): number {
-    let total = 0;
-    const now = this.configService.getCurrentServerTime();
-    for (let run of this.filteredRuns) {
-      if (run.isCompleted(now)) {
-        total++;
-      }
-    }
-    return total;
-  }
-
-  scheduledTotal(): number {
-    let total = 0;
-    const now = this.configService.getCurrentServerTime();
-    for (let run of this.filteredRuns) {
-      if (run.isScheduled(now)) {
-        total++;
-      }
-    }
-    return total;
+    return this.filteredRuns.filter((run) => run[type](now)).length;
   }
 
   searchUpdated(value: string) {
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts b/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
index c5a8dd0e23a..1a6b6fb7927 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.spec.ts
@@ -132,19 +132,10 @@ describe('TeacherRunListComponent', () => {
   runSelectedStatusChanged();
   selectAllRunsCheckboxClicked();
   selectRunsOptionChosen();
-  sortByStartTimeDesc();
   unarchiveSelectedRuns();
   noRuns();
 });
 
-function sortByStartTimeDesc() {
-  describe('sortByStartTimeDesc()', () => {
-    it('should sort runs by start date', async () => {
-      await expectRunTitles([run3Title, run2Title, run1Title]);
-    });
-  });
-}
-
 function archiveSelectedRuns(): void {
   describe('archiveSelectedRuns()', () => {
     it('should archive selected runs', async () => {
diff --git a/src/app/teacher/teacher-run-list/teacher-run-list.component.ts b/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
index 184a83936d6..8f6288a4826 100644
--- a/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
+++ b/src/app/teacher/teacher-run-list/teacher-run-list.component.ts
@@ -9,6 +9,7 @@ import { mergeMap } from 'rxjs/operators';
 import { ArchiveProjectService } from '../../services/archive-project.service';
 import { runSpansDays } from '../../../assets/wise5/common/datetime/datetime';
 import { SelectRunsOption } from '../select-runs-controls/select-runs-option';
+import { sortByRunStartTimeDesc } from '../../domain/run';
 
 @Component({
   selector: 'app-teacher-run-list',
@@ -112,7 +113,7 @@ export class TeacherRunListComponent implements OnInit {
   }
 
   protected sortByStartTimeDesc(a: TeacherRun, b: TeacherRun): number {
-    return b.startTime - a.startTime;
+    return sortByRunStartTimeDesc(a, b);
   }
 
   protected runSpansDays(run: TeacherRun): boolean {

From 8ac83f496b4b1fe59b926a25546aba21a3290530 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Wed, 11 Oct 2023 16:47:05 -0700
Subject: [PATCH 11/13] refactor(ProjectLibraryService): getLibraryProjects()
 returns Observable (#1443)

---
 .../choose-import-unit.component.ts           | 16 ++--
 .../services/projectLibraryService.spec.ts    | 81 +++++--------------
 .../choose-import-component.component.ts      | 18 +++--
 .../wise5/services/projectLibraryService.ts   | 19 ++---
 src/messages.xlf                              |  2 +-
 5 files changed, 53 insertions(+), 83 deletions(-)

diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
index 5f4caff14c6..93d071741f6 100644
--- a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
+++ b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-unit',
@@ -11,6 +12,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class ChooseImportUnitComponent {
   protected libraryProjects: any[];
   protected myProjects: any[];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
@@ -21,11 +23,15 @@ export class ChooseImportUnitComponent {
 
   ngOnInit(): void {
     this.myProjects = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjects = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
-    });
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjects = libraryProjects;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   protected chooseProject(project: any): void {
diff --git a/src/app/services/projectLibraryService.spec.ts b/src/app/services/projectLibraryService.spec.ts
index ef21f6ea39f..3e379634480 100644
--- a/src/app/services/projectLibraryService.spec.ts
+++ b/src/app/services/projectLibraryService.spec.ts
@@ -6,21 +6,6 @@ import { ProjectLibraryService } from '../../assets/wise5/services/projectLibrar
 let configService: ConfigService;
 let http: HttpTestingController;
 let service: ProjectLibraryService;
-const getLibraryProjectsURL = '/api/project/library';
-const libraryProjects = [
-  {
-    children: [
-      { id: 3, name: 'three' },
-      { id: 1, name: 'one' }
-    ]
-  },
-  {
-    children: [
-      { id: 2, name: 'two' },
-      { id: 1, name: 'one' }
-    ]
-  }
-];
 
 describe('ProjectLibraryService', () => {
   beforeEach(() => {
@@ -33,56 +18,32 @@ describe('ProjectLibraryService', () => {
     configService = TestBed.inject(ConfigService);
   });
   getLibraryProjects();
-  sortAndFilterUniqueProjects();
-  filterUniqueProjects();
 });
 
 function getLibraryProjects() {
-  describe('getLibraryProjects', () => {
-    it('should get the library projects', () => {
-      spyOnLibraryProjectsURLFromConfig();
-      const result = service.getLibraryProjects();
-      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
-      result.then((projects) => {
-        expect(projects).toEqual(libraryProjects);
+  describe('getLibraryProjects()', () => {
+    const getLibraryProjectsURL = '/api/project/library';
+    const unit1 = { id: 1, name: 'one' };
+    const unit2 = { id: 2, name: 'two' };
+    const unit3 = { id: 3, name: 'three' };
+    const libraryProjects = [
+      {
+        children: [unit3, unit1]
+      },
+      {
+        children: [unit2, unit1]
+      }
+    ];
+    beforeEach(() => {
+      spyOn(configService, 'getConfigParam').and.callFake(() => {
+        return getLibraryProjectsURL;
       });
     });
-  });
-}
-
-function spyOnLibraryProjectsURLFromConfig() {
-  spyOn(configService, 'getConfigParam').and.callFake((param) => {
-    return getLibraryProjectsURL;
-  });
-}
-
-function sortAndFilterUniqueProjects() {
-  describe('sortAndFilterUniqueProjects', () => {
-    it('should filter and sort unique projects', () => {
-      const result = service.sortAndFilterUniqueProjects(libraryProjects);
-      expect(result).toEqual([
-        { id: 3, name: 'three' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ]);
-    });
-  });
-}
-
-function filterUniqueProjects() {
-  describe('filterUniqueProjects', () => {
-    it('should filter unique projects based on id', () => {
-      const nonUniqueProjects = [
-        { id: 3, name: 'three' },
-        { id: 1, name: 'one' },
-        { id: 2, name: 'two' },
-        { id: 1, name: 'one' }
-      ];
-      const uniqueProjects = service.filterUniqueProjects(nonUniqueProjects);
-      expect(uniqueProjects.length).toEqual(3);
-      expect(uniqueProjects[0].id).toEqual(3);
-      expect(uniqueProjects[1].id).toEqual(1);
-      expect(uniqueProjects[2].id).toEqual(2);
+    it('gets the library projects, sorted and filtered', () => {
+      service.getLibraryProjects().subscribe((projects) => {
+        expect(projects).toEqual([unit3, unit2, unit1]);
+      });
+      http.expectOne(getLibraryProjectsURL).flush(libraryProjects);
     });
   });
 }
diff --git a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
index 009ebcda42b..619c01e3243 100644
--- a/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
+++ b/src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts
@@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core';
 import { ImportComponentService } from '../../../services/importComponentService';
 import { ProjectAssetService } from '../../../../../app/services/projectAssetService';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-component',
@@ -21,6 +22,7 @@ export class ChooseImportComponentComponent implements OnInit {
   protected libraryProjectsList: any = [];
   protected myProjectsList: any = [];
   nodesInOrder: any[] = [];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private configService: ConfigService,
@@ -33,18 +35,22 @@ export class ChooseImportComponentComponent implements OnInit {
     private router: Router
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.importProjectItems = [];
     this.importMyProjectId = null;
     this.importLibraryProjectId = null;
     this.importProjectId = null;
     this.importProject = null;
     this.myProjectsList = this.configService.getAuthorableProjects();
-    this.projectLibraryService.getLibraryProjects().then((libraryProjects) => {
-      this.libraryProjectsList = this.projectLibraryService.sortAndFilterUniqueProjects(
-        libraryProjects
-      );
-    });
+    this.subscriptions.add(
+      this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
+        this.libraryProjectsList = libraryProjects;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
   showMyImportProject(importProjectId: number): void {
diff --git a/src/assets/wise5/services/projectLibraryService.ts b/src/assets/wise5/services/projectLibraryService.ts
index e42330b3faa..74e62c3e95a 100644
--- a/src/assets/wise5/services/projectLibraryService.ts
+++ b/src/assets/wise5/services/projectLibraryService.ts
@@ -1,22 +1,19 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { unique } from 'jquery';
 import { ConfigService } from './configService';
+import { Observable, map } from 'rxjs';
 
 @Injectable()
 export class ProjectLibraryService {
-  constructor(protected http: HttpClient, protected ConfigService: ConfigService) {}
+  constructor(protected configService: ConfigService, protected http: HttpClient) {}
 
-  getLibraryProjects() {
+  getLibraryProjects(): Observable<any[]> {
     return this.http
-      .get(this.ConfigService.getConfigParam('getLibraryProjectsURL'))
-      .toPromise()
-      .then((projects) => {
-        return projects;
-      });
+      .get<any[]>(this.configService.getConfigParam('getLibraryProjectsURL'))
+      .pipe(map((projects) => this.sortAndFilterUniqueProjects(projects)));
   }
 
-  sortAndFilterUniqueProjects(projects: any) {
+  private sortAndFilterUniqueProjects(projects: any): any[] {
     const flatProjectList = projects
       .map((grade) => {
         return grade.children;
@@ -25,7 +22,7 @@ export class ProjectLibraryService {
     return this.filterUniqueProjects(flatProjectList).sort(this.sortByProjectIdDescending);
   }
 
-  filterUniqueProjects(projects: any[]): any[] {
+  private filterUniqueProjects(projects: any[]): any[] {
     const uniqueProjects = [];
     const foundProjects = new Map();
     for (const project of projects) {
@@ -37,7 +34,7 @@ export class ProjectLibraryService {
     return uniqueProjects;
   }
 
-  sortByProjectIdDescending(project1: any, project2: any) {
+  private sortByProjectIdDescending(project1: any, project2: any): number {
     return project2.id - project1.id;
   }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
index aecaf34fd34..e1509d04708 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -10377,7 +10377,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Please select a component to import.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component.ts</context>
-          <context context-type="linenumber">75</context>
+          <context context-type="linenumber">81</context>
         </context-group>
       </trans-unit>
       <trans-unit id="22f5f4e7d0b3708e7ffceeea8b93b27e8f09ed7b" datatype="html">

From 8addd6b3f98c3c2e64a052b260842bced4d73695 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Thu, 12 Oct 2023 08:58:17 -0700
Subject: [PATCH 12/13] refactor(TeacherDataService): retrieveRunStatus()
 returns Observable (#1464)

---
 .../wise5/services/teacherDataService.ts      | 70 +++++--------------
 src/messages.xlf                              | 31 ++++----
 2 files changed, 33 insertions(+), 68 deletions(-)

diff --git a/src/assets/wise5/services/teacherDataService.ts b/src/assets/wise5/services/teacherDataService.ts
index 1466c1dacb8..2355a432961 100644
--- a/src/assets/wise5/services/teacherDataService.ts
+++ b/src/assets/wise5/services/teacherDataService.ts
@@ -232,23 +232,6 @@ export class TeacherDataService extends DataService {
     return this.retrieveStudentData(params);
   }
 
-  retrieveLatestStudentDataByNodeIdAndComponentIdAndPeriodId(nodeId, componentId, periodId) {
-    let params = new HttpParams()
-      .set('runId', this.ConfigService.getRunId())
-      .set('nodeId', nodeId)
-      .set('componentId', componentId)
-      .set('getStudentWork', 'true')
-      .set('getEvents', 'false')
-      .set('getAnnotations', 'false')
-      .set('onlyGetLatest', 'true');
-    if (periodId != null) {
-      params = params.set('periodId', periodId);
-    }
-    return this.retrieveStudentData(params).subscribe((result) => {
-      return result.studentWorkList;
-    });
-  }
-
   retrieveStudentData(params): Observable<any> {
     const url = this.ConfigService.getConfigParam('teacherDataURL');
     const options = {
@@ -440,20 +423,17 @@ export class TeacherDataService extends DataService {
     return -1;
   }
 
-  retrieveRunStatus() {
-    const url = this.ConfigService.getConfigParam('runStatusURL');
-    const params = new HttpParams().set('runId', this.ConfigService.getConfigParam('runId'));
+  retrieveRunStatus(): Observable<any> {
     const options = {
-      params: params,
+      params: new HttpParams().set('runId', this.ConfigService.getConfigParam('runId')),
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
     };
-    return this.http
-      .get(url, options)
-      .toPromise()
-      .then((data: any) => {
-        this.runStatus = data;
+    return this.http.get(this.ConfigService.getConfigParam('runStatusURL'), options).pipe(
+      tap((runStatus: any) => {
+        this.runStatus = runStatus;
         this.initializePeriods();
-      });
+      })
+    );
   }
 
   getComponentStatesByWorkgroupId(workgroupId) {
@@ -616,12 +596,12 @@ export class TeacherDataService extends DataService {
     }
   }
 
-  initializePeriods() {
+  private initializePeriods(): void {
     const periods = [...this.ConfigService.getPeriods()];
     if (this.currentPeriod == null) {
       this.setCurrentPeriod(periods[0]);
     }
-    this.addAllPeriods(periods);
+    periods.unshift({ periodId: -1, periodName: $localize`All Periods` });
     let mergedPeriods = periods;
     if (this.runStatus.periods != null) {
       mergedPeriods = this.mergeConfigAndRunStatusPeriods(periods, this.runStatus.periods);
@@ -630,35 +610,17 @@ export class TeacherDataService extends DataService {
     this.runStatus.periods = mergedPeriods;
   }
 
-  addAllPeriods(periods: any[]): void {
-    periods.unshift({
-      periodId: -1,
-      periodName: $localize`All Periods`
-    });
-  }
-
-  mergeConfigAndRunStatusPeriods(configPeriods, runStatusPeriods) {
+  private mergeConfigAndRunStatusPeriods(configPeriods: any[], runStatusPeriods: any[]): any[] {
     const mergedPeriods = [];
-    for (const configPeriod of configPeriods) {
-      const runStatusPeriod = this.getRunStatusPeriodById(runStatusPeriods, configPeriod.periodId);
-      if (runStatusPeriod == null) {
-        mergedPeriods.push(configPeriod);
-      } else {
-        mergedPeriods.push(runStatusPeriod);
-      }
-    }
+    configPeriods.forEach((configPeriod) => {
+      const runStatusPeriod = runStatusPeriods.find(
+        (runStatusPeriod) => runStatusPeriod.periodId === configPeriod.periodId
+      );
+      mergedPeriods.push(runStatusPeriod != null ? runStatusPeriod : configPeriod);
+    });
     return mergedPeriods;
   }
 
-  getRunStatusPeriodById(runStatusPeriods, periodId) {
-    for (const runStatusPeriod of runStatusPeriods) {
-      if (runStatusPeriod.periodId == periodId) {
-        return runStatusPeriod;
-      }
-    }
-    return null;
-  }
-
   setCurrentPeriod(period) {
     const previousPeriod = this.currentPeriod;
     this.currentPeriod = period;
diff --git a/src/messages.xlf b/src/messages.xlf
index e1509d04708..e486798e965 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -7568,19 +7568,15 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="c6a2c19b6bd10c35aca82f19ffebdc75a2fc164c" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{ scheduledTotal() }}"/> scheduled</source>
+      <trans-unit id="5a83883d5ab9830c841b4773eef887ac24e9cc7a" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{ getRunTotal(&apos;isScheduled&apos;) }}"/> scheduled</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/student/student-run-list/student-run-list.component.html</context>
           <context context-type="linenumber">30</context>
         </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
-          <context context-type="linenumber">46</context>
-        </context-group>
       </trans-unit>
-      <trans-unit id="db39827bab98f8af5e0a97d4614a0d667e98fcb6" datatype="html">
-        <source><x id="INTERPOLATION" equiv-text="{{ activeTotal() }}"/> active</source>
+      <trans-unit id="81603b1750f2555f39786b321c2a2e5eb810fdbd" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{ getRunTotal(&apos;isActive&apos;) }}"/> active</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/student/student-run-list/student-run-list.component.html</context>
           <context context-type="linenumber">33</context>
@@ -8949,6 +8945,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">43</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="c6a2c19b6bd10c35aca82f19ffebdc75a2fc164c" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{ scheduledTotal() }}"/> scheduled</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/teacher/teacher-run-list/teacher-run-list.component.html</context>
+          <context context-type="linenumber">46</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="1e5e23363e949f7dcbaf034bdb141a561132a10e" datatype="html">
         <source>Clear filters</source>
         <context-group purpose="location">
@@ -12784,14 +12787,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>New Team <x id="PH" equiv-text="newWorkgroupId"/> has been created.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">83</context>
         </context-group>
       </trans-unit>
       <trans-unit id="545651489407570329" datatype="html">
         <source>Error: Could not create team.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/add-team-dialog/add-team-dialog.component.ts</context>
-          <context context-type="linenumber">87</context>
+          <context context-type="linenumber">90</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6babfd035bd01c83b35e9440bd51b8b3b45e15d6" datatype="html">
@@ -12906,7 +12909,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Moved Team <x id="PH" equiv-text="this.team.workgroupId"/> to Period <x id="PH_1" equiv-text="this.selectedPeriod.periodName"/>.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/change-team-period-dialog/change-team-period-dialog.component.ts</context>
-          <context context-type="linenumber">54</context>
+          <context context-type="linenumber">55</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f67c125d12ba3ed0ae20a680c77d342d3a72a0fe" datatype="html">
@@ -12994,14 +12997,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Moved student to Team <x id="PH" equiv-text="workgroupId"/>.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">107</context>
         </context-group>
       </trans-unit>
       <trans-unit id="784919496056996013" datatype="html">
         <source>Error: Could not move student.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-team/manage-team.component.ts</context>
-          <context context-type="linenumber">109</context>
+          <context context-type="linenumber">112</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9b83b532c3f74e3d6e25a6ba749eef54324bea48" datatype="html">
@@ -13605,7 +13608,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/services/teacherDataService.ts</context>
-          <context context-type="linenumber">636</context>
+          <context context-type="linenumber">604</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6933068701447776492" datatype="html">

From 2ff3f69aafc6f776ef2d4b891742ffa4cffa237f Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Thu, 12 Oct 2023 14:41:52 -0700
Subject: [PATCH 13/13] feat(Import Step): Move to Create New Step Menu (#1445)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
---
 ...choose-import-step-location.component.html |  2 +-
 .../choose-import-step-location.component.ts  |  4 +-
 .../choose-import-step.component.html         |  2 +-
 .../choose-import-unit.component.html         |  4 +-
 src/app/teacher/authoring-routing.module.ts   | 34 ++++-----
 .../authoringTool/addNode/NewNodeTemplate.ts  |  1 -
 .../choose-new-node-template.component.html   |  2 +-
 .../choose-new-node-template.component.ts     |  8 +-
 .../project-authoring.component.html          | 19 +----
 .../project-authoring.component.ts            |  8 +-
 src/messages.xlf                              | 73 +++++++------------
 11 files changed, 64 insertions(+), 93 deletions(-)

diff --git a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html
index 3019caf4155..f09f9ae423c 100644
--- a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html
+++ b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.html
@@ -40,6 +40,6 @@ <h5 i18n>Choose a location for the imported steps.</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutAlign="end center">
-    <button mat-button color="primary" routerLink="../.." aria-label="Cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>
 </div>
diff --git a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts
index 480b37882dd..7b413eddd1b 100644
--- a/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts
+++ b/src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts
@@ -39,14 +39,14 @@ export class ChooseImportStepLocationComponent {
           this.projectService.refreshProject();
           if (nodesWithNewNodeIds.length === 1) {
             const newNode = nodesWithNewNodeIds[0];
-            this.router.navigate(['../../node', newNode.id], {
+            this.router.navigate(['../../../node', newNode.id], {
               relativeTo: this.route,
               state: {
                 newComponents: newNode.components
               }
             });
           } else {
-            this.router.navigate(['../..'], { relativeTo: this.route });
+            this.router.navigate(['../../..'], { relativeTo: this.route });
           }
         });
       });
diff --git a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
index dab2916a288..1dcf5932e25 100644
--- a/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
+++ b/src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html
@@ -55,7 +55,7 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       Back
     </button>
     <span fxFlex></span>
-    <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
     <button
       mat-raised-button
       color="primary"
diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
index cddf0d79a88..afbbb6fb334 100644
--- a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
+++ b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html
@@ -25,6 +25,8 @@ <h5 i18n>Choose a unit from which to import step(s).</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
-    <button mat-button color="primary" routerLink="../.." aria-label="cancel" i18n>Cancel</button>
+    <button mat-button color="primary" routerLink="../../choose-template" i18n>Back</button>
+    <span fxFlex></span>
+    <button mat-button color="primary" routerLink="../../.." i18n>Cancel</button>
   </div>
 </div>
diff --git a/src/app/teacher/authoring-routing.module.ts b/src/app/teacher/authoring-routing.module.ts
index 860caaca2f2..e8d84dfec90 100644
--- a/src/app/teacher/authoring-routing.module.ts
+++ b/src/app/teacher/authoring-routing.module.ts
@@ -91,6 +91,23 @@ const routes: Routes = [
                 path: 'choose-location',
                 component: ChooseNewNodeLocation
               },
+              {
+                path: 'import-step',
+                children: [
+                  {
+                    path: 'choose-location',
+                    component: ChooseImportStepLocationComponent
+                  },
+                  {
+                    path: 'choose-step',
+                    component: ChooseImportStepComponent
+                  },
+                  {
+                    path: 'choose-unit',
+                    component: ChooseImportUnitComponent
+                  }
+                ]
+              },
               {
                 path: 'simulation',
                 children: [{ path: 'choose-item', component: ChooseSimulationComponent }]
@@ -104,23 +121,6 @@ const routes: Routes = [
           },
           { path: 'choose-copy-location', component: ChooseCopyNodeLocationComponent },
           { path: 'choose-move-location', component: ChooseMoveNodeLocationComponent },
-          {
-            path: 'import-step',
-            children: [
-              {
-                path: 'choose-location',
-                component: ChooseImportStepLocationComponent
-              },
-              {
-                path: 'choose-step',
-                component: ChooseImportStepComponent
-              },
-              {
-                path: 'choose-unit',
-                component: ChooseImportUnitComponent
-              }
-            ]
-          },
           { path: 'info', component: ProjectInfoAuthoringComponent },
           { path: 'milestones', component: MilestonesAuthoringComponent },
           {
diff --git a/src/assets/wise5/authoringTool/addNode/NewNodeTemplate.ts b/src/assets/wise5/authoringTool/addNode/NewNodeTemplate.ts
index 1436835ecf2..a334a6d9dd0 100644
--- a/src/assets/wise5/authoringTool/addNode/NewNodeTemplate.ts
+++ b/src/assets/wise5/authoringTool/addNode/NewNodeTemplate.ts
@@ -1,6 +1,5 @@
 export interface NewNodeTemplate {
   label: string;
-  description: string;
   icon: string;
   route: string;
 }
diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html b/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html
index 3a12f6ec83a..03577ef8500 100644
--- a/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html
+++ b/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html
@@ -1,4 +1,4 @@
-<h5 i18n>Start from scratch or choose a step template:</h5>
+<h5 i18n>Start from scratch, import from another unit, or choose a step template:</h5>
 <div fxLayout="row wrap" fxLayout.xs="column">
   <div
     class="template"
diff --git a/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts b/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts
index c7e60c1f30a..79b4aae3a15 100644
--- a/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts
+++ b/src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts
@@ -11,19 +11,21 @@ export class ChooseNewNodeTemplate {
   protected templates: NewNodeTemplate[] = [
     {
       label: $localize`Create Your Own`,
-      description: $localize`Create Your Own Description`,
       icon: 'mode_edit',
       route: 'add-your-own'
     },
+    {
+      label: $localize`Import From Another Unit`,
+      icon: 'system_update_alt',
+      route: 'import-step/choose-unit'
+    },
     {
       label: $localize`Automated Assessment`,
-      description: $localize`Automated Assessment Description`,
       icon: 'fact_check',
       route: 'automated-assessment/choose-item'
     },
     {
       label: $localize`Interactive Simulation`,
-      description: $localize`Add an existing interactive simulation`,
       icon: 'video_settings',
       route: 'simulation/choose-item'
     }
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
index 1622181667d..de15efaf2fc 100644
--- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
+++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html
@@ -13,9 +13,9 @@
     <button
       mat-raised-button
       color="primary"
-      (click)="createNewLesson()"
+      (click)="addNewLesson()"
       [disabled]="stepNodeSelected || groupNodeSelected"
-      matTooltip="Create New Lesson"
+      matTooltip="Add New Lesson"
       matTooltipPosition="above"
       i18n-matTooltip
     >
@@ -24,9 +24,9 @@
     <button
       mat-raised-button
       color="primary"
-      (click)="createNewStep()"
+      (click)="addNewStep()"
       [disabled]="stepNodeSelected || groupNodeSelected"
-      matTooltip="Create New Step"
+      matTooltip="Add New Step"
       matTooltipPosition="above"
       i18n-matTooltip
     >
@@ -43,17 +43,6 @@
     >
       <mat-icon>widgets</mat-icon>
     </button>
-    <button
-      mat-raised-button
-      color="primary"
-      (click)="importStep()"
-      [disabled]="stepNodeSelected || groupNodeSelected"
-      matTooltip="Import Step"
-      matTooltipPosition="above"
-      i18n-matTooltip
-    >
-      <mat-icon>system_update_alt</mat-icon>
-    </button>
     <button
       mat-raised-button
       color="primary"
diff --git a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
index 2b575b78821..20c5ae8acd9 100644
--- a/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/project-authoring/project-authoring.component.ts
@@ -141,11 +141,11 @@ export class ProjectAuthoringComponent {
     this.groupNodeSelected = false;
   }
 
-  protected createNewLesson(): void {
+  protected addNewLesson(): void {
     this.router.navigate([`/teacher/edit/unit/${this.projectId}/add-lesson/configure`]);
   }
 
-  protected createNewStep(): void {
+  protected addNewStep(): void {
     this.router.navigate([`/teacher/edit/unit/${this.projectId}/add-node/choose-template`]);
   }
 
@@ -153,10 +153,6 @@ export class ProjectAuthoringComponent {
     this.router.navigate([`/teacher/edit/unit/${this.projectId}/structure/choose`]);
   }
 
-  protected importStep(): void {
-    this.router.navigate([`/teacher/edit/unit/${this.projectId}/import-step/choose-unit`]);
-  }
-
   protected goToAdvancedAuthoring(): void {
     this.router.navigate([`/teacher/edit/unit/${this.projectId}/advanced`]);
   }
diff --git a/src/messages.xlf b/src/messages.xlf
index e486798e965..e90f5b3e7ae 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -399,7 +399,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">30</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/copy-project-dialog/copy-project-dialog.component.html</context>
@@ -701,7 +701,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">84</context>
+          <context context-type="linenumber">73</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html</context>
@@ -1439,7 +1439,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">106</context>
+          <context context-type="linenumber">95</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
@@ -1483,6 +1483,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html</context>
           <context context-type="linenumber">51</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html</context>
+          <context context-type="linenumber">28</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component.html</context>
           <context context-type="linenumber">44</context>
@@ -5390,7 +5394,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">62</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-list/project-list.component.html</context>
@@ -9283,8 +9287,8 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="8bff5bc1b934165ac00899643ab91eb5320ad557" datatype="html">
-        <source>Start from scratch or choose a step template:</source>
+      <trans-unit id="22d1a7923c6b3db8b9eca074db71d7fda2c76b19" datatype="html">
+        <source>Start from scratch, import from another unit, or choose a step template:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html</context>
           <context context-type="linenumber">1</context>
@@ -9308,39 +9312,25 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="5366550815577392042" datatype="html">
-        <source>Create Your Own Description</source>
+      <trans-unit id="7152189031040166896" datatype="html">
+        <source>Import From Another Unit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">18</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8293078288618811295" datatype="html">
         <source>Automated Assessment</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts</context>
-          <context context-type="linenumber">19</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="2412675100535030076" datatype="html">
-        <source>Automated Assessment Description</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts</context>
-          <context context-type="linenumber">20</context>
+          <context context-type="linenumber">23</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6013229483538709548" datatype="html">
         <source>Interactive Simulation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts</context>
-          <context context-type="linenumber">25</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="3682992588117847800" datatype="html">
-        <source>Add an existing interactive simulation</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.ts</context>
-          <context context-type="linenumber">26</context>
+          <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9430426ed5a9b22d6dcf57e82af9318742f4b2bc" datatype="html">
@@ -9691,7 +9681,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">196</context>
+          <context context-type="linenumber">185</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a10dba8eb1f22a5f90f90e79b8305963eec3ee38" datatype="html">
@@ -9706,7 +9696,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">265</context>
+          <context context-type="linenumber">254</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0217500199a3e48a7b95762b14b79dad49e76beb" datatype="html">
@@ -9721,7 +9711,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">266</context>
+          <context context-type="linenumber">255</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f951d80b53d5536f79142285e8ba09f190a3c723" datatype="html">
@@ -11477,7 +11467,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">95</context>
+          <context context-type="linenumber">84</context>
         </context-group>
       </trans-unit>
       <trans-unit id="90c4e4785a98ff9c710d707d8e079c584fb9af48" datatype="html">
@@ -12083,15 +12073,15 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">7</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="bcf0ed433ab4782db0764ae24fb015e22520f41f" datatype="html">
-        <source>Create New Lesson</source>
+      <trans-unit id="e5e0c8fd39cb0db7735731e3ae7d2108f430f16e" datatype="html">
+        <source>Add New Lesson</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
           <context context-type="linenumber">18</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="93c7d1ec242f9b1551ee0b4ac7dc133dbeab61cf" datatype="html">
-        <source>Create New Step</source>
+      <trans-unit id="965b71c27ad581bf0f53e7f483505d2898c98a36" datatype="html">
+        <source>Add New Step</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
           <context context-type="linenumber">29</context>
@@ -12104,18 +12094,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">40</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="3538ada3bf07e331bafa52cf68b5862c1670a695" datatype="html">
-        <source>Import Step</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">51</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="57cf305f9bfd681c70dc26e914108d06384ade9f" datatype="html">
         <source>Move</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">62</context>
+          <context context-type="linenumber">51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2babf1354d25bf42fc198b512e41efe699029adc" datatype="html">
@@ -12124,7 +12107,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
                 }}"/> paths based on <x id="INTERPOLATION_1" equiv-text="{{ getBranchCriteriaDescription(item.key) }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">154,156</context>
+          <context context-type="linenumber">143,145</context>
         </context-group>
       </trans-unit>
       <trans-unit id="30e48681d6264197efea8455adfefd170a75e87f" datatype="html">
@@ -12133,7 +12116,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
                 }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">164,166</context>
+          <context context-type="linenumber">153,155</context>
         </context-group>
       </trans-unit>
       <trans-unit id="352c3d81453aabe6f46a08ce422003e76f85f041" datatype="html">
@@ -12142,14 +12125,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
                 }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">174,176</context>
+          <context context-type="linenumber">163,165</context>
         </context-group>
       </trans-unit>
       <trans-unit id="b3b4847175a6193afa85eb431bbe16d1f04470fa" datatype="html">
         <source>Has Rubric</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
-          <context context-type="linenumber">183</context>
+          <context context-type="linenumber">172</context>
         </context-group>
       </trans-unit>
       <trans-unit id="791981839110791639" datatype="html">