From 071ca358c33de350c23d118e019279da544c5e0c Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 9 Feb 2026 09:18:17 -0800
Subject: [PATCH 1/2] Only show first component when the page is first rendered

---
 .../filter-components.component.spec.ts               | 11 +++++++++--
 .../filter-components/filter-components.component.ts  |  3 +--
 .../node-grading/node-grading.component.html          |  1 +
 .../node-grading/node-grading.component.ts            |  2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.spec.ts
index f2b9c28cf47..8c3541f8b88 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.spec.ts
@@ -35,6 +35,8 @@ function onlyOneComponent() {
           type: 'MultipleChoice'
         } as ComponentContent
       ];
+      component.selectedComponents = component.components;
+      component.ngOnChanges();
       fixture.detectChanges();
       select = await loader.getHarness(MatSelectHarness);
     });
@@ -57,6 +59,7 @@ function moreThanOneComponent() {
           type: 'OpenResponse'
         } as ComponentContent
       ];
+      component.selectedComponents = [component.components[0]];
       component.ngOnChanges();
       fixture.detectChanges();
       select = await loader.getHarness(MatSelectHarness);
@@ -66,14 +69,18 @@ function moreThanOneComponent() {
       const options = await select.getOptions();
       expect(options.length).toBe(2);
       expect(await options[0].isSelected()).toBe(true);
-      expect(await options[1].isSelected()).toBe(true);
+      expect(await options[1].isSelected()).toBe(false);
     });
     it('clicking on an option should emit selected components', async () => {
       const spy = spyOn(component.componentsChange, 'emit').and.callThrough();
       await select.open();
       const options = await select.getOptions();
-      await options[0].click();
+      await options[1].click();
       expect(spy).toHaveBeenCalledWith([
+        {
+          id: 'c1',
+          type: 'MultipleChoice'
+        } as ComponentContent,
         {
           id: 'c2',
           type: 'OpenResponse'
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts
index 58872239791..b42dfe2df5f 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts
@@ -19,13 +19,12 @@ export class FilterComponentsComponent {
   @Output() componentsChange: EventEmitter<ComponentContent[]> = new EventEmitter<
     ComponentContent[]
   >();
-  protected selectedComponents: ComponentContent[];
+  @Input() selectedComponents: ComponentContent[];
   protected selectedText: string;
 
   constructor(private componentTypeService: ComponentTypeService) {}
 
   ngOnChanges(): void {
-    this.selectedComponents = this.components;
     this.updateSelectedText();
   }
 
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
index a6297d513c9..441eb3f18f2 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
@@ -56,6 +56,7 @@ <h3 class="mat-body-1" i18n>Question Summaries</h3>
       <h3 class="mat-body-1" i18n>Class Responses</h3>
       <filter-components
         [components]="components"
+        [selectedComponents]="visibleComponents"
         (componentsChange)="setVisibleComponents($event)"
       />
     </div>
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
index beb33082d38..253a9962bf5 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
@@ -103,7 +103,7 @@ export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
         component['displayIndex'] = index + 1;
         return component;
       });
-    this.visibleComponents = this.components;
+    this.visibleComponents = [this.components[0]];
     this.numRubrics = this.node.getNumRubrics();
     this.setPeriod();
   }

From bd8a38b1d2c2f51df69eedcddbe3bf77c066d0dd Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 9 Feb 2026 10:54:49 -0800
Subject: [PATCH 2/2] Synchronize component displayed between summary and class
 responses

---
 .../nodeGrading/node-grading/node-grading.component.html     | 2 +-
 .../nodeGrading/node-grading/node-grading.component.ts       | 5 +++++
 src/messages.xlf                                             | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
index 441eb3f18f2..6a9f3a65c0d 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html
@@ -37,7 +37,7 @@ <h3 class="mat-body-1" i18n>Question Summaries</h3>
         <div class="mat-elevation-z1 app-background mt-4 mb-2">
           <mat-tab-group
             [selectedIndex]="selectedComponent.value"
-            (selectedIndexChange)="selectedComponent.setValue($event)"
+            (selectedIndexChange)="selectSummary($event)"
             mat-stretch-tabs="false"
             animationDuration="0"
           >
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
index 253a9962bf5..f55136530f7 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.ts
@@ -144,4 +144,9 @@ export class NodeGradingComponent implements OnInit, OnDestroy, OnChanges {
     event.preventDefault();
     this.summariesVisible = !this.summariesVisible;
   }
+
+  protected selectSummary(componentIndex: number): void {
+    this.selectedComponent.setValue(componentIndex);
+    this.visibleComponents = [this.components[componentIndex]];
+  }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
index 80d53987af0..19bb956924d 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -14629,7 +14629,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Showing <x id="PH" equiv-text="this.selectedComponents.length"/>/<x id="PH_1" equiv-text="this.components.length"/> questions</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.ts</context>
-          <context context-type="linenumber">33</context>
+          <context context-type="linenumber">32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="214737279674024315" datatype="html">