Add token count per row

tapas-styles.css

@@ -11,12 +11,17 @@
     letter-spacing:2px; /* Give some extra separation between chars */
 }
 
+th, td {
+    padding: 10px;
+    border: 1px solid;
+}
+
 .non-token{
     /* White space and other things the tokenizer ignores*/
     white-space: pre;
     letter-spacing:4px;
-    border-top:1px solid #A0A0A0; /* A gentle border on top and bottom makes tabs more ovious*/
-    border-bottom:1px solid #A0A0A0;
+    /* border-top:1px solid #A0A0A0; /* A gentle border on top and bottom makes tabs more ovious*/
+    /*border-bottom:1px solid #A0A0A0;*/
     line-height: 1rem;
     height: calc(100% - 2px);
 }
@@ -35,4 +40,9 @@
 .odd-token{
     background:#A0A0A0;
     border: 1px solid #A0A0A0;
+}
+
+.count{
+    font-family: "Tahoma" "Arial";
+    font-size: 1.2em;
 }

tapas_visualizer.py

@@ -117,10 +117,14 @@ class TapasVisualizer:
 
         # token_df = pd.DataFrame(token_data, columns=['id', 'token', 'segment_id', 'column_id', 'row_id'])
         header_row_html = ""
+        header_row_token_cnt = 0
         for col_id, col in enumerate(table.columns, start=1):
-            span_htmls = self.text_to_html(col, cell_tokens[0, col_id])
+            cur_cell_tokens = cell_tokens[0, col_id]
+            span_htmls = self.text_to_html(col, cur_cell_tokens)
             cell_html = "".join(span_htmls)
             header_row_html += f"<th>{cell_html}</th>"
+            header_row_token_cnt += len(cur_cell_tokens)
+        header_row_html += f'<th style="border: none;">{self.style_span(header_row_token_cnt, ["non-token", "count"])}</th>'
         header_row_html = f'<tr>{header_row_html}</tr>'
 
         table_vals = table.values
@@ -129,10 +133,14 @@ class TapasVisualizer:
 
         for row_id, row in enumerate(table_vals, start=1):
             row_html = ""
+            row_token_cnt = 0
             for col_id, cell in enumerate(row, start=1):
-                span_htmls = self.text_to_html(cell, cell_tokens[row_id, col_id])
+                cur_cell_tokens = cell_tokens[(row_id, col_id)]
+                span_htmls = self.text_to_html(cell, cur_cell_tokens)
                 cell_html = "".join(span_htmls)
                 row_html += f"<td>{cell_html}</td>"
+                row_token_cnt += len(cur_cell_tokens)
+            row_html += f'<td style="border: none;">{self.style_span(row_token_cnt, ["non-token", "count"])}</td>'
             table_html += f'<tr>{row_html}</tr>'
 
         table_html = f'<table>{table_html}</table>'