From dfd8e2c0100ac64a82db900250ca2f197a77d873 Mon Sep 17 00:00:00 2001
From: Jonathan Lim-Breitbart <breity10@gmail.com>
Date: Tue, 29 Oct 2024 11:06:24 -0700
Subject: [PATCH] feat(Branch Authoring): UX improvements (#1967)

---
 .../add-step-button.component.html            |  7 +-
 .../add-step-button.component.ts              | 10 +++
 .../create-branch.component.scss              |  2 +-
 .../branch-criteria-help.component.html       | 53 ++++++++++++
 .../branch-criteria-help.component.spec.ts    | 21 +++++
 .../branch-criteria-help.component.ts         | 12 +++
 .../select-branch-criteria.component.html     |  8 ++
 .../select-branch-criteria.component.ts       | 25 +++++-
 .../select-merge-step.component.html          |  3 +-
 src/messages.xlf                              | 81 ++++++++++++++++++-
 10 files changed, 213 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html
 create mode 100644 src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.spec.ts
 create mode 100644 src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.ts

diff --git a/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html b/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html
index de82e1677e2..59d4789b5b5 100644
--- a/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html
+++ b/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html
@@ -12,17 +12,18 @@
 <mat-menu #step="matMenu">
   @if (!branchMergePoint) {
     <button mat-menu-item (click)="addStepBefore()">
-      <mat-icon>add_circle</mat-icon><span i18n>Add step before</span>
+      <mat-icon class="rotate-180 flip-vertical">subdirectory_arrow_left</mat-icon
+      ><span i18n>Add step before</span>
     </button>
   }
   @if (!branchPoint) {
     <button mat-menu-item (click)="goToAddStepViewForAfter(nodeId)">
-      <mat-icon>add_circle</mat-icon><span i18n>Add step after</span>
+      <mat-icon>subdirectory_arrow_left</mat-icon><span i18n>Add step after</span>
     </button>
   }
   @if (!branchPoint && !branchPathStep) {
     <button mat-menu-item (click)="goToCreateBranchView()">
-      <mat-icon>add_circle</mat-icon><span i18n>Branch off this step</span>
+      <mat-icon class="rotate-180">call_split</mat-icon><span i18n>Branch off this step</span>
     </button>
   }
 </mat-menu>
diff --git a/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.ts b/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.ts
index b29584b5e53..d522546c00d 100644
--- a/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.ts
+++ b/src/assets/wise5/authoringTool/add-step-button/add-step-button.component.ts
@@ -12,6 +12,16 @@ import { AddStepTarget } from '../../../../app/domain/addStepTarget';
   selector: 'add-step-button',
   templateUrl: './add-step-button.component.html',
   standalone: true,
+  styles: [
+    `
+      .rotate-180 {
+        transform: rotate(180deg);
+      }
+      .flip-vertical {
+        transform: scaleY(-1);
+      }
+    `
+  ],
   imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule]
 })
 export class AddStepButtonComponent {
diff --git a/src/assets/wise5/authoringTool/create-branch/create-branch.component.scss b/src/assets/wise5/authoringTool/create-branch/create-branch.component.scss
index 94572ffe1de..a5d74c029b6 100644
--- a/src/assets/wise5/authoringTool/create-branch/create-branch.component.scss
+++ b/src/assets/wise5/authoringTool/create-branch/create-branch.component.scss
@@ -1,3 +1,3 @@
-create-branch-paths {
+create-branch-paths, select-merge-step {
   margin-bottom: 16px;
 }
diff --git a/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html
new file mode 100644
index 00000000000..05a8a28bbb7
--- /dev/null
+++ b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html
@@ -0,0 +1,53 @@
+<h2 mat-dialog-title i18n>Branching Criteria Options</h2>
+<mat-dialog-content class="dialog-content-scroll">
+  <h3 i18n>Workgroup ID</h3>
+  <p i18n>
+    Automatically assigns students a branch path based on their WISE Workgroup ID number. This
+    option ensures a relatively even distribution of students per path.
+  </p>
+  <p i18n>
+    *Assigning paths based on Workgroup ID also can ensure that students are branched to the same
+    path across multiple branching structures in the unit (assuming each branching structure
+    contains the same number of paths).
+  </p>
+  <p>
+    This option uses the
+    <a
+      href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder"
+      target="_blank"
+      >remainder function</a
+    >. So for 4 branch paths (A, B, C, D), calculations for the following Workgroup IDs would be:
+  </p>
+  <ul>
+    <li>1000 % 4 = 0 (Path A)</li>
+    <li>1001 % 4 = 1 (Path B)</li>
+    <li>1002 % 4 = 2 (Path C)</li>
+    <li>1003 % 4 = 3 (Path D)</li>
+    <li>1004 % 4 = 0 (Path A)</li>
+  </ul>
+  <mat-divider></mat-divider>
+  <h3 i18n>Score</h3>
+  <p i18n>Assigns students a branch path based on their score from another item in the unit.</p>
+  <p>
+    After choosing to branch by score, you'll need to identify a reference component. The branching
+    logic will use the student's score from that item to determine their path.
+  </p>
+  <mat-divider></mat-divider>
+  <h3 i18n>Choice Chosen</h3>
+  <p i18n>
+    Assigns students a branch path based on their selection from a multiple choice item in the unit.
+  </p>
+  <p>
+    After choosing to branch by choice, you'll need to identify a reference component. The branching
+    logic will use the student's selection from that item to determine their path.
+  </p>
+  <mat-divider></mat-divider>
+  <h3 i18n>Random</h3>
+  <p i18n>
+    Randomly assigns student teams a branch path. This option ensures a relatively even distribution
+    of students per path.
+  </p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button mat-dialog-close cdkFocusRegionstart i18n>Close</button>
+</mat-dialog-actions>
diff --git a/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.spec.ts b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.spec.ts
new file mode 100644
index 00000000000..0f623c6d523
--- /dev/null
+++ b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BranchCriteriaHelpComponent } from './branch-criteria-help.component';
+
+describe('BranchCriteriaHelpComponent', () => {
+  let component: BranchCriteriaHelpComponent;
+  let fixture: ComponentFixture<BranchCriteriaHelpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BranchCriteriaHelpComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BranchCriteriaHelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.ts b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.ts
new file mode 100644
index 00000000000..a30353487ed
--- /dev/null
+++ b/src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+
+@Component({
+  selector: 'branch-criteria-help',
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule, MatDividerModule],
+  templateUrl: './branch-criteria-help.component.html'
+})
+export class BranchCriteriaHelpComponent {}
diff --git a/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.html b/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.html
index d3ad17e00b8..0cb02ef137a 100644
--- a/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.html
+++ b/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.html
@@ -8,3 +8,11 @@
     }
   </mat-select>
 </mat-form-field>
+<button
+  mat-icon-button
+  matTooltip="Branching Criteria Options"
+  matTooltipPosition="above"
+  (click)="showCriteriaHelp()"
+>
+  <mat-icon>info</mat-icon>
+</button>
diff --git a/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.ts b/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.ts
index 453f9506c30..a9f0795ccfb 100644
--- a/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.ts
+++ b/src/assets/wise5/authoringTool/select-branch-criteria/select-branch-criteria.component.ts
@@ -5,9 +5,24 @@ import { MatSelectModule } from '@angular/material/select';
 import { BRANCH_CRITERIA, BranchCriteria } from '../../../../app/domain/branchCriteria';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BranchCriteriaHelpComponent } from './branch-criteria-help/branch-criteria-help.component';
 
 @Component({
-  imports: [CommonModule, FlexLayoutModule, FormsModule, MatFormFieldModule, MatSelectModule],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatTooltipModule
+  ],
   selector: 'select-branch-criteria',
   standalone: true,
   styleUrl: './select-branch-criteria.component.scss',
@@ -18,4 +33,12 @@ export class SelectBranchCriteriaComponent {
 
   @Input() criteria: string;
   @Output() criteriaChangedEvent: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(protected dialog: MatDialog) {}
+
+  protected showCriteriaHelp(): void {
+    this.dialog.open(BranchCriteriaHelpComponent, {
+      panelClass: 'dialog-md'
+    });
+  }
 }
diff --git a/src/assets/wise5/authoringTool/select-merge-step/select-merge-step.component.html b/src/assets/wise5/authoringTool/select-merge-step/select-merge-step.component.html
index b502cd3bf73..617c3145458 100644
--- a/src/assets/wise5/authoringTool/select-merge-step/select-merge-step.component.html
+++ b/src/assets/wise5/authoringTool/select-merge-step/select-merge-step.component.html
@@ -1,4 +1,4 @@
-<mat-form-field class="select-merge form-field-no-hint">
+<mat-form-field class="select-merge">
   <mat-label i18n>Merge Step</mat-label>
   <mat-select [(ngModel)]="mergeStepId" (ngModelChange)="selectMergeStepEvent.emit($event)">
     <mat-option *ngIf="nextStepId !== ''" [value]="nextStepId" i18n>
@@ -6,4 +6,5 @@
     </mat-option>
     <mat-option [value]="''" i18n>Create New Step</mat-option>
   </mat-select>
+  <mat-hint i18n>All students will be directed here after completing their branch paths.</mat-hint>
 </mat-form-field>
diff --git a/src/messages.xlf b/src/messages.xlf
index 1e9725e91af..a12c4c1e592 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -305,6 +305,10 @@
           <context context-type="sourcefile">src/assets/wise5/authoringTool/peer-grouping/select-peer-grouping-dialog/select-peer-grouping-dialog.component.html</context>
           <context context-type="linenumber">26</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">52</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-show-student-info/manage-show-student-info.component.html</context>
           <context context-type="linenumber">37</context>
@@ -9527,21 +9531,21 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Add step before</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html</context>
-          <context context-type="linenumber">15</context>
+          <context context-type="linenumber">16</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d59263511cd8dbe0a1eb9bd829aac8d827d8fd83" datatype="html">
         <source>Add step after</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html</context>
-          <context context-type="linenumber">20</context>
+          <context context-type="linenumber">21</context>
         </context-group>
       </trans-unit>
       <trans-unit id="66a796ca959149529fa803f5ffa9cad29b5c5c5a" datatype="html">
         <source>Branch off this step</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/add-step-button/add-step-button.component.html</context>
-          <context context-type="linenumber">25</context>
+          <context context-type="linenumber">26</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8608bcf1ea8ff554000e0ac4337e7afd3cf5c3f3" datatype="html">
@@ -10847,6 +10851,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-branch-paths/edit-branch-paths.component.html</context>
           <context context-type="linenumber">10</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">29</context>
+        </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html</context>
           <context context-type="linenumber">90</context>
@@ -10874,6 +10882,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="sourcefile">src/assets/wise5/authoringTool/edit-branch-paths/edit-branch-paths.component.html</context>
           <context context-type="linenumber">15</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">36</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="6b71e4d64744aa78a64f1eeb7fce0ddc1f554ca2" datatype="html">
         <source>Create Branching Structure</source>
@@ -13047,6 +13059,62 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">1</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="5faab18cc820fb3c0cdcbd1706fde514a51107b6" datatype="html">
+        <source>Branching Criteria Options</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">1</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="b8a2a02fb76d3b8313dd93a1ad8c7257dc8947e1" datatype="html">
+        <source>Workgroup ID</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">3</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="ea702a849598ffa572fffd0bb7c9f134b378e5a5" datatype="html">
+        <source> Automatically assigns students a branch path based on their WISE Workgroup ID number. This option ensures a relatively even distribution of students per path. </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">4,7</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="54e244e0ce370a8e710b620aee49bc416fd70c52" datatype="html">
+        <source> *Assigning paths based on Workgroup ID also can ensure that students are branched to the same path across multiple branching structures in the unit (assuming each branching structure contains the same number of paths). </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">8,12</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1e7d2f303c768d632e787daaf57cb2ef1014b3da" datatype="html">
+        <source>Assigns students a branch path based on their score from another item in the unit.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="0dd9b37a8adbe238823cdaa2e5c289afe531797f" datatype="html">
+        <source> Assigns students a branch path based on their selection from a multiple choice item in the unit. </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">37,39</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="3efbc55094b3e633835a1866fcfb14b0601376dc" datatype="html">
+        <source>Random</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">45</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5087b29e62f5008e9e4093f289e67f28c6a457fe" datatype="html">
+        <source> Randomly assigns student teams a branch path. This option ensures a relatively even distribution of students per path. </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-branch-criteria/branch-criteria-help/branch-criteria-help.component.html</context>
+          <context context-type="linenumber">46,49</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="f349eaff8f8387128c51240dbb351413930be068" datatype="html">
         <source>How to Choose Among Paths</source>
         <context-group purpose="location">
@@ -13075,6 +13143,13 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">7</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="7ae6a8df418f4d3413d4508e3fcec514c45af68c" datatype="html">
+        <source>All students will be directed here after completing their branch paths.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/select-merge-step/select-merge-step.component.html</context>
+          <context context-type="linenumber">9</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="06c301fa0994d4b67e51eeb201f1d3d9988c7a23" datatype="html">
         <source>Number of Branch Paths</source>
         <context-group purpose="location">