Fix rejection reason debug table

Change-Id: Ia0ba5bfe2ff20316d7d7a9e22e07dd1711adfa81
Signed-off-by: James Kuszmaul <jabukuszmaul@gmail.com>
diff --git a/y2023/www/field_handler.ts b/y2023/www/field_handler.ts
index 1e08359..b8656a2 100644
--- a/y2023/www/field_handler.ts
+++ b/y2023/www/field_handler.ts
@@ -38,7 +38,7 @@
       (document.getElementById('theta') as HTMLElement);
   private imagesAcceptedCounter: HTMLElement =
       (document.getElementById('images_accepted') as HTMLElement);
-  private rejectionReasonCells: HTMLElement[] = [];
+  private rejectionReasonCells: HTMLElement[][] = [];
   private messageBridgeDiv: HTMLElement =
       (document.getElementById('message_bridge_status') as HTMLElement);
   private clientStatuses = new Map<string, HTMLElement>();
@@ -71,6 +71,19 @@
 
     this.fieldImage.src = '2023.png';
 
+    // Construct a table header.
+    {
+      const row = document.createElement('div');
+      const nameCell = document.createElement('div');
+      nameCell.innerHTML = "Rejection Reason";
+      row.appendChild(nameCell);
+      for (const pi of PIS) {
+        const nodeCell = document.createElement('div');
+        nodeCell.innerHTML = pi;
+        row.appendChild(nodeCell);
+      }
+      document.getElementById('vision_readouts').appendChild(row);
+    }
     for (const value in RejectionReason) {
       // Typescript generates an iterator that produces both numbers and
       // strings... don't do anything on the string iterations.
@@ -81,10 +94,13 @@
       const nameCell = document.createElement('div');
       nameCell.innerHTML = RejectionReason[value];
       row.appendChild(nameCell);
-      const valueCell = document.createElement('div');
-      valueCell.innerHTML = 'NA';
-      this.rejectionReasonCells.push(valueCell);
-      row.appendChild(valueCell);
+      this.rejectionReasonCells.push([]);
+      for (const pi of PIS) {
+        const valueCell = document.createElement('div');
+        valueCell.innerHTML = 'NA';
+        this.rejectionReasonCells[this.rejectionReasonCells.length - 1].push(valueCell);
+        row.appendChild(valueCell);
+      }
       document.getElementById('vision_readouts').appendChild(row);
     }
 
@@ -102,7 +118,7 @@
         this.connection.addReliableHandler(
             '/' + PIS[pi] + '/camera', 'y2023.localizer.Visualization',
             (data) => {
-              this.handleLocalizerDebug(pi, data);
+              this.handleLocalizerDebug(Number(pi), data);
             });
       }
       this.connection.addHandler(
@@ -125,7 +141,7 @@
     });
   }
 
-  private handleLocalizerDebug(pi: string, data: Uint8Array): void {
+  private handleLocalizerDebug(pi: number, data: Uint8Array): void {
     const now = Date.now() / 1000.0;
 
     const fbBuffer = new ByteBuffer(data);
@@ -139,7 +155,7 @@
           this.rejectionReasonCells.length) {
         for (let ii = 0; ii < debug.statistics().rejectionReasonsLength();
              ++ii) {
-          this.rejectionReasonCells[ii].innerHTML =
+          this.rejectionReasonCells[ii][pi].innerHTML =
               debug.statistics().rejectionReasons(ii).count().toString();
         }
       } else {