From fae2424f2f91f507f2814e16475177f1be0a1e55 Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Wed, 29 Jul 2026 09:46:46 -0700 Subject: [PATCH 1/4] feat(Activity Icons): Show activity icons in authoring and teacher tools --- .../choose-new-component.component.html | 2 +- .../component-type-group.component.html | 2 +- .../component-info-dialog.component.html | 4 +- .../component-info-dialog.component.scss | 3 - .../component-info-dialog.component.ts | 1 - .../component-type-button.component.html | 11 +- .../component-type-button.component.scss | 2 +- .../component-type-button.component.ts | 2 + .../component-type-selector.component.html | 17 +- .../component-type-selector.component.spec.ts | 152 +++++++++++++++--- .../component-type-selector.component.ts | 10 +- .../edit-component-dialog.component.ts | 23 ++- .../node-authoring.component.html | 8 +- .../node-authoring.component.ts | 10 +- .../component-completion.component.spec.ts | 9 +- .../milestone-workgroup-item.component.html | 14 +- .../milestone-workgroup-item.component.scss | 4 + .../milestone-workgroup-item.component.ts | 12 +- .../filter-components.component.html | 6 +- .../filter-components.component.ts | 10 +- .../node-grading/node-grading.component.html | 4 +- .../node-grading/node-grading.component.ts | 11 +- .../node-workgroup-item.component.html | 6 +- .../node-workgroup-item.component.scss | 4 + .../node-workgroup-item.component.ts | 14 +- .../ChoiceChosenConstraintStrategy.spec.ts | 9 +- src/assets/wise5/components/ComponentInfo.ts | 5 + .../wise5/components/aiChat/AiChatInfo.ts | 3 +- .../wise5/components/aiChat/aiChatService.ts | 13 +- .../components/animation/AnimationInfo.ts | 1 + .../components/animation/animationService.ts | 7 +- .../audioOscillator/AudioOscillatorInfo.ts | 1 + .../audioOscillator/audioOscillatorService.ts | 6 +- .../wise5/components/componentService.ts | 16 +- .../components/conceptMap/ConceptMapInfo.ts | 1 + .../conceptMap/conceptMapService.ts | 16 +- .../dialogGuidance/DialogGuidanceInfo.ts | 1 + .../dialogGuidance/dialogGuidanceService.ts | 12 +- .../components/discussion/DiscussionInfo.ts | 1 + .../discussion/discussionService.ts | 16 +- .../discussion/teacherDiscussionService.ts | 14 +- src/assets/wise5/components/draw/DrawInfo.ts | 1 + .../wise5/components/draw/drawService.ts | 13 +- .../wise5/components/embedded/EmbeddedInfo.ts | 1 + .../components/embedded/embeddedService.ts | 17 +- .../wise5/components/graph/GraphInfo.ts | 1 + .../wise5/components/graph/graphService.ts | 19 +-- src/assets/wise5/components/html/HtmlInfo.ts | 1 + .../wise5/components/html/htmlService.ts | 7 +- .../wise5/components/label/LabelInfo.ts | 1 + .../wise5/components/label/labelService.ts | 13 +- .../wise5/components/match/MatchInfo.ts | 1 + .../wise5/components/match/matchService.ts | 7 +- .../multipleChoice/MultipleChoiceInfo.ts | 1 + .../multipleChoice/multipleChoiceService.ts | 7 +- .../openResponse/OpenResponseInfo.ts | 1 + .../openResponse/openResponseService.ts | 13 +- .../components/outsideURL/OutsideUrlInfo.ts | 1 + .../outsideURL/outsideURLService.ts | 12 +- .../wise5/components/peerChat/PeerChatInfo.ts | 1 + .../components/peerChat/peerChatService.ts | 13 +- .../showGroupWork/ShowGroupWorkInfo.ts | 1 + .../showGroupWork/showGroupWorkService.ts | 7 +- .../components/showMyWork/ShowMyWorkInfo.ts | 1 + .../showMyWork/showMyWorkService.ts | 7 +- .../wise5/components/summary/SummaryInfo.ts | 1 + .../components/summary/summaryService.ts | 61 ++++--- .../wise5/components/table/TableInfo.ts | 1 + .../wise5/components/table/tableService.ts | 12 +- .../wise5/services/componentInfoService.ts | 4 +- .../wise5/services/componentTypeService.ts | 124 +++++++++++--- 71 files changed, 513 insertions(+), 300 deletions(-) delete mode 100644 src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html index 219b3414936..90d79902290 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html @@ -16,6 +16,6 @@

