multiblock goggles

frontend/src/app/components/block-overview-multi/block-overview-multi.component.ts

@@ -179,15 +179,17 @@ export class BlockOverviewMultiComponent implements AfterViewInit, OnDestroy, On
 
   setFilterFlags(goggle?: ActiveFilter): void {
     this.filterMode = goggle?.mode || this.filterMode;
-    this.gradientMode = goggle?.gradient || this.gradientMode;
+    this.gradientMode = goggle?.gradient || 'fee'; // this.gradientMode;
     this.activeFilterFlags = goggle?.filters ? toFlags(goggle.filters) : this.filterFlags;
     for (const scene of this.scenes) {
+      if (scene) {
         if (this.activeFilterFlags != null && this.filtersAvailable) {
           scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode));
         } else {
           scene.setColorFunction(this.getFilterColorFunction(0n, this.gradientMode));
         }
       }
+    }
     this.start();
   }
 

frontend/src/app/components/eight-mempool/eight-mempool.component.html

@@ -8,6 +8,7 @@
   [blockLimit]="stateService.blockVSize"
   [orientation]="'left'"
   [flip]="true"
+  [showFilters]="true"
   [animationDuration]="animationDuration"
   [animationOffset]="animationOffset"
   [disableSpinner]="true"

frontend/src/app/components/eight-mempool/eight-mempool.component.ts

@@ -103,6 +103,8 @@ export class EightMempoolComponent implements OnInit, OnDestroy {
     this.websocketService.want(['blocks', 'mempool-blocks']);
     this.network = this.stateService.network;
 
+    this.stateService.activeGoggles$.next({ mode: 'and', filters: [], gradient: 'fee' });
+
     this.blockSub = this.stateService.mempoolBlockUpdate$.subscribe((update) => {
       // process update
       if (isMempoolDelta(update)) {