CK-Monitor view configured for students

frontend/src/app/components/canvas/canvas.component.html

@@ -21,7 +21,6 @@
       <mat-menu #navbarMenu="matMenu">
         <button 
           mat-menu-item 
-          *ngIf="user.role === Role.TEACHER"
           (click)="openCkMonitor()"
         >
           <mat-icon>

frontend/src/app/components/ck-monitor/ck-monitor.component.html

@@ -43,8 +43,8 @@
       </button>
     </mat-menu>
   </app-toolbar>
-  <mat-sidenav-container class="drawer-container">
-    <mat-sidenav #drawer mode="side" opened [fixedInViewport]="!embedded ? true : false" [fixedTopGap]="64" style="position: fixed" [ngStyle]="!embedded && {'padding-bottom': '64px' } || null">
+  <mat-sidenav-container class="drawer-container" [ngStyle]="{'padding-top': !embedded ? '56px' : '0px', 'padding-bottom': embedded ? '64px' : '0px' }">
+    <mat-sidenav #drawer mode="side" opened [fixedInViewport]="!embedded ? true : false" [fixedTopGap]="64" style="position: fixed" [ngStyle]="!embedded && {'padding-bottom': '64px' } || null" *ngIf="!studentView">
       <h2 class="section-title">All Tasks</h2>
       <mat-list>
         <button class="subheader-button" mat-button (click)="showInactive = !showInactive">
@@ -298,16 +298,16 @@ <h3 matLine> {{workflow.name}} </h3>
         </table>
       </div>
       <div *ngIf="showModels">
-        <app-learner-models #learner [board]="board" [project]="project"></app-learner-models>
+        <app-learner-models #learner [board]="board" [project]="project" [studentView]="studentView"></app-learner-models>
       </div>
       <mat-progress-bar style="margin: 20px; width: 95%" mode="indeterminate" *ngIf="loading"></mat-progress-bar>
-      <div class="heading no-workflow-select" *ngIf="!runningTask && !todoIsVisible && !showModels">
+      <div class="heading no-workflow-select" *ngIf="!runningTask && !todoIsVisible && !showModels && !studentView">
         No task selected!
         <mat-progress-bar class="mat-loading-progress-bar" mode="indeterminate" *ngIf="loading"></mat-progress-bar>
       </div>
       <div style="display: flex; flex-direction: row;">
         <div *ngIf="runningTask && !todoIsVisible">
-          <mat-card class="example-card" style="width: 500px; margin: 20px 20px 10px 10px">
+          <mat-card style="margin: 7px; padding: 16px 4px;">
             <mat-card-title>Task Progress</mat-card-title>
             <div class="mat-elevation-z3 table_style">
               <table mat-table [dataSource]="runningTaskTableData" class="table">

frontend/src/app/components/ck-monitor/ck-monitor.component.scss

@@ -88,7 +88,6 @@
 
 .drawer-container {
   position: absolute;
-  padding-top: 56px;
   left: 0;
   right: 0;
   bottom: 0;

frontend/src/app/components/ck-monitor/ck-monitor.component.ts

@@ -171,6 +171,8 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
 
   showModels = false;
 
+  studentView = false;
+
   constructor(
     public userService: UserService,
     public projectService: ProjectService,
@@ -201,9 +203,14 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.user = this.userService.user!;
-    this.loadWorkspaceData();
+    if (this.user.role === Role.STUDENT) {
+      this.studentView = true;
+      this.loading = false;
+    }
+    await this.loadWorkspaceData();
+    if (this.studentView) this.showModels = true;
   }
 
   async loadWorkspaceData(): Promise<boolean> {
@@ -219,7 +226,7 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
 
     this.board = await this.boardService.get(boardID);
     this.project = await this.projectService.get(projectID);
-    await this.updateWorkflowData(boardID, projectID);
+    if (!this.studentView) await this.updateWorkflowData(boardID, projectID);
     this.socketService.connect(this.user.userID, this.board.boardID);
     return true;
   }
@@ -359,6 +366,7 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
     this.runningTask = task;
     this.todoIsVisible = false;
     this.runningTaskGroupStatus = status;
+    this.showModels = false;
     const progressData = await this._calcAverageProgress(
       this.taskWorkflowGroupMap.get(this.runningTask)
     );
@@ -462,6 +470,7 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
       this.showModels = false;
     } else {
       this.todoIsVisible = false;
+      this.runningTask = null;
       this.showModels = true;
     }
   }
