feat: add new similarity component

src/app/api/models/task-similarity.ts

@@ -4,8 +4,8 @@ import { Task } from './doubtfire-model';
 import { DoubtfireConstants } from 'src/app/config/constants/doubtfire-constants';
 
 export class TaskSimilarityPart {
-  idx: number;
-  format: string;
+  idx: number; //TODO (jake): @macite should this be id?
+  format: string; //TODO (jake): @macite can this be an enum?
   description: string;
 }
 
@@ -15,9 +15,9 @@ export class TaskSimilarityPart {
  */
 export class TaskSimilarity extends Entity {
   id: number;
-  type: string;
+  type: string; //TODO (jake): @macite can this be an enum?
   flagged: boolean;
-  pct: number;
+  pct: number; //TODO (jake): @macite what is this actually? Highest % of a containing part?
   parts: TaskSimilarityPart[];
   task: Task;
 
@@ -36,4 +36,13 @@ export class TaskSimilarity extends Entity {
     const constants = AppInjector.get(DoubtfireConstants);
     return `${constants.API_URL}/tasks/${this.task.id}/similarities/${this.id}/contents/${idx}`;
   }
+
+  public get friendlyTypeName(): string {
+    switch (this.type) {
+      case 'MossTaskSimilarity':
+        return 'MOSS';
+      case 'TurnItInTaskSimilarity':
+        return 'turnitin';
+    }
+  }
 }

src/app/common/file-viewer/file-viewer.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="fileType === 'pdf'">
+  <pdf-viewer [src]="src" [render-text]="true" style="display: block"></pdf-viewer>
+</div>
+
+<div *ngIf="fileType === 'html'">
+  <iframe [src]="src | safe" width="100%" height="100%"></iframe>
+</div>

src/app/common/file-viewer/file-viewer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileViewerComponent } from './file-viewer.component';
+
+describe('FileViewerComponent', () => {
+  let component: FileViewerComponent;
+  let fixture: ComponentFixture<FileViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FileViewerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common/file-viewer/file-viewer.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'f-file-viewer',
+  templateUrl: './file-viewer.component.html',
+  styleUrls: ['./file-viewer.component.scss'],
+})
+export class FileViewerComponent {
+  @Input() src: string;
+  @Input() fileType: string;
+}

src/app/doubtfire-angular.module.ts

@@ -196,6 +196,7 @@ import { ProjectProgressBarComponent } from './common/project-progress-bar/proje
 import { TeachingPeriodListComponent } from './admin/states/teaching-periods/teaching-period-list/teaching-period-list.component';
 import { FChipComponent } from './common/f-chip/f-chip.component';
 import { TaskSimilarityViewComponent } from './projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component';
+import { FileViewerComponent } from './common/file-viewer/file-viewer.component';
 
 // Note we need a separate function as it's required
 // by the AOT compiler.
@@ -278,6 +279,7 @@ export function playerFactory() {
     TeachingPeriodListComponent,
     FChipComponent,
     NewTeachingPeriodDialogComponent,
+    FileViewerComponent,
   ],
   // Module Imports
   imports: [

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.html

@@ -1,25 +1,29 @@
-<div>
-  <p>Ensure student_0 task 1.1P in COS1001 is flagged in inbox.</p>
-  <h1>Similarities</h1>
-  <ul>
-    <li *ngFor="let similarity of task?.similarityCache.values | async">
-      <div>
-        <h2>{{ similarity.type }} - {{ similarity.id }} - {{ similarity.pct }}%</h2>
-        <p>Show files/parts if flagged, otherwise click to load...</p>
-        <ul>
-          <li *ngFor="let part of similarity.parts">
-            <div>
-              <h3>{{ part.description }}</h3>
-              <p>{{ part.idx }} {{ part.format }} {{ part.pct }}%</p>
-              <p>
-                We need a "blob viewer" here -- parent of a html view / image view / pdf viewer -- handle resource
-                downloading and freeing blob on destroy. The url for this blob is {{ similarity.fileUrl(part.idx) }}.
-                The blob viewer can then also go into the comment viewer for images.
-              </p>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </li>
-  </ul>
+<div class="p-4">
+  <div class="flex items-center">
+    <mat-icon class="mr-2">crisis_alert</mat-icon>
+    <h1 class="mat-headline m-0">Similarities</h1>
+    <span class="grow"></span>
+    <div class="example-action-buttons">
+      <button mat-button (click)="accordion.openAll()">Expand All</button>
+      <button mat-button (click)="accordion.closeAll()">Collapse All</button>
+    </div>
+  </div>
+
+  <mat-accordion multi>
+    <ng-container *ngFor="let similarity of task?.similarityCache.values | async">
+      <h1 class="mat-headline"></h1>
+      <mat-expansion-panel
+        *ngFor="let part of similarity.parts"
+        hideToggle
+        (opened)="panelOpenState = true"
+        (closed)="panelOpenState = false"
+      >
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{ similarity.friendlyTypeName }} </mat-panel-title>
+          <mat-panel-description> {{ part.description }} </mat-panel-description>
+        </mat-expansion-panel-header>
+        <f-file-viewer [fileType]="part.format" [src]="similarity.fileUrl(part.idx)"></f-file-viewer>
+      </mat-expansion-panel>
+    </ng-container>
+  </mat-accordion>
 </div>

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-similarity-view/task-similarity-view.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { MatAccordion } from '@angular/material/expansion';
 import { Task } from 'src/app/api/models/task';
 
 @Component({
@@ -8,6 +9,8 @@ import { Task } from 'src/app/api/models/task';
 })
 export class TaskSimilarityViewComponent implements OnChanges {
   @Input() task: Task;
+  @ViewChild(MatAccordion) accordion: MatAccordion;
+  panelOpenState = false;
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.task && changes.task.currentValue && this.task?.id) {

src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="w-full h-full">
+<div class="w-full h-full overflow-auto">
   <ng-container [ngSwitch]="currentView">
     <ng-template [ngSwitchCase]="DashboardViews.task">
       <ng-container *ngIf="selectedTaskService.hasTaskSheet; then pdfViewer; else noPdfUrl"></ng-container>