style(Component Selection): Group by function

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html

@@ -7,11 +7,16 @@ <h2 mat-dialog-title i18n>Add New Activity</h2>
     </button>
   </p>
   <div class="flex flex-wrap justify-start items-center">
-    @for (componentType of componentTypes; track componentType.type) {
-      <component-type-button
-        [componentType]="componentType.type"
-        (componentSelectedEvent)="selectComponent(componentType.type)"
-      />
+    @for (componentGroup of componentGroups; track componentGroup.name) {
+      <div class="flex flex-col" style="border: 2px dotted">
+        <h3 class="mat-subheading-1">{{ componentGroup.name }}</h3>
+        @for (componentType of componentGroup.types; track componentType.type) {
+          <component-type-button
+            [componentType]="componentType.type"
+            (componentSelectedEvent)="selectComponent(componentType.type)"
+          />
+        }
+      </div>
     }
   </div>
 </mat-dialog-content>

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts

@@ -10,15 +10,15 @@ import { ComponentTypeService } from '../../../../assets/wise5/services/componen
   templateUrl: 'choose-new-component.component.html'
 })
 export class ChooseNewComponent {
-  protected componentTypes: any[];
+  protected componentGroups: any[];
 
   constructor(
     private componentTypeService: ComponentTypeService,
     private dialogRef: MatDialogRef<ChooseNewComponent>
   ) {}
 
   ngOnInit(): void {
-    this.componentTypes = this.componentTypeService.getComponentTypes();
+    this.componentGroups = this.componentTypeService.getComponentGroups();
   }
 
   protected goToImportComponent(): void {

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -34,12 +34,17 @@ <h5 i18n>Select activities to add to your new step (optional):</h5>
     </div>
     <div class="flex flex-col md:w-2/3 lg:w-3/4">
       <div class="flex flex-wrap justify-stretch items-center">
-        @for (componentType of componentTypes; track componentType.type) {
-          <div class="component-type">
-            <component-type-button
-              [componentType]="componentType.type"
-              (componentSelectedEvent)="addComponent(componentType)"
-            />
+        @for (componentGroup of componentGroups; track componentGroup.name) {
+          <div class="flex flex-col" style="border: 2px dotted">
+            <h3 class="mat-subheading-1">{{ componentGroup.name }}</h3>
+            @for (componentType of componentGroup.types; track componentType.type) {
+              <div class="component-type">
+                <component-type-button
+                  [componentType]="componentType.type"
+                  (componentSelectedEvent)="addComponent(componentType)"
+                />
+              </div>
+            }
           </div>
         }
       </div>

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts

@@ -44,7 +44,7 @@ export class AddYourOwnNodeComponent {
   protected addNodeFormGroup: FormGroup = this.fb.group({
     title: new FormControl($localize`New Step`, [Validators.required])
   });
-  protected componentTypes: any[];
+  protected componentGroups: any[];
   protected initialComponents: string[] = [];
   protected submitting: boolean;
   protected target: AddStepTarget;
@@ -58,7 +58,7 @@ export class AddYourOwnNodeComponent {
     private route: ActivatedRoute,
     private router: Router
   ) {
-    this.componentTypes = this.componentTypeService.getComponentTypes();
+    this.componentGroups = this.componentTypeService.getComponentGroups();
   }
 
   ngOnInit(): void {

src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts

@@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class DialogGuidanceInfo extends ComponentInfo {
   protected description: string = $localize`Students chat with a computer avatar about a specific topic.`;
-  protected label: string = $localize`Dialog Guidance`;
+  protected label: string = $localize`Dialog`;
   protected previewExamples: any[] = [
     {
-      label: $localize`Dialog Guidance`,
+      label: $localize`Dialog`,
       content: {
         id: 'abcde12345',
         type: 'DialogGuidance',

src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts

@@ -10,7 +10,7 @@ export class DialogGuidanceService extends ComponentService {
   }
 
   getComponentTypeLabel(): string {
-    return $localize`Dialog Guidance`;
+    return $localize`Dialog`;
   }
 
   createComponent() {

src/assets/wise5/components/embedded/EmbeddedInfo.ts

@@ -2,19 +2,18 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class EmbeddedInfo extends ComponentInfo {
   protected description: string = $localize`Students interact with a custom applicatio, such as a model or simulation.`;
-  protected label: string = $localize`Embedded (Custom)`;
+  protected label: string = $localize`Custom`;
   protected previewExamples: any[] = [
     {
-      label: $localize`Embedded`,
+      label: $localize`Custom`,
       content: {
         id: 'abcde12345',
         type: 'Embedded',
         prompt: 'Click the differnt boundary types to view them in action.',
         showSaveButton: false,
         showSubmitButton: false,
         showAddToNotebookButton: false,
-        url:
-          'https://wise.berkeley.edu/curriculum/shared/plate-tectonics-convection-explorer/v1/index.html?maxWidth=900',
+        url: 'https://wise.berkeley.edu/curriculum/shared/plate-tectonics-convection-explorer/v1/index.html?maxWidth=900',
         height: 600,
         constraints: []
       }

src/assets/wise5/components/embedded/embeddedService.ts

@@ -27,7 +27,7 @@ export class EmbeddedService extends ComponentService {
   }
 
   getComponentTypeLabel(): string {
-    return $localize`Embedded (Custom)`;
+    return $localize`Custom`;
   }
 
   createComponent() {

src/assets/wise5/components/html/HtmlInfo.ts

@@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class HtmlInfo extends ComponentInfo {
   protected description: string = $localize`Students view rich text (HTML) content.`;
-  protected label: string = $localize`Rich Text (HTML)`;
+  protected label: string = $localize`Display Content`;
   protected previewExamples: any[] = [
     {
-      label: $localize`Rich Text (HTML)`,
+      label: $localize`Display Content`,
       content: {
         id: 'abcde12345',
         type: 'HTML',

src/assets/wise5/components/html/htmlService.ts

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class HTMLService extends ComponentService {
   getComponentTypeLabel(): string {
-    return $localize`Rich Text (HTML)`;
+    return $localize`Display Content`;
   }
 
   createComponent() {

src/assets/wise5/components/match/MatchInfo.ts

@@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class MatchInfo extends ComponentInfo {
   protected description: string = $localize`Students sort items into different buckets.`;
-  protected label: string = $localize`Match`;
+  protected label: string = $localize`Sort`;
   protected previewExamples: any[] = [
     {
-      label: $localize`Match`,
+      label: $localize`Sort`,
       content: {
         id: 'abcde12345',
         type: 'Match',

src/assets/wise5/components/match/matchService.ts

@@ -5,7 +5,7 @@ import { MatchContent } from './MatchContent';
 @Injectable()
 export class MatchService extends ComponentService {
   getComponentTypeLabel(): string {
-    return $localize`Match`;
+    return $localize`Sort`;
   }
 
   createComponent() {

src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts

@@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class ShowMyWorkInfo extends ComponentInfo {
   protected description: string = $localize`Students are shown work that they submitted for a specific item.`;
-  protected label: string = $localize`Show My Work`;
+  protected label: string = $localize`Show Student Work`;
   protected previewExamples: any[] = [
     {
-      label: $localize`Show My Work`,
+      label: $localize`Show Student Work`,
       content: {
         id: 'abcde12345',
         type: 'ShowMyWork',

src/assets/wise5/components/summary/SummaryInfo.ts

@@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo';
 
 export class SummaryInfo extends ComponentInfo {
   protected description: string = $localize`Students are shown an aggregate graph summarizing data from the class.`;
-  protected label: string = $localize`Summary`;
+  protected label: string = $localize`Graph Summary`;
   protected previewExamples: any[] = [
     {
-      lable: $localize`Summary`,
+      lable: $localize`Graph Summary`,
       content: {
         id: 'abcde12345',
         type: 'Summary',

src/assets/wise5/components/summary/summaryService.ts

@@ -37,7 +37,7 @@ export class SummaryService extends ComponentService {
   }
 
   getComponentTypeLabel(): string {
-    return $localize`Summary`;
+    return $localize`Graph Summary`;
   }
 
   createComponent() {

src/assets/wise5/services/componentTypeService.ts

@@ -11,32 +11,58 @@ export class ComponentTypeService {
     private userService: UserService
   ) {}
 
-  getComponentTypes(): any[] {
-    const componentTypes = [
-      { type: 'Animation', name: this.getComponentTypeLabel('Animation') },
-      { type: 'AudioOscillator', name: this.getComponentTypeLabel('AudioOscillator') },
-      { type: 'ConceptMap', name: this.getComponentTypeLabel('ConceptMap') },
-      { type: 'DialogGuidance', name: this.getComponentTypeLabel('DialogGuidance') },
-      { type: 'Discussion', name: this.getComponentTypeLabel('Discussion') },
-      { type: 'Draw', name: this.getComponentTypeLabel('Draw') },
-      { type: 'Embedded', name: this.getComponentTypeLabel('Embedded') },
-      { type: 'Graph', name: this.getComponentTypeLabel('Graph') },
-      { type: 'Label', name: this.getComponentTypeLabel('Label') },
-      { type: 'Match', name: this.getComponentTypeLabel('Match') },
-      { type: 'MultipleChoice', name: this.getComponentTypeLabel('MultipleChoice') },
-      { type: 'OpenResponse', name: this.getComponentTypeLabel('OpenResponse') },
-      { type: 'OutsideURL', name: this.getComponentTypeLabel('OutsideURL') },
-      { type: 'PeerChat', name: this.getComponentTypeLabel('PeerChat') },
-      { type: 'HTML', name: this.getComponentTypeLabel('HTML') },
-      { type: 'ShowGroupWork', name: this.getComponentTypeLabel('ShowGroupWork') },
-      { type: 'ShowMyWork', name: this.getComponentTypeLabel('ShowMyWork') },
-      { type: 'Summary', name: this.getComponentTypeLabel('Summary') },
-      { type: 'Table', name: this.getComponentTypeLabel('Table') }
+  getComponentGroups(): any[] {
+    const groups = [
+      {
+        name: $localize`View Information`,
+        types: [
+          { type: 'HTML', name: this.getComponentTypeLabel('HTML') },
+          { type: 'Summary', name: this.getComponentTypeLabel('Summary') },
+          { type: 'ShowMyWork', name: this.getComponentTypeLabel('ShowMyWork') }
+        ]
+      },
+      {
+        name: $localize`Explain and Assess`,
+        types: [
+          { type: 'ConceptMap', name: this.getComponentTypeLabel('ConceptMap') },
+          { type: 'Draw', name: this.getComponentTypeLabel('Draw') },
+          { type: 'Label', name: this.getComponentTypeLabel('Label') },
+          { type: 'MultipleChoice', name: this.getComponentTypeLabel('MultipleChoice') },
+          { type: 'OpenResponse', name: this.getComponentTypeLabel('OpenResponse') },
+          { type: 'Match', name: this.getComponentTypeLabel('Match') }
+        ]
+      },
+      {
+        name: $localize`Collaborate`,
+        types: [
+          { type: 'DialogGuidance', name: this.getComponentTypeLabel('DialogGuidance') },
+          { type: 'Discussion', name: this.getComponentTypeLabel('Discussion') },
+          { type: 'PeerChat', name: this.getComponentTypeLabel('PeerChat') },
+          { type: 'ShowGroupWork', name: this.getComponentTypeLabel('ShowGroupWork') }
+        ]
+      },
+      {
+        name: $localize`Experiment, Discover and Distinguish`,
+        types: [
+          { type: 'Animation', name: this.getComponentTypeLabel('Animation') },
+          { type: 'AudioOscillator', name: this.getComponentTypeLabel('AudioOscillator') },
+          { type: 'Embedded', name: this.getComponentTypeLabel('Embedded') },
+          { type: 'Graph', name: this.getComponentTypeLabel('Graph') },
+          { type: 'OutsideURL', name: this.getComponentTypeLabel('OutsideURL') },
+          { type: 'Table', name: this.getComponentTypeLabel('Table') }
+        ]
+      }
     ];
+
     if (this.isAiChatAllowed()) {
-      componentTypes.unshift({ type: 'AiChat', name: this.getComponentTypeLabel('AiChat') });
+      groups[2].types.unshift({ type: 'AiChat', name: this.getComponentTypeLabel('AiChat') });
     }
-    return componentTypes;
+
+    return groups;
+  }
+
+  getComponentTypes(): any[] {
+    return this.getComponentGroups().flatMap((group) => group.types);
   }
 
   getComponentTypeLabel(componentType: string): string {