@@ -471,6 +480,7 @@ export class CkMonitorComponent implements OnInit, OnDestroy {
       this.todoIsVisible = false;
     } else {
       this.showModels = false;
+      this.runningTask = null;
       this.todoIsVisible = true;
     }
   }

frontend/src/app/components/learner-models/learner-models.component.html

@@ -1,23 +1,28 @@
-<mat-toolbar>
+<mat-toolbar style="background: #fafafa;">
   <span>Learner Models</span>
   <span class="example-spacer"></span>
-  <mat-select style="width: 15%; font-size: 15px" [(ngModel)]="modelSubject" (selectionChange)="subjectChange()" placeholder="Filter Models">
+  <mat-select style="width: 15%; font-size: 15px" [(ngModel)]="modelSubject" (selectionChange)="subjectChange()" placeholder="Filter Models" *ngIf="!studentView">
     <mat-option [value]="DimensionType.DIAGNOSTIC">All Students (Diagnostic)</mat-option>
     <mat-option [value]="DimensionType.REASSESSMENT">All Students (Reassessment)</mat-option>
     <mat-option *ngFor="let student of idToUser | keyvalue" [value]="student.key">{{student.value.username}}</mat-option>
   </mat-select>
 </mat-toolbar>
+<div *ngIf="studentView && modelCards.length === 0" class="heading">
+  No Learner Models!
+</div>
 <div class="graphs">
-  <div *ngFor="let modelCard of modelCards">
-    <highcharts-chart 
+  <ng-container *ngIf="modelCards.length > 0">
+    <div *ngFor="let modelCard of modelCards">
+      <highcharts-chart 
       class="graph-highchart"
       [Highcharts]="Highcharts"
       [options]="modelCard.chartOptions"
       [(update)]="modelCard.updateFlag"
       [oneToOne]="true"
-    ></highcharts-chart>
-  </div>
-  <div class="graph-add" (click)="handleCreateModel()">
+      ></highcharts-chart>
+    </div>
+  </ng-container>
+  <div class="graph-add" (click)="handleCreateModel()" *ngIf="!studentView">
     <mat-icon class="plus-icon">add_box</mat-icon>
     <div class="plus-text">Create Learner Model</div>
   </div>

frontend/src/app/components/learner-models/learner-models.component.scss

@@ -12,7 +12,7 @@
 .graphs {
   display: grid;
   grid-gap: 0.5em;
-  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 }
 
 .graph {
@@ -57,4 +57,12 @@
 
   position: relative;
   top: 70%;
+}
+
+.heading {
+  font-size: 24px;
+  font-weight: bold;
+  color: grey;
+  text-align: center;
+  margin-top: 30px;
 }

frontend/src/app/components/learner-models/learner-models.component.ts

@@ -14,6 +14,7 @@ import { AddLearnerModalComponent } from '../add-learner-modal/add-learner-modal
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { ProjectService } from 'src/app/services/project.service';
 import * as saveAs from 'file-saver';
+import { UserService } from 'src/app/services/user.service';
 
 more(Highcharts);
 exporting(Highcharts);