Add New Activity

} - + diff --git a/src/app/authoring-tool/component-type-group/component-type-group.component.html b/src/app/authoring-tool/component-type-group/component-type-group.component.html index 1266707dd83..7a5c4fb16d8 100644 --- a/src/app/authoring-tool/component-type-group/component-type-group.component.html +++ b/src/app/authoring-tool/component-type-group/component-type-group.component.html @@ -4,7 +4,7 @@
-
+
@for (componentType of componentGroup.types; track componentType.type) { +

Activity Info

-
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss deleted file mode 100644 index 04ec3cac670..00000000000 --- a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -component-type-selector { - padding: 0 8px; -} \ No newline at end of file diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts index 8f299f18cfa..8014edf35d7 100644 --- a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts +++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts @@ -20,7 +20,6 @@ import { MatDividerModule } from '@angular/material/divider'; MatTabsModule, PreviewComponentComponent ], - styleUrl: './component-info-dialog.component.scss', templateUrl: './component-info-dialog.component.html' }) export class ComponentInfoDialogComponent { diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html index 77902aa5c18..8c32c3ad369 100644 --- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html +++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html @@ -2,15 +2,10 @@
-
diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss index 67d9b4e622b..05db68e2d4e 100644 --- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss +++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss @@ -7,5 +7,5 @@ mat-card { justify-content: flex-start; text-transform: capitalize; text-align: start; - padding: 0 8px; + padding: 0 8px !important; } \ No newline at end of file diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts index d20d98d1119..0f5896ad2c4 100644 --- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts +++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts @@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'; export class ComponentTypeButtonComponent { @Output() componentSelectedEvent: EventEmitter = new EventEmitter(); @Input() componentType: string; + protected icon: string; protected label: string; constructor( @@ -24,6 +25,7 @@ export class ComponentTypeButtonComponent { ) {} ngOnInit(): void { + this.icon = this.componentInfoService.getInfo(this.componentType).getIcon(); this.label = this.componentInfoService.getInfo(this.componentType).getLabel(); } diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html index 556ac25e8c8..5dd0f4a6214 100644 --- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html +++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html @@ -10,8 +10,21 @@ - @for (componentTypeOption of componentTypes; track componentTypeOption.type) { - {{ componentTypeOption.name }} + +
+ {{ selectedComponentTypeOption?.icon }} + {{ selectedComponentTypeOption?.name }} +
+ + @for (group of componentGroups; track group.name) { + + @for (componentTypeOption of group.types; track componentTypeOption.type) { + + {{ componentTypeOption.icon }} + {{ componentTypeOption.name }} + + } + } diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts index c430964161d..4b1d8f76802 100644 --- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts +++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts @@ -25,27 +25,127 @@ describe('ComponentTypeSelectorComponent', () => { }); fixture = TestBed.createComponent(ComponentTypeSelectorComponent); const componentTypeService = TestBed.inject(ComponentTypeService); - spyOn(componentTypeService, 'getComponentTypes').and.returnValue([ - { type: 'AiChat', name: 'AI Chat' }, - { type: 'Animation', name: 'Animation' }, - { type: 'AudioOscillator', name: 'Audio Oscillator' }, - { type: 'ConceptMap', name: 'Concept Map' }, - { type: 'DialogGuidance', name: 'Dialog Guidance' }, - { type: 'Discussion', name: 'Discussion' }, - { type: 'Draw', name: 'Draw' }, - { type: 'Embedded', name: 'Embedded' }, - { type: 'Graph', name: 'Graph' }, - { type: 'Label', name: 'Label' }, - { type: 'Match', name: 'Match' }, - { type: 'MultipleChoice', name: 'Multiple Choice' }, - { type: 'OpenResponse', name: 'Open Response' }, - { type: 'OutsideURL', name: 'Outside URL' }, - { type: 'PeerChat', name: 'Peer Chat' }, - { type: 'HTML', name: 'HTML' }, - { type: 'ShowGroupWork', name: 'Show Group Work' }, - { type: 'ShowMyWork', name: 'Show My Work' }, - { type: 'Summary', name: 'Summary' }, - { type: 'Table', name: 'Table' } + spyOn(componentTypeService, 'getComponentGroups').and.returnValue([ + { + name: 'View Information', + types: [ + { + type: 'HTML', + name: 'Display Content', + icon: 'newspaper' + }, + { + type: 'ShowMyWork', + name: 'Show Student Work', + icon: 'assignment' + }, + { + type: 'Summary', + name: 'Summary Graph', + icon: 'pie_chart' + } + ] + }, + { + name: 'Explain and Assess', + types: [ + { + type: 'ConceptMap', + name: 'Concept Map', + icon: 'account_tree' + }, + { + type: 'Draw', + name: 'Draw', + icon: 'draw' + }, + { + type: 'Label', + name: 'Label', + icon: 'sticky_note_2' + }, + { + type: 'MultipleChoice', + name: 'Multiple Choice', + icon: 'ballot' + }, + { + type: 'OpenResponse', + name: 'Open Response', + icon: 'edit_note' + }, + { + type: 'Match', + name: 'Sort', + icon: 'category' + } + ] + }, + { + name: 'Experiment, Discover, Distinguish', + types: [ + { + type: 'AiChat', + name: 'AI Chat', + icon: 'assistant' + }, + { + type: 'Animation', + name: 'Animation', + icon: 'animation' + }, + { + type: 'AudioOscillator', + name: 'Audio Oscillator', + icon: 'waves' + }, + { + type: 'Embedded', + name: 'Custom', + icon: 'handyman' + }, + { + type: 'Graph', + name: 'Graph', + icon: 'bar_chart' + }, + { + type: 'OutsideURL', + name: 'Outside Resource', + icon: 'web' + }, + { + type: 'Table', + name: 'Table', + icon: 'table_chart' + } + ] + }, + { + name: 'Collaborate', + types: [ + { + type: 'DialogGuidance', + name: 'Dialog', + icon: 'chat' + }, + { + type: 'Discussion', + name: 'Discussion', + icon: 'forum' + }, + { + type: 'PeerChat', + name: 'Peer Chat', + icon: 'people' + }, + { + type: 'ShowGroupWork', + name: 'Show Group Work', + icon: 'co_present' + } + ] + } ]); configService = TestBed.inject(ConfigService); @@ -81,7 +181,7 @@ function goToNextComponent() { it('changes to the next component type', async () => { expect(component.componentType).toEqual('OpenResponse'); await (await componentTypeSelectorHarness.getNextComponentTypeButton()).click(); - expect(component.componentType).toEqual('OutsideURL'); + expect(component.componentType).toEqual('Match'); }); }); } @@ -92,9 +192,9 @@ function selectComponent() { await ( await componentTypeSelectorHarness.getComponentTypeSelect() ).clickOptions({ - text: 'AI Chat' + text: 'Display Content' }); - expect(component.componentType).toEqual('AiChat'); + expect(component.componentType).toEqual('HTML'); expect( await (await componentTypeSelectorHarness.getPreviousComponentTypeButton()).isDisabled() ).toBeTrue(); @@ -105,9 +205,9 @@ function selectComponent() { await ( await componentTypeSelectorHarness.getComponentTypeSelect() ).clickOptions({ - text: 'Table' + text: 'Show Group Work' }); - expect(component.componentType).toEqual('Table'); + expect(component.componentType).toEqual('ShowGroupWork'); expect( await (await componentTypeSelectorHarness.getNextComponentTypeButton()).isDisabled() ).toBeTrue(); diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts index 7e739d1637b..4904da253d6 100644 --- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts +++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts @@ -12,7 +12,9 @@ import { MatIconModule } from '@angular/material/icon'; }) export class ComponentTypeSelectorComponent { @Input() componentType: string; - protected componentTypes: any[]; + protected componentGroups: any[]; + private componentTypes: any[]; + protected selectedComponentTypeOption: any; @Output() componentTypeSelectedEvent: EventEmitter = new EventEmitter(); protected firstComponent: boolean; protected lastComponent: boolean; @@ -20,13 +22,15 @@ export class ComponentTypeSelectorComponent { constructor(private componentTypeService: ComponentTypeService) {} ngOnInit(): void { - this.componentTypes = this.componentTypeService.getComponentTypes(); + this.componentGroups = this.componentTypeService.getComponentGroups(); + this.componentTypes = this.componentGroups.flatMap((group) => group.types); this.selectComponent(this.componentType); } protected selectComponent(componentType: string): void { this.componentType = componentType; const index = this.getComponentIndex(this.componentType); + this.selectedComponentTypeOption = this.componentTypes[index]; this.firstComponent = index === 0; this.lastComponent = index === this.componentTypes.length - 1; this.componentTypeSelectedEvent.emit(this.componentType); @@ -41,6 +45,6 @@ export class ComponentTypeSelectorComponent { } private getComponentIndex(componentType: string): number { - return this.componentTypes.findIndex((type) => type.type === componentType); + return this.componentTypes?.findIndex((type) => type?.type === componentType) ?? -1; } } diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts index 66487163d3b..accb0b63fd3 100644 --- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts +++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts @@ -3,12 +3,13 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; import { EditComponentComponent } from '../edit-component/edit-component.component'; import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; -import { ComponentTypeService } from '../../../services/componentTypeService'; +import { MatIconModule } from '@angular/material/icon'; import { MatSlideToggle } from '@angular/material/slide-toggle'; import { FormsModule } from '@angular/forms'; import { Component as WISEComponent } from '../../../common/Component'; import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component'; import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { ComponentInfoService } from '../../../services/componentInfoService'; @Component({ encapsulation: ViewEncapsulation.None, @@ -19,11 +20,15 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; MatButtonModule, MatDialogModule, MatDividerModule, + MatIconModule, MatSlideToggle ], template: ` -
-

Edit: {{ componentIndex }}. {{ componentTypeLabel }}

+
+

+ Edit: {{ componentIndex }}. {{ componentTypeLabel }} + {{ componentTypeIcon }} +

Advanced
@@ -74,10 +79,11 @@ export class EditComponentDialogComponent { protected advancedMode = false; protected component: WISEComponent; protected componentIndex: number; + protected componentTypeIcon: string; protected componentTypeLabel: string; constructor( - private componentTypeService: ComponentTypeService, + private componentInfoService: ComponentInfoService, @Inject(MAT_DIALOG_DATA) public data: any, private projectService: TeacherProjectService ) { @@ -86,8 +92,11 @@ export class EditComponentDialogComponent { this.projectService .getNode(this.data.nodeId) .getComponentIndex(this.data.componentContent.id) + 1; - this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel( - this.data.componentContent.type - ); + this.componentTypeIcon = this.componentInfoService + .getInfo(this.data.componentContent.type) + .getIcon(); + this.componentTypeLabel = this.componentInfoService + .getInfo(this.data.componentContent.type) + .getLabel(); } } 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 a77d8e31043..e4564428753 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 @@ -21,7 +21,7 @@ @for (component of components; track component.id; let i = $index; let last = $last) {
- +
@if (components.length > 1) { @@ -29,7 +29,11 @@ >drag_indicator } - {{ i + 1 }}. {{ getComponentTypeLabel(component.type) }} + + {{ i + 1 }}. + {{ getComponentTypeIcon(component.type) }} + {{ getComponentTypeLabel(component.type) }} +
@if (hasVisibilityConstraint(component)) { 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 83ae765cf27..dc3da68ed52 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, Input, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; import { TeacherDataService } from '../../../services/teacherDataService'; import { TeacherProjectService } from '../../../services/teacherProjectService'; -import { ComponentTypeService } from '../../../services/componentTypeService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; import { Node } from '../../../common/Node'; import { ComponentContent } from '../../../common/ComponentContent'; @@ -27,6 +26,7 @@ import { ComponentAuthoringComponent } from '../../components/component-authorin import { ToggleComponentTagComponent } from '../../components/toggle-component-tag/toggle-component-tag.component'; import { VisibilityConstraintIconComponent } from '../../components/visibility-constraint-icon/visibility-constraint-icon.component'; import { EditNodeAdvancedButtonComponent } from '../../components/edit-node-advanced-button/edit-node-advanced-button.component'; +import { ComponentInfoService } from '../../../services/componentInfoService'; @Component({ imports: [ @@ -61,8 +61,8 @@ export class NodeAuthoringComponent implements OnInit { private subscriptions: Subscription = new Subscription(); constructor( + private componentInfoService: ComponentInfoService, private componentServiceLookupService: ComponentServiceLookupService, - private componentTypeService: ComponentTypeService, private nodeService: TeacherNodeService, private projectService: TeacherProjectService, private dataService: TeacherDataService, @@ -221,8 +221,12 @@ export class NodeAuthoringComponent implements OnInit { }, 100); } + protected getComponentTypeIcon(componentType: string): string { + return this.componentInfoService.getInfo(componentType).getIcon(); + } + protected getComponentTypeLabel(componentType: string): string { - return this.componentTypeService.getComponentTypeLabel(componentType); + return this.componentInfoService.getInfo(componentType).getLabel(); } protected hasVisibilityConstraint(component: ComponentContent): boolean { diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.spec.ts index c5af15a40a9..1300b94c51d 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.spec.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.spec.ts @@ -8,6 +8,8 @@ import { MultipleChoiceService } from '../../../components/multipleChoice/multip import { ComponentCompletionComponent } from './component-completion.component'; import { ClassroomStatusService } from '../../../services/classroomStatusService'; +import { ComponentInfoService } from '../../../services/componentInfoService'; + let component: ComponentCompletionComponent; let fixture: ComponentFixture; let workgroupService: WorkgroupService; @@ -21,11 +23,12 @@ describe('ComponentCompletionComponent', () => { providers: [ MockProviders( ClassroomStatusService, + ComponentInfoService, ComponentServiceLookupService, - MultipleChoiceService, TeacherDataService, WorkgroupService - ) + ), + MultipleChoiceService ] }).compileComponents(); @@ -50,7 +53,7 @@ function ngOnChanges() { workgroups.set(2, {}); spyOn(workgroupService, 'getWorkgroupsInPeriod').and.returnValue(workgroups); spyOn(componentServiceLookupService, 'getService').and.returnValue( - new MultipleChoiceService() + TestBed.inject(MultipleChoiceService) ); spyOn(classroomStatusService, 'hasStudentStatus').and.returnValue(true); }); diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html index 2c63d22028e..6506d74d2c2 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html @@ -66,9 +66,10 @@ >

- Step {{ getNodePosition(firstNodeId) }} ({{ - getComponentTypeLabel(firstComponent.type) - }})  + Step {{ getNodePosition(firstNodeId) }} ({{ + getComponentTypeIcon(firstComponent.type) + }} + {{ getComponentTypeLabel(firstComponent.type) }})  >

- Step {{ getNodePosition(lastNodeId) }} ({{ - getComponentTypeLabel(lastComponent.type) - }})  + Step {{ getNodePosition(lastNodeId) }} ({{ + getComponentTypeIcon(lastComponent.type) + }}{{ getComponentTypeLabel(lastComponent.type) }})  } @else if (components.length > 1) { @@ -17,7 +17,9 @@ @for (component of components; track component.id; let i = $index) { - {{ component.displayIndex }}: {{ getComponentTypeLabel(component.type) }} + {{ component.displayIndex }}. + {{ getComponentTypeIcon(component.type) }} + {{ getComponentTypeLabel(component.type) }} @if (component.tags?.includes('!important')) { Question Summaries

@for (component of components; track component; let i = $index) { - {{ i + 1 }}. {{ getComponentTypeLabel(component.type) }} + {{ i + 1 }}.  + {{ getComponentTypeIcon(component.type) }} +  {{ getComponentTypeLabel(component.type) }} @if (component.tags?.includes('!important')) {  
-

- {{ component.displayIndex + '. ' + getComponentTypeLabel(component.type) }}  +

+ {{ component.displayIndex }}. + {{ getComponentTypeIcon(component.type) }} + {{ getComponentTypeLabel(component.type) }} { beforeEach(() => { TestBed.configureTestingModule({ providers: [ - MockProviders(ComponentServiceLookupService, MultipleChoiceService, StudentDataService), + MockProviders(ComponentInfoService, ComponentServiceLookupService, StudentDataService), + MultipleChoiceService, provideHttpClient() ] }); strategy = new ChoiceChosenConstraintStrategy(); componentServiceLookupService = TestBed.inject(ComponentServiceLookupService); - spyOn(componentServiceLookupService, 'getService').and.returnValue(new MultipleChoiceService()); + spyOn(componentServiceLookupService, 'getService').and.returnValue( + TestBed.inject(MultipleChoiceService) + ); strategy.componentServiceLookupService = componentServiceLookupService; dataService = TestBed.inject(StudentDataService); strategy.dataService = dataService; diff --git a/src/assets/wise5/components/ComponentInfo.ts b/src/assets/wise5/components/ComponentInfo.ts index a9d5295dc17..2e47e3213e4 100644 --- a/src/assets/wise5/components/ComponentInfo.ts +++ b/src/assets/wise5/components/ComponentInfo.ts @@ -1,5 +1,6 @@ export abstract class ComponentInfo { protected abstract description: string; + protected abstract icon: string; protected abstract label: string; protected abstract previewExamples: any[]; @@ -11,6 +12,10 @@ export abstract class ComponentInfo { return this.label; } + getIcon(): string { + return this.icon; + } + getPreviewExamples(): any[] { return this.previewExamples; } diff --git a/src/assets/wise5/components/aiChat/AiChatInfo.ts b/src/assets/wise5/components/aiChat/AiChatInfo.ts index aa8942c6b8a..8e445526bd6 100644 --- a/src/assets/wise5/components/aiChat/AiChatInfo.ts +++ b/src/assets/wise5/components/aiChat/AiChatInfo.ts @@ -1,7 +1,8 @@ import { ComponentInfo } from '../ComponentInfo'; export class AiChatInfo extends ComponentInfo { - protected description: string = $localize`Students chat with an AI bot.`; + protected description: string = $localize`Students chat with an AI chatbot.`; + protected icon: string = 'assistant'; protected label: string = $localize`AI Chat`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/aiChat/aiChatService.ts b/src/assets/wise5/components/aiChat/aiChatService.ts index 092f19b56ec..9669ea55506 100644 --- a/src/assets/wise5/components/aiChat/aiChatService.ts +++ b/src/assets/wise5/components/aiChat/aiChatService.ts @@ -1,22 +1,19 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { ComponentService } from '../componentService'; import { AiChatMessage } from './AiChatMessage'; import { AiChatMessageReponse } from './AiChatMessageResponse'; import { ComputerAvatarService } from '../../services/computerAvatarService'; + @Injectable() export class AiChatService extends ComponentService { - constructor(protected computerAvatarService: ComputerAvatarService) { - super(); - } + protected type: string = 'AiChat'; - getComponentTypeLabel() { - return $localize`AI Chat`; - } + protected computerAvatarService = inject(ComputerAvatarService); createComponent(): any { const component: any = super.createComponent(); - component.type = 'AiChat'; + component.type = this.type; component.computerAvatarSettings = this.computerAvatarService.getDefaultComputerAvatarSettings(); component.isComputerAvatarEnabled = false; diff --git a/src/assets/wise5/components/animation/AnimationInfo.ts b/src/assets/wise5/components/animation/AnimationInfo.ts index 27de3239f6e..8dc1eb15b05 100644 --- a/src/assets/wise5/components/animation/AnimationInfo.ts +++ b/src/assets/wise5/components/animation/AnimationInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class AnimationInfo extends ComponentInfo { protected description: string = $localize`Students watch an animation.`; + protected icon: string = 'animation'; protected label: string = $localize`Animation`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/animation/animationService.ts b/src/assets/wise5/components/animation/animationService.ts index 404507bd8d9..0d1d2eaa7cf 100644 --- a/src/assets/wise5/components/animation/animationService.ts +++ b/src/assets/wise5/components/animation/animationService.ts @@ -5,9 +5,8 @@ import { Injectable } from '@angular/core'; @Injectable() export class AnimationService extends ComponentService { - getComponentTypeLabel(): string { - return $localize`Animation`; - } + protected type: string = 'Animation'; + getSvgId(domIdEnding: string): string { return `svg-${domIdEnding}`; @@ -15,7 +14,7 @@ export class AnimationService extends ComponentService { createComponent() { const component: any = super.createComponent(); - component.type = 'Animation'; + component.type = this.type; component.widthInPixels = 600; component.widthInUnits = 60; component.heightInPixels = 200; diff --git a/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts b/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts index cfd2406958a..c02acfad721 100644 --- a/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts +++ b/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class AudioOscillatorInfo extends ComponentInfo { protected description: string = $localize`Students change the frequency and amplitude of a sound wave. They listen to the resulting sounds and view graphs of the waves.`; + protected icon: string = 'waves'; protected label: string = $localize`Audio Oscillator`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/audioOscillator/audioOscillatorService.ts b/src/assets/wise5/components/audioOscillator/audioOscillatorService.ts index 67661864ae1..3d5cf5d14fc 100644 --- a/src/assets/wise5/components/audioOscillator/audioOscillatorService.ts +++ b/src/assets/wise5/components/audioOscillator/audioOscillatorService.ts @@ -3,13 +3,11 @@ import { Injectable } from '@angular/core'; @Injectable() export class AudioOscillatorService extends ComponentService { + protected type: string = 'AudioOscillator'; defaultStartingAmplitude: number = 44; defaultStartingFrequency: number = 440; maxAmplitude: number = 50; - getComponentTypeLabel(): string { - return $localize`Audio Oscillator`; - } getOscilloscopeId(domIdEnding: string): string { return `oscilloscope-${domIdEnding}`; @@ -17,7 +15,7 @@ export class AudioOscillatorService extends ComponentService { createComponent() { const component: any = super.createComponent(); - component.type = 'AudioOscillator'; + component.type = this.type; component.oscillatorTypes = ['sine']; component.startingAmplitude = this.defaultStartingAmplitude; component.startingFrequency = this.defaultStartingFrequency; diff --git a/src/assets/wise5/components/componentService.ts b/src/assets/wise5/components/componentService.ts index 486b23ab354..22ab969af2a 100644 --- a/src/assets/wise5/components/componentService.ts +++ b/src/assets/wise5/components/componentService.ts @@ -1,13 +1,15 @@ 'use strict'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { Subject } from 'rxjs'; import { generateRandomKey } from '../common/string/string'; +import { ComponentInfoService } from '../services/componentInfoService'; import { ComponentStateRequest } from './ComponentStateRequest'; import { ComponentStateWrapper } from './ComponentStateWrapper'; @Injectable() export class ComponentService { + protected type: string = ''; private requestComponentStateSource = new Subject(); public requestComponentStateSource$ = this.requestComponentStateSource.asObservable(); private sendComponentStateSource = new Subject(); @@ -15,6 +17,8 @@ export class ComponentService { private notifyConnectedComponentSource = new Subject(); public notifyConnectedComponentSource$ = this.notifyConnectedComponentSource.asObservable(); + protected componentInfoService = inject(ComponentInfoService); + getDomIdEnding(nodeId: string, componentId: string, componentState: any): string { if (componentState == null) { return `${nodeId}-${componentId}`; @@ -56,7 +60,15 @@ export class ComponentService { * @returns {string} */ getComponentTypeLabel(): string { - return ''; + return this.componentInfoService.getInfo(this.type)?.getLabel() || ''; + } + + /** + * Get the component type Google Font Material icon name. For example "edit_note". + * @returns {string} + */ + getComponentTypeIcon(): string { + return this.componentInfoService.getInfo(this.type)?.getIcon() || ''; } /** diff --git a/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts b/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts index a721fba2cc5..08f4b0992a2 100644 --- a/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts +++ b/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class ConceptMapInfo extends ComponentInfo { protected description: string = $localize`Students add items to a canvas and connect the items with links.`; + protected icon: string = 'account_tree'; protected label: string = $localize`Concept Map`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/conceptMap/conceptMapService.ts b/src/assets/wise5/components/conceptMap/conceptMapService.ts index eb7233f6b5a..1252391fac6 100644 --- a/src/assets/wise5/components/conceptMap/conceptMapService.ts +++ b/src/assets/wise5/components/conceptMap/conceptMapService.ts @@ -6,21 +6,15 @@ import { ConfigService } from '../../services/configService'; import { StudentAssetService } from '../../services/studentAssetService'; import ConceptMapNode from './conceptMapNode'; import ConceptMapLink from './conceptMapLink'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class ConceptMapService extends ComponentService { - constructor( - private ConfigService: ConfigService, - private StudentAssetService: StudentAssetService - ) { - super(); - } + protected type: string = 'ConceptMap'; - getComponentTypeLabel(): string { - return $localize`Concept Map`; - } + private ConfigService = inject(ConfigService); + private StudentAssetService = inject(StudentAssetService); getSVGId(domIdEnding: string): string { return this.getElementId('svg', domIdEnding); @@ -40,7 +34,7 @@ export class ConceptMapService extends ComponentService { createComponent() { const component: any = super.createComponent(); - component.type = 'ConceptMap'; + component.type = this.type; component.width = 800; component.height = 600; component.background = null; diff --git a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts index a38e2b3b2b9..d3fc528f6d8 100644 --- a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts +++ b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class DialogGuidanceInfo extends ComponentInfo { protected description: string = $localize`Students chat with a computer avatar about a specific topic.`; + protected icon: string = 'chat'; protected label: string = $localize`Dialog`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts index 253dec3846e..bc155d67de5 100644 --- a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts +++ b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts @@ -1,21 +1,17 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { ComputerAvatarService } from '../../services/computerAvatarService'; import { ComponentService } from '../componentService'; import { DEFAULT_IDEAS_SUMMARY_GROUPS } from '../common/cRater/CRaterRubric'; @Injectable() export class DialogGuidanceService extends ComponentService { - constructor(protected computerAvatarService: ComputerAvatarService) { - super(); - } + protected type: string = 'DialogGuidance'; - getComponentTypeLabel(): string { - return $localize`Dialog`; - } + protected computerAvatarService = inject(ComputerAvatarService); createComponent() { const component: any = super.createComponent(); - component.type = 'DialogGuidance'; + component.type = this.type; component.itemId = ''; component.feedbackRules = []; component.isComputerAvatarEnabled = false; diff --git a/src/assets/wise5/components/discussion/DiscussionInfo.ts b/src/assets/wise5/components/discussion/DiscussionInfo.ts index 44a2389ad45..a45600c4058 100644 --- a/src/assets/wise5/components/discussion/DiscussionInfo.ts +++ b/src/assets/wise5/components/discussion/DiscussionInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class DiscussionInfo extends ComponentInfo { protected description: string = $localize`Students post messages for the whole class to see and can reply to other students' posts.`; + protected icon: string = 'forum'; protected label: string = $localize`Discussion`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/discussion/discussionService.ts b/src/assets/wise5/components/discussion/discussionService.ts index 2a7ed4abfae..e8b2f26039f 100644 --- a/src/assets/wise5/components/discussion/discussionService.ts +++ b/src/assets/wise5/components/discussion/discussionService.ts @@ -1,6 +1,6 @@ import { ComponentService } from '../componentService'; import { ConfigService } from '../../services/configService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { forkJoin, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -9,20 +9,14 @@ import { Anonymizer } from './Anonymizer'; @Injectable() export class DiscussionService extends ComponentService { - constructor( - protected configService: ConfigService, - protected http: HttpClient - ) { - super(); - } + protected type: string = 'Discussion'; - getComponentTypeLabel(): string { - return $localize`Discussion`; - } + protected configService = inject(ConfigService); + protected http = inject(HttpClient); createComponent() { const component: any = super.createComponent(); - component.type = 'Discussion'; + component.type = this.type; component.prompt = ''; component.isStudentAttachmentEnabled = true; component.gateClassmateResponses = true; diff --git a/src/assets/wise5/components/discussion/teacherDiscussionService.ts b/src/assets/wise5/components/discussion/teacherDiscussionService.ts index 1005076dcc6..ef676a32c33 100644 --- a/src/assets/wise5/components/discussion/teacherDiscussionService.ts +++ b/src/assets/wise5/components/discussion/teacherDiscussionService.ts @@ -1,18 +1,14 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { ConfigService } from '../../services/configService'; +import { Injectable, inject, Injector } from '@angular/core'; import { TeacherDataService } from '../../services/teacherDataService'; import { DiscussionService } from './discussionService'; import { getIntersectOfArrays } from '../../common/array/array'; @Injectable() export class TeacherDiscussionService extends DiscussionService { - constructor( - protected http: HttpClient, - protected configService: ConfigService, - protected dataService: TeacherDataService - ) { - super(configService, http); + private injector = inject(Injector); + + protected get dataService(): TeacherDataService { + return this.injector.get(TeacherDataService); } getPostsAssociatedWithComponentIdsAndWorkgroupId(componentIds: string[], workgroupId: number) { diff --git a/src/assets/wise5/components/draw/DrawInfo.ts b/src/assets/wise5/components/draw/DrawInfo.ts index 3acb058012f..58cef6b2205 100644 --- a/src/assets/wise5/components/draw/DrawInfo.ts +++ b/src/assets/wise5/components/draw/DrawInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class DrawInfo extends ComponentInfo { protected description: string = $localize`Students draw on a canvas using a variety of tools.`; + protected icon: string = 'draw'; protected label: string = $localize`Draw`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/draw/drawService.ts b/src/assets/wise5/components/draw/drawService.ts index 8d1d99ed0cb..e1a782b9007 100644 --- a/src/assets/wise5/components/draw/drawService.ts +++ b/src/assets/wise5/components/draw/drawService.ts @@ -8,11 +8,12 @@ window['EventEmitter2'] = EventEmitter2; import DrawingTool from '@wise-community/drawing-tool/dist/drawing-tool'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class DrawService extends ComponentService { + protected type: string = 'Draw'; toolFieldToLabel: any = { select: 'Select tool', line: 'Line tool (click and hold to show available line types)', @@ -31,17 +32,11 @@ export class DrawService extends ComponentService { delete: 'Delete selected objects' }; - constructor(private StudentAssetService: StudentAssetService) { - super(); - } - - getComponentTypeLabel(): string { - return $localize`Draw`; - } + private StudentAssetService = inject(StudentAssetService); createComponent() { const component: any = super.createComponent(); - component.type = 'Draw'; + component.type = this.type; component.stamps = { Stamps: [] }; diff --git a/src/assets/wise5/components/embedded/EmbeddedInfo.ts b/src/assets/wise5/components/embedded/EmbeddedInfo.ts index 9dce9918095..727a9d8c63a 100644 --- a/src/assets/wise5/components/embedded/EmbeddedInfo.ts +++ b/src/assets/wise5/components/embedded/EmbeddedInfo.ts @@ -2,6 +2,7 @@ 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 icon: string = 'handyman'; protected label: string = $localize`Custom`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/embedded/embeddedService.ts b/src/assets/wise5/components/embedded/embeddedService.ts index d82d5fa7a0e..ca96d4e7b19 100644 --- a/src/assets/wise5/components/embedded/embeddedService.ts +++ b/src/assets/wise5/components/embedded/embeddedService.ts @@ -4,35 +4,28 @@ import $ from 'jquery'; import html2canvas from 'html2canvas'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { ConfigService } from '../../services/configService'; import { copy } from '../../common/object/object'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class EmbeddedService extends ComponentService { + protected type: string = 'Embedded'; defaultWidth: string = '100%'; defaultHeight: string = '600px'; iframePrefix: string = 'embedded-application-iframe-'; - constructor( - protected ConfigService: ConfigService, - protected StudentAssetService: StudentAssetService - ) { - super(); - } + protected ConfigService = inject(ConfigService); + protected StudentAssetService = inject(StudentAssetService); getEmbeddedApplicationIframeId(componentId: string): string { return `${this.iframePrefix}-${componentId}`; } - getComponentTypeLabel(): string { - return $localize`Custom`; - } - createComponent() { const component: any = super.createComponent(); - component.type = 'Embedded'; + component.type = this.type; component.url = ''; component.height = 600; return component; diff --git a/src/assets/wise5/components/graph/GraphInfo.ts b/src/assets/wise5/components/graph/GraphInfo.ts index 026ae41682f..a17798ed424 100644 --- a/src/assets/wise5/components/graph/GraphInfo.ts +++ b/src/assets/wise5/components/graph/GraphInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class GraphInfo extends ComponentInfo { protected description: string = $localize`Students view graph data or add points to a graph.`; + protected icon: string = 'bar_chart'; protected label: string = $localize`Graph`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/graph/graphService.ts b/src/assets/wise5/components/graph/graphService.ts index cb690ff10ce..e3789617c46 100644 --- a/src/assets/wise5/components/graph/graphService.ts +++ b/src/assets/wise5/components/graph/graphService.ts @@ -1,7 +1,7 @@ 'use strict'; import html2canvas from 'html2canvas'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; import { ConfigService } from '../../services/configService'; @@ -11,19 +11,12 @@ import { hasConnectedComponent } from '../../common/ComponentContent'; @Injectable() export class GraphService extends ComponentService { + protected type: string = 'Graph'; seriesColors: string[] = ['blue', 'red', 'green', 'orange', 'purple', 'black']; - constructor( - private configService: ConfigService, - private http: HttpClient, - private StudentAssetService: StudentAssetService - ) { - super(); - } - - getComponentTypeLabel(): string { - return $localize`Graph`; - } + private configService = inject(ConfigService); + private http = inject(HttpClient); + private StudentAssetService = inject(StudentAssetService); /** * Create a Graph component object @@ -31,7 +24,7 @@ export class GraphService extends ComponentService { */ createComponent() { const component: any = super.createComponent(); - component.type = 'Graph'; + component.type = this.type; component.title = ''; component.width = 800; component.height = 500; diff --git a/src/assets/wise5/components/html/HtmlInfo.ts b/src/assets/wise5/components/html/HtmlInfo.ts index f6f3595a90f..aa35dc8c46c 100644 --- a/src/assets/wise5/components/html/HtmlInfo.ts +++ b/src/assets/wise5/components/html/HtmlInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class HtmlInfo extends ComponentInfo { protected description: string = $localize`Students view rich text (HTML) content.`; + protected icon: string = 'newspaper'; protected label: string = $localize`Display Content`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/html/htmlService.ts b/src/assets/wise5/components/html/htmlService.ts index 644784511b7..d1b99b9f65c 100644 --- a/src/assets/wise5/components/html/htmlService.ts +++ b/src/assets/wise5/components/html/htmlService.ts @@ -3,13 +3,12 @@ import { Injectable } from '@angular/core'; @Injectable() export class HTMLService extends ComponentService { - getComponentTypeLabel(): string { - return $localize`Display Content`; - } + protected type: string = 'HTML'; + createComponent() { const component: any = super.createComponent(); - component.type = 'HTML'; + component.type = this.type; component.html = $localize`Enter content here`; return component; } diff --git a/src/assets/wise5/components/label/LabelInfo.ts b/src/assets/wise5/components/label/LabelInfo.ts index 7031b54a342..78b89857df8 100644 --- a/src/assets/wise5/components/label/LabelInfo.ts +++ b/src/assets/wise5/components/label/LabelInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class LabelInfo extends ComponentInfo { protected description: string = $localize`Students add labels to a canvas.`; + protected icon: string = 'sticky_note_2'; protected label: string = $localize`Label`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/label/labelService.ts b/src/assets/wise5/components/label/labelService.ts index 70c51a3efde..ad654f131e2 100644 --- a/src/assets/wise5/components/label/labelService.ts +++ b/src/assets/wise5/components/label/labelService.ts @@ -2,7 +2,7 @@ import { fabric } from 'fabric'; import SVG from 'svg.js'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; import { wordWrap } from '../../common/string/string'; import { hasConnectedComponent } from '../../common/ComponentContent'; @@ -10,18 +10,13 @@ import { labelArraysAreTheSame, makeSureValueIsWithinLimit } from './label'; @Injectable() export class LabelService extends ComponentService { + protected type: string = 'Label'; lineZIndex: number = 0; textZIndex: number = 1; circleZIndex: number = 2; defaultTextBackgroundColor: string = 'blue'; - constructor(private assetService: StudentAssetService) { - super(); - } - - getComponentTypeLabel(): string { - return $localize`Label`; - } + private assetService = inject(StudentAssetService); getCanvasId(domIdEnding: string): string { return this.getElementId('canvas', domIdEnding); @@ -29,7 +24,7 @@ export class LabelService extends ComponentService { createComponent() { const component: any = super.createComponent(); - component.type = 'Label'; + component.type = this.type; component.backgroundImage = ''; component.canCreateLabels = true; component.canEditLabels = true; diff --git a/src/assets/wise5/components/match/MatchInfo.ts b/src/assets/wise5/components/match/MatchInfo.ts index 067b6dc941c..d8164f4d382 100644 --- a/src/assets/wise5/components/match/MatchInfo.ts +++ b/src/assets/wise5/components/match/MatchInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class MatchInfo extends ComponentInfo { protected description: string = $localize`Students sort items into different buckets.`; + protected icon: string = 'category'; protected label: string = $localize`Sort`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/match/matchService.ts b/src/assets/wise5/components/match/matchService.ts index 9ca8dec00fc..0c97c77e952 100644 --- a/src/assets/wise5/components/match/matchService.ts +++ b/src/assets/wise5/components/match/matchService.ts @@ -4,13 +4,12 @@ import { MatchContent } from './MatchContent'; @Injectable() export class MatchService extends ComponentService { - getComponentTypeLabel(): string { - return $localize`Sort`; - } + protected type: string = 'Match'; + createComponent() { const component: any = super.createComponent(); - component.type = 'Match'; + component.type = this.type; component.choices = []; component.choiceReuseEnabled = false; component.buckets = []; diff --git a/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts b/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts index 714915549c7..1e93d89f4af 100644 --- a/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts +++ b/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class MultipleChoiceInfo extends ComponentInfo { protected description: string = $localize`Students select one or more choices.`; + protected icon: string = 'ballot'; protected label: string = $localize`Multiple Choice`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/multipleChoice/multipleChoiceService.ts b/src/assets/wise5/components/multipleChoice/multipleChoiceService.ts index 902cd798f04..279ddb935de 100644 --- a/src/assets/wise5/components/multipleChoice/multipleChoiceService.ts +++ b/src/assets/wise5/components/multipleChoice/multipleChoiceService.ts @@ -6,13 +6,12 @@ import { generateRandomKey } from '../../common/string/string'; @Injectable() export class MultipleChoiceService extends ComponentService { - getComponentTypeLabel(): string { - return $localize`Multiple Choice`; - } + protected type: string = 'MultipleChoice'; + createComponent(): any { const component: any = super.createComponent(); - component.type = 'MultipleChoice'; + component.type = this.type; component.prompt = $localize`Choose an option from below`; component.choiceType = 'radio'; component.choices = [ diff --git a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts index cf66116da26..8479cf9ada0 100644 --- a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts +++ b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class OpenResponseInfo extends ComponentInfo { protected description: string = $localize`Students type a response to a question or prompt.`; + protected icon: string = 'edit_note'; protected label: string = $localize`Open Response`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/openResponse/openResponseService.ts b/src/assets/wise5/components/openResponse/openResponseService.ts index 7c576e391c6..7626768078f 100644 --- a/src/assets/wise5/components/openResponse/openResponseService.ts +++ b/src/assets/wise5/components/openResponse/openResponseService.ts @@ -1,22 +1,19 @@ 'use strict'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { ComponentService } from '../componentService'; import { OpenResponseCompletionCriteriaService } from './openResponseCompletionCriteriaService'; + @Injectable() export class OpenResponseService extends ComponentService { - constructor(private completionCriteriaService: OpenResponseCompletionCriteriaService) { - super(); - } + protected type: string = 'OpenResponse'; - getComponentTypeLabel(): string { - return $localize`Open Response`; - } + private completionCriteriaService = inject(OpenResponseCompletionCriteriaService); createComponent() { const component: any = super.createComponent(); - component.type = 'OpenResponse'; + component.type = this.type; component.starterSentence = null; component.isStudentAttachmentEnabled = false; component.ai = { diff --git a/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts b/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts index 13616598d58..240a76955e3 100644 --- a/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts +++ b/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class OutsideUrlInfo extends ComponentInfo { protected description: string = $localize`Students view an external website.`; + protected icon: string = 'web'; protected label: string = $localize`Outside Resource`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/outsideURL/outsideURLService.ts b/src/assets/wise5/components/outsideURL/outsideURLService.ts index 61cd3d2e563..35d1357d731 100644 --- a/src/assets/wise5/components/outsideURL/outsideURLService.ts +++ b/src/assets/wise5/components/outsideURL/outsideURLService.ts @@ -1,22 +1,18 @@ 'use strict'; import { ComponentService } from '../componentService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class OutsideURLService extends ComponentService { - constructor(private http: HttpClient) { - super(); - } + protected type: string = 'OutsideURL'; - getComponentTypeLabel(): string { - return $localize`Outside Resource`; - } + private http = inject(HttpClient); createComponent() { const component: any = super.createComponent(); - component.type = 'OutsideURL'; + component.type = this.type; component.url = ''; component.height = 600; return component; diff --git a/src/assets/wise5/components/peerChat/PeerChatInfo.ts b/src/assets/wise5/components/peerChat/PeerChatInfo.ts index 8d4bb39294f..e161ad9213a 100644 --- a/src/assets/wise5/components/peerChat/PeerChatInfo.ts +++ b/src/assets/wise5/components/peerChat/PeerChatInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class PeerChatInfo extends ComponentInfo { protected description: string = $localize`Students are grouped with other students to discuss a topic.`; + protected icon: string = 'people'; protected label: string = $localize`Peer Chat`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/peerChat/peerChatService.ts b/src/assets/wise5/components/peerChat/peerChatService.ts index 82547b04a76..0b0b1096523 100644 --- a/src/assets/wise5/components/peerChat/peerChatService.ts +++ b/src/assets/wise5/components/peerChat/peerChatService.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { Observable } from 'rxjs'; import { ConfigService } from '../../services/configService'; import { ComponentService } from '../componentService'; @@ -8,17 +8,14 @@ import { getAvatarColorForWorkgroupId } from '../../common/workgroup/workgroup'; @Injectable() export class PeerChatService extends ComponentService { - constructor(private configService: ConfigService, private http: HttpClient) { - super(); - } + protected type: string = 'PeerChat'; - getComponentTypeLabel() { - return $localize`Peer Chat`; - } + private configService = inject(ConfigService); + private http = inject(HttpClient); createComponent(): any { const component: any = super.createComponent(); - component.type = 'PeerChat'; + component.type = this.type; component.peerGroupingTag = ''; return component; } diff --git a/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts b/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts index 92dac30f336..f7caaccc23f 100644 --- a/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts +++ b/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class ShowGroupWorkInfo extends ComponentInfo { protected description: string = $localize`Students are shown work that everyone in their group submitted for a specific item.`; + protected icon: string = 'co_present'; protected label: string = $localize`Show Group Work`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/showGroupWork/showGroupWorkService.ts b/src/assets/wise5/components/showGroupWork/showGroupWorkService.ts index ad4b6ea295e..fc33efb569e 100644 --- a/src/assets/wise5/components/showGroupWork/showGroupWorkService.ts +++ b/src/assets/wise5/components/showGroupWork/showGroupWorkService.ts @@ -3,13 +3,12 @@ import { ComponentService } from '../componentService'; @Injectable() export class ShowGroupWorkService extends ComponentService { - getComponentTypeLabel() { - return $localize`Show Group Work`; - } + protected type: string = 'ShowGroupWork'; + createComponent() { const component: any = super.createComponent(); - component.type = 'ShowGroupWork'; + component.type = this.type; component.showWorkNodeId = ''; component.showWorkComponentId = ''; component.peerGroupingTag = ''; diff --git a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts index 07aabd82e98..0b572ced71a 100644 --- a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts +++ b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts @@ -2,6 +2,7 @@ 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 icon: string = 'assignment'; protected label: string = $localize`Show Student Work`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/showMyWork/showMyWorkService.ts b/src/assets/wise5/components/showMyWork/showMyWorkService.ts index 78d78b0df45..728830cbbe0 100644 --- a/src/assets/wise5/components/showMyWork/showMyWorkService.ts +++ b/src/assets/wise5/components/showMyWork/showMyWorkService.ts @@ -3,13 +3,12 @@ import { ComponentService } from '../componentService'; @Injectable() export class ShowMyWorkService extends ComponentService { - getComponentTypeLabel() { - return $localize`Show Student Work`; - } + protected type: string = 'ShowMyWork'; + createComponent() { const component: any = super.createComponent(); - component.type = 'ShowMyWork'; + component.type = this.type; component.showWorkNodeId = ''; component.showWorkComponentId = ''; return component; diff --git a/src/assets/wise5/components/summary/SummaryInfo.ts b/src/assets/wise5/components/summary/SummaryInfo.ts index d95e8ee7e97..7057b4c8d19 100644 --- a/src/assets/wise5/components/summary/SummaryInfo.ts +++ b/src/assets/wise5/components/summary/SummaryInfo.ts @@ -2,6 +2,7 @@ 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 icon: string = 'pie_chart'; protected label: string = $localize`Summary Graph`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/summary/summaryService.ts b/src/assets/wise5/components/summary/summaryService.ts index b8b585fea2a..d7b4a96058d 100644 --- a/src/assets/wise5/components/summary/summaryService.ts +++ b/src/assets/wise5/components/summary/summaryService.ts @@ -2,47 +2,40 @@ import { ComponentService } from '../componentService'; import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { Observable } from 'rxjs'; + @Injectable() export class SummaryService extends ComponentService { - componentsWithScoresSummary: string[]; - componentsWithResponsesSummary: string[]; - - constructor(private http: HttpClient) { - super(); - this.componentsWithScoresSummary = [ - 'Animation', - 'AudioOscillator', - 'ConceptMap', - 'DialogGuidance', - 'Discussion', - 'Draw', - 'Embedded', - 'Graph', - 'Label', - 'Match', - 'MultipleChoice', - 'OpenResponse', - 'Table' - ]; - this.componentsWithResponsesSummary = [ - 'DialogGuidance', - 'Match', - 'MultipleChoice', - 'OpenResponse', - 'Table' - ]; - } - - getComponentTypeLabel(): string { - return $localize`Summary Graph`; - } + protected type: string = 'Summary'; + private http = inject(HttpClient); + componentsWithScoresSummary: string[] = [ + 'Animation', + 'AudioOscillator', + 'ConceptMap', + 'DialogGuidance', + 'Discussion', + 'Draw', + 'Embedded', + 'Graph', + 'Label', + 'Match', + 'MultipleChoice', + 'OpenResponse', + 'Table' + ]; + componentsWithResponsesSummary: string[] = [ + 'DialogGuidance', + 'Match', + 'MultipleChoice', + 'OpenResponse', + 'Table' + ]; createComponent() { const component: any = super.createComponent(); - component.type = 'Summary'; + component.type = this.type; component.summaryNodeId = null; component.summaryComponentId = null; component.source = 'period'; diff --git a/src/assets/wise5/components/table/TableInfo.ts b/src/assets/wise5/components/table/TableInfo.ts index 5e64a0155ec..c207a587908 100644 --- a/src/assets/wise5/components/table/TableInfo.ts +++ b/src/assets/wise5/components/table/TableInfo.ts @@ -2,6 +2,7 @@ import { ComponentInfo } from '../ComponentInfo'; export class TableInfo extends ComponentInfo { protected description: string = $localize`Students view and/or edit table data.`; + protected icon: string = 'table_chart'; protected label: string = $localize`Table`; protected previewExamples: any[] = [ { diff --git a/src/assets/wise5/components/table/tableService.ts b/src/assets/wise5/components/table/tableService.ts index 1a84570d09a..0f52850440d 100644 --- a/src/assets/wise5/components/table/tableService.ts +++ b/src/assets/wise5/components/table/tableService.ts @@ -3,22 +3,18 @@ import html2canvas from 'html2canvas'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class TableService extends ComponentService { - constructor(private StudentAssetService: StudentAssetService) { - super(); - } + protected type: string = 'Table'; - getComponentTypeLabel(): string { - return $localize`Table`; - } + private StudentAssetService = inject(StudentAssetService); createComponent() { const component: any = super.createComponent(); - component.type = 'Table'; + component.type = this.type; component.globalCellSize = 10; component.numRows = 3; component.numColumns = 3; diff --git a/src/assets/wise5/services/componentInfoService.ts b/src/assets/wise5/services/componentInfoService.ts index 650eab4dcff..fec57c74b18 100644 --- a/src/assets/wise5/services/componentInfoService.ts +++ b/src/assets/wise5/services/componentInfoService.ts @@ -21,7 +21,9 @@ import { TableInfo } from '../components/table/TableInfo'; import { ComponentInfo } from '../components/ComponentInfo'; import { AiChatInfo } from '../components/aiChat/AiChatInfo'; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class ComponentInfoService { private componentInfo = { AiChat: new AiChatInfo(), diff --git a/src/assets/wise5/services/componentTypeService.ts b/src/assets/wise5/services/componentTypeService.ts index b6e87e415a2..23a2f6c8d5a 100644 --- a/src/assets/wise5/services/componentTypeService.ts +++ b/src/assets/wise5/services/componentTypeService.ts @@ -16,53 +16,133 @@ export class ComponentTypeService { { name: $localize`View Information`, types: [ - { type: 'HTML', name: this.getComponentTypeLabel('HTML') }, - { type: 'ShowMyWork', name: this.getComponentTypeLabel('ShowMyWork') }, - { type: 'Summary', name: this.getComponentTypeLabel('Summary') } + { + type: 'HTML', + name: this.getComponentTypeLabel('HTML'), + icon: this.getComponentTypeIcon('HTML') + }, + { + type: 'ShowMyWork', + name: this.getComponentTypeLabel('ShowMyWork'), + icon: this.getComponentTypeIcon('ShowMyWork') + }, + { + type: 'Summary', + name: this.getComponentTypeLabel('Summary'), + icon: this.getComponentTypeIcon('Summary') + } ] }, { 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') } + { + type: 'ConceptMap', + name: this.getComponentTypeLabel('ConceptMap'), + icon: this.getComponentTypeIcon('ConceptMap') + }, + { + type: 'Draw', + name: this.getComponentTypeLabel('Draw'), + icon: this.getComponentTypeIcon('Draw') + }, + { + type: 'Label', + name: this.getComponentTypeLabel('Label'), + icon: this.getComponentTypeIcon('Label') + }, + { + type: 'MultipleChoice', + name: this.getComponentTypeLabel('MultipleChoice'), + icon: this.getComponentTypeIcon('MultipleChoice') + }, + { + type: 'OpenResponse', + name: this.getComponentTypeLabel('OpenResponse'), + icon: this.getComponentTypeIcon('OpenResponse') + }, + { + type: 'Match', + name: this.getComponentTypeLabel('Match'), + icon: this.getComponentTypeIcon('Match') + } ] }, { name: $localize`Experiment, Discover, 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') } + { + type: 'Animation', + name: this.getComponentTypeLabel('Animation'), + icon: this.getComponentTypeIcon('Animation') + }, + { + type: 'AudioOscillator', + name: this.getComponentTypeLabel('AudioOscillator'), + icon: this.getComponentTypeIcon('AudioOscillator') + }, + { + type: 'Embedded', + name: this.getComponentTypeLabel('Embedded'), + icon: this.getComponentTypeIcon('Embedded') + }, + { + type: 'Graph', + name: this.getComponentTypeLabel('Graph'), + icon: this.getComponentTypeIcon('Graph') + }, + { + type: 'OutsideURL', + name: this.getComponentTypeLabel('OutsideURL'), + icon: this.getComponentTypeIcon('OutsideURL') + }, + { + type: 'Table', + name: this.getComponentTypeLabel('Table'), + icon: this.getComponentTypeIcon('Table') + } ] }, { 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') } + { + type: 'DialogGuidance', + name: this.getComponentTypeLabel('DialogGuidance'), + icon: this.getComponentTypeIcon('DialogGuidance') + }, + { + type: 'Discussion', + name: this.getComponentTypeLabel('Discussion'), + icon: this.getComponentTypeIcon('Discussion') + }, + { + type: 'PeerChat', + name: this.getComponentTypeLabel('PeerChat'), + icon: this.getComponentTypeIcon('PeerChat') + }, + { + type: 'ShowGroupWork', + name: this.getComponentTypeLabel('ShowGroupWork'), + icon: this.getComponentTypeIcon('ShowGroupWork') + } ] } ]; if (this.isAiChatAllowed()) { - groups[2].types.unshift({ type: 'AiChat', name: this.getComponentTypeLabel('AiChat') }); + groups[2].types.unshift({ + type: 'AiChat', + name: this.getComponentTypeLabel('AiChat'), + icon: this.getComponentTypeIcon('AiChat') + }); } return groups; } - getComponentTypes(): any[] { - return this.getComponentGroups().flatMap((group) => group.types); + getComponentTypeIcon(componentType: string): string { + return this.componentServiceLookupService.getService(componentType).getComponentTypeIcon(); } getComponentTypeLabel(componentType: string): string { From 9b04ea193ad24de5a778c76520e829afd5f5912b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 29 Jul 2026 16:58:08 +0000 Subject: [PATCH 2/4] Updated messages --- src/messages.xlf | 250 ++++++++++++++++------------------------------- 1 file changed, 85 insertions(+), 165 deletions(-) diff --git a/src/messages.xlf b/src/messages.xlf index c55672fbc8c..c9be8800007 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1266,7 +1266,7 @@ src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html - 68,70 + 72,74 src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html @@ -1301,7 +1301,7 @@ src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html - 79,82 + 83,86 src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html @@ -2352,7 +2352,7 @@ src/assets/wise5/components/peerChat/peerChatService.ts - 65 + 62 @@ -9772,11 +9772,11 @@ src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.ts - 158 + 164 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 135 + 141 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -10447,7 +10447,7 @@ src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html - 49,51 + 53,55 @@ -11148,11 +11148,11 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.14,16 - - More Info + + More info src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html - 9,13 + 7,10 @@ -11166,21 +11166,21 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Next component type src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html - 22,26 + 35,39 Edit: . src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts - 26,27 + 29,30 Advanced src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts - 27,30 + 32,35 src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts @@ -11191,7 +11191,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. Close src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts - 44,49 + 49,54 src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html @@ -15041,7 +15041,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.ts - 167 + 173 @@ -15063,22 +15063,22 @@ The branches will be removed but the steps will remain in the unit. Step src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html - 69,70 + 69 src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html - 92,93 + 93 Not Assigned src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.ts - 154 + 160 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 130 + 136 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -15089,11 +15089,11 @@ The branches will be removed but the steps will remain in the unit. Partially Completed src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.ts - 162 + 168 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 142 + 148 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -15104,19 +15104,19 @@ The branches will be removed but the steps will remain in the unit. No Work src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.ts - 169 + 175 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 147 + 153 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts 108 - - 1 item () + + 1 question () src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.html 5,6 @@ -15126,11 +15126,11 @@ The branches will be removed but the steps will remain in the unit. Bookmarked activity src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/filter-components/filter-components.component.html - 25,27 + 27,29 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html - 51,53 + 53,55 src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/nav-item/nav-item.component.html @@ -15215,7 +15215,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html - 76,77 + 78,79 @@ -15226,21 +15226,21 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html - 78,81 + 80,83 Class Responses src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html - 68,71 + 70,73 Visited src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 137 + 143 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -15251,7 +15251,7 @@ The branches will be removed but the steps will remain in the unit. Not Visited src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-workgroup-item/node-workgroup-item.component.ts - 149 + 155 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -16612,8 +16612,8 @@ Are you sure you want to proceed? 54,57 - - Students chat with an AI bot. + + Students chat with an AI chatbot. src/assets/wise5/components/aiChat/AiChatInfo.ts 4 @@ -16623,15 +16623,11 @@ Are you sure you want to proceed? AI Chat src/assets/wise5/components/aiChat/AiChatInfo.ts - 5 + 6 src/assets/wise5/components/aiChat/AiChatInfo.ts - 8 - - - src/assets/wise5/components/aiChat/aiChatService.ts - 14 + 9 @@ -16894,14 +16890,10 @@ Are you sure you want to proceed? Animation src/assets/wise5/components/animation/AnimationInfo.ts - 5 + 6 src/assets/wise5/components/animation/AnimationInfo.ts - 8 - - - src/assets/wise5/components/animation/animationService.ts 9 @@ -17434,15 +17426,11 @@ Are you ready to receive feedback on this answer? Audio Oscillator src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts - 5 + 6 src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts - 8 - - - src/assets/wise5/components/audioOscillator/audioOscillatorService.ts - 11 + 9 @@ -18140,15 +18128,11 @@ Are you ready to receive feedback on this answer? Concept Map src/assets/wise5/components/conceptMap/ConceptMapInfo.ts - 5 + 6 src/assets/wise5/components/conceptMap/ConceptMapInfo.ts - 8 - - - src/assets/wise5/components/conceptMap/conceptMapService.ts - 22 + 9 @@ -18598,15 +18582,11 @@ Category Name: Dialog src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts - 5 + 6 src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts - 8 - - - src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts - 13 + 9 @@ -19360,15 +19340,11 @@ Category Name: Discussion src/assets/wise5/components/discussion/DiscussionInfo.ts - 5 + 6 src/assets/wise5/components/discussion/DiscussionInfo.ts - 8 - - - src/assets/wise5/components/discussion/discussionService.ts - 20 + 9 @@ -19575,15 +19551,11 @@ Category Name: Draw src/assets/wise5/components/draw/DrawInfo.ts - 5 + 6 src/assets/wise5/components/draw/DrawInfo.ts - 8 - - - src/assets/wise5/components/draw/drawService.ts - 39 + 9 @@ -19832,15 +19804,11 @@ Category Name: Custom src/assets/wise5/components/embedded/EmbeddedInfo.ts - 5 + 6 src/assets/wise5/components/embedded/EmbeddedInfo.ts - 8 - - - src/assets/wise5/components/embedded/embeddedService.ts - 30 + 9 @@ -19918,15 +19886,11 @@ Category Name: Graph src/assets/wise5/components/graph/GraphInfo.ts - 5 + 6 src/assets/wise5/components/graph/GraphInfo.ts - 8 - - - src/assets/wise5/components/graph/graphService.ts - 25 + 9 @@ -20756,35 +20720,35 @@ Category Name: Time (seconds) src/assets/wise5/components/graph/graphService.ts - 47 + 40 s src/assets/wise5/components/graph/graphService.ts - 52 + 45 Position (meters) src/assets/wise5/components/graph/graphService.ts - 59 + 52 m src/assets/wise5/components/graph/graphService.ts - 72 + 65 Prediction src/assets/wise5/components/graph/graphService.ts - 78 + 71 @@ -20798,22 +20762,18 @@ Category Name: Display Content src/assets/wise5/components/html/HtmlInfo.ts - 5 + 6 src/assets/wise5/components/html/HtmlInfo.ts - 8 - - - src/assets/wise5/components/html/htmlService.ts - 7 + 9 Enter content here src/assets/wise5/components/html/htmlService.ts - 13 + 12 @@ -20827,15 +20787,11 @@ Category Name: Label src/assets/wise5/components/label/LabelInfo.ts - 5 + 6 src/assets/wise5/components/label/LabelInfo.ts - 8 - - - src/assets/wise5/components/label/labelService.ts - 23 + 9 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -21063,15 +21019,11 @@ Category Name: Sort src/assets/wise5/components/match/MatchInfo.ts - 5 + 6 src/assets/wise5/components/match/MatchInfo.ts - 8 - - - src/assets/wise5/components/match/matchService.ts - 8 + 9 @@ -21400,18 +21352,14 @@ Warning: This will delete all existing choices and buckets in this activity.Multiple Choice src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts - 5 - - - src/assets/wise5/components/multipleChoice/multipleChoiceService.ts - 10 + 6 Single Answer src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts - 8 + 9 src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html @@ -21422,7 +21370,7 @@ Warning: This will delete all existing choices and buckets in this activity.Multiple Answer src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts - 39 + 40 src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html @@ -21495,21 +21443,21 @@ Warning: This will delete all existing choices in this activity. Choose an option from below src/assets/wise5/components/multipleChoice/multipleChoiceService.ts - 16 + 15 Choice 1 src/assets/wise5/components/multipleChoice/multipleChoiceService.ts - 19 + 18 Choice 2 src/assets/wise5/components/multipleChoice/multipleChoiceService.ts - 20 + 19 @@ -21523,15 +21471,11 @@ Warning: This will delete all existing choices in this activity. Open Response src/assets/wise5/components/openResponse/OpenResponseInfo.ts - 5 + 6 src/assets/wise5/components/openResponse/OpenResponseInfo.ts - 8 - - - src/assets/wise5/components/openResponse/openResponseService.ts - 14 + 9 @@ -22045,15 +21989,11 @@ If this problem continues, let your teacher know and move on to the next activit Outside Resource src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts - 5 + 6 src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts - 8 - - - src/assets/wise5/components/outsideURL/outsideURLService.ts - 14 + 9 @@ -22145,15 +22085,11 @@ If this problem continues, let your teacher know and move on to the next activit Peer Chat src/assets/wise5/components/peerChat/PeerChatInfo.ts - 5 + 6 src/assets/wise5/components/peerChat/PeerChatInfo.ts - 8 - - - src/assets/wise5/components/peerChat/peerChatService.ts - 16 + 9 @@ -22276,15 +22212,11 @@ If this problem continues, let your teacher know and move on to the next activit Show Group Work src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts - 5 + 6 src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts - 8 - - - src/assets/wise5/components/showGroupWork/showGroupWorkService.ts - 7 + 9 @@ -22393,15 +22325,11 @@ If this problem continues, let your teacher know and move on to the next activit Show Student Work src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts - 5 + 6 src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts - 8 - - - src/assets/wise5/components/showMyWork/showMyWorkService.ts - 7 + 9 @@ -22422,15 +22350,11 @@ If this problem continues, let your teacher know and move on to the next activit Summary Graph src/assets/wise5/components/summary/SummaryInfo.ts - 5 + 6 src/assets/wise5/components/summary/SummaryInfo.ts - 8 - - - src/assets/wise5/components/summary/summaryService.ts - 40 + 9 @@ -22619,15 +22543,11 @@ If this problem continues, let your teacher know and move on to the next activit Table src/assets/wise5/components/table/TableInfo.ts - 5 + 6 src/assets/wise5/components/table/TableInfo.ts - 8 - - - src/assets/wise5/components/table/tableService.ts - 16 + 9 @@ -23473,21 +23393,21 @@ If this problem continues, let your teacher know and move on to the next activit Explain and Assess src/assets/wise5/services/componentTypeService.ts - 25 + 37 Experiment, Discover, Distinguish src/assets/wise5/services/componentTypeService.ts - 36 + 72 Collaborate src/assets/wise5/services/componentTypeService.ts - 47 + 107 From d321e9cbd02bf90b67ae0e26bde38212ad466a6d Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Mon, 3 Aug 2026 13:08:00 -0700 Subject: [PATCH 3/4] Refactor to reduce duplication --- .../wise5/services/componentTypeService.ts | 128 ++++-------------- 1 file changed, 28 insertions(+), 100 deletions(-) diff --git a/src/assets/wise5/services/componentTypeService.ts b/src/assets/wise5/services/componentTypeService.ts index 23a2f6c8d5a..19898209d8b 100644 --- a/src/assets/wise5/services/componentTypeService.ts +++ b/src/assets/wise5/services/componentTypeService.ts @@ -16,131 +16,59 @@ export class ComponentTypeService { { name: $localize`View Information`, types: [ - { - type: 'HTML', - name: this.getComponentTypeLabel('HTML'), - icon: this.getComponentTypeIcon('HTML') - }, - { - type: 'ShowMyWork', - name: this.getComponentTypeLabel('ShowMyWork'), - icon: this.getComponentTypeIcon('ShowMyWork') - }, - { - type: 'Summary', - name: this.getComponentTypeLabel('Summary'), - icon: this.getComponentTypeIcon('Summary') - } + this.createComponentType('HTML'), + this.createComponentType('ShowMyWork'), + this.createComponentType('Summary') ] }, { name: $localize`Explain and Assess`, types: [ - { - type: 'ConceptMap', - name: this.getComponentTypeLabel('ConceptMap'), - icon: this.getComponentTypeIcon('ConceptMap') - }, - { - type: 'Draw', - name: this.getComponentTypeLabel('Draw'), - icon: this.getComponentTypeIcon('Draw') - }, - { - type: 'Label', - name: this.getComponentTypeLabel('Label'), - icon: this.getComponentTypeIcon('Label') - }, - { - type: 'MultipleChoice', - name: this.getComponentTypeLabel('MultipleChoice'), - icon: this.getComponentTypeIcon('MultipleChoice') - }, - { - type: 'OpenResponse', - name: this.getComponentTypeLabel('OpenResponse'), - icon: this.getComponentTypeIcon('OpenResponse') - }, - { - type: 'Match', - name: this.getComponentTypeLabel('Match'), - icon: this.getComponentTypeIcon('Match') - } + this.createComponentType('ConceptMap'), + this.createComponentType('Draw'), + this.createComponentType('Label'), + this.createComponentType('MultipleChoice'), + this.createComponentType('OpenResponse'), + this.createComponentType('Match') ] }, { name: $localize`Experiment, Discover, Distinguish`, types: [ - { - type: 'Animation', - name: this.getComponentTypeLabel('Animation'), - icon: this.getComponentTypeIcon('Animation') - }, - { - type: 'AudioOscillator', - name: this.getComponentTypeLabel('AudioOscillator'), - icon: this.getComponentTypeIcon('AudioOscillator') - }, - { - type: 'Embedded', - name: this.getComponentTypeLabel('Embedded'), - icon: this.getComponentTypeIcon('Embedded') - }, - { - type: 'Graph', - name: this.getComponentTypeLabel('Graph'), - icon: this.getComponentTypeIcon('Graph') - }, - { - type: 'OutsideURL', - name: this.getComponentTypeLabel('OutsideURL'), - icon: this.getComponentTypeIcon('OutsideURL') - }, - { - type: 'Table', - name: this.getComponentTypeLabel('Table'), - icon: this.getComponentTypeIcon('Table') - } + this.createComponentType('Animation'), + this.createComponentType('AudioOscillator'), + this.createComponentType('Embedded'), + this.createComponentType('Graph'), + this.createComponentType('OutsideURL'), + this.createComponentType('Table') ] }, { name: $localize`Collaborate`, types: [ - { - type: 'DialogGuidance', - name: this.getComponentTypeLabel('DialogGuidance'), - icon: this.getComponentTypeIcon('DialogGuidance') - }, - { - type: 'Discussion', - name: this.getComponentTypeLabel('Discussion'), - icon: this.getComponentTypeIcon('Discussion') - }, - { - type: 'PeerChat', - name: this.getComponentTypeLabel('PeerChat'), - icon: this.getComponentTypeIcon('PeerChat') - }, - { - type: 'ShowGroupWork', - name: this.getComponentTypeLabel('ShowGroupWork'), - icon: this.getComponentTypeIcon('ShowGroupWork') - } + this.createComponentType('DialogGuidance'), + this.createComponentType('Discussion'), + this.createComponentType('PeerChat'), + this.createComponentType('ShowGroupWork') ] } ]; if (this.isAiChatAllowed()) { - groups[2].types.unshift({ - type: 'AiChat', - name: this.getComponentTypeLabel('AiChat'), - icon: this.getComponentTypeIcon('AiChat') - }); + groups[2].types.unshift(this.createComponentType('AiChat')); } return groups; } + private createComponentType(componentType: string): any { + return { + type: componentType, + name: this.getComponentTypeLabel(componentType), + icon: this.getComponentTypeIcon(componentType) + }; + } + getComponentTypeIcon(componentType: string): string { return this.componentServiceLookupService.getService(componentType).getComponentTypeIcon(); } From 42887f2be6456717f5a33d123c732a6279be270b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 3 Aug 2026 20:12:39 +0000 Subject: [PATCH 4/4] Updated messages --- src/messages.xlf | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/messages.xlf b/src/messages.xlf index c9be8800007..2ec1ae93178 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -23393,21 +23393,21 @@ If this problem continues, let your teacher know and move on to the next activit Explain and Assess src/assets/wise5/services/componentTypeService.ts - 37 + 25 Experiment, Discover, Distinguish src/assets/wise5/services/componentTypeService.ts - 72 + 36 Collaborate src/assets/wise5/services/componentTypeService.ts - 107 + 47