fix(Demo): Fix the demo timings so that the graph makes sense

Author: zak-cloudnc

README.md

@@ -245,4 +245,5 @@ Note here that the worker class `implements DoWorkUnit<File, string>`. This is d
 `DoWork` which had the slightly more complex signature of inputting an observable and outputting one.
 
 If using the `fromWorkerPool` strategy, you must only implement `DoWorkUnit` as it relies on the completion of the 
-returned observable to indicate that the unit of work is finished processing.
+returned observable to indicate that the unit of work is finished processing, and the next unit of work can be 
+transferred to the worker.

src/app/app.component.html

@@ -14,15 +14,6 @@ <h1>
 
 <app-single-worker></app-single-worker>
 
-<p>
-  Note if you select a particularly large file (>1GB) you will have time to select another file and see that the
-  original worker is terminated and a new worker is created for the new file. This is because the main thread uses a
-  <code>switchMap</code>
-  , but if this behaviour was not desired, simply swapping in a
-  <code>mergeMap</code>
-  would allow both files to complete hashing.
-</p>
-
 <hr />
 
 <app-multiple-worker-pool></app-multiple-worker-pool>

src/app/multiple-worker-pool/multiple-worker-pool.component.html

@@ -3,10 +3,14 @@ <h3 *ngIf="status$ | async as status">({{ status }})</h3>
 
 <p>Select multiple files of varying sizes to compute MD5 sum of, in pool of webworkers:</p>
 
+<input type="file" multiple (change)="calculateMD5Multiple($event)" />
 <section>
   <small>(No files are uploaded; they're kept entirely within your browser)</small>
+  <p>
+    ℹ️ large files (>10MB) gives the best results otherwise the timing starts to be dominated by the UI updates rather
+    than the computation of hashes
+  </p>
 </section>
-<input type="file" multiple (change)="calculateMD5Multiple($event)" />
 
 <h3 [attr.data]="chartObserver$ | async">Timeline</h3>
 <div #timeline></div>

src/app/multiple-worker-pool/multiple-worker-pool.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
 import {
   animationFrameScheduler,
   asyncScheduler,
@@ -11,6 +11,7 @@ import {
   Subject,
 } from 'rxjs';
 import {
+  delay,
   filter,
   groupBy,
   map,
@@ -34,6 +35,7 @@ import TimelineOptions = google.visualization.TimelineOptions;
   selector: 'app-multiple-worker-pool',
   templateUrl: './multiple-worker-pool.component.html',
   styleUrls: ['./multiple-worker-pool.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MultipleWorkerPoolComponent {
   @ViewChild('timeline', { read: ElementRef }) private timelineComponent: ElementRef;
@@ -135,13 +137,10 @@ export class MultipleWorkerPoolComponent {
             return;
           }
 
-          if (lastRow.has(event.file)) {
-            dataTable.setCell(lastRow.get(event.file), 3, event.timestamp);
-          }
+          const timestamp = event.timestamp;
 
-          if (event.fileEventType === FileHashEvent.HASH_RECEIVED) {
-            lastRow.delete(event.file);
-            return;
+          if (lastRow.has(event.file)) {
+            dataTable.setCell(lastRow.get(event.file), 3, timestamp);
           }
 
           let durationName: string;
@@ -164,10 +163,18 @@ export class MultipleWorkerPoolComponent {
             case FileHashEvent.HASH_COMPUTED:
               durationName = 'Returning hash result to main thread';
               break;
+            case FileHashEvent.HASH_RECEIVED:
+              durationName = 'Main thread received hash';
+              break;
           }
 
-          const row = dataTable.addRow([event.file, durationName, event.timestamp, event.timestamp]);
-          lastRow.set(event.file, row);
+          const row = dataTable.addRow([event.file, durationName, timestamp, timestamp]);
+
+          if (event.fileEventType === FileHashEvent.HASH_RECEIVED) {
+            lastRow.delete(event.file);
+          } else {
+            lastRow.set(event.file, row);
+          }
 
           chartOptions.height = filenames.length * 41 + 50;
 
@@ -200,6 +207,7 @@ export class MultipleWorkerPoolComponent {
           this.complete$.pipe(
             filter(c => c),
             take(1),
+            delay(0),
           ),
         ),
       );

src/app/single-worker/single-worker.component.html

@@ -3,6 +3,15 @@ <h2>Single Worker</h2>
 Select file to compute MD5 sum of, in webworker:
 <input type="file" (change)="calculateMD5($event)" />
 
+<p>
+  ℹ️ If you select a particularly large file (>1GB) you will have time to select another file and see that the original
+  worker is terminated and a new worker is created for the new file. This is because the main thread uses a
+  <code>switchMap</code>
+  , but if this behaviour was not desired, simply swapping in a
+  <code>mergeMap</code>
+  would allow both files to complete hashing.
+</p>
+
 <h3>Events:</h3>
 <ol [attr.data]="hashResult$ | async">
   <li *ngFor="let event of eventList$ | async">{{ event }}</li>