feat(VLE): Separate activities visually in step view

src/app/possible-score/possible-score.component.html

@@ -1,9 +1,7 @@
 @if (maxScore > 0 && !hidePossibleScores) {
-  <span class="gray-darker md-body-1 possible-score">
-    @if (maxScore === 1) {
-      (<span i18n>{{ maxScore }} point</span>)
-    } @else {
-      (<span i18n>{{ maxScore }} points</span>)
-    }
-  </span>
+  @if (maxScore === 1) {
+    <span i18n class="rounded-md notice-bg-bg mat-caption p-1">{{ maxScore }} point</span>
+  } @else {
+    <span i18n class="rounded-md notice-bg-bg mat-caption p-1">{{ maxScore }} points</span>
+  }
 }

src/app/services/graphService.spec.ts

@@ -16,8 +16,8 @@ let service: GraphService;
 describe('GraphService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [],
-    providers: [
+      imports: [],
+      providers: [
         AnnotationService,
         ConfigService,
         GraphService,
@@ -27,8 +27,8 @@ describe('GraphService', () => {
         TagService,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting()
-    ]
-});
+      ]
+    });
     service = TestBed.inject(GraphService);
     http = TestBed.inject(HttpTestingController);
     spyOn(TestBed.inject(ConfigService), 'getRunId').and.returnValue(runId);
@@ -111,7 +111,7 @@ function createComponent() {
   it('should create a graph component', () => {
     const component = service.createComponent();
     expect(component.type).toEqual('Graph');
-    expect(component.title).toEqual('');
+    expect(component.graphTitle).toEqual('');
     expect(component.width).toEqual(800);
     expect(component.height).toEqual(500);
     expect(component.enableTrials).toEqual(false);
@@ -508,17 +508,14 @@ function getClassmateStudentWork() {
       .flush([]);
   });
 
-  it(
-    'should get classmate student work from class',
-    waitForAsync(() => {
-      service
-        .getClassmateStudentWork(nodeId2, componentId2, periodId, nodeId1, componentId1, 'class')
-        .subscribe();
-      http
-        .expectOne(
-          `/api/classmate/graph/student-work/${runId}/${nodeId2}/${componentId2}/${nodeId1}/${componentId1}/class`
-        )
-        .flush([]);
-    })
-  );
+  it('should get classmate student work from class', waitForAsync(() => {
+    service
+      .getClassmateStudentWork(nodeId2, componentId2, periodId, nodeId1, componentId1, 'class')
+      .subscribe();
+    http
+      .expectOne(
+        `/api/classmate/graph/student-work/${runId}/${nodeId2}/${componentId2}/${nodeId1}/${componentId1}/class`
+      )
+      .flush([]);
+  }));
 }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading/node-grading.component.html

@@ -1,5 +1,5 @@
 <div class="view-content--with-sidemenu">
-  <div class="l-constrained grading node-grading">
+  <div class="grading node-grading mx-auto relative max-w-[96rem]">
     <div class="content-head flex flex-row flex-wrap items-center justify-center lt-md:flex-100">
       <div class="accent-1 flex flex-row items-center justify-center">
         <h2 class="content-head__item">

src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html

@@ -1,5 +1,5 @@
 <div class="view-content view-content--with-sidemenu">
-  <div class="l-constrained grading">
+  <div class="grading mx-auto relative max-w-[96rem]">
     <div
       class="content-head flex flex-row flex-wrap justify-center items-center sm:justify-start sm:items-start"
     >

src/assets/wise5/common/ComponentContent.ts

@@ -9,11 +9,11 @@ export interface ComponentContent {
   };
   anonymizeResponses?: boolean;
   connectedComponents?: any[];
+  title?: string;
   constraints?: any[];
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
-  title?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html

@@ -1,23 +1,22 @@
 @if (computerAvatarSelectorVisible) {
+  <component-header [component]="component" [showPrompt]="false" />
   <computer-avatar-selector
     [computerAvatarSettings]="componentContent.computerAvatarSettings"
     (chooseAvatarEvent)="selectComputerAvatar($event)"
   />
 }
 @if (!computerAvatarSelectorVisible) {
-  <mat-card appearance="outlined" class="mat-elevation-z2">
-    <component-header [component]="component" />
-    <div #messagesContainer class="messages">
-      <ai-chat-messages
-        [messages]="messages"
-        [workgroupId]="workgroupId"
-        [waitingForComputerResponse]="waitingForComputerResponse"
-        [computerAvatar]="computerAvatar"
-      />
-    </div>
-    <chat-input
-      [submitDisabled]="waitingForComputerResponse"
-      (submitEvent)="submitStudentResponse($event)"
+  <component-header [component]="component" />
+  <div #messagesContainer class="messages">
+    <ai-chat-messages
+      [messages]="messages"
+      [workgroupId]="workgroupId"
+      [waitingForComputerResponse]="waitingForComputerResponse"
+      [computerAvatar]="computerAvatar"
     />
-  </mat-card>
+  </div>
+  <chat-input
+    [submitDisabled]="waitingForComputerResponse"
+    (submitEvent)="submitStudentResponse($event)"
+  />
 }

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss

@@ -1,11 +1,3 @@
-@use 'style/abstracts/functions';
-
-.mat-mdc-card {
-  padding: 12px;
-  margin-top: 16px;
-  max-width: functions.breakpoint('sm.min');
-}
-
 .messages {
   margin-bottom: 12px;
   max-height: 500px;

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts

@@ -18,7 +18,6 @@ import { ComputerAvatarInitializer } from '../../../common/computer-avatar/compu
 import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { StudentStatusService } from '../../../services/studentStatusService';
 import { ComputerAvatarSelectorComponent } from '../../../vle/computer-avatar-selector/computer-avatar-selector.component';
-import { MatCard } from '@angular/material/card';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ChatInputComponent } from '../../../common/chat-input/chat-input.component';
 import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.component';
@@ -28,8 +27,7 @@ import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.co
     AiChatMessagesComponent,
     ChatInputComponent,
     ComponentHeaderComponent,
-    ComputerAvatarSelectorComponent,
-    MatCard
+    ComputerAvatarSelectorComponent
   ],
   styleUrl: './ai-chat-student.component.scss',
   templateUrl: './ai-chat-student.component.html'

