Block audit UX adjustments

2022-10-31 09:09:32 -06:00 · 2022-10-31 09:09:32 -06:00 · 2022d3f6d5
commit 2022d3f6d5
parent 695d81a3f6
5 changed files with 52 additions and 24 deletions
--- a/frontend/src/app/components/block-audit/block-audit.component.html
+++ b/frontend/src/app/components/block-audit/block-audit.component.html
@ -41,10 +41,6 @@
                  </div>
                </td>
              </tr>
-              <tr>
-                <td class="td-width" i18n="shared.transaction-count">Transactions</td>
-                <td>{{ blockAudit.tx_count }}</td>
-              </tr>
              <tr>
                <td i18n="blockAudit.size">Size</td>
                <td [innerHTML]="'&lrm;' + (blockAudit.size | bytes: 2)"></td>
@ -61,6 +57,10 @@
        <div class="col-sm" *ngIf="blockAudit">
          <table class="table table-borderless table-striped">
            <tbody>
+              <tr>
+                <td class="td-width" i18n="shared.transaction-count">Transactions</td>
+                <td>{{ blockAudit.tx_count }}</td>
+              </tr>
              <tr>
                <td i18n="block.health">Block health</td>
                <td>{{ blockAudit.matchRate }}%</td>
@ -69,18 +69,10 @@
                <td i18n="block.missing-txs">Removed txs</td>
                <td>{{ blockAudit.missingTxs.length }}</td>
              </tr>
-              <tr>
-                <td i18n="block.missing-txs">Omitted txs</td>
-                <td>{{ numMissing }}</td>
-              </tr>
              <tr>
                <td i18n="block.added-txs">Added txs</td>
                <td>{{ blockAudit.addedTxs.length }}</td>
              </tr>
-              <tr>
-                <td i18n="block.missing-txs">Included txs</td>
-                <td>{{ numUnexpected }}</td>
-              </tr>
            </tbody>
          </table>
        </div>
@ -108,7 +100,6 @@
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
-              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
            </tbody>
          </table>
        </div>
@ -121,7 +112,6 @@
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
-              <tr><td class="td-width" colspan="2"><span class="skeleton-loader"></span></td></tr>
            </tbody>
          </table>
        </div>
@ -165,16 +155,16 @@
      <div class="col-sm" *ngIf="webGlEnabled">
        <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.projected-block">Projected Block</h3>
        <app-block-overview-graph #blockGraphProjected [isLoading]="isLoading" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false"
-          (txClickEvent)="onTxClick($event)"></app-block-overview-graph>
+          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
+          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)"></app-block-overview-graph>
      </div>

      <!-- ADDED TX RENDERING -->
      <div class="col-sm" *ngIf="webGlEnabled && !isMobile">
        <h3 class="block-subtitle" *ngIf="!isMobile" i18n="block.actual-block">Actual Block</h3>
        <app-block-overview-graph #blockGraphActual [isLoading]="isLoading" [resolution]="75"
