Refactor/routing-arp-switching tables (#258)

This pull request introduces significant enhancements to the `Table`
component and its usage across various files. The changes include adding
support for row-level metadata, enabling dynamic row addition, and
refining callback methods for editing and deleting rows. These updates
improve flexibility and maintainability for tables in the application.

### Enhancements to the `Table` Component
(`src/graphics/basic_components/table.ts`):
* Introduced the `TableRow` interface to encapsulate row data and
metadata (e.g., `edited` status). Updated the `rows` property in
`TableOptions` to use `TableRow[]` instead of `string[][]`.
* Added support for dynamically adding rows via the `onAddRow` callback
and a new "Add Row" button in the table UI.
* Improved row rendering by applying a CSS class (`edited-row`) for rows
marked as edited and updated the logic for handling editable cells.
[[1]](diffhunk://#diff-94a19a6c54d3f3da90efed3af1c8c06201e699a1eaa13c9db24624a4b7ea444aL83-R111)
[[2]](diffhunk://#diff-94a19a6c54d3f3da90efed3af1c8c06201e699a1eaa13c9db24624a4b7ea444aL155-L190)
* Added a utility method `getRowHash` to generate a key-value mapping of
a row's data based on table headers. This is used for callbacks like
`onEdit`.

### Updates to ARP Table (`src/graphics/renderables/arp_table.ts`):
* Refactored ARP table rows to use the `TableRow` interface, enabling
metadata tracking (e.g., `edited` status).
* Enhanced callbacks for editing and deleting rows to work with row keys
(e.g., IP address) instead of indices. Added support for adding new
rows.
* Replaced direct calls to ARP table methods with utility functions
(e.g., `getArpTable`, `removeArpTableEntry`) for improved modularity.

### Updates to Device Info (`src/graphics/renderables/device_info.ts`):
* Updated methods for adding ARP, routing, and switching tables to use
`TableRow` for rows and track metadata like `edited` status.
[[1]](diffhunk://#diff-965a7810b34f8fb22a13101c89a873c18aa7d3c9c0dc67f0c79f178859084809L127-R135)
[[2]](diffhunk://#diff-965a7810b34f8fb22a13101c89a873c18aa7d3c9c0dc67f0c79f178859084809L191-R198)
[[3]](diffhunk://#diff-965a7810b34f8fb22a13101c89a873c18aa7d3c9c0dc67f0c79f178859084809L217-R228)
* Replaced direct method calls with utility functions for fetching table
data (e.g., `getRoutingTable`, `getSwitchingTable`).
[[1]](diffhunk://#diff-965a7810b34f8fb22a13101c89a873c18aa7d3c9c0dc67f0c79f178859084809L127-R135)
[[2]](diffhunk://#diff-965a7810b34f8fb22a13101c89a873c18aa7d3c9c0dc67f0c79f178859084809L217-R228)

### Updates to Program Runner Info
(`src/graphics/renderables/program_runner_info.ts`):
* Refactored rows in the program runner table to use `TableRow` for
consistency and added metadata support. Updated the `onDelete` callback
to work with row keys (e.g., PID) instead of indices.

These changes collectively improve the extensibility and usability of
tables across the application while ensuring better alignment with
modern design patterns.

close #150

Author: pgallino

src/graphics/basic_components/table.ts

@@ -1,14 +1,25 @@
 import { CSS_CLASSES } from "../../utils/constants/css_constants";
+import { TOOLTIP_KEYS } from "../../utils/constants/tooltips_constants";
 import { attachTooltip } from "../renderables/tooltip_manager";
 import { Button } from "./button";
 
+export interface TableRow {
+  values: string[];
+  edited?: boolean;
+}
+
 export interface TableOptions {
   headers: Record<string, string | HTMLElement>; // Custom elements for headers
   fieldsPerRow: number; // Number of fields per row
-  rows: string[][]; // Table rows
+  rows: TableRow[]; // Table rows
   editableColumns?: boolean[]; // Array indicating which columns are editable
-  onEdit?: (row: number, col: number, newValue: string) => boolean; // Callback for editing cells
-  onDelete?: (row: number) => boolean; // Callback for deleting rows
+  onEdit?: (
+    col: number,
+    newValue: string,
+    rowHash: Record<string, string>,
+  ) => boolean;
+  onDelete?: (key: string) => boolean; // Callback for deleting rows by key
+  onAddRow?: (values: string[]) => boolean; // Callback for adding rows
   tableClasses?: string[]; // Additional CSS classes for the table
 }
 
@@ -80,21 +91,25 @@ export class Table {
   }
 
   private createRows(): void {
-    const { rows, fieldsPerRow, onEdit, onDelete } = this.options;
+    const { rows, fieldsPerRow, onEdit, onDelete, onAddRow } = this.options;
 
     rows.forEach((row, rowIndex) => {
       const tr = document.createElement("tr");
 
+      if (row.edited) {
+        tr.classList.add("edited-row");
+      }
+
       // Add cells for the row data
-      row.forEach((cellData, colIndex) => {
+      row.values.forEach((cellData, colIndex) => {
         const td = this.createCell(cellData, rowIndex, colIndex, onEdit);
         tr.appendChild(td);
       });
 
       // Add empty cells if the row has fewer fields than fieldsPerRow
-      const emptyCellsNeeded = fieldsPerRow - row.length;
+      const emptyCellsNeeded = fieldsPerRow - row.values.length;
       for (let i = 0; i < emptyCellsNeeded; i++) {
-        const td = this.createCell("", rowIndex, row.length + i, onEdit);
+        const td = this.createCell("", rowIndex, row.values.length + i, onEdit);
         tr.appendChild(td);
       }
 
@@ -107,14 +122,65 @@ export class Table {
       this.tbody.appendChild(tr);
     });
 
+    if (onAddRow) {
+      const addTr = this.createAddRow(fieldsPerRow, onAddRow);
+      this.tbody.appendChild(addTr);
+    }
+
     this.table.appendChild(this.tbody);
   }
 
+  private createAddRow(
+    fieldsPerRow: number,
+    onAddRow: (values: string[]) => boolean,
+  ): HTMLTableRowElement {
+    const addTr = document.createElement("tr");
+    addTr.classList.add("add-row");
+
+    const addCells: HTMLTableCellElement[] = [];
+
+    for (let i = 0; i < fieldsPerRow; i++) {
+      const td = document.createElement("td");
+      td.classList.add("editable-cell");
+      td.contentEditable = "true";
+
+      td.addEventListener("keydown", (event) => {
+        if (event.key === "Delete" || event.key === "Backspace") {
+          event.stopPropagation();
+        }
+      });
+      addTr.appendChild(td);
+      addCells.push(td);
+    }
+
+    const addTd = document.createElement("td");
+    const addButton = new Button({
+      text: "➕",
+      classList: [CSS_CLASSES.TABLE_BUTTON],
+      tooltip: TOOLTIP_KEYS.ADD_ENTRY_BUTTON,
+      onClick: () => {
+        const values = addCells.map((cell) => cell.textContent?.trim() || "");
+        const added = onAddRow(values);
+        if (added) {
+          addCells.forEach((cell) => (cell.textContent = ""));
+        }
+      },
+    });
+    addTd.appendChild(addButton.toHTML());
+    addTr.appendChild(addTd);
+
+    return addTr;
+  }
+
   private createCell(
     cellData: string,
     rowIndex: number,
     colIndex: number,
-    onEdit?: (row: number, col: number, newValue: string) => boolean,
+    onEdit?: (
+      col: number,
+      newValue: string,
+      rowHash: Record<string, string>,
+    ) => boolean,
   ): HTMLTableCellElement {
     const td = document.createElement("td");
     td.textContent = cellData;
@@ -131,15 +197,16 @@ export class Table {
 
   private createDeleteCell(
     tr: HTMLTableRowElement,
-    onDelete: (row: number) => boolean,
+    onDelete: (key: string) => boolean,
   ): HTMLTableCellElement {
     const deleteTd = document.createElement("td");
     const deleteButton = new Button({
       text: "🗑️",
-      classList: [CSS_CLASSES.TRASH_BUTTON],
+      classList: [CSS_CLASSES.TABLE_BUTTON],
+      tooltip: TOOLTIP_KEYS.DELETE_ENTRY_BUTTON,
       onClick: () => {
-        const index = Array.from(this.tbody.rows).indexOf(tr); // Calculate the index of the row
-        if (index !== -1 && onDelete(index)) {
+        const key = tr.cells[0]?.textContent?.trim() || "";
+        if (key && onDelete(key)) {
           this.tbody.removeChild(tr);
         }
       },
@@ -152,42 +219,50 @@ export class Table {
     cell: HTMLTableCellElement,
     rowIndex: number,
     colIndex: number,
-    onEdit: (row: number, col: number, newValue: string) => boolean,
+    onEdit: (
+      col: number,
+      newValue: string,
+      rowHash: Record<string, string>,
+    ) => boolean,
   ) {
     cell.classList.add("editable-cell");
     cell.contentEditable = "true";
     const originalContent = cell.textContent;
 
-    // Prevent deleting the row while editing
+    let originalRowHash: Record<string, string> = {};
+
+    cell.addEventListener("focus", () => {
+      originalRowHash = this.getRowHash(rowIndex);
+    });
+
     cell.addEventListener("keydown", (event) => {
       if (event.key === "Delete" || event.key === "Backspace") {
         event.stopPropagation();
       }
+      if (event.key === "C" || event.key === "c") {
+        event.stopPropagation();
+      }
     });
 
-    // Handle edits
     cell.addEventListener("blur", () => {
       const newValue = cell.textContent?.trim() || "";
 
-      const isValid = onEdit(rowIndex, colIndex, newValue);
+      const isValid = onEdit(colIndex, newValue, originalRowHash);
 
       if (!isValid) {
-        console.warn(`Invalid input for column ${colIndex}: ${newValue}`);
-        cell.textContent = originalContent; // Revert change if invalid
+        console.warn(
+          `Invalid or same input for column ${colIndex}: ${newValue}`,
+        );
+        cell.textContent = originalContent;
         return;
       }
-
-      console.log(
-        `Updated cell at row ${rowIndex}, column ${colIndex} with value: ${newValue}`,
-      );
     });
   }
 
   // New method to update rows dynamically
-  updateRows(newRows: string[][]): void {
+  updateRows(newRows: TableRow[]): void {
     this.clearTableRows(); // Clear existing rows
     this.options.rows = newRows; // Update the rows in options
-    console.log("Updated rows:", this.options.rows); // Log the updated rows
     this.createRows();
   }
 
@@ -198,4 +273,18 @@ export class Table {
   toHTML(): HTMLElement {
     return this.tableWrapper;
   }
+
+  getRowHash(rowIndex: number): Record<string, string> {
+    const row = this.tbody.rows[rowIndex];
+    const hash: Record<string, string> = {};
+    const headerKeys = Object.keys(this.options.headers);
+    if (!row) return hash;
+    Array.from(row.cells).forEach((cell, i) => {
+      if (!cell.querySelector("button")) {
+        const key = headerKeys[i] ?? `col${i}`;
+        hash[key] = cell.textContent?.trim() || "";
+      }
+    });
+    return hash;
+  }
 }

src/graphics/basic_components/text_info.ts

@@ -214,7 +214,7 @@ export class TextInfo {
         {} as Record<string, string>,
       ),
       fieldsPerRow: Object.keys(flags).length,
-      rows: [statusRow, valueRow],
+      rows: [{ values: statusRow }, { values: valueRow }],
       tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
     });