block-overview: lift app-block-filters out of the canvas overlay

Previous layout used a fixed $block-filters-height: 110px + negative-margin
on app-block-filters > div to overlay the chip rows on top of the WebGL
canvas without taking up flow space. That break-even worked while there
were ~5-7 flag chips; after the ordpool flag set grew (counterparty,
stamp, src721, src101, ots, ...) the chips wrapped to a third row and
overflowed the fixed height, clipping under the canvas.

Refactor: render <app-block-filters> as a sibling above .block-overview-graph
in normal flow. SCSS no longer pins a height; just an 8px margin-bottom.
Adding chips now grows the row count naturally.

While there: thread block.height into <app-block-filters> via a new
blockHeight @input. block-filters uses ordpool-parser's isLabitbuRange()
to hide the labitbu chip on blocks outside the mint window.

Author: hans-crypto

frontend/src/app/components/block-filters/block-filters.component.ts

@@ -2,6 +2,9 @@ import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef
 import { ActiveFilter, FilterGroups, FilterMode, GradientMode, TransactionFilters } from '@app/shared/filters.utils';
 import { StateService } from '@app/services/state.service';
 import { Subscription } from 'rxjs';
+// HACK -- Ordpool: shared labitbu-window check; hides the labitbu chip on
+// blocks outside the mint window.
+import { isLabitbuRange } from 'ordpool-parser';
 
 
 @Component({
@@ -13,6 +16,10 @@ import { Subscription } from 'rxjs';
 export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
   @Input() cssWidth: number = 800;
   @Input() excludeFilters: string[] = [];
+  // HACK -- Ordpool: block height of the block being viewed (null for the
+  // mempool / cluster views). Used to hide the labitbu filter chip outside
+  // the labitbu mint window.
+  @Input() blockHeight: number | null = null;
   @Output() onFilterChanged: EventEmitter<ActiveFilter | null> = new EventEmitter();
 
   filterSubscription: Subscription;
@@ -52,11 +59,18 @@ export class BlockFiltersComponent implements OnInit, OnChanges, OnDestroy {
     if (changes.cssWidth) {
       this.cd.markForCheck();
     }
-    if (changes.excludeFilters) {
+    if (changes.excludeFilters || changes.blockHeight) {
       this.disabledFilters = {};
       this.excludeFilters.forEach(filter => {
         this.disabledFilters[filter] = true;
       });
+      // HACK -- Ordpool: gate labitbu chip on the labitbu mint window.
+      // Show on mempool / cluster views (blockHeight = null) and on blocks
+      // inside the window. Hide everywhere else: the labitbu experiment is
+      // done and the chip is meaningless on every other block.
+      if (this.blockHeight != null && !isLabitbuRange(this.blockHeight)) {
+        this.disabledFilters['ordpool_labitbu'] = true;
+      }
     }
   }
 

frontend/src/app/components/block-overview-graph/block-overview-graph.component.html

@@ -1,5 +1,10 @@
 
 <div class="graph-alignment" [class.grid-align]="!autofit" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
+  <!-- HACK -- Ordpool: app-block-filters lifted out of .block-overview-graph
+       so the chip rows can grow without overlapping the WebGL canvas. The
+       upstream layout used a fixed-height + negative-margin overlay trick
+       that broke once we added more flag chips. -->
+  <app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [blockHeight]="blockHeight" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
   <div class="block-overview-graph">
     <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
     @if (!disableSpinner) {
@@ -18,7 +23,6 @@
       [filterMode]="filterMode"
       [relativeTime]="relativeTime"
     ></app-block-overview-tooltip>
-    <app-block-filters *ngIf="webGlEnabled && showFilters && filtersAvailable" [excludeFilters]="excludeFilters" [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
     <div *ngIf="!webGlEnabled" class="placeholder">
       <span i18n="webgl-disabled">Your browser does not support this feature.</span>
     </div>

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

@@ -56,6 +56,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   @Input() auditHighlighting: boolean = false;
   @Input() showFilters: boolean = false;
   @Input() excludeFilters: string[] = [];
+  // HACK -- Ordpool: forwarded to <app-block-filters> so it can hide the
+  // labitbu chip outside the labitbu mint window. null on mempool views.
+  @Input() blockHeight: number | null = null;
   @Input() filterFlags: bigint | null = null;
   @Input() filterMode: FilterMode = 'and';
   @Input() gradientMode: 'fee' | 'age' = 'fee';

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

@@ -137,6 +137,7 @@ <h1>
             [blockConversion]="blockConversion"
             [showFilters]="true"
             [excludeFilters]="['replacement']"
+            [blockHeight]="block?.height ?? null"
             [relativeTime]="block?.timestamp"
             (txClickEvent)="onTxClick($event)"
           ></app-block-overview-graph>
@@ -279,7 +280,7 @@ <h3 class="block-subtitle" *ngIf="!isMobile"><ng-container i18n="block.expected-
           <app-block-overview-graph #blockGraphProjected [isLoading]="!stateService.isBrowser || isLoadingOverview" [resolution]="86"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showComparison"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit && !block?.stale"
-            [showFilters]="true" [excludeFilters]="['replacement']" [relativeTime]="block?.timestamp"></app-block-overview-graph>
+            [showFilters]="true" [excludeFilters]="['replacement']" [blockHeight]="block?.height ?? null" [relativeTime]="block?.timestamp"></app-block-overview-graph>
             @if (isMobile && mode === 'actual' || block?.stale) {
               <ng-container *ngTemplateOutlet="emptyBlockInfo; context: { $implicit: (isMobile && mode === 'actual' && block?.stale) ? canonicalBlock : block }"></ng-container>
             }
@@ -314,7 +315,7 @@ <h3 class="block-subtitle actual" *ngIf="!isMobile">
           <app-block-overview-graph #blockGraphActual [isLoading]="!stateService.isBrowser || isLoadingOverview" [resolution]="86"
             [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"  [auditHighlighting]="showComparison"
             (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit && !block?.stale"
-            [showFilters]="true" [excludeFilters]="['replacement']" [relativeTime]="block?.timestamp"></app-block-overview-graph>
+            [showFilters]="true" [excludeFilters]="['replacement']" [blockHeight]="block?.height ?? null" [relativeTime]="block?.timestamp"></app-block-overview-graph>
             <ng-container *ngTemplateOutlet="emptyBlockInfo; context: { $implicit: block?.stale ? canonicalBlock : block }"></ng-container>
         </div>
         <ng-container *ngIf="network !== 'liquid'">

frontend/src/styles-ordpool-overrides1.scss

@@ -112,27 +112,20 @@ app-atomical-viewer {
   white-space: normal !important;
 }
 
-// moves app-block-filters out of the block overview (no "gray" blocking).
-// Must fit "Ordpool Flags" h5 + 2 wrapped rows of badges (11 flags total).
-$block-filters-height: 110px;
-
-.block-overview-graph {
-  margin-top: $block-filters-height;
-}
-
+// HACK -- Ordpool: <app-block-filters> renders as a sibling above
+// <div class="block-overview-graph"> (lifted in the template), so the chip
+// rows take their natural height and the canvas just sits below them in
+// normal flow. No fixed pixel height and no overlay trick, so the layout
+// stays correct as we add more flag chips.
 .block-filters {
-  height: $block-filters-height !important;
+  margin-bottom: 8px;
 
   h5 {
     margin-top: 0 !important;
     margin-bottom: 4px !important;
   }
 }
 
-app-block-filters > div {
-  margin-top: -$block-filters-height;
-}
-
 // completely hide accelerated status (this is still shown for some txns)
 .badge-accelerated {
   display: none !important;