src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts

@@ -4,28 +4,25 @@ import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
-import { MatCardModule } from '@angular/material/card';
 import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
 import { CRaterRubric } from '../../common/cRater/CRaterRubric';
 import { CRaterService } from '../../../services/cRaterService';
 import { UserService } from '../../../../../app/services/user.service';
 
 @Component({
-  imports: [DialogResponsesComponent, MatCardModule],
+  imports: [DialogResponsesComponent],
   selector: 'dialog-guidance-show-work',
   styleUrls: [
     '../dialog-guidance-student/dialog-guidance-student.component.scss',
     './dialog-guidance-show-work.component.scss'
   ],
   template: `
-    <mat-card appearance="outlined" class="mat-elevation-z2">
-      <dialog-responses
-        [computerAvatar]="computerAvatar"
-        [cRaterRubric]="cRaterRubric"
-        [responses]="componentState.studentData.responses"
-        [showDetectedIdeas]="showDetectedIdeas"
-      />
-    </mat-card>
+    <dialog-responses
+      [computerAvatar]="computerAvatar"
+      [cRaterRubric]="cRaterRubric"
+      [responses]="componentState.studentData.responses"
+      [showDetectedIdeas]="showDetectedIdeas"
+    />
   `
 })
 export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective {

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html

@@ -1,23 +1,20 @@
-<div class="mb-4">
-  @if (computerAvatarSelectorVisible) {
-    <computer-avatar-selector
-      [computerAvatarSettings]="componentContent.computerAvatarSettings"
-      (chooseAvatarEvent)="selectComputerAvatar($event)"
+@if (computerAvatarSelectorVisible) {
+  <component-header [component]="component" [showPrompt]="false" />
+  <computer-avatar-selector
+    [computerAvatarSettings]="componentContent.computerAvatarSettings"
+    (chooseAvatarEvent)="selectComputerAvatar($event)"
+  />
+} @else {
+  <component-header [component]="component" />
+  <dialog-responses
+    [responses]="responses"
+    [isWaitingForComputerResponse]="isWaitingForComputerResponse"
+    [computerAvatar]="computerAvatar"
+  />
+  @if (studentCanRespond) {
+    <chat-input
+      [submitDisabled]="isWaitingForComputerResponse"
+      (submitEvent)="submitStudentResponse($event)"
     />
-  } @else {
-    <mat-card appearance="outlined" class="mat-elevation-z2">
-      <component-header [component]="component" />
-      <dialog-responses
-        [responses]="responses"
-        [isWaitingForComputerResponse]="isWaitingForComputerResponse"
-        [computerAvatar]="computerAvatar"
-      />
-      @if (studentCanRespond) {
-        <chat-input
-          [submitDisabled]="isWaitingForComputerResponse"
-          (submitEvent)="submitStudentResponse($event)"
-        />
-      }
-    </mat-card>
   }
-</div>
+}

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.scss

@@ -1,11 +1,3 @@
-@use 'style/abstracts/functions';
-
-.mat-mdc-card {
-  padding: 12px;
-  margin-top: 16px;
-  max-width: functions.breakpoint('sm.min');
-}
-
 dialog-responses {
   display: block;
   margin-bottom: 12px;

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts

@@ -30,7 +30,6 @@ import { ConstraintService } from '../../../services/constraintService';
 import { applyMixins } from '../../../common/apply-mixins';
 import { ComputerAvatarInitializer } from '../../../common/computer-avatar/computer-avatar-initializer';
 import { ComputerAvatarSelectorComponent } from '../../../vle/computer-avatar-selector/computer-avatar-selector.component';
-import { MatCardModule } from '@angular/material/card';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
 import { ChatInputComponent } from '../../../common/chat-input/chat-input.component';
@@ -41,8 +40,7 @@ import { CRaterPingService } from '../../../services/cRaterPingService';
     ChatInputComponent,
     ComponentHeaderComponent,
     ComputerAvatarSelectorComponent,
-    DialogResponsesComponent,
-    MatCardModule
+    DialogResponsesComponent
   ],
   providers: [CRaterPingService, DialogGuidanceFeedbackService],
   selector: 'dialog-guidance-student',

src/assets/wise5/components/draw/draw-student/draw-student.component.html

@@ -44,9 +44,10 @@
     </button>
   }
 </div>
-<div id="{{ drawingToolId }}" class="drawing-tool-div"></div>
+<div id="{{ drawingToolId }}"></div>
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/draw/draw-student/draw-student.component.scss

@@ -6,8 +6,4 @@ $margin-spacing: 20px;
 
 .top-button {
   margin-right: $margin-spacing
-}
-
-.drawing-tool-div {
-  margin-bottom: $margin-spacing;
 }

src/assets/wise5/components/graph/GraphContent.ts

@@ -4,6 +4,7 @@ export interface GraphContent extends ComponentContent {
   backgroundImage?: string;
   hideTrialSelect: boolean;
   highlightXRangeFromZero: boolean;
+  graphTittle: string;
   saveMouseOverPoints: boolean;
   showMouseXPlotLine: boolean;
   showMouseYPlotLine: boolean;

src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html

@@ -5,7 +5,7 @@
 <div class="flex flex-row flex-wrap items-start gap-2">
   <translatable-input
     [content]="componentContent"
-    key="title"
+    key="graphTitle"
     label="Graph Title"
     i18n-label
     (defaultLanguageTextChanged)="inputChange.next($event)"

src/assets/wise5/components/graph/graph-show-work/graph-show-work.component.ts

@@ -46,7 +46,7 @@ export class GraphShowWorkComponent extends ComponentShowWorkDirective {
     }
     this.width = this.componentContent.width;
     this.height = this.componentContent.height;
-    this.title = this.componentContent.title;
+    this.title = this.componentContent.graphTitle;
     this.subtitle = this.componentContent.subtitle;
     if (this.componentContent.hideLegend) {
       this.isLegendEnabled = false;

src/assets/wise5/components/graph/graph-student/graph-student.component.ts

@@ -164,7 +164,7 @@ export class GraphStudent extends ComponentStudent {
   }
 
   initializeComponentContentParams() {
-    this.title = this.componentContent.title;
+    this.title = this.componentContent.graphTitle;
     this.subtitle = this.componentContent.subtitle;
     this.width = this.componentContent.width;
     this.height = this.componentContent.height;
@@ -2308,7 +2308,7 @@ export class GraphStudent extends ComponentStudent {
   }
 
   importGraphSettings(component, componentState) {
-    this.title = component.title;
+    this.title = component.graphTitle;
     this.subtitle = component.subtitle;
     this.width = component.width;
     this.height = component.height;

src/assets/wise5/components/graph/graphService.ts

@@ -25,7 +25,7 @@ export class GraphService extends ComponentService {
   createComponent() {
     const component: any = super.createComponent();
     component.type = this.type;
-    component.title = '';
+    component.graphTitle = '';
     component.width = 800;
     component.height = 500;
     component.enableTrials = false;

src/assets/wise5/components/label/label-student/label-student.component.html

@@ -97,11 +97,12 @@
     </button>
   }
 </div>
-<div id="canvasParent_{{ canvasId }}" class="label-canvas-container">
+<div id="canvasParent_{{ canvasId }}">
   <canvas id="{{ canvasId }}" class="label-canvas" width="800" height="600"></canvas>
 </div>
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/label/label-student/label-student.component.scss

@@ -34,10 +34,6 @@ $margin-spacing: 20px;
   margin-right: $margin-spacing;
 }
 
-.label-canvas-container {
-  margin-bottom: $margin-spacing;
-}
-
 .label-canvas {
   border: 1px solid black;
 }

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html

@@ -112,6 +112,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
 />
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.scss

@@ -47,9 +47,3 @@
 .cdk-drag-placeholder {
   opacity: .4;
 }
-
-component-save-submit-buttons {
-  display: block;
-  margin-top: 16px;
-  margin-bottom: 8px;
-}