@@ -44,6 +45,7 @@ export interface ModelCard {
 export class LearnerModelsComponent implements OnInit {
   @Input() board: Board;
   @Input() project: Project;
+  @Input() studentView?: boolean = false;
 
   modelCards: ModelCard[] = [];
 
@@ -60,6 +62,7 @@ export class LearnerModelsComponent implements OnInit {
   constructor(
     public learnerService: LearnerService,
     public projectService: ProjectService,
+    public userService: UserService,
     public dialog: MatDialog
   ) {}
 
@@ -71,14 +74,21 @@ export class LearnerModelsComponent implements OnInit {
       this.modelCards.push({
         model: model,
         dimensionType: DimensionType.DIAGNOSTIC,
-        chartOptions: this.createChartOptions(model),
+        chartOptions: this.createChartOptions(model, !this.studentView),
         updateFlag: false,
       });
       model.data.map((d) => this.idToUser.set(d.student.userID, d.student));
     }
+    if (this.studentView) {
+      this.modelSubject = this.userService.user?.userID ?? '';
+      this.subjectChange();
+    }
   }
 
-  createChartOptions(model: LearnerModel): Highcharts.Options {
+  createChartOptions(
+    model: LearnerModel,
+    enableExporting: boolean
+  ): Highcharts.Options {
     if (
       this.modelSubject == DimensionType.DIAGNOSTIC ||
       this.modelSubject == DimensionType.REASSESSMENT
@@ -90,7 +100,8 @@ export class LearnerModelsComponent implements OnInit {
           onExport: this.onExport,
           onDeleteModel: this.onDeleteModel,
         },
-        this.modelSubject
+        this.modelSubject,
+        enableExporting
       );
     } else {
       return createStudentGraph(
@@ -100,7 +111,8 @@ export class LearnerModelsComponent implements OnInit {
           onExport: this.onExport,
           onDeleteModel: this.onDeleteModel,
         },
-        this.idToUser.get(this.modelSubject)!
+        this.idToUser.get(this.modelSubject)!,
+        enableExporting
       );
     }
   }
@@ -113,7 +125,10 @@ export class LearnerModelsComponent implements OnInit {
     }
     if (modelCard) {
       modelCard.model = model;
-      modelCard.chartOptions = this.createChartOptions(model);
+      modelCard.chartOptions = this.createChartOptions(
+        model,
+        !this.studentView
+      );
       modelCard.updateFlag = true;
     }
   }
@@ -188,7 +203,7 @@ export class LearnerModelsComponent implements OnInit {
           this.modelCards.push({
             model: model,
             dimensionType: DimensionType.DIAGNOSTIC,
-            chartOptions: this.createChartOptions(model),
+            chartOptions: this.createChartOptions(model, !this.studentView),
             updateFlag: false,
           });
           model.data.map((d) => this.idToUser.set(d.student.userID, d.student));

frontend/src/app/utils/highchart.ts

@@ -14,7 +14,8 @@ export interface MenuHandlers {
 export const createClassGraph = (
   model: LearnerModel,
   handlers: MenuHandlers,
-  dimensionType: DimensionType = DimensionType.DIAGNOSTIC
+  dimensionType: DimensionType = DimensionType.DIAGNOSTIC,
+  enableExporting: boolean = true
 ): Highcharts.Options => {
   const dimensions = model.dimensions;
   const studentToDims: Map<string, DimensionValue[]> = sorting.groupItemBy(
@@ -40,6 +41,7 @@ export const createClassGraph = (
       polar: true,
     },
     exporting: {
+      enabled: enableExporting,
       buttons: {
         contextButton: {
           text: 'Edit Model',
@@ -92,7 +94,8 @@ export const createClassGraph = (
 export const createStudentGraph = (
   model: LearnerModel,
   handlers: MenuHandlers,
-  student: AuthUser
+  student: AuthUser,
+  enableExporting: boolean = true
 ): Highcharts.Options => {
   const dimToData: Map<string, DimensionValue[]> = sorting.groupItemBy(
     model.data,
@@ -151,6 +154,7 @@ export const createStudentGraph = (
       polar: true,
     },
     exporting: {
+      enabled: enableExporting,
       buttons: {
         contextButton: {
           text: 'Edit Model',