Fix/ Routing Table and Payload View (#233)

This PR solves some minor visual changes on the simulator.

### Fewer data shown on payload
As it was previously discussed, some information of the packet payloads
reveal to much data of other layers different from the current one. On
the Network layer, ICMP packets that hold a TCP packet on their payload
just show the type of the payload, not the whole information. However,
ICMP packets do show some data because they are only shown up to the
Network layer


![image](https://github.com/user-attachments/assets/6c576794-a3cf-4903-b971-6ef06abb602a)


![image](https://github.com/user-attachments/assets/3327bb34-cff9-41db-b275-2114428fd0ee)

### Different CSS classes for different tables
With the addition of the TCP Flags table, the modifications broke the
styling of the Router Tables. Now there is a general class for tables
and a separate class for each type of table. This allows to change the
table configuration on each type. There is also a new class for the
recently added ARP tables.


![image](https://github.com/user-attachments/assets/bf331d5e-22d2-46ed-bfb3-a2ca02fa094e)


![image](https://github.com/user-attachments/assets/886bf334-f9ab-483d-b39e-d4afdbafe837)


![image](https://github.com/user-attachments/assets/d70811bc-6573-49db-91e5-ee982c2bc68d)

Author: V-SANT

src/graphics/basic_components/text_info.ts

@@ -3,6 +3,13 @@ import { attachTooltip } from "../renderables/tooltip_manager";
 import { Table } from "./table";
 import { Flags, TCP_FLAGS_KEY } from "../../packets/tcp";
 
+const FLAGS_DATA = {
+  tick: "✓",
+  cross: "✗",
+  tick_data: "1",
+  cross_data: "0",
+};
+
 export interface InfoField {
   key: string;
   value: string | number | object;
@@ -168,8 +175,8 @@ export class TextInfo {
     const valueRow: string[] = [];
 
     Object.entries(flags).forEach(([, value]) => {
-      statusRow.push(value ? "✓" : "✗");
-      valueRow.push(value ? "1" : "0");
+      statusRow.push(value ? FLAGS_DATA.tick : FLAGS_DATA.cross);
+      valueRow.push(value ? FLAGS_DATA.tick_data : FLAGS_DATA.cross_data);
     });
 
     // Create headers for the table
@@ -186,7 +193,11 @@ export class TextInfo {
       ),
       fieldsPerRow: Object.keys(flags).length,
       rows: [statusRow, valueRow],
-      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE],
+      tableClasses: [
+        CSS_CLASSES.TABLE,
+        CSS_CLASSES.RIGHT_BAR_TABLE,
+        CSS_CLASSES.TCP_FLAGS_TABLE,
+      ],
     });
 
     // Get the table element

src/graphics/renderables/arp_table.ts

@@ -41,7 +41,11 @@ export class ArpTable {
       editableColumns: [false, true], // Make all columns non-editable
       onEdit: onEdit,
       onDelete: onDelete,
-      tableClasses: [CSS_CLASSES.RIGHT_BAR_TABLE],
+      tableClasses: [
+        CSS_CLASSES.TABLE,
+        CSS_CLASSES.RIGHT_BAR_TABLE,
+        CSS_CLASSES.ARP_TABLE,
+      ],
     });
 
     this.toggleButton = new ToggleButton({

src/graphics/renderables/program_runner_info.ts

@@ -117,7 +117,7 @@ export class ProgramRunnerInfo implements Renderable {
       fieldsPerRow: maxRowLength,
       rows,
       onDelete,
-      tableClasses: [CSS_CLASSES.RIGHT_BAR_TABLE], // CSS class for the table
+      tableClasses: [CSS_CLASSES.TABLE, CSS_CLASSES.RIGHT_BAR_TABLE], // CSS class for the table
     });
 
     return table.toHTML();

src/graphics/renderables/routing_table.ts

@@ -46,7 +46,11 @@ export class RoutingTable {
       editableColumns: [false, true, true, false], // Make the last column non-editable
       onEdit: onEdit,
       onDelete: onDelete,
-      tableClasses: [CSS_CLASSES.RIGHT_BAR_TABLE],
+      tableClasses: [
+        CSS_CLASSES.TABLE,
+        CSS_CLASSES.RIGHT_BAR_TABLE,
+        CSS_CLASSES.ROUTER_TABLE,
+      ],
     });
 
     this.toggleButton = new ToggleButton({

src/packets/icmp.ts

@@ -104,6 +104,16 @@ class EchoMessage extends IcmpPacket {
       ...this.data,
     ]);
   }
+
+  getPayload(): Record<string, string | number | object> {
+    return {
+      Type: this.type,
+      Code: this.code,
+      Identifier: this.identifier,
+      SequenceNumber: this.sequenceNumber,
+      Data: this.data,
+    };
+  }
 }
 
 export class EchoRequest extends EchoMessage {

src/packets/ip.ts

@@ -142,6 +142,8 @@ export interface IpPayload {
   getDetails?(layer: Layer): Record<string, string | number | object>;
   // Get ports of the payload (if any)
   getPorts(): Ports;
+  // Get the payload data for Network layer
+  getPayload?(): Record<string, string | number | object> | string;
 }
 
 // Info taken from the original RFC: https://datatracker.ietf.org/doc/html/rfc791#section-3.1
@@ -289,7 +291,7 @@ export class IPv4Packet implements FramePayload {
         "Time to Live": this.timeToLive,
         Protocol: this.protocol,
         "Header Checksum": this.headerChecksum,
-        Payload: this.payload,
+        Payload: this.payload.getPayload(),
       };
     } else {
       return this.payload.getDetails(layer);

src/packets/tcp.ts

@@ -254,6 +254,10 @@ export class TcpSegment implements IpPayload {
       destinationPort: this.destinationPort,
     };
   }
+
+  getPayload(): string {
+    return "TCP";
+  }
 }
 
 function checkUint(n: number, numBits: number): void {

src/styles/table.css

@@ -1,60 +1,89 @@
-.right-bar-table {
-  display: table; /* Cambiado a table para mejor comportamiento de columnas */
-  width: 100%; /* Ocupa todo el ancho disponible */
-  border-collapse: collapse; /* Elimina espacios entre bordes */
-  font-size: 1rem; /* Tamaño de fuente legible */
-  text-align: center; /* Centra el texto en las celdas */
-  border-radius: 1rem; /* Bordes redondeados */
-  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
-  table-layout: auto; /* Cambiado a auto para ancho dinámico de columnas */
-  overflow-x: auto; /* Mantiene el scroll horizontal si es necesario */
-  clip-path: inset(
-    0 round 1rem
-  ); /* Recorta el área del scroll respetando el border-radius */
+/* Common styles for both tables */
+.table-base {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 1rem;
+  text-align: center;
+  border-radius: 1rem;
+  box-shadow: 0 0.5vh 1vh rgba(0, 0, 0, 0.1);
+  clip-path: inset(0 round 1rem);
+  overflow-x: auto;
+}
+
+/* Common cell styles */
+.table-base th,
+.table-base td {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  padding: 1vh;
+  border: 0.2vh solid #ddd;
+  text-align: center;
 }
 
-/* Ensures columns do not overflow */
-.right-bar-table th,
-.right-bar-table td {
-  word-wrap: break-word; /* Wraps long words */
-  overflow-wrap: break-word; /* Ensures proper text wrapping */
-  white-space: normal; /* Allows text to wrap naturally */
+.table-base th {
+  background-color: #333;
+  color: white;
+  box-sizing: border-box;
 }
 
-.right-bar-table th {
-  background-color: #333; /* Dark background for contrast */
-  color: white; /* White text for readability */
-  padding: 1vh; /* Adds spacing inside header cells */
-  border: 0.2vh solid #ddd; /* Adds subtle borders */
-  text-align: center; /* Centers text */
-  /* Eliminado el width fijo del 33% */
-  box-sizing: border-box; /* Ensures width includes padding and borders */
+.table-base td {
+  transition: background-color 0.3s ease-in-out;
 }
 
-.right-bar-table td {
-  padding: 1vh; /* Adds spacing inside table cells */
-  border: 0.2vh solid #ddd; /* Adds subtle borders */
-  text-align: center; /* Centers text */
-  transition: background-color 0.3s ease-in-out; /* Smooth hover effect */
+.table-base td:hover {
+  background-color: #f0f0f0;
+  cursor: pointer;
 }
 
-/* Hover effect for table cells */
-.right-bar-table td:hover {
-  background-color: #f0f0f0; /* Light gray on hover */
-  cursor: pointer; /* Indicates interactivity */
+/* TCP FLAGS TABLE specific styles */
+.tcp-flags-table {
+  display: table;
+  table-layout: auto;
 }
 
-/* Alternating row colors for better readability */
-.right-bar-table tr:nth-child(even) {
-  background-color: #f9f9f9; /* Light gray for even rows */
+.tcp-flags-table tr:nth-child(even) {
+  background-color: #f9f9f9;
 }
 
-.right-bar-table tr:nth-child(odd) {
-  background-color: #fff; /* White for odd rows */
+.tcp-flags-table tr:nth-child(odd) {
+  background-color: #fff;
 }
 
-/* Para asegurar que el contenedor de la tabla permita scroll horizontal */
-.right-bar-table-container {
+/* TCP table container for proper scrolling */
+.tcp-flags-table-container {
   overflow-x: auto;
   border-radius: 1rem;
 }
+
+/* ROUTER TABLE specific styles */
+.router-table {
+  display: block;
+  table-layout: fixed;
+}
+
+.router-table th {
+  width: 33%;
+}
+
+/* ARP TABLE specific styles */
+.arp-table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* Define consistent column widths for ARP table */
+.arp-table th:nth-child(1),
+.arp-table td:nth-child(1) {
+  width: 33%;
+}
+
+.arp-table th:nth-child(2),
+.arp-table td:nth-child(2) {
+  width: 57%;
+}
+
+.arp-table th:nth-child(3),
+.arp-table td:nth-child(3) {
+  width: 10%; /* Ensure consistent width for remove button column */
+}

src/utils/constants/css_constants.ts

@@ -20,7 +20,10 @@ export const CSS_CLASSES = {
   RIGHT_BAR_START_BUTTON: "right-bar-start-button",
 
   // Table
-  TABLE: "table",
+  TABLE: "table-base",
+  TCP_FLAGS_TABLE: "tcp-flags-table",
+  ROUTER_TABLE: "router-table",
+  ARP_TABLE: "arp-table",
   RIGHT_BAR_TABLE: "right-bar-table",
   TOGGLE_TABLE: "toggle-table",
   TABLE_WRAPPER: "table-wrapper",