From d69cdacd5e0bd410a2f6fb8770b1433d2fb191ea Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 28 Sep 2023 21:54:01 +0100
Subject: [PATCH] Add numBlocks param

---
 .../eight-blocks/eight-blocks.component.html  |  2 +-
 .../eight-blocks/eight-blocks.component.ts    | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.html b/frontend/src/app/components/eight-blocks/eight-blocks.component.html
index 382d6056b..6a3bbb7c0 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.html
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.html
@@ -1,5 +1,5 @@
 <div class="blocks" [class.wrap]="wrapBlocks">
-  <ng-container *ngFor="let i of [0,1,2,3,4,5,6,7]">
+  <ng-container *ngFor="let i of blockIndices">
     <div class="block-wrapper" [style]="wrapperStyle">
       <div class="block-container" [style]="containerStyle">
         <app-block-overview-graph
diff --git a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
index 0213ed5f3..0027a3e7f 100644
--- a/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
+++ b/frontend/src/app/components/eight-blocks/eight-blocks.component.ts
@@ -56,6 +56,8 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
   queryParamsSubscription: Subscription;
   graphChangeSubscription: Subscription;
 
+  numBlocks: number = 8;
+  blockIndices: number[] = [...Array(8).keys()];
   autofit: boolean = false;
   padding: number = 0;
   wrapBlocks: boolean = false;
@@ -96,12 +98,9 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
     this.websocketService.want(['blocks']);
     this.network = this.stateService.network;
 
-    this.blocksSubscription = this.stateService.blocks$
-      .subscribe((blocks) => {
-        this.handleNewBlock(blocks);
-      });
-
     this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
+      this.numBlocks = Number.isInteger(Number(params.numBlocks)) ? Number(params.numBlocks) : 8;
+      this.blockIndices = [...Array(this.numBlocks).keys()];
       this.autofit = params.autofit === 'true';
       this.padding = Number.isInteger(Number(params.padding)) ? Number(params.padding) : 0;
       this.blockWidth = Number.isInteger(Number(params.blockWidth)) ? Number(params.blockWidth) : 1080;
@@ -124,11 +123,18 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
       };
 
       if (params.test === 'true') {
-        this.blocksSubscription.unsubscribe();
+        if (this.blocksSubscription) {
+          this.blocksSubscription.unsubscribe();
+        }
         this.blocksSubscription = (new Subject<BlockExtended[]>()).subscribe((blocks) => {
-          this.handleNewBlock(blocks);
+          this.handleNewBlock(blocks.slice(0, this.numBlocks));
         });
         this.shiftTestBlocks();
+      } else if (!this.blocksSubscription) {
+        this.blocksSubscription = this.stateService.blocks$
+          .subscribe((blocks) => {
+            this.handleNewBlock(blocks.slice(0, this.numBlocks));
+          });
       }
     });
 
@@ -146,7 +152,9 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.stateService.markBlock$.next({});
-    this.blocksSubscription?.unsubscribe();
+    if (this.blocksSubscription) {
+      this.blocksSubscription?.unsubscribe();
+    }
     this.cacheBlocksSubscription?.unsubscribe();
     this.networkChangedSubscription?.unsubscribe();
     this.queryParamsSubscription?.unsubscribe();
@@ -155,7 +163,7 @@ export class EightBlocksComponent implements OnInit, OnDestroy {
   shiftTestBlocks(): void {
     const sub = this.apiService.getBlocks$(this.testHeight).subscribe(result => {
       sub.unsubscribe();
-      this.handleNewBlock(result);
+      this.handleNewBlock(result.slice(0, this.numBlocks));
       this.testHeight++;
       clearTimeout(this.testShiftTimeout);
       this.testShiftTimeout = window.setTimeout(() => { this.shiftTestBlocks(); }, 10000);