differentiate censored/missing txs in block audit

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

@@ -65,24 +65,48 @@ export class BlockAuditComponent implements OnInit, AfterViewInit, OnDestroy {
           .pipe(
             map((response) => {
               const blockAudit = response.body;
-              for (let i = 0; i < blockAudit.template.length; ++i) {
-                if (blockAudit.missingTxs.includes(blockAudit.template[i].txid)) {
-                  blockAudit.template[i].status = 'missing';
-                } else if (blockAudit.addedTxs.includes(blockAudit.template[i].txid)) {
-                  blockAudit.template[i].status = 'added';
+              const inTemplate = {};
+              const inBlock = {};
+              const isAdded = {};
+              const isCensored = {};
+              const isMissing = {};
+              const isSelected = {};
+              for (const tx of blockAudit.template) {
+                inTemplate[tx.txid] = true;
+              }
+              for (const tx of blockAudit.transactions) {
+                inBlock[tx.txid] = true;
+              }
+              for (const txid of blockAudit.addedTxs) {
+                isAdded[txid] = true;
+              }
+              for (const txid of blockAudit.missingTxs) {
+                isCensored[txid] = true;
+              }
+              // set transaction statuses
+              for (const tx of blockAudit.template) {
+                if (isCensored[tx.txid]) {
+                  tx.status = 'censored';
+                } else if (inBlock[tx.txid]) {
+                  tx.status = 'found';
                 } else {
-                  blockAudit.template[i].status = 'found';
+                  tx.status = 'missing';
+                  isMissing[tx.txid] = true;
                 }
               }
-              for (let i = 0; i < blockAudit.transactions.length; ++i) {
-                if (blockAudit.missingTxs.includes(blockAudit.transactions[i].txid)) {
-                  blockAudit.transactions[i].status = 'missing';
-                } else if (blockAudit.addedTxs.includes(blockAudit.transactions[i].txid)) {
-                  blockAudit.transactions[i].status = 'added';
+              for (const [index, tx] of blockAudit.transactions.entries()) {
+                if (isAdded[tx.txid]) {
+                  tx.status = 'added';
+                } else if (index === 0 || inTemplate[tx.txid]) {
+                  tx.status = 'found';
                 } else {
-                  blockAudit.transactions[i].status = 'found';
+                  tx.status = 'selected';
+                  isSelected[tx.txid] = true;
                 }
               }
+              for (const tx of blockAudit.transactions) {
+                inBlock[tx.txid] = true;
+              }
               return blockAudit;
             }),
             tap((blockAudit) => {

frontend/src/app/components/block-overview-graph/tx-view.ts

@@ -25,7 +25,7 @@ export default class TxView implements TransactionStripped {
   vsize: number;
   value: number;
   feerate: number;
-  status?: 'found' | 'missing' | 'added';
+  status?: 'found' | 'missing' | 'added' | 'censored' | 'selected';
 
   initialised: boolean;
   vertexArray: FastVertexArray;
@@ -142,16 +142,21 @@ export default class TxView implements TransactionStripped {
   }
 
   getColor(): Color {
-    // Block audit
-    if (this.status === 'missing') {
-      return hexToColor('039BE5');
-    } else if (this.status === 'added') {
-      return hexToColor('D81B60');
-    }
-
-    // Block component
     const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
-    return hexToColor(mempoolFeeColors[feeLevelIndex] || mempoolFeeColors[mempoolFeeColors.length - 1]);
+    const feeLevelColor = hexToColor(mempoolFeeColors[feeLevelIndex] || mempoolFeeColors[mempoolFeeColors.length - 1]);
+    // Block audit
+    switch(this.status) {
+      case 'censored':
+        return hexToColor('D81BC2');
+      case 'missing':
+        return hexToColor('8C1BD8');
+      case 'added':
+        return hexToColor('03E1E5');
+      case 'selected':
+        return hexToColor('039BE5');
+      default:
+        return feeLevelColor;
+    }
   }
 }
 

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

@@ -32,6 +32,16 @@
         <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
         <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
       </tr>
+      <tr *ngIf="tx && tx.status && tx.status.length">
+        <td class="td-width" i18n="transaction.audit-status">Audit status</td>
+        <ng-container [ngSwitch]="tx?.status">
+          <td *ngSwitchCase="'found'" i18n="transaction.audit.match">match</td>
+          <td *ngSwitchCase="'censored'" i18n="transaction.audit.censored">censored</td>
+          <td *ngSwitchCase="'missing'" i18n="transaction.audit.missing">missing</td>
+          <td *ngSwitchCase="'added'" i18n="transaction.audit.prioritized">prioritized</td>
+          <td *ngSwitchCase="'selected'" i18n="transaction.audit.unexpected">unexpected</td>
+        </ng-container>
+      </tr>
     </tbody>
   </table>
 </div>

frontend/src/app/interfaces/node-api.interface.ts

@@ -141,7 +141,7 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
-  status?: 'found' | 'missing' | 'added';
+  status?: 'found' | 'missing' | 'added' | 'censored' | 'selected';
 }
 
 export interface RewardStats {

frontend/src/app/interfaces/websocket.interface.ts

@@ -70,7 +70,7 @@ export interface TransactionStripped {
   fee: number;
   vsize: number;
   value: number;
-  status?: 'found' | 'missing' | 'added';
+  status?: 'found' | 'missing' | 'added' | 'censored' | 'selected';
 }
 
 export interface IBackendInfo {