-          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false"
-          (txClickEvent)="onTxClick($event)"></app-block-overview-graph>
+          [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
+          (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)"></app-block-overview-graph>
      </div>
    </div> <!-- row -->
  </div> <!-- box -->
--- a/frontend/src/app/components/block-audit/block-audit.component.ts
+++ b/frontend/src/app/components/block-audit/block-audit.component.ts
@ -37,6 +37,7 @@ export class BlockAuditComponent implements OnInit, AfterViewInit, OnDestroy {
  isLoading = true;
  webGlEnabled = true;
  isMobile = window.innerWidth <= 767.98;
+  hoverTx: string;

  childChangeSubscription: Subscription;

@ -117,9 +118,11 @@ export class BlockAuditComponent implements OnInit, AfterViewInit, OnDestroy {
                }
              }
              for (const [index, tx] of blockAudit.transactions.entries()) {
-                if (isAdded[tx.txid]) {
+                if (index === 0) {
+                  tx.status = null;
+                } else if (isAdded[tx.txid]) {
                  tx.status = 'added';
-                } else if (index === 0 || inTemplate[tx.txid]) {
+                } else if (inTemplate[tx.txid]) {
                  tx.status = 'found';
                } else {
                  tx.status = 'selected';
@ -189,4 +192,12 @@ export class BlockAuditComponent implements OnInit, AfterViewInit, OnDestroy {
    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
    this.router.navigate([url]);
  }
+
+  onTxHover(txid: string): void {
+    if (txid && txid.length) {
+      this.hoverTx = txid;
+    } else {
+      this.hoverTx = null;
+    }
+  }
 }
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@ -18,7 +18,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  @Input() orientation = 'left';
  @Input() flip = true;
  @Input() disableSpinner = false;
+  @Input() mirrorTxid: string | void;
  @Output() txClickEvent = new EventEmitter<TransactionStripped>();
+  @Output() txHoverEvent = new EventEmitter<string>();
  @Output() readyEvent = new EventEmitter();

  @ViewChild('blockCanvas')
@ -37,6 +39,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  scene: BlockScene;
  hoverTx: TxView | void;
  selectedTx: TxView | void;
+  mirrorTx: TxView | void;
  tooltipPosition: Position;

  readyNextFrame = false;
@ -63,6 +66,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
        this.scene.setOrientation(this.orientation, this.flip);
      }
    }
+    if (changes.mirrorTxid) {
+      this.setMirror(this.mirrorTxid);
+    }
  }

  ngOnDestroy(): void {
@ -76,6 +82,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    this.exit(direction);
    this.hoverTx = null;
    this.selectedTx = null;
+    this.onTxHover(null);
    this.start();
  }

@ -301,6 +308,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      }
      this.hoverTx = null;
      this.selectedTx = null;
+      this.onTxHover(null);
    }
  }

@ -352,17 +360,20 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
            this.selectedTx = selected;
          } else {
            this.hoverTx = selected;
+            this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
          }
        } else {
          if (clicked) {
            this.selectedTx = null;
          }
          this.hoverTx = null;
+          this.onTxHover(null);
        }
      } else if (clicked) {
        if (selected === this.selectedTx) {
          this.hoverTx = this.selectedTx;
          this.selectedTx = null;
+          this.onTxHover(this.hoverTx ? this.hoverTx.txid : null);
        } else {
          this.selectedTx = selected;
        }
@ -370,6 +381,18 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    }
  }

+  setMirror(txid: string | void) {
+    if (this.mirrorTx) {
+      this.scene.setHover(this.mirrorTx, false);
+      this.start();
+    }
+    if (txid && this.scene.txs[txid]) {
+      this.mirrorTx = this.scene.txs[txid];
+      this.scene.setHover(this.mirrorTx, true);
+      this.start();
+    }
+  }
+
  onTxClick(cssX: number, cssY: number) {
    const x = cssX * window.devicePixelRatio;
    const y = cssY * window.devicePixelRatio;
@ -378,6 +401,10 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      this.txClickEvent.emit(selected);
    }
  }
+
+  onTxHover(hoverId: string) {
+    this.txHoverEvent.emit(hoverId);
+  }
 }

 // WebGL shader attributes
--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@ -12,8 +12,8 @@ const auditFeeColors = feeColors.map((color) => desaturate(color, 0.3));
 const auditColors = {
  censored: hexToColor('f344df'),
  missing: darken(desaturate(hexToColor('f344df'), 0.3), 0.7),
-  added: hexToColor('03E1E5'),
-  selected: darken(desaturate(hexToColor('039BE5'), 0.3), 0.7),
+  added: hexToColor('0099ff'),
+  selected: darken(desaturate(hexToColor('0099ff'), 0.3), 0.7),
 }

 // convert from this class's update format to TxSprite's update format
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@ -37,9 +37,9 @@
        <ng-container [ngSwitch]="tx?.status">
          <td *ngSwitchCase="'found'" i18n="transaction.audit.match">match</td>
          <td *ngSwitchCase="'censored'" i18n="transaction.audit.removed">removed</td>
-          <td *ngSwitchCase="'missing'" i18n="transaction.audit.missing">missing</td>
+          <td *ngSwitchCase="'missing'" i18n="transaction.audit.omitted">omitted</td>
          <td *ngSwitchCase="'added'" i18n="transaction.audit.added">added</td>
-          <td *ngSwitchCase="'selected'" i18n="transaction.audit.included">included</td>
+          <td *ngSwitchCase="'selected'" i18n="transaction.audit.extra">extra</td>
        </ng-container>
      </tr>
    </